/* Inicio (templates/resguardo/listar.html.twig): el tablero del taller. Cada coche con su matrícula y lo que falta. */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.inicio-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: .25rem 0 1rem; }
.inicio-cabeza h1 { font-size: 2.5rem; margin: 0; }

/* Nuevo resguardo: fijo abajo en el móvil, donde llega el pulgar. */
.nuevo-resguardo { display: flex; gap: .6rem; align-items: stretch; }
.nuevo-resguardo form { display: flex; }
.boton.secundario { color: var(--marca); border-color: var(--marca); background: var(--superficie); }
@media (max-width: 759px) {
    .nuevo-resguardo {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 20;
        padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
        background: color-mix(in oklch, var(--superficie) 94%, transparent);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--borde);
        box-shadow: 0 -6px 18px oklch(25% 0.02 35 / 8%);
    }
    .nuevo-resguardo { flex-wrap: wrap; }
    .nuevo-resguardo form:first-child { flex: 1 1 12rem; min-width: 0; }
    .nuevo-resguardo form:first-child .boton { width: 100%; font-size: 1.3rem; padding-inline: .8rem; }
    .nuevo-resguardo form:last-child { flex: 0 1 6.6rem; }
    .nuevo-resguardo .secundario { width: 100%; padding-inline: .5rem; font-size: .95rem; line-height: 1.05; text-align: center; }
    /* Lo que recibe el foco no queda debajo de la barra. */
    html { scroll-padding-bottom: 7rem; }
    /* Con el teclado abierto en el buscador, la barra estorba. */
    body:has(.buscador input:focus) .nuevo-resguardo { visibility: hidden; }
}
/* Móvil en horizontal o letra muy grande: la barra deja de ser fija para no comerse la pantalla. */
@media (max-width: 759px) and (max-height: 30rem), (max-width: 22rem) {
    .nuevo-resguardo { position: static; padding: 0; background: none; backdrop-filter: none; border: 0; box-shadow: none; }
}

/* Buscador */
.buscador { position: relative; display: flex; gap: .5rem; margin-bottom: .9rem; }
.buscador svg { position: absolute; left: .8rem; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--tenue); pointer-events: none; }
.buscador input[type=search] { padding-left: 2.6rem; min-height: 48px; font-size: 1.05rem; border-radius: 12px; }
.buscador .boton { border-radius: 12px; }

/* Filtros por estado, con cuántos hay en cada uno. Pasan a otra línea: el activo siempre está a la vista. */
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.filtros a {
    display: inline-flex; align-items: center; gap: .45rem; flex: none;
    min-height: 44px; padding: .3rem .4rem .3rem .7rem;
    border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie);
    color: var(--texto); text-decoration: none; font: 600 1.05rem/1 var(--rotulo);
}
.filtros a::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tenue); display: none; }
.filtros a.por_firmar::before { display: block; background: var(--aviso); }
.filtros a.en_taller::before { display: block; background: var(--marca); }
.filtros a.sin_terminar::before { display: block; background: var(--tenue); }
.filtros a.entregados::before { display: block; background: var(--ok); }
.filtros .cuenta { min-width: 1.5rem; padding: .2rem .4rem; border-radius: 999px; background: var(--superficie-2); text-align: center; font-variant-numeric: tabular-nums; }
.filtros a[aria-current="page"] { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
.filtros a[aria-current="page"] .cuenta { background: oklch(100% 0 0 / 18%); }
.filtros a[aria-current="page"]::before { background: var(--sobre-marca); }

/* Cola de coches */
.cola { padding: .25rem 0; overflow: hidden; }
.cola .vacio { margin: 0; padding: 1.5rem 1rem; color: var(--tenue); }
.coche {
    --estado: var(--marca);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem .75rem;
    padding: 1rem 2.4rem 1rem 1rem;
    color: inherit;
    text-decoration: none;
    border-left: 4px solid var(--estado);
    transition: background-color var(--transicion);
}
.coche:hover { background: var(--superficie-2); }
.coche:focus-visible { outline-offset: -3px; }
/* Flecha: toda la fila se toca. */
.coche::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: .6rem; height: .6rem; border: solid var(--tenue); border-width: 2px 2px 0 0; rotate: 45deg; translate: 0 -50%; }
.coche.pendiente_firma, .coche.presupuesto_pendiente_firma, .coche.retirada_pendiente_firma { --estado: var(--aviso); }
.coche.cerrado { --estado: var(--ok); }
.coche.borrador { --estado: var(--borde); }
.coche .estado { justify-self: end; white-space: normal; text-align: right; border-radius: 12px; }
@media (max-width: 22rem) {
    .coche { grid-template-columns: minmax(0, 1fr); }
    .coche .estado { justify-self: start; text-align: left; }
}
.coche-quien, .coche-paso, .coche .rasgos { grid-column: 1 / -1; }
.coche-quien { line-height: 1.3; }
.coche-quien strong { font-weight: 650; display: block; font-size: 1.05rem; }
.coche-quien span { color: var(--tenue); }
.coche-paso { font: 600 1.2rem/1.15 var(--rotulo); color: var(--estado); }
.coche.borrador .coche-paso { color: var(--tenue); }
.lista .rasgos { display: flex; flex-wrap: wrap; gap: .35rem; }
.rasgo { font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--borde); color: var(--tenue); white-space: nowrap; }
.rasgo.tipo { border-color: var(--marca); color: var(--marca); font-weight: 600; }

@media (min-width: 760px) {
    .cola .lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cola .lista li:nth-child(2) { border-top: 0; }
    .cola .lista li:nth-child(odd) { border-right: 1px solid var(--borde); }
}