/*
 * Cotizador en línea, presentado como asistente de cuatro pasos.
 *
 * El riel de progreso encabeza todo y solo una vista está montada a la vez.
 * En los pasos 2 y 3 el contenido se parte en dos columnas: trabajo a la
 * izquierda, totales pegados a la derecha. En móvil los totales bajan a una
 * barra fija.
 */

.cotw-seccion { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

.cotw {
    --cotw-marca: 46px;
    position: relative;
}

/* ── Riel de progreso ────────────────────────────────────────────────────── */
.cotw__riel {
    position: relative;
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.cotw__riel ol {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Línea que une los centros de las cuatro marcas: con cuatro columnas iguales
   el primer centro cae en el 12,5 % y el último en el 87,5 %. */
.cotw__riel-pista {
    position: absolute;
    top: calc(var(--cotw-marca) / 2 - 1.5px);
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--web-primary) 16%, #fff);
    overflow: hidden;
}
.cotw__riel-avance {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--web-primary), var(--web-accent));
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.cotw__paso-boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: center;
    color: var(--web-body);
    cursor: pointer;
}
.cotw__paso-boton:disabled { cursor: default; opacity: .55; }

.cotw__paso-marca {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--cotw-marca);
    height: var(--cotw-marca);
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--web-primary) 18%, #fff);
    background: #fff;
    color: var(--web-body);
    font-weight: 800;
    font-size: var(--fs-base);
    transition: transform .3s ease, background-color .3s ease,
                border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.cotw__paso-check { display: none; font-size: 1.15rem; }

.cotw__paso-texto strong {
    display: block;
    font-family: var(--web-fuente-titulo);
    font-size: var(--fs-sm);
    color: var(--web-ink);
    line-height: 1.25;
}
.cotw__paso-texto small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--web-body);
}

/* Paso en curso: anillo vivo y marca en color de marca. */
.cotw__paso.is-activo .cotw__paso-marca {
    background: var(--web-primary);
    border-color: color-mix(in srgb, var(--web-primary) 28%, #fff);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--web-primary) 32%, transparent);
}
.cotw__paso.is-activo .cotw__paso-texto strong { color: var(--web-primary-dark); }

/* Paso superado: la cifra da paso al visto bueno. */
.cotw__paso.is-hecho .cotw__paso-marca {
    background: var(--web-success);
    border-color: color-mix(in srgb, var(--web-success) 25%, #fff);
    color: #fff;
}
.cotw__paso.is-hecho .cotw__paso-num { display: none; }
.cotw__paso.is-hecho .cotw__paso-check { display: block; }
.cotw__paso.is-hecho .cotw__paso-boton:not(:disabled):hover .cotw__paso-marca {
    transform: scale(1.06);
}

.cotw__paso-boton:focus-visible {
    outline: none;
}
.cotw__paso-boton:focus-visible .cotw__paso-marca {
    outline: 3px solid var(--web-accent);
    outline-offset: 3px;
}

/* ── Vistas ──────────────────────────────────────────────────────────────── */
.cotw__vista { outline: none; }
.cotw__vista:not([hidden]) { animation: cotwEntrar .35s cubic-bezier(.22, .8, .3, 1); }

@keyframes cotwEntrar {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* `minmax(0, …)` en vez de `1fr`: sin él, una tarjeta de examen con nombre
   largo estira la columna más allá de la pantalla y recorta el contenido. */
.cotw__cols {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}
.cotw__cols > * { min-width: 0; }

.cotw__tarjeta {
    padding: clamp(1.25rem, .9rem + 1.4vw, 2rem);
    border: 1px solid var(--web-line);
    border-radius: var(--web-radius);
    background: #fff;
    box-shadow: var(--web-shadow-sm);
}

.cotw__encabezado { margin-bottom: 1.5rem; }
.cotw__encabezado h2 { font-size: var(--fs-xl); margin: 0 0 .35rem; }
.cotw__encabezado p { font-size: var(--fs-sm); margin: 0; max-width: 60ch; }

.cotw__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--web-line);
}
.cotw__pie-nota {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--web-body);
}
.cotw__pie-nota .web-icono { color: var(--web-primary); }

