/* Granero — sistema de diseño «Saco y cal» (SPEC §5).
   Claro «Cal» (paredes encaladas, papel de saco, tinta verde-negra) y oscuro «Nave» (de noche, grises cálidos sin azul).
   Un acento de campo (verde alfalfa) y un segundo, terracota, para atención. Los kilos y los euros mandan:
   IBM Plex Mono tabular. Títulos de sección y estados en versalitas con tracking, como el texto estampado en un saco.
   Densidad por aparato: <html data-densidad="nave|mostrador|oficina"> cambia --toque y la letra. */

@font-face { font-family: "IBM Plex Sans"; src: url(fuentes/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fuentes/plex-sans-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fuentes/plex-sans-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fuentes/plex-sans-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fuentes/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fuentes/plex-mono-600.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  /* ----- paleta «Cal» ----- */
  --acento: oklch(0.52 0.13 145);              /* verde alfalfa: acción principal y foco */
  --acento-fuerte: oklch(0.44 0.13 145);
  --acento-suave: color-mix(in oklab, var(--acento) 14%, var(--fondo));
  --sobre-acento: oklch(0.99 0.01 90);
  --atencion: oklch(0.62 0.15 45);             /* terracota: pendiente, atención, mascotas */
  --atencion-suave: color-mix(in oklab, var(--atencion) 14%, var(--fondo));

  --fondo: oklch(0.985 0.006 85);              /* cal */
  --fondo-2: oklch(0.955 0.012 85);
  --superficie: oklch(0.995 0.004 90);
  --superficie-2: oklch(0.945 0.018 85);       /* kraft */
  --linea: oklch(0.89 0.015 85);
  --linea-fuerte: oklch(0.80 0.02 85);
  --tinta: oklch(0.22 0.02 150);               /* tinta de estampación */
  --tinta-2: oklch(0.45 0.02 150);
  --tinta-3: oklch(0.55 0.015 150);

  --ok: oklch(0.50 0.12 150);       --ok-suave: color-mix(in oklab, var(--ok) 14%, var(--fondo));
  --aviso: oklch(0.70 0.15 80);     --aviso-suave: color-mix(in oklab, var(--aviso) 18%, var(--fondo));
  --peligro: oklch(0.52 0.19 28);   --peligro-suave: color-mix(in oklab, var(--peligro) 13%, var(--fondo));
  --info: oklch(0.55 0.11 240);     --info-suave: color-mix(in oklab, var(--info) 13%, var(--fondo));
  --mezcla-texto: 62%;              /* cuánto del color de estado entra en el texto de un chip (el resto es tinta) */

  /* ----- familias de artículo (colores desaturados fijos) ----- */
  --fam-ganaderia: oklch(0.52 0.09 145);
  --fam-mascotas: oklch(0.60 0.11 45);
  --fam-accesorios: oklch(0.58 0.025 75);
  --fam-sanidad: oklch(0.54 0.08 240);
  --fam-material_ganadero: oklch(0.64 0.11 80);
  --fam-semillas_abonos: oklch(0.66 0.10 130);
  --fam-servicios: oklch(0.56 0.01 90);

  --sombra-1: 0 1px 0 rgb(70 55 20 / .04);
  --sombra-2: 0 10px 28px -12px rgb(60 45 10 / .24);
  --sombra-3: 0 30px 70px -20px rgb(40 30 5 / .38);

  /* radios 6 chips · 10 botones, tarjetas, entradas · 16 hojas y diálogos */
  --r-1: 6px; --r-2: 10px; --r-3: 10px; --r-4: 16px;
  /* escala de 4 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;

  /* densidad por defecto: oficina */
  --toque: 40px;
  --letra: 15px;
  --t-meta: 12px;       /* meta y etiquetas */
  --t-sec: 14px;        /* texto secundario */
  --raíl: 232px;
  --f-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-rapida: 140ms cubic-bezier(.2,.7,.2,1);
  --t-media: 220ms cubic-bezier(.2,.7,.2,1);
  --papel-trama:
    repeating-linear-gradient(0deg, rgb(110 85 40 / .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(110 85 40 / .028) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 20% 15%, rgb(255 255 255 / .35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgb(120 90 40 / .06), transparent 50%);
  color-scheme: light;
}

/* ----- «Nave» de noche ----- */
[data-tema="oscuro"] {
  --acento: oklch(0.78 0.14 145);
  --acento-fuerte: oklch(0.84 0.13 145);
  --sobre-acento: oklch(0.18 0.03 145);
  --atencion: oklch(0.78 0.14 50);

  --fondo: oklch(0.17 0.008 70);
  --fondo-2: oklch(0.20 0.009 70);
  --superficie: oklch(0.225 0.010 70);
  --superficie-2: oklch(0.265 0.012 70);
  --linea: oklch(0.30 0.012 70);
  --linea-fuerte: oklch(0.38 0.014 70);
  --tinta: oklch(0.96 0.008 90);
  --tinta-2: oklch(0.76 0.012 90);
  --tinta-3: oklch(0.66 0.012 90);

  --ok: oklch(0.76 0.13 150);
  --aviso: oklch(0.82 0.14 85);
  --peligro: oklch(0.70 0.18 28);
  --info: oklch(0.76 0.10 240);
  --ok-suave: color-mix(in oklab, var(--ok) 16%, var(--fondo));
  --aviso-suave: color-mix(in oklab, var(--aviso) 16%, var(--fondo));
  --peligro-suave: color-mix(in oklab, var(--peligro) 18%, var(--fondo));
  --info-suave: color-mix(in oklab, var(--info) 16%, var(--fondo));
  --acento-suave: color-mix(in oklab, var(--acento) 16%, var(--fondo));
  --atencion-suave: color-mix(in oklab, var(--atencion) 16%, var(--fondo));

  --fam-ganaderia: oklch(0.74 0.10 145);
  --fam-mascotas: oklch(0.76 0.11 50);
  --fam-accesorios: oklch(0.72 0.02 80);
  --fam-sanidad: oklch(0.74 0.09 240);
  --fam-material_ganadero: oklch(0.80 0.11 85);
  --fam-semillas_abonos: oklch(0.80 0.10 130);
  --fam-servicios: oklch(0.70 0.01 90);

  --sombra-1: none;
  --sombra-2: 0 10px 30px -10px rgb(0 0 0 / .6);
  --sombra-3: 0 30px 80px -10px rgb(0 0 0 / .7);
  --papel-trama:
    repeating-linear-gradient(0deg, rgb(255 235 200 / .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 235 200 / .018) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 20% 15%, rgb(255 240 210 / .05), transparent 45%);
  color-scheme: dark;
}

/* ----- densidades ----- */
[data-densidad="mostrador"] { --toque: 56px; --letra: 16px; --t-meta: 13px; }
[data-densidad="nave"] {
  --toque: 64px; --letra: 18px; --t-meta: 16px; --t-sec: 16px;
  --mezcla-texto: 40%;                         /* contraste 7:1: el texto de estado casi es tinta */
  --tinta-2: oklch(0.38 0.02 150);
  --tinta-3: oklch(0.44 0.02 150);
  --acento: oklch(0.44 0.13 145);
  --acento-fuerte: oklch(0.38 0.13 145);
  --linea-fuerte: oklch(0.68 0.025 85);
}
[data-densidad="nave"][data-tema="oscuro"] {
  --tinta-2: oklch(0.86 0.01 90);
  --tinta-3: oklch(0.78 0.01 90);
  --acento: oklch(0.80 0.14 145);
  --acento-fuerte: oklch(0.86 0.13 145);
  --linea-fuerte: oklch(0.50 0.014 70);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 var(--letra)/1.4 var(--f-ui); color: var(--tinta); background: var(--fondo);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--acento-suave); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.num, .precio, td.num, .mono { font-family: var(--f-num); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.15; }
.display { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font: 700 28px/1.15 var(--f-display); letter-spacing: -.02em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
a { color: var(--acento-fuerte); }
.tenue { color: var(--tinta-2); } .muy-tenue { color: var(--tinta-3); }
.pequeno { font-size: var(--t-sec); } .mini { font-size: var(--t-meta); }
.oculto { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.g { width: 24px; height: 24px; } svg.ic.p { width: 16px; height: 16px; }
[data-densidad="nave"] svg.ic { width: 24px; height: 24px; stroke-width: 2; }
[data-densidad="nave"] svg.ic.g { width: 28px; height: 28px; }

/* versalitas con tracking: lo estampado en el saco */
.etiqueta-seccion, .etq { font-size: var(--t-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3); }
.etiqueta-seccion { margin: var(--e-5) 0 var(--e-3); }

/* ---------- estructura: raíl + barra + contenido ---------- */
.shell { display: grid; grid-template-columns: var(--raíl) 1fr; height: 100dvh; }
.rail {
  background: var(--superficie); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; align-items: stretch; padding: var(--e-3) var(--e-3) var(--e-4); gap: 2px; overflow-y: auto;
  scrollbar-width: none;
}
.rail .marca { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 var(--e-2); margin-bottom: var(--e-2); color: var(--tinta); }
.rail .marca img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.rail .marca span { font: 700 15px var(--f-ui); text-transform: uppercase; letter-spacing: .16em; color: var(--acento-fuerte); }
.rail .grupo { display: flex; flex-direction: column; gap: 2px; margin-top: var(--e-3); }
.rail .cab-grupo { padding: 0 var(--e-3) var(--e-1); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-3); }
[data-densidad="nave"] .rail .cab-grupo { font-size: 14px; }
.rail a {
  display: flex; align-items: center; gap: var(--e-3); min-height: max(40px, var(--toque)); padding: 0 var(--e-3); border-radius: var(--r-2);
  color: var(--tinta-2); text-decoration: none; font-size: 14.5px; font-weight: 500; line-height: 1.15;
  transition: background var(--t-rapida), color var(--t-rapida);
}
[data-densidad="nave"] .rail a { font-size: 17px; }
.rail a:hover { background: var(--superficie-2); color: var(--tinta); }
.rail a[aria-current="page"] { background: var(--acento-suave); color: var(--acento-fuerte); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
.rail a .contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--atencion); color: var(--fondo); font: 600 12px/20px var(--f-num); text-align: center; }
.rail .abajo { margin-top: auto; }
.principal { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }
.barra {
  display: flex; align-items: center; gap: var(--e-3); height: 60px; padding: 0 var(--e-5);
  border-bottom: 1px solid var(--linea); background: color-mix(in oklab, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px); position: relative; z-index: 5;
}
.barra .titulo { font: 600 18px var(--f-display); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .hueco { flex: 1; }
.contenido { overflow: auto; min-height: 0; position: relative; }
.pagina { padding: var(--e-5); max-width: 1400px; margin: 0 auto; }
.pagina.ancha { max-width: none; }
.pagina.llena { padding: 0; max-width: none; height: 100%; }

/* tablet: raíl solo con iconos */
@media (max-width: 1099px) {
  :root { --raíl: 76px; }
  .rail { padding: var(--e-3) var(--e-2); }
  .rail .marca { justify-content: center; padding: 0; }
  .rail .marca span, .rail .cab-grupo { display: none; }
  .rail .grupo { margin-top: 0; padding-top: var(--e-2); margin-top: var(--e-2); border-top: 1px solid var(--linea); }
  .rail .marca + .grupo { border-top: 0; margin-top: 0; }
  .rail a { justify-content: center; padding: 0; min-height: max(48px, var(--toque)); }
  .rail a > span:not(.contador) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail a .contador { position: absolute; margin: -22px -26px 0 0; }
  .rail a { position: relative; }
  .rail a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--acento); }
}
/* móvil: barra inferior */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rail { grid-row: 2; flex-direction: row; gap: 2px; border-right: 0; border-top: 1px solid var(--linea); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); overflow-x: auto; }
  .rail .marca { display: none; }
  .rail .grupo { display: contents; }
  .rail .grupo, .rail .marca + .grupo { border-top: 0; margin: 0; padding: 0; }
  .rail a { flex-direction: column; justify-content: center; gap: 3px; min-width: 68px; min-height: max(56px, var(--toque)); padding: 6px 4px; font-size: 11px; text-align: center; box-shadow: none !important; }
  [data-densidad="nave"] .rail a { font-size: 16px; min-width: 96px; }
  .rail a > span:not(.contador) { position: static; width: auto; height: auto; clip-path: none; overflow: visible; white-space: normal; }
  .rail a[aria-current="page"] { background: var(--acento-suave); }
  .rail a .contador { position: absolute; margin: -30px -30px 0 0; }
  .principal { grid-row: 1; }
  .barra { padding: 0 var(--e-4); height: 54px; }
  .barra .reloj { display: none; }
  .pagina { padding: var(--e-4); }
}

