/* =========================================================
   Dashboard Yute Natural — hoja de estilos
   Alineada con el Brandbook 2025:
   · Tipografías: Montserrat (títulos) + Lato (texto)
   · Paleta: verdes corporativos + acento terracota
   ========================================================= */

/* ---------- Tipografías corporativas (autoalojadas) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("fuentes/montserrat-var.woff2") format("woff2-variations"),
       url("fuentes/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fuentes/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fuentes/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fuentes/lato-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Paleta de marca (Brandbook · Paleta de colores) */
  --marca-verde-claro: #86bf9e;   /* Pantone 345C  */
  --marca-verde-medio: #008561;   /* Pantone 3288C */
  --marca-verde:       #007737;   /* Pantone 348C  — color principal */
  --marca-verde-osc:   #24593a;   /* Pantone 357C  */
  --marca-acento:      #bf4f2a;   /* Pantone 167C  */
  --marca-gris:        #333333;   /* Pantone 425C  */

  /* Superficies */
  --superficie:   #f5f8f6;
  --superficie-2: #ffffff;
  --superficie-3: #eef3f0;
  --borde:        #dde7e1;
  --borde-fuerte: #c2d3c8;

  /* Texto */
  --texto:   #333333;
  --texto-2: #5c6b60;
  --texto-3: #66766a;

  /* Series de datos — verde 3288C + terracota 167C.
     Validadas: ΔE 24 en visión normal y 9,2 en el peor caso de
     daltonismo (mínimo exigido: 15 y 8). El verde 348C del logo NO
     sirve como serie junto al terracota: en protanopia son idénticos
     (ΔE 3,2) y uno se confunde con el otro.
     La serie 3 (verde 357C) queda en el límite: separación 7,1 frente
     al terracota, aceptable solo porque los gráficos llevan siempre
     leyenda y etiqueta directa. Para un cuarto conjunto de datos no
     hay color de marca disponible: agrupa en "Otros" o separa en dos
     gráficos en lugar de inventar un color. */
  --serie-1: #008561;
  --serie-2: #bf4f2a;
  --serie-3: #24593a;

  /* Estado */
  --bueno:   #007737;
  --critico: #bf4f2a;

  /* Acento decorativo e interactivo. En oscuro sube al verde 345C
     porque el 348C sobre fondo oscuro queda por debajo de 3:1. */
  --acento: #007737;

  /* Logotipo */
  --logo-flor:  #007737;
  --logo-texto: #211411;

  --sombra: 0 1px 2px rgba(36, 89, 58, .06), 0 6px 18px rgba(36, 89, 58, .06);
  --radio:  14px;
  --ancho:  1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --superficie:   #131714;
    --superficie-2: #1b201c;
    --superficie-3: #232a25;
    --borde:        #2c342e;
    --borde-fuerte: #3f4a42;
    --texto:        #ffffff;
    --texto-2:      #bcc7bf;
    --texto-3:      #94a097;
    --acento:       #86bf9e;
    --bueno:        #86bf9e;
    --critico:      #d9714b;
    --logo-flor:    #ffffff;
    --logo-texto:   #ffffff;
    --sombra:       0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --superficie:   #131714;
  --superficie-2: #1b201c;
  --superficie-3: #232a25;
  --borde:        #2c342e;
  --borde-fuerte: #3f4a42;
  --texto:        #ffffff;
  --texto-2:      #bcc7bf;
  --texto-3:      #94a097;
  --acento:       #86bf9e;
  --bueno:        #86bf9e;
  --critico:      #d9714b;
  --logo-flor:    #ffffff;
  --logo-texto:   #ffffff;
  --sombra:       0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--superficie);
  color: var(--texto);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* ---------- Cabecera ---------- */
.cabecera {
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
  position: sticky; top: 0; z-index: 20;
}
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 18px; }

/* Logotipo secundario del brandbook (horizontal), coloreado por tokens */
.logotipo { display: block; height: 50px; width: auto; flex: none; }
.logotipo .logo-flor  { fill: var(--logo-flor); }
.logotipo .logo-texto { fill: var(--logo-texto); }

/* Área de seguridad: separación mínima respetada mediante el divisor */
.marca-divisor {
  width: 1px; align-self: stretch; background: var(--borde);
  margin: 2px 0;
}
h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 19px; margin: 0;
  letter-spacing: -.01em; line-height: 1.2;
}
.subtitulo { margin: 1px 0 0; color: var(--texto-2); font-size: 14px; }

.cabecera-acciones { display: flex; align-items: center; gap: 10px; }
.sello {
  font-size: 13px; color: var(--texto-2);
  background: var(--superficie-3); border: 1px solid var(--borde);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.boton-tema {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie-3);
  color: var(--texto); font-size: 15px; line-height: 1;
}
.boton-tema:hover { border-color: var(--acento); }

/* ---------- Secciones ---------- */
main { padding: 34px 0 12px; }
section { margin-bottom: 42px; }
.titulo-seccion {
  font-family: "Montserrat", sans-serif;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--texto-3); margin: 0 0 15px;
  display: flex; align-items: center; gap: 12px;
}
.titulo-seccion::after {
  content: ""; flex: 1; height: 1px; background: var(--borde);
}