.cotw__captcha-campo { max-width: 9rem; text-transform: uppercase; }

/* Mientras se recalculan precios, el trabajo queda inerte pero visible. */
.cotw.is-cargando .cotw__vista:not([hidden]) { opacity: .55; pointer-events: none; }

/* ── Panel lateral de totales ────────────────────────────────────────────── */
.cotw__panel { box-shadow: var(--web-shadow); }
.cotw__panel-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-lg);
    margin: 0 0 1.1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--web-line);
}
.cotw__panel-titulo .web-icono { color: var(--web-primary); }
.cotw__atras { margin-top: .6rem; }

/* ── Buscador del catálogo ───────────────────────────────────────────────── */
.cotw__buscador {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .5rem .35rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--web-line);
    border-radius: 999px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cotw__buscador:focus-within {
    border-color: var(--web-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--web-primary) 14%, transparent);
}
.cotw__buscador > .web-icono { color: var(--web-primary); flex: 0 0 auto; }
.cotw__buscador input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--web-ink);
}
.cotw__buscador input:focus { outline: none; }
.cotw__buscador input::-webkit-search-cancel-button { cursor: pointer; }
.cotw__buscador-conteo {
    flex: 0 0 auto;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--web-primary-soft);
    color: var(--web-primary-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* ── Paso 3: empresa, detalle y ajustes ──────────────────────────────────── */
.cotw__empresa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    border-radius: var(--web-radius-sm);
    background: var(--web-primary-soft);
}
.cotw__empresa-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--web-ink);
}
.cotw__empresa-datos .web-icono { color: var(--web-primary-dark); margin-right: .25rem; }

.cotw__tabla { overflow-x: auto; margin-bottom: 1.5rem; }

.cotw__detalle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.cotw__detalle thead th {
    padding: .6rem .75rem;
    border-bottom: 2px solid var(--web-line);
    text-align: left;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--web-body);
    white-space: nowrap;
}
.cotw__detalle tbody th,
.cotw__detalle tbody td {
    padding: .75rem;
    border-bottom: 1px dashed var(--web-line);
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
}
.cotw__detalle tbody th strong { display: block; color: var(--web-ink); font-weight: 700; }
.cotw__detalle tbody th small { color: var(--web-body); font-size: var(--fs-xs); }
.cotw__detalle-subtotal { font-weight: 800; color: var(--web-primary-dark); white-space: nowrap; }
.cotw__detalle tbody tr:hover { background: color-mix(in srgb, var(--web-primary) 3%, #fff); }

.cotw__ajustes {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    margin-bottom: 1.25rem;
}
.cotw__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cotw__fieldset legend {
    padding: 0;
    margin-bottom: .5rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--web-ink);
}

/* ── Paso 4: cierre ──────────────────────────────────────────────────────── */
.cotw__exito { text-align: center; max-width: 46rem; margin-inline: auto; }
.cotw__exito h2 { font-size: var(--fs-2xl); margin: 0 0 .5rem; }
.cotw__exito .web-lead { margin-inline: auto; max-width: 46ch; }

.cotw__sello {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--web-success);
    color: #fff;
    font-size: 2.5rem;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--web-success) 35%, transparent);
    animation: cotwSello .5s cubic-bezier(.2, .9, .3, 1.4);
}
.cotw__sello::after {
    content: '';
    position: absolute;
    width: 76px; height: 76px;
    border-radius: 50%;
    border: 2px solid var(--web-success);
    animation: cotwOnda 1.6s ease-out infinite;
}

