/*!
 * ssf-theme.css — alinea el motor de formularios (.ssf-*) con el diseño del sitio.
 *
 * No se toca ssf-forms.php: su CSS se imprime en wp_footer y esta hoja se carga
 * DESPUÉS, así que gana por orden de cascada sin necesidad de !important ni de
 * subir la especificidad.
 *
 * Todo se apoya en los tokens de style.css (--color-primary, --radius-*,
 * --shadow-*, --font-family…), de modo que si el theme cambia de paleta o de
 * tipografía, los formularios cambian con él y no hay dos fuentes de verdad.
 */

/* ── Contenedores ─────────────────────────────────────────────────────── */
.ssf-overlay {
    background: rgba(11, 26, 42, .62);
    padding: var(--space-4, 1rem);
}

.ssf-dialog {
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 20px 48px rgba(11, 26, 42, .22));
    border: 1px solid var(--color-border, #E9EEF7);
    font-family: var(--font-family);
    color: var(--color-text, #0B1A2A);
}

/* Cabecera: azul del sitio, como el resto de las cabeceras de sección. */
.ssf-dialog__hd {
    background: var(--color-primary, #005AD9);
    border-bottom: 0;
    padding: 1rem 1.25rem;
}

.ssf-dialog__title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-lg, 1.25rem);
    line-height: var(--line-height-tight, 1.2);
    color: var(--color-text-inverse, #fff);
    margin: 0;
}

.ssf-dialog__close {
    color: var(--color-text-inverse, #fff);
    opacity: .85;
    border-radius: var(--radius-sm, 6px);
    transition: opacity var(--transition-normal, .2s ease), background-color var(--transition-normal, .2s ease);
}
.ssf-dialog__close:hover,
.ssf-dialog__close:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .16);
}

.ssf-dialog__bd { padding: 1.25rem; }

