@charset "utf-8";

/* =====================================================================
   FORMULARIOS — Teatro Andino Kusi Wasi (Design System, Fase 6)

   Un solo estilo para todos los formularios del sitio público:
     · páginas de acceso (login, registro, recuperar, nueva contraseña, verificar)
     · ventana "Cotizar mi evento" y la caja de comentario de cada Show

   Filosofía (DESIGN_SYSTEM.md §20): CAMPO CLARO sobre PANEL OSCURO.
     Panel   → Tierra Cálida, borde dorado al 35 %, esquina de 20 px
     Etiqueta→ siempre visible arriba del campo (nunca solo el placeholder)
     Campo   → Crema, 48 px de alto, esquina de 12 px, borde 1,5 px (5,2 : 1 sobre crema)
     Foco    → borde Oro Claro + anillo de 3 px (nunca se quita el contorno sin reemplazo)
     Error   → borde rojo #b3261e (5,7 : 1) + mensaje en #ff6b6b con ícono
     Éxito   → mensaje en #7bd88f con ícono

   Se carga después del CSS de cada página; las páginas conservan solo la colocación.
   ===================================================================== */

/* ───────────── Panel de las páginas de acceso ───────────── */
.login-form {
    padding: var(--space-6) var(--space-5);
    background: rgba(34, 24, 19, 0.94);          /* --color-surface-raised con un poco de transparencia sobre la foto */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    gap: var(--space-4);
    text-align: left;
}
@media (max-width: 400px) {
    .login-form { padding: var(--space-5) var(--space-4); }
}

/* ───────────── Etiquetas ───────────── */
.login-form .input-group label,
#modalReserva label:not(.btn):not(.section-label):not(.form-check-label),
.comentario-card label.form-label {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-text);
}
#modalReserva label.small { font-size: var(--font-size-label); }   /* Bootstrap la achica a 14 px */

/* Título de cada bloque de la ventana de reserva */
.section-label {
    display: block;
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-divider);
    font-family: var(--font-ui);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--color-secondary);
}

/* ───────────── Campos (input, select, textarea) ───────────── */
.form-control-dark,
.login-form .input-group input:where(:not([type="checkbox"], [type="radio"], [type="hidden"])),
.input-comentario {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--touch-target);
    padding: 10px 14px;
    background-color: var(--color-surface-light);
    color: var(--color-text-on-light);
    border: 1.5px solid var(--color-border-on-light);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--font-size-input);            /* 16 px: por debajo, iOS hace zoom al enfocar */
    line-height: 1.5;
    outline: none;
    transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
textarea.form-control-dark,
textarea.input-comentario {
    min-height: 120px;
    resize: vertical;
}
select.form-control-dark { cursor: pointer; }

.form-control-dark::placeholder,
.login-form .input-group input::placeholder,
.input-comentario::placeholder {
    color: #5f584e;                               /* 6,1 : 1 sobre crema */
    opacity: 1;
}

.form-control-dark:focus,
.login-form .input-group input:focus,
.input-comentario:focus,
.phone-wrapper:focus-within {
    background-color: var(--color-surface-light);
    color: var(--color-text-on-light);
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px rgba(228, 180, 74, 0.55);
    outline: none;
}

/* Error: borde rojo (también cuando el navegador ya marcó el campo como inválido tras escribir) */
.form-control-dark[aria-invalid="true"],
.form-control-dark.is-invalid,
.form-control-dark:user-invalid,
.login-form .input-group input[aria-invalid="true"],
.login-form .input-group input:user-invalid,
.input-comentario[aria-invalid="true"] {
    border-color: var(--color-error-on-light);
    box-shadow: 0 0 0 1px var(--color-error-on-light);
}

.form-control-dark:disabled,
.login-form .input-group input:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-text-disabled);
    border-color: transparent;
    cursor: not-allowed;
}

