/* components.css — los primitivos y los componentes compartidos (docs/diseno/estilo.md §6): uno por
   concepto, los de web/components/*.js revestidos aquí. Solo tokens (tokens.css): un color, un tamaño o
   una duración escritos a mano serían unos que no cambian en oscuro. Lo de una sola vista va en
   css/vistas/<vista>.css; el armazón de app.html, en app.css. */

/* ── Botón ───────────────────────────────────────────────────────────────────────────────────────
   sec (por defecto) · pri (UNO visible por vista) · fantasma · peligro (contorno; lleno solo en la
   confirmación) × sm/chico 32 · normal 40 · lg 48 · xl 56; icono (cuadrado) y ancho (100 %). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--alto);
 padding:0 var(--e-4);border:1px solid var(--hilo);border-radius:var(--r-s);background:var(--lamina);color:var(--tinta);
 font:550 var(--t-m)/1.2 var(--f-ui);max-width:100%;text-align:center;text-decoration:none;box-shadow:var(--sombra-1);
 -webkit-user-select:none;user-select:none;
 transition:background var(--dur-1) var(--curva),border-color var(--dur-1) var(--curva),color var(--dur-1) var(--curva),transform var(--dur-1) var(--curva)}
.btn:hover{border-color:var(--borde-control);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn>svg,.btn>.i{width:18px;height:18px;flex:none}
a.btn{color:var(--tinta)}
.btn.pri,a.btn.pri{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);box-shadow:none}
.btn.pri:hover{background:var(--acento-hover);border-color:var(--acento-hover)}
.btn.fantasma{background:transparent;border-color:transparent;box-shadow:none;color:var(--tinta-2)}
.btn.fantasma:hover{background:var(--hundido);color:var(--tinta)}
.btn.peligro{color:var(--mal);border-color:color-mix(in srgb,var(--mal) 45%,var(--hilo))}
.btn.peligro:hover{border-color:var(--mal);background:var(--mal-suave)}
.btn.peligro.lleno,.btn.peligro[data-listo],.confirmacion .btn.peligro{background:var(--mal);border-color:var(--mal);color:var(--sobre-mal)}
.btn.sm,.btn.chico{min-height:var(--alto-sm);padding:0 var(--e-3);font-size:var(--t-s)}
.btn.lg{min-height:var(--alto-lg);padding:0 var(--e-6);font-size:var(--t-base)}
.btn.xl{min-height:var(--alto-xl);padding:0 var(--e-7);font-size:var(--t-l);border-radius:var(--r-m)}
.btn.ancho{width:100%}
.btn.icono{width:var(--alto);padding:0}
.btn.icono.sm{width:var(--alto-sm)}
/* Un rótulo largo («Crear «Bodegas Ruiz Hermanos SL»») parte la línea en el móvil en vez de salirse */
.btn{overflow-wrap:anywhere}
/* Lo que no se puede pulsar no es acento pálido (§2.1): hundido, texto legible y el .motivo debajo */
.btn[aria-disabled="true"]:not([aria-busy="true"]){background:var(--hundido);border-color:var(--borde-control);
 color:var(--tinta-2);box-shadow:none;cursor:not-allowed;transform:none}
/* Ocupado: la rueda dentro, mismo ancho, y el foco no se suelta (aria-disabled, nunca disabled) */
.btn[aria-busy="true"]{cursor:progress}
.motivo{display:block;margin-top:var(--e-1);font-size:var(--t-s);line-height:1.4;color:var(--tinta-2)}
.botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-top:var(--e-3)}
@media (pointer:coarse){.btn,.btn.sm,.btn.chico{min-height:var(--toque)}.btn.icono,.btn.icono.sm{width:var(--toque)}}
/* Los botones que solo son de dedo (.con-dedo, inline en base.css) van en fila como los demás: en la línea del texto,
   «Hacer foto» y «Elegir de la galería» quedaban a 4 px de altura distinta */
@media (pointer:coarse){.botones>.con-dedo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}}

/* Un botón con aspecto de enlace (Deshacer en el aviso, «Ver anteriores») */
.enlace{border:0;background:none;padding:0;color:var(--acento-texto);font:inherit;font-weight:550;cursor:pointer;
 text-decoration:none;border-radius:var(--r-xs)}
.enlace:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (pointer:coarse){.enlace{min-height:var(--toque)}}

/* La rueda: UNA pieza (§6). Va dentro de un botón ocupado (su ::before, del color del texto), en el aviso
   de una búsqueda por imagen (28 px), alrededor del veredicto que se comprueba y, pequeña (.s, 10 px), en
   la insignia «en marcha» del lateral. Ninguna otra hoja dibuja una. */
.rueda,.btn[aria-busy="true"]::before{border-radius:50%;border:2px solid var(--hundido-2);border-top-color:var(--acento);
 animation:gira var(--dur-giro) linear infinite}
.rueda{display:inline-block;flex:none;width:28px;height:28px;border-width:2.5px}
.rueda.s{width:10px;height:10px;margin-right:5px;border-width:2px;vertical-align:-1px}
/* La del botón ocupado (aria-busy: mismo ancho, el foco no se suelta), del color de su texto */
.btn[aria-busy="true"]::before{content:"";display:inline-block;width:12px;height:12px;flex:none;
 border-color:currentColor;border-top-color:transparent;opacity:.75}
@keyframes gira{to{transform:rotate(360deg)}}

/* ── Teclas ── solo con puntero fino */
kbd,.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-xs);
 border:1px solid var(--hilo);border-bottom-width:2px;background:var(--lamina);color:var(--tinta-2);
 font:500 var(--t-xs)/1 var(--f-mono)}
@media (pointer:coarse){.kbd{display:none}}

/* ── Campos ──────────────────────────────────────────────────────────────────────────────────────
   Etiqueta visible siempre; 44 px; borde de control (≥ 3:1); al enfocar, borde de acento + halo. */
.campo{display:flex;flex-direction:column;gap:6px;margin-top:var(--e-3);font:550 var(--t-s)/1.3 var(--f-ui);color:var(--tinta)}
.campo :is(input,select,textarea),.entrada,.editor :is(input,select),.campo-linea input{width:100%;min-width:0;min-height:var(--toque);
 padding:0 var(--e-3);border:1px solid var(--borde-control);border-radius:var(--r-s);background:var(--lamina);
 color:var(--tinta);font:400 var(--t-base)/1.3 var(--f-ui);outline:none;
 transition:border-color var(--dur-1) var(--curva),box-shadow var(--dur-1) var(--curva)}