/* ---------- KPIs ---------- */
.rejilla-kpis {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.kpi {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra);
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acento);
}
.kpi-etiqueta { font-size: 13.5px; color: var(--texto-2); margin: 0 0 8px; }
.kpi-valor {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 30px; letter-spacing: -.02em; line-height: 1.1;
}
.kpi-pie { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.kpi-var { font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.kpi-var.sube { color: var(--bueno); }
.kpi-var.baja { color: var(--critico); }
.kpi-nota { font-size: 13px; color: var(--texto-3); font-style: italic; }

/* ---------- Barra de periodos ---------- */
.barra-periodos {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-bottom: 12px; flex-wrap: wrap;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font-family: "Lato", sans-serif; font-size: 13px; cursor: pointer;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-2);
}
.chip:hover { border-color: var(--acento); color: var(--acento); }
.chip.activo {
  background: var(--marca-verde); border-color: var(--marca-verde);
  color: #fff; font-weight: 700;
}
:root[data-tema="oscuro"] .chip.activo,
:root:not([data-tema="claro"]) .chip.activo { color: #fff; }
.rango { font-size: 13px; color: var(--texto-3); font-style: italic; white-space: nowrap; }

/* ---------- Bloques de análisis ---------- */
.rejilla-bloques { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .rejilla-bloques { grid-template-columns: 1fr 1fr; } }
.ancho-total { grid-column: 1 / -1; }

.tarjeta {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra);
  position: relative; min-width: 0;
}
.tarjeta-cab { margin-bottom: 12px; }
.tarjeta-titulo {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 16px; margin: 0; letter-spacing: -.005em;
}
.tarjeta-desc { font-size: 13.5px; color: var(--texto-2); margin: 5px 0 0; }
.tarjeta-pie { font-size: 13px; color: var(--texto-2); margin: 14px 0 0; font-style: italic; }
.tarjeta-aviso {
  font-size: 13px; color: var(--texto-2); margin: 14px 0 0;
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--borde); border-left: 3px solid var(--marca-acento);
  background: var(--superficie-3);
}
.vacio { font-size: 13.5px; color: var(--texto-2); margin: 0; font-style: italic; }

.leyenda { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--texto-2); }
.punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.lienzo { position: relative; }
.lienzo svg { display: block; max-width: 100%; }

/* ---------- Rankings de barras ---------- */
.ranking { display: flex; flex-direction: column; gap: 9px; }
.rk-fila {
  display: grid; grid-template-columns: minmax(90px, 1.5fr) 3fr auto auto;
  align-items: center; gap: 10px; font-size: 13.5px;
}
.rk-nombre { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pista { background: var(--superficie-3); border-radius: 4px; height: 15px; overflow: hidden; }
.rk-barra { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }
.rk-valor { font-weight: 700; color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }
.rk-pct { color: var(--texto-3); text-align: right; min-width: 46px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .rk-fila { grid-template-columns: minmax(72px, 1.3fr) 2fr auto; }
  .rk-pct { display: none; }
}

/* ---------- Metas comerciales (venta del año vs. 10/20/30 % de 2025) ----------
   Un solo peldaño alcanzado colorea todo el bloque: es lo primero que se
   lee, antes que ningún número. La pista lleva tres marcas en la posición
   real de cada meta —no repartidas a partes iguales—, así que un año con
   metas muy juntas (10 % y 20 % cerca) lo enseña la propia barra. */
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
.meta-empresa { margin-top: 10px; margin-bottom: 4px; }
.meta-bloque {
  border: 1px solid var(--borde); border-left-width: 4px; border-radius: 6px;
  padding: 10px 12px; background: var(--superficie-2);
}
.meta-bloque.meta-critico { border-left-color: var(--critico); }
.meta-bloque.meta-aviso   { border-left-color: var(--aviso, #8A5A12); }
.meta-bloque.meta-serie1  { border-left-color: var(--serie-1); }
.meta-bloque.meta-bueno   { border-left-color: var(--bueno); }
.meta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.meta-etq { font-size: 12.5px; color: var(--texto-3); }
.meta-actual { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.meta-base { font-size: 11.5px; color: var(--texto-3); margin-bottom: 4px; }
.meta-pista { position: relative; background: var(--superficie-3); border-radius: 4px; height: 10px; margin: 4px 0; }
.meta-barra { display: block; height: 100%; border-radius: 4px; background: var(--texto-3); }
.meta-critico .meta-barra { background: var(--critico); }
.meta-aviso   .meta-barra { background: var(--aviso, #8A5A12); }
.meta-serie1  .meta-barra { background: var(--serie-1); }
.meta-bueno   .meta-barra { background: var(--bueno); }
.meta-marca {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--texto-3); opacity: .45;
}
.meta-marca.pasada { opacity: .85; }
.meta-pie { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.meta-nivel { font-weight: 600; color: var(--texto-2); }
.meta-falta { color: var(--texto-3); text-align: right; }

/* ---------- Pestaña KAM: selector de mes y velocímetro ---------- */
.kam-selector { margin-bottom: 14px; }
.kam-selector-lbl { font-size: 13px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 8px; }
.kam-selector-mes {
  font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto);
}
/* ---------- Tablas ---------- */
.tabla-env { overflow-x: auto; margin: 0 -4px; }
table.tabla-datos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla-datos th, table.tabla-datos td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap;
}
table.tabla-datos th.num, table.tabla-datos td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla-datos th {
  color: var(--texto-2); font-weight: 700; position: sticky; top: 0;
  background: var(--superficie-2);
}
table.tabla-datos td:first-child {
  white-space: normal; min-width: 180px; max-width: 340px;
}
table.tabla-datos tbody tr:hover { background: var(--superficie-3); }
[hidden] { display: none !important; }

/* ---------- Tooltip ---------- */
.tooltip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte);
  border-radius: 10px; padding: 9px 11px; box-shadow: var(--sombra);
  font-size: 13px; min-width: 132px; z-index: 5;
}
.tooltip b { display: block; font-size: 12.5px; color: var(--texto-2); font-weight: 700; margin-bottom: 5px; }
.tooltip .fila { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 3px; }
.tooltip .fila .izq { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); }
.tooltip .fila .val { font-weight: 700; color: var(--texto); }

/* ---------- Recursos ---------- */
.grupo-recursos { margin-bottom: 26px; }
.grupo-titulo {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 14.5px; margin: 0 0 12px; color: var(--texto);
}
.rejilla-recursos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
a.recurso {
  display: flex; gap: 13px; text-decoration: none; color: inherit;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 15px; box-shadow: var(--sombra);
  transition: border-color .12s, transform .12s;
}
a.recurso:hover { border-color: var(--acento); transform: translateY(-1px); }
.recurso-icono {
  flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--superficie-3);
  display: grid; place-items: center; font-size: 19px;
}
.recurso-titulo {
  font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 14.5px; margin: 0 0 3px;
}
.recurso-desc { font-size: 13.5px; color: var(--texto-2); margin: 0; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); margin-top: 20px; padding: 22px 0 36px; }
.pie p { margin: 0; font-size: 13px; color: var(--texto-3); font-style: italic; }