/* ───────────── Teléfono con selector de país (registro) ───────────── */
.phone-wrapper {
    min-height: var(--touch-target);
    background: var(--color-surface-light);
    border: 1.5px solid var(--color-border-on-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.phone-wrapper .flag-selector {
    align-self: stretch;
    background: var(--color-secondary);
    border-right: 1.5px solid var(--color-border-on-light);
    border-radius: 0;
}
.phone-wrapper .flag-selector:hover { background: var(--color-accent); }
.phone-wrapper .flag-icon,
.phone-wrapper .dial-code,
.phone-wrapper .arrow { color: var(--color-text-on-light); }
.login-form .phone-wrapper input[type="tel"] {
    min-height: 0;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
.country-list li .cdial { color: #5f584e; }                     /* antes #888: 3,5 : 1 sobre blanco */

/* ───────────── Casillas ───────────── */
.remember-me,
#modalReserva .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding-left: 0;
    color: var(--color-text);
    font-size: var(--font-size-secondary);
    cursor: pointer;
}
.remember-me input[type="checkbox"],
#modalReserva .form-check-input {
    flex: none;
    float: none;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}
/* la ayuda bajo la casilla ocupa su propia línea, alineada con el texto */
#modalReserva .form-check { flex-wrap: wrap; }
#modalReserva .form-check .form-text {
    flex: 1 0 100%;
    margin: 0 0 0 36px;
    font-size: var(--font-size-small);
}
#modalReserva .form-check-input {
    background-color: var(--color-surface-light);
    border: 1.5px solid var(--color-border-strong);
}
#modalReserva .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
#modalReserva .form-check-input:focus-visible,
.remember-me input:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: none;
}

/* ───────────── Selector "Persona natural / Empresa" ───────────── */
#modalReserva .btn-outline-gold {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-text);
    border: 1.5px solid rgba(243, 238, 228, 0.4);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
}
#modalReserva .btn-outline-gold:hover {
    background: rgba(243, 238, 228, 0.08);
    border-color: var(--color-text);
    color: var(--color-text);
}
#modalReserva .btn-check:checked + .btn-outline-gold {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    color: var(--color-text-on-primary);
}
#modalReserva .btn-check:focus-visible + .btn-outline-gold {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: none;
}

/* ───────────── Ayudas y textos de apoyo ───────────── */
.modal-subtitle {
    font-size: var(--font-size-secondary);
    color: var(--color-text-secondary);
}
#modalReserva .text-muted,
#modalReserva .form-text {
    color: var(--color-text-secondary) !important;
}
.phone-hint,
#matchHint,
#strengthText {
    font-family: var(--font-ui);
    font-size: var(--font-size-small);
}

/* ───────────── Ventana "Cotizar mi evento" como panel ───────────── */
#modalReserva .modal-content {
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg);
}

/* ───────────── Estados: avisos, requisitos y fortaleza ───────────── */
.aviso {
    --aviso-color: var(--color-info);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.35);
    border: 1.5px solid var(--aviso-color);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--font-size-secondary);
    line-height: 1.5;
    text-align: left;
    color: var(--color-text);
}
.aviso > i {
    flex: none;
    margin-top: 3px;
    color: var(--aviso-color);
}
.aviso--error   { --aviso-color: var(--color-error); }
.aviso--exito   { --aviso-color: var(--color-success); }
.aviso--alerta  { --aviso-color: var(--color-warning); }

#reqList { font-size: var(--font-size-small); }
#reqList li { color: var(--color-text-secondary); }
#reqList li.req-ok { color: var(--color-success); }
.hint-warn  { color: var(--color-warning); }
.hint-ok    { color: var(--color-success); font-weight: 600; }
.hint-error { color: var(--color-error);   font-weight: 600; }

/* ───────────── Ver / ocultar contraseña ───────────── */
.campo-clave { position: relative; }
.login-form .campo-clave input { padding-right: 52px; }
.toggle-clave {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    color: #5f584e;
    font-size: 1.1rem;
    cursor: pointer;
}
.toggle-clave:hover { color: var(--color-text-on-light); }
.toggle-clave:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

/* ───────────── Código de 6 dígitos (verificar cuenta) ───────────── */
.otp-wrapper input {
    background: var(--color-surface-light);
    color: var(--color-text-on-light);
    border: 1.5px solid var(--color-border-on-light);
    border-radius: var(--radius-md);
    caret-color: auto;
}
.otp-wrapper input:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px rgba(228, 180, 74, 0.55);
}
.otp-wrapper input.filled { border-color: var(--color-success-on-light); }
.otp-wrapper input.error-input {
    border-color: var(--color-error-on-light);
    box-shadow: 0 0 0 1px var(--color-error-on-light);
}
.timer-text, .timer-text span { font-size: var(--font-size-small); }

/* ───────────── Enlaces de las páginas de acceso ───────────── */
.footer-links .accent,
.login-container .accent {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer-links .accent:hover,
.login-container .accent:hover { color: var(--color-text); }
.footer-links,
.footer-links p { font-size: var(--font-size-secondary); }