.campo textarea{min-height:88px;padding:var(--e-2) var(--e-3);resize:vertical}
.campo :is(input,select,textarea):focus,.entrada:focus,.editor :is(input,select):focus,.campo-linea input:focus{
 border-color:var(--acento);box-shadow:0 0 0 1px var(--acento),0 0 0 4px var(--acento-suave)}
.campo :is(input,textarea)::placeholder,.entrada::placeholder{color:var(--tinta-2)}
.campo [aria-invalid="true"],.entrada[aria-invalid="true"]{border-color:var(--mal)}
.campo.mono input,.entrada.mono{font-family:var(--f-mono)}
.ayuda{margin:0;font:400 var(--t-s)/1.4 var(--f-ui);color:var(--tinta-2)}
.ayuda.warn{color:var(--warn)}
.ayuda.mal{color:var(--mal)}
.ayuda>svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
/* Contraseña con «Mostrar»: el botón dentro del campo, a la derecha */
.con-boton{position:relative;display:block}
.con-boton>:is(input,.entrada){padding-right:96px}
.con-boton>.btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:36px}
@media (pointer:coarse){.con-boton>.btn{min-height:var(--toque);right:2px}}
.con-boton>.btn:active{transform:translateY(-50%)}
/* Desplegable: la flecha dibujada con degradados del tema, sin imágenes */
.campo select,select.papel{appearance:none;-webkit-appearance:none;padding-right:34px;
 background-image:linear-gradient(45deg,transparent 50%,var(--tinta-2) 50%),linear-gradient(135deg,var(--tinta-2) 50%,transparent 50%);
 background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select.papel{min-height:var(--alto-sm);padding-left:var(--e-3);border:1px solid var(--borde-control);
 border-radius:var(--r-s);background-color:var(--lamina);color:var(--tinta);font:450 var(--t-m)/1.2 var(--f-ui)}
@media (pointer:coarse){select.papel{min-height:var(--toque)}}
input[type=checkbox],input[type=radio]{accent-color:var(--acento);width:18px;height:18px;margin:0}
@media (pointer:coarse){input[type=checkbox],input[type=radio]{width:22px;height:22px}}
/* En una fila: «Año [2019] Guardar» */
.campo-linea{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);font-size:var(--t-m);color:var(--tinta-2)}
.campo-linea input{width:7em;min-height:var(--alto-sm)}
@media (max-width:600px){.campo :is(input,select,textarea),.entrada{font-size:var(--t-l)}}

/* ── Chip (filtro, faceta, regla) ── marcado en tinta invertida: el acento es acción, no estado */
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--e-3);border:1px solid var(--hilo);
 border-radius:var(--r-pill);background:var(--lamina);color:var(--tinta);font:500 var(--t-s)/1 var(--f-ui);
 white-space:nowrap;cursor:pointer;transition:border-color var(--dur-1) var(--curva),background var(--dur-1) var(--curva)}
.chip:hover{border-color:var(--borde-control)}
.chip .n{color:var(--tinta-2);font-weight:400;font-variant-numeric:tabular-nums}
.chip[aria-checked="true"],.chip[aria-pressed="true"],.chip.on{background:var(--tinta);border-color:var(--tinta);color:var(--papel);font-weight:600}
.chip[aria-checked="true"] .n,.chip[aria-pressed="true"] .n,.chip.on .n{color:var(--papel);opacity:.75}
.chip[aria-expanded="true"]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.chip .muestra{width:12px;height:12px}
@media (pointer:coarse){.chip{height:36px;position:relative}.chip::after{content:"";position:absolute;inset:-4px}}

/* ── Segmentado (Planchas | Dibujos, el papel, la Apariencia): el elegido sube a lámina ── */
.segmentado,.seg{display:inline-flex;flex:0 0 auto;gap:2px;padding:2px;border-radius:var(--r-s);background:var(--hundido)}
.segmentado>button,.seg>button{min-height:30px;padding:0 var(--e-3);border:0;border-radius:var(--r-xs);background:transparent;
 color:var(--tinta-2);font:500 var(--t-s)/1 var(--f-ui);white-space:nowrap;transition:background var(--dur-1) var(--curva),color var(--dur-1) var(--curva)}
.segmentado>button:hover,.seg>button:hover{color:var(--tinta)}
.segmentado>button:is([aria-checked="true"],[aria-selected="true"],[aria-pressed="true"]),.seg>button.on{background:var(--lamina);
 color:var(--tinta);font-weight:600;box-shadow:var(--sombra-1)}
@media (pointer:coarse){.segmentado>button,.seg>button{min-height:var(--toque)}}

/* ── Insignia de estado: glifo + palabra, nunca solo el color (producto.md §3.2) ── */
.insignia{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:2px 8px 2px 6px;border-radius:var(--r-pill);
 font:600 var(--t-xs)/1.25 var(--f-ui);white-space:nowrap;background:var(--hundido);color:var(--tinta-2)}
.insignia>[aria-hidden]{display:inline-block;min-width:12px;text-align:center;font-weight:700}
.insignia.ok{background:var(--ok-suave);color:var(--ok)}
.insignia.warn{background:var(--warn-suave);color:var(--warn)}
.insignia.mal{background:var(--mal-suave);color:var(--mal)}
.insignia.info{background:var(--acento-suave);color:var(--acento-texto)}
/* «Sin verificar» y «Sin leer» no son «no está»: borde discontinuo, que se lee como pendiente */
.insignia.pendiente{background:transparent;border:1px dashed currentColor;padding:1px 7px 1px 5px}
.tabla td .insignia{white-space:normal;align-items:baseline}

/* ── El código de plancha como sello pequeño, y las muestras de tinta (su #hex real en --c) ── */
.pl{display:inline-block;padding:1px 5px;border:1px solid var(--hilo);border-radius:var(--r-xs);
 font:500 var(--t-xs)/1.3 var(--f-mono);color:var(--tinta);letter-spacing:-.01em;white-space:nowrap}
.muestra{display:inline-block;width:16px;height:16px;flex:none;border-radius:var(--r-xs);background:var(--c,var(--hundido));
 box-shadow:inset 0 0 0 1px var(--borde-muestra)}
.muestra.g{width:20px;height:20px}
/* La tira de control: la fila de tintas que lleva toda plancha impresa */
.tira{display:flex;gap:2px;height:6px}
.tira>i{flex:1;border-radius:var(--r-2xs);background:var(--c,var(--hundido));box-shadow:inset 0 0 0 1px var(--borde-muestra)}

