/* ===========================================================================
   COTIZADOR AUTOMÁTICO — Diagnóstico Ley 21.719
   Wizard mobile-first, una pregunta por pantalla, sin distracciones.
   Tema claro reutilizando el mismo bloque de overrides ya validado en
   diagnostico-express.css (.dgx-page) — mismos colores, mismo contraste
   WCAG verificado, para que el cotizador se sienta parte de la misma
   experiencia que /proteccion-datos/.
   =========================================================================== */

/* #main-content trae 70px de padding-top pensado para compensar el header
   fijo del sitio (ver base.css) — el cotizador no tiene header, así que se
   anula acá para que .cotz-page arranque pegado arriba. */
body.cotz-body #main-content { padding-top: 0; }

.cotz-page {
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F8FAFC;
    --color-bg-tertiary: #F1F5F9;
    --color-bg-card: #FFFFFF;
    --color-text-primary: #111111;
    --color-text-secondary: #1A1A1A;
    --color-text-muted: #33383F;
    --color-text-on-dark: #FFFFFF;
    --color-border: #E5E5E5;
    --color-border-hover: #C9C9C9;
    --color-text-accent: #111111;

    min-height: 100vh;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
}

/* ---- Barra superior: logo chico + progreso ---- */
.cotz-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-4) var(--space-3);
}
.cotz-topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 640px;
    margin: 0 auto var(--space-3);
}
.cotz-topbar__brand { font-weight: var(--font-bold); font-size: var(--text-sm); color: var(--color-text-primary); text-decoration: none; }
.cotz-topbar__step { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cotz-progress {
    max-width: 640px;
    margin: 0 auto;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    overflow: hidden;
}
.cotz-progress__bar {
    height: 100%;
    width: 20%;
    background: linear-gradient(90deg, #F4D800, #FF3737);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

/* ---- Escenario: una pregunta por pantalla ---- */
.cotz-stage {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}
.cotz-step {
    display: none;
    width: 100%;
    max-width: 640px;
    animation: cotz-fade-in 0.25s ease;
}
.cotz-step.is-active { display: block; }
@keyframes cotz-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cotz-step__eyebrow { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.08em; text-transform: uppercase; color: #B8281E; margin-bottom: var(--space-2); }
.cotz-step__title { font-size: var(--text-2xl); font-weight: var(--font-extrabold); line-height: 1.25; margin-bottom: var(--space-2); }
.cotz-step__help { font-size: calc(var(--text-sm) + 2px); color: var(--color-text-muted); margin-bottom: var(--space-6); line-height: 1.5; }

/* ---- Textarea (paso 1) ---- */
.cotz-textarea {
    width: 100%;
    min-height: 160px;
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    resize: vertical;
    transition: border-color var(--transition-base);
}
.cotz-textarea:focus { outline: none; border-color: #F4D800; box-shadow: 0 0 0 3px rgba(244, 216, 0, 0.25); }
.cotz-textarea::placeholder { color: #4B5563; opacity: 1; }
.cotz-counter { text-align: right; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.cotz-counter.is-near-limit { color: #B8281E; font-weight: var(--font-bold); }

/* ---- Opciones (radio/checkbox estilo tarjeta) ---- */
.cotz-options { display: flex; flex-direction: column; gap: var(--space-3); }
.cotz-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
    background: var(--color-bg-primary);
}
.cotz-option:hover { border-color: var(--color-border-hover); }
.cotz-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cotz-option__mark {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: 2px solid var(--color-border-hover);
    display: flex; align-items: center; justify-content: center;
    color: #111;
    font-size: 13px;
    font-weight: var(--font-bold);
}
.cotz-option input[type="radio"] + .cotz-option__mark { border-radius: 50%; }
.cotz-option input[type="checkbox"] + .cotz-option__mark { border-radius: 6px; }
.cotz-option__mark::after { content: ""; }
.cotz-option input:checked + .cotz-option__mark { border-color: #111; background: #111; color: #F4D800; }
.cotz-option input:checked + .cotz-option__mark::after { content: "✓"; }
.cotz-option:has(input:checked),
.cotz-option.is-checked { border-color: #111; background: #FFFBEA; }
.cotz-option input:focus-visible + .cotz-option__mark { outline: 2px solid #111; outline-offset: 2px; }
.cotz-option__label { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.cotz-option__sublabel { display: block; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-normal); margin-top: 2px; }

/* ---- Paso 5: identidad + formulario contacto ---- */
.cotz-field { margin-bottom: var(--space-4); }
.cotz-field label { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-2); }
.cotz-field input[type="text"],
.cotz-field input[type="email"],
.cotz-field input[type="tel"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-family-base);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}
.cotz-field input:focus { outline: none; border-color: #F4D800; box-shadow: 0 0 0 3px rgba(244, 216, 0, 0.25); }
.cotz-field input::placeholder { color: #4B5563; opacity: 1; }
.cotz-field--empresa { display: none; }
.cotz-field--empresa.is-visible { display: block; }
.cotz-consent { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-secondary); }
.cotz-consent input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }

.cotz-error { color: #B8281E; font-size: var(--text-sm); font-weight: var(--font-semibold); margin-top: var(--space-3); display: none; }
.cotz-error.is-visible { display: block; }

/* ---- Barra fija de navegación (Atrás / Continuar, siempre visibles) ----
   Un único mensaje de error vive acá arriba (id="cotz-error"), en vez de
   uno por paso al final de cada lista de opciones — así siempre queda
   visible justo sobre el botón, sin depender de hasta dónde scrolleó el
   usuario dentro del paso. */
.cotz-nav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
}
.cotz-error--nav { max-width: 640px; width: 100%; margin: 0 auto; text-align: center; }
.cotz-nav__inner { max-width: 640px; margin: 0 auto; display: flex; gap: var(--space-3); width: 100%; }
.cotz-btn {
    flex: 1;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    border: none;
    cursor: pointer;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cotz-btn:active { transform: scale(0.98); }
.cotz-btn--primary { background: #F4D800; color: #111; }
.cotz-btn--primary:hover { box-shadow: 0 8px 20px rgba(244, 216, 0, 0.4); }
.cotz-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.cotz-btn--ghost { background: #fff; color: #111; border: 2px solid var(--color-border-hover); flex: 0 0 auto; min-width: 96px; }
.cotz-btn--ghost:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- Animación de cálculo (pantalla completa) ---- */
.cotz-calculating {
    position: fixed; inset: 0; z-index: 50;
    background: #050707;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: var(--space-6);
}
.cotz-calculating.is-active { display: flex; }
.cotz-calc-ring {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #F4D800, #FF3737, #F4D800);
    margin-bottom: var(--space-8);
    animation: cotz-spin 2.2s linear infinite;
}
.cotz-calc-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #050707;
}
@keyframes cotz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cotz-calc-ring { animation: none; } }
.cotz-calc-message {
    color: #fff;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    min-height: 1.5em;
}

/* ---- Pantalla de resultado ---- */
.cotz-result {
    display: none;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--space-16);
    animation: cotz-fade-in 0.3s ease;
}
.cotz-result.is-active { display: block; }
.cotz-result__badge { display: inline-block; padding: var(--space-1) var(--space-3); background: #E7F8EE; color: #16A34A; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-bold); margin-bottom: var(--space-4); }
.cotz-result__title { font-size: var(--text-3xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-1); }
.cotz-result__number { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.cotz-result__card {
    border: 2px solid #111;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-6);
}
.cotz-result__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.cotz-result__row:last-child { border-bottom: none; }
.cotz-result__row dt { color: var(--color-text-muted); }
.cotz-result__row dd { margin: 0; text-align: right; font-weight: var(--font-semibold); max-width: 60%; }
.cotz-result__totals { background: #111; color: #fff; }
.cotz-result__totals .cotz-result__row { border-bottom-color: rgba(255,255,255,0.12); }
.cotz-result__totals dt { color: rgba(255,255,255,0.7); }
.cotz-result__totals dd { color: #fff; }
.cotz-result__total-row dd { font-size: var(--text-xl); color: #F4D800; }
.cotz-result__notice { font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-bg-secondary); border-left: 3px solid #111; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.cotz-result__declared-lead { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.cotz-result__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.cotz-result__email-note { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-top: var(--space-4); }

/* ---- Confirmación "Contratar ahora" ---- */
.cotz-confirm-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(5, 7, 7, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.cotz-confirm-overlay.is-active { display: flex; }
.cotz-confirm-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 460px;
    width: 100%;
}
.cotz-confirm-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.cotz-confirm-card p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); line-height: 1.5; }
.cotz-confirm-card .cotz-consent { margin-top: 0; margin-bottom: var(--space-5); }
.cotz-confirm-actions { display: flex; gap: var(--space-3); }

/* ---- Modal "Resolver dudas por llamada" (botón oficial de Google) ---- */
.cotz-call-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(5, 7, 7, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.cotz-call-overlay.is-active { display: flex; }
.cotz-call-card { background: #fff; border-radius: var(--radius-xl); padding: var(--space-6); max-width: 460px; width: 100%; text-align: center; }
.cotz-call-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.cotz-call-close { margin-top: var(--space-4); background: none; border: none; color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; }

@media (min-width: 640px) {
    .cotz-step__title { font-size: var(--text-3xl); }
    .cotz-stage { padding-top: var(--space-16); }
}

/* ---- Modal embebido en /proteccion-datos/ ----
   Reutiliza .svc-modal-overlay (home-sections.css) para el fondo, el
   fade in/out y el enganche con [data-modal]/Escape/click-afuera ya
   existente. A diferencia de la página standalone (que ocupa toda la
   ventana y scrollea el documento), acá el wizard vive dentro de una
   tarjeta acotada — con fondo visible alrededor, esquinas redondeadas
   y una altura que se ajusta al contenido de cada paso (con un techo
   de 90vh y scroll propio si el contenido es más largo) — para que se
   sienta como un modal real y no como una segunda página que tapa todo. */
#modal-cotizador .cotz-modal-inner {
    position: relative;
    width: 100%;
    max-width: 720px;
}
#modal-cotizador .cotz-page {
    min-height: 0;
    max-height: 90vh;
    max-width: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(244, 216, 0, 0.12);
}
/* El escenario ya no fuerza flex-grow: cada paso ocupa solo el alto que
   necesita su contenido, en vez de estirarse para llenar la tarjeta. */
#modal-cotizador .cotz-stage { flex: 0 1 auto; }
/* Deja hueco para el botón de cerrar en la esquina de la tarjeta. */
#modal-cotizador .cotz-topbar { padding-right: calc(var(--space-4) + 2.5rem); }
.cotz-modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 30;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(17, 17, 17, 0.85);
    color: #fff;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cotz-modal-close:hover { background: #111; }