@media (max-width: 560px) {
  .contenedor { padding: 0 16px; }
  .kpi-valor { font-size: 26px; }
  .logotipo { height: 40px; }
  .marca { gap: 13px; }
}

/* ---------- Pestañas ---------- */
/* Con 9 pestañas el contenedor no cabe en un móvil ni de lejos (822px de
   contenido contra 375px de viewport, medido con el panel real) y antes
   no había ninguna pista de que "Comercial", "Marketing" o "Auditorías"
   seguían más allá del borde — quien no probara a arrastrar el dedo por
   ahí nunca sabría que existen. El degradado de la derecha lo dice sin
   palabras, y desaparece solo cuando ya no queda nada por descubrir
   (.pestanas-cont controla la clase "desbordado" al hacer scroll, en
   app.js). */
.pestanas-cont { position: relative; }
.pestanas-cont::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 32px;
  background: linear-gradient(to right, transparent, var(--fondo) 65%);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.pestanas-cont.desbordado::after { opacity: 1; }
.barra-pestanas {
  display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--borde);
  padding-top: 2px;
}
.pestana {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 13.5px;
  padding: 9px 15px; border: 0; background: transparent; color: var(--texto-2);
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pestana:hover { color: var(--acento); }
.pestana.activa { color: var(--marca-verde); border-bottom-color: var(--marca-verde); }
:root[data-tema="oscuro"] .pestana.activa,
:root:not([data-tema="claro"]) .pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }

/* Objetivo táctil mínimo recomendado (~44px): medido en el panel real,
   las pestañas daban 37px y los chips de periodo 28px — de los más
   fáciles de tocar mal en todo el panel, y de los que más se usan.
   Solo en pantallas de móvil: en escritorio el ratón no tiene ese
   problema, y agrandarlo ahí solo quitaría densidad sin necesidad. */
@media (max-width: 640px) {
  .pestana { padding: 12px 15px; }
  .chip { padding: 12px 14px; }
}

/* ---------- Tabla densa (canal × tipo) ---------- */
table.tabla-densa { font-size: 12.5px; }
table.tabla-densa th, table.tabla-densa td { padding: 6px 8px; }
table.tabla-densa th.grupo { border-left: 1px solid var(--borde); }
table.tabla-densa tr.sub th { font-weight: 400; font-size: 11.5px; color: var(--texto-3); }
table.tabla-densa td.tenue, table.tabla-densa th.tenue { color: var(--texto-3); }
table.tabla-densa tfoot th { border-top: 2px solid var(--borde-fuerte); background: var(--superficie-3); }
.delta { font-weight: 700; font-size: 12.5px; }
.delta.sube { color: var(--bueno); }
.delta.baja { color: var(--critico); }

/* Series 4-6: mismo color con distinto relieve, para no inventar tonos */
.punto-1 { box-shadow: inset 0 0 0 2px var(--superficie-2); }
.punto-2 { border-radius: 50%; }
.punto-3 { transform: rotate(45deg); }

.lista-pendiente { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--texto-2); }
.lista-pendiente li { margin-bottom: 7px; }
.lista-pendiente strong { color: var(--texto); }

/* ---------- Panel comercial ---------- */
.mini-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 4px; }
.mini-kpi {
  background: var(--superficie-3); border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.mini-et { font-size: 12.5px; color: var(--texto-2); }
.mini-val { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 17px; }

.frente {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px;
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borde);
  color: var(--texto);
}
.accion {
  border: 1px solid var(--borde); border-left: 3px solid var(--marca-acento);
  border-radius: 10px; margin-bottom: 9px; background: var(--superficie);
}
.accion > summary {
  cursor: pointer; padding: 11px 13px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; list-style: none;
}
.accion > summary::-webkit-details-marker { display: none; }
.accion > summary::before { content: "▸ "; color: var(--texto-3); }
.accion[open] > summary::before { content: "▾ "; }
.accion-tit { font-size: 14px; }
.accion-meta { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.accion-porque { margin: 0 13px 8px; font-size: 13.5px; color: var(--texto-2); }
.accion-canal { margin: 0 13px 10px; font-size: 12.5px; color: var(--texto-3); font-style: italic; }
.accion .tabla-env { padding: 0 13px 12px; }

/* ---------- Lista de prioridades del día ---------- */
.lista-hoy { margin: 4px 0 0; padding-left: 22px; }
.lista-hoy li { margin-bottom: 11px; font-size: 13.5px; line-height: 1.45; }
.hoy-meta { color: var(--texto-3); font-size: 12.5px; }
.hoy-que {
  display: block; margin-top: 2px; font-weight: 700; color: var(--texto);
}
a.enlace-hs { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borde-fuerte); }
a.enlace-hs:hover { color: var(--acento); border-bottom-color: var(--acento); }
.accion.aviso { border-left-color: var(--critico); }

/* ---------- Lista de precios (tarjeta desplegable) ---------- */
.recurso-precios {
  grid-column: 1 / -1;                 /* ocupa el ancho completo de la rejilla */
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  transition: border-color .12s;
}
.recurso-precios:hover { border-color: var(--acento); }
.recurso-precios[open] { border-color: var(--marca-verde); }
.recurso-precios > summary {
  display: flex; gap: 13px; align-items: center; padding: 15px;
  cursor: pointer; list-style: none;
}
.recurso-precios > summary::-webkit-details-marker { display: none; }
.recurso-precios > summary::after {
  content: "▸"; margin-left: auto; color: var(--texto-3); font-size: 15px;
}
.recurso-precios[open] > summary::after { content: "▾"; }
.precios-cuerpo { padding: 0 15px 15px; border-top: 1px solid var(--borde); }