/* ── La hoja: el papel donde se «imprime» cada dibujo (multiply: en oscuro no deslumbra) ── */
.hoja{position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:var(--r-m);background:var(--hoja)}
.hoja img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hoja.oscuro,.oscuro>.hoja{background:var(--hoja-oscura)}
.hoja.oscuro img,.oscuro>.hoja img{mix-blend-mode:normal}
/* Marcas de corte: cuatro esquinas a 6 px del borde. Aparecen al pasar o enfocar; .siempre, siempre;
   en acento, la de la tarjeta abierta en el panel (.sel). */
.cortes{position:relative}
.cortes::after{content:"";position:absolute;inset:6px;z-index:2;pointer-events:none;opacity:0;--m:var(--tinta-2);
 background:linear-gradient(var(--m),var(--m)) top left/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) top left/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) top right/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) top right/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) bottom left/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) bottom left/1px 10px no-repeat,
  linear-gradient(var(--m),var(--m)) bottom right/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) bottom right/1px 10px no-repeat;
 transition:opacity var(--dur-2) var(--curva)}
/* El pasar del ratón, solo con ratón (hover:hover): en una pantalla táctil la tarjeta tocada se quedaba levantada y con
   sus marcas. El foco, solo el de teclado (:focus-visible): tocar una tarjeta también la enfoca. */
.cortes.siempre::after,:focus-visible>.cortes::after{opacity:1}
.cortes:has(:focus-visible)::after{opacity:1}
@media (hover:hover){.cortes:hover::after,:hover>.cortes::after{opacity:1}}
.cortes.acento::after,:is(.td,.tp).sel>.cortes::after{opacity:1;--m:var(--acento)}

/* ── Tarjeta de formulario ── */
.tarjeta{padding:var(--e-5) var(--e-6);border:1px solid var(--hilo);border-radius:var(--r-l);background:var(--lamina)}

/* ── Bloques de página y del panel: cabecera (.dh), sección (.dsec) y pie de acciones (.acts) ── */
.dh{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-5) var(--e-6) var(--e-4);border-bottom:1px solid var(--hilo);
 background:var(--lamina)}
.dh>div:first-child{flex:1;min-width:0}
.dh h2{margin:0;font:650 var(--t-xl)/1.2 var(--f-display);letter-spacing:-.015em;overflow-wrap:anywhere}
.eyeb{margin-bottom:var(--e-1)}
.xb{display:grid;place-items:center;width:var(--alto-sm);height:var(--alto-sm);flex:none;border:0;border-radius:var(--r-s);
 background:transparent;color:var(--tinta-2);font-size:var(--t-l);line-height:1}
.xb:hover{background:var(--hundido);color:var(--tinta)}
@media (pointer:coarse){.xb{width:var(--toque);height:var(--toque)}}
.dsec{padding:var(--e-5) var(--e-6);border-bottom:1px solid var(--hilo)}
.dsec:last-child{border-bottom:0}
.dsec:empty{display:none}
.dsec>h4,.dsec>h3.rotulo{margin:0 0 var(--e-3)}
.acts{display:flex;flex-wrap:wrap;gap:var(--e-2);padding:var(--e-3) var(--e-6)}
.volver{margin:0 0 var(--e-3);font-size:var(--t-m)}
/* El título de una página de detalle (una importación, un lote) con su insignia al lado */
.dt-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin-bottom:var(--e-2)}
.dt-titulo h2{margin:0;font:650 var(--t-2xl)/1.15 var(--f-display);letter-spacing:-.02em;overflow-wrap:anywhere}
.volver a{color:var(--acento-texto)}
@media (pointer:coarse){.volver a{display:inline-flex;align-items:center;min-height:var(--toque)}}

/* ── Esqueleto: la forma de lo que llega, si tarda más de 300 ms ── */
.esqueleto{display:block;border-radius:var(--r-s);background:var(--hundido);animation:late var(--dur-latido) var(--curva) infinite alternate}
.esqueleto.linea{height:12px;margin:6px 0}
.esqueleto.bloque{aspect-ratio:4/3;border-radius:var(--r-m)}
@keyframes late{from{opacity:1}to{opacity:.55}}
/* Unas líneas que aparecen si tarda más de 300 ms (§8.2; antes, nada que parpadee): Administración, Mi cuenta, Clientes */
.cargando-lineas{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-3) 0;
 animation:aparece-tarde var(--dur-2) var(--curva) calc(var(--dur-3) * 1.5) both}
.cargando-lineas .esqueleto{margin:0;height:14px}
.cargando-lineas .esqueleto:nth-child(3n+3){width:72%}
.cargando-lineas .esqueleto:nth-child(3n+1){width:46%}
@keyframes aparece-tarde{from{opacity:0}to{opacity:1}}

/* ── Aviso (toast): tinta invertida, abajo a la izquierda del lienzo; nunca errores ── */
.toast{position:fixed;left:calc(var(--lateral) + var(--gutter));bottom:var(--e-6);z-index:120;
 display:flex;align-items:center;gap:var(--e-4);max-width:min(560px,calc(100vw - var(--lateral) - 2 * var(--gutter)));
 padding:var(--e-3) var(--e-4);border-radius:var(--r-m);background:var(--tinta);color:var(--papel);box-shadow:var(--sombra-2);
 font:500 var(--t-m)/1.4 var(--f-ui);opacity:0;transform:translateY(8px);pointer-events:none;
 transition:opacity var(--dur-3) var(--curva),transform var(--dur-3) var(--curva)}
.toast.on{opacity:1;transform:none}
/* Con acción (Deshacer) se puede pulsar; sin ella no estorba a lo que hay debajo */
.toast.on.con-accion{pointer-events:auto}
.toast .enlace{flex:none;color:var(--papel);text-decoration:underline;text-underline-offset:3px}
.toast .enlace:focus-visible{outline-color:var(--papel)}
@media (max-width:1200px){.toast{left:calc(var(--carril) + var(--gutter));max-width:calc(100vw - var(--carril) - 2 * var(--gutter))}}
/* En el móvil, de lado a lado (con su margen): centrado con left:50% solo podía usar la mitad derecha y partía el aviso
   en una o dos palabras por línea */
