/* ===========================================================================
   VatScraper · hoja del panel
   Una sola verdad: los colores, la letra y los radios se definen aquí arriba,
   una vez por tema, y el resto de la hoja solo usa var(--…). Ni un color
   escrito a mano fuera de estos dos bloques.
   - Claro = [data-theme="dim"]; oscuro = sin tema y "oscuro".
   - Letra del sistema (SF en Mac y iPhone, Segoe en Windows). La monoespaciada,
     solo para ids de Vinted, SKU, logins y registros.
   - Un acento, el teal de Vinted, para lo que se pulsa y la selección. El color
     de estado va aparte y siempre con forma y palabra: bien = círculo,
     aviso = triángulo, mal = cuadrado, neutro = anillo.
   - Superficies planas con filete; sombra solo en lo que flota (menús,
     diálogos, avisos). Nada se mueve en reposo.
   =========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* TOKENS-INICIO · oscuro (sin tema y "oscuro"): grises neutros de escritorio, apenas tintados. */
:root {
  color-scheme: dark;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --bg: #1B1C1E; --bg-2: #151618; --panel: #202124; --surface: #242528; --surface-2: #2C2D31;
  --elev: #2C2D31; --field: #1A1B1D;
  --line: #333539; --line-2: #45484D; --txt: #ECEDEF; --txt-dim: #C6C8CC; --muted: #9C9FA5;
  --accent: #3AA7AF; --accent-2: #5BBCC3; --accent-ink: #0B1F21; --accent-dim: rgba(58,167,175,.16);
  --sel: rgba(58,167,175,.18); --hover: rgba(255,255,255,.05); --press: rgba(255,255,255,.09);
  --fill: rgba(255,255,255,.10); --fill-2: rgba(255,255,255,.15);
  --good: #4CBF7C; --warn: #E0A04A; --bad: #F26D6D; --on-status: #141517;
  --chip: #2A2B2F; --knob: #FFFFFF; --on-photo: #FFFFFF; --photo-scrim: rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.5); --lightbox: rgba(0,0,0,.88);
  --sh-1: none;
  --sh-2: 0 0 0 .5px rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.45);
  --r-card: 10px; --r-btn: 7px; --r-sm: 5px; --r-md: 7px; --r-pill: 999px;
  /* Nombres que usan otras hojas y vistas: apuntan a los de arriba para que sigan el tema. */
  --card: var(--surface); --bd: var(--line); --acc: var(--accent); --text: var(--txt);
  --acento: var(--accent); --azul: var(--accent); --ok: var(--good); --tx3: var(--muted);
  --faint: var(--muted); --line-3: var(--line-2); --accent-warm: var(--warn);
  --bad-bg: color-mix(in srgb, var(--bad) 10%, transparent);
}
/* claro */
[data-theme="dim"] {
  color-scheme: light;
  --bg: #F4F5F6; --bg-2: #EDEFF1; --panel: #EEF0F2; --surface: #FFFFFF; --surface-2: #F6F7F8;
  --elev: #FFFFFF; --field: #FFFFFF;
  --line: #E1E4E8; --line-2: #CDD2D8; --txt: #16181B; --txt-dim: #33373D; --muted: #5C6168;
  --accent: #0E6B72; --accent-2: #0A5A60; --accent-ink: #FFFFFF; --accent-dim: rgba(14,107,114,.10);
  --sel: rgba(14,107,114,.10); --hover: rgba(0,0,0,.04); --press: rgba(0,0,0,.075);
  --fill: rgba(22,24,27,.07); --fill-2: rgba(22,24,27,.11);
  --good: #1E7B45; --warn: #A15C00; --bad: #C8102E; --on-status: #FFFFFF;
  --chip: #EDEFF1;
  --scrim: rgba(0,0,0,.28);
  --sh-2: 0 0 0 .5px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.12);
}
/* TOKENS-FIN */
/* Foco: anillo sólido de 2 px solo al moverse con el teclado (:focus-visible), sin halo difuso. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Lo que recibe el foco por programa (el cuerpo de un diálogo al abrirse) no lleva anillo:
   el anillo es para lo que se alcanza con Tab. */
[tabindex="-1"]:focus-visible { outline: none; }
/* `scroll-behavior: smooth` en html animaba TODO desplazamiento de la página,
   incluidos los programáticos: se percibe como lentitud, no como suavidad.
   El hueco de la barra se reserva siempre: sin él, el título y el menú saltaban
   11 px entre una pantalla corta y una larga. */
