/* Estilos de listados (Vehículos y Caja). Usar SOLO los tokens de estilo.css (colores, radios, sombras). */

/* ---------- piezas comunes ---------- */
.lst-linea { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-linea.sub { font-size: var(--t-s); margin-top: 2px; }
.lst-nada { color: var(--texto-3); }
.lst-nada-texto { padding: var(--e-2) 0; }

/* placa como chip de matrícula: blanca con marco oscuro en ambos modos */
.placa-sello.lst-placa {
  display: inline-flex; align-items: center; flex: none; font-size: var(--t-m); font-weight: 750; letter-spacing: .06em;
  padding: var(--e-1) var(--e-2); border-width: 1.5px; border-radius: var(--radio-xs); white-space: nowrap;
}

/* buscador con lupa */
.lst-buscar { position: relative; display: block; }
.lst-buscar > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; }
.lst-buscar .entrada { padding-left: 42px; text-transform: uppercase; font-family: var(--placa); font-feature-settings: var(--rasgos-placa); font-weight: 550; letter-spacing: .02em; }
.lst-buscar .entrada::placeholder { text-transform: none; font-family: var(--fuente); font-weight: 400; letter-spacing: -.011em; }

/* barra de filtros en su propia tarjeta */
.lst-filtros {
  display: grid; gap: var(--e-3) var(--e-4); align-items: end;
  grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
  margin-bottom: var(--e-4);
}
.lst-filtros .campo > span { display: block; font-size: var(--t-s); font-weight: 550; color: var(--texto-2); margin: 0 0 6px 4px; }
.lst-filtros .entrada { height: 48px; min-height: 48px; padding-top: 0; padding-bottom: 0; }
.lst-filtros .segmentos { display: flex; height: 48px; width: 100%; min-height: 48px; border-radius: var(--radio-s); padding: 3px; }
.lst-filtros .segmentos button { min-height: 42px; border-radius: 9px; }
@media (max-width: 1080px) {
  .lst-filtros { grid-template-columns: 1fr 1fr; }
  .lst-f-placa, .lst-f-estado { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lst-filtros { gap: var(--e-3); }
  .lst-filtros .segmentos button { padding: 0 var(--e-2); }
}

/* ---------- Vehículos › Dentro ---------- */
.lst-barra { display: flex; align-items: center; gap: var(--e-4); margin-bottom: var(--e-4); flex-wrap: wrap; }
.lst-barra .lst-buscar { flex: 1 1 280px; max-width: 420px; }
.lst-contador { display: flex; align-items: baseline; gap: var(--e-5); margin-left: auto; color: var(--texto-2); font-size: var(--t-m); }
.lst-contador b { color: var(--texto); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; margin-right: var(--e-1); }
.lst-contador .moneda { font-size: var(--t-s); }
.lst-contador:empty { display: none; }
@media (max-width: 640px) {
  .lst-barra { gap: var(--e-3); }
  .lst-barra .lst-buscar { flex-basis: 100%; max-width: none; }
  .lst-contador { margin-left: var(--e-1); justify-content: space-between; width: 100%; }
}

/* lista agrupada tipo iOS: una superficie, filas con separador interior */
.lst-grupo { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.lst-fila {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--e-4);
  width: 100%; min-height: 72px; padding: var(--e-3) var(--e-4) var(--e-3) var(--e-4);
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative;
  transition: background-color var(--rapido) var(--curva);
}
.lst-fila + .lst-fila::before {
  content: ""; position: absolute; top: 0; right: 0; left: calc(var(--e-4) + 64px + var(--e-4));
  border-top: .5px solid var(--separador);
}
.lst-fila:hover { background: color-mix(in srgb, var(--superficie) 96%, var(--texto)); }
.lst-fila:active { background: var(--relleno); }
.lst-fila:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acento); }
.lst-fila .miniatura { width: 64px; height: 48px; border-radius: var(--radio-xs); }
.lst-fila-texto { min-width: 0; }
.lst-fila-texto .lst-linea:first-child { display: flex; align-items: center; gap: var(--e-2); }
.lst-tipo { color: var(--texto-2); font-size: var(--t-s); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.lst-fila-cifras { display: grid; justify-items: end; text-align: right; line-height: 1.25; }
.lst-fila-cifras .sub { font-size: var(--t-s); margin-top: 2px; white-space: nowrap; }
.lst-monto { font-size: var(--t-l); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lst-monto .moneda, .lst-tabla .moneda, .lst-barras .moneda, .lst-anulado-monto .moneda, .lst-datos .moneda { font-size: var(--t-xs); vertical-align: .08em; }
.lst-chevron { width: 18px; height: 18px; color: var(--texto-3); }
.lst-grupo-vacio { box-shadow: var(--sombra); }
.lst-esqueleto { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-4); align-items: center; padding: var(--e-3) var(--e-4); min-height: 72px; }
.lst-esqueleto + .lst-esqueleto { border-top: .5px solid var(--separador); }
.lst-esq-texto { display: grid; gap: var(--e-2); }
@media (max-width: 640px) {
  .lst-fila { gap: var(--e-3); padding: var(--e-3); min-height: 68px; }
  .lst-fila + .lst-fila::before { left: calc(var(--e-3) + 56px + var(--e-3)); }
  .lst-fila .miniatura { width: 56px; height: 44px; }
  .lst-chevron { display: none; }
  .lst-monto { font-size: var(--t-base); }
}

/* ---------- tablas (Historial y Cobros) ---------- */
.lst-tabla-tarjeta { container-type: inline-size; padding-top: var(--e-4); padding-bottom: var(--e-3); }
.lst-tabla th { padding-top: var(--e-2); }
.lst-tabla td { vertical-align: middle; }
.lst-tabla .c-num { color: var(--texto-2); font-size: var(--t-s); }
.lst-tabla .c-cobro { font-weight: 650; }
.lst-tabla .c-tiempo, .lst-tabla .c-ent, .lst-tabla .c-sal { color: var(--texto-2); }
.lst-tabla .c-movil { display: none; }
.lst-tabla tbody tr[data-c] { cursor: pointer; }
.lst-tabla tbody tr[data-c]:focus-visible { outline: none; }
.lst-tabla tbody tr[data-c]:focus-visible td { background: var(--acento-suave); }
.lst-tabla td:first-child { border-radius: var(--radio-xs) 0 0 var(--radio-xs); }
.lst-tabla td:last-child { border-radius: 0 var(--radio-xs) var(--radio-xs) 0; }
.lst-tabla tr.lst-sin td, .lst-tabla tr.lst-cargando td { padding-left: 0; padding-right: 0; }
.lst-tabla tr.lst-sin:hover td, .lst-tabla tr.lst-cargando:hover td { background: none; }
.lst-tabla tr.lst-sin td { white-space: normal; }
.lst-tabla tr.lst-cargando td { padding-top: var(--e-3); padding-bottom: var(--e-3); }
.lst-tabla tr.lst-cargando .esqueleto { display: block; }

/* angosta: la tabla se vuelve lista de filas (sin scroll horizontal) */
@container (max-width: 860px) {
  .lst-tabla thead { display: none; }
  .lst-tabla, .lst-tabla tbody { display: block; }
  .lst-tabla tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "placa movil cobro" "placa movil estado";
    align-items: center; gap: 2px var(--e-3); padding: var(--e-3) 0; border-bottom: .5px solid var(--separador);
  }
  .lst-tabla tbody tr:last-child { border-bottom: 0; }
  .lst-tabla tbody tr td { display: none; padding: 0; border: 0; background: none !important; }
  .lst-tabla tbody tr:hover { background: color-mix(in srgb, var(--superficie) 96%, var(--texto)); }
  .lst-tabla tbody tr[data-c]:focus-visible { background: var(--acento-suave); }
  .lst-tabla tbody td.c-placa { display: flex; grid-area: placa; flex-direction: column; align-items: flex-start; gap: var(--e-1); }
  .lst-tabla tbody td.c-movil { display: block; grid-area: movil; min-width: 0; white-space: nowrap; }
  .lst-tabla tbody td.c-cobro { display: block; grid-area: cobro; text-align: right; }
  .lst-tabla tbody td.c-estado { display: block; grid-area: estado; text-align: right; }
  .lst-tabla tbody td.c-estado .etiqueta + .etiqueta { display: none; }
  .lst-cobros tbody tr { grid-template-areas: "placa movil cobro"; }
  .lst-tabla tbody tr.lst-sin, .lst-tabla tbody tr.lst-cargando { display: block; padding: var(--e-2) 0; }
  .lst-tabla tbody tr.lst-sin td, .lst-tabla tbody tr.lst-cargando td { display: block; }
  .lst-tabla tbody tr.lst-sin:hover { background: none; }
}
@media (max-width: 640px) {
  .lst-tabla tbody tr { min-height: 64px; }
}