@keyframes cotwSello {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes cotwOnda {
    from { transform: scale(1); opacity: .5; }
    to   { transform: scale(1.7); opacity: 0; }
}

.cotw__marcador {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    margin: 1.75rem 0;
    padding: 0;
    border-radius: var(--web-radius-sm);
    overflow: hidden;
    background: var(--web-line);
}
.cotw__marcador > div { padding: 1rem .75rem; background: var(--web-sand); }
.cotw__marcador dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--web-body);
    margin-bottom: .25rem;
}
.cotw__marcador dd {
    margin: 0;
    font-family: var(--web-fuente-titulo);
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--web-ink);
    /* El consecutivo es largo: se estrecha antes que partirse en dos renglones. */
    font-stretch: 95%;
    white-space: nowrap;
}
.cotw__marcador > div:first-child dd { font-size: var(--fs-base); letter-spacing: -.01em; }
.cotw__marcador > div:last-child dd { color: var(--web-primary-dark); }

.cotw__exito-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.cotw__reenvio {
    text-align: left;
    max-width: 26rem;
    margin-inline: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--web-line);
}
.cotw__reenvio label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--web-ink);
}

/* ── Catálogo ────────────────────────────────────────────────────────────── */
/* Con 70+ exámenes la lista se desplaza dentro de su propio marco: así los
   filtros y los totales no se pierden de vista al recorrerla. */
.cot__lista {
    display: grid;
    gap: .75rem;
    max-height: min(58vh, 38rem);
    overflow-y: auto;
    padding: .35rem .5rem .35rem .35rem;
    border: 1px solid var(--web-line);
    border-radius: var(--web-radius);
    background: linear-gradient(var(--web-sand), transparent 12%);
    /* Reserva para que el borde de foco de las tarjetas no quede recortado. */
    scroll-padding-block: .5rem;
}

.cot__item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--web-line);
    border-radius: var(--web-radius-sm);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cot__item:hover { border-color: var(--web-accent); box-shadow: var(--web-shadow-sm); }
.cot__item.is-agregado {
    border-color: var(--web-primary);
    background: color-mix(in srgb, var(--web-primary) 5%, #fff);
    box-shadow: inset 3px 0 0 var(--web-primary);
}

.cot__item-icono {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--web-primary-soft);
    color: var(--web-primary-dark);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.cot__item-info { min-width: 0; }
.cot__item-info h3 {
    font-size: var(--fs-base);
    margin: 0 0 .1rem;
    overflow-wrap: break-word;
}
.cot__item-info p { font-size: var(--fs-xs); margin: 0; color: var(--web-body); }

.cot__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .5rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: #FFF4E5;
    color: #A15C00;
    font-weight: 700;
}

.cot__item-precio { text-align: right; white-space: nowrap; }
.cot__item-precio strong { display: block; font-size: var(--fs-base); color: var(--web-ink); }
.cot__item-precio small { font-size: var(--fs-xs); color: var(--web-body); }

/* El catálogo es público, pero las tarifas solo salen tras el paso 1. */
.cot__item-precio--oculto {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--web-sand);
    color: var(--web-body);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.cot__item-precio--oculto .web-icono { color: var(--web-primary); }

/* ── Selector de cantidad ────────────────────────────────────────────────── */
.cot__stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--web-primary);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.cot__stepper button {
    width: 38px; height: 40px;
    border: 0;
    background: var(--web-primary-soft);
    color: var(--web-primary-dark);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}
