/* Solicitud pública de cotización (auto/moto) — wizard de 3 pasos sin login.
   Pantalla FORM sobre el sistema nuevo (modern-ui-new.css): acá solo lo que es
   genuinamente propio de esta pantalla (card pública, stepper, checkboxes sueltos y
   pantalla de éxito). Los form controls, botones y select2 salen de la base.

   Sin reglas de dark mode a propósito: es una pantalla pública sin login (clientes
   anónimos, sin tema propio) — tiene que verse siempre en claro. El template fuerza
   data-theme claro antes de pintar; no agregar `html[data-theme="dark"]` acá. */

/* ---------- Layout de página pública ---------- */

.cotizacion-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 16px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Única superficie con radio/sombra/recorte: header, stepper y content son secciones
   planas apiladas adentro (sus esquinas quedan redondeadas solas por el overflow:hidden). */
.cotizacion-card {
    background: var(--woker-surface);
    border-radius: var(--woker-radius);
    box-shadow: var(--woker-card-shadow);
    overflow: hidden;
}

.cotizacion-header {
    background: var(--woker-surface);
    padding: 22px 20px 18px;
    text-align: center;
    border-bottom: 1px solid var(--woker-border);
}

.cotizacion-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--woker-ink);
    margin: 0 0 8px;
    line-height: 1.3;
    /* Sin nowrap: "Cotización de Seguro Automotor/Motovehículo" no entra en una sola
       línea hasta ~430-500px y quedaba recortado por el overflow:hidden de la card
       (nowrap sin wrap ni ellipsis = texto invisible más allá del borde). Con wrap
       normal pasa a 2 líneas, centrado, en mobile/tablet chicos. */
}

.cotizacion-header p {
    font-size: 14px;
    color: var(--woker-muted);
    margin: 0;
}

.cotizacion-content {
    background: var(--woker-surface);
    padding: 22px 20px;
    flex: 1;
}

/* ---------- Stepper ---------- */

.stepper-wrapper {
    background: var(--woker-surface);
    padding: 18px 20px;
    border-bottom: 1px solid var(--woker-border);
}

.stepper-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.stepper-line {
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--woker-border);
    z-index: 0;
    transition: background .3s;
}

/* Los pasos completados van en el color de marca, no en verde: el verde semántico
   convivía mal con el violeta del paso actual. La jerarquía la da el peso, no el tono:
   completado = violeta suave, actual = violeta sólido y agrandado. */
.stepper-line.completed { background: var(--woker-violet); }

.stepper-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--woker-surface);
    border: 3px solid var(--woker-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--woker-muted);
    transition: all .3s;
    margin-bottom: 8px;
}

.step-circle.active {
    background: var(--woker-violet);
    border-color: var(--woker-violet);
    color: #fff;
    transform: scale(1.1);
}

.step-circle.completed {
    background: var(--woker-violet-soft);
    border-color: var(--woker-violet);
    color: var(--woker-violet);
}

.step-circle.completed::after { content: '✓'; font-size: 20px; }

.step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--woker-muted);
    text-align: center;
    max-width: 80px;
    line-height: 1.2;
}

.step-label.active { color: var(--woker-violet); font-weight: 700; }
.step-label.completed { color: var(--woker-violet); }

/* ---------- Pasos del form ---------- */

.step-content { display: none; }
.step-content.active { display: block; }
#step-success-content { display: block !important; }

.step-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--woker-ink);
    margin-bottom: 8px;
}

.step-subtitle {
    font-size: 14px;
    color: var(--woker-muted);
    margin-bottom: 18px;
    line-height: 1.5;
}

/* Año + ¿Es 0 km?: en la misma fila (col-6/col-6) en cualquier tablet/desktop y en el
   mobile típico. Sólo los teléfonos angostos de verdad (≤360px, ej. iPhone SE/Galaxy
   S9+) se apilan a ancho completo para que "¿Es 0 km?" entre sin recortarse. */
@media (max-width: 360px) {
    .row-anio-cerokm > .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-anio-cerokm .label-spacer { display: none; }
}

/* El aviso de "el año lo fijó el 0 km" va a lo ancho de toda la fila, no apretado
   bajo el input de año. El margen negativo compensa el margin-bottom del form-group
   de arriba para que quede pegado al campo que explica. */