.buscador { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.buscador-campo {
  flex: 1 1 280px; padding: 10px 13px; font-size: 15px; font-family: inherit;
  color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px;
}
.buscador-campo:focus { outline: 2px solid var(--marca-verde); outline-offset: 1px; border-color: var(--marca-verde); }
.buscador-cuenta { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }

.precios-tablas { display: flex; flex-direction: column; gap: 20px; }
.tabla-precios { overflow-x: auto; }
.tabla-precios table { font-size: 13px; }
.tabla-precios th, .tabla-precios td { padding: 7px 10px; white-space: nowrap; }
.tabla-precios td.sku {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 12.5px;
}
.tabla-precios td:nth-child(2) { white-space: normal; min-width: 190px; color: var(--texto-2); }
.tabla-precios th.num, .tabla-precios td.num { font-variant-numeric: tabular-nums; }
.tabla-precios th:nth-child(3), .tabla-precios td:nth-child(3) {
  border-left: 1px solid var(--borde);
}
.tabla-precios tbody tr:hover { background: var(--superficie-3); }

.precio-pie { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.precio-sync { margin-top: 12px; font-size: 13.5px; color: var(--texto-2); }
.precio-sync p { margin: 0 0 8px; }
.precio-sync pre {
  margin: 0 0 8px; padding: 10px 12px; overflow-x: auto;
  background: var(--superficie-3); border: 1px solid var(--borde); border-radius: 9px;
}
.precio-sync code { font-size: 12.5px; }

/* ---------- Llegadas ---------- */
.llegada { border-top: 1px solid var(--borde); padding-top: 14px; }
.llegada:first-child { border-top: 0; padding-top: 0; }
.llegada-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.llegada-fecha {
  font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 2px;
}
.llegada-meta { font-size: 12.5px; color: var(--texto-3); }
.llegada-cuando {
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--superficie-3); border: 1px solid var(--marca-verde);
  color: var(--marca-verde); padding: 3px 10px; border-radius: 999px;
}
:root[data-tema="oscuro"] .llegada-cuando,
:root:not([data-tema="claro"]) .llegada-cuando { border-color: var(--acento); color: var(--acento); }
.llegada-cuando.pasada { border-color: var(--borde); color: var(--texto-3); }
.llegada .tabla-precios td:first-child { white-space: normal; min-width: 240px; }

/* ---------- Formulario de cartas de aduana ---------- */
.form-aduanas .frente:first-child { margin-top: 4px; }
.form-rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.form-campo { display: flex; flex-direction: column; gap: 4px; }
.form-campo.ancho-2 { grid-column: span 2; }
.form-campo.ancho-3 { grid-column: span 3; }
@media (max-width: 620px) { .form-campo.ancho-2, .form-campo.ancho-3 { grid-column: span 1; } }
.form-et { font-size: 12.5px; color: var(--texto-2); }
.form-campo input, .form-campo textarea {
  padding: 8px 11px; font-size: 14px; font-family: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 9px;
  width: 100%; resize: vertical;
}
.form-campo input:focus, .form-campo textarea:focus {
  outline: 2px solid var(--marca-verde); outline-offset: 1px; border-color: var(--marca-verde);
}
.aduanas-total {
  margin: 16px 0 0; font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 16px; color: var(--texto);
}
.boton-principal {
  background: var(--marca-verde); border-color: var(--marca-verde); color: #fff; font-weight: 700;
}
.boton-principal:hover { background: #00602c; color: #fff; }

/* ---------- La carta ---------- */
.carta-vista { margin-top: 18px; }
.carta {
  background: #fff; color: #111; padding: 16mm 14mm;
  border: 1px solid var(--borde); border-radius: 8px;
  font-family: "Lato", Arial, sans-serif; font-size: 9.5pt; line-height: 1.35;
}
.carta-cab { text-align: center; border-bottom: 1.5pt solid #111; padding-bottom: 6pt; margin-bottom: 10pt; }
.carta-cab h1 { font-family: "Montserrat", sans-serif; font-size: 13pt; font-weight: 800; margin: 0; letter-spacing: .02em; }
.carta-sub { margin: 3pt 0 0; font-size: 9pt; color: #444; }
.carta h2 {
  font-family: "Montserrat", sans-serif; font-size: 8.5pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 4pt;
  border-bottom: .5pt solid #999; padding-bottom: 2pt; color: #111;
}
.carta-fila4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt; margin-bottom: 10pt; }
.carta-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; margin-bottom: 10pt; }
.carta-dato { display: flex; flex-direction: column; border: .5pt solid #bbb; padding: 4pt 6pt; }
.ct-et { font-size: 7.5pt; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.ct-val { font-weight: 700; }
.carta-parte dl { display: grid; grid-template-columns: auto 1fr; gap: 1pt 8pt; margin: 0; }
.carta-parte dt { font-size: 8pt; color: #555; }
.carta-parte dd { margin: 0; font-size: 8.5pt; }
.carta-parte dt.fuerte, .carta-parte dd.fuerte { font-weight: 800; font-size: 9.5pt; padding-top: 2pt; }
.carta-seccion { margin-bottom: 10pt; }
table.carta-tabla { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
table.carta-tabla th, table.carta-tabla td { border: .5pt solid #999; padding: 3pt 5pt; text-align: left; vertical-align: top; }
table.carta-tabla th { background: #eee; font-size: 7.5pt; text-transform: uppercase; }
table.carta-tabla .num { text-align: right; white-space: nowrap; }
.carta-nota { margin: 4pt 0 0; font-size: 8pt; font-style: italic; color: #444; }
.carta-firma { border-top: .5pt solid #999; padding-top: 8pt; }
.carta-declara { margin: 0 0 8pt; font-size: 8pt; }
.carta-rubrica { display: flex; flex-direction: column; align-items: flex-start; gap: 2pt; }
.firma-img { height: 58px; width: auto; mix-blend-mode: multiply; margin: 2pt 0 -6pt; }
.carta-linea { display: block; width: 62mm; border-top: .5pt solid #111; margin-top: 2pt; }

/* ---------- Impresión: solo la carta, en una hoja tamaño carta ---------- */
#hoja-impresion { display: none; }
@page { size: Letter; margin: 10mm; }
@media print {
  body > * { display: none !important; }
  body > #hoja-impresion { display: block !important; }
  #hoja-impresion .carta {
    border: 0; border-radius: 0; padding: 0; font-size: 9pt; width: 100%;
  }
  /* Este reset existe para la carta de aduanas: en papel va todo en negro
     sobre blanco. NO puede aplicarse a la etiqueta de pallet, que se basa
     justo en lo contrario —barras negras con texto en blanco— y con este
     «transparent !important» salían en blanco sobre blanco. */
  #hoja-impresion .carta, #hoja-impresion .carta * {
    color: #000 !important; background: transparent !important;
  }
  #hoja-impresion table.carta-tabla th {
    background: #eee !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #hoja-impresion .carta { page-break-inside: avoid; }
}
.rk-fila.sin-pct { grid-template-columns: minmax(90px, 1.5fr) 3fr auto; }

/* ---------- Chat de datos ---------- */

/* La conclusión va antes que el dato: se lee primero y en muchos casos
   evita tener que mirar la tabla. */
.tarjeta-conclusion {
  margin: 2px 0 14px;
  padding: 11px 13px;
  border-left: 3px solid var(--marca-verde);
  background: var(--superficie-3);
  border-radius: 0 7px 7px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
}

/* ---------- Cobranzas ---------- */
.cobros-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.cobros-buscar {
  flex: 1 1 260px; padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--borde); border-radius: 9px;
  background: var(--superficie); color: var(--texto);
}
.cobros-buscar:focus, .cobros-quien:focus { outline: 2px solid var(--marca-verde); outline-offset: 1px; }
.cobros-quien {
  padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--borde); border-radius: 9px;
  background: var(--superficie); color: var(--texto);
}
.cobros-resumen { font-size: 13px; color: var(--texto-3); margin: 0 0 8px; }

.cobro { border: 1px solid var(--borde); border-radius: 9px; margin-bottom: 7px; background: var(--superficie); }
.cobro > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 13px; cursor: pointer; list-style: none;
  border-left: 4px solid var(--borde); border-radius: 8px;
}
.cobro > summary::-webkit-details-marker { display: none; }
.cobro > summary:hover { background: var(--superficie-3); }
.cobro-izq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cobro-izq strong { font-size: 14.5px; }
.cobro-meta { font-size: 12.5px; color: var(--texto-3); }
.cobro-der { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.cobro-importe { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }
.cobro-plazo { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.cobro-globo { font-size: 12px; color: var(--texto-3); white-space: nowrap; }

/* El retraso se lee por el borde, sin depender solo del color */
.plazo-ok    > summary { border-left-color: var(--marca-verde-claro); }
.plazo-medio > summary { border-left-color: var(--marca-verde-medio); }
.plazo-alto  > summary { border-left-color: #b25f1e; }
.plazo-grave > summary { border-left-color: var(--critico); }

.cobro-detalle { padding: 4px 14px 14px; border-top: 1px solid var(--borde); }
.cobro-datos { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 12px 0; font-size: 13.5px; }
.cobro-datos dt { color: var(--texto-3); }
.cobro-datos dd { margin: 0; font-variant-numeric: tabular-nums; }
.boton-enlace {
  display: inline-block; margin-bottom: 12px; font-size: 13px;
  color: var(--marca-verde); text-decoration: underline;
}

.comentario { background: var(--superficie-3); border-radius: 8px; padding: 9px 11px; margin-bottom: 7px; }
.comentario-hoja { border-left: 3px solid var(--borde); }
.comentario-autor { font-size: 12px; color: var(--texto-3); display: block; margin-bottom: 3px; }
.comentario p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }

.comentario-form { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.comentario-autor-campo, .comentario-campo {
  padding: 8px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); color: var(--texto); resize: vertical;
}
.comentario-autor-campo { max-width: 260px; }
.comentario-autor-campo:read-only { background: var(--superficie-3); color: var(--texto-3); }
.comentario-autor-campo:focus, .comentario-campo:focus { outline: 2px solid var(--marca-verde); outline-offset: 1px; }
.comentario-pie { display: flex; align-items: center; gap: 11px; }
.comentario-aviso { font-size: 12.5px; color: var(--texto-3); }

@media print { .cobros-filtros, .comentario-form, .boton-enlace { display: none !important; } .cobro[open] > summary { break-inside: avoid; } }

/* Encaje de un ingreso con una factura: es una sugerencia, no un hecho,
   y el color lo dice sin gritar. */
.encaje {
  display: inline-block; font-size: 11.5px; padding: 1px 7px;
  border-radius: 20px; white-space: nowrap; border: 1px solid;
}
.encaje-alta  { color: var(--marca-verde); border-color: var(--marca-verde-claro); background: var(--superficie-3); }
.encaje-media { color: var(--texto-2); border-color: var(--borde); background: var(--superficie-3); }
.cobro-pago {
  font-size: 11.5px; color: var(--marca-verde); white-space: nowrap;
  border: 1px solid var(--marca-verde-claro); border-radius: 20px; padding: 1px 7px;
}
.cobro-pagos {
  background: var(--superficie-3); border-left: 3px solid var(--marca-verde);
  border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 12px 0;
}
.cobro-pagos strong { font-size: 13.5px; display: block; margin-bottom: 4px; }
.cobro-pago-linea { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-2); }

.acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.boton-suave { background: var(--superficie-3); color: var(--texto); border: 1px solid var(--borde); }
.boton-suave:hover:not(:disabled) { background: var(--superficie); }
@media print { .acciones { display: none !important; } }
.sub-titulo { font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600;
  margin: 18px 0 8px; color: var(--texto-2); }

/* ---------- Tablas plegables ---------- */
.fila-oculta { display: none; }
/* La regla de impresión de más abajo devuelve las filas a table-row; los
   detalles de cobros no son filas de tabla y necesitan su propio valor. */
.ver-mas {
  display: block; width: 100%; margin-top: 6px; padding: 8px 12px;
  font: inherit; font-size: 13px; color: var(--marca-verde);
  background: var(--superficie-3); border: 1px solid var(--borde);
  border-radius: 8px; cursor: pointer;
}
.ver-mas:hover { background: var(--superficie); }
.ver-mas:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 1px; }
/* En papel no hay clic que valga: se imprime todo. */
@media print {
  .fila-oculta { display: table-row !important; }
  .cobro.fila-oculta { display: block !important; }
  .ver-mas { display: none !important; }
}

/* =========================================================
   ETIQUETA DE PALLET · Munbyn ITP941
   ---------------------------------------------------------
   100 × 150 mm, térmica directa, 203 ppp, SOLO NEGRO.

   Nada de grises: una térmica no tiene medios tonos y los
   simula con tramas que salen sucias. Todo es negro pleno o
   blanco. Los rótulos van en negativo porque una barra maciza
   es lo único que el cabezal reproduce perfecto.

   Las medidas van en milímetros, no en puntos: la etiqueta es
   un objeto físico de tamaño conocido.
   ========================================================= */
/* Las secciones de la página llevan margen inferior (regla general de
   arriba). Dentro de la etiqueta no: cada milímetro cuenta y el reparto
   lo hace el flex. */
.etiqueta section, .etiqueta header, .etiqueta footer { margin: 0; }

.etiqueta {
  --et-nombre: 6.4mm;
  --et-uds: 12mm;
  --et-desc: 3.9mm;
  --et-dir: 4mm;
  width: 100mm;
  height: 150mm;
  box-sizing: border-box;
  padding: 2.5mm;
  background: #fff;
  color: #000;
  font-family: "Montserrat", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* En pantalla se ve con marco; en papel el marco lo pone el borde
   físico de la etiqueta. */
.carta-vista .etiqueta { border: 1px solid var(--borde); margin: 0 auto; }

.et-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3mm; padding-bottom: 1.2mm; border-bottom: 0.6mm solid #000;
}
.et-logo {
  height: 7.5mm; width: auto; display: block;
  /* El logotipo es verde; en una térmica solo hay negro. */
  filter: brightness(0) saturate(100%);
}
.et-rotulo { text-align: right; line-height: 1.05; }
.et-rotulo strong { display: block; font-size: 3.9mm; font-weight: 800; letter-spacing: .02em; }
.et-rotulo span { display: block; font-size: 2.6mm; font-weight: 600; letter-spacing: .06em; }

.et-tira {
  display: flex; align-items: center; justify-content: space-between;
  background: #000; color: #fff; padding: 1mm 2mm; margin-top: 1.5mm;
}
.et-tira-et { font-size: 3.1mm; font-weight: 700; letter-spacing: .08em; }
.et-contador { font-size: 4mm; font-weight: 800; letter-spacing: .04em; }

.et-dest { padding: 2.5mm 0 2mm; border-bottom: 0.4mm solid #000; }
/* El nombre es lo que se lee a tres metros: se le da todo el tamaño
   que cabe sin partir la palabra. */
.et-dest-nombre {
  margin: 0; font-size: var(--et-nombre); font-weight: 800; line-height: 1.08;
  letter-spacing: -.01em; text-transform: uppercase;
}
.et-dest-dir { margin: 1.4mm 0 0; font-size: var(--et-dir); font-weight: 500; line-height: 1.25; }
.et-dest-ciudad { margin: 1mm 0 0; font-size: 4.6mm; font-weight: 700; }
.et-dest-contacto { margin: 1.6mm 0 0; font-size: 3.4mm; font-weight: 500; }

.et-barra {
  background: #000; color: #fff; margin: 2.2mm 0 0;
  padding: 1.1mm 2mm; font-size: 3.1mm; font-weight: 700; letter-spacing: .08em;
}

.et-contenido { padding: 2mm 0; border-bottom: 0.4mm solid #000; }
.et-uds { margin: 0; display: flex; align-items: baseline; gap: 2mm; }
.et-uds strong { font-size: var(--et-uds); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.et-uds span { font-size: 5mm; font-weight: 700; letter-spacing: .04em; }
.et-desc { margin: 1.6mm 0 0; font-size: var(--et-desc); font-weight: 600; line-height: 1.2; }
.et-ref { margin: 1.2mm 0 0; font-size: 3.8mm; font-weight: 500; font-style: italic; }
.et-sku { margin: 1.2mm 0 0; display: flex; align-items: center; gap: 2mm; }
.et-sku-et {
  background: #000; color: #fff; padding: 0.6mm 1.6mm;
  font-size: 2.6mm; font-weight: 700; letter-spacing: .08em;
}
.et-sku strong { font-size: 4.6mm; font-weight: 800; letter-spacing: .04em; }

.et-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: auto; }
.et-dato { padding: 1.2mm 2mm 1.2mm 0; }
.et-dato + .et-dato { border-left: 0.4mm solid #000; padding-left: 3mm; }
.et-dato-et { display: block; font-size: 2.8mm; font-weight: 700; letter-spacing: .08em; }
.et-dato-v { display: block; font-size: 5.2mm; font-weight: 800; line-height: 1.1; margin-top: 0.6mm; }
.et-dato-nota { display: block; font-size: 3.1mm; font-weight: 500; margin-top: 0.4mm; }

.et-rem { border-top: 0.6mm solid #000; padding-top: 1mm; }
.et-rem-et { display: block; font-size: 2.2mm; font-weight: 700; letter-spacing: .1em; }
.et-rem p { margin: 0.3mm 0 0; font-size: 2.7mm; line-height: 1.2; font-weight: 500; line-height: 1.25; }
.et-rem strong { font-weight: 800; }

.descuadre { color: var(--critico); font-weight: 600; }

/* La etiqueta tiene su propio tamaño de página: la carta de aduanas
   sigue siendo Letter. Páginas con nombre, soportadas en Chrome. */
@page etiqueta { size: 100mm 150mm; margin: 0; }
@media print {
  /* Con el id delante para ganarle al reset de impresión de más arriba. */
  #hoja-impresion .etiqueta,
  .etiqueta {
    page: etiqueta;
    width: 100mm;
    /* Bastante menos que la página. El recorte no es fiable entre
       versiones de Chrome, así que la garantía es que sobre sitio. */
    height: 145mm;
    border: 0 !important;
    overflow: hidden;
    break-inside: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
    /* Sin esto el navegador no imprime las barras negras */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Ningún bloque puede partirse por la mitad: si algún día vuelve a no
     caber, que salte entero y se vea, en vez de dejar dos líneas huérfanas
     en una segunda hoja. */
  .etiqueta > * { break-inside: avoid; page-break-inside: avoid; }
  #hoja-impresion { break-inside: avoid; }
}

/* ---------- Diagnóstico ---------- */
.diagnostico { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hallazgo {
  border: 1px solid var(--borde); border-left-width: 4px;
  border-radius: 0 9px 9px 0; padding: 12px 14px; background: var(--superficie);
}
.hallazgo-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hallazgo-nivel {
  font-family: "Montserrat", sans-serif; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap; border: 1px solid;
}
.hallazgo-titulo {
  font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700;
  margin: 0; line-height: 1.3;
}
.hallazgo-evidencia { margin: 7px 0 0; font-size: 14px; line-height: 1.5; }
.hallazgo-accion { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }

/* El nivel se distingue por el borde y por la palabra, no solo por color:
   con daltonismo el color rojo/verde no basta. */
.hallazgo-urgente { border-left-color: var(--critico); }
.hallazgo-urgente .hallazgo-nivel { color: var(--critico); border-color: var(--critico); }
.hallazgo-atencion { border-left-color: #b25f1e; }
.hallazgo-atencion .hallazgo-nivel { color: #b25f1e; border-color: #b25f1e; }
.hallazgo-oportunidad { border-left-color: var(--marca-verde-medio); }
.hallazgo-oportunidad .hallazgo-nivel { color: var(--marca-verde-medio); border-color: var(--marca-verde-medio); }
.hallazgo-bien { border-left-color: var(--marca-verde-claro); }
.hallazgo-bien .hallazgo-nivel { color: var(--marca-verde); border-color: var(--marca-verde-claro); }
.crear-negocio { white-space: nowrap; font-size: 12.5px; padding: 4px 10px; }

/* ---------------------------------------------------------
   Semáforo y lista de comprobación de la pestaña KAM
   ---------------------------------------------------------
   El color NUNCA va solo: cada punto lleva su palabra al lado
   (Rojo / Naranja / Verde) y cada bloque su etiqueta URGENTE o
   VIGILAR. Con daltonismo rojo-verde —que es el más común— un
   semáforo sin texto no dice absolutamente nada, y esa regla ya
   la sigue el diagnóstico del Resumen.
   --------------------------------------------------------- */
.punto {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  flex: 0 0 auto;
}
.punto-rojo    { background: var(--error, #bf4f2a); }
.punto-naranja { background: #c98a1e; }
.punto-verde   { background: var(--verde, #007737); }

.semaforo {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  margin: 12px 0 4px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  font-size: 0.94rem;
}
.semaforo-nivel { font-family: Montserrat, sans-serif; }
.semaforo-texto { color: var(--texto2); }
.semaforo-rojo    { border-left: 4px solid var(--error, #bf4f2a); }
.semaforo-naranja { border-left: 4px solid #c98a1e; }
.semaforo-verde   { border-left: 4px solid var(--verde, #007737); }

.lista-tareas { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-tareas .tarea {
  display: flex;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--borde);
  font-size: 0.94rem;
}
.lista-tareas .tarea:first-child { border-top: 0; }
.tarea-texto { color: var(--texto); }
.lista-tareas .oculta { display: none; }

@media print {
  /* En papel no hay clic que valga: se despliega todo. */
  .lista-tareas .oculta { display: flex; }
}
.celda-semaforo { display: inline-flex; align-items: center; }
.celda-semaforo .punto { margin-right: 0; }

/* Registro de análisis y auditorías */
.auditoria { border-top: 1px solid var(--borde); padding: 14px 0 4px; }
.auditoria:first-of-type { border-top: 0; }
.auditoria-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.auditoria-fecha {
  font-family: Lato, sans-serif; font-size: .78rem; letter-spacing: .4px;
  text-transform: uppercase; color: var(--texto2); white-space: nowrap;
}
.auditoria-titulo { font-family: Montserrat, sans-serif; font-size: 1.02rem; margin: 0; }
.auditoria-datos { color: var(--texto2); font-size: .86rem; margin: 2px 0 6px; }
.auditoria-resumen { margin: 0 0 6px; }
.auditoria-hallazgo { margin: 0 0 10px; }
.boton-doc {
  display: inline-block; padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--verde); color: var(--verde);
  text-decoration: none; font-size: .88rem;
}
.boton-doc:hover { background: var(--verde); color: #fff; }
.sub-tarjeta { font-family: Montserrat, sans-serif; font-size: .95rem; margin: 18px 0 4px; }

/* ---------- Descargar la tabla en CSV ----------
   El botón va debajo y a la derecha, discreto: es una salida de
   emergencia para preguntas que el panel no responde, no una acción
   principal. Al imprimir desaparece. */
.tabla-con-csv { display: flex; flex-direction: column; gap: 6px; }
.tabla-acciones { display: flex; justify-content: flex-end; }
.boton-csv {
  font: inherit;
  font-size: .78rem;
  color: var(--texto-2);
  background: none;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
}
.boton-csv:hover { background: var(--superficie); color: var(--texto); }
.boton-csv:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media print { .tabla-acciones { display: none; } }

/* ---------- Hora de la última actualización ----------
   Va pegado a «Datos hasta el …» en la cabecera. En gris porque es una
   comprobación, no un dato del negocio; en ámbar cuando pasa de 30 horas,
   que es cuando conviene mirar si algo se ha quedado atascado. */
.actualizado-hora { color: var(--texto-2); }
.actualizado-viejo .actualizado-hora { color: var(--aviso, #8A5A12); font-weight: 600; }

/* ---------- Mapa de pedidos ----------
   Pequeño y al lado de la tabla: el mapa dice DÓNDE y la tabla CUÁNTO.
   La silueta va en un tono apagado para que los puntos manden. */
.mapa-par { display: grid; gap: 20px; grid-template-columns: 420px 1fr; align-items: start; }
.mapa-caja { max-width: 420px; }
.mapa-lista { min-width: 0; }
.mapa-pedidos { width: 100%; height: auto; display: block; }
.mapa-tierra {
  fill: var(--superficie-3); stroke: var(--borde); stroke-width: .6;
  stroke-linejoin: round;
}
.mapa-pedidos circle {
  fill: var(--marca-verde); fill-opacity: .42;
  stroke: var(--marca-verde); stroke-width: 1;
  transition: fill-opacity .12s ease;
}
.mapa-punto:hover circle { fill-opacity: .8; }
.mapa-etiqueta {
  font-size: 9px; text-anchor: middle; fill: var(--texto-2); font-weight: 600;
  paint-order: stroke; stroke: var(--superficie); stroke-width: 2.5px;
  pointer-events: none;
}
.mapa-inset { fill: none; stroke: var(--borde); stroke-dasharray: 2 2; }
.rejilla-2 { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .mapa-par { grid-template-columns: 1fr; }
  .mapa-caja { max-width: 100%; }
}
@media (max-width: 640px) { .rejilla-2 { grid-template-columns: 1fr; } }

/* ---------- Accesibilidad y usabilidad transversales ----------
   Van al final y por separado a propósito: no son de ningún bloque
   concreto, se aplican a todo el panel. */

/* Foco visible en TODO lo que se puede enfocar. Había anillo de foco en
   campos sueltos —el buscador, los comentarios— pero no como regla, así que
   navegando con el tabulador no se veía dónde estabas en las pestañas ni en
   los chips de periodo. `:focus-visible` y no `:focus` para que no salga al
   hacer clic con el ratón, solo cuando de verdad se navega con teclado. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--marca-verde);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Volver arriba. Abajo a la derecha, fuera del camino, y solo cuando ya se
   ha bajado lo suficiente para que haga falta. */
.volver-arriba {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--superficie-2);
  color: var(--texto-2); font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s ease;
}
.volver-arriba.visible { opacity: 1; visibility: visible; }
.volver-arriba:hover { color: var(--acento); border-color: var(--acento); }
@media print { .volver-arriba { display: none !important; } }

/* Tablas anchas en móvil. Todas las celdas van con `white-space: nowrap`, así
   que muchas tablas se desplazan de lado — y no había ninguna pista de que se
   pudiera. El degradado del borde derecho dice que hay más. */
@media (max-width: 700px) {
  .tabla-env {
    background:
      linear-gradient(to right, var(--superficie) 30%, transparent),
      linear-gradient(to left, var(--superficie) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.13), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.13), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Quien ha pedido menos animación en su sistema operativo ya ha dicho lo que
   quiere; no hay que volver a preguntárselo. El desplazamiento suave lo
   desactiva también app.js, porque scrollTo({behavior}) no lo mira. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Centinela del botón «volver arriba»: un punto sin tamaño en lo alto del
   documento. Lo observa app.js para saber si ya se ha bajado lo suficiente,
   en vez de escuchar cada píxel de scroll. */
.centinela-arriba { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------------------------------------------------------------
   Etiquetas de pallet: contenido con varias referencias

   Un pallet puede llevar varios SKU, y con cajas de distinta cantidad
   cada uno. El formulario pasa a ser una lista de líneas; la etiqueta
   mantiene el diseño de siempre cuando hay una sola —que es el caso
   habitual y el que se lee de lejos— y monta una tabla cuando hay más.
   --------------------------------------------------------------- */
.et-lineas { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.et-linea {
  display: grid;
  grid-template-columns: 8rem 1fr 5rem 5.5rem auto auto;
  gap: 10px; align-items: end;
}
.et-linea .form-campo { margin: 0; min-width: 0; }
.et-subtotal {
  font-variant-numeric: tabular-nums; font-size: .82rem;
  color: var(--tinta-suave); white-space: nowrap; padding-bottom: .55rem;
  min-width: 5.5rem; text-align: right;
}
.et-quitar {
  border: 1px solid var(--linea); background: transparent; color: var(--tinta-suave);
  border-radius: 8px; width: 2rem; height: 2.3rem; font-size: 1.1rem; line-height: 1;
  cursor: pointer; margin-bottom: .2rem;
}
.et-quitar:hover { border-color: var(--negativo); color: var(--negativo); }
.et-lineas-pie { display: flex; gap: 8px; margin-bottom: 10px; }

@media (max-width: 720px) {
  .et-linea { grid-template-columns: 1fr 1fr; }
  .et-linea .et-col-desc { grid-column: 1 / -1; }
  .et-subtotal { text-align: left; padding-bottom: 0; }
}

/* La tabla dentro de la etiqueta impresa */
.etiqueta .et-tabla {
  width: 100%; border-collapse: collapse;
  font-size: calc(var(--et-tabla, 3.1) * 1mm);
  margin-top: 1.2mm;
}
.etiqueta .et-tabla th {
  text-align: left; font-size: .8em; letter-spacing: .06em;
  border-bottom: .4mm solid #000; padding: .6mm .8mm .6mm 0;
}
.etiqueta .et-tabla td {
  padding: .7mm .8mm .7mm 0; border-bottom: .2mm solid #999;
  vertical-align: top;
}
.etiqueta .et-tabla tr:last-child td { border-bottom: none; }
.etiqueta .et-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.etiqueta .et-tabla .et-t-sku { font-weight: 700; white-space: nowrap; }