@media (max-width:760px){.toast{left:var(--gutter);right:var(--gutter);width:auto;max-width:none;bottom:calc(var(--pestanas) + var(--e-3) + env(safe-area-inset-bottom));
 transform:translateY(8px)}.toast.on{transform:none}}

/* ── Banda: dentro de la página; icono + qué ha pasado + qué hacer + UNA acción ── */
.banda{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--e-2) var(--e-3);margin:var(--e-3) 0;padding:var(--e-3) var(--e-4);
 border-radius:var(--r-m);border:1px solid var(--hilo);background:var(--hundido);color:var(--tinta);font-size:var(--t-m);
 line-height:1.45;overflow-wrap:anywhere}
.banda>svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px}
.banda-texto{flex:1 1 calc(100% - 40px);min-width:0;align-self:center}
.banda .botones{margin:0}
.banda.info{background:var(--acento-suave);border-color:transparent}.banda.info>svg{color:var(--acento-texto)}
.banda.aviso{background:var(--warn-suave);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}.banda.aviso>svg{color:var(--warn)}
.banda.error{background:var(--mal-suave);border-color:color-mix(in srgb,var(--mal) 45%,transparent)}.banda.error>svg{color:var(--mal)}
.banda.ok{background:var(--ok-suave);border-color:transparent}.banda.ok>svg{color:var(--ok)}

/* ── Progreso: un carril por fila. Lo hecho en color, lo que falta en trama («aún no impreso») ──
   En marcha, acento · .parada, tinta-2 (nunca azul) · .espera, rayado ámbar · .hecha, verde. */
/* Las columnas son del conjunto (subgrid): las barras de todos los carriles empiezan y acaban a la vez,
   aunque «0 / 5 imágenes» sea más ancho que «0 / 5». */
.progreso{display:grid;grid-template-columns:minmax(5em,max-content) minmax(60px,1fr) max-content;gap:var(--e-3) var(--e-3);margin:var(--e-3) 0}
.carril{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:var(--e-1);align-items:center;
 font-size:var(--t-s);color:var(--tinta-2)}
.carril-nombre{color:var(--tinta);font-weight:600}
.carril-cuenta{color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.carril-nota{grid-column:2/-1}
.carril-nota.warn{color:var(--warn)}.carril-nota.mal{color:var(--mal)}
.carril progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:var(--r-pill);
 background:var(--trama),var(--hundido);overflow:hidden;color:var(--acento)}
.carril progress::-webkit-progress-bar{background:var(--trama),var(--hundido);border-radius:var(--r-pill)}
.carril progress::-webkit-progress-value{background:var(--acento);border-radius:var(--r-pill);transition:width var(--dur-3) var(--curva)}
.carril progress::-moz-progress-bar{background:var(--acento);border-radius:var(--r-pill)}
.carril.parada progress::-webkit-progress-value{background:var(--tinta-2)}
.carril.parada progress::-moz-progress-bar{background:var(--tinta-2)}
.carril.espera progress,.carril.espera progress::-webkit-progress-bar{
 background:repeating-linear-gradient(-45deg,var(--warn-suave) 0 6px,transparent 6px 12px),var(--hundido)}
.carril.espera progress::-webkit-progress-value{background:repeating-linear-gradient(-45deg,var(--warn) 0 6px,var(--warn-suave) 6px 12px)}
.carril.espera progress::-moz-progress-bar{background:repeating-linear-gradient(-45deg,var(--warn) 0 6px,var(--warn-suave) 6px 12px)}
.carril.hecha progress::-webkit-progress-value{background:var(--ok)}
.carril.hecha progress::-moz-progress-bar{background:var(--ok)}
/* En el móvil, el nombre y la cuenta en una línea (la cuenta a la derecha) y la barra entera debajo */
@media (max-width:760px){.progreso{grid-template-columns:minmax(0,1fr) max-content}
 .carril-nombre{grid-column:1;grid-row:1}.carril-cuenta{grid-column:2;grid-row:1;text-align:right}
 .carril progress{grid-column:1/-1;grid-row:2}.carril-nota{grid-column:1/-1;grid-row:3}}

/* Los carriles de un detalle (una importación, un lote), uno por tarjeta, los mismos en los dos: nombre, la cifra, la pista y lo que pasa (o lo que queda) */
.carriles{margin-top:var(--e-5)}
.carriles .progreso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-3);margin:0}
.carriles .carril{grid-column:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"nombre" "cuenta" "barra" "nota";align-content:start;
 gap:var(--e-2);padding:var(--e-4);border:1px solid var(--hilo);border-radius:var(--r-l);background:var(--lamina)}
.carriles .carril-nombre{grid-area:nombre}   /* en rótulo (base.css) */
.carriles .carril.hecha .carril-nombre::after{content:" · ✓ hecho";color:var(--ok)}
.carriles .carril.fallos .carril-nombre::after{content:" · × con errores";color:var(--mal)}
/* La cifra en grande (Bricolage 24 tabular, estilo.md §2.2) y su unidad y ritmo, pequeños al lado */
.carriles .carril-cuenta{grid-area:cuenta;font:650 var(--t-2xl)/1.1 var(--f-display);letter-spacing:-.02em;white-space:normal;overflow-wrap:anywhere}
.carriles .carril-detalle{font:400 var(--t-s)/1.3 var(--f-ui);letter-spacing:0;color:var(--tinta-2)}
/* Acabado con errores: lo troceado en verde y lo que falló, el resto de la pista, en rojo (no «✓ hecho») */
.carriles .carril.fallos progress,.carriles .carril.fallos progress::-webkit-progress-bar{background:var(--mal-suave)}
.carriles .carril.fallos progress::-webkit-progress-value{background:var(--ok)}
.carriles .carril.fallos progress::-moz-progress-bar{background:var(--ok)}
.carriles .carril progress{grid-area:barra}
.carriles .carril-nota{grid-area:nota;font-size:var(--t-s)}
@media (max-width:900px){.carriles .progreso{grid-template-columns:minmax(0,1fr)}}
/* En el móvil, los tres en una sola tarjeta, con filetes: nombre y cifra en una línea, la barra y la nota
   (tres tarjetas de 110 px llenaban la primera pantalla) */
@media (max-width:600px){
 .carriles .progreso{gap:0;border:1px solid var(--hilo);border-radius:var(--r-l);background:var(--lamina);overflow:hidden}
 .carriles .carril{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nombre cuenta" "barra barra" "nota nota";
  gap:var(--e-1) var(--e-3);padding:var(--e-3) var(--e-4);border:0;border-radius:0;background:none}
 .carriles .carril+.carril{border-top:1px solid var(--hilo-suave)}
 .carriles .carril-cuenta{font-size:var(--t-l);text-align:right}
}