html { scroll-behavior: auto; scrollbar-color: var(--line-2) transparent; }
@media (min-width: 621px) { html { scrollbar-gutter: stable; } }
/* Con un diálogo o la foto ampliada abiertos, la rueda no mueve la página de detrás. */
html:has(#modal:not(.hidden)), html:has(#lightbox:not(.hidden)) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
/* La única declaración de letra del panel: la del sistema. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--txt); font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
b, strong { font-weight: 600; }
button { font-family: inherit; }
::selection { background: var(--accent-dim); color: inherit; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
a { color: var(--accent-2); text-decoration: none; }
.app { display: flex; min-height: 100vh; }
/* Cifras tabulares donde hay números: tablas, importes, horas. Con la letra del sistema la
   coma y el punto conservan su ancho propio («39,00 €», no «39 ,00 €»). */
.num, .metric .n, td.num, th.num, table td, table th, time { font-variant-numeric: tabular-nums; }

/* SVG icon system ---------------------------------------------------------- */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.sm { width: 15px; height: 15px; }

/* ----------------------------- sidebar ---------------------------------- */
.sidebar {
  /* 🔴 LA CAUSA DEL SIDEBAR QUE SE ENCOGÍA.
     `width:244px` NO basta dentro de un flex: por defecto `flex-shrink:1`, así que
     el sidebar se dejaba estrujar. Medido: en una vista con tabla ancha pasaba de
     244px a UN PÍXEL. `flex: 0 0 244px` = ni crece ni encoge, pase lo que pase en
     el contenido. Va junto con `min-width:0` en `.content` (ver abajo): sin las
     DOS, el arreglo no se sostiene. */
  flex: 0 0 244px;
  width: 244px; background: var(--panel); border-right: 1px solid var(--line);
  /* El sidebar NO scrollea: scrollea solo el <nav> de dentro. Antes el scroll era
     de la barra entera, así que al abrir desplegables el logo se iba hacia arriba
     y el pie desaparecía. Ahora logo y pie quedan clavados y el menú se desplaza
     por dentro. 100dvh (no 100vh) para que en móvil no lo tape la barra del navegador. */
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; height: 100dvh; overflow: hidden;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; font-size: 15px; font-weight: 600; }
.logo .mark { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--txt); }
.logo .mark .ic { width: 15px; height: 15px; stroke: var(--panel); stroke-width: 2.4; }
nav {
  padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 3px;
  /* min-height:0 es lo que permite encoger a un hijo flex: sin él, `overflow`
     no llega a activarse nunca y el contenido desborda por abajo. */
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* Al llegar al final del menú, la rueda NO sigue moviendo la página de detrás. */
  overscroll-behavior: contain;
  scroll-behavior: auto;   /* el smooth global hace que llevar el activo a la vista se note lento */
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
nav::-webkit-scrollbar { width: 8px; }
nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
nav::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
nav::-webkit-scrollbar-track { background: transparent; }
.nav-group { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.nav-group:first-of-type { margin-top: 6px; padding-top: 0; border-top: none; }
.nav-label { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 10px 6px; }
nav a {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-btn);
  color: var(--txt); cursor: pointer; font-weight: 400; font-size: 13px; position: relative;
  transition: background-color .15s, color .15s;
}
nav a .ic { color: var(--muted); transition: color .15s; }
nav a:hover { background: var(--hover); color: var(--txt); }
nav a:hover .ic { color: var(--txt-dim); }
nav a.active { background: var(--sel); color: var(--txt); font-weight: 600; }
nav a.active .ic { color: var(--accent); }
/* La fila activa se marca con el fondo y el peso: sin barra de color a un lado y sin
   moverse al pasar por encima (con 30 filas, 1 px de desplazamiento se lee como temblor). */
.sidebar-foot { margin-top: auto; padding: 13px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
#userbox a { color: var(--accent-2); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.on { background: var(--good); }
.dot.off { background: var(--bad); border-radius: 1px; }

/* ----------------------------- content / page head ---------------------- */
/* El contenido aparece ya en su sitio al cambiar de vista: sin fundido ni desplazamiento. */
/* `min-width:0` es la otra mitad del arreglo. Un elemento flex tiene, por defecto,
   `min-width:auto` = la anchura intrínseca de su contenido. Con una tabla de 13
   columnas eso son ~1400px que el navegador se niega a reducir, la línea flex
   desborda y el sidebar paga el pato. Con 0, el contenido puede encogerse y quien
   gestiona el desbordamiento es la tabla (con su propio scroll), no el menú. */
.content { flex: 1 1 auto; min-width: 0; padding: 26px 36px 64px; max-width: 1340px; }
/* Red de seguridad: una tabla más ancha que su hueco scrolla dentro de su caja
   en vez de empujar el layout. Es el patrón que ya usaba Pedidos, generalizado. */
.content table { max-width: 100%; }
/* 🔴 `display:block` DEJA DE SER UNA TABLA: la rejilla interna pasa a
   encogerse al contenido y abandona el resto de su propia caja. Medido a
   1440px antes de tocar: Cartera 1126px de caja con 601px de columnas (525px,
   el 46,6%, vacios a la derecha), Usuarios 836px muertos, Contabilidad 680px y
   Taxonomia 520px. Ahora la tabla vuelve a ocupar el 100% y quien se desplaza
   cuando NO cabe es la TARJETA, que es un bloque normal y no deforma la
   rejilla. El scroll de movil no se pierde: `.card{overflow-x:auto}` ya existe
   en la media query de 620px. */
.card:has(> table) { overflow-x: auto; }
#view > table, .card > table { display: table; width: 100%; }
@media (max-width: 620px), (pointer: coarse) and (max-width: 1024px) {
  /* Suelta en la vista, sin tarjeta que la envuelva: se desplaza ella misma. */
  #view > table { display: block; overflow-x: auto; }
}
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin-bottom: 3px; }
h4 { font-size: 13px; font-weight: 600; }
.sub { color: var(--muted); font-size: 13px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
code { background: var(--chip); padding: 1px 5px; border-radius: 4px; font-size: 12px; color: var(--txt); font-family: var(--mono); }
hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

/* ----------------------------- metrics ---------------------------------- */
/* Las cifras van en una franja: un solo marco con filetes entre ellas, no una tarjeta por
   cifra. El filete de la última de cada fila lo recorta el margen negativo con el overflow. */
.metrics { display: flex; flex-wrap: wrap; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.card .metrics { background: none; border: 0; border-radius: 0; }
.metric { flex: 1 1 160px; min-width: 0; padding: 14px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.metric[onclick]:hover { background: var(--hover); }
.metric .n { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.metric .l { color: var(--muted); font-size: 12px; margin-top: 4px; font-weight: 500; }

/* ----------------------------- cards ------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 16px; }
.card h3 { font-size: 15px; margin-bottom: 14px; color: var(--txt); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h3 .ic { color: var(--muted); }
.card h4 { color: var(--txt-dim); margin: 6px 0; }

/* ----------------------------- tables ----------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
thead th, table tr:first-child th { color: var(--muted); font-size: 12px; font-weight: 500; }
thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
tr:hover td { background: var(--hover); }
td .ic { color: var(--muted); }

/* ----------------------------- estado (antes, pastillas tintadas) --------
   Glifo con forma y palabra en tinta normal: el color va solo en el glifo, y la
   forma distingue el estado también sin color. */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--txt-dim); white-space: nowrap; vertical-align: 1px; }
.badge::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.badge.good::before { background: var(--good); }
.badge.warn::before { width: 8px; border-radius: 0; background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.badge.bad::before { border-radius: 1px; background: var(--bad); }
.badge.mut { color: var(--muted); }
.badge.mut::before { background: none; border: 1.5px solid var(--muted); }

/* ----------------------------- buttons ---------------------------------- */
/* Relleno plano del acento para la acción principal; el resto, gris de sistema. Nada de
   degradados, brillos ni desplazamientos al pulsar. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; padding: 5px 12px; min-height: 30px; border-radius: var(--r-btn); cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.3; transition: background-color .1s, color .1s, border-color .1s; }
.btn .ic { width: 15px; height: 15px; }
.btn:hover { background: var(--accent-2); }
.btn:active { background: color-mix(in srgb, var(--accent) 82%, black); }
.btn.ghost { background: var(--fill); color: var(--txt); border-color: transparent; }
.btn.ghost:hover { background: var(--fill-2); }
.btn.ghost:active { background: var(--press); }
.btn.sm { padding: 3px 10px; min-height: 24px; font-size: 12px; border-radius: var(--r-sm); }
.btn:disabled { opacity: .45; cursor: default; }

/* ----------------------------- inputs ----------------------------------- */
input, select, textarea { background: var(--field); border: 1px solid var(--line-2); color: var(--txt); padding: 6px 10px; border-radius: var(--r-btn); font-size: 13px; font-family: inherit; transition: border-color .1s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: -1px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox] { accent-color: var(--accent); width: auto; }
textarea { min-height: 95px; resize: vertical; line-height: 1.55; }
.field { margin-bottom: 13px; } .field label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; font-weight: 500; }
.field input, .field textarea { width: 100%; }
.field input[type=checkbox], .field input[type=radio] { width: auto; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters input:not([type=checkbox]) { min-width: 240px; }
.filters .sw { white-space: nowrap; }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 16px 0; font-size: 13px; }

/* ----------------------------- gallery / QA ----------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.vcard:hover { border-color: var(--line-2); }
.vcard img { width: 100%; height: 188px; object-fit: cover; display: block; background: var(--bg-2); }
.vcard .cap { padding: 8px 10px; font-size: 12px; }
.vcard .cap b { color: var(--txt); }
.vcard.aprobada { border-color: var(--good); }
.vcard.rechazada { border-color: var(--bad); border-style: dashed; opacity: .55; }
.vcard.aprobada::after, .vcard.rechazada::after { position: absolute; top: 6px; right: 6px; width: 19px; height: 19px; border-radius: 50%; font-size: 12px; font-weight: 600; display: grid; place-items: center; z-index: 3; }
.vcard.aprobada::after { content: "\2713"; background: var(--good); color: var(--on-status); }
.vcard.rechazada::after { content: "\2715"; background: var(--bad); color: var(--on-status); border-radius: 2px; }
.vcard .acts { display: flex; gap: 5px; padding: 7px 8px; border-top: 1px solid var(--line); }
.vcard .acts .btn { flex: 1; padding: 8px 5px; font-size: 12px; justify-content: center; min-height: 36px; }
/* QA por teclado: variante enfocada + chip de atajos */
.vcard.qafoco { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd { display: inline-block; padding: 1px 6px; margin: 0 1px; font: 500 11px/1.5 var(--mono); color: var(--txt); background: var(--surface); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; }
/* delta "vs ayer" en KPIs del dashboard */
.delta { font-size: 11px; font-weight: 600; margin-left: 5px; white-space: nowrap; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); font-weight: 600; }
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* ----------------------------- modal ------------------------------------ */
.modal { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 50; animation: fadein .15s ease-out; }
.modal.hidden { display: none; }

/* 🔴 LA CLASE `hidden` NO EXISTÍA: solo `.modal.hidden` y `.lightbox.hidden`. Cualquier otro
   elemento marcado como oculto se quedaba VISIBLE. El menú de «Columnas» de Pedidos se pintaba
   vacío y salía como una barra blanca debajo del botón de CSV de envío.
   Lleva !important porque es una utilidad: si algo dice que está oculto, está oculto. */
.hidden { display: none !important; }
.modal-box { background: var(--elev); border: 0; border-radius: 12px; max-width: 920px; width: 92%; max-height: 88vh; overflow: auto; padding: 24px; position: relative; box-shadow: var(--sh-2); animation: pop .2s cubic-bezier(.23, 1, .32, 1); }
@keyframes pop { from { transform: scale(.98); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
.modal-close { position: absolute; top: 14px; right: 14px; background: transparent; color: var(--muted); border: 0; width: 28px; height: 28px; border-radius: var(--r-btn); cursor: pointer; display: grid; place-items: center; transition: background-color .1s, color .1s; }
.modal-close:hover { background: var(--hover); color: var(--txt); }
.modal-close svg { width: 14px; height: 14px; }
.modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.modal-grid img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }

/* ----------------------------- misc ------------------------------------- */
pre.log { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; font-size: 12px; max-height: 240px; overflow: auto; white-space: pre-wrap; font-family: var(--mono); }
.bar { height: 6px; background: var(--chip); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
.health { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 7px; background: var(--chip); border: 1px solid var(--line); padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; color: var(--txt-dim); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 18px; }

/* ----------------------------- toasts ----------------------------------- */
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 100; }
/* Aviso flotante: superficie elevada y el glifo de estado delante del texto. Sin franja de
   color a un lado ni cristal. */
.toast { display: flex; align-items: baseline; gap: 9px; background: var(--elev); color: var(--txt); padding: 10px 14px; border-radius: 10px; min-width: 240px; max-width: 420px; box-shadow: var(--sh-2); animation: slidein .2s cubic-bezier(.23, 1, .32, 1); font-size: 13px; line-height: 1.4; }
.toast::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.toast.warn::before { width: 8px; border-radius: 0; background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.toast.bad::before { border-radius: 1px; background: var(--bad); }
@keyframes slidein { from { transform: translateY(6px); opacity: 0; } }

/* ----------------------------- lightbox --------------------------------- */
.lightbox { position: fixed; inset: 0; background: var(--lightbox); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; }
.lightbox.hidden { display: none; }
.lightbox img { max-width: 94%; max-height: 94%; border-radius: 8px; }

/* ----------------------------- skeleton --------------------------------- */
.skel { background: var(--surface-2); border-radius: var(--r-card); height: 70px; margin-bottom: 11px; }

/* ----------------------------- responsive ------------------------------- */
/* ══ PANTALLAS ESTRECHAS Y MOVIL ═════════════════════════════════════════
 * 🔴 ESTA REGLA NO HABIA FUNCIONADO NUNCA. Decia `.sidebar { width: 60px }`,
 *    pero mas arriba hay `flex: 0 0 244px` y dentro de un flex el `flex-basis`
 *    GANA al `width`: en un movil de 375px la barra seguia comiendose 244 y el
 *    contenido se quedaba con 130. Se toca `flex`, que es quien manda. */

/* Ventana estrecha: barra de solo iconos. */
/* 🔴 ESTA COLUMNA DE ICONOS ES PARA RATON, NO PARA DEDOS. Apaga los nombres y los submenus
   (`display:none !important`), asi que en un telefono en horizontal —844 px de ancho— el menu se
   queda en iconos anonimos y tocar un desplegable no hace nada. Con `pointer: fine` solo la ve
   quien tiene raton; los dedos van al bloque de movil de mas abajo. */
@media (max-width: 900px) and (min-width: 621px) and (pointer: fine) {
  .sidebar { flex: 0 0 64px; width: 64px; }
  .logo { justify-content: center; padding: 16px 0 12px; }
  .logo .name, .nav-label, nav a .lbl, .nav-parent .lbl, .nav-parent .chev { display: none; }
  nav { padding: 4px 6px 14px; }
  nav a, .nav-parent { justify-content: center; padding: 10px 0; }
  /* Los submenus en 64px salian como iconos anonimos, imposibles de distinguir
     unos de otros. Se llega a ellos por el icono padre. */
  .nav-sub { display: none !important; }
  .sidebar-foot { padding: 10px 6px; text-align: center; font-size: 11px; }
  .content { padding: 18px 14px 50px; }
}

/* Movil: el menu se sale de en medio. Encogerlo no vale: una columna de iconos
   sin texto en 375px no se puede usar. */
/* La barra de movil. En escritorio no existe.
   🔴 ANTES ERA UN BOTON FLOTANDO SUELTO y al bajar se ponia encima del titulo
      que tuviera debajo. Una barra solida deja pasar el contenido por debajo.

   🔴 Y ESTA REGLA TIENE QUE IR AQUI, ANTES DE LA MEDIA QUERY. Estaba 58 lineas mas abajo, y como
      en CSS con la misma especificidad gana la ultima, tumbaba el `display:flex` de movil: la
      barra no se enseñaba NUNCA. Sin barra no hay boton, sin boton no se abre el sidebar, y el
      sidebar en movil vive fuera de pantalla — o sea que el menu entero era inalcanzable desde un
      telefono. Todo lo demas del movil estaba bien; era solo el orden de dos lineas. */
.movil-bar { display: none; }

@media (max-width: 620px), (pointer: coarse) and (max-width: 1024px) {
  .app { display: block; }
  .sidebar {
    position: fixed; z-index: 70; top: 0; left: 0; bottom: 0;
    flex: none; width: min(84vw, 292px); max-height: none;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: none;
  }
  /* La sombra solo con el menú abierto: cerrado, asomaba por el borde izquierdo. */
  .app.nav-abierta .sidebar { transform: none; box-shadow: var(--sh-2); }
  .nav-velo {
    display: none; position: fixed; inset: 0; z-index: 65;
    background: var(--scrim);
  }
  .app.nav-abierta .nav-velo { display: block; }
  .movil-bar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; z-index: 68; top: 0; left: 0; right: 0; height: 52px;
    padding: 0 8px; background: var(--panel);
    border-bottom: 1px solid var(--line);
  }
  .movil-tit { font-weight: 600; font-size: 15px; }

  /* 52 de barra + aire. El contenido empieza DEBAJO de la barra, no detras. */
  .content { padding: 66px 13px 44px; max-width: none; }
  h1 { font-size: 17px; }

  /* Las barras de filtros se apilaban una linea por control y comian media
     pantalla. Ahora reparten el ancho entre ellos. */
  .rs-filtros, .pe-barra { gap: 7px; }
  .rs-filtros > *, .pe-barra > * { min-width: 0; }
  .pe-barra input, .pe-barra select { flex: 1 1 46%; }
  .pe-barra .btn { flex: 0 0 auto; }
  .rs-pastilla { flex: 1 1 auto; }

  /* Una tabla ancha scrolla DENTRO de su caja; el ancho de la pagina no se
     mueve, que es lo que provocaba el zoom-out general. */
  .card { overflow-x: auto; }
  table { min-width: 0; }

  /* 🔴 PERO NO TODAS LAS TABLAS VIVEN EN UN `.card`, y las que no arrastraban la pagina entera.
     Medido a 375 px: en Publicados y en Flota la pagina se iba a 982 px —607 de scroll lateral—
     por una `table` de 979 px colgando de un `div` sin clase. El telefono no enseñaba una tabla
     ancha: enseñaba TODO encogido, porque el viewport se estiraba con ella.

     Se contiene cualquier contenedor de tabla. La tabla sigue igual y se desliza con el dedo
     dentro de su caja; lo que deja de moverse es la pagina. */
  #view div:has(> table),
  #view section:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Cinturon por si el navegador no entiende `:has()`: que al menos no crezca la pagina. */
  #view { max-width: 100%; overflow-x: hidden; }

  /* 🔴 LAS COLUMNAS ANCLADAS, SUELTAS EN MOVIL. En escritorio las dos ultimas columnas de Pedidos,
     Devoluciones y Clientes van `position:sticky` a la derecha para que el «···» y la cuenta se
     queden a la vista mientras la tabla se desliza — con 1.300 px de ancho, perfecto.

     En 375 px son 358 px de pantalla cubiertos por dos columnas fijas con fondo opaco. Y no es
     solo estetico: el enlace del cliente queda DEBAJO de la columna de la cuenta, asi que tocas el
     nombre y se abre otra cosa. Medido: 41 controles tapados en Clientes.

     Sueltas, la tabla se desliza entera como cualquier tabla. Se suelta tambien la cabecera
     pegada arriba: con `sticky` y un `right` puesto volveria a anclarse de lado.

     Con !important porque estas reglas las inyectan las vistas desde su .js, despues de esta hoja. */
  #view table th, #view table td, #view thead th { position: static !important; }

  /* 🔴 LAS CASILLAS DE LAS TABLAS MEDIAN 13 px DE ANCHO. Con el dedo no se acierta ni queriendo.
     Solo en movil: en escritorio 13 px con un raton estan bien y agrandarlas romperia la fila. */
  #view input[type="checkbox"], #view input[type="radio"] { width: 22px; height: 22px; }

  /* El boton de abrir el menu se quedo en 40; el minimo que se falla menos es 44. */
  .nav-abrir { width: 44px; height: 44px; }

  /* La X de cerrar un modal media 29x29. Es el unico control de esa ventana que no se puede
     fallar: si no se acierta, el modal no se cierra. */
  .modal-close { width: 44px; height: 44px; }

  /* 🔴 EL AREA SENSIBLE, NO EL TAMAÑO. Medido con el dedo: las «?» de ayuda 16x16, las cuentas de
     Clientes 15 px de alto, «Vendido» 16. Agrandarlos con padding moveria filas y tarjetas —o sea,
     cambiar el diseño—, asi que se agranda solo la zona que responde al toque, con un
     pseudo-elemento invisible. Se ven igual; se tocan como si midieran 40.

     Con medida en horizontal: estos enlaces van en fila dentro de una celda y, creciendo mucho a
     los lados, dos vecinos se robarian el toque. */
  .tb-ayuda, .cl-cta, .pu-retirados, .pu-estado a, .co-t-r .tb-ayuda { position: relative; }
  .tb-ayuda::after {
    content: ''; position: absolute; top: -12px; bottom: -12px; left: -12px; right: -12px;
  }
  .cl-cta::after, .pu-retirados::after, .pu-estado a::after {
    content: ''; position: absolute; top: -12px; bottom: -12px; left: -2px; right: -2px;
  }

  /* 🔴 LOS DESPLEGABLES, HOJA INFERIOR. Medido a 375 px: el menu de «Conectadas» se abria de 192 a
     513 — 138 px fuera de la pantalla. No es que sea ancho: cuelga del borde derecho de su boton
     (`position:absolute; right:0`) y en movil la barra de filtros se desliza, asi que el boton se
     va fuera y el menu detras.

     Pegado abajo y de lado a lado esta SIEMPRE dentro, salga de donde salga el boton, y cae donde
     llega el pulgar. El de escritorio no se toca. */
  /* 🔴 CON !important A PROPOSITO: las vistas inyectan su propio CSS desde el .js DESPUES de esta
     hoja ( y compañia), asi que sin esto ganan ellas y el menu se
     vuelve a salir de la pantalla. Comprobado: dos de los tres desplegables de Flota seguian
     abriendose de 192 a 513 con la regla puesta sin . */
  .pe-menu {
    position: fixed !important; left: 10px !important; right: 10px !important;
    top: auto !important; bottom: 12px !important;
    min-width: 0 !important; width: auto !important; max-width: none !important;
    max-height: min(62vh, 420px); overflow-y: auto;
    z-index: 72;                      /* por encima del velo (65) y de la barra (68) */
    box-shadow: var(--sh-2);
  }
  /* Los que en escritorio se anclan a la derecha con !important tambien caen aqui. */
  .pe-d.bib-d-cols .pe-menu, .pe-d.ga-d-cols .pe-menu, .pe-d.cp-d-cols .pe-menu,
  .pu-d-estado .pe-menu {
    left: 10px !important; right: 10px !important; min-width: 0 !important;
  }

  /* 🔴 OBJETIVOS DE TOQUE. Medido antes de tocar nada: .btn.sm daba ~26px de
     alto, .tb-r ~24px y .rs-pastilla ~34px. Con el dedo eso se falla siempre
     — el minimo es 44px. En escritorio se quedan como estaban: ahi 26px con
     un raton esta bien y agrandarlo estropearia la densidad. */
  .btn, .btn.sm, .tb-r, .pe-f, .rs-pastilla, .rs-cta-btn, .rs-abre,
  nav a, .nav-parent, select, input, .pe-cols button, .rs-cart-mas {
    min-height: 44px;
  }
  .btn, .btn.sm { padding: 11px 15px; font-size: 13px; }
  .tb-r { padding: 11px 15px; }
  .rs-pastilla { padding: 8px 13px; }
  /* Los dias del calendario tambien se tocan con el dedo. */
  .rs-cal-d { min-height: 40px; min-width: 40px; }
  /* Las celdas con enlace o accion, mas altas para no encadenar fallos. */
  td, th { padding-top: 11px; padding-bottom: 11px; }

  /* En tactil no hay puntero que 'pase por encima': el navegador simula el
     hover con el PRIMER toque y deja el clic para el segundo. Apagando los
     efectos de hover en tactil, el primer toque ya es el clic. */
  @media (hover: none) {
    .btn:hover { background: var(--accent); }
    .btn.ghost:hover, .btn.ok:hover, .btn.no:hover { background: var(--fill); }
    .tb-r:not(.on):hover, nav a:not(.active):hover, tr:hover td { background: transparent; }
  }
}

/* Sin esto el navegador espera ~300ms en cada toque por si es un doble-toque
   de zoom. Esa espera se siente como 'el boton no responde'. No afecta al raton. */
button, a, select, input, label, summary,
.btn, .tb-r, .pe-f, .rs-pastilla, .rs-cal-d, .rs-k-v, .rs-abre { touch-action: manipulation; }

.nav-abrir {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: none; color: var(--txt); border: 0; border-radius: 8px; cursor: pointer;
}
.nav-abrir:active { background: var(--press); }

/* ===== Componentes de la oleada UX ===== */
/* filas ya revisadas en QA: presentes pero sin gritar */
tr.rowdone td { opacity: .45; }
tr.rowdone:hover td { opacity: .8; }
/* tarjeta plegable (formularios de acción puntual: provisión masiva, nueva política…) */
details.detcard summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--txt); list-style: none; display: flex; align-items: center; gap: 8px; }
details.detcard summary::-webkit-details-marker { display: none; }
details.detcard summary::after { content: ""; width: 6px; height: 6px; margin: 0 4px 3px auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
details.detcard[open] summary::after { transform: translateY(3px) rotate(-135deg); }
details.detcard[open] summary { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
/* tarjeta de aviso: el borde y un glifo delante del título, sin teñir el fondo */
.card.warn { border-color: var(--warn); }
.card.warn h3::before, .card.bad h3::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* botones de QA (aprobar / rechazar): gris de sistema con el texto en el color de estado */
.btn.ok, .btn.no { background: var(--fill); border-color: transparent; }
.btn.ok { color: var(--good); }
.btn.no { color: var(--bad); }
.btn.ok:hover, .btn.no:hover { background: var(--fill-2); }

/* ===== Configuración: mosaico ordenado a 2 columnas ===== */
#cfg { columns: 2 430px; column-gap: 16px; }
#cfg .card { break-inside: avoid; margin-bottom: 16px; }
#cfg .card h3 { font-size: 15px; padding-bottom: 11px; border-bottom: 1px solid var(--line); margin-bottom: 15px; }
#cfg .field { margin-bottom: 14px; }
#cfg .field > label { line-height: 1.9; }
#cfg .field input[type=number] { text-align: center; }
#cfg .muted { line-height: 1.55; }
#cfg .btn { margin-top: 4px; }
#cfg hr { margin: 16px 0; border-top: 1px solid var(--line); }
#cfg h4 { color: var(--txt-dim); display: flex; align-items: center; gap: 6px; }
#cfg .card label input[type=checkbox] { margin-right: 4px; transform: translateY(1px); }

/* ===== Operativa: Bibliotecas / Jornada / Auditoría ===== */
.bibtabs { display:inline-flex; gap:4px; margin-bottom:18px; flex-wrap:wrap; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:4px; }
.bibtab { background:transparent; border:1px solid transparent; color:var(--muted); padding:7px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; transition:color .14s, background .14s; }
.bibtab:hover { color:var(--txt-dim); }
.bibtab.on { background:var(--surface); border-color:var(--line); color:var(--txt); }
.bibtab b { margin:0; background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:0 8px; font-size:11px; line-height:1.7; font-variant-numeric:tabular-nums; }
.bibtab.on b { background:var(--chip); border-color:var(--line); color:var(--txt); }
.bibbar { display:flex; align-items:center; gap:14px; margin-bottom:14px; min-height:22px; flex-wrap:wrap; }
.biblist { display:flex; flex-direction:column; }
.bibrow { display:flex; align-items:center; gap:12px; padding:8px 8px; border-bottom:1px solid var(--line); font-size:13px; border-radius:8px; transition:background .12s; }
.bibrow:hover { background:var(--hover); }
.bibrow:last-child { border-bottom:none; }
.bibthumb { width:42px; height:42px; border-radius:8px; object-fit:cover; flex:none; background:var(--bg-2); border:1px solid var(--line); cursor:pointer; transition:border-color .12s; }
.bibthumb:hover { border-color:var(--accent); }
.bibthumb.noimg { display:grid; place-items:center; color:var(--muted); font-size:13px; }
.bibmain { flex:1; min-width:0; cursor:pointer; }
.bibmain:hover .bibname { color:var(--accent-2); }
.bibname { color:var(--txt); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .12s; }
.bibsub { color:var(--muted); font-size:12px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bibmeta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; flex:none; }
.bibprecio { color:var(--txt); font-weight:600; font-variant-numeric:tabular-nums; }
/* cabecera de cada tarjeta de madre */
.bibhead { padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.madreico { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--chip); color:var(--muted); }
.madreico.warn { color:var(--warn); }
.madreinfo { min-width:0; }
.madreinfo h3 { margin:0; font-size:13px; }
.madreinfo h3.sinmadre { color:var(--warn); }
.madresub { display:block; color:var(--muted); font-size:11px; font-weight:500; margin-top:1px; }
.pbar { display:inline-block; width:120px; height:7px; border-radius:4px; background:var(--bg-2); overflow:hidden; vertical-align:middle; }
.pfill { display:block; height:100%; background:var(--accent); border-radius:4px; transition:width .3s; }
.pct { color:var(--txt-dim); font-weight:600; min-width:34px; text-align:right; }
.grow { display:flex; align-items:center; gap:10px; }
.grow h3 { margin:0; }
.sp { flex:1; }
.sw { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--txt); }
.sw input { accent-color:var(--accent); width:16px; height:16px; }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.kpis { display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:14px 18px; min-width:130px; }
.kn { font-size:28px; font-weight:600; color:var(--txt); letter-spacing: -.02em; }
.kl { color:var(--muted); font-size:12px; margin-top:3px; font-weight:500; }
.jrow { display:flex; align-items:center; gap:12px; padding:4px 0; font-size:12px; }
.jh { color:var(--muted); width:48px; }
.jbarwrap { flex:1; height:9px; background:var(--bg-2); border-radius:5px; overflow:hidden; }
.jbar { display:block; height:100%; background:var(--accent); border-radius:5px; }
.jn { color:var(--txt); width:40px; text-align:right; font-weight:600; }
.mono { font-family:var(--mono); color:var(--muted); font-size:12px; }
.aurow { display:grid; grid-template-columns:14px 1.1fr 1.5fr; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.aurow:last-child { border-bottom:none; }
.sdot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.auitem { color:var(--txt); font-weight:500; }
.aunota { color:var(--muted); font-size:12px; }

/* ---------- Bibliotecas v2: selección bulk + galería de fotos ---------- */
/* ---------- Almacén 3D (plano isométrico CSS, sin dependencias) ---------- */
.a3-escena{display:flex;flex-direction:column;gap:34px;padding:30px 10px 10px;perspective:1100px;overflow-x:auto}
.a3-fila{display:flex;gap:34px;align-items:flex-end;transform:rotateX(14deg);transform-style:preserve-3d}
.a3-filalbl{color:var(--muted);font-size:11px;font-weight:500;align-self:center;min-width:64px}
.a3-rack{position:relative;cursor:pointer;transform:rotateY(-16deg);transform-style:preserve-3d}
.a3-rack:hover .a3-cuerpo{border-color:var(--accent)}
.a3-cuerpo{width:92px;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:6px;position:relative;z-index:2}
.a3-balda{height:22px;border-radius:4px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--txt)}
.a3-lado{position:absolute;top:0;right:-13px;width:14px;height:100%;background:var(--bg-2);border:1px solid var(--line-2);border-left:0;transform:skewY(38deg);transform-origin:left;border-radius:0 4px 4px 0;z-index:1}
.a3-techo{position:absolute;top:-11px;left:0;width:100%;height:12px;background:var(--surface-2);border:1px solid var(--line-2);border-bottom:0;transform:skewX(52deg);transform-origin:bottom;border-radius:4px 4px 0 0;z-index:1}
.a3-tag{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:var(--txt);white-space:nowrap}
.a3-tag small{color:var(--muted);font-weight:400}
/* Plano 3D: la estantería se señala con el borde al pasar por encima; no se levanta ni gira. */
.a3-escena{perspective:1300px}
.almleg{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap;margin:2px 0 10px}
.almleg i{display:inline-block;width:13px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px}

/* Casilla de selección en lote: caja propia en los colores del tema, sin animación al marcar. */
.bibchk{display:inline-flex;align-items:center;margin-right:8px;position:relative}
.bibchk input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;cursor:pointer;border:1.5px solid var(--line-2);border-radius:5px;background:var(--surface);transition:background-color .1s,border-color .1s;position:relative;flex:none}
.bibchk input:hover{border-color:var(--accent)}
.bibchk input:checked{background:var(--accent);border-color:var(--accent)}
.bibchk input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Bulk-bar CONTEXTUAL: flota fija abajo-centro cuando hay selección, visible aunque hagas scroll. */
.selbar{display:flex;align-items:center;gap:10px;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  position:fixed;left:50%;bottom:18px;z-index:60;max-width:calc(100% - 28px);flex-wrap:wrap;justify-content:center;
  box-shadow:var(--sh-2);animation:selbarUp .16s ease}
@keyframes selbarUp{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.selbar{transform:translateX(-50%)}
/* Miniatura en la tabla de Canónicos */
.cthumbcell{width:46px}
.cthumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--bg-2);border:1px solid var(--line);cursor:pointer;display:block;transition:border-color .12s}
.cthumb:hover{border-color:var(--accent)}
.cthumb.noimg{display:grid;place-items:center;color:var(--muted);font-size:12px}
/* Resumen/medias del almacén (bloque 1) */
.almkpis{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.almkpi{flex:1;min-width:96px;padding:6px 0}
.almkpi b{display:block;font-size:22px;line-height:1.1;font-weight:600;color:var(--txt)}
.almkpi span{font-size:12px;color:var(--muted)}
.bibname.clickable{cursor:pointer}
.bibname.clickable:hover{text-decoration:underline;color:var(--accent-2)}
.bibgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:10px}
.bibcell{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.bibcell .bibchk{position:absolute;top:10px;left:10px;z-index:2;background:var(--surface);border-radius:6px;padding:3px;margin:0}
.bibimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;background:var(--bg-2)}
.bibimg.noimg{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}
.bibcellname{font-size:12px;line-height:1.25;cursor:pointer}
.bibcellname:hover{color:var(--accent-2)}
.bibcellmeta{font-size:11px;color:var(--muted)}
/* ---------- Árbol de cuentas ---------- */
.peongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin-top:8px}
.peoncell{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.peonws{font-family:var(--mono);font-size:12px}
.peonmeta{font-size:11px;color:var(--muted);margin-top:2px}
/* Árbol gráfico: agrupado por categoría + peones por rol */
.arbcat{margin-bottom:6px}
.arbcat-h{display:flex;align-items:center;gap:10px;margin:20px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.arbcat-h h2{font-size:15px;margin:0;text-transform:capitalize;}
.arbmadre .bibhead{padding-bottom:10px;margin-bottom:8px}
.arbcap{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.arbcap .bar{flex:1;margin:0}
/* El rol del peón con un glifo en la esquina (el de la leyenda), no con una franja a un lado. */
.peon-tryon,.peon-esc{position:relative}
.peon-tryon::after,.peon-esc::after{content:"";position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--txt-dim)}
.peon-esc::after{background:none;border:1.5px solid var(--txt-dim)}
.peoncell.conventa{border-color:var(--good)}
.arbleg{display:flex;gap:18px;margin:0 0 16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.arbleg i.dotleg{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.dotleg.tryon{background:var(--txt-dim);border-radius:50%}.dotleg.esc{border:1.5px solid var(--txt-dim);border-radius:50%}.dotleg.vta{background:var(--good)}
/* command palette (Ctrl+K) */
.cmditem{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--txt-dim)}
.cmditem:hover,.cmditem.on{background:var(--sel);color:var(--txt)}

/* Revisar variantes: rejilla densa + tags de defecto */
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.vgrid .vcard img { height:150px; object-fit:cover; }
.vgrid .vcard .cap { padding:5px 8px; font-size:11px; }
.vgrid .vcard .acts { padding:5px 6px; gap:4px; }
.vgrid .vcard .acts .btn { padding:5px 4px; min-height:30px; font-size:12px; }
.vgtag { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:var(--chip); border:1px solid var(--line); border-radius:var(--r-pill); font-size:12px; cursor:pointer; user-select:none; }
.vgtag:hover { border-color:var(--accent); }
.vgtag input { accent-color:var(--accent); }

/* ── Apartado FISCAL ── */
.fisgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:14px; }
.fld { display:flex; flex-direction:column; gap:4px; font-size:12px; }
.fld > span { color:var(--muted); font-weight:600; }
.fld input, .fld select { padding:6px 10px; border-radius:8px; background:var(--field); color:var(--txt); border:1px solid var(--line-2); font-size:13px; min-width:150px; }
.fld input:focus, .fld select:focus { border-color:var(--accent); }
.fis-sel { background:var(--field); color:var(--txt); border:1px solid var(--line-2); border-radius:7px; padding:4px 7px; font-size:12px; cursor:pointer; }
.fis-sel:hover { border-color:var(--accent-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
[tiny] { font-size:11px; }
.finc { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.finc:last-child { border-bottom:none; }
.fbars { display:flex; gap:14px; align-items:flex-end; height:130px; padding-top:8px; }
.fbcol { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:34px; }
.fbpair { display:flex; gap:3px; align-items:flex-end; height:110px; }
.fbar { width:18px; border-radius:2px 2px 0 0; min-height:3px; }
.fbar.ing { background:var(--accent-2); }
.fbar.gas { background:var(--muted); opacity:.55; }
.fblbl { font-size:11px; color:var(--muted); }
.fbdot { display:inline-block; width:9px; height:9px; border-radius:2px; vertical-align:middle; margin-right:2px; }
.fbdot.ing { background:var(--accent-2); }
.fbdot.gas { background:var(--muted); }
/* Barras HORIZONTALES: top gastos por proveedor (drill-down clicable) */
.fbars-h { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
.fbrow { display:flex; align-items:center; gap:8px; }
.fbrow:hover .fbrow-fill { opacity:.85; }
.fbrow-lbl { flex:0 0 130px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fbrow-track { flex:1; height:14px; background:var(--chip); border-radius:3px; overflow:hidden; }
.fbrow-fill { height:100%; background:var(--accent-2); border-radius:3px; min-width:2px; }
.fbrow-val { flex:0 0 auto; font-size:12px; font-weight:600; min-width:64px; text-align:right; }

/* ── Fiscal · rediseño ── */
.fis-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.fis-sub { color:var(--muted); font-size:13px; margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fis-head-r { display:flex; gap:8px; align-items:center; }
.fis-estado { font-size:13px; padding:5px 13px; }
.pill-info { background:var(--chip); border:1px solid var(--line); color:var(--muted); font-size:11px; padding:3px 9px; border-radius:var(--r-pill); cursor:help; }
.bibtab b.b-rojo { background:var(--bad); border-color:var(--bad); color:var(--on-status); }
.is-good { color:var(--good); } .is-warn { color:var(--warn); } .is-bad { color:var(--bad); }
.card.bad { border-color:var(--bad); } .card.bad h3::before { border-radius:1px; background:var(--bad); clip-path:none; }
/* cabecera de cumplimiento: una tarjeta más, con el filete fuerte; sin tinte ni sombra */
.fis-hero { border-color:var(--line-2); }
.fis-hero-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.fis-hero-big { font-size:22px; font-weight:600; }
.fis-hero-next { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px 16px; min-width:200px; }
.fis-zone-h { font-size:13px; color:var(--txt-dim); font-weight:600; margin:22px 0 10px; }
/* KPIs 4-en-fila + estado */
.fis-kpis .kpi { flex:1; min-width:150px; } .fis-kpis .kn { font-variant-numeric:tabular-nums; }
.kn.is-warn { color:var(--warn); }
.fis-diag { display:grid; grid-template-columns:1.6fr 1fr; gap:14px; margin-top:14px; align-items:start; }
@media (max-width:820px) { .fis-diag { grid-template-columns:1fr; } }
.fis-det { margin-top:14px; } .fis-det > summary { cursor:pointer; color:var(--muted); font-size:13px; padding:6px 0; user-select:none; }
.fis-det > summary:hover { color:var(--txt); }
/* barra de acciones (filtros) */
.fis-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 12px; }
.fseg { display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:3px; gap:2px; }
.fseg-b { background:transparent; border:none; color:var(--muted); padding:5px 12px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; transition:background-color .14s, color .14s; }
.fseg-b:hover { color:var(--txt); } .fseg-b.on { background:var(--surface); color:var(--txt); }
.fis-inp { padding:6px 10px; border-radius:8px; background:var(--field); color:var(--txt); border:1px solid var(--line-2); font-size:13px; min-width:170px; }
.fis-inp:focus { border-color:var(--accent); }
/* drop zone */
.fis-drop { border:2px dashed var(--line); border-radius:var(--r-card); background:var(--bg-2); padding:26px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background-color .15s; }
.fis-drop:hover { border-color:var(--line-2); }
.fis-drop.drag { border-color:var(--accent); background:var(--sel); }
/* tabla fiscal */
.tbl-fis { width:100%; border-collapse:collapse; }
.tbl-fis th { text-align:left; font-size:12px; color:var(--muted); font-weight:500; padding:8px 12px; border-bottom:1px solid var(--line); }
.tbl-fis td { padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
.tbl-fis tbody tr:hover td { background:var(--hover); }
.tbl-fis tbody tr:last-child td { border-bottom:none; }
.tbl-act { text-align:right; white-space:nowrap; }
/* selección en lote de facturas */
.tbl-chk { width:34px; text-align:center; padding-right:0 !important; }
.tbl-chk input { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); vertical-align:middle; }
.tbl-fis tbody tr.row-sel td { background:var(--sel); }
.fis-bulk { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; margin-bottom:10px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--sel); font-size:13px; }
.fis-bulk .sp { flex:1; }
/* banner de herencia tras crear proveedor */
.card.good { border-color:var(--good); }
.fis-inh { margin-bottom:12px; font-size:13px; }
/* drawer de factura */
.fis-drw { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; }
@media (max-width:760px) { .fis-drw { grid-template-columns:1fr; } }
.fis-drw-l { display:flex; flex-direction:column; }
.fis-visor { width:100%; height:420px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.fis-visor-img { width:100%; border:1px solid var(--line); border-radius:8px; }
.fis-drw-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:10px 0; }
.fis-drw-act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.fis-drw-r { max-height:74vh; overflow:auto; padding-right:4px; }
/* estado en la tabla y el drawer: glifo con forma y palabra, sin pastilla de color */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--txt-dim); margin-right:8px; white-space:nowrap; }
.chip::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.chip-good::before { background:var(--good); }
.chip-warn::before { width:8px; border-radius:0; background:var(--warn); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.chip-bad::before { border-radius:1px; background:var(--bad); }
.chip-mut { color:var(--muted); } .chip-mut::before { background:none; border:1.5px solid var(--muted); }
/* cabeceras ordenables */
.th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.th-sort:hover { color:var(--txt); }
/* segunda barra de filtros + checkbox-label */
.fis-bar2 { margin-top:-2px; gap:8px; align-items:center; }
.fis-chk-lbl { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; }
.fis-chk-lbl input { accent-color:var(--accent); width:14px; height:14px; }
/* avisos dentro del drawer: el glifo de estado delante, sin franja de color a un lado */
.fis-aviso { position:relative; margin-top:8px; padding:7px 10px 7px 26px; border-radius:8px; font-size:12px; background:var(--chip); }
.fis-aviso::before { content:""; position:absolute; left:10px; top:12px; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.fis-aviso.warn::before { width:8px; border-radius:0; background:var(--warn); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.fis-aviso.bad::before { border-radius:1px; background:var(--bad); }
.fis-aviso.mut::before { background:none; border:1.5px solid var(--muted); }
/* hilo de comentarios + historial */
.fis-cmts { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.fis-cmt { background:var(--chip); border-radius:8px; padding:7px 10px; font-size:13px; }
.fis-hist { font-size:12px; padding:5px 0; border-bottom:1px solid var(--line); }
.fis-hist:last-child { border-bottom:none; }
/* subida por-archivo (estado + reintento) */
.fis-up { font-size:12px; padding:3px 0; display:flex; align-items:center; gap:6px; }
.fis-up-i { width:16px; text-align:center; display:inline-block; }
.fis-up.is-ok .fis-up-i { color:var(--good); }
.fis-up.is-error { color:var(--bad); }
.fis-up.is-subiendo .fis-up-i { color:var(--warn); }
/* barra de preparación del cierre */
.fis-prep { display:flex; align-items:center; gap:10px; }
.fis-prep-bar { flex:1; height:10px; background:var(--chip); border-radius:999px; overflow:hidden; }
.fis-prep-bar>i { display:block; height:100%; border-radius:999px; transition:width .3s ease; }
/* selector de ejercicio en la cabecera */
.fis-ej { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:var(--r-pill); padding:1px 4px; }
.fis-ej b { min-width:38px; text-align:center; font-size:13px; }
.fis-ej .btn { padding:2px 7px; }
/* adjuntos + desglose de líneas en el drawer */
.fis-adjs { display:flex; flex-direction:column; gap:5px; margin-top:6px; }
.fis-adj { display:flex; align-items:center; gap:8px; font-size:13px; background:var(--chip); border-radius:8px; padding:5px 9px; }
.fis-lineas { margin:4px 0 8px; }
.fis-lineas td, .fis-lineas th { padding:5px 10px; }
.fis-visor-err { width:100%; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed var(--line); border-radius:8px; color:var(--muted); font-size:13px; padding:24px; gap:6px; }
/* a11y: tablas fiscales con scroll horizontal (7-6 col en móvil), links de acción enfocables, th ordenable */
#fis-tabla, #cal-body, #fis-act, #prov-facs, #exp-prev { overflow-x:auto; }
/* estado seleccionado no-cromático de los segmentados (además del color .on), para lectores y alto contraste */
.fseg-b[aria-pressed="true"] { font-weight:600; }
.linklike { background:none; border:none; padding:0; margin:0; color:var(--accent-2); font:inherit; cursor:pointer; text-decoration:underline; }
.linklike:hover { color:var(--accent); }
.th-sort { padding:0 !important; }
.th-sort .th-btn { background:none; border:none; color:var(--muted); font:inherit; font-size:12px; font-weight:500; cursor:pointer; padding:8px 12px; display:inline-flex; align-items:center; gap:3px; width:100%; }
.th-sort .th-btn:hover { color:var(--txt); }

/* ── galeria de canonicos ─────────────────────────────────────────────────── */
/* Reutiliza .bibgrid/.bibcell de Bibliotecas a proposito: dos pantallas que ensenan lo mismo
   tienen que parecerse. Solo se anade lo que aqui existe y alli no: vendida y variantes. */
.canv{background:none;border:0;padding:0;font:inherit;font-size:11px;color:var(--accent-2);cursor:pointer}
.canv:hover{text-decoration:underline}
.canv.z{color:var(--muted);cursor:default}
.bibcell.vendida .bibimg{opacity:.62}
.canvend{position:absolute;top:10px;right:10px;z-index:2;background:var(--good);color:var(--on-status);
  font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
/* Precio que NO es un dato sino el valor por defecto de su tipo de prenda: se pinta apagado y con
   virgulilla. Un numero inventado con el mismo peso visual que uno real envenena la pantalla. */
.bibest{color:var(--muted);font-weight:500;cursor:help;border-bottom:1px dotted currentColor}

/* ------------------------- nav: submenús desplegables ---------------------
   Un grupo colapsable dentro del sidebar. El padre NO navega: abre/cierra.
   Los hijos siguen siendo <a data-view> normales, así que el router, los roles
   y el estado activo funcionan exactamente igual que antes.                  */
.nav-tree { display: flex; flex-direction: column; }
.nav-parent {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 6px 10px; border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--txt); cursor: pointer;
  font: inherit; font-weight: 400; font-size: 13px; text-align: left;
  transition: background-color .15s, color .15s;
}
.nav-parent .ic { color: var(--muted); transition: color .15s; }
.nav-parent:hover { background: var(--hover); color: var(--txt); }
.nav-parent:hover .ic { color: var(--txt-dim); }
/* Como dotb: el chevron apunta ABAJO en reposo y gira 180° al abrir. */
.nav-parent .chev { margin-left: auto; width: 15px; height: 15px; transition: transform .18s ease; }
.nav-tree.open > .nav-parent .chev { transform: rotate(180deg); }
/* Un hijo activo con el grupo cerrado: el padre lo señala con el icono en el acento, sin gritar. */
.nav-tree.has-active:not(.open) > .nav-parent { color: var(--txt); }
.nav-tree.has-active:not(.open) > .nav-parent .ic { color: var(--accent); }

/* Despliegue suave sin max-height mágicos.
   El truco 0fr→1fr EXIGE que la rejilla tenga UN SOLO hijo. Con los enlaces
   colgando directos pasaron las dos cosas malas, en este orden:
     1. `grid-template-rows:0fr` define una fila -> del 2º enlace en adelante
        caían en filas implícitas `auto` y no colapsaban: se plegaba a medias.
     2. Al colapsar también las implícitas con `grid-auto-rows`, el `min-height:0`
        dejaba encoger los enlaces por debajo de su altura natural -> aplastados.
   Con un envoltorio único no ocurre ninguna de las dos: la rejilla anima una
   sola fila y los enlaces conservan su tamaño dentro. */
.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; }
.nav-tree.open > .nav-sub { grid-template-rows: 1fr; }
.nav-sub-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
/* Los hijos, como dotb: sangrado del bloque entero (no relleno por enlace), sin
   línea guía y sin punto. El hijo activo se marca SOLO con fondo, igual que ellos.
   La jerarquía la dan la sangría y el color, que es lo que se lee como limpio. */
.nav-sub-in { margin-left: 16px; }
nav .nav-sub a { padding: 6px 10px; font-size: 13px; border-radius: var(--r-btn); color: var(--txt); }
nav .nav-sub a::before, nav .nav-sub a::after { display: none; }
nav .nav-sub a:hover { color: var(--txt); background: var(--hover); }
nav .nav-sub a.active { background: var(--sel); color: var(--txt); font-weight: 600; }

/* ------------------------- nav: disparador de búsqueda -------------------
   El Ctrl+K ya funcionaba, pero nada en pantalla lo delataba. Con 30 destinos,
   quien más lo necesita era justo quien nunca lo iba a descubrir. Aspecto de
   campo de búsqueda (no de botón) para que se lea como "escribe aquí".      */
.nav-buscar {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 7px 10px; margin-bottom: 7px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--bg-2); color: var(--muted); cursor: pointer;
  font: inherit; font-size: 13px; text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
.nav-buscar:hover { background: var(--surface); border-color: var(--line-2); color: var(--txt); }
.nav-buscar .ic { color: var(--muted); transition: color .15s; }
.nav-buscar:hover .ic { color: var(--txt-dim); }
.nav-kbd {
  margin-left: auto; padding: 2px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
}

/* El grupo del pie se ancla abajo (nav ya es flex column con flex:1). */
.nav-pie { margin-top: auto; }

/* Icono de "abre fuera" al final de la fila (como el de dotb en «Instalar extensión»). */
nav a .ic.ext { margin-left: auto; width: 13px; height: 13px; opacity: .5; }
nav a:hover .ic.ext { opacity: .8; }

/* =========================== Tablero (portada) ===========================
   Con la forma del tablero de dotb: título a la izquierda, dos tarjetas, filas con
   filete de separación y la cifra pegada a la derecha. Aire generoso: aquí
   NO buscamos densidad, se miran ocho cifras y se sale.                    */
.tb-cab { text-align: left; margin-bottom: 20px; }
.tb-cab h1 { margin: 0; }
/* 🔴 `align-items: start` le daba a cada tarjeta su alto natural, y por eso una
   acababa mucho mas larga que la otra. Con el reparto por defecto (`stretch`)
   las dos miden lo mismo. El ancho ya era igual: 1fr cada una. */
.tb-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px; align-items: stretch; }
.tb-rejilla > .tb-card { display: flex; flex-direction: column; }

/* El detalle, plegado */
.tb-detalle > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 11px 2px; font-size: 12px; font-weight: 600; color: var(--muted);
  border-top: 1px solid var(--line);
}
.tb-detalle > summary::-webkit-details-marker { display: none; }
.tb-detalle > summary:hover { color: var(--txt); }
.tb-detalle > summary .chev { width: 15px; height: 15px; transition: transform .16s; }
.tb-detalle[open] > summary .chev { transform: rotate(180deg); }

/* El enlace al Resumen, siempre al fondo de la tarjeta: asi las dos tarjetas
   terminan a la misma altura aunque una tenga menos filas. */
.tb-cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-top: 1px solid var(--line);
  color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none;
}
.tb-cta:hover { background: var(--hover); }
.tb-cta .ic { width: 15px; height: 15px; }
.tb-card { padding: 24px 26px; margin: 0; }
.tb-cabcard { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tb-titulo { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.tb-cabcard .tb-titulo { margin: 0; flex: 1; }
.tb-meta { margin: 0 0 14px; font-size: 12px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 7px; }

/* Selector de período */
.tb-rangos { display: flex; gap: 3px; }
.tb-r { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; font-family: inherit; transition: background-color .14s, color .14s; }
.tb-r:hover { color: var(--txt); background: var(--hover); }
.tb-r.on { background: var(--sel); color: var(--txt); }

/* Lista de cuentas */
.tb-lista { list-style: none; margin: 0; padding: 0; }
.tb-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tb-cuenta:last-child { border-bottom: 0; }
.tb-cn { display: inline-flex; align-items: flex-start; gap: 9px; min-width: 0; }
.tb-cn .tb-punto { margin-top: 5px; }
.tb-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Cuando se vinculo, debajo del nombre: es lo que hace legible el orden de la lista. */
.tb-alta { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 1px; }
.tb-alta:empty { display: none; }
.tb-punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.tb-punto.viva { background: var(--good); }
.tb-punto.baneada { background: var(--bad); border-radius: 1px; }
.tb-punto.revisar { background: var(--warn); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tb-est { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.tb-est.viva { color: var(--good); }
.tb-est.baneada { color: var(--bad); }
.tb-mas { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.tb-vacio { color: var(--muted); font-size: 13px; padding: 10px 0; }
.tb-btn { margin-top: 18px; }

/* Filas de estadística */
.tb-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.tb-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.tb-fila-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-ic { color: var(--muted); flex: 0 0 auto; }
.tb-lbl { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.tb-pie { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tb-val { font-size: 22px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-sec { font-size: 13px; font-weight: 600; color: var(--muted); }
.tb-nd { color: var(--muted); font-weight: 600; }
.tb-fallo { color: var(--warn); font-size: 13px; line-height: 1.55; margin: 6px 0 0; }

/* La ayuda «?» — la explicación existe, pero no ocupa sitio hasta que se pide. */
.tb-ayuda { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--muted); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; cursor: pointer; flex: 0 0 auto; position: relative; transition: border-color .14s, color .14s; }
.tb-ayuda:hover { border-color: var(--accent); color: var(--accent-2); }
.tb-globo { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 268px; max-width: 76vw; background: var(--elev); color: var(--txt); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 12px; font-weight: 400; line-height: 1.55; text-transform: none; letter-spacing: 0; box-shadow: var(--sh-2); z-index: 30; text-align: left; }

/* ================== Pedidos › Resumen (forma de dotb) ================== */
.rs-cab { margin-bottom: 16px; }
.rs-filtros { display: flex; gap: 4px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.rs-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.rs-k { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 17px 19px; }
.rs-k-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rs-k-t { font-size: 13px; font-weight: 600; color: var(--txt); display: inline-flex; align-items: center; gap: 7px; }
.rs-k-i { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
.rs-k-i .ic { width: 16px; height: 16px; }
.rs-k-v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 12px; font-variant-numeric: tabular-nums; }
.rs-k-v.sm { font-size: 17px; margin-top: 4px; }
.rs-dos { display: flex; gap: 22px; margin-top: 10px; flex-wrap: wrap; }
.rs-p { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rs-p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.rs-ok::before { background: var(--good); }
.rs-pd::before { background: var(--warn); }
.rs-falta { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.rs-card { padding: 20px 22px; }
.rs-rango { font-size: 12px; color: var(--muted); }
.rs-vacio { color: var(--muted); font-size: 13px; margin: 18px 0 4px; line-height: 1.55; }

/* La serie de ventas: barras simples, sin librería. */
.rs-gr { display: flex; align-items: flex-end; gap: 4px; height: 168px; margin-top: 18px; padding-top: 6px; overflow-x: auto; }
.rs-sep { margin: 34px 0 14px; font-size: 13px; font-weight: 600; color: var(--txt); border-top: 1px solid var(--line); padding-top: 18px; }

/* ---- nav: tercer nivel (padre que navega + chevron que pliega) ---- */
.nav-parent-fila { display: flex; align-items: center; }
.nav-parent-fila > .nav-parent { flex: 1 1 auto; min-width: 0; }
.nav-chev {
  flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 28px;
  background: transparent; border: 0; border-radius: 6px; color: var(--muted);
  cursor: pointer; padding: 0; transition: background .14s, color .14s;
}
.nav-chev:hover { background: var(--hover); color: var(--txt); }
.nav-chev .chev { width: 14px; height: 14px; margin: 0; transition: transform .18s ease; }
.nav-tree.open > .nav-parent-fila > .nav-chev .chev { transform: rotate(180deg); }
/* Un enlace-padre se ve como sus hermanos de nivel, no como un rótulo de grupo. */
.nav-sub-in .nav-parent-a { padding: 6px 10px; font-size: 13px; font-weight: 400; color: var(--txt); }
.nav-sub-in .nav-parent-a.active { background: var(--sel); color: var(--txt); font-weight: 600; }
.nav-sub-in .nav-parent-a::before, .nav-sub-in .nav-parent-a::after { display: none; }
/* Tercer nivel: un escalón más de sangría, sin acumular márgenes raros. */
.nav-sub-in .nav-sub-in { margin-left: 14px; }

/* Las tarjetas que suben a la rejilla de arriba adoptan su caja, para que no se
   note que vienen de otro bloque. Y "Margen", ya suelto bajo el gráfico. */
.rs-rejilla > .dz-c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 17px 19px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rs-rejilla > .dz-c:hover { border-color: var(--line-2); }
/* Cuando una tarjeta no ha podido cargar su numero: se dice y se deja reintentar, en vez de
   ensenar un cero (que seria inventarselo) o desaparecer (que es lo que hacia antes). */
.rs-reintenta { border: 0; background: none; padding: 0; font: inherit; font-size: 13px;
  color: var(--accent); cursor: pointer; text-decoration: underline; }
.rs-esperando { color: var(--muted); }
.rs-card + .dz-c { display: block; width: 100%; margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 17px 19px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rs-card + .dz-c:hover { border-color: var(--line-2); }

/* Cabecera de pantalla de tabla (Pedidos, Clientes): el título a la izquierda y la línea de datos debajo. */
.pe-cab { text-align: left; margin-bottom: 22px; }
.pe-cab h1 { margin: 0 0 6px; }
.pe-cab p { margin: 0; font-size: 13px; color: var(--muted); }
/* Clientes */
.cl-u a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.cl-u a:hover { text-decoration: underline; }
.cl-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-f { line-height: 1.3; }
.cl-f em { font-style: normal; display: block; font-size: 11px; color: var(--muted); }
.cl-pie { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* Selector de vista (fotos / listado) — control segmentado. */
.vsel { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.vsel-b { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; border-radius: 7px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background-color .14s, color .14s; }
.vsel-b:hover { color: var(--txt); }
.vsel-b.on { background: var(--surface); color: var(--txt); }
.vsel-b .ic { width: 15px; height: 15px; }

/* Tabla de la flota: casilla, enlace externo y barra de selección. */
.fl-chk { width: 34px; text-align: center !important; }
.fl-chk input { cursor: pointer; }
.fl-ext { width: 11px; height: 11px; margin-left: 5px; opacity: .45; vertical-align: -1px; }
.fl-u a:hover .fl-ext { opacity: .9; }
.fl-sel { display: flex; align-items: center; gap: 10px; padding: 9px 13px; margin-bottom: 10px;
  background: var(--sel); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.fl-sel-n { font-weight: 600; margin-right: auto; }
.fl-sel-lista { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; font-size: 12px; line-height: 1.7; max-height: 190px; overflow: auto; }

/* Altas en vivo: las cuatro cifras del día en una franja, como .metrics. */
.av-chips { display: flex; flex-wrap: wrap; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.card .av-chips { background: none; border: 0; border-radius: 0; }
.av-chips .av-c { flex: 1 1 160px; min-width: 0; padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.av-chips .av-c b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.av-chips .av-c b.z { color: var(--muted); }
.av-chips .av-c b.ok { color: var(--good); }
.av-chips .av-c b.bad { color: var(--bad); }
.av-chips .av-c span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* Publicados en rejilla de fotos. */
.pu-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 13px; }
.pu-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color .14s; }
.pu-card:hover { border-color: var(--line-2); }
.pu-card-img { position: relative; aspect-ratio: 3/4; background: var(--bg-2); display: grid; place-items: center; }
.pu-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-card-sinfoto { font-size: 12px; color: var(--muted); }
.pu-card-e { position: absolute; left: 7px; bottom: 7px; font-size: 11px; padding: 2px 7px; border-radius: 99px; }
.pu-card-cuerpo { padding: 10px 11px 12px; }
.pu-card-t { font-size: 12px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pu-card-p { font-size: 15px; font-weight: 600; margin-top: 5px; font-variant-numeric: tabular-nums; }
.pu-card-m { margin-top: 7px; font-size: 11px; }

/* Barra de Deshacer tras dar de baja. */
.fl-desh { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 11px;
  background: var(--surface); border: 1px solid var(--good); border-radius: 10px; font-size: 13px; }
.fl-desh span { margin-right: auto; font-weight: 600; }

/* Cuerpo de un desplegable de tarjeta y sub-desplegable secundario. */
.detcard > .det-cuerpo { padding: 4px 2px 2px; }
.detcard.det-sec { margin-top: 14px; background: var(--bg-2); }
.detcard.det-sec > summary { font-size: 13px; font-weight: 600; }

/* ---- Pie del menú: tema arriba, usuario abajo (forma de dotb) ---- */
.sidebar-foot { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.pie-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px;
  border-radius: var(--r-btn); font-size: 13px; color: var(--txt);
  background: transparent; border: 0; font-family: inherit; cursor: pointer; transition: background-color .14s; }
.pie-fila:hover { background: var(--hover); color: var(--txt); }
.pie-fila .ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
/* El selector de tema sin la flecha nativa: la pinta la fila, en el gris de los iconos. */
.pie-tema select { flex: 1; min-width: 0; background: transparent; border: 0; color: inherit;
  font: inherit; font-size: 13px; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; }
.pie-tema::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 5px 3px 0; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.pie-user { position: relative; }
.pie-ini { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--txt); font-size: 11px; font-weight: 600; }
.pie-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.pie-txt b { font-size: 13px; font-weight: 600; color: var(--txt); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-txt em { font-style: normal; font-size: 11px; color: var(--muted); }
.pie-chev { margin-left: auto; width: 14px; height: 14px; transition: transform .18s; }
.pie-btn[aria-expanded="true"] .pie-chev { transform: rotate(180deg); }
.pie-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40;
  background: var(--elev); border: 1px solid var(--line); border-radius: 10px; padding: 5px;
  box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 1px; }
.pie-menu button { text-align: left; background: transparent; border: 0; color: var(--txt);
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.pie-menu button:hover { background: var(--hover); color: var(--txt); }
.pie-conn { padding: 6px 10px 8px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--line); margin-bottom: 3px; }

/* ==================== Contabilidad · Empresas ==================== */
.ct-alerta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--warn);
  border-radius: 10px; font-size: 13px; line-height: 1.5; }
.ct-alerta::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ct-alerta b { color: var(--warn); }
.ct-alerta .btn { margin-left: auto; }
.ct-emp { display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.ct-emp-ini { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--chip); color: var(--txt); font-size: 15px; font-weight: 600; }
.ct-emp-txt { flex: 1; min-width: 0; }
.ct-emp-txt b { display: block; font-size: 15px; font-weight: 600; }
.ct-emp-txt em { font-style: normal; font-size: 12px; color: var(--muted); }
.ct-falta { color: var(--warn); font-weight: 600; }
.ct-datos { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 4px 18px; }
.ct-dato { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ct-dato:last-child { border-bottom: 0; }
.ct-dato > span { color: var(--muted); flex: 0 0 auto; }
.ct-dato > b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ct-form { padding: 22px 24px; }
.ct-rej { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.ct-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ct-f > span { font-weight: 600; }
.ct-f input { width: 100%; }
.ct-f u { text-decoration: none; font-size: 12px; color: var(--accent-2); cursor: pointer; }
.ct-f u:hover { text-decoration: underline; }
.ct-acc { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }

/* Columna "Registrada" de la flota: fecha y hora arriba, antigüedad debajo. */
.fl-alta { line-height: 1.3; text-align: right; }
.fl-alta b { font-weight: 600; white-space: nowrap; }
.fl-alta b span { font-weight: 400; color: var(--muted); margin-left: 4px; }
.fl-alta em { font-style: normal; display: block; font-size: 11px; color: var(--muted); }
/* Al mirar «como trabajador», la inicial avisa con su propio color. */
.pie-user.como-worker .pie-ini { background: var(--warn); color: var(--on-status); }
.pie-user.como-worker .pie-txt em { color: var(--warn); font-weight: 600; }

/* ---- Pestañas (Smart Agent), con la forma de las de dotb ---- */
.msj-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.msj-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; white-space: nowrap; transition: color .14s, border-color .14s; }
.msj-tab:hover { color: var(--txt); border-bottom-color: var(--line-2); }
.msj-tab.on { color: var(--txt); border-bottom-color: var(--accent); }
.msj-panel > .card:first-child { margin-top: 0; }

/* ---- Almacén: buscar y colocar, cada uno en su bloque ---- */
.alm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.alm-bloque h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.alm-fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.alm-fila .ct-f { flex: 1 1 130px; min-width: 0; }
.alm-fila .ct-f.alm-corto { flex: 0 0 92px; }
.alm-fila .btn { flex: 0 0 auto; }

/* ---- Árbol de cuentas madre ---- */
.cu-arbol { display: flex; flex-direction: column; gap: 6px; }
.cu-nodo { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cu-nodo > summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer;
  list-style: none; font-size: 13px; }
.cu-nodo > summary::-webkit-details-marker { display: none; }
.cu-nodo > summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform .15s; }
.cu-nodo[open] > summary::before { transform: rotate(90deg); }
.cu-nodo > summary:hover { background: var(--hover); }
.cu-nodo-t { font-weight: 600; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }
.cu-nodo-n { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.cu-nodo .cu-barra { flex: 1 1 90px; min-width: 60px; height: 6px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.cu-nodo .cu-barra i { display: block; height: 100%; background: var(--accent); }
.cu-nodo .cu-barra i.lleno { background: var(--warn); }
.cu-nodo-c { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cu-hojas { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 14px 40px; }
.cu-hoja { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--txt-dim); text-decoration: none; }
.cu-hoja:hover { border-color: var(--accent); color: var(--accent-2); }

/* 🔴 Esta regla FALTABA: irA() ponía la clase `ancha` y no existía nada que la
   usara, así que el "ancho completo" no hacía nada. Sin ella el tope de 1340px
   seguía estrangulando las tablas. */
.content.ancha { max-width: none; }
/* La tabla de Clientes tiene 7 columnas, no las 12 de Pedidos: heredar su
   min-width de 1080px le sobraba y le metía scroll horizontal sin motivo. */
#cl .pe-tabla { min-width: 0; width: 100%; }
#cl .pe-tabla th, #cl .pe-tabla td { white-space: nowrap; }
#cl .pe-tabla th:first-child, #cl .pe-tabla td:first-child { width: 1%; }
#cl .cl-f, #cl .cl-f em { white-space: nowrap; }

/* Bibliotecas: las fases en un desplegable en vez de siete pestañas a la vez. */
.bib-fases { margin-bottom: 12px; }
.bib-fases > summary .bib-actual { font-weight: 600; }
.bib-fases > summary b { margin-left: 8px; background: var(--chip); border-radius: 99px; padding: 1px 9px; font-size: 12px; }
.bib-fases .bibtabs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }

/* Contabilidad: tarjetas de cifra con el aire de las de dotb. */
#co .co-kpis { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
#co .co-k { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 17px 19px; }
#co .co-k u { text-decoration: none; display: block; font-size: 13px; font-weight: 600; color: var(--txt); }
#co .co-k b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }
#co .co-k em { font-style: normal; display: block; font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

/* ---- Chats: bandeja de dos paneles (lista + conversación), como dotb ---- */
.ch-dos { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 14px; align-items: start; }
.ch-izq { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); overflow-y: auto; overscroll-behavior: contain; margin: 0; }
.ch-der { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 16px 18px; }
.ch-der .ch-vacio { color: var(--muted); text-align: center; padding: 60px 20px; }
.ch-h { cursor: pointer; }
.ch-h.abierto { background: var(--sel); border-radius: var(--r-btn); }
/* En pantalla estrecha vuelve a una sola columna: el panel debajo de la lista. */
/* Por debajo de 1150px las dos columnas no caben sin estrangular el hilo
   (340 de lista + el resto): se apila, que se lee mejor que dos columnas malas. */
@media (max-width: 1150px) { .ch-dos { grid-template-columns: 1fr; } .ch-izq { max-height: 340px; } .ch-der { max-height: none; } }
/* La columna del hilo puede encogerse: sin min-width:0 su contenido intrínseco
   la estrangulaba y quedaba en 199px mientras la lista se llevaba todo el sitio. */
.ch-dos > .ch-der, .ch-dos > .ch-izq { min-width: 0; }
.ch-dos { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.cl-cta { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.cl-cta:hover { text-decoration: underline; }
.cl-mail { display: block; font-style: normal; font-size: 11px; color: var(--muted); }

/* ── ANCHO REAL DE CONTABILIDAD ────────────────────────────────────────────
   🔴 Las tablas se quedaban a media pantalla: la tarjeta que las envuelve no
   estiraba porque nada le daba ancho. dotb usa `max-w-full` en el <main>; el
   equivalente aqui es decirle a la tarjeta que ocupe su contenedor. */
#co > .card, #cp > .card, #ga > .card, #emp > .card,
#co > .co-sec, #cp > .cp-sec { width:100%; box-sizing:border-box; }
#cp .tabla, #ga .tabla { width:100%; }

/* ── GASTOS ───────────────────────────────────────────────────────────────── */
.ga-chip { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--txt); white-space:nowrap; }
.ga-f { white-space:nowrap; color:var(--muted); }
.ga-sub { display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:2px; }
.ga-iva { color:var(--muted); }
.ga-acc { white-space:nowrap; text-align:right; }
.ga-tot { font-weight:600; border-top:1px solid var(--line); }
.ga-tabla tfoot td { padding-top:9px; }
.ga-form { display:grid; grid-template-columns:1fr 1fr; gap:11px 14px; }
.ga-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.ga-form input, .ga-form select { padding:6px 10px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--field); color:var(--txt); font-size:13px; }
.ga-form .ga-ancho { grid-column:1 / -1; }
.ga-err { margin-top:11px; padding:9px 12px; border-radius:8px; font-size:13px;
  border:1px solid var(--bad); color:var(--bad); }
@media (max-width:640px) { .ga-form { grid-template-columns:1fr; } }

/* ── POLÍTICA DE ENVÍO (Smart Agent) ─────────────────────────────────────── */
.env-fila { display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:12px 0; border-top:1px solid var(--line); }
.env-fila:first-of-type { border-top:0; }
.env-dias { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.env-dia { width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); font-weight:600; font-size:13px; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s; }
.env-dia:hover { border-color:var(--accent); }
.env-dia.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
/* interruptor, como el de dotb */
.sw { position:relative; display:inline-block; width:44px; height:25px; flex:0 0 auto; }
.sw input { position:absolute; opacity:0; width:0; height:0; }
.sw span { position:absolute; inset:0; border-radius:999px; background:var(--line); cursor:pointer; transition:background .15s; }
.sw span::before { content:''; position:absolute; width:19px; height:19px; left:3px; top:3px;
  border-radius:50%; background:var(--knob); transition:transform .15s; }
.sw input:checked + span { background:var(--accent); }
.sw input:checked + span::before { transform:translateX(19px); }
.sw input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }

/* ── PEDIDOS DE CONTABILIDAD: columnas y orden ───────────────────────────── */
.cp-cols { position:relative; display:inline-block; }
.cp-cols-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:210px;
  background:var(--elev); border:1px solid var(--line); border-radius:10px; padding:7px;
  box-shadow:var(--sh-2); }
.cp-cols-menu label { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
  font-size:13px; cursor:pointer; white-space:nowrap; }
.cp-cols-menu label:hover { background:var(--hover); }
.cp-th { cursor:pointer; user-select:none; white-space:nowrap; }
.cp-th:hover { color:var(--txt); }
.cp-th.on { color:var(--accent); }
.cp-fl { margin-left:5px; font-size:11px; }

/* ── EMPRESAS: rejilla de entidades ──────────────────────────────────────── */
.emp-rej { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; margin-bottom:20px; }
.emp-t { display:flex; align-items:center; gap:13px; padding:15px 17px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card); }
.emp-t.on { border-color:var(--accent); }
.emp-ini { flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--chip);
  display:grid; place-items:center; font-weight:600; font-size:15px; color:var(--txt); }
.emp-txt { flex:1 1 auto; min-width:0; }
.emp-txt b { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emp-txt em { font-style:normal; display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.emp-badge { display:inline-block; margin-top:5px; padding:1px 8px; border-radius:999px; font-size:11px;
  font-weight:500; background:var(--chip); color:var(--txt-dim); }
.emp-badge.inc { color:var(--bad); }
.emp-acc { flex:0 0 auto; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.ga-form label span { display:block; }
@media (max-width:520px) { .emp-t { flex-wrap:wrap; } .emp-acc { width:100%; justify-content:flex-start; } }

/* ── GRÁFICA DE VENTAS (línea, estilo dotb) ───────────────────────────────── */
/* `position:relative` porque el globo vive DENTRO de este contenedor. Y aquí se
   deshacen el display:flex / height:168px / overflow-x de la gráfica de BARRAS
   vieja, que llevaban este mismo nombre y seguían recortando el SVG por abajo. */
.rs-gr { position:relative; display:block; width:100%; height:auto;
  margin-top:6px; padding-top:0; overflow:visible; }
.rs-svg { width:100%; height:250px; display:block; overflow:visible; }
/* preserveAspectRatio estira el trazo: se compensa con vector-effect
   para que la línea no engorde al ensanchar la tarjeta. */
.rs-svg path, .rs-svg line { vector-effect:non-scaling-stroke; }
.rs-rej { stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; opacity:.75; }
/* Sin relleno bajo la curva: la línea sola se lee mejor y no es la gráfica de plantilla. */
.rs-area { fill:none; stroke:none; }
.rs-linea { fill:none; stroke:var(--accent); stroke-width:1.5;
  stroke-linejoin:round; stroke-linecap:round; }
/* Los puntos no se pintan: llevan el dato y anclan la guía. La capa de encima
   es la que recibe el ratón, así que tampoco estorban al hit-test. */
.rs-pt { fill:transparent; pointer-events:none; }
/* Un solo día: ese punto SÍ se ve, que si no la gráfica parece rota. */
.rs-uno { fill:var(--accent); stroke:var(--surface); stroke-width:2; pointer-events:none; }
.rs-ejey { fill:var(--muted); font-size:11px; text-anchor:end; font-variant-numeric:tabular-nums; }
.rs-ejex { fill:var(--muted); font-size:11px; text-anchor:middle; }

/* ---- El globo al pasar el ratón (o el dedo) ---- */
/* Capa transparente que recoge el mousemove. Cubre el SVG entero para que el
   globo salga también pegado a los bordes. */
.rs-capa { fill:transparent; cursor:crosshair; }
.rs-guia, .rs-act, .rs-gtip { opacity:0; visibility:hidden; transition:opacity .12s ease; }
.rs-gr.rs-on .rs-guia, .rs-gr.rs-on .rs-act,
.rs-gr.rs-on .rs-gtip { opacity:1; visibility:visible; }
.rs-guia { stroke:var(--accent); stroke-width:1; stroke-dasharray:4 3; pointer-events:none; }
.rs-act { fill:var(--accent); stroke:var(--surface); stroke-width:2.5; pointer-events:none; }
.rs-gtip { position:absolute; left:0; top:0; z-index:6; pointer-events:none; white-space:nowrap;
  transform:translate(-50%, calc(-100% - 14px));
  background:var(--elev); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; min-width:136px; box-shadow:var(--sh-2); }
/* Punto muy alto: el globo se saldría de la tarjeta, así que baja. */
.rs-gtip.rs-abajo { transform:translate(-50%, 14px); }
.rs-gtip b { display:block; font-size:12px; margin-bottom:6px; }
.rs-gtip span { display:flex; justify-content:space-between; gap:16px;
  font-size:12px; font-variant-numeric:tabular-nums; padding:2px 0; }
.rs-gtip em { font-style:normal; color:var(--muted); }
.rs-gtip i { font-style:normal; font-weight:600; }
.rs-vacio { color:var(--muted); font-size:13px; padding:16px 0; }

/* ── GRÁFICOS DEL RESUMEN (mapa de horas, rankings, rosco) ───────────────── */
.rs-rejilla2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px; margin:16px 0; }
.rs-ancha { grid-column:1 / -1; }
.rs-nota { margin:11px 0 0; font-size:12px; color:var(--muted); line-height:1.5;
  border-top:1px solid var(--line); padding-top:9px; }

/* Mapa de calor: 1 columna para el día + 8 franjas */
/* El tope de 620px NO era un olvido: estirar la rejilla a los 1078px del
   padre dejaba celdas de 130x26 (5:1), peor de leer. Lo que no se sostenia era
   la INCOHERENCIA de darle a la tarjeta toda la fila (.rs-ancha) y luego capar
   el contenido a 620px pegado a la izquierda: 458px muertos, todos del mismo
   lado. Se sube el tope Y la altura de celda a la vez (la proporcion se
   mantiene en ~2,9:1, era 2,7:1) y lo que sobra se reparte centrando. */
/* Como en dotb: rejilla COMPACTA y centrada. A 880px las celdas salían casi el doble de
   anchas que las suyas y la tarjeta se comía la pantalla. */
.rs-heat { display:grid; grid-template-columns:3rem repeat(8,1fr); gap:5px; margin-top:10px;
  max-width:570px; margin-inline:auto; }
.rs-hh { font-size:12px; color:var(--muted); text-align:center; align-self:end; padding-bottom:2px; }
.rs-hd { font-size:12px; color:var(--muted); display:flex; align-items:center; }
.rs-hc { position:relative; height:36px; border-radius:6px; display:grid; place-items:center;
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--bg-2); color:var(--txt); }
/* 🔴 EL TINTE VA EN UNA CAPA APARTE. Antes la opacidad se aplicaba a la celda entera, o
   sea también al número: en las horas flojas la cifra se desvanecía con el fondo y el
   mapa dejaba de leerse justo donde hace falta mirar de cerca. (color-mix() no vale:
   no existe antes de Safari 16.2.) */
.rs-hc::before { content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--accent); opacity:var(--o); }
.rs-hc span { position:relative; }   /* la cifra, por encima del tinte y siempre opaca */
/* Cuando el acento ya es denso, el número se lee mejor en blanco. Igual que dotb. */
.rs-hc.on { color:var(--accent-ink); }
.rs-hc.z { background:var(--bg-2); }
.rs-hc.z::before { opacity:0; }

/* Barras horizontales */
.rs-bars { display:flex; flex-direction:column; gap:7px; margin-top:11px; }
.rs-bar { position:relative; display:grid; grid-template-columns:minmax(84px,34%) 1fr auto; align-items:center; gap:10px; }
/* La bandera necesita cuerpo para leerse. */
/* 🔴 Estaba a 20px por las BANDERAS, que necesitan cuerpo. Pero las banderas ya tienen su
   propia regla más abajo (.rs-bars.banderas), así que ese tamaño solo engordaba los
   nombres de cuenta de todos los demás gráficos. En dotb son texto normal. */
.rs-bar-k { font-size:13px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-bar-k em { display:block; font-style:normal; font-size:11px; color:var(--muted); }
.rs-bar-t { height:22px; border-radius:2px; background:var(--bg-2); overflow:hidden; }
/* La barra aparece ya en su ancho: sin crecer desde cero ni entrar escalonada. */
.rs-bar-t i { display:block; height:100%; border-radius:2px; background:var(--accent); }
.rs-bar-v { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; min-width:26px; text-align:right; }

/* Ranking numerado */
.rs-rank { display:flex; flex-direction:column; gap:11px; margin-top:11px; }
.rs-rk { display:flex; align-items:center; gap:11px; }
.rs-rk-n { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--bg-2);
  display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--muted); }
.rs-rk-t { flex:1 1 auto; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-rk-t em { display:block; font-style:normal; font-size:11px; color:var(--muted); }
.rs-rk b { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Rosco */
.rs-rosco { display:flex; align-items:center; gap:20px; margin-top:11px; flex-wrap:wrap; justify-content:center; }
.rs-rosco-svg { width:140px; height:140px; flex:0 0 auto; }
.rs-ro-b { fill:none; stroke:var(--bg-2); stroke-width:15; }
.rs-ro-f { fill:none; stroke:var(--accent); stroke-width:15; stroke-linecap:round; }
.rs-ro-t { fill:var(--txt); font-size:22px; font-weight:600; text-anchor:middle; }
.rs-ro-leg { display:flex; flex-direction:column; gap:8px; font-size:12px; }
.rs-ro-leg i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; }
.rs-ro-leg i.a { background:var(--accent); }
.rs-ro-leg i.b { background:var(--bg-2); border:1px solid var(--line); }
/* En movil el rotulo de hora bajaba a 8px, que no se lee. Se queda en 12px y
   lo que cede es el hueco entre celdas y el ancho de la columna del dia. */
@media (max-width:560px){ .rs-heat{grid-template-columns:2.4rem repeat(8,1fr);gap:3px}
  .rs-hc{height:32px}
  .rs-hh{font-size:12px} .rs-hd{font-size:12px} }

/* Cifra grande con pie (likes y pedidos) */
/* Dos cifras del mismo peso, en dos columnas iguales. Antes iba con
   `space-between` y tamanos distintos (30px y 20px), una a la izquierda y otra
   a la derecha: se veia torcido y ademas las cifras se movian segun lo largo
   que fuera su pie. Con la rejilla, el pie ya no mueve nada. */
.rs-cif { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:14px; }
.rs-cif > div { padding:2px 14px; min-width:0; }
.rs-cif > div:first-child { padding-left:0; }
.rs-cif > div + div { border-left:1px solid var(--line); }
.rs-cif b { display:block; font-size:28px; font-weight:600; line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing: -.02em; }
.rs-cif span { display:block; font-size:12px; color:var(--muted); margin-top:4px; line-height:1.35; }
.rs-cif-d { text-align:left; }
.rs-cif-d b { font-size:28px; }
/* En movil, una debajo de otra: dos columnas de 26px no caben en 375. */
@media (max-width:620px) {
  .rs-cif { grid-template-columns:1fr; }
  .rs-cif > div { padding:10px 0; }
  .rs-cif > div + div { border-left:0; border-top:1px solid var(--line); }
}

/* Tarjeta a la espera de un dato que tiene que mandar el motor */
.rs-espera { padding:16px 4px 6px; }
.rs-espera b { display:block; font-size:13px; margin-bottom:7px; }
.rs-espera p { margin:0 0 8px; font-size:12px; color:var(--muted); line-height:1.6; }
.rs-espera code { background:var(--bg-2); padding:1px 6px; border-radius:4px; font-size:12px; }
.rs-espera-p { border-top:1px solid var(--line); padding-top:8px; font-size:12px; }
/* Tira de fotos de la ficha de un publicado */
.pu-d-tira { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pu-d-tira img { width:72px; height:96px; object-fit:cover; border-radius:8px; cursor:zoom-in;
  border:1px solid var(--line); background:var(--bg-2); }
.pu-d-tira img:hover { border-color:var(--accent); }

/* Tarjetas del Resumen, plegables */
details.rs-card > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; }
details.rs-card > summary::-webkit-details-marker { display:none; }
details.rs-card > summary:hover .rs-k-t { color:var(--accent); }
.rs-chev { width:17px; height:17px; flex:0 0 auto; color:var(--muted); margin-left:auto;
  transition:transform .15s; }
details.rs-card[open] > summary .rs-chev { transform:rotate(180deg); }
details.rs-card > summary .rs-rango { margin-left:0; }
.rs-card-in { padding-top:2px; }
details.rs-card:not([open]) { padding-bottom:14px; }

.rs-cta { padding:6px 11px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--txt); font-size:13px; margin-left:8px; }

/* Barra de filtros del Resumen, estilo dotb: pastillas con icono */
.rs-filtros { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:14px 0 18px; }
.rs-pastilla { display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  cursor:pointer; position:relative; min-width:170px; }
.rs-pastilla:hover { border-color:var(--line-2); }
.rs-pastilla > .ic { color:var(--muted); flex:0 0 auto; }
.rs-pastilla select { border:0; background:none; color:var(--txt); font-size:13px;
  outline:none; cursor:pointer; flex:1 1 auto; appearance:none; padding-right:4px; }
.rs-pas-ch { width:14px; height:14px; color:var(--muted); opacity:.55; flex:0 0 auto; }
/* Toda la pastilla es clicable, asi que toda la pastilla lo parece. El icono y
   la flecha dejan de tragarse el cursor de texto. */
.rs-pastilla { cursor:pointer; }
.rs-pastilla > .ic, .rs-pas-ch { pointer-events:none; }
.rs-pastilla .rs-cta-menu, .rs-pastilla .rs-cal-menu { cursor:default; }
.rs-sub { margin:4px 0 0; font-size:13px; color:var(--muted); }
.rs-cab2 { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.rs-sub2 { font-size:12px; color:var(--muted); }

/* Selector de cuentas: buscador + casillas, como el de dotb */
.rs-cta-caja { position:relative; }
.rs-cta-btn { flex:1 1 auto; text-align:left; background:none; border:0; color:var(--txt);
  font:inherit; font-size:13px; cursor:pointer; padding:0; }
.rs-cta-menu { position:absolute; left:0; top:calc(100% + 6px); z-index:60; width:260px;
  background:var(--elev); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--sh-2); overflow:hidden; }
.rs-cta-busca { display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--line); }
.rs-cta-busca .ic { color:var(--muted); flex:0 0 auto; }
.rs-cta-busca input { flex:1 1 auto; min-width:0; border:0; background:none; color:var(--txt);
  font-size:13px; outline:none; }
.rs-cta-lista { max-height:260px; overflow-y:auto; padding:5px; }
.rs-cta-it { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px;
  font-size:13px; cursor:pointer; }
.rs-cta-it:hover { background:var(--hover); }
.rs-cta-it input { accent-color:var(--accent); cursor:pointer; }
.rs-cta-vacio { padding:12px 11px; font-size:12px; color:var(--muted); }
.rs-cta-pie { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 11px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.rs-cta-pie button { background:none; border:0; color:var(--accent); font:inherit;
  font-size:12px; cursor:pointer; padding:0; }
.rs-cta-pie button:hover { text-decoration:underline; }

/* Calendario de rangos, estilo dotb: atajos a la izquierda, dos meses al lado */
.rs-cal-caja { position:relative; }
.rs-cal-menu { position:absolute; left:0; top:calc(100% + 6px); z-index:60;
  background:var(--elev); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--sh-2); overflow:hidden; }
.rs-cal-menu > div { display:flex; }
.rs-cal-atajos { display:flex; flex-direction:column; gap:2px; padding:8px 6px;
  border-right:1px solid var(--line); min-width:132px; }
.rs-cal-atajos button { text-align:left; padding:6px 9px; border:0; border-radius:6px;
  background:none; color:var(--txt); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.rs-cal-atajos button:hover { background:var(--hover); }
.rs-cal-atajos button.on { background:var(--sel); font-weight:600; }
.rs-cal-meses { display:flex; align-items:flex-start; gap:6px; padding:10px 12px; position:relative; }
.rs-cal-mes { min-width:200px; }
.rs-cal-tit { text-align:center; font-size:13px; font-weight:600; margin-bottom:8px; text-transform:capitalize; }
.rs-cal-sem, .rs-cal-rej { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.rs-cal-sem span { text-align:center; font-size:11px; color:var(--muted); padding-bottom:3px; }
.rs-cal-d { height:28px; border:0; border-radius:6px; background:none; color:var(--txt);
  font:inherit; font-size:12px; cursor:pointer; }
.rs-cal-d:hover:not(:disabled) { background:var(--hover); }
.rs-cal-d:disabled { color:var(--muted); opacity:.35; cursor:default; }
.rs-cal-d.hoy { color:var(--accent); font-weight:600; }
.rs-cal-nav { position:absolute; top:8px; border:0; background:none; color:var(--muted);
  font-size:17px; line-height:1; cursor:pointer; padding:2px 7px; border-radius:6px; }
.rs-cal-nav:hover { background:var(--hover); color:var(--txt); }
.rs-cal-nav.der { right:10px; }
@media (max-width:700px){ .rs-cal-menu > div{flex-direction:column} .rs-cal-atajos{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)} .rs-cal-mes:nth-of-type(2){display:none} }

/* Tarjetas del Resumen que se abren (cartera, envios) */
.rs-cart-caja, .rs-env-caja { position:relative; }
.rs-abre { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-align:left; width:100%; }
.rs-abre:hover { color:var(--accent); }
/* 🔴 `.rs-abre { font: inherit }` (arriba) pisaba a `.rs-k-v { font-size:28px }`
   por venir despues con la misma especificidad: el numero de "En transito" salia
   con letra de parrafo mientras las demas cifras iban a 27px. */
.rs-k-v.rs-abre { font-size: 28px; font-weight: 600; letter-spacing: -.02em;
  margin-top: 12px; font-variant-numeric: tabular-nums; }
.rs-dos.rs-abre { font: inherit; }
.rs-pop { position:absolute; left:0; right:0; top:calc(100% - 4px); z-index:60;
  background:var(--elev); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--sh-2); padding:6px; max-height:340px; overflow-y:auto; }
.rs-pop.ancho { right:auto; width:min(460px,86vw); }
.rs-cart-cab { display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:6px 9px;
  font-size:12px; color:var(--muted); }
.rs-cart-f { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:6px 9px; border-radius:7px; font-size:12px; }
.rs-cart-f:hover { background:var(--hover); }
.rs-cart-f.z { opacity:.5; }
.rs-cart-f a { color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-cart-f a:hover { text-decoration:underline; }
.rs-cart-f b { font-variant-numeric:tabular-nums; min-width:62px; text-align:right; color:var(--muted); }
.rs-cart-f b.ok { color:var(--good); } .rs-cart-f b.pd { color:var(--warn); }
.rs-cart-mas { width:100%; margin-top:4px; padding:7px; border:0; border-top:1px solid var(--line);
  background:none; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; }
/* Envios en curso */
.rs-env-f { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start;
  padding:9px; border-radius:8px; border-bottom:1px solid var(--line); }
.rs-env-f:last-child { border-bottom:0; }
.rs-env-t b { display:block; font-size:12px; font-weight:600; }
.rs-env-t em { font-style:normal; font-size:11px; color:var(--muted); }
.rs-env-e { text-align:right; }
.rs-env-b { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--txt-dim); white-space:nowrap; }
.rs-env-b::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.rs-env-b.ok::before { background:var(--good); }
.rs-env-b.w::before { width:8px; border-radius:0; background:var(--warn); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.rs-env-b.bad::before { border-radius:1px; background:var(--bad); }
.rs-env-e em { display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:3px; max-width:200px; }
.rs-env-x { grid-column:1/-1; font-size:11px; color:var(--muted); }
.rs-cal-atajos button.quitar{color:var(--bad);font-weight:600}

/* Gris claro, no el acento: el acento es para las PUNTAS del intervalo. Lo de en

   medio solo dice «esto también entra». */
.rs-cal-d.tramo { background:var(--bg-2); border-radius:0; color:var(--txt); }
.rs-cal-d.tramo:hover { background:var(--line); }
.rs-cal-d.sel { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.rs-cal-pista { font-size:12px; color:var(--muted); padding:6px 9px 8px; line-height:1.5; }
.rs-cal-pista b { display:block; color:var(--txt); font-size:12px; }

/* ---- Cartera, pagina propia ---- */
/* La tabla reparte el ancho: el nombre de la cuenta se queda con el sobrante y
   las tres columnas de dinero con lo justo. Antes se apelotonaban a la
   izquierda y dejaban un hueco muerto a la derecha. */
.ca-t { width:100%; border-collapse:collapse; margin-top:6px; table-layout:fixed; }
.ca-t th:first-child, .ca-t td:first-child { width:auto; }
.ca-t th.num, .ca-t td.num { width:150px; }
.ca-t th { text-align:left; font-size:12px; font-weight:500;
  color:var(--muted); padding:9px 10px; border-bottom:1px solid var(--line); }
.ca-t th.num, .ca-t td.num { text-align:right; font-variant-numeric:tabular-nums; }
.ca-t td { padding:11px 10px; border-bottom:1px solid var(--line); font-size:13px; }
.ca-t tr.z td { opacity:.45; }
.ca-t td.ok { color:var(--good); font-weight:600; }
.ca-t td.pd { color:var(--warn); font-weight:600; }
.ca-t tbody tr:hover td { background:var(--hover); }
/* Una fila de envio que lleva a su pedido: que se note que se puede pinchar. */
.rs-env-f.pinchable { cursor:pointer; }
.rs-env-f.pinchable:hover { background:var(--hover); }

/* Marca para las filas que NO dependen del rango elegido. Sin esto, un selector
   Hoy/7d/30d encima de nueve filas hace creer que filtra las nueve, cuando solo
   gobierna dos (ventas y créditos de IA). */
/* En frase normal, a 12 px y en el gris fuerte del tema: a 10 px y en mayúsculas no pasaba
   el contraste AA. */
.tb-total-chip { margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  background: var(--chip); color: var(--txt-dim); font-size: 12px; font-weight: 500;
  vertical-align: 1px; }

/* Globo de una barra. Con CSS puro y no siguiendo al raton: cada cambio de
   filtro reconstruye las barras, y un globo posicionado por JavaScript se
   quedaria colgado apuntando a un nodo que ya no existe. */
.rs-bar-tip {
  position:absolute; left:34%; bottom:calc(100% + 7px); z-index:20;
  min-width:172px; padding:9px 11px;
  background:var(--elev); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--sh-2);
  opacity:0; visibility:hidden;
  transition:opacity .13s, visibility .13s;
  pointer-events:none;
}
.rs-bar:hover .rs-bar-tip, .rs-bar:focus-within .rs-bar-tip {
  opacity:1; visibility:visible;
}
.rs-bar-tip b { display:block; font-size:12px; margin-bottom:6px; }
.rs-bar-tip span { display:flex; justify-content:space-between; gap:14px;
  font-size:12px; font-variant-numeric:tabular-nums; padding:2px 0; }
.rs-bar-tip em { font-style:normal; color:var(--muted); }
/* La primera barra no tiene sitio arriba: su globo sale por debajo. */
.rs-bar:first-child .rs-bar-tip { bottom:auto; top:calc(100% + 7px); }

.rs-env-pie { display:flex; width:100%; align-items:center; justify-content:center; gap:7px;
  padding:11px; margin-top:4px; border:0; border-top:1px solid var(--line);
  background:none; color:var(--accent); font-size:13px; font-weight:600; cursor:pointer; }
.rs-env-pie:hover { background:var(--hover); }
.rs-env-pie .ic { width:15px; height:15px; }

/* Toda la tarjeta es clicable, asi que toda la tarjeta lo parece -- igual que
   'Prendas fotografiadas' y 'Coste de IA', que son un boton entero. */
.rs-env-caja, .rs-cart-caja { cursor:pointer; transition:border-color .14s; }
.rs-env-caja:hover, .rs-cart-caja:hover { border-color:var(--line-2); }
/* El desplegable de dentro no hereda el cursor: ahi se lee, no se pincha. */
.rs-env-caja .rs-pop, .rs-cart-caja .rs-pop { cursor:default; }
/* El titulo y el icono dejan de tragarse el cursor de texto. */
.rs-env-caja .rs-k-t, .rs-cart-caja .rs-k-t,
.rs-env-caja .rs-k-i, .rs-cart-caja .rs-k-i { pointer-events:none; }
/* Menos la ayuda '?', que sigue siendo suya. */
.rs-env-caja .tb-ayuda, .rs-cart-caja .tb-ayuda { pointer-events:auto; }

/* 🔴 LOS ESTILOS .pe-* DE PEDIDOS VIVEN EN vista-pedidos.js, en peEstilos().
   Aqui habia una COPIA de .pe-d-btn, .pe-d-mas y .pe-foto con otras medidas. Como
   la hoja que inyecta la vista se cuelga del <head> DESPUES de este fichero, ganaba
   siempre la de alla: dos sitios diciendo cosas distintas y solo uno con efecto.
   Se deja uno. .pe-d-val y .pe-foto-no no los usaba ya nadie. */

/* ===========================================================================
   EN VIVO (vista `vivo`, frontend/public/vista-vivo.js)
   Una línea de tiempo, no una tabla: lo que importa es CUANDO y QUE, y que se
   lea de un vistazo sin adornos. Todo con las variables del tema, ni un color
   escrito a mano, para que siga funcionando al cambiar de tema.
   ========================================================================= */

.lv-wrap { max-width: 920px; }

.lv-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lv-tit { font-size: 22px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 5px; }
.lv-sub { font-size: 13px; color: var(--muted); margin: 0; max-width: 54ch; line-height: 1.5; }

/* --- el estado de la conexión: siempre visible, nunca decorativo. Lo dicen el glifo y la
   palabra; el punto no late: en reposo no se mueve nada. --- */
.lv-estado { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--txt-dim);
  font-size: 12px; font-weight: 500; white-space: nowrap; }
.lv-pulso { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; color: var(--muted); }
.lv-e-ok .lv-pulso    { color: var(--good); }
.lv-e-carga .lv-pulso { background: none; border: 1.5px solid var(--muted); }
.lv-e-warn .lv-pulso  { color: var(--warn); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lv-e-bad .lv-pulso   { color: var(--bad); border-radius: 1px; }
.lv-e-off .lv-pulso   { color: var(--muted); }

/* --- acotar (no esconde: «Todo» es lo que viene puesto) --- */
.lv-filtros { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 0 2px; }
.lv-chip { padding: 6px 13px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s; }
.lv-chip:hover { color: var(--txt-dim); border-color: var(--line-2); }
.lv-chip.on { background: var(--sel); border-color: var(--line-2); color: var(--txt); }

/* --- una fuente que no se pudo leer: la lista de abajo está incompleta --- */
.lv-aviso { margin: 14px 0 0; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--warn); background: none;
  color: var(--txt-dim); font-size: 12px; line-height: 1.5; }
.lv-aviso b { color: var(--warn); }

/* --- la línea de tiempo --- */
.lv-lista { padding-top: 8px; }

.lv-ev { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 0 14px; padding: 13px 0; position: relative; }
/* Doble declaración a propósito: si el navegador no entiende `color-mix`, tira
   la segunda línea y se queda con la primera. Sin esto, un navegador viejo se
   quedaría sin separadores Y sin hilo, que es la estructura de la pantalla. */
.lv-ev + .lv-ev { border-top: 1px solid var(--line);
  border-top-color: color-mix(in srgb, var(--line) 55%, transparent); }

/* SIN hilo vertical, a proposito. Se probo con el y sobraba: el punto de color
   mas la linea fina entre filas ya dan la lectura cronologica, y las dos cosas
   juntas recargan una pantalla que tiene que ser minimalista. */
.lv-marca { display: flex; justify-content: center; padding-top: 5px; }

.lv-punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  color: var(--muted); flex: 0 0 auto; }

.lv-cuerpo { min-width: 0; }
.lv-alto { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lv-tit-ev { font-size: 13px; font-weight: 600; color: var(--txt); }
.lv-cuenta { font-size: 12px; font-weight: 500; color: var(--txt-dim);
  background: var(--chip); border: 1px solid var(--line);
  padding: 1px 8px; border-radius: var(--r-pill); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-texto { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 3px 0 0;
  overflow-wrap: anywhere; }

.lv-hora { font-size: 12px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; padding-top: 4px; }

/* Colores por familia: solo el estado lleva color (venta, fallo, aviso); el resto, gris.
   Tiñen el punto y nada más: el color aquí informa, no decora, y no esconde ningún evento. */
.lv-c-venta   { color: var(--good); }
.lv-c-pedido  { color: var(--txt-dim); }
.lv-c-oferta  { color: var(--txt-dim); }
.lv-c-fallo   { color: var(--bad); }
.lv-c-cuenta  { color: var(--txt-dim); }
.lv-c-mensaje { color: var(--txt-dim); }
.lv-c-aviso   { color: var(--warn); }
.lv-c-panel   { color: var(--muted); }
.lv-c-otro    { color: var(--muted); }

/* --- el que acaba de entrar: un destello del fondo que se apaga; la fila no se mueve --- */
.lv-nuevo::after { content: ''; position: absolute; inset: 0 -14px; border-radius: 10px;
  background: var(--accent-dim); pointer-events: none; animation: lv-lavado 2.2s ease-out forwards; }
@keyframes lv-lavado { 0% { opacity: 1; } 100% { opacity: 0; } }

/* --- carga --- */
.lv-skel { pointer-events: none; }
.lv-skel .lv-punto { background: var(--line-2); color: var(--line-2); }
.lv-barra { display: block; height: 9px; border-radius: 5px; background: var(--line); }
.lv-barra.lv-b1 { width: 148px; }
.lv-barra.lv-b2 { width: 62%; margin-top: 9px; height: 11px; }

/* --- vacío: una línea a la izquierda con lo que pasa; sin icono grande ni caja --- */
.lv-nada { display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: 4px; padding: 20px 0; }
.lv-nada-ic { display: none; }
.lv-nada b { font-size: 13px; font-weight: 600; color: var(--txt); }
.lv-nada span { font-size: 13px; color: var(--muted); max-width: 46ch; line-height: 1.55; }

.lv-pie { font-size: 12px; color: var(--muted); margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line); line-height: 1.5; }
.lv-pie:empty { display: none; }

@media (max-width: 640px) {
  .lv-ev { grid-template-columns: 16px minmax(0, 1fr); }
  .lv-hora { grid-column: 2; grid-row: 2; padding-top: 6px; }
  .lv-tit { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-nuevo::after { animation: none !important; }
}

/* Acceso a la actividad en directo, junto a los filtros del Resumen. No es un
   filtro -- lleva a otra pantalla -- asi que se distingue: pastilla con un
   punto de estado. */
.rs-vivo { display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  color:var(--txt-dim); font-size:12px; font-weight:500;
  cursor:pointer; transition:border-color .14s, color .14s; }
.rs-vivo:hover { border-color:var(--line-2); color:var(--txt); }
.rs-vivo-punto { width:7px; height:7px; border-radius:50%; background:var(--good); flex:0 0 auto; }

/* Enlace de un evento del EN VIVO a su pedido. */
.lv-ir { margin-left:8px; padding:2px 9px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); color:var(--accent);
  font-size:12px; font-weight:600; cursor:pointer; }
.lv-ir:hover { border-color:var(--accent); background:var(--accent-dim); }

.lv-etiq { margin-left:6px; padding:2px 9px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); color:var(--txt-dim);
  font-size:12px; font-weight:600; text-decoration:none; }
.lv-etiq:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* Cartera, de borde a borde. Medido antes de tocar: la tarjeta YA ocupaba todo
   el ancho disponible; lo que la separaba del borde era el margen del
   contenido (36px a cada lado), no la tarjeta. Se recorta solo aqui para no
   cambiar la densidad del resto del panel. */
/* Se engancha a LO QUE HAY PINTADO, no a una clase que alguien tiene que
   acordarse de quitar: `.vista-cartera` se quedaba pegada al salir de Cartera
   (solo renderResumen la limpiaba) y dejaba el Tablero, EN VIVO y cualquier
   otra pantalla con 14px de margen en vez de 36. Con `:has` el margen se va
   solo en cuanto el DOM de Cartera desaparece: no hay estado que limpiar. */
.content:has(> #view table.ca-t) { padding-left:14px; padding-right:14px; }
.content:has(> #view table.ca-t) .card { border-radius:12px; }
@media (max-width:620px) {
  .content:has(> #view table.ca-t) { padding-left:8px; padding-right:8px; }
  /* Antes se forzaban 460px de tabla dentro de una tarjeta de 357px (movil de
     375px) y media tabla quedaba detras de un desplazamiento lateral. Se
     aprietan las tres columnas de dinero y CABE. El scroll sigue de red: la
     regla `.card{overflow-x:auto}` de esta misma media query no se toca. */
  .ca-t { min-width:0; }
  .ca-t th.num, .ca-t td.num { width:76px; }
  .ca-t th, .ca-t td { padding-left:6px; padding-right:6px; }
  .ca-t td:first-child { overflow-wrap:anywhere; }
}

/* Barras rotuladas con bandera: la columna del rotulo mide lo que el emoji, no
   el ancho reservado para 'Paises Bajos'. La barra se queda con el resto. */
.rs-bars.banderas .rs-bar { grid-template-columns: auto 1fr auto; }
.rs-bars.banderas .rs-bar-k { font-size:22px; line-height:1; padding-right:2px; }

/* El formulario de compra a proveedor estaba plegado con un titulo en letra
   pequena y parecia que no existia. Se le da aspecto de accion principal.
   Sigue plegado: abierto de entrada empuja la tabla de lotes fuera de pantalla. */
details.detcard > summary.lo-nuevo {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--r-btn);
  background:var(--accent); color:var(--accent-ink);
  font-size:13px; font-weight:600; cursor:pointer; list-style:none;
}
details.detcard > summary.lo-nuevo::-webkit-details-marker { display:none; }
details.detcard > summary.lo-nuevo::after { content:none; }
details.detcard > summary.lo-nuevo:hover { background:var(--accent-2); }
details.detcard[open] > summary.lo-nuevo { margin-bottom:12px; }

/* ═══════════════ OBJETIVOS DE TOQUE DEL REGISTRO «EN VIVO» ═══════════════
   Va al final de la hoja y con `.lv-baja .lv-acc` delante A PROPOSITO: el
   bloque LV_CSS de vista-vivo.js se inyecta en <head> DESPUES de este fichero
   y ya toca `.lv-acc .lv-ir` / `.lv-acc .lv-etiq`, asi que hace falta mas peso
   para ganarle. Se arregla SOLO desde CSS porque vista-vivo.js esta en obras.

   Se parchean LOS DOS enlaces: `.lv-ir` (ver pedido) y `.lv-etiq` (imprimir
   etiqueta), que es una clase distinta con su propia regla. Tocar solo `.lv-ir`
   dejaba el de la etiqueta a 23,25px.

   Los 23,25px medidos no fallan solo el objetivo de 44px de Apple/AAA: se
   quedan por debajo del minimo VINCULANTE de WCAG 2.2 AA 2.5.8 (24x24 px CSS)
   por 0,75px. */
@media (max-width: 620px), (pointer: coarse) and (max-width: 1024px) {
  .lv-baja .lv-acc .lv-ir, .lv-baja .lv-acc .lv-etiq {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 2px 12px; box-sizing: border-box;
  }
  /* Las pastillas de intervalo median 28px. A 390 y 375px envuelven a dos filas
     y debajo de una pastilla hay OTRA pastilla: el fallo de dedo no cae en
     hueco muerto, cambia de filtro. */
  .lv-filtros .lv-chip { min-height: 44px; }
}

/* La tarjeta de totales del EN VIVO se estiraba a 920px para ensenar dos
   cifras: 599px (67,4%) de superficie con borde y fondo vacia. No era un fallo
   de layout —es un bloque dentro de una columna con max-width— sino de diseno.
   Se encoge a su contenido. Va con `#lv-total` (id) porque `.lv-tot` lo define
   LV_CSS, que se carga despues. */
/* Antes se encogía a su contenido. Ahora la barra ocupa todo el ancho, para que cuadre con
   el globo que va justo debajo. Sigue siendo un id porque la clase la define vista-vivo.js. */
#lv-total { width: 100%; max-width: 100%; box-sizing: border-box; }
/* Sin tope, una nota larga volveria a estirar la caja a todo lo ancho. */
#lv-total .lv-tot-nota { max-width: 60ch; }

/* Chats: la regla de una sola columna en pantallas estrechas estaba ANTES de
   otra que volvia a exigir dos con minimo de 260px, y al ir despues ganaba.
   Resultado: a 375px la pagina desbordaba 25px. Se repite al final, que es
   donde manda. */
.ch-dos-movil {} /* marca para saber que este bloque existe */
@media (max-width: 1150px) {
  .ch-dos { grid-template-columns: minmax(0, 1fr); }
  .ch-izq { max-height: 340px; }
  .ch-der { max-height: none; }
}

/* =========== PESTAÑAS DE PÁGINA (Anuncios canónicos · Variantes) ===========
   Subrayado, no cápsula: la cápsula (.vsel) ya significa otra cosa en esta misma barra
   —cómo ver la lista— y con la misma forma las dos cosas se leen como lo mismo. */
.can-tabs { display:inline-flex; align-items:stretch; gap:2px; margin-left:6px; }
.can-tab { position:relative; background:transparent; border:0; border-bottom:2px solid transparent;
  padding:7px 12px 6px; font:inherit; font-size:13px; font-weight:600; color:var(--muted);
  cursor:pointer; white-space:nowrap; transition:color .14s, border-color .14s; }
.can-tab:hover { color:var(--txt); }
.can-tab.on { color:var(--txt); border-bottom-color:var(--accent); }

/* El recuento de Renovables: una línea discreta bajo la barra. Antes eran tres tarjetas
   grandes que gritaban más que el contenido. */
.renov-pie { margin:10px 2px 12px; font-size:12px; color:var(--muted); }

/* ═══════════ LA BIBLIOTECA UNIFICADA ═══════════
   Dentro de la Biblioteca, las 7 fases dejan de vivir en una caja gris: al partirse en dos
   líneas pesaba más que el contenido que anunciaba. Sueltas y con borde, se leen como lo que
   son —un filtro— y no compiten con las pestañas de sección que van justo encima. */
#bib-cuerpo .bibtabs { background:transparent; border:0; padding:0; gap:6px; margin-bottom:14px; }
#bib-cuerpo .bibtab { border:1px solid var(--line); background:var(--surface); }
#bib-cuerpo .bibtab:hover { border-color:var(--line-2); color:var(--txt); }

/* La fila de mandos se rompía: el interruptor partía «Modo confianza» en dos líneas. */
.bib-mandos { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bib-mandos .bib-mandos-t, .bib-mandos .muted, .bib-mandos .badge { white-space:nowrap; }
.bib-mandos-t { font-size:12px; font-weight:600; color:var(--txt-dim); }
.bib-mandos .muted { font-size:12px; }

/* El interruptor y su etiqueta van juntos: la fila envuelve, y envolvia justo entre los dos. */
.bib-grupo { display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; }

/* Publicados: el total a la izquierda y el desplegable de estado al lado, en UNA fila.
   Antes eran ocho tarjetas grandes en dos filas para decir, casi siempre, siete ceros. */
.pu-fases { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pu-d-estado .pe-menu { min-width:230px; }
.pu-d-n { margin-left:auto; padding-left:14px; font-style:normal; font-size:12px;
  color:var(--muted); font-variant-numeric:tabular-nums; }

/* Publicados: la barra de dos filas, y las cifras en una linea discreta debajo. */
.pu-barra2 { margin-bottom: 4px; }
.pu-tot { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:10px 2px 14px;
  font-size:12px; color:var(--muted); }
.pu-tot b { color:var(--txt); font-size:13px; }
.pu-act { margin-left:auto; }

/* El recuento de SKU a mano, en una linea discreta bajo la barra. */
.sk-pie { margin:10px 2px 14px; font-size:12px; color:var(--muted); }

/* «164 no respondieron»: en el color de aviso porque cambia como se lee el total. */
.rs-aviso { color: var(--warn); font-weight: 600; }

/* «+2 anuladas» junto al recuento de pedidos de un cliente: no suman a lo gastado. */
.cl-anul { display:block; font-style:normal; font-size:11px; color:var(--muted); white-space:nowrap; }

/* ── La tabla de la biblioteca (formato dotb) ───────────────────────────────────────────── */
.bibt-caja{padding:0;overflow:hidden}
.bibt-scroll{overflow-x:auto;overflow-y:visible;max-width:100%}
.bibt{width:100%;border-collapse:collapse;font-size:13px}
.bibt thead th{position:sticky;top:0;z-index:2;background:var(--bg-2);text-align:left;
  font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;padding:9px 10px;
  border-bottom:1px solid var(--line)}
.bibt tbody td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;
  white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.bibt tbody tr:hover{background:var(--hover)}
.bibt tbody tr:last-child td{border-bottom:0}
.bibt .bibt-chk{width:34px;padding-right:0}
.bibt-img{width:34px;height:44px;object-fit:cover;border-radius:5px;cursor:zoom-in;display:block}
.bibt-img.noimg{background:var(--bg-2);border:1px dashed var(--line-2)}
.bibt-tit{border:0;background:none;padding:0;font:inherit;color:var(--txt);cursor:pointer;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:left}
.bibt-tit:hover{color:var(--accent);text-decoration:underline}
.bibt-est{font-style:normal;font-size:11px;color:var(--muted);opacity:.8}
.bibt-sin{color:var(--muted);opacity:.65;font-style:italic}
.bibt-pie{display:flex;align-items:center;gap:14px;padding:10px 14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted)}
.bibt-pie b{color:var(--txt);font-size:13px}

.can-tab .bib-n{margin-left:5px;font-weight:600;font-size:11px;padding:1px 6px;border-radius:20px;background:var(--bg-2);color:var(--muted)}
.can-tab.on .bib-n{background:var(--sel);color:var(--txt)}

.bibt-stock{width:78px;padding:5px 7px;border-radius:7px;border:1px solid var(--line-2);background:var(--field);color:inherit;font:inherit}
.bibt tbody tr.bibt-pend{background:color-mix(in srgb,var(--warn) 7%,transparent)}

/* Las tarjetas de categoria de Importar modelos: todas del mismo alto pase lo que pase. */
.um-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.um-cat{cursor:pointer;padding:11px 13px;border-radius:10px;border:2px solid var(--line);
  background:var(--surface);height:74px;display:flex;flex-direction:column;justify-content:space-between}
.um-cat.on{border-color:var(--accent);background:var(--accent-dim)}
.um-cat-t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-cat-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.um-cat-mas{border:0;background:none;color:var(--accent);cursor:pointer;font-size:15px;
  line-height:1;padding:0 4px;border-radius:5px}
.um-cat-mas:hover{background:var(--accent-dim)}

/* El menu de «Columnas» esta pegado al borde derecho: si se abre hacia la derecha se sale de la
   pantalla y las palomitas quedan fuera. Se abre hacia la izquierda, como en Pedidos. */
.pe-d.bib-d-cols .pe-menu{left:auto !important;right:0 !important;min-width:240px}

/* ── «Pedidos de contabilidad»: el interruptor de pendientes, al estilo de dotb ──────────── */
.cp-sw-caja{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 11px;
  border:1px dashed var(--line-2);border-radius:8px;font-size:12px;color:var(--muted)}
.cp-sw-caja .co-sw{border:0;padding:0;cursor:pointer;width:34px;height:19px;border-radius:20px;
  background:var(--line-2);position:relative;flex:0 0 auto;transition:background .15s}
.cp-sw-caja .co-sw i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--knob);transition:transform .15s}
.cp-sw-caja .co-sw.on{background:var(--accent)}
.cp-sw-caja .co-sw.on i{transform:translateX(15px)}
.cp-barra2 .sp{flex:1}
.cp-barra2 input[type=date]{height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--field);color:inherit;font:inherit;font-size:12px}

.cp-img{width:46px;padding-right:0}
.cp-img img{width:36px;height:46px;object-fit:cover;border-radius:6px;display:block}
/* La silueta del hueco: centrada y apagada, para que se lea como «esta prenda ya no esta» y no
   como «esto no ha cargado». */
.cp-img-no svg{width:18px;height:18px;opacity:.45}
.cp-img-no{display:flex;align-items:center;justify-content:center;width:36px;height:46px;border-radius:6px;background:var(--bg-2);
  border:1px dashed var(--line-2)}
.cp-menu-f{min-width:210px;padding:10px 12px}
.cp-f-l{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-bottom:9px}
.cp-f-l input{height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--field);color:inherit;font:inherit;font-size:12px}

/* ── El calendario de las pastillas de fecha, al estilo de dotb ──────────────────────────── */
.cp-cal{padding:10px 11px;min-width:236px}
.cp-cal-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;
  font-size:13px;font-weight:600;text-transform:capitalize}
.cp-cal-nav{border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
  width:26px;height:26px;border-radius:7px}
.cp-cal-nav:hover{background:var(--hover);color:var(--txt)}
.cp-cal-sem,.cp-cal-rej{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cp-cal-sem span{text-align:center;font-size:11px;color:var(--muted);padding:3px 0}
.cp-d{border:0;background:none;color:var(--txt);font:inherit;font-size:12px;height:29px;
  border-radius:7px;cursor:pointer;font-variant-numeric:tabular-nums}
.cp-d:hover{background:var(--hover)}
.cp-d.en{background:var(--sel);color:var(--txt)}
.cp-d.punta{background:var(--accent);color:var(--accent-ink);font-weight:600}
.cp-d.hoy:not(.punta){border:1px solid var(--line-2)}
/* Las casillas cuadradas de las cuentas, a la izquierda como en dotb. */
.cp-fila-c{gap:9px}
.pe-fila-m .cp-cbx,.cp-cbx{width:15px;min-width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line-2);flex:0 0 15px !important;
  display:inline-flex;align-items:center;justify-content:center}
.cp-cbx.on{background:var(--accent);border-color:var(--accent)}
.cp-cbx svg{width:11px;height:11px;color:var(--accent-ink)}
.cp-cbx-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pe-d.ga-d-cols .pe-menu{left:auto !important;right:0 !important;min-width:230px}

/* La barra de Gastos, en una sola linea: el buscador acotado y el resto a la derecha. */
#ga-barra .pe-fila{flex-wrap:nowrap}
#ga-barra input[type=search],#ga-barra #ga-q{max-width:230px;flex:0 1 230px}
#ga-barra .btn{white-space:nowrap;flex:0 0 auto}
@media (max-width:820px){ #ga-barra .pe-fila{flex-wrap:wrap} }
.ga-barra-fila{}

.pe-fila-m .cp-cbx-t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pe-d.cp-d-cols .pe-menu{left:auto !important;right:0 !important;min-width:235px}

/* ── Exportar pedidos (dialogo de dotb) ───────────────────────────────────────── */
.cpx{max-width:520px}
.cpx-h{margin:0 0 16px;font-size:17px;font-weight:600}
.cpx-cuerpo{display:flex;flex-direction:column;gap:16px}
.cpx-lab{margin:0 0 7px;font-size:13px;font-weight:600;color:var(--txt)}
.cpx-des{position:relative}
.cpx-des-btn{width:100%;display:flex;align-items:center;gap:8px;height:38px;padding:0 11px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;cursor:pointer;
  color:var(--txt-dim);font-size:13px;text-align:left;transition:background-color .14s,border-color .14s}
.cpx-des-btn:hover{border-color:var(--line-2);background:var(--chip)}
.cpx-des-v{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpx-des-v.on{color:var(--txt);font-weight:600}
.cpx-chev{width:15px;height:15px;flex:0 0 15px;opacity:.6}
.cpx-panel{margin-top:6px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);
  overflow:hidden}
.cpx-panel .pe-lista{max-height:190px}
.cpx-pers{display:flex;flex-direction:column;gap:1px}
.cpx-per{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;background:none;
  border:0;border-radius:8px;cursor:pointer;color:var(--txt);font-size:13px;text-align:left;
  transition:background .12s}
.cpx-per:hover{background:var(--chip)}
.cpx-radio{flex:0 0 15px;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line-2);
  position:relative;transition:border-color .14s}
.cpx-per.on .cpx-radio{border-color:var(--accent)}
.cpx-per.on .cpx-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.cpx-per-t{flex:1 1 auto}
.cpx-per-r{color:var(--txt-dim);font-size:12px;font-variant-numeric:tabular-nums}
.cpx-fechas{display:flex;gap:10px;margin-top:8px;padding-left:24px}
.cpx-fechas label{flex:1 1 0;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--txt-dim)}
.cpx-fechas input{height:34px;padding:0 9px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--field);color:var(--txt);font-size:13px}
.cpx-sw{display:flex;align-items:center;gap:10px}
.cpx-sw-t{flex:1 1 auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt)}
.cpx-i{flex:0 0 14px;width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:11px;font-style:normal;color:var(--txt-dim);cursor:help}
.cpx-sw .co-sw{border:0;padding:0;cursor:pointer;width:34px;height:19px;border-radius:20px;
  background:var(--line-2);position:relative;flex:0 0 34px;transition:background .16s}
.cpx-sw .co-sw i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--knob);transition:transform .16s}
.cpx-sw .co-sw.on{background:var(--accent)}
.cpx-sw .co-sw.on i{transform:translateX(15px)}
.cpx-pie{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:14px;
  border-top:1px solid var(--line)}
.cpx-n{flex:1 1 auto;font-size:12px;color:var(--txt-dim);font-variant-numeric:tabular-nums}

.ca-est{display:inline-block;font-size:12px;color:var(--txt-dim);background:var(--chip);
  border-radius:6px;padding:1px 7px}
.ca-est-sin{color:var(--warn)}

/* Pedidos anulados por Vinted: se ven, pero no parecen dinero. */
.cp-anulada td{opacity:.55}
.cp-anulada s{opacity:.75}
.cp-tag-anul{display:inline-block;margin-left:7px;font-style:normal;font-size:11px;
  color:var(--bad);background:var(--chip);border-radius:5px;padding:1px 6px;vertical-align:middle}
.cp-pie{display:flex;align-items:center;gap:10px;padding:9px 6px 4px;font-size:12px;
  color:var(--txt-dim);border-top:1px solid var(--line);margin-top:2px}
.cp-pie b{color:var(--txt)}
.cp-pie-anul{color:var(--warn)}

/* ── El árbol de cuentas madre ─────────────────────────────────────────────────── */
.cu-plan-k{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.cu-plan-kk{flex:1 1 130px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.cu-plan-kk span{font-size:12px;color:var(--txt-dim)}
.cu-plan-kk b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.cu-plan-hoy{font-size:12px;color:var(--txt-dim);background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;margin-bottom:12px}
.cu-plan-hoy b{color:var(--txt)}
.cu-plan-hoy.mal{border-color:var(--warn)}
.cu-plan{display:flex;flex-direction:column;gap:2px}
.cu-plan-r{border-bottom:1px solid var(--line)}
.cu-plan-t{display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;background:none;
  border:0;cursor:pointer;color:var(--txt);text-align:left;transition:background .12s}
.cu-plan-t:hover{background:var(--hover)}
.cu-plan-ch{width:13px;height:13px;flex:0 0 13px;opacity:.5;transition:transform .16s}
.cu-plan-r.on .cu-plan-ch{transform:rotate(90deg)}
.cu-plan-n{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;text-transform:capitalize}
.cu-plan-n em{font-style:normal;font-weight:400;font-size:12px;color:var(--txt-dim);margin-left:7px;
  text-transform:none}
.cu-plan-b{flex:0 0 90px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.cu-plan-b i{display:block;height:100%;background:var(--accent);border-radius:3px}
.cu-plan-c{flex:0 0 auto;min-width:86px;text-align:right;font-size:12px;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.cu-plan-c.fuerte{color:var(--txt);font-weight:600}
.cu-plan-in{padding:2px 6px 12px 30px;display:flex;flex-direction:column;gap:5px}
.cu-plan-m{display:flex;gap:12px;align-items:center;font-size:12px;padding:5px 9px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px}
.cu-plan-m b{font-weight:600}
.cu-plan-m span{color:var(--txt-dim);font-variant-numeric:tabular-nums}
.cu-plan-vacia,.cu-plan-falta{font-size:12px;color:var(--txt-dim);padding:6px 9px;
  border:1px dashed var(--line-2);border-radius:8px}
.cu-plan-falta{border-color:var(--warn);color:var(--warn)}
.cu-plan-falta b{color:var(--warn)}
.cu-plan-falta em,.cu-plan-vacia em{display:block;font-style:normal;font-size:12px;
  color:var(--txt-dim);margin-top:3px}
.cu-plan-sinmap{margin-top:12px;font-size:12px;color:var(--txt-dim);background:var(--bg-2);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.cu-plan-sinmap b{color:var(--txt)}
.cu-plan-sinmap em{display:block;font-style:normal;font-size:12px;margin-top:4px;opacity:.8}

/* La foto del anuncio lleva a Vinted. El rotulo aparece al pasar por encima. */
.pu-card-ir { display: block; width: 100%; height: 100%; position: relative; }
.pu-card-ir img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-card-lupa { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px;
  font-size: 11px; color: var(--on-photo); background: var(--photo-scrim);
  opacity: 0; transition: opacity .14s; text-align: center; }
.pu-card-ir:hover .pu-card-lupa { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   COMPONENTES DEL PANEL — una sola definición para todo el programa.

   Antes cada vista traía su propio CSS y repetía las mismas declaraciones con otro prefijo:
   la tabla base salía 8 veces, el hover de acento 12. Por eso dos pantallas del mismo
   programa no se parecían. Aquí está el componente `.ui-*` y, en la misma regla, los
   nombres viejos que ya lo usaban: el marcado no ha cambiado, solo hay una definición.

   Una pantalla NUEVA usa el `.ui-*` y no inventa un prefijo suyo.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* La tabla base de todo el panel */
.ui-tabla,
.av-tabla,
.an-t,
.cl-t,
.pg-t,
table.pu,
.sa-tabla {width:100%;border-collapse:collapse;font-size:13px}

/* Una tarjeta de métrica seleccionada */
.ui-kpi.on,
.al-k.on,
.ch-k.on,
.cl-k.on,
.cu-m.on,
.pu-card.on,
.sa-c.on {border-color:var(--accent)}

/* La última fila no lleva raya */
.ui-tabla tr:last-child td,
.al-g:last-child,
.av-tabla tr:last-child td,
.an-t tr:last-child td,
.ch-h:last-child,
.cl-t tr:last-child td,
.co-g:last-child,
.dv-tabla tr:last-child td,
table.fl tr:last-child td,
.pe-tabla tr:last-child td,
.pg-t tr:last-child td,
.sa-tabla tr:last-child td {border-bottom:none}

/* Texto de apoyo, el que no se lee primero */
.ui-dim,
.al-k b.z,
.av-cabeza b.z,
.av-c > b.z,
.av-m span,
.an-t .nd,
.cx-tarea b.z,
.cx-tabla td.m,
.ch-k b.z,
.cl-k b.z,
.co-tabla .z,
.co-t2 .z,
.dv-nada,
.pe-nada,
.pg-cifras div b.z,
.pu-d-dato span,
.sa-cabeza b.z,
.sa-c b.z,
.sa-m span {color:var(--muted)}

/* Un número que va mal */
.ui-mal,
.al-k b.critica,
.av-c > b.bad,
.cx-kv b.mal,
.dz-n.mal,
.dz-d.dn,
.cl-k b.mal,
.co-k b.mal,
.sa-c b.bad {color:var(--bad)}

/* Un número que hay que mirar */
.ui-aviso,
.al-k b.alta,
.av-fresco.viejo,
.av-c > b.warn,
.cx-k.warn strong,
.dz-n.av,
.ch-m.of b,
.sa-fresco.viejo,
.sa-c b.warn {color:var(--warn)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EL VOCABULARIO — los componentes con los que se monta una pantalla.

   Salieron del rediseño del Smart Agent contra la referencia y valen para todo el panel. Una
   pantalla nueva usa estos y NO se inventa un prefijo propio; si necesita algo que no está aquí,
   se añade aquí, no dentro de su .js.

   Los `.sm-*` son el mismo componente con el nombre que tenía el Smart Agent: alias, no copia.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Cabecera de pantalla o de apartado: qué es esto y para qué sirve. */
.ui-cab, .sm-cab { margin: 0 0 16px }
.ui-cab h2, .sm-cab h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px }
.ui-cab p, .sm-cab p { margin: 0; font-size: 13px; color: var(--txt-dim); line-height: 1.55 }

/* Rótulo + explicación a la izquierda, el mando a la derecha. El patrón de todo interruptor. */
.ui-fila, .sm-fila { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding: 2px 0 4px }
.ui-fila > div:first-child, .sm-fila > div:first-child { flex: 1; min-width: 0 }
/* Variante con raya arriba, para cuando varias filas se apilan. */
.ui-fila.sep { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px }
.ui-fila.sep:first-of-type { border-top: 0; padding-top: 0; margin-top: 0 }

/* El texto de apoyo. Nunca es lo primero que se lee, y por eso va en gris y pequeño. */
.ui-ayuda, .sm-ayuda { font-size: 12px; color: var(--txt-dim); margin-top: 3px; line-height: 1.55 }

/* Campo etiquetado, a ancho completo: el rótulo encima y el control debajo. */
.ui-campo, .sm-campo { margin-top: 18px }
.ui-campo > label, .sm-campo > label { display: block; font-weight: 600; font-size: 13px;
  margin-bottom: 6px }
.ui-campo > input, .ui-campo > select, .sm-campo > input, .sm-campo > select {
  width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--field); color: inherit; font: inherit; font-size: 13px }
.ui-campo > textarea, .sm-campo > textarea { width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--field); color: inherit; font: inherit;
  font-size: 13px; resize: vertical }
.ui-campo > input:focus, .ui-campo > select:focus, .ui-campo > textarea:focus,
.sm-campo > input:focus, .sm-campo > select:focus, .sm-campo > textarea:focus {
  border-color: var(--accent) }
.ui-campo code, .sm-campo code { font-size: 12px; background: var(--bg); padding: 1px 5px;
  border-radius: 5px }

/* Varios mandos pequeños en línea: «entre X y Y segundos». */
.ui-linea, .sm-linea { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--txt-dim); flex-wrap: wrap }
.ui-linea input, .sm-linea input { width: 86px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--field); color: inherit; font: inherit;
  font-size: 13px; text-align: center }

/* Las acciones van abajo a la derecha, siempre en el mismo sitio. */
.ui-pie, .sm-pie { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px }

/* Un porcentaje con barra y número: los dos mandan sobre el mismo valor. */
.ui-tope, .sm-tope { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px }
.ui-tope > label, .sm-tope > label { margin-bottom: 9px }
.ui-slider, .sm-slider { display: flex; align-items: center; gap: 12px }
.ui-slider input[type=range], .sm-slider input[type=range] { flex: 1; min-width: 0;
  accent-color: var(--accent); height: 4px }
.ui-slider input[type=number], .sm-slider input[type=number] {
  width: 74px !important; min-width: 74px !important; max-width: 74px !important;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field);
  color: inherit; font: inherit; font-size: 13px; text-align: center }
.ui-pct, .sm-pct { font-size: 13px; color: var(--txt-dim) }

/* Recuadro dentro de una tarjeta, para un bloque que depende del de arriba. */
.ui-sub, .sm-sub { margin-top: 20px; padding: 14px 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 10px }
.ui-sub .ui-campo:first-of-type, .sm-sub .sm-campo:first-of-type { margin-top: 14px }

/* Tarjeta de métrica. `.on` (arriba, en los componentes) la marca como elegida. */
.ui-kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px }
.ui-kpi span { display: block; font-size: 12px; color: var(--txt-dim); margin-bottom: 3px }
.ui-kpi b { font-size: 22px; font-weight: 600 }

/* Un pendiente deducido de nuestro libro, no leido de Vinted. Se marca para no confundirlos. */
.ca-libro { display:block; font-style:normal; font-size:11px; color:var(--txt-dim);
  font-weight:600 }

/* La etiqueta de estado no parte en dos lineas: pisaba el nombre de la cuenta. */
.ca-est { white-space: nowrap }
.ca-est-sin { white-space: nowrap; font-size: 11px }

/* Flota · columna «Listo»: teléfono, set-up y tarjeta. Lo que falta se ve hueco, no ausente:
   una casilla vacía se lee mal, un hueco marcado se lee como «esto falta». */
.fl-listo{display:inline-flex;gap:3px}
.fl-listo i{font-style:normal;font-size:11px;font-weight:600;line-height:1;
  width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;border:1px solid transparent;cursor:default}
.fl-listo i.si{color:var(--good);border-color:var(--good)}
.fl-listo i.no{color:var(--muted);border-color:var(--line-2)}

/* Tablero · fila que lleva a su pantalla. El chevrón solo aparece al pasar por encima: si
   estuviera siempre, cuatro seguidos compiten con los números, que es lo que se viene a leer. */
.tb-fila-ir{text-decoration:none;color:inherit;cursor:pointer;border-radius:10px;
  padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px;
  transition:background-color .13s ease}
.tb-fila-ir:hover{background:var(--hover)}
.tb-fila-ir .tb-lbl::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);
  opacity:0;transition:opacity .13s ease}