/* ---------- detalle del ticket ---------- */
.lst-detalle > * + * { margin-top: var(--e-4); }
.lst-foto { border-radius: var(--radio-s); overflow: hidden; background: var(--superficie-2); aspect-ratio: 4 / 3; }
.lst-foto img { width: 100%; height: 100%; object-fit: cover; }
.lst-foto.sin-foto { aspect-ratio: auto; min-height: 96px; display: flex; align-items: center; justify-content: center; gap: var(--e-3); color: var(--texto-2); font-size: var(--t-m); }
.lst-foto.sin-foto .ico { color: var(--texto-3); }
.lst-detalle-cabeza { display: flex; align-items: center; gap: var(--e-4); }
.lst-detalle-cabeza .sub { margin-top: var(--e-1); }
.lst-detalle-total { display: grid; gap: 2px; padding: var(--e-4) var(--e-5); background: var(--ok-suave); border-radius: var(--radio-s); }
.lst-detalle-total small { font-size: var(--t-s); font-weight: 550; color: var(--ok); }
.lst-detalle-total b { font-size: var(--t-cifra); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.lst-seccion h4 { margin: 0 0 6px var(--e-4); font-size: var(--t-s); font-weight: 600; color: var(--texto-2); }
.lst-datos { background: var(--superficie-2); border-radius: var(--radio-s); }
.lst-dato { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); min-height: 44px; padding: var(--e-3) var(--e-4); }
.lst-dato + .lst-dato { box-shadow: inset 0 .5px 0 var(--separador); }
.lst-dato > span { color: var(--texto-2); font-size: var(--t-m); white-space: nowrap; }
.lst-dato > b { font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.lst-dato > b small { display: block; color: var(--texto-2); font-weight: 400; font-size: var(--t-s); }
.lst-dato-largo { flex-direction: column; align-items: stretch; gap: var(--e-1); }
.lst-dato-largo > b { text-align: left; white-space: normal; }
.lst-acciones { display: grid; gap: var(--e-3); padding-top: var(--e-2); }
.lst-acciones-imp { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-2); }
.lst-anular { color: var(--peligro); justify-self: center; }
.lst-anular:hover { background: var(--peligro-suave); }