/* ── Tabla: cabecera fija; en ≤ 900 px cada fila es una tarjeta con el nombre de la columna ── */
.tabla-caja{max-width:100%;overflow-x:auto}
.tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-m)}
.tabla th{position:sticky;top:0;z-index:1;padding:var(--e-3);border-bottom:1px solid var(--hilo);background:var(--lamina);
 text-align:left;white-space:nowrap}
.tabla td{padding:var(--e-3);border-bottom:1px solid var(--hilo-suave);vertical-align:top}
.tabla tbody tr{transition:background var(--dur-1) var(--curva)}
.tabla tbody tr:hover{background:color-mix(in srgb,var(--hundido) 55%,transparent)}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla td .que{display:block;margin-top:2px}
/* Una fecha no se parte por dentro («05/10/202» / «6 09:47»): .que deja partir en cualquier sitio */
.que.cuando{white-space:nowrap;overflow-wrap:normal}
.tabla td .progreso{margin:0;min-width:180px}
.tabla .mal{color:var(--mal);font-weight:600}
.tabla .cod{font-family:var(--f-mono);font-size:var(--t-s);color:var(--tinta-2)}
.tabla a.mal{text-decoration:none}
.tabla td[data-col=Estado]{min-width:9.5em}
.ordenar{border:0;background:none;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.ordenar:hover{color:var(--tinta)}
.ordenar .flecha{display:inline-block;width:1em;margin-left:2px}
.barra-acciones{display:flex;justify-content:flex-end;margin-bottom:var(--e-2)}
@media (max-width:900px){
 .tabla,.tabla tbody,.tabla tr,.tabla td{display:block}
 /* La cabecera no se ve (cada dato lleva su nombre) ni se alcanza con el tabulador: oculta con su caja como sitio (si no,
    quedaba al final de la página, el foco caía en un botón de ordenar invisible y el navegador desplazaba el armazón
    entero sin forma de volver) */
 .tabla-caja{position:relative}
 .tabla thead{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);visibility:hidden}
 .tabla tr{margin-bottom:var(--e-3);padding:var(--e-3) var(--e-4);border:1px solid var(--hilo);border-radius:var(--r-l);background:var(--lamina)}
 .tabla tbody tr:hover{background:var(--lamina)}
 .tabla td{display:grid;grid-template-columns:7em minmax(0,1fr);gap:var(--e-2);border:0;padding:var(--e-1) 0;text-align:left}
 .tabla td::before{content:attr(data-col);font-size:var(--t-s);color:var(--tinta-2)}
 .tabla td.num{text-align:left}
 .tabla td:has(>.celda:empty){display:none}   /* sin «Acciones» vacías */
 .tabla td .progreso{min-width:0}
}
/* Lo que es solo del ordenador (.solo-ordenador, base.css) se va en el móvil (≤ 760), no antes: entre 761 y 900
   la fila ya es tarjeta y «Cancelar» tiene que seguir ahí */
@media (max-width:760px){.tabla td:has(>.celda>.solo-ordenador:only-child){display:none}}

/* ── Actividad (quién hizo qué), por días: la de Administración y la de cada importación, la misma ── */
.act-dia{margin-top:var(--e-5)}
/* El día, con su filete hasta el borde: se recorre como una línea de tiempo */
.act-dia-t{display:flex;align-items:center;gap:var(--e-3);margin:0 0 var(--e-2);font:600 var(--t-m)/1.3 var(--f-ui);color:var(--tinta)}
.act-dia-t::after{content:"";flex:1;height:1px;background:var(--hilo)}
.act-dia .tabla-caja{border:1px solid var(--hilo);border-radius:var(--r-l);background:var(--lamina)}
.act-dia .tabla td{overflow-wrap:anywhere}
/* Las mismas columnas en todos los días (una tabla por día): anchos fijos en el escritorio */
@media (min-width:901px){
 .act-dia .tabla{table-layout:fixed}
 .act-dia .tabla :is(th,td):nth-child(1){width:5.5em}
 .act-dia .tabla :is(th,td):nth-child(2){width:10em}
 .act-dia .tabla :is(th,td):nth-child(4){width:12.5em}
}
.act-dia .tabla tr:last-child td{border-bottom:0}
/* Las columnas se dicen una vez, en el primer día; en los demás quedan para el lector de pantalla */
.act-dia:not(.primero) .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.act-dia .tabla .btn{margin-left:var(--e-2)}
.act-quien{font-weight:600}
/* El nivel de un evento (también lo dice su texto): lo que falló, en rojo */
.act-dia .t-error{color:var(--mal)}
.act-dia .t-aviso{color:var(--warn)}

/* En ≤ 900 cada evento es una línea de la lista del día: hora y quién arriba, qué y tipo debajo. La hora empieza donde
   empieza el texto de debajo (sin la sangría de su celda) */
@media (max-width:900px){
 .act-dia .tabla-caja{padding:0 var(--e-4)}
 .act-dia .tabla td,.act-dia .tabla td>.celda{text-align:left;margin:0}
 .act-dia .tabla tr{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:2px var(--e-3);margin:0;padding:var(--e-3) 0;
  border:0;border-bottom:1px solid var(--hilo-suave);border-radius:0;background:none}
 .act-dia .tabla tr:last-child{border-bottom:0}
 .act-dia .tabla td{display:block;padding:0}
 .act-dia .tabla td::before{content:none}
 .act-dia .tabla td:nth-child(n+3){grid-column:1/-1}
}

/* ── Vacío: trama con máscara, el icono, un titular, una frase y una acción ── */
.vacio{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:var(--e-3);
 padding:var(--e-9) var(--e-6);border-radius:var(--r-l);text-align:center;color:var(--tinta-2);overflow:hidden}
.vacio::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--trama);
 -webkit-mask:radial-gradient(ellipse 70% 80% at 50% 40%,black 0%,transparent 75%);
 mask:radial-gradient(ellipse 70% 80% at 50% 40%,black 0%,transparent 75%)}
.vacio>svg{width:48px;height:48px;color:var(--tinta-3)}
.vacio>svg.i{width:48px;height:48px}   /* el icono del sprite (svg.i, 20 px en app.css), aquí grande */
.vacio h3{margin:0;max-width:24ch;font:650 var(--t-2xl)/1.15 var(--f-display);letter-spacing:-.02em;color:var(--tinta);overflow-wrap:anywhere}
.vacio p{margin:0;max-width:42ch;font-size:var(--t-base)}
.vacio .botones{justify-content:center}