.cero-km-info-slot .cero-km-info {
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

/* Fecha de nacimiento: día/mes/año en una sola fila */
.dob-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* min-width:0 pisa el "auto" por defecto de los flex items: sin esto, el mes largo
   ("Septiembre") fija su ancho mínimo por el nowrap del select2 y empuja el año afuera
   de la card en mobile angosto. Con min-width:0 los tres encogen parejo y el select2
   (overflow:hidden + ellipsis, ya en la base) trunca el texto en vez de desbordar. */
.dob-col { flex: 1; min-width: 0; }

/* Con 3 selects en ~72px cada uno (320px), el padding-izq/der genérico del select2 de
   la base (pensado para selects a ancho completo) le deja al texto ~20px y el mes
   ("Septiembre") queda en "S…". Acá, sólo para este trío, se lo recorta para dejarle
   más aire al texto sin tocar el resto de los selects del sistema. */
.dob-col .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: .5rem !important;
    padding-right: 1.25rem !important;
}

.dob-col .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: .15rem !important;
}

.error-message-dob { margin-top: 8px; }

.form-group { margin-bottom: 1rem; }

.error-message {
    font-size: 12px;
    color: var(--woker-danger);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.helper-text {
    font-size: 12px;
    color: var(--woker-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* La base no define .is-invalid: es un mecanismo propio de este wizard (validación en
   vivo por JS, sin pasar por el .errorlist de Django). Mismo criterio que avisos.css. */
.form-control.is-invalid,
select.is-invalid {
    border-color: var(--woker-danger);
}

.form-control.is-invalid:focus,
select.is-invalid:focus {
    border-color: var(--woker-danger);
    box-shadow: 0 0 0 3px var(--woker-danger-bg);
}

.select2-container--error .select2-selection {
    border-color: var(--woker-danger) !important;
}

.select2-container--error .select2-selection:focus {
    border-color: var(--woker-danger) !important;
    box-shadow: 0 0 0 3px var(--woker-danger-bg) !important;
}

/* Año en 0km: readonly con el año actual autocompletado (clase toggleada por JS) */
.form-control.is-readonly { background-color: var(--woker-surface-2); }

/* ---------- Checkboxes ---------- */

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--woker-surface-2);
    border-radius: var(--woker-radius);
}

/* .checkbox-item es el propio <label> (el checkbox y su texto van adentro, sin un
   <label for> aparte): así toda la fila es tap target, no sólo el cuadradito de 20px
   del input. Sin padding vertical: el alto de la fila lo da el checkbox, como antes
   —con padding el grupo de garaje/GNC/rastreador quedaba muy espaciado. */
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

/* Cero km: checkbox suelto junto al año, con el mismo look que .checkbox-group.
   min-height fijo en vez de padding vertical para que la caja mida exactamente lo
   mismo que el input de Año que tiene al lado (38px) y la fila quede pareja. */
.checkbox-item-solo {
    min-height: 38px;
    padding: 0 .75rem;
    background: var(--woker-surface-2);
    border-radius: 8px;
}

.checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--woker-violet);
    cursor: pointer;
}

.checkbox-item span {
    font-size: 14px;
    color: var(--woker-muted);
    cursor: pointer;
    font-weight: 500;
}

/* ---------- Botones del wizard ---------- */

.btn-group-stepper {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

/* Variante grande de los botones del sistema (.btn-purple / .btn-flat / .btn-minimal):
   a todo el ancho de su mitad y más alto, para un CTA cómodo en mobile. El espaciado
   ícono-texto ya lo da el gap de esas clases, no hace falta margin por <i>.
   min-width:0 + white-space:normal pisan el nowrap/flex-shrink:0 de la base: sin esto,
   "Obtener mi cotización" (btn-minimal) no encoge por debajo de su ancho de una sola
   línea y se recorta silenciosamente contra el overflow:hidden de la card en mobile
   angosto (<400px aprox). Con esto, si no entra en una línea pasa a dos, sin perder
   texto ni desbordar. */
.btn-stepper {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: .5rem .6rem;
    font-size: 15px;
    justify-content: center;
    white-space: normal;
    text-align: center;
}

.btn-cta {
    margin-top: 24px;
    padding: 11px 26px;
    font-size: 15px;
}

/* ---------- Resumen (paso 3, se completa por JS) ---------- */

.summary-card {
    background: var(--woker-surface-2);
    border-radius: var(--woker-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.summary-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--woker-ink);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--woker-border);
}