.cot__stepper button:hover { background: var(--web-primary); color: #fff; }
.cot__stepper input {
    width: 58px;
    height: 40px;
    min-height: 0;
    border: 0;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: var(--web-ink);
    -moz-appearance: textfield;
}
.cot__stepper input::-webkit-outer-spin-button,
.cot__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Lista breve del panel ───────────────────────────────────────────────── */
.cot__items { display: grid; gap: .6rem; max-height: 18rem; overflow-y: auto; margin-bottom: 1rem; }
.cot__vacio { font-size: var(--fs-sm); color: var(--web-body); margin: 0; }

.cot__linea {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .6rem;
    padding: .55rem .25rem;
    border-bottom: 1px dashed var(--web-line);
    font-size: var(--fs-sm);
    animation: entrarLinea .25s ease;
}
.cot__linea strong { display: block; color: var(--web-ink); font-weight: 700; }
.cot__linea small { color: var(--web-body); }
.cot__linea-quitar {
    border: 0;
    background: transparent;
    color: var(--web-danger);
    cursor: pointer;
    font-size: 1rem;
    padding: .35rem;
    border-radius: 6px;
    line-height: 0;
}
.cot__linea-quitar:hover { background: #FDEDEC; }

@keyframes entrarLinea {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
}

.cot__totales { margin: 0 0 1rem; display: grid; gap: .4rem; }
.cot__totales > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cot__totales dt { font-size: var(--fs-sm); color: var(--web-body); margin: 0; }
.cot__totales dd { margin: 0; font-weight: 700; color: var(--web-ink); }
.cot__total { padding-top: .6rem; border-top: 2px solid var(--web-line); }
.cot__total dt { font-size: var(--fs-base); font-weight: 700; color: var(--web-ink); }
.cot__total dd {
    font-family: var(--web-fuente-titulo);
    font-size: var(--fs-xl);
    color: var(--web-primary-dark);
    font-weight: 800;
}

.cot__nota { font-size: var(--fs-xs); color: var(--web-body); margin-bottom: 1rem; }

.cot__reenvio-fila { display: flex; gap: .5rem; }
.cot__reenvio-fila input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: .6rem .8rem;
    border: 1px solid var(--web-line);
    border-radius: var(--web-radius-sm);
    font: inherit;
}

/* ── Barra inferior móvil ────────────────────────────────────────────────── */
.cot__barra { display: none; }

/* ── Anchos ──────────────────────────────────────────────────────────────── */
@media (min-width: 62rem) {
    .cotw__cols { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 2rem; }
    .cotw__lateral { position: sticky; top: calc(var(--web-header-h) + 1.25rem); }
}

@media (max-width: 61.99rem) {
    .cot__item { grid-template-columns: auto 1fr; grid-template-areas: "icono info" "precio accion"; row-gap: .75rem; }
    .cot__item-icono { grid-area: icono; }
    .cot__item-info { grid-area: info; }
    .cot__item-precio { grid-area: precio; text-align: left; }
    .cot__item-accion { grid-area: accion; justify-self: end; }
}

@media (max-width: 47.99rem) {
    /* El riel se aprieta: quedan las marcas y el rótulo del paso en curso. */
    .cotw { --cotw-marca: 38px; }
    .cotw__paso-texto small { display: none; }
    .cotw__paso-texto strong { font-size: var(--fs-xs); }
    .cotw__paso:not(.is-activo) .cotw__paso-texto strong { opacity: .7; }

    /* En pantallas estrechas el contador estorba más de lo que informa. */
    .cotw__buscador-conteo { display: none; }
    .cot__lista { max-height: none; }

    .cot__barra {
        position: fixed;
        inset: auto 0 68px;
        z-index: 66;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .75rem 1rem;
        background: var(--web-ink);
        color: #fff;
        box-shadow: 0 -6px 20px rgba(20, 41, 63, .28);
        animation: subirBarra .25s ease;
    }
    .cot__barra strong { display: block; font-size: var(--fs-lg); }
    .cot__barra small { font-size: var(--fs-xs); opacity: .8; }
    .cot__barra .web-btn { --btn-bg: #fff; --btn-fg: var(--web-primary-dark); }

    .cot__items { max-height: none; }

    /* La tabla de revisión se vuelve fichas apiladas. */
    .cotw__detalle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cotw__detalle tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .35rem .75rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--web-line);
    }
    .cotw__detalle tbody th,
    .cotw__detalle tbody td { padding: 0; border: 0; }
    .cotw__detalle tbody th { grid-column: 1 / -1; }
    .cotw__detalle tbody td[data-titulo]::before {
        content: attr(data-titulo) ': ';
        font-size: var(--fs-xs);
        color: var(--web-body);
    }
    .cotw__detalle tbody td:last-child { grid-row: 1; grid-column: 2; justify-self: end; }
}

@keyframes subirBarra {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cot__linea, .cot__barra, .cotw__sello, .cotw__vista:not([hidden]) { animation: none !important; }
    .cotw__sello::after { display: none; }
    .cotw__riel-avance { transition: none; }
}