/* ── Confirmación en línea: nombra lo afectado; «Sí, …» en otro sitio que el botón que la abrió ── */
.confirmacion{margin:var(--e-3) 0;padding:var(--e-3) var(--e-4);border-radius:var(--r-m);
 border:1px solid color-mix(in srgb,var(--mal) 45%,transparent);background:var(--mal-suave)}
.confirmacion p{margin:0;font-size:var(--t-m);color:var(--tinta)}
.confirmacion .campo{max-width:24em}
.confirmacion.neutra{border-color:color-mix(in srgb,var(--acento) 40%,transparent);background:var(--acento-suave)}

/* ── Combobox (ARIA 1.2): la lista sale debajo, anclada, sin velo y sin tapar el campo ── */
.combo{position:relative}
.combo [role=listbox]{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:var(--e-1);list-style:none;
 max-height:min(320px,50vh);overflow-y:auto;background:var(--lamina);border:1px solid var(--hilo);border-radius:var(--r-m);
 box-shadow:var(--sombra-2)}
.combo [role=option]{display:flex;gap:var(--e-3);align-items:baseline;padding:var(--e-2) var(--e-3);border-radius:var(--r-s);
 cursor:pointer;font:400 var(--t-m)/1.35 var(--f-ui);color:var(--tinta);overflow-wrap:anywhere}
@media (pointer:coarse){.combo [role=option]{min-height:var(--toque);align-items:center}}
.combo [role=option]:hover{background:var(--hundido)}
/* La activa (la del teclado): fondo y filete de acento a la izquierda; no se fía solo del color */
.combo [role=option][aria-selected=true]{background:var(--hundido);box-shadow:inset 3px 0 0 var(--acento)}
/* «Nombre · código» (el mismo orden que el selector y Clientes): el código detrás, en mono gris */
.combo .cod{flex:none;font:500 var(--t-s)/1.35 var(--f-mono);color:var(--tinta-2)}
/* «Reciente», «Estás aquí»: en una línea y sin encoger (un nombre largo lo partía letra a letra); cede el nombre */
.combo [role=option]>.nom,.combo [role=option]>span:not(.cod):not(.ali){flex:0 1 auto;min-width:0}
.combo .ali{flex:none;margin-left:auto;font-size:var(--t-s);color:var(--tinta-2);white-space:nowrap}
/* «Estás aquí» también en la fila de Sin cliente del selector: la misma marca, en palabras */
.selector-op .ali{margin-left:var(--e-2);font-size:var(--t-s);color:var(--tinta-2);white-space:nowrap}
.combo-fallo .banda,.alta-error .banda{margin:var(--e-2) 0 0}
.combo .crear{color:var(--acento-texto);font-weight:550}
/* El alta de un cliente en línea, debajo del campo, con sus parecidos */
.alta-cliente:not(:empty){margin-top:var(--e-3);padding:var(--e-3) var(--e-4);border-radius:var(--r-m);background:var(--hundido)}
.alta-cliente .campo:first-of-type{margin-top:0}
.parecidos{list-style:none;margin:var(--e-2) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
/* Botones con el nombre dentro: un nombre largo parte la línea en vez de salirse */
.parecidos .btn{min-height:var(--alto-sm);padding:6px var(--e-3);text-align:left;white-space:normal}
.par{display:flex;flex-direction:column;gap:6px;font-size:var(--t-m)}
.par>span{display:flex;gap:var(--e-2);justify-content:space-between;align-items:baseline}
.par b{font-weight:500;color:var(--tinta-2);white-space:nowrap}

/* ── Pestañas de vista: tablist; la elegida con subrayado de tinta y aria-selected (no solo color) ── */
.pestanas{display:flex;gap:var(--e-1);margin:var(--e-4) 0 0;border-bottom:1px solid var(--hilo);overflow-x:auto;overflow-y:hidden;
 scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}   /* en el móvil se desliza con el dedo; la barra solo estorbaba */
.pestanas [role=tab]{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:42px;margin-bottom:-1px;padding:0 var(--e-3);
 border:0;border-bottom:2px solid transparent;background:none;color:var(--tinta-2);font:500 var(--t-m)/1 var(--f-ui);cursor:pointer;
 white-space:nowrap;transition:color var(--dur-1) var(--curva),border-color var(--dur-1) var(--curva)}
.pestanas [role=tab]:hover{color:var(--tinta)}
.pestanas [role=tab][aria-selected=true]{color:var(--tinta);border-bottom-color:var(--tinta);font-weight:600}
.pestanas [role=tab]:focus-visible{outline-offset:-2px}
.pestanas .cuenta{padding:2px 6px;border-radius:var(--r-pill);background:var(--hundido);color:var(--tinta-2);
 font:600 var(--t-xs)/1 var(--f-ui);font-variant-numeric:tabular-nums}
.pestanas .cuenta.mal{background:var(--mal-suave);color:var(--mal)}
/* Si no caben (el móvil), el final se desvanece mientras quede algo por ver a la derecha: sin barra, «No est…»
   cortado parecía todo lo que había. Va con el desplazamiento (scroll-timeline): sin desbordar, nada. */
@property --pest-fundido{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes pest-fundido{from{--pest-fundido:40px}to{--pest-fundido:0px}}
@supports (animation-timeline:scroll()){
 .pestanas{mask-image:linear-gradient(to right,var(--tinta) calc(100% - var(--pest-fundido)),transparent);
  animation:pest-fundido linear both;animation-timeline:scroll(self inline)}
}
[role=tabpanel]{padding:var(--e-4) 0 0}
[role=tabpanel]:focus-visible{outline-offset:4px}
@media (pointer:coarse){.pestanas [role=tab]{min-height:var(--toque)}}

/* ── Zona donde soltar (imágenes en Búsquedas, una carpeta en Nueva importación): una región, no un
   botón; dentro van los suyos (producto.md §10.3) ── */
.zona-soltar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px var(--e-5);align-items:center;padding:var(--e-5);
 border:1.5px dashed var(--borde-control);border-radius:var(--r-l);background:var(--lamina);
 transition:border-color var(--dur-2) var(--curva),background var(--dur-2) var(--curva)}
.zona-soltar.encima{border-color:var(--acento);background:var(--acento-suave)}
.zona-icono{grid-row:1/3;width:56px;height:56px;border-radius:var(--r-l);display:grid;place-items:center;
 background:var(--acento-suave);color:var(--acento-texto)}
.zona-icono svg{width:26px;height:26px}
.zona-texto b{display:block;font:650 var(--t-l)/1.3 var(--f-display);letter-spacing:-.01em}
.zona-texto>span{display:block;margin-top:2px;font-size:var(--t-m);color:var(--tinta-2)}
.zona-soltar .botones{grid-column:2;margin-top:6px}
@media (max-width:600px){.zona-soltar{grid-template-columns:1fr}.zona-icono{grid-row:auto}.zona-soltar .botones{grid-column:1}}

/* ── Cifras: Bricolage grande y tabular, con su rótulo debajo ── */
.cifras{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--e-3)}
.cifra{padding:var(--e-3) var(--e-4);border:1px solid var(--hilo);border-radius:var(--r-m);background:var(--lamina);
 font:500 var(--t-s)/1.35 var(--f-ui);color:var(--tinta-2)}