/* Antes vivían en modern-ui.css (legacy, ya no se linkea); las genera generarResumen() */
.summary-card-title { color: var(--woker-muted); font-size: .875rem; font-weight: 500; }
.summary-card-secondary { color: var(--woker-muted); font-size: .875rem; line-height: 1.4; }
.summary-card-secondary div { margin-bottom: .25rem; }
.summary-card-secondary div:last-child { margin-bottom: 0; }

/* ---------- Error del servidor ---------- */

.alert-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid color-mix(in srgb, var(--woker-danger) 32%, transparent);
    border-radius: var(--woker-radius-control);
    background: var(--woker-danger-bg);
    color: var(--woker-danger);
    font-size: .875rem;
}

/* ---------- Pantalla de éxito ---------- */

.success-message {
    padding: 30px 20px;
    text-align: center;
    animation: fadeInUp .5s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-icon {
    width: 72px;
    height: 72px;
    background: var(--woker-violet);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    font-size: 34px;
    box-shadow: 0 4px 20px rgba(var(--woker-violet-rgb), .3);
    animation: scaleIn .5s ease-out .2s both;
}

@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.success-message h2 {
    font-size: 23px;
    font-weight: 700;
    color: var(--woker-ink);
    margin-bottom: 6px;
    line-height: 1.3;
}

.success-message .success-subtitle {
    font-size: 16px;
    color: var(--woker-muted);
    font-weight: 600;
    margin-bottom: 14px;
}

.success-message p {
    font-size: 15px;
    color: var(--woker-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

.success-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 32px 0;
}

.success-info-card {
    background: var(--woker-surface-2);
    border-radius: var(--woker-radius);
    padding: 20px;
    text-align: left;
    border: 1px solid var(--woker-border);
    transition: transform .2s, box-shadow .2s;
}

.success-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.success-info-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.success-info-card-icon {
    width: 40px;
    height: 40px;
    background: var(--woker-surface);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--woker-ok);
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.success-info-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--woker-muted);
    margin: 0;
}

.success-info-card-content {
    font-size: 16px;
    font-weight: 600;
    color: var(--woker-ink);
    margin: 0;
    word-break: break-word;
}

.success-info-card-label {
    font-size: 12px;
    color: var(--woker-subtle);
    margin-top: 4px;
}

.cotizacion-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--woker-violet);
    color: #fff;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    margin: 14px 0;
    box-shadow: 0 2px 8px rgba(var(--woker-violet-rgb), .3);
}

/* Texto y datos del productor debajo del mensaje de éxito */
.success-followup { margin-top: 14px; }

.success-productor-info {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--woker-border);
}

/* justify-content: el bloque de éxito centra por text-align, que no alcanza para un
   flex container — sin esto la etiqueta quedaba a la izquierda y el nombre centrado. */
.success-productor-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: var(--woker-muted);
    margin-bottom: 4px;
}

.success-productor-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--woker-ink);
    margin: 0;
}

.next-steps {
    background: var(--woker-ok-bg);
    border-left: 4px solid var(--woker-ok);
    border-radius: 8px;
    padding: 20px;
    margin: 32px 0;
    text-align: left;
}

.next-steps-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--woker-ok);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.next-steps-list { list-style: none; padding: 0; margin: 0; }

.next-steps-list li {
    font-size: 14px;
    color: var(--woker-ok);
    margin-bottom: 8px;
    padding-left: 24px;
    position: relative;
    line-height: 1.5;
}

.next-steps-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--woker-ok);
    font-weight: 700;
}

.next-steps-list li:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */

@media (min-width: 768px) {
    .cotizacion-container { max-width: 600px; padding: 40px 20px; }
    .step-label { font-size: 12px; }
    .success-info-grid { grid-template-columns: 1fr 1fr; }
    .success-message { padding: 34px 28px; }
}

@media (max-width: 520px) {
    .cotizacion-header h1 { font-size: 20px; }
}