/* ---------- chip de usuario y estado de conexión ---------- */
.yo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 99px; border: 1px solid var(--linea); background: var(--superficie); cursor: pointer; min-height: 40px; }
.yo:hover { border-color: var(--linea-fuerte); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; flex: none; }
.conexion { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }
.conexion.caida { background: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-suave); }
.reloj { font-family: var(--f-num); font-variant-numeric: tabular-nums; color: var(--tinta-2); font-weight: 500; font-size: 14px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--toque); padding: 0 16px; border-radius: var(--r-2); border: 1px solid var(--linea-fuerte);
  background: var(--superficie); color: var(--tinta); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida);
  user-select: none; text-decoration: none;
}
.btn:hover { background: var(--superficie-2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; box-shadow: var(--sombra-1); }
.btn.primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.btn.atencion { background: var(--atencion); border-color: var(--atencion); color: var(--sobre-acento); font-weight: 600; }
[data-tema="oscuro"] .btn.atencion { color: oklch(0.2 0.03 50); }
.btn.oscuro { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.btn.peligro { color: color-mix(in oklab, var(--peligro) 75%, var(--tinta)); border-color: color-mix(in oklab, var(--peligro) 40%, var(--linea)); }
.btn.peligro.lleno { background: var(--peligro); color: #fff; border-color: var(--peligro); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
[data-tema="oscuro"] .btn.ok, [data-tema="oscuro"] .btn.peligro.lleno { color: oklch(0.18 0.02 150); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.fantasma:hover { background: var(--fondo-2); }
.btn.grande { min-height: max(var(--toque), 56px); padding: 0 24px; font-size: 17px; }
.btn.enorme { min-height: max(68px, calc(var(--toque) + 8px)); font-size: 19px; border-radius: var(--r-4); }
.btn.icono { width: var(--toque); padding: 0; }
.btn.bloque { width: 100%; }
.btn.chico { min-height: max(32px, calc(var(--toque) - 8px)); padding: 0 10px; font-size: var(--t-sec); border-radius: var(--r-1); }
.grupo-btn { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* ---------- formularios ---------- */
.campo { display: grid; gap: 6px; }
.campo > span { font-size: var(--t-sec); font-weight: 500; color: var(--tinta-2); }
.campo .ayuda { font-size: var(--t-meta); color: var(--tinta-3); }
.entrada, input.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: var(--toque); padding: 8px 12px; border-radius: var(--r-2); border: 1px solid var(--linea-fuerte);
  background: var(--superficie); outline: none; transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
textarea.entrada { min-height: 80px; resize: vertical; }
.entrada:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 24%, transparent); }
.entrada.num { text-align: right; }
.form { display: grid; gap: var(--e-4); }
.form.dos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--tinta-3); }
.buscador .entrada { padding-left: 38px; }

.interruptor { --ih: 28px; --iw: 46px; position: relative; width: var(--iw); height: var(--ih); flex: none; }
[data-densidad="mostrador"] .interruptor { --ih: 32px; --iw: 54px; }
[data-densidad="nave"] .interruptor { --ih: 40px; --iw: 68px; }
.interruptor input { opacity: 0; position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
.interruptor i { position: absolute; inset: 0; border-radius: 99px; background: var(--linea-fuerte); transition: background var(--t-rapida); }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(var(--ih) - 6px); height: calc(var(--ih) - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--t-media); }
.interruptor input:checked + i { background: var(--ok); }
.interruptor input:checked + i::after { transform: translateX(calc(var(--iw) - var(--ih))); }
.interruptor input:focus-visible + i { outline: 2px solid var(--acento); outline-offset: 2px; }
.interruptor input:disabled + i { opacity: .5; }

.segmentos { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-2); background: var(--fondo-2); border: 1px solid var(--linea); max-width: 100%; flex-wrap: wrap; }
.segmentos button { border: 0; background: transparent; min-height: max(36px, calc(var(--toque) - 6px)); padding: 0 14px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--tinta-2); }
.segmentos button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); font-weight: 600; box-shadow: 0 0 0 1px var(--linea-fuerte), var(--sombra-1); }