.cifra b{display:block;margin-bottom:var(--e-1);font:650 var(--t-2xl)/1.1 var(--f-display);letter-spacing:-.02em;
 text-transform:none;color:var(--tinta);font-variant-numeric:tabular-nums}

/* ── Datos en dos columnas (dt/dd) ── */
.datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--e-2) var(--e-5);margin:0;font-size:var(--t-m)}
.datos dt{color:var(--tinta-2)}.datos dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media (max-width:600px){.datos{grid-template-columns:minmax(0,1fr)}.datos dd{margin-bottom:var(--e-2)}}

/* ── Hoja de ruta (pasos) y la lista «Antes de empezar» ── */
.ruta{display:flex;flex-direction:column}
.ruta>.paso{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--e-4);padding-bottom:var(--e-6)}
.ruta>.paso::before{content:"";position:absolute;left:15.5px;top:34px;bottom:2px;width:1px;background:var(--hilo)}
.ruta>.paso:last-child::before{display:none}
.ruta>.paso>.n,.pasos>li::before{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--hilo);background:var(--lamina);
 font:650 var(--t-s)/1 var(--f-display);color:var(--tinta-2)}
.ruta>.paso.hecho>.n{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.ruta>.paso.actual>.n{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);box-shadow:0 0 0 4px var(--acento-suave)}
/* Los pasos de unas instrucciones (conectar la cuenta de IA): el mismo círculo numerado, pequeño y sin filete */
.pasos{list-style:none;counter-reset:paso;margin:0 0 var(--e-2);padding:0;display:flex;flex-direction:column;gap:var(--e-2);font-size:var(--t-m)}
/* El número, colgado a la izquierda (no una columna de rejilla): un <code> en medio del paso («claude setup-token»)
   se quedaba en la columna del número y se escribía letra a letra */
.pasos>li{counter-increment:paso;position:relative;min-height:24px;padding-left:calc(24px + var(--e-3));line-height:1.5}
.pasos>li::before{content:counter(paso);position:absolute;left:0;top:0;width:24px;height:24px;font-size:var(--t-xs)}
.lista-antes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e-2);font-size:var(--t-m)}
.lista-antes li{display:flex;gap:var(--e-2);align-items:baseline}
.lista-antes li::before{content:"✓";flex:none;width:1.2em;font-weight:700;color:var(--ok)}
.lista-antes li.falta::before{content:"!";color:var(--warn)}

/* ── La inicial de una persona (Usuarios; grande, .g, en Mi cuenta). Va en ::before (attr): el nombre no se
   lee dos veces ── */
.inicial{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--acento-suave);
 color:var(--acento-texto);font:650 var(--t-m)/1 var(--f-display)}
.inicial::before{content:attr(data-inicial)}
/* Grande (Mi cuenta): solo cambia el tamaño; el color, el de toda inicial (estilo.md §6) */
.inicial.g{width:48px;height:48px;font-size:var(--t-xl);font-weight:700}

/* ── El pliego: lo que se enseña una sola vez (la contraseña provisional) ── */
.pliego{position:relative;padding:var(--e-5) var(--e-6);border:3px double var(--tinta);border-radius:var(--r-xs);background:var(--lamina)}
.clave-una-vez{display:inline-block;padding:2px 8px;border-radius:var(--r-s);background:var(--hundido);
 font:500 var(--t-l)/1.4 var(--f-mono);letter-spacing:.02em;-webkit-user-select:all;user-select:all}
.pliego .clave-una-vez{font-size:var(--t-xl);background:transparent;padding:0}

/* ── Mientras no estabas (Inicio): lo que terminó y lo que sigue ── */
.novedades{margin:0 0 var(--e-4);padding:var(--e-3) var(--e-4);border:1px solid var(--hilo);border-radius:var(--r-l);background:var(--lamina)}
.novedades ul{list-style:none;margin:0;padding:0}
.novedades li{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--e-2);padding:6px 0;font-size:var(--t-m)}
.novedades li+li{border-top:1px solid var(--hilo-suave)}
.novedades .nov-texto{flex:1 1 14em;min-width:0}
.novedades a{text-decoration:none}
/* En táctil, los enlaces cortos de una línea («Ver») se tocan en 44 px: el min-height de .enlace no vale en línea */
@media (pointer:coarse){:is(.novedades,.toast) .enlace{display:inline-flex;align-items:center;min-height:var(--toque);padding:0 var(--e-2)}}

