/* ============================================================
   Cromang Ingenieria - Modal de captacion de leads WhatsApp
   ============================================================ */
:root{
  --cromang-brand:#f39c12;
  --cromang-brand-dark:#e08e0b;
  --cromang-wa:#25D366;
  --cromang-wa-dark:#1da851;
}

/* Overlay */
.clm-overlay{
  position:fixed; inset:0; z-index:2147483000;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  -webkit-tap-highlight-color:transparent;
}
.clm-overlay.clm-open{ display:flex; }

/* Caja del modal */
.clm-modal{
  width:100%; max-width:440px;
  background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
  animation:clm-pop .18s ease-out;
  max-height:92vh; overflow-y:auto;
}
@keyframes clm-pop{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }

/* Cabecera */
.clm-head{
  background:var(--cromang-brand);
  color:#fff; padding:16px 20px;
  position:relative;
}
.clm-head h3{ margin:0; font-size:18px; line-height:1.25; color:#fff; }
.clm-head p{ margin:4px 0 0; font-size:12.5px; opacity:.95; color:#fff; }
.clm-wa-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--cromang-wa); color:#fff;
  font-size:11px; font-weight:bold;
  padding:3px 8px; border-radius:20px; margin-bottom:8px;
}
.clm-close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; color:#fff;
  font-size:26px; line-height:1; cursor:pointer; opacity:.9;
}
.clm-close:hover{ opacity:1; }

/* Cuerpo / formulario */
.clm-body{ padding:18px 20px 20px; }
.clm-field{ margin-bottom:12px; }
.clm-field label{
  display:block; font-size:12.5px; font-weight:bold;
  color:#333; margin-bottom:4px;
}
.clm-field label .clm-req{ color:#c0392b; }
.clm-field input,
.clm-field select,
.clm-field textarea{
  width:100%; box-sizing:border-box;
  border:1px solid #ccc; border-radius:8px;
  padding:10px 11px; font-size:14px; color:#111;
  background:#fff; font-family:inherit;
}
.clm-field input:focus,
.clm-field select:focus,
.clm-field textarea:focus{
  outline:none; border-color:var(--cromang-brand);
  box-shadow:0 0 0 2px rgba(243,156,18,.20);
}
.clm-field textarea{ resize:vertical; min-height:64px; }
.clm-hint{ display:block; margin-top:4px; font-size:11px; color:#888; font-weight:normal; }

/* Honeypot: oculto para humanos */
.clm-hp{ position:absolute !important; left:-9999px !important; top:-9999px !important; height:0; width:0; overflow:hidden; }

/* Boton enviar */
.clm-submit{
  width:100%; border:0; border-radius:9px;
  background:var(--cromang-wa); color:#fff;
  font-size:16px; font-weight:bold; cursor:pointer;
  padding:13px 14px; margin-top:4px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease;
}
.clm-submit:hover{ background:var(--cromang-wa-dark); }
.clm-submit:disabled{ opacity:.7; cursor:default; }
.clm-submit svg{ width:20px; height:20px; fill:#fff; }

.clm-note{
  margin:12px 0 0; font-size:11.5px; color:#777; text-align:center; line-height:1.4;
}
.clm-error{
  display:none; margin:0 0 10px; font-size:12.5px;
  color:#b00020; background:#fde7ea; border:1px solid #f3c2ca;
  padding:8px 10px; border-radius:7px;
}
.clm-error.clm-show{ display:block; }

/* ============================================================
   Boton flotante de WhatsApp (reemplaza a los flotantes viejos)
   ------------------------------------------------------------
   Se ocultan los tres flotantes del plugin anterior:
     .whatsapp_chat_support  burbuja de WhatsApp con los asesores
     .wcs_fixed_left2        boton flotante de llamada (3213553778)
     .wcs_fixed_left3        boton flotante de llamada (3023878758)
   En su lugar queda un unico boton, el que abre el modal de leads.
   El markup sigue en las paginas: para volver atras basta con
   quitar estas reglas.
   ============================================================ */
.whatsapp_chat_support,
.wcs_fixed_left2,
.wcs_fixed_left3,
.wcs_fixed_right,
.wcs_fixed_right-2{ display:none !important; }

.clm-fab{
  position:fixed; z-index:2147482900;
  bottom:14px; right:20px;
  width:58px; height:58px; border-radius:50%;
  background:var(--cromang-wa); color:#fff;
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  -webkit-tap-highlight-color:transparent;
  animation:clm-fab-pulse 2.2s infinite;
  transition:transform .15s ease, background .15s ease;
}
.clm-fab:hover{ transform:scale(1.06); background:var(--cromang-wa-dark); }
.clm-fab svg{ width:32px; height:32px; fill:#fff; }
.clm-fab .clm-fab-tip{
  position:absolute; right:70px; white-space:nowrap;
  background:#333; color:#fff; font-family:Arial,Helvetica,sans-serif;
  font-size:12.5px; padding:6px 10px; border-radius:6px;
  opacity:0; pointer-events:none; transform:translateX(6px);
  transition:opacity .15s ease, transform .15s ease;
}
.clm-fab:hover .clm-fab-tip{ opacity:1; transform:none; }
.clm-fab .clm-fab-tip:after{
  content:''; position:absolute; top:50%; right:-5px; margin-top:-5px;
  border:5px solid transparent; border-left-color:#333;
}
@keyframes clm-fab-pulse{
  0%{ box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:480px){
  .clm-fab{ width:54px; height:54px; bottom:12px; right:14px; }
  .clm-fab .clm-fab-tip{ display:none; }
}

/* Responsive */
@media (max-width:480px){
  .clm-modal{ max-width:100%; border-radius:12px; }
  .clm-head h3{ font-size:16.5px; }
}


/* ============================================================
   Formularios convertidos a WhatsApp (ver js/cromang-lead-modal.js)
   ============================================================ */
form[data-clm="1"] .clm-submit-form{
  max-width:340px; margin-top:6px;
}
form[data-clm="1"] .form-group label{
  font-size:13px; font-weight:bold; color:#333;
}
form[data-clm="1"] .form-group label .required{ color:#c0392b; }
form[data-clm="1"] .clm-note{ text-align:left; }
.clm-form-msg{
  display:none; margin:0 0 14px; font-size:13px;
  padding:10px 12px; border-radius:7px;
}
.clm-form-msg.clm-show{ display:block; }
.clm-form-msg.clm-error{ color:#b00020; background:#fde7ea; border:1px solid #f3c2ca; }
.clm-form-msg.clm-ok{ color:#1d6b38; background:#e8f7ed; border:1px solid #b9e4c8; }