/* ── Estructura del formulario ────────────────────────────────────────── */
.ssf-fs {
    border: 1px solid var(--color-border, #E9EEF7);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg, #fff);
    padding: 1rem;
}

.ssf-legend {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text, #0B1A2A);
    letter-spacing: .01em;
}

/* Etiquetas alineadas a la izquierda: centradas se leían como títulos. */
.ssf-fg > label,
.ssf-rep-hd > span {
    display: block;
    text-align: left;
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, .857rem);
    color: var(--color-text-secondary, #111827);
    margin-bottom: .35rem;
}

/* ── Campos ───────────────────────────────────────────────────────────── */
.ssf-input,
.ssf-form input[type="text"],
.ssf-form input[type="email"],
.ssf-form input[type="tel"],
.ssf-form input[type="number"],
.ssf-form select,
.ssf-form textarea {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text, #0B1A2A);
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border-light, #cbd5e1);
    border-radius: var(--radius-md, 8px);
    padding: .6rem .75rem;
    transition: border-color var(--transition-normal, .2s ease), box-shadow var(--transition-normal, .2s ease);
}

.ssf-input:hover,
.ssf-form select:hover { border-color: var(--color-primary, #005AD9); }

/* Foco visible: obligatorio para navegación por teclado. */
.ssf-input:focus,
.ssf-form input:focus,
.ssf-form select:focus,
.ssf-form textarea:focus {
    outline: 0;
    border-color: var(--color-primary, #005AD9);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 90, 217), .18);
}

/* Los placeholders con el gris de antes quedaban por debajo de AA. */
.ssf-form ::placeholder { color: var(--color-text-muted, #475569); opacity: 1; }

.ssf-form select:disabled,
.ssf-input:disabled {
    background: var(--color-bg-subtle, #f5f5f5);
    color: var(--color-text-muted, #475569);
    cursor: not-allowed;
}

.ssf-input.is-invalid,
.ssf-form input.is-invalid,
.ssf-form select.is-invalid {
    border-color: var(--color-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .16);
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.ssf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-inverse, #fff);
    background: var(--color-primary, #005AD9);
    border: 0;
    border-radius: var(--radius-md, 8px);
    padding: .8rem 1.25rem;
    cursor: pointer;
    transition: background-color var(--transition-normal, .2s ease), transform var(--transition-fast, .12s ease);
}
.ssf-submit:hover { background: var(--color-primary-dark, #003a8c); }
.ssf-submit:active { transform: translateY(1px); }
.ssf-submit:focus-visible { outline: 3px solid rgba(var(--color-primary-rgb, 0, 90, 217), .45); outline-offset: 2px; }
.ssf-submit:disabled { background: var(--color-border-light, #cbd5e1); color: var(--color-text-muted, #475569); cursor: not-allowed; }

.ssf-rep-actions button {
    font-family: var(--font-family);
    font-size: var(--font-size-sm, .857rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary, #005AD9);
    background: var(--color-primary-light, #F2F6FF);
    border: 1px solid var(--color-border, #E9EEF7);
    border-radius: var(--radius-md, 8px);
    padding: .45rem .8rem;
    cursor: pointer;
    transition: background-color var(--transition-normal, .2s ease);
}
.ssf-rep-actions button:hover { background: var(--color-bg-light, #F2F6FF); border-color: var(--color-primary, #005AD9); }

/* ── Avisos y estados ─────────────────────────────────────────────────── */
.ssf-alert {
    border-radius: var(--radius-md, 8px);
    padding: .7rem .9rem;
    font-size: var(--font-size-sm, .857rem);
    border: 1px solid transparent;
}
.ssf-alert--ok  { background: var(--color-success-light, #dcfce7); color: var(--color-success-dark, #166534); border-color: var(--color-success, #22c55e); }
.ssf-alert--err { background: var(--color-error-light, #fee2e2);  color: var(--color-error-dark, #991b1b);  border-color: var(--color-error, #ef4444); }

.ssf-total-msg { color: var(--color-error-dark, #991b1b); font-size: var(--font-size-sm, .857rem); font-weight: var(--font-weight-semibold, 600); }
.ssf-total-msg--ok { color: var(--color-success-dark, #166534); }

.ssf-charcount { color: var(--color-text-muted, #475569); font-size: var(--font-size-xs, .75rem); }

.ssf-success__ico { color: var(--color-success, #22c55e); }
.ssf-success__id  { font-family: var(--font-family); color: var(--color-text-secondary, #111827); font-weight: var(--font-weight-semibold, 600); }

/* ── Condiciones y política ───────────────────────────────────────────── */
.ssf-legal {
    background: var(--color-bg-light, #F2F6FF);
    border: 1px solid var(--color-border, #E9EEF7);
    border-radius: var(--radius-md, 8px);
    padding: .85rem 1rem;
}
.ssf-legal__details > summary {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary, #005AD9);
    cursor: pointer;
}
/* El cuerpo legal iba centrado y en gris claro: se pasa a alineado a la
   izquierda y al color de texto normal, que es lo legible en párrafos largos. */
.ssf-legal__body {
    text-align: left;
    color: var(--color-text, #0B1A2A);
    font-size: var(--font-size-sm, .857rem);
    line-height: var(--line-height-relaxed, 1.6);
}
.ssf-legal__body a { color: var(--color-primary, #005AD9); text-decoration: underline; }
.ssf-legal__body a:hover { color: var(--color-primary-dark, #003a8c); }

.ssf-check { display: flex; align-items: flex-start; gap: .5rem; text-align: left; }
.ssf-check input[type="checkbox"] { margin-top: .2rem; accent-color: var(--color-primary, #005AD9); width: 1.05rem; height: 1.05rem; }
.ssf-check label { font-size: var(--font-size-sm, .857rem); color: var(--color-text, #0B1A2A); }

/* ── Modo en línea ────────────────────────────────────────────────────── */
.ssf-inline {
    border: 1px solid var(--color-border, #E9EEF7);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg, #fff);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(11, 26, 42, .08));
    padding: 1.25rem;
}
.ssf-inline__title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-xl, 1.5rem);
    color: var(--color-text, #0B1A2A);
    margin: 0 0 1rem;
}

/* ── Móvil ────────────────────────────────────────────────────────────── */
@media (max-width: 47.999rem) {
    .ssf-overlay { padding: 0; align-items: flex-end; }
    .ssf-dialog { max-width: 100%; max-height: 94vh; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
    .ssf-dialog__bd { padding: 1rem; }
    .ssf-grid { grid-template-columns: 1fr; }
}

/* ── Accesibilidad ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ssf-dialog, .ssf-submit, .ssf-input, .ssf-rep-actions button { transition: none !important; }
    .ssf-submit:active { transform: none; }
}