/* ---------- tarjetas, listas, tablas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-3); padding: var(--e-5); box-shadow: var(--sombra-1); }
.tarjeta.kraft { background: var(--superficie-2); }
.tarjeta.compacta { padding: var(--e-4); }
.tarjeta > header { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.tarjeta > header h2, .tarjeta > header h3 { flex: 1; }
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(var(--min, 260px), 1fr)); }
.fila { display: flex; align-items: center; gap: var(--e-3); }
.fila.entre { justify-content: space-between; }
.fila.envolver { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--e-3); }
.hueco { flex: 1; }
.cabecera-pagina { display: flex; align-items: flex-end; gap: var(--e-4); margin-bottom: var(--e-5); flex-wrap: wrap; }
.cabecera-pagina > div:first-child { flex: 1; min-width: 200px; }
.cabecera-pagina p { margin: 4px 0 0; color: var(--tinta-2); }

.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sec); }
.tabla th { text-align: left; font-size: var(--t-meta); font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px; border-bottom: 1px solid var(--linea-fuerte); position: sticky; top: 0; background: var(--superficie); }
.tabla td.num { font-size: var(--t-sec); }
.tabla td { padding: 8px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
[data-densidad="mostrador"] .tabla td { padding: 12px; }
[data-densidad="nave"] .tabla td { padding: 16px 12px; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--t-rapida); }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover { background: var(--superficie-2); }
.tabla .num, .tabla th.num { text-align: right; }
.envoltura-tabla { overflow: auto; border: 1px solid var(--linea); border-radius: var(--r-3); background: var(--superficie); }

.lista { display: flex; flex-direction: column; }
.lista > * { display: flex; align-items: center; gap: var(--e-3); padding: 12px 4px; border-bottom: 1px solid var(--linea); }
.lista > *:last-child { border-bottom: 0; }

/* chips y estados: versalitas con tracking */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-1); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap; }
[data-densidad="nave"] .chip, [data-densidad="nave"] .chip.num { height: 36px; font-size: 16px; padding: 0 12px; }
.chip svg.ic { width: 14px; height: 14px; stroke-width: 2; }
[data-densidad="nave"] .chip svg.ic { width: 18px; height: 18px; }
.chip.ok { background: var(--ok-suave); color: color-mix(in oklab, var(--ok) var(--mezcla-texto), var(--tinta)); }
.chip.aviso { background: var(--aviso-suave); color: color-mix(in oklab, var(--aviso) var(--mezcla-texto), var(--tinta)); }
.chip.peligro { background: var(--peligro-suave); color: color-mix(in oklab, var(--peligro) var(--mezcla-texto), var(--tinta)); }
.chip.info { background: var(--info-suave); color: color-mix(in oklab, var(--info) var(--mezcla-texto), var(--tinta)); }
.chip.acento { background: var(--acento-suave); color: color-mix(in oklab, var(--acento) var(--mezcla-texto), var(--tinta)); }
.chip.atencion { background: var(--atencion-suave); color: color-mix(in oklab, var(--atencion) var(--mezcla-texto), var(--tinta)); }
.chip.num { text-transform: none; letter-spacing: 0; font-size: 13px; }
.chip.familia { background: color-mix(in oklab, var(--c) 15%, var(--superficie)); color: color-mix(in oklab, var(--c) var(--mezcla-texto), var(--tinta)); }
.chip.familia.f-ganaderia { --c: var(--fam-ganaderia); }
.chip.familia.f-mascotas { --c: var(--fam-mascotas); }
.chip.familia.f-accesorios { --c: var(--fam-accesorios); }
.chip.familia.f-sanidad { --c: var(--fam-sanidad); }
.chip.familia.f-material_ganadero { --c: var(--fam-material_ganadero); }
.chip.familia.f-semillas_abonos { --c: var(--fam-semillas_abonos); }
.chip.familia.f-servicios { --c: var(--fam-servicios); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: var(--e-5); overflow-x: auto; scrollbar-width: none; }
.pestanas button { border: 0; background: none; min-height: var(--toque); padding: 0 14px; font-weight: 500; color: var(--tinta-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas button[aria-selected="true"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento); }

/* ---------- cifras ---------- */
.kpis { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-3); padding: var(--e-4) var(--e-5); }
.kpi .etq { display: block; }
.kpi .valor { font: 600 28px/1.1 var(--f-num); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .delta { font-size: var(--t-sec); margin-top: 4px; color: var(--tinta-2); }
.total-grande { font: 600 44px/1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cifra-parada { font: 600 64px/1 var(--f-num); font-variant-numeric: tabular-nums; }

/* ---------- vacío y carga ---------- */
.vacio { display: grid; place-items: center; text-align: center; gap: 10px; padding: 56px 20px; color: var(--tinta-2); }
.vacio svg.ic { width: 40px; height: 40px; stroke-width: 1.4; color: var(--tinta-3); }
.vacio h3 { color: var(--tinta); font: 600 20px var(--f-display); }
.cargando { display: grid; place-items: center; padding: 60px; }
.cargando::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--linea-fuerte); border-top-color: var(--acento); animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* movimiento mínimo: una parada entregada se tacha y baja (180 ms); un aviso nuevo late una vez */
.tachada { text-decoration: line-through; opacity: .55; transition: opacity 180ms ease, transform 180ms ease; }
.baja { transform: translateY(8px); opacity: .0; transition: opacity 180ms ease, transform 180ms ease; }
.late { animation: late 600ms ease-out 1; }
@keyframes late { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--atencion) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* ---------- capas: diálogo, hoja lateral, avisos ---------- */
.velo { position: fixed; inset: 0; background: rgb(30 22 8 / .42); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; padding: var(--e-4); animation: aparece var(--t-media); }
.dialogo { background: var(--superficie); border-radius: var(--r-4); box-shadow: var(--sombra-3); width: min(var(--ancho, 520px), 100%); max-height: min(88dvh, 900px); display: flex; flex-direction: column; animation: sube var(--t-media); border: 1px solid var(--linea); }
.dialogo > header { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-5) var(--e-5) var(--e-3); }
.dialogo > header h2 { flex: 1; font: 600 22px var(--f-display); }
.dialogo > .cuerpo { padding: var(--e-2) var(--e-5) var(--e-5); overflow: auto; }
.dialogo > footer { display: flex; gap: var(--e-2); justify-content: flex-end; padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linea); flex-wrap: wrap; }
.velo.lateral { place-items: stretch end; padding: 0; }
.velo.lateral .dialogo { height: 100dvh; max-height: none; border-radius: var(--r-4) 0 0 var(--r-4); width: min(var(--ancho, 480px), 100%); animation: entra-dcha var(--t-media); }
@keyframes aparece { from { opacity: 0; } }
@keyframes sube { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes entra-dcha { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 760px) {
  .velo { place-items: end stretch; padding: 0; }
  .dialogo { border-radius: var(--r-4) var(--r-4) 0 0; width: 100%; max-height: 92dvh; }
}

.avisos { position: fixed; bottom: 20px; left: 50%; translate: -50% 0; display: grid; gap: 8px; z-index: 80; pointer-events: none; }
.avisos .aviso { background: var(--tinta); color: var(--fondo); padding: 12px 18px; border-radius: var(--r-2); box-shadow: var(--sombra-3); display: flex; gap: 10px; align-items: center; font-weight: 500; animation: sube var(--t-media); pointer-events: auto; max-width: 92vw; }
.avisos .aviso.error { background: var(--peligro); color: #fff; }
[data-tema="oscuro"] .avisos .aviso.error { color: oklch(0.18 0.02 28); }
.avisos .aviso.ok svg { color: color-mix(in oklab, var(--ok) 55%, var(--fondo)); }
.avisos .aviso button { margin-left: 8px; background: none; border: 1px solid color-mix(in oklab, currentColor 35%, transparent); color: inherit; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-weight: 600; }

/* banda de aviso en línea (riesgo, sobrecarga, sin conexión): <div class="banda peligro">icono + texto</div> */
.banda { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--superficie-2); border: 1px solid var(--linea); font-weight: 500; }
.banda.ok { background: var(--ok-suave); border-color: color-mix(in oklab, var(--ok) 30%, var(--linea)); }
.banda.aviso { background: var(--aviso-suave); border-color: color-mix(in oklab, var(--aviso) 40%, var(--linea)); }
.banda.peligro { background: var(--peligro-suave); border-color: color-mix(in oklab, var(--peligro) 35%, var(--linea)); }
.banda.info { background: var(--info-suave); border-color: color-mix(in oklab, var(--info) 30%, var(--linea)); }
.banda.atencion { background: var(--atencion-suave); border-color: color-mix(in oklab, var(--atencion) 35%, var(--linea)); }

/* ---------- teclado numérico (peso y similares) ---------- */
.teclado-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); width: 100%; }
.teclado-num button { min-height: max(64px, var(--toque)); border-radius: var(--r-2); border: 1px solid var(--linea-fuerte); background: var(--superficie); font: 500 28px var(--f-num); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t-rapida), transform var(--t-rapida); display: grid; place-items: center; }
.teclado-num button:hover { background: var(--superficie-2); }
.teclado-num button:active { transform: scale(.95); background: var(--fondo-2); }
.teclado-num button.suave { background: transparent; color: var(--tinta-2); }
.visor-peso { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; padding: var(--e-4) var(--e-5); margin-bottom: var(--e-3); border-radius: var(--r-2); background: var(--superficie-2); border: 1px solid var(--linea); }
.visor-peso .num { font: 600 44px/1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.visor-peso .unidad { font: 500 24px var(--f-ui); color: var(--tinta-2); }
.visor-peso.vacio-aun .num { color: var(--tinta-3); }

/* ---------- cantidad con unidad (stepper) ---------- */
.cantidad { display: inline-flex; flex-direction: column; gap: 4px; }
.cantidad .stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--linea-fuerte); border-radius: var(--r-2); background: var(--superficie); overflow: hidden; }
.cantidad .stepper button { width: max(44px, var(--toque)); min-height: max(44px, var(--toque)); border: 0; background: var(--superficie-2); display: grid; place-items: center; cursor: pointer; color: var(--tinta); }
.cantidad .stepper button:hover { background: var(--fondo-2); }
.cantidad .stepper button:active { background: var(--acento-suave); }
.cantidad .stepper button:disabled { opacity: .4; pointer-events: none; }
.cantidad .stepper input { width: 5.5em; border: 0; border-inline: 1px solid var(--linea); text-align: center; background: transparent; font: 600 1.25em var(--f-num); font-variant-numeric: tabular-nums; outline: none; padding: 0 4px; }
.cantidad .stepper input:focus { background: var(--acento-suave); }
.cantidad .stepper .unidad { display: grid; place-items: center; padding: 0 10px; color: var(--tinta-2); font-size: var(--t-sec); border-right: 1px solid var(--linea); }
.cantidad .conversion { font: 500 var(--t-sec) var(--f-num); color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ---------- barra de carga y semáforo ---------- */
.barra-carga { display: grid; gap: 6px; }
.barra-carga .pista { position: relative; height: 14px; border-radius: 7px; background: var(--superficie-2); border: 1px solid var(--linea); overflow: hidden; }
[data-densidad="nave"] .barra-carga .pista { height: 22px; border-radius: 11px; }
.barra-carga .relleno { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ok); transition: width var(--t-media), background var(--t-media); }
.barra-carga.nivel-aviso .relleno { background: var(--aviso); }
.barra-carga.nivel-peligro .relleno { background: var(--peligro); background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .22) 0 6px, transparent 6px 12px); }
.barra-carga .texto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-sec); color: var(--tinta-2); }
.barra-carga .texto .num { font-size: 1.15em; color: var(--tinta); font-weight: 600; }
.barra-carga .estado { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-meta); }
.barra-carga.nivel-ok .estado { color: color-mix(in oklab, var(--ok) var(--mezcla-texto), var(--tinta)); }
.barra-carga.nivel-aviso .estado { color: color-mix(in oklab, var(--aviso) var(--mezcla-texto), var(--tinta)); }
.barra-carga.nivel-peligro .estado { color: color-mix(in oklab, var(--peligro) var(--mezcla-texto), var(--tinta)); }