/* ---------- Caja ---------- */
.lst-filtros-caja { grid-template-columns: auto minmax(150px, 1fr) minmax(150px, 1fr) auto; }
.lst-filtros-caja .lst-f-atajos .segmentos { width: auto; }
.lst-f-imprimir { min-height: 48px; }
@media (max-width: 1080px) {
  .lst-filtros-caja { grid-template-columns: 1fr 1fr; }
  .lst-filtros-caja .lst-f-atajos { grid-column: 1 / -1; }
  .lst-filtros-caja .lst-f-atajos .segmentos { width: 100%; }
  .lst-f-imprimir { grid-column: 1 / -1; }
}

.lst-resumen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-6); align-items: center; }
.lst-resumen-total { display: grid; gap: var(--e-2); min-width: 0; }
.lst-resumen-total > small { color: var(--texto-2); font-weight: 550; font-size: var(--t-m); }
.lst-resumen-total .total-grande { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.lst-metrica { background: var(--superficie-2); border-radius: var(--radio-s); padding: var(--e-3) var(--e-4); min-width: 0; }
.lst-metrica small { display: block; color: var(--texto-2); font-size: var(--t-s); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-metrica b { display: block; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 2px; }
@media (max-width: 760px) {
  .lst-resumen { grid-template-columns: 1fr; gap: var(--e-5); }
}

.lst-rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: var(--e-4); align-items: start; }
.lst-rejilla > .tarjeta { margin: 0; }
.lst-desglose > h3 { margin-bottom: var(--e-4); }
.lst-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.lst-barras-fila { display: flex; align-items: center; gap: var(--e-3); }
.lst-barras-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radio-xs); background: var(--acento-suave); color: var(--acento); flex: none; }
.lst-barras-ico .ico { width: 18px; height: 18px; }
.lst-barras-nombre { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.lst-barras-nombre b, .lst-barras-monto b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-barras-nombre small, .lst-barras-monto small { color: var(--texto-2); font-size: var(--t-s); }
.lst-barras-monto { display: grid; justify-items: end; line-height: 1.3; flex: none; }
.lst-barras .medidor { height: 4px; margin-top: var(--e-2); }

.lst-seccion-caja { margin-top: var(--e-4); }
.lst-tarjeta-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-3); }
.lst-tarjeta-cabeza h3 { display: flex; align-items: center; gap: var(--e-2); }
.lst-tarjeta-cabeza .sub { font-size: var(--t-s); }
.lst-cuenta { display: inline-grid; place-items: center; min-width: 24px; padding: 0 var(--e-2); height: 22px; border-radius: var(--pildora); background: var(--relleno); color: var(--texto-2); font-size: var(--t-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.lst-cuenta-peligro { background: var(--peligro-suave); color: var(--peligro); }
.lst-cobros .c-pago, .lst-cobros .c-cajero, .lst-cobros .c-tipo { color: var(--texto-2); }

.lst-anulados { list-style: none; margin: 0; padding: 0; }
.lst-anulados li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3); align-items: center;
  padding: var(--e-3) 0; min-height: 60px; cursor: pointer; border-radius: var(--radio-xs);
  transition: background-color var(--rapido) var(--curva);
}
.lst-anulados li + li { border-top: .5px solid var(--separador); }
.lst-anulados li:hover { background: color-mix(in srgb, var(--superficie) 96%, var(--texto)); }
.lst-anulados li:focus-visible { outline: none; background: var(--acento-suave); }
.lst-anulado-texto b { font-weight: 550; }
.lst-anulado-monto { color: var(--texto-2); text-decoration: line-through; text-decoration-thickness: 1px; white-space: nowrap; }
.lst-filtros label.campo > .lst-buscar { display: block; margin: 0; font-size: inherit; color: inherit; font-weight: inherit; }