.tb-fila-ir:hover .tb-lbl::after,
.tb-fila-ir:focus-visible .tb-lbl::after{opacity:.6}
.tb-fila-ir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Publicados · SKU. Monoespaciada porque es un código y se compara de un vistazo con el almacén;
   el guion va apagado para que un hueco no compita con los que sí tienen. */
.pu-sku{font-family:var(--mono);font-size:12px}
.pu-sku.n0{color:var(--muted);font-family:inherit;cursor:help}

/* Mensajes · subpestañas dentro de una pestaña (Envío y Prompt viven dentro del agente).
   Segmentado sobre una pista, no subrayado: el subrayado ya lo usa la barra de arriba y
   repetirlo haría creer que son del mismo nivel. */
.msj-subtabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 18px;padding:3px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;width:fit-content;max-width:100%}
.msj-subtab{background:transparent;border:0;border-radius:6px;cursor:pointer;
  padding:5px 14px;font-size:13px;font-weight:500;color:var(--txt-dim);
  white-space:nowrap;transition:background-color .13s,color .13s}
.msj-subtab:hover{color:var(--txt)}
.msj-subtab.on{background:var(--surface);color:var(--txt)}
.msj-subpanel > .card:first-child{margin-top:0}

/* Smart Agent · tarjetas plegables. Se oculta todo menos el título, sin envolver el contenido en
   ningún div: envolverlo obligaría a tocar el HTML de cada tarjeta, y ahí es donde se rompen los
   campos (se buscan por id) y el reparto por pestañas (casa por el <h3>). */
