/* Cada par comparte la fila de etiquetas. Las ayudas y los errores quedan junto
   al control, sin cambiar la posición del campo vecino. */
.bio-form-fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 0;
    align-items: stretch;
}

.bio-form-fila > .form-group {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    min-width: 0;
}

.bio-form-fila > .form-group > .info-label { align-self: end; }

.bio-form-control { min-width: 0; }

.bio-form-otro { margin-top: 8px; }

/* Trampa para bots: fuera de pantalla, pero no display:none (algunos no lo completan). */
.bio-form-senuelo {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Una opción larga ocupa dos líneas y .checkbox-item centra verticalmente;
   sin esto la casilla queda a media altura del texto. Es lo único que se ajusta
   del componente, no una copia propia. */
.checkbox-group .checkbox-item { align-items: flex-start; }

.checkbox-group .checkbox-item input[type="checkbox"] { margin-top: 2px; }

/* El stepper de la referencia reparte el ancho entre todos los pasos, y le alcanza
   porque el de auto tiene cuatro. Acá hay ramas de seis (caución), donde los rótulos
   no entran y antes la fila scrolleaba adentro de su caja: en el celular había que
   arrastrarla para saber cuántos pasos faltaban. Ahora el stepper nunca scrollea —
   o entran todos los rótulos, o pasa a modo compacto (solo los círculos, con el
   rótulo del paso en curso debajo), que entra en cualquier ancho. Quién manda es el
   ancho real disponible, no el viewport: con tres pasos entran los rótulos donde con
   seis no. La clase la pone bio-formulario.js midiendo. */
.stepper-wrapper { overflow: hidden; }

.stepper-step {
    flex: 1 1 0;
    min-width: 0;
}

.stepper-step .step-label {
    max-width: 100%;
    padding: 0 2px;
    overflow-wrap: anywhere;
}


.stepper-wrapper.stepper-compacto .step-label { display: none; }

.stepper-wrapper.stepper-compacto .step-circle {
    width: 28px;
    height: 28px;
    border-width: 2px;
    font-size: 13px;
    margin-bottom: 0;
}

.stepper-wrapper.stepper-compacto .step-circle.completed::after { font-size: 15px; }

.stepper-wrapper.stepper-compacto .stepper-line { top: 14px; }

.stepper-paso-actual {
    display: none;
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--woker-violet);
    text-align: center;
    line-height: 1.3;
}

.stepper-compacto .stepper-paso-actual { display: block; }

.stepper-paso-actual .stepper-paso-numero {
    color: var(--woker-muted);
    font-weight: 600;
}

/* ---------- Escritorio ----------
   El layout (riel con productor y stepper vertical a la izquierda, campos a la derecha) es
   el de la cotización de auto/moto: la pantalla lleva también .cotizacion-publica-auto.
   Acá va solo lo propio del bio, colgado de .cotizacion-publica-bio: la previa del armador
   reusa las mismas clases dentro de un teléfono de 390px y tiene que seguir como mobile. */
@media (min-width: 992px) {
    /* En el stepper vertical cada rótulo tiene su renglón, así que entran siempre; pero el
       JS mide el ancho del riel contra todos los pasos y lo marcaría compacto. */
    .cotizacion-publica-bio .stepper-wrapper.stepper-compacto .step-label { display: block; }

    .cotizacion-publica-bio .stepper-wrapper.stepper-compacto .step-circle {
        width: 40px;
        height: 40px;
        border-width: 3px;
        font-size: 16px;
        margin-bottom: 0;
    }

    .cotizacion-publica-bio .stepper-wrapper.stepper-compacto .step-circle.completed::after { font-size: 20px; }
    .cotizacion-publica-bio .stepper-wrapper.stepper-compacto .stepper-line { top: 20px; }
    .cotizacion-publica-bio .stepper-wrapper.stepper-compacto .stepper-paso-actual { display: none; }
}

/* ---------- Los botones, siempre en el mismo lugar ----------
   El paso se estira hasta el pie de la card, así que Volver y Continuar quedan siempre a la
   misma distancia del borde de abajo, tenga el paso dos preguntas o diez. En el celular la
   card además llega hasta abajo de la pantalla. Si el paso es más largo que la pantalla, los
   botones se quedan pegados abajo mientras se scrollea. Para eso la card
   recorta con `clip` y no con `hidden`: `hidden` la vuelve contenedor de scroll y el sticky
   se pegaría a ella, que no scrollea. */
.cotizacion-publica-bio .cotizacion-card { overflow: hidden; overflow: clip; }

.cotizacion-publica-bio .cotizacion-content,
.cotizacion-publica-bio #formulario-bio {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.cotizacion-publica-bio #formulario-bio { width: 100%; }

.cotizacion-publica-bio .cotizacion-content .step-content.active {
    display: flex !important;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
}

.cotizacion-publica-bio .cotizacion-content { padding-bottom: 8px; }

.cotizacion-publica-bio .cotizacion-content .btn-group-stepper {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding: 22px 0 14px;
    background: var(--woker-surface);
}

@media (max-width: 991.98px) {
    .cotizacion-publica-bio .cotizacion-card {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
    }
}

/* En escritorio la card mide lo que pide el paso o el riel de la izquierda, lo que sea más
   alto, sin estirarse a la pantalla: los botones van al pie de la card, siempre a la misma
   distancia del borde, aunque el riel sea más alto que el paso. */
@media (min-width: 992px) {
    .cotizacion-publica-bio .cotizacion-content { padding-bottom: 36px; }
    .cotizacion-publica-bio .cotizacion-content .btn-group-stepper { padding: 30px 0 20px; }
}