/* detalle: foto de la placa y del vehículo, cada una con «Guardar» */
.lst-fotos { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lst-fotos .lst-foto { position: relative; margin: 0; }
.lst-fotos figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--e-2);
  padding: var(--e-2); background: linear-gradient(transparent, rgb(0 0 0 / .6)); color: #fff; font-weight: 600; font-size: var(--t-s);
}

/* ---------- turnos de caja ---------- */
.tn-mio { display: grid; gap: var(--e-4); margin-bottom: var(--e-4); }
.tn-mio.tn-cerrado { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.tn-mio-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3) var(--e-4); align-items: center; }
.tn-mio-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--relleno); color: var(--texto-2); }
.tn-mio-icono .ico { width: 22px; height: 22px; }
.tn-mio-icono.tn-vivo { background: var(--ok-suave); color: var(--ok); }
.tn-mio-texto h3 { margin: 0; }
.tn-mio-texto .sub { margin: 2px 0 0; }
.tn-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; justify-content: flex-end; }
.tn-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
.tn-dato { background: var(--superficie-2); border-radius: var(--radio-s); padding: var(--e-3) var(--e-4); min-width: 0; }
.tn-dato small { display: block; color: var(--texto-2); font-size: var(--t-s); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-dato b { display: block; font-size: var(--t-l); font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-dato-fuerte { background: var(--acento-suave); }
.tn-dato-fuerte b { color: var(--acento); font-size: var(--t-xl); }
.tn-aparte { margin: 0; }
@media (max-width: 760px) {
  .tn-mio.tn-cerrado { grid-template-columns: auto minmax(0, 1fr); }
  .tn-mio.tn-cerrado .btn { grid-column: 1 / -1; }
  .tn-mio-cabeza { grid-template-columns: auto minmax(0, 1fr); }
  .tn-acciones { grid-column: 1 / -1; justify-content: stretch; }
  .tn-acciones .btn { flex: 1; }
  .tn-datos { grid-template-columns: 1fr 1fr; }
}

.tn-dif { display: inline-flex; padding: 2px 10px; border-radius: var(--pildora); font-weight: 650; font-size: var(--t-s); white-space: nowrap; }
.tn-cuadra { background: var(--ok-suave); color: var(--ok); }
.tn-falta { background: var(--peligro-suave); color: var(--peligro); }
.tn-sobra { background: var(--aviso-suave); color: var(--texto); }
.etiqueta.tn-abierto { background: var(--ok-suave); color: var(--ok); }
.tn-revisado { color: var(--ok); }
.tn-revisado .ico { width: 18px; height: 18px; }
.tn-tabla td { vertical-align: middle; }
.tn-tabla tbody tr { cursor: pointer; }

.tn-debe { display: grid; gap: 4px; justify-items: start; background: var(--superficie-2); border-radius: var(--radio-s); padding: var(--e-4); }
.tn-debe small { color: var(--texto-2); font-weight: 550; }
.tn-debe b { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.tn-debe .tn-dif { font-size: var(--t-l); padding: 4px 14px; }
.tn-contado { font-size: var(--t-xl); font-weight: 700; }
.tn-billetes summary { cursor: pointer; font-weight: 600; color: var(--acento); display: flex; align-items: center; gap: 6px; list-style: none; }
.tn-billetes summary::-webkit-details-marker { display: none; }
.tn-billetes summary .ico { width: 18px; height: 18px; transition: transform .15s; }
.tn-billetes[open] summary .ico { transform: rotate(90deg); }
.tn-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--e-2); margin-top: var(--e-3); }
.tn-billete { display: grid; gap: 4px; background: var(--superficie-2); border-radius: var(--radio-s); padding: var(--e-2) var(--e-3); }
.tn-billete > span { font-weight: 650; font-size: var(--t-s); }
.tn-billete .entrada { background: var(--superficie); min-height: 40px; }
.tn-billete small { color: var(--texto-2); font-size: var(--t-xs); min-height: 1.2em; }
.tn-resultado { display: grid; gap: 4px; justify-items: start; }
.tn-resultado:empty { display: none; }
.tn-resultado .tn-dif { font-size: var(--t-l); padding: 4px 14px; }
.tn-cuentas { grid-template-columns: 1fr 1fr; }
.tn-retiros { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tn-retiros li { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--separador); }
.tn-aviso-salida { align-items: center; margin-bottom: var(--e-4); }
.tn-aviso-salida > span { flex: 1; }
.tn-revisado { display: inline-flex; align-items: center; gap: 4px; }
.tn-revisado-txt { display: none; font-size: var(--t-xs); font-weight: 600; }
@container (max-width: 860px) {
  .tn-tabla tbody tr { grid-template-areas: "movil cobro" "movil estado"; grid-template-columns: minmax(0, 1fr) auto; }
  .tn-revisado-txt { display: inline; }
}