#msj .card > h3[data-plegable]{cursor:pointer;display:flex;align-items:center;gap:9px;
  user-select:none;margin-bottom:0;padding-bottom:2px}
#msj .card > h3[data-plegable]:hover{color:var(--accent-2)}
#msj .card > h3[data-plegable]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
#msj .sm-chev{margin-left:auto;display:grid;place-items:center;color:var(--muted);
  transition:transform .17s ease}
#msj .sm-chev svg{width:15px;height:15px}
#msj .card.plegada > *:not(h3){display:none}
#msj .card.plegada > h3 .sm-chev{transform:rotate(-90deg)}
#msj .card.plegada{padding-bottom:14px}

/* Playground - por que la lista es corta. Va bajo el buscador porque es donde se mira al no
   encontrar lo que se esperaba. */
.pl-nota{font-size:12px;line-height:1.55;color:var(--txt-dim);padding:8px 11px;
  margin:6px 0 2px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px}
.pl-nota b{color:var(--txt)}
/* Sobre cuántas cuentas se ha podido leer el saldo. Sin esto, un «0,00 €» parece que no hay
   dinero cuando lo que pasa es que del resto no se sabe. */
.rs-cart-pie { margin: 6px 0 0; font-size: 11px; color: var(--muted); }

/* El pie de una tarjeta: el porque de un numero que por si solo no se entiende. */
.rs-k-pie { margin-top: 5px; font-size: 11px; color: var(--muted); line-height: 1.4; }
/* «N de cuentas retiradas»: se dice y se puede mirar. Sin esto, la pantalla enseñaba «0 activos»
   con decenas de anuncios vivos en Vinted, escondidos y sin avisar. */