/* ── La pared (Pinterest) y sus tarjetas (estilo.md §7): orden de lectura = orden del DOM ── */
.muro{--col:200px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--col),100%),1fr));gap:var(--e-6) var(--e-4);align-items:start}
.muro.js{grid-auto-rows:4px;row-gap:0}
.muro.js>*{grid-row-end:span var(--filas,60)}
.muro.planchas{--col:220px}
.muro.compacto{--col:132px;gap:var(--e-4) var(--e-3)}
@media (max-width:600px){.muro{--col:150px;column-gap:var(--e-3)}.muro.compacto{--col:140px}}
.td,.tp{position:relative;display:flex;flex-direction:column;gap:var(--e-2);padding-bottom:var(--e-5);min-width:0}
.td>.hoja,.tp>.hoja{box-shadow:0 0 0 1px var(--hilo-suave);transition:box-shadow var(--dur-2) var(--curva),transform var(--dur-2) var(--curva)}
.td:focus-visible>.hoja,.tp:focus-visible>.hoja{box-shadow:0 0 0 1px var(--hilo),var(--sombra-2);transform:translateY(-2px)}
.td:has(:focus-visible)>.hoja,.tp:has(:focus-visible)>.hoja{box-shadow:0 0 0 1px var(--hilo),var(--sombra-2);transform:translateY(-2px)}
@media (hover:hover){.td:hover>.hoja,.tp:hover>.hoja{box-shadow:0 0 0 1px var(--hilo),var(--sombra-2);transform:translateY(-2px)}}
.td.sel>.hoja,.tp.sel>.hoja{box-shadow:0 0 0 2px var(--acento),var(--sombra-2)}
.tp>.hoja{padding:10px}
.td-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 var(--t-m)/1.3 var(--f-ui)}
.td-titulo.sin{color:var(--tinta-2);font-weight:500}
.td-meta,.tp-meta{margin:0;font-size:var(--t-s);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.td-meta>span,.tp-meta>span{display:block}
.tp-codigo{font:500 var(--t-xl)/1 var(--f-mono);letter-spacing:-.02em}
/* Lo guardado en la Bandeja (components/bandeja.js), la misma tarjeta al buscar y en la Bandeja: su hoja con borde
   discontinuo ámbar (aún no es un trabajo del archivo), y la medida, el día y el cliente debajo, sin cortar */
.td.band>.band-hoja{outline:1.5px dashed var(--warn);outline-offset:-1.5px}
.band-meta>span{overflow-wrap:anywhere}
.band-cli{font-weight:550}
.band-nota{margin:0;font-size:var(--t-s);color:var(--tinta-2);overflow-wrap:anywhere}
/* El botón o enlace que abre la tarjeta la cubre entera (su ::after): se pulsa en cualquier sitio de ella */
:is(.td,.tp) .abrir::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-m)}

/* ── Miniatura: un botón con su imagen sobre la hoja, que sube al pasar (los temas de Inicio, las planchas
   de Buscar, los dibujos y los parecidos de la ficha). Cada vista pone solo su medida ── */
.miniatura{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0;border:0;background:none;text-align:left;
 color:var(--tinta);border-radius:var(--r-m)}
.miniatura>.hoja{margin-bottom:var(--e-1);box-shadow:0 0 0 1px var(--hilo-suave);
 transition:box-shadow var(--dur-2) var(--curva),transform var(--dur-2) var(--curva)}
.miniatura:focus-visible>.hoja{box-shadow:0 0 0 1px var(--hilo),var(--sombra-2);transform:translateY(-2px)}
@media (hover:hover){.miniatura:hover>.hoja{box-shadow:0 0 0 1px var(--hilo),var(--sombra-2);transform:translateY(-2px)}}
.miniatura:focus-visible{outline-offset:3px}
/* Con movimiento reducido no sube nada (estilo.md §2.4): solo la sombra */
@media (prefers-reduced-motion:reduce){:is(.miniatura,.td,.tp)>.hoja{transform:none!important}}

/* ── Plegable: lo técnico, plegado en su sitio (producto.md §1.6), sin ventanas ── */
.plegable{margin-top:var(--e-3)}
.plegable>summary{width:max-content;max-width:100%;cursor:pointer;color:var(--acento-texto);font:550 var(--t-m)/1.4 var(--f-ui)}
.plegable>summary:hover{text-decoration:underline;text-underline-offset:3px}
.plegable[open]>summary{margin-bottom:var(--e-3)}
@media (pointer:coarse){.plegable>summary{padding-block:calc((var(--toque) - 1.4em) / 2)}}

/* ── El selector de cliente (components/selector.js; producto.md §4.2): buscar y elegir en el mismo sitio.
   El combobox lleva aquí su lista FIJA: siempre a la vista y en su sitio, sin flotar. Debajo, «Sin cliente»
   y la lista entera. Lo usan el desplegable del armazón (app.css) y la página «Elegir cliente». ── */
.selector{display:flex;flex-direction:column;gap:var(--e-2);min-width:0}
.selector .campo{margin:0}
.selector-error:empty{display:none}
.combo.fija [role=listbox]{position:static;max-height:min(296px,38vh);margin-top:var(--e-2);padding:0;border:0;border-radius:0;
 background:none;box-shadow:none}
.combo-nada{margin:var(--e-3) 0 0}
.selector-atajo{margin:var(--e-3) 0 0}
.selector-pie{display:flex;flex-direction:column;gap:2px;list-style:none;margin:var(--e-1) 0 0;padding:var(--e-2) 0 0;border-top:1px solid var(--hilo)}
.selector-op{display:grid;gap:1px;width:100%;padding:var(--e-2) var(--e-3);border:0;border-radius:var(--r-s);background:none;
 color:var(--tinta);font:400 var(--t-m)/1.35 var(--f-ui);text-align:left;text-decoration:none}
.selector-op b{font-weight:400}
.selector-op .que{font-size:var(--t-s)}
.selector-op:hover{background:var(--hundido);text-decoration:none}
@media (pointer:coarse){.selector-op{min-height:var(--toque);align-content:center}}

/* ── La sigla de un cliente: sus dos letras, en mono, sobre lo hundido. No es la inicial de una persona
   (.inicial, redonda y en acento): un cliente no es un usuario. ── */
.sigla{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-s);background:var(--hundido-2);
 color:var(--tinta);font:600 var(--t-xs)/1 var(--f-mono);letter-spacing:.02em}

/* ── De quién es una lista (components/ambito.js): la línea discreta de lo que hay en otros clientes y, en
   «Todos los clientes», su marca con cómo volver. Una sola, en Buscar, el Archivo, Búsquedas, la Bandeja e
   Importaciones. ── */
/* De qué cliente, en «Todos los clientes» (components/ambito.js, chipsCliente): Búsquedas y la Bandeja */
.chips-cliente{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0 0 var(--e-6)}
.ambito{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-1) var(--e-3);margin:0;font-size:var(--t-s);color:var(--tinta-2)}
.ambito .enlace{font-size:var(--t-s)}
/* El recuento de la línea: la cifra, grande y tabular (estilo.md §2.2) */
.ambito-cuenta{font-size:var(--t-m);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.ambito-cuenta b{font:650 var(--t-l)/1 var(--f-display);letter-spacing:-.01em;color:var(--tinta)}
@media (pointer:coarse){.ambito .enlace{min-height:var(--toque)}}