/* ---------- firma ---------- */
.firma { display: grid; gap: var(--e-3); }
.firma .lienzo-marco { position: relative; border-radius: var(--r-2); border: 1px solid var(--linea-fuerte); background: #fbfaf5; overflow: hidden; }
.firma canvas { display: block; width: 100%; height: min(260px, 40dvh); touch-action: none; cursor: crosshair; }
.firma .linea-firma { position: absolute; left: 6%; right: 6%; bottom: 22%; border-bottom: 1.5px dashed #b9b19c; pointer-events: none; }
.firma .pista { position: absolute; left: 6%; bottom: 8%; font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .1em; color: #8d856f; pointer-events: none; }
.firma .acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* ---------- teclado de PIN (pantalla de bloqueo): fondo cal con trama de papel kraft ---------- */
.bloqueo { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: 1.1fr 1fr; background-color: var(--fondo); background-image: var(--papel-trama); }
.bloqueo .lado { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; background-color: var(--superficie-2); background-image: var(--papel-trama); border-right: 1px solid var(--linea); }
.bloqueo .lado .sello { width: fit-content; padding: 22px 28px 24px; border: 3px solid var(--acento); border-radius: var(--r-1); outline: 1px solid var(--acento); outline-offset: 4px; color: var(--acento-fuerte); display: grid; gap: 6px; transform: rotate(-1.2deg); }
.bloqueo .lado .sello img { width: 56px; height: 56px; border-radius: 12px; }
.bloqueo .lado .sello .marca-gr { font: 700 52px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .14em; margin-left: .14em; }
.bloqueo .lado .sello .remate { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .28em; color: var(--atencion); }
.bloqueo .lado h1 { font: 600 26px/1.15 var(--f-ui); margin-top: 28px; color: var(--tinta); max-width: 18ch; letter-spacing: -.01em; }
.bloqueo .lado .hora { font: 600 64px var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.bloqueo .lado .fecha { color: var(--tinta-2); }
.bloqueo .lado .fecha::first-letter { text-transform: uppercase; }
.bloqueo .pinpad-zona { display: grid; place-items: center; padding: 24px; overflow: auto; }
.pinpad { width: min(340px, 100%); display: grid; gap: 20px; justify-items: center; }
.pinpad .marca-pin { display: none; align-items: center; gap: 10px; color: var(--acento-fuerte); }
.pinpad .marca-pin img { width: 40px; height: 40px; border-radius: 10px; }
.pinpad .marca-pin b { font: 700 22px var(--f-ui); text-transform: uppercase; letter-spacing: .16em; }
.pinpad .puntos { display: flex; gap: 14px; height: 18px; }
.pinpad .puntos i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linea-fuerte); transition: background var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida); }
.pinpad .puntos i.lleno { background: var(--acento); border-color: var(--acento); transform: scale(1.1); }
.pinpad.error .puntos { animation: tiembla .35s; }
.pinpad.error .puntos i { border-color: var(--peligro); }
@keyframes tiembla { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pinpad .teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.pinpad .teclas button { height: 72px; min-height: 64px; border-radius: var(--r-2); border: 1px solid var(--linea-fuerte); background: var(--superficie); font: 500 28px var(--f-num); cursor: pointer; box-shadow: var(--sombra-1); transition: background var(--t-rapida), transform var(--t-rapida); font-variant-numeric: tabular-nums; }
.pinpad .teclas button:hover { background: var(--superficie-2); }
.pinpad .teclas button:active { transform: scale(.95); background: var(--acento-suave); }
.pinpad .teclas button.suave { background: transparent; border-color: transparent; box-shadow: none; font: 600 16px var(--f-ui); color: var(--tinta-2); text-transform: uppercase; letter-spacing: .08em; }
.pinpad .teclas button.suave:last-child { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
@media (max-width: 860px) { .bloqueo { grid-template-columns: 1fr; } .bloqueo .lado { display: none; } .pinpad .marca-pin { display: flex; } }
@media (max-height: 700px) { .pinpad { gap: 12px; } .pinpad .teclas { gap: 8px; } .pinpad .teclas button { height: 64px; } }

/* ---------- puesta en marcha ---------- */
.asistente { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background-color: var(--fondo); background-image: var(--papel-trama), radial-gradient(1200px 600px at 100% 0%, var(--acento-suave), transparent 60%); }
.asistente .caja { width: min(980px, 100%); }
.asistente .marca-asistente { display: flex; align-items: center; gap: 12px; color: var(--acento-fuerte); margin-bottom: var(--e-4); }
.asistente .marca-asistente img { width: 44px; height: 44px; border-radius: 12px; }
.asistente .marca-asistente b { font: 700 20px var(--f-ui); text-transform: uppercase; letter-spacing: .18em; }
.asistente .marca-asistente span { font-size: var(--t-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-3); padding-left: 12px; border-left: 1px solid var(--linea-fuerte); }
.perfiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.perfil { text-align: left; align-content: start; padding: 18px; border-radius: var(--r-3); border: 1.5px solid var(--linea); background: var(--superficie); cursor: pointer; display: grid; gap: 8px; transition: border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida); min-height: var(--toque); }
.perfil:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.perfil[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); background: color-mix(in oklab, var(--acento) 5%, var(--superficie)); }
.perfil .ic-perfil { width: 44px; height: 44px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-fuerte); }
.perfil b { font: 600 17px var(--f-display); }
.perfil small { color: var(--tinta-2); line-height: 1.35; font-size: var(--t-sec); }

/* ---------- utilidades varias ---------- */
.separador { height: 1px; background: var(--linea); margin: var(--e-4) 0; }
.papel { background-color: var(--superficie-2); background-image: var(--papel-trama); }
.desplaza-x { overflow-x: auto; scrollbar-width: none; }
kbd { font: 600 11px var(--f-ui); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--linea-fuerte); background: var(--superficie-2); color: var(--tinta-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .rail, .barra, .no-imprimir { display: none !important; }
  .shell { display: block; } body { background: #fff; }
}
.shell.sin-raíl { grid-template-columns: 1fr; }
.shell.sin-raíl .rail { display: none; }