.pu-retirados { border: 0; background: none; padding: 0; font: inherit; font-size: inherit;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* «N cuentas sin poder leer»: por que salen tan pocos publicados. El registro lo llena el motor
   cuenta por cuenta, y cuando Vinted le corta por exceso de peticiones (429) o la sesion esta
   caida, esos anuncios no llegan aqui. Sin decirlo, «5 publicados» con mil cuentas vivas parece
   que la pantalla se lo inventa. En ambar: no es un error de la pantalla, es una cobertura
   incompleta — y el titulo lo explica entero. */
.pu-sinleer { color: var(--warn); cursor: help; border-bottom: 1px dotted currentColor; }

/* Contabilidad · las tarjetas que llevan a Pedidos (antes, un <style> dentro de index.html).
   El botón no parece un botón: la tarjeta ya es el objeto, lo único que cambia es que se
   puede pulsar. */
.co-t-clic { cursor: pointer; }
.co-t-clic:hover { border-color: var(--line-2); }
.co-t-ir { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.co-t-ir:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* «Saltar al contenido»: el primer Tab lo enseña arriba a la izquierda; el menú lateral no hay que recorrerlo entero */
.saltar{position:fixed;top:8px;left:8px;z-index:2000;padding:8px 12px;border-radius:8px;background:#0e6b72;color:#fff;font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .15s ease-out}
.saltar:focus-visible,.saltar:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
main.content:focus{outline:none}
@media (prefers-reduced-motion:reduce){.saltar{transition:none}}