.cpm-crm-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpm-crm-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

#cpm-crm-modal .cpm-crm-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    text-align: left;
    /* v1.7.5: el popup se inyecta en el DOM del sitio, así que HEREDA el color
       de texto del tema. En sitios con texto blanco por defecto (fondos
       oscuros, como abogadovalenca.com.ar) lo que se escribía en el popup
       quedaba invisible sobre la caja blanca. Se fija el color acá y en cada
       campo, con !important para ganarle a los temas que lo fuerzan con más
       especificidad o con su propio !important. */
    color: #111827 !important;
}

/* Los textos del popup llevan su color explícito (!important) para no depender
   del tema del sitio. El botón de WhatsApp mantiene el suyo (blanco sobre verde). */

#cpm-crm-modal .cpm-crm-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #999 !important;
}

#cpm-crm-modal .cpm-crm-modal-content label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
    color: #111827 !important; /* el tema del sitio puede pintar los label de blanco */
}

#cpm-crm-modal .cpm-crm-modal-content input[type="text"],
#cpm-crm-modal .cpm-crm-modal-content input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 15px;
    margin-bottom: 6px;
    box-sizing: border-box;
    /* Texto oscuro sobre fondo blanco, siempre (v1.7.5). */
    color: #111827 !important;
    background-color: #fff !important;
    /* WebKit suele pintar el texto de los campos con esta propiedad aparte. */
    -webkit-text-fill-color: #111827;
}

#cpm-crm-modal .cpm-crm-modal-content input::placeholder,
#cpm-crm-modal .cpm-crm-modal-content input::-webkit-input-placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

/* ---- v1.7.0: modo computadora (email + reCAPTCHA) ---- */

/* Campo de email: aparece solo en computadora, debajo del nombre. */
.cpm-crm-campo-email {
    margin-top: 12px;
}

/* Trampa anti-bot: fuera de la pantalla (una persona no la ve, un bot
   que completa todos los campos, sí). */
.cpm-crm-honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Casilla de reCAPTCHA (el widget se dibuja al abrir el popup). */
.cpm-crm-recaptcha {
    margin: 12px 0 4px;
}

/* ---- Diagnóstico del captcha (solo administradores) ---- */
.cpm-crm-diag {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    font-size: 12px;
}

#cpm-crm-modal .cpm-crm-diag-titulo {
    margin: 0 0 6px;
    font-weight: 600;
    color: #475569 !important;
}

#cpm-crm-modal .cpm-crm-diag-lista {
    margin: 0 0 8px;
    padding-left: 16px;
    color: #64748b !important;
    line-height: 1.6;
}

#cpm-crm-modal .cpm-crm-diag-lista strong {
    color: #475569 !important;
}

#cpm-crm-modal .cpm-crm-diag-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #334155 !important;
}

.cpm-crm-diag-btn:hover:not(:disabled) {
    background: #e2e8f0;
}

#cpm-crm-modal .cpm-crm-diag-resultado {
    margin: 8px 0 0;
    color: #64748b !important;
    line-height: 1.5;
}

#cpm-crm-modal .cpm-crm-error {
    color: #d9534f !important; /* el rojo del aviso no se pisa nunca */
    font-size: 13px;
    margin: 0 0 10px;
}

/* Preview del mensaje que se enviará por WhatsApp: aparece debajo del
   input (y arriba del botón) solo cuando el nombre no está vacío.
   El nombre va en <strong> (negrita), igual que en el mensaje real,
   donde WhatsApp lo pinta en negrita con *asteriscos*. */
#cpm-crm-modal .cpm-crm-preview {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #334155 !important;
    word-break: break-word;
}

#cpm-crm-modal .cpm-crm-preview strong {
    color: #0f172a !important;
}

#cpm-crm-modal .cpm-crm-btn {
    width: 100%;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

.cpm-crm-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}

.cpm-crm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}