/* Campos de a dos, desde el mismo corte que auto/moto. Además del campo suelto, el bio
   tiene filas: la de un campo ocupa una columna y el par emparejado (día/mes) las dos.
   Dos campos sueltos vecinos comparten la fila de etiquetas (subgrid), así los controles
   quedan a la misma altura aunque una etiqueta ocupe dos líneas. El texto largo va a
   lo ancho. */
@media (min-width: 1200px) {
    .cotizacion-publica-bio .bio-paso-cuerpo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        align-items: start;
        align-content: start;
    }

    .cotizacion-publica-bio .bio-paso-cuerpo > * { grid-column: 1 / -1; }

    .cotizacion-publica-bio .bio-paso-cuerpo > .bio-form-fila-unica,
    .cotizacion-publica-bio .bio-paso-cuerpo > .bio-form-fila-unica > .form-group {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }

    .cotizacion-publica-bio .bio-paso-cuerpo > .bio-form-fila-unica { grid-column: auto; }
    .cotizacion-publica-bio .bio-paso-cuerpo > .bio-form-fila-ancha { grid-column: 1 / -1; }
    .cotizacion-publica-bio .bio-form-fila-unica > .form-group > .info-label { align-self: end; }

    .cotizacion-publica-bio .bio-form-fila { column-gap: 24px; }
}

/* Adjuntos: el input nativo queda oculto pero enfocable (es el que se manda y se valida);
   se ve el botón que lo abre y un chip por archivo elegido. Lo arma bio-formulario.js. */
.bio-adjuntos-entrada {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.bio-adjuntos-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bio-adjuntos-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid var(--woker-violet);
    border-radius: 10px;
    background: var(--woker-surface);
    color: var(--woker-violet);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--woker-transicion);
}

.bio-adjuntos-boton:hover { background: var(--woker-violet-tint); }

.bio-adjuntos-entrada:focus-visible + .bio-adjuntos-fila .bio-adjuntos-boton {
    outline: 2px solid var(--woker-violet);
    outline-offset: 2px;
}

.bio-adjuntos-entrada.is-invalid + .bio-adjuntos-fila .bio-adjuntos-boton {
    border-color: var(--woker-danger);
    color: var(--woker-danger);
}

/* Con el cupo lleno el botón no desaparece: elegir más igual avisa el límite. */
.bio-adjuntos-fila.esta-lleno .bio-adjuntos-boton { opacity: .55; }

.bio-adjuntos-contador {
    font-size: 12.5px;
    color: var(--woker-subtle-texto);
    font-variant-numeric: tabular-nums;
}

.bio-adjuntos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bio-adjuntos-chips:not(:empty) { margin-top: 12px; }

.bio-adjuntos-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--woker-violet-soft);
    border-radius: 999px;
    background: var(--woker-violet-tint);
    color: var(--woker-ink);
    font-size: 12.5px;
}

.bio-adjuntos-chip:not(:has(.bio-adjuntos-quitar)) { padding-right: 10px; }

.bio-adjuntos-nombre {
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bio-adjuntos-quitar {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--woker-subtle-texto);
    font-size: 11px;
    cursor: pointer;
}

.bio-adjuntos-quitar:hover { background: var(--woker-violet-soft); color: var(--woker-danger); }

.bio-adjuntos-quitar:focus-visible { outline: 2px solid var(--woker-violet); outline-offset: 1px; }

/* ---------- La confirmación ----------
   Sin pasos ni botones que anclar abajo: la card mide lo que su texto y queda al medio de la
   pantalla. Los márgenes automáticos le ganan al `margin-bottom: auto` del escritorio y al
   estirado del celular, sin pelearle al !important de justify-content-center. */
.cotizacion-publica-bio.bio-form-enviado .cotizacion-card {
    flex: none;
    margin-top: auto;
    margin-bottom: auto;
}

/* ---------- Mientras se envía ---------- */
.bio-form-enviando {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 255, 255, .8);
    animation: bio-form-aparecer .2s ease-out;
}

.bio-form-enviando[hidden] { display: none; }

.bio-form-enviando-caja {
    max-width: 320px;
    padding: 28px 32px;
    text-align: center;
    background: var(--woker-surface);
    border: 1px solid var(--woker-border);
    border-radius: var(--woker-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.bio-form-enviando-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 3px solid var(--woker-violet-tint);
    border-top-color: var(--woker-violet);
    border-radius: 50%;
    animation: bio-form-girar .8s linear infinite;
}

.bio-form-enviando-titulo { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--woker-ink); }

.bio-form-enviando-texto { margin: 0; font-size: 14px; color: var(--woker-muted); }

@keyframes bio-form-girar { to { transform: rotate(360deg); } }

@keyframes bio-form-aparecer { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .bio-form-enviando { animation: none; }
    .bio-form-enviando-spinner { animation-duration: 2.4s; }
}

/* Selector de fechas (daterangepicker). El color de marca ya lo pone modern-ui-new.css; acá va
   lo que el plugin trae distinto de la página: Arial, esquinas de 4px y la flechita. Queda con
   la misma caja que el desplegable de select2. */
.daterangepicker {
    font-family: inherit;
    border: 1px solid var(--woker-border-control);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.daterangepicker::before,
.daterangepicker::after { display: none; }

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-family: inherit;
    border: 1px solid var(--woker-border-control);
    border-radius: var(--woker-radius-control);
    padding: 1px 0;
}

/* Inter es más ancha que Arial: con el 56% del plugin, "Septiembre" no entra. */
.daterangepicker select.monthselect { width: 60%; }

.daterangepicker select.yearselect { width: 36%; }

.daterangepicker td.available:hover,
.daterangepicker th.available:hover { background-color: var(--woker-violet-tint); }

.daterangepicker .drp-buttons .btn { font-family: inherit; border-radius: var(--woker-radius-control); }