/* ============================================================
   Mesa de Ayuda · Grupo QBK
   Sistema de tickets — interfaz de producto.

   Criterio: base neutra y sobria; el color de marca aparece solo
   donde aporta (acción principal, elemento activo, identidad de la
   empresa). Nada de fondos teñidos ni degradados llamativos.
   ============================================================ */

/* ---------- 1. Fundamentos ---------- */
:root {
  /* Identidad de la empresa activa (la inyecta el layout) */
  --marca: #01717F;
  --marca-legible: #01717F;
  --marca-suave: #E6F1F2;
  --acento: #02A984;

  /* Escala neutra: la base de toda la interfaz */
  --n0:  #FFFFFF;
  --n25: #FCFCFD;
  --n50: #F7F8FA;
  --n100:#F1F2F5;
  --n150:#E8EAEF;
  --n200:#DFE2E8;
  --n300:#C6CBD4;
  --n400:#9AA1AE;
  --n500:#6E7683;
  --n600:#525965;
  --n700:#3B424D;
  --n800:#272C35;
  --n900:#171B21;
  --n950:#0E1116;

  /* Superficies y texto */
  --fondo: var(--n50);
  --superficie: var(--n0);
  --superficie-2: var(--n25);
  --borde: var(--n150);
  --borde-fuerte: var(--n200);
  --texto: var(--n800);
  --texto-fuerte: var(--n900);
  --texto-suave: var(--n500);
  --texto-tenue: var(--n400);

  /* Panel lateral: profundo, con la marca al fondo */
  --nav-fondo: #14171D;
  --nav-borde: rgba(255,255,255,.09);
  --nav-texto: #A8AFBD;
  --nav-texto-alto: #FFFFFF;
  --nav-activo: rgba(255,255,255,.09);

  /* Estados */
  --ok: #0E7C5A;      --ok-fondo: #E7F5EF;  --ok-borde: #B7E3D0;
  --aviso: #9A6212;   --aviso-fondo: #FDF3E4; --aviso-borde: #F0DCB6;
  --peligro: #B3261E; --peligro-fondo: #FCECEA; --peligro-borde: #F3C9C4;
  --dato: #2C5AA0;    --dato-fondo: #ECF2FB; --dato-borde: #C6D9F2;

  /* Ritmo */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  /* Formas: radios contenidos, no redondeados en exceso */
  --r1: 6px; --r2: 8px; --r3: 10px; --r4: 12px; --rf: 999px;

  /* Profundidad: sombras muy sutiles, el borde hace el trabajo */
  --s1: 0 1px 2px rgba(16,24,40,.05);
  --s2: 0 2px 4px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --s3: 0 8px 20px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);

  /* Tipografía */
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t11: 11px; --t12: 12px; --t13: 13px; --t14: 14px;
  --t16: 16px; --t18: 18px; --t22: 22px; --t28: 28px;

  --rapido: .14s cubic-bezier(.4,0,.2,1);
}

/* ---------- 1b. Variantes de apariencia ----------
   Se eligen desde el panel de la barra lateral y se recuerdan en el
   navegador. Cambian solo la piel: ninguna afecta al contenido. */

/* Barra lateral clara: la interfaz se vuelve un solo plano continuo. */
html[data-barra="clara"] {
  --nav-fondo: var(--n25);
  --nav-borde: var(--n150);
  --nav-texto: var(--n600);
  --nav-texto-alto: var(--n900);
  --nav-activo: var(--n100);
}
html[data-barra="clara"] .selector-logo { border: 1px solid var(--n150); }
html[data-barra="clara"] .selector-interna { background: var(--n150); color: var(--n600); }
html[data-barra="clara"] .selector-op.todas { background: var(--n50); }

/* Barra con el color de la empresa activa. */
html[data-barra="marca"] {
  --nav-fondo: var(--marca);
  --nav-borde: rgba(255,255,255,.16);
  --nav-texto: rgba(255,255,255,.78);
  --nav-texto-alto: #FFFFFF;
  --nav-activo: rgba(255,255,255,.15);
}
html[data-barra="marca"] .nav-lista a.activo::before { background: #fff; }
html[data-barra="marca"] .selector-op.activa { border-color: #fff; }
html[data-barra="marca"] .selector-check { background: #fff; color: var(--marca); }
html[data-barra="marca"] .selector-interna { background: rgba(0,0,0,.25); color: #fff; }
html[data-barra="marca"] .nav-avatar { background: #fff; color: var(--marca); }

/* Densidad compacta: más filas visibles sin desplazarse. */
html[data-densidad="compacta"] {
  --e3: 9px; --e4: 12px; --e5: 15px; --e6: 18px; --e8: 24px;
  --t13: 12.5px; --t14: 13px;
}
html[data-densidad="compacta"] td { padding: 7px var(--e4); }
html[data-densidad="compacta"] .barra { height: 48px; }
html[data-densidad="compacta"] .kpi { padding: var(--e3); }
html[data-densidad="compacta"] .kpi .val { font-size: 22px; }
html[data-densidad="compacta"] .nav-lista a { padding: 6px 10px; }
html[data-densidad="compacta"] .selector-logo { min-height: 54px; }
html[data-densidad="compacta"] .selector-logo img { max-height: 36px; }
html[data-densidad="compacta"] .tarjeta { padding: 8px 9px; }

/* Esquinas marcadas: aire más técnico, menos redondez. */
html[data-esquinas="rectas"] {
  --r1: 3px; --r2: 4px; --r3: 5px; --r4: 6px;
}

/* ---------- 2. Tema oscuro ---------- */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0C0F13;
  --superficie: #141920;
  --superficie-2: #1A2028;
  --borde: #242B35;
  --borde-fuerte: #2F3742;
  --texto: #E3E7EC;
  --texto-fuerte: #F5F7FA;
  --texto-suave: #98A2B3;
  --texto-tenue: #6B7480;
  --nav-fondo: #0A0D11;
  --nav-borde: #1B2029;
  --nav-activo: #181D25;
  --marca-suave: rgba(255,255,255,.06);
  --ok: #4ADE9E;      --ok-fondo: #0E2A20;  --ok-borde: #1C4536;
  --aviso: #F0BE6B;   --aviso-fondo: #2C2110; --aviso-borde: #4A3818;
  --peligro: #F98F86; --peligro-fondo: #2C1512; --peligro-borde: #4A241F;
  --dato: #8FB6F0;    --dato-fondo: #14202F; --dato-borde: #23364F;
  --s1: 0 1px 2px rgba(0,0,0,.4);
  --s2: 0 2px 6px rgba(0,0,0,.45);
  --s3: 0 10px 28px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #0C0F13; --superficie: #141920; --superficie-2: #1A2028;
    --borde: #242B35; --borde-fuerte: #2F3742;
    --texto: #E3E7EC; --texto-fuerte: #F5F7FA; --texto-suave: #98A2B3; --texto-tenue: #6B7480;
    --nav-fondo: #0A0D11; --nav-borde: #1B2029; --nav-activo: #181D25;
    --marca-suave: rgba(255,255,255,.06);
    --ok: #4ADE9E; --ok-fondo: #0E2A20; --ok-borde: #1C4536;
    --aviso: #F0BE6B; --aviso-fondo: #2C2110; --aviso-borde: #4A3818;
    --peligro: #F98F86; --peligro-fondo: #2C1512; --peligro-borde: #4A241F;
    --dato: #8FB6F0; --dato-fondo: #14202F; --dato-borde: #23364F;
  }
}

/* Las variantes de barra se reafirman aquí porque el tema oscuro
   redefine los mismos tokens y, por orden, se impondría. */
html[data-tema="oscuro"][data-barra="clara"],
html[data-barra="clara"] { --nav-fondo: var(--n25); --nav-borde: var(--n150);
  --nav-texto: var(--n600); --nav-texto-alto: var(--n900); --nav-activo: var(--n100); }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"])[data-barra="clara"] {
    --nav-fondo: var(--superficie-2); --nav-borde: var(--borde);
    --nav-texto: var(--texto-suave); --nav-texto-alto: var(--texto-fuerte);
    --nav-activo: var(--borde);
  }
}
html[data-tema="oscuro"][data-barra="clara"] {
  --nav-fondo: var(--superficie-2); --nav-borde: var(--borde);
  --nav-texto: var(--texto-suave); --nav-texto-alto: var(--texto-fuerte);
  --nav-activo: var(--borde);
}
html[data-tema="oscuro"][data-barra="marca"],
html[data-barra="marca"] {
  --nav-fondo: var(--marca); --nav-borde: rgba(255,255,255,.16);
  --nav-texto: rgba(255,255,255,.78); --nav-texto-alto: #FFFFFF;
  --nav-activo: rgba(255,255,255,.15);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fuente);
  font-size: var(--t14);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

a { color: var(--marca-legible); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 26px; font-weight: 730; letter-spacing: -.03em; color: var(--texto-fuerte); }
h2 { font-size: var(--t16); font-weight: 670; letter-spacing: -.015em; color: var(--texto-fuerte); }
h3 { font-size: var(--t14); font-weight: 620; color: var(--texto-fuerte); }

.ico { flex-shrink: 0; display: block; }

:focus-visible {
  outline: 2px solid var(--marca-legible);
  outline-offset: 2px; border-radius: var(--r1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--superficie); color: var(--texto);
  padding: var(--e3) var(--e4); border-radius: 0 0 var(--r2) 0;
  box-shadow: var(--s3); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Armazón ---------- */
.layout { display: flex; min-height: 100vh; }

/* Barra lateral: profundidad con el color de marca al fondo */
.nav {
  width: 240px; flex: 0 0 240px;
  background:
    radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--marca) 55%, transparent) 0%, transparent 62%),
    linear-gradient(178deg, #1B2029 0%, var(--nav-fondo) 55%);
  color: var(--nav-texto);
  border-right: 1px solid var(--nav-borde);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
html[data-barra="clara"] .nav, html[data-barra="marca"] .nav { background: var(--nav-fondo); }
html[data-barra="marca"] .nav {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(255,255,255,.16) 0%, transparent 60%),
    var(--marca);
}
/* ---- Selector de empresa con logos ---- */
.selector { border-bottom: 1px solid var(--nav-borde); }
.selector > summary { list-style: none; }
.selector > summary::-webkit-details-marker { display: none; }

.selector-actual { display: block; padding: var(--e4) var(--e3) var(--e3); }

/* El logo va sobre blanco: las marcas se dibujaron para fondo claro.
   Se muestra ancho para que el nombre que llevan dentro se lea. */
.selector-logo {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--r2); padding: 10px 12px;
  min-height: 52px; transition: box-shadow var(--rapido);
}
.selector-logo img { max-width: 100%; max-height: 46px; object-fit: contain; display: block; }
.selector-logo { min-height: 66px; }
.selector-logo.chico { min-height: 48px; padding: 8px 10px; }
.selector-logo.chico img { max-height: 32px; }
.selector-inic {
  font-size: var(--t13); font-weight: 800; letter-spacing: .04em;
  color: var(--nav-fondo); line-height: 1.3; text-align: center;
}

/* Vista global: las tres marcas apiladas dentro de la misma tarjeta. */
.selector-todas { display: flex; flex-direction: column; gap: 7px; width: 100%; align-items: center; }
.selector-todas img { max-width: 78%; max-height: 15px; object-fit: contain; display: block; }

.selector-pie {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nav-texto); opacity: .6;
}
.selector-actual:hover .selector-pie { opacity: .95; }
.selector-flecha { display: flex; transition: transform var(--rapido); }
.selector[open] .selector-flecha { transform: rotate(90deg); }

.selector-lista {
  padding: 0 var(--e3) var(--e4); display: flex; flex-direction: column; gap: 6px;
}
.selector-op {
  position: relative; display: block; width: 100%;
  background: none; border: 1.5px solid transparent; padding: 0; border-radius: var(--r2);
  cursor: pointer; font-family: inherit; text-align: left;
  color: var(--nav-texto); transition: border-color var(--rapido), opacity var(--rapido);
  opacity: .62;
}
.selector-op:hover { opacity: 1; border-color: var(--nav-texto); }
.selector-op.activa { opacity: 1; border-color: var(--marca); }

.selector-check {
  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--marca); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.selector-interna {
  position: absolute; bottom: 4px; left: 6px; font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--nav-fondo); color: var(--nav-texto);
  padding: 1px 5px; border-radius: 3px;
}

/* La opción de ver todas no tiene logo: va como texto. */
.selector-op.todas {
  opacity: 1; border-color: var(--nav-borde); padding: 8px 10px;
  background: var(--nav-activo);
}
.selector-op.todas:hover { border-color: var(--nav-texto); }
.selector-op.todas.activa { border-color: var(--marca); }
.selector-op-nom { font-size: var(--t12); font-weight: 550; color: var(--nav-texto); }
.selector-op.todas.activa .selector-op-nom { color: var(--nav-texto-alto); }

.nav-seccion {
  font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--nav-texto); opacity: .5; padding: 0 var(--e4);
  margin: var(--e5) 0 var(--e2);
}

.nav-lista { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--e2); }
.nav-lista a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r1);
  color: var(--nav-texto); font-size: var(--t13); font-weight: 500;
  text-decoration: none; position: relative;
  transition: background var(--rapido), color var(--rapido);
}
.nav-lista a:hover { background: var(--nav-activo); color: var(--nav-texto-alto); text-decoration: none; }
/* El elemento activo se llena con la marca: no hay duda de dónde estás. */
.nav-lista a.activo {
  background: linear-gradient(135deg, var(--marca), color-mix(in srgb, var(--marca) 74%, #000));
  color: #fff; font-weight: 640;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--marca) 35%, transparent);
}
.nav-lista a.activo .ico { opacity: 1; }
html[data-barra="marca"] .nav-lista a.activo {
  background: rgba(255,255,255,.18); box-shadow: none;
}

/* Selector de empresa */
.nav-empresas { padding: 0 var(--e2); display: flex; flex-direction: column; gap: 1px; }
.emp-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; color: var(--nav-texto);
  padding: 7px 10px; border-radius: var(--r1); cursor: pointer;
  font-family: inherit; font-size: var(--t12); font-weight: 500; text-align: left;
  transition: background var(--rapido), color var(--rapido);
}
.emp-btn:hover { background: var(--nav-activo); color: var(--nav-texto-alto); }
.emp-btn.activa { background: var(--nav-activo); color: var(--nav-texto-alto); font-weight: 600; }
.emp-btn[disabled] { cursor: default; }
.emp-btn[disabled]:hover { background: none; color: var(--nav-texto); }
.emp-btn.activa[disabled]:hover { background: var(--nav-activo); color: var(--nav-texto-alto); }
.emp-punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.emp-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-btn .ico { opacity: .55; }

/* Pie de la barra lateral */
.nav-pie { margin-top: auto; padding: var(--e3) var(--e2) var(--e4); border-top: 1px solid var(--nav-borde); }
.nav-usuario { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.nav-avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r1);
  background: var(--marca); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 650; font-size: var(--t12);
}
.nav-usuario .quien { min-width: 0; }
.nav-nombre {
  font-size: var(--t13); font-weight: 600; color: var(--nav-texto-alto);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-rol { font-size: var(--t11); color: var(--nav-texto); opacity: .7; display: block; }
.nav-accion {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--nav-texto);
  padding: 7px 10px; border-radius: var(--r1); cursor: pointer;
  font-family: inherit; font-size: var(--t12); font-weight: 500; text-align: left;
  text-decoration: none; transition: background var(--rapido), color var(--rapido);
}
.nav-accion:hover { background: var(--nav-activo); color: var(--nav-texto-alto); text-decoration: none; }

/* ---- Panel de apariencia ---- */
.apariencia > summary { list-style: none; }
.apariencia > summary::-webkit-details-marker { display: none; }
.apariencia[open] .nav-accion { background: var(--nav-activo); color: var(--nav-texto-alto); }
.apariencia-panel {
  padding: var(--e2) 10px var(--e3); display: flex; flex-direction: column; gap: var(--e3);
}
.apar-grupo { display: flex; flex-direction: column; gap: 5px; }
.apar-eti {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nav-texto); opacity: .6;
}
.apar-ops { display: flex; gap: 4px; }
.apar-op {
  flex: 1; min-width: 0; background: none; color: var(--nav-texto);
  border: 1px solid var(--nav-borde); border-radius: var(--r1);
  padding: 5px 4px; font-family: inherit; font-size: 10.5px; font-weight: 600;
  cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.apar-op:hover { background: var(--nav-activo); color: var(--nav-texto-alto); }
.apar-op[aria-pressed="true"] {
  background: var(--nav-texto-alto); color: var(--nav-fondo);
  border-color: var(--nav-texto-alto);
}

/* Zona de trabajo */
.obra { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Barra superior de contenido */
.barra {
  height: 58px; flex-shrink: 0; background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: var(--e4);
  padding: 0 var(--e6); position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 4px 16px rgba(16,24,40,.03);
}
/* Filo de color de la empresa: identifica la pantalla sin gritar. */
.barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--marca), color-mix(in srgb, var(--marca) 25%, transparent) 55%, transparent);
}
.barra-titulo { font-size: var(--t14); font-weight: 680; color: var(--texto-fuerte); letter-spacing: -.01em; }
.barra-ruta { font-size: var(--t12); color: var(--texto-suave); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.barra-empresa {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--t12);
  font-weight: 550; color: var(--texto-suave); padding: 5px 10px;
  border: 1px solid var(--borde); border-radius: var(--rf); background: var(--superficie-2);
}

.lienzo { padding: var(--e6); max-width: 1400px; width: 100%; }
.container { max-width: 420px; margin: 0 auto; padding: var(--e6); }

.encabezado {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5);
}
.encabezado .sub { color: var(--texto-suave); font-size: var(--t13); margin-top: 3px; }
.encabezado .acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }

.detalle-cols { display: grid; grid-template-columns: 1fr; gap: var(--e4); align-items: start; }
@media (min-width: 1120px) {
  .detalle-cols { grid-template-columns: minmax(0,1.65fr) minmax(300px,1fr); }
  .detalle-cols .col-lateral { position: sticky; top: 76px; }
}
.col-principal, .col-lateral { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }

footer { color: var(--texto-tenue); font-size: var(--t12); padding: var(--e8) var(--e6) var(--e5); }

/* ---------- 5. Piezas ---------- */
.card {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r3); box-shadow: var(--s1);
}
.card-pad { padding: var(--e5); }
.card-cab {
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: var(--e2); justify-content: space-between;
}
.card-titulo {
  font-size: var(--t14); font-weight: 620; color: var(--texto-fuerte);
  display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e4);
}
.card-cab .card-titulo { margin: 0; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--marca) 88%, #fff), var(--marca));
  color: #fff; border: 1px solid transparent;
  padding: 9px 16px; border-radius: var(--r2);
  font-family: inherit; font-size: var(--t13); font-weight: 640; line-height: 1.35;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--marca) 30%, transparent);
  transition: filter var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
.btn:hover {
  filter: brightness(1.08); transform: translateY(-1px); text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 38%, transparent);
}
.btn:active { transform: translateY(0); }
.btn-peligro { box-shadow: 0 2px 8px color-mix(in srgb, var(--peligro) 30%, transparent); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 6px 11px; font-size: var(--t12); }
.btn-peligro { background: var(--peligro); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte);
  padding: 8px 14px; border-radius: var(--r1); font-family: inherit;
  font-size: var(--t13); font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido);
}
.btn-ghost:hover { background: var(--n50); border-color: var(--n300); text-decoration: none; }
html[data-tema="oscuro"] .btn-ghost:hover { background: var(--superficie-2); }
.btn-plano {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--texto-suave); font-family: inherit; font-size: var(--t13);
  padding: 6px 8px; border-radius: var(--r1); cursor: pointer;
}
.btn-plano:hover { background: var(--n100); color: var(--texto); text-decoration: none; }
html[data-tema="oscuro"] .btn-plano:hover { background: var(--superficie-2); }

/* Tablas de datos */
.tabla-card { overflow: hidden; padding: 0; }
table { width: 100%; border-collapse: collapse; }
th {
  background: var(--superficie-2); text-align: left;
  padding: 9px var(--e4); font-size: var(--t11); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave);
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
td {
  padding: 11px var(--e4); font-size: var(--t13);
  border-bottom: 1px solid var(--borde); vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--rapido); }
tbody tr:hover { background: var(--superficie-2); }
.num-col { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: var(--t12); color: var(--texto-suave); }
td .enlace-fila { color: var(--texto-fuerte); font-weight: 560; }
td .enlace-fila:hover { color: var(--marca-legible); }

/* Estados: pastilla con punto. El color identifica de un vistazo. */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t11); font-weight: 650; white-space: nowrap;
  padding: 3px 10px 3px 8px; border-radius: var(--rf);
  border: 1px solid transparent; letter-spacing: .01em;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.estado-nuevo, .estado-solicitada {
  background: var(--n100); color: var(--n600); border-color: var(--n200);
}
.estado-abierto, .estado-comprada {
  background: var(--dato-fondo); color: var(--dato); border-color: var(--dato-borde);
}
.estado-pendiente {
  background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde);
}
.estado-resuelto, .estado-aprobada {
  background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde);
}
.estado-cerrado, .estado-recibida {
  background: var(--n100); color: var(--n600); border-color: var(--n200);
}
.estado-rechazada {
  background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde);
}
html[data-tema="oscuro"] .estado-nuevo, html[data-tema="oscuro"] .estado-solicitada,
html[data-tema="oscuro"] .estado-cerrado, html[data-tema="oscuro"] .estado-recibida {
  background: var(--superficie-2); color: var(--texto-suave); border-color: var(--borde);
}

/* Etiquetas */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r1); font-size: var(--t11); font-weight: 600;
  background: var(--n100); color: var(--texto-suave); border: 1px solid var(--borde);
  white-space: nowrap;
}
.tag-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
.tag-aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); }
.tag-peligro { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }
.tag-dato { background: var(--dato-fondo); color: var(--dato); border-color: var(--dato-borde); }

.prio-baja { color: var(--texto-tenue); }
.prio-media { color: var(--texto-suave); }
.prio-alta { color: var(--aviso); font-weight: 600; }
.prio-urgente { color: var(--peligro); font-weight: 650; }

/* Indicadores: la cifra manda, con una franja de color que la ancla. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px,1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.kpi {
  position: relative; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r4);
  padding: var(--e4) var(--e4) var(--e4) var(--e5); display: block; color: inherit;
  box-shadow: var(--s1);
  transition: transform var(--rapido), box-shadow var(--rapido), border-color var(--rapido);
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--marca), color-mix(in srgb, var(--marca) 45%, transparent));
}
a.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--marca) 18%, transparent), var(--s2);
  border-color: color-mix(in srgb, var(--marca) 35%, var(--borde));
  text-decoration: none;
}
.kpi .val {
  font-size: 32px; font-weight: 720; letter-spacing: -.035em;
  color: var(--texto-fuerte); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.kpi .eti {
  font-size: var(--t11); color: var(--texto-suave); margin-top: 6px; font-weight: 620;
  letter-spacing: .05em; text-transform: uppercase;
}
.kpi .nota { font-size: var(--t11); color: var(--texto-tenue); margin-top: 6px; }

/* El primero de cada fila se llena con la marca: ancla visual de la pantalla. */
.kpis .kpi:first-child {
  background: linear-gradient(145deg, var(--marca), color-mix(in srgb, var(--marca) 72%, #000));
  border-color: transparent;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--marca) 30%, transparent);
}
.kpis .kpi:first-child::before { display: none; }
.kpis .kpi:first-child .val { color: #fff; }
.kpis .kpi:first-child .eti { color: rgba(255,255,255,.82); }
.kpis .kpi:first-child .nota { color: rgba(255,255,255,.62); }

.kpi.critico::before { background: linear-gradient(180deg, var(--peligro), color-mix(in srgb, var(--peligro) 45%, transparent)); }
.kpi.critico .val { color: var(--peligro); }
.kpi.critico { border-color: var(--peligro-borde); }
a.kpi.critico:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--peligro) 22%, transparent), var(--s2); }

/* Avisos */
.avisos { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: var(--r2); font-size: var(--t13);
  border: 1px solid transparent;
}
.aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
.aviso-mal { background: var(--peligro-fondo); color: var(--peligro); border-color: var(--peligro-borde); }

/* Formularios */
input[type=text], input[type=search], input[type=number], input[type=date],
input[type=password], input[type=email], input[type=file], input[type=color], select, textarea {
  padding: 8px 11px; border-radius: var(--r1);
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--texto); font-family: inherit; font-size: var(--t13);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input::placeholder, textarea::placeholder { color: var(--texto-tenue); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent);
}
.campo { margin-bottom: var(--e4); }
.campo > label, .form-card label {
  display: block; font-size: var(--t12); font-weight: 580; color: var(--texto);
  margin-bottom: 5px;
}
.form-card { padding: var(--e5); }
.form-card p { margin-bottom: var(--e4); }
.form-card input[type=text], .form-card input[type=password], .form-card input[type=number],
.form-card input[type=email], .form-card textarea, .form-card select { width: 100%; }
.form-card input[type=checkbox] { width: auto; margin-right: 6px; }
.helptext, .form-card .helptext {
  display: block; font-size: var(--t12); color: var(--texto-suave); margin-top: 5px;
  font-weight: 400;
}
.errorlist { list-style: none; color: var(--peligro); font-size: var(--t13); margin-bottom: 8px; }
.form-acciones {
  display: flex; align-items: center; gap: var(--e2);
  margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--borde);
}
.filtros {
  display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center;
  padding: var(--e3) var(--e4); margin-bottom: var(--e4);
}
.filtros input[type=search] { flex: 1; min-width: 200px; }
.filtros select { font-size: var(--t12); }
.field-row { display: flex; gap: var(--e2); align-items: center; margin: var(--e3) 0; flex-wrap: wrap; }
.field-row label { font-size: var(--t13); color: var(--texto-suave); min-width: 92px; margin: 0; }

/* Estado vacío */
.vacio { padding: var(--e10) var(--e5); text-align: center; }
.vacio .icono {
  width: 44px; height: 44px; border-radius: var(--r3); background: var(--n100);
  color: var(--texto-suave); display: inline-flex; align-items: center;
  justify-content: center; margin-bottom: var(--e3);
}
html[data-tema="oscuro"] .vacio .icono { background: var(--superficie-2); }
.vacio .txt { color: var(--texto-suave); font-size: var(--t13); margin-bottom: var(--e4); }

/* Detalle */
.det-cab { padding: var(--e5); border-bottom: 1px solid var(--borde); }
.det-cab .fila { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e4); flex-wrap: wrap; }
.det-ref { font-family: var(--mono); font-size: var(--t12); color: var(--texto-suave); letter-spacing: .02em; }
.det-titulo { font-size: var(--t18); font-weight: 620; color: var(--texto-fuerte); margin-top: 4px; letter-spacing: -.01em; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); border-top: 1px solid var(--borde); }
.meta-grid .meta { padding: var(--e3) var(--e5); border-right: 1px solid var(--borde); }
.meta-grid .meta:last-child { border-right: none; }
.meta .k { font-size: var(--t11); color: var(--texto-suave); font-weight: 550; }
.meta .v { font-size: var(--t13); font-weight: 570; color: var(--texto-fuerte); margin-top: 3px; }
.meta .v.vencido { color: var(--peligro); }
.texto-largo { white-space: pre-wrap; line-height: 1.6; font-size: var(--t13); }

/* Conversación */
.comentario { display: flex; gap: var(--e3); padding: var(--e4) 0; border-bottom: 1px solid var(--borde); }
.comentario:last-of-type { border-bottom: none; }
.avatar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r1);
  background: var(--n200); color: var(--texto); display: flex; align-items: center;
  justify-content: center; font-weight: 650; font-size: var(--t12);
}
html[data-tema="oscuro"] .avatar { background: var(--superficie-2); }
.comentario .cabecera { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comentario .autor { font-size: var(--t13); font-weight: 600; color: var(--texto-fuerte); }
.comentario .fecha { font-size: var(--t11); color: var(--texto-tenue); }
.comentario .cuerpo { font-size: var(--t13); line-height: 1.6; margin-top: 5px; white-space: pre-wrap; }

/* Cronología */
.crono { list-style: none; }
.crono li { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; font-size: var(--t12); }
.crono .marca {
  width: 22px; height: 22px; border-radius: 50%; background: var(--n100);
  color: var(--texto-suave); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
html[data-tema="oscuro"] .crono .marca { background: var(--superficie-2); }
.crono .detalle { flex: 1; min-width: 0; color: var(--texto-suave); }
.crono .detalle strong { color: var(--texto); font-weight: 600; }
.crono .fecha { color: var(--texto-tenue); white-space: nowrap; font-size: var(--t11); }

.lista-simple { list-style: none; }
.lista-simple li {
  padding: 10px 0; border-bottom: 1px solid var(--borde);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e3); font-size: var(--t13);
}
.lista-simple li:last-child { border-bottom: none; }
.lista-simple .fecha { color: var(--texto-tenue); font-size: var(--t11); white-space: nowrap; }

/* Acta de cierre */
.acta { border-color: var(--ok-borde); overflow: hidden; }
.acta-cab {
  padding: var(--e4) var(--e5); background: var(--ok-fondo);
  border-bottom: 1px solid var(--ok-borde); color: var(--ok);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap;
}
.acta-cab .card-titulo { color: var(--ok); margin: 0; }
.acta-bloque { padding: var(--e4) var(--e5) 0; }
.acta-k { font-size: var(--t11); color: var(--texto-suave); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.acta-v {
  font-size: var(--t13); line-height: 1.6; padding: 11px 14px;
  background: var(--superficie-2); border-left: 2px solid var(--borde-fuerte);
  border-radius: 0 var(--r1) var(--r1) 0;
}
.acta-bloque.exito .acta-v { border-left-color: var(--ok); }
.acta-bloque.aviso .acta-v { border-left-color: var(--aviso); background: var(--aviso-fondo); }
.acta-tiempo {
  margin: var(--e4) var(--e5) 0; padding: 11px 14px; font-size: var(--t13);
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r2);
  display: flex; align-items: center; gap: 8px;
}
.acta-cierre {
  padding: var(--e4) var(--e5); margin-top: var(--e4);
  border-top: 1px solid var(--borde); color: var(--texto-suave);
  font-size: var(--t13); line-height: 1.65;
}

/* Zona sensible */
.zona-peligro { border-color: var(--peligro-borde); }
.zona-peligro strong { color: var(--peligro); font-size: var(--t13); }
.zona-peligro p { color: var(--texto-suave); font-size: var(--t12); margin: 5px 0 var(--e3); }

/* Administración */
.muestra-color { width: 18px; height: 18px; border-radius: var(--r1); border: 1px solid var(--borde); display: inline-block; flex-shrink: 0; }
.chip-marca {
  width: 26px; height: 26px; border-radius: var(--r1); flex-shrink: 0;
  background: var(--chip, var(--marca)); color: var(--chip-texto, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.chip-logo { width: 28px; height: 28px; border-radius: var(--r1); object-fit: contain; background: #fff; flex-shrink: 0; padding: 2px; border: 1px solid var(--borde); }
.previa-empresa {
  --p: #01717F; --s: #02A984; --pt: #fff;
  display: block; border: 1px solid var(--borde); border-radius: var(--r2); overflow: hidden; font-weight: 400;
}
.previa-barra { background: var(--p); color: var(--pt); padding: 11px var(--e4); display: flex; align-items: center; gap: 10px; }
.previa-marca { width: 28px; height: 28px; border-radius: var(--r1); background: var(--pt); color: var(--p); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t11); }
.previa-nombre { font-weight: 600; font-size: var(--t13); }
.previa-cuerpo { background: var(--superficie-2); padding: var(--e4); display: flex; align-items: center; gap: var(--e3); }
.previa-boton { background: var(--p); color: var(--pt); padding: 7px 14px; border-radius: var(--r1); font-size: var(--t12); font-weight: 580; }
.previa-acento { height: 5px; flex: 1; border-radius: 3px; background: var(--s); }

.zona-logo {
  display: flex; gap: var(--e4); align-items: flex-start; padding: var(--e4);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r2);
  background: var(--superficie-2); font-weight: 400;
}
.logo-actual {
  width: 68px; height: 68px; flex-shrink: 0; border-radius: var(--r2);
  background: #fff; border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px;
}
.logo-actual img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-controles { flex: 1; min-width: 0; }
.logo-controles input[type=file] { width: 100%; }

/* ---------- Tablero por estados ---------- */
.tablero {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: var(--e3); align-items: start; overflow-x: auto; padding-bottom: var(--e3);
}
.col-tablero {
  --col-color: var(--n400);
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r4); display: flex; flex-direction: column; min-width: 0;
  overflow: hidden; box-shadow: var(--s1);
}
/* Cada columna lleva arriba una franja del color de su estado. */
.col-tablero[data-estado="abierto"], .col-tablero[data-estado="comprada"] { --col-color: var(--dato); }
.col-tablero[data-estado="pendiente"] { --col-color: var(--aviso); }
.col-tablero[data-estado="resuelto"], .col-tablero[data-estado="aprobada"] { --col-color: var(--ok); }
.col-tablero[data-estado="rechazada"] { --col-color: var(--peligro); }
.col-tablero[data-estado="cerrado"], .col-tablero[data-estado="recibida"] { --col-color: var(--n300); }

.col-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 11px var(--e3); border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  border-top: 3px solid var(--col-color);
}
.col-nom {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t12); font-weight: 700; color: var(--texto-fuerte);
  letter-spacing: .02em; text-transform: uppercase;
}
.col-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--col-color); flex-shrink: 0; }
.col-cuenta {
  font-size: var(--t11); font-weight: 700; color: #fff;
  background: var(--col-color); border-radius: var(--rf);
  padding: 2px 9px; font-variant-numeric: tabular-nums; min-width: 24px; text-align: center;
}
.col-tablero[data-estado="nuevo"] .col-cuenta,
.col-tablero[data-estado="solicitada"] .col-cuenta,
.col-tablero[data-estado="cerrado"] .col-cuenta,
.col-tablero[data-estado="recibida"] .col-cuenta { color: var(--n700); }
.col-cuerpo {
  padding: var(--e2); display: flex; flex-direction: column; gap: var(--e2);
  min-height: 90px; transition: background var(--rapido);
}
.col-vacia { color: var(--texto-tenue); font-size: var(--t12); text-align: center; padding: var(--e5) 0; }

/* Destino válido mientras se arrastra */
.col-cuerpo.destino { background: var(--marca-suave); outline: 2px dashed var(--marca); outline-offset: -4px; border-radius: var(--r2); }
/* Destino no permitido por las reglas de transición */
.col-tablero.bloqueada { opacity: .45; }

.tarjeta {
  position: relative; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r3);
  padding: 11px 12px; box-shadow: var(--s1);
  transition: border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
.tarjeta:hover {
  border-color: color-mix(in srgb, var(--marca) 40%, var(--borde));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--marca) 14%, transparent), var(--s2);
  transform: translateY(-1px);
}
.tarjeta[draggable="true"] { cursor: grab; }
.tarjeta.arrastrando { opacity: .4; cursor: grabbing; }
.tarjeta.vencida { border-left: 3px solid var(--peligro); }

.tarjeta-enlace { display: block; text-decoration: none; }
.tarjeta-enlace:hover { text-decoration: none; }
.tarjeta-ref {
  display: block; font-family: var(--mono); font-size: 10px;
  color: var(--texto-tenue); letter-spacing: .02em;
}
.tarjeta-titulo {
  display: block; font-size: var(--t13); font-weight: 570; color: var(--texto-fuerte);
  line-height: 1.35; margin-top: 3px;
}
.tarjeta-enlace:hover .tarjeta-titulo { color: var(--marca-legible); }
.tarjeta-cat {
  display: inline-block; margin-top: 7px; font-size: 10px; font-weight: 600;
  color: var(--texto-suave); background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--r1); padding: 1px 7px;
}
.tarjeta-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--borde);
}
.tarjeta-av {
  width: 20px; height: 20px; border-radius: 50%; background: var(--marca); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.tarjeta-av.vacia { background: var(--n200); color: var(--texto-tenue); }
html[data-tema="oscuro"] .tarjeta-av.vacia { background: var(--superficie-2); }
.tarjeta-vencida { color: var(--peligro); display: inline-flex; }

/* Aviso flotante al mover una tarjeta */
.aviso-flotante {
  position: fixed; bottom: var(--e5); left: 50%; transform: translateX(-50%);
  background: var(--n900); color: #fff; padding: 10px 18px; border-radius: var(--r2);
  font-size: var(--t13); font-weight: 550; box-shadow: var(--s3); z-index: 60;
  max-width: min(90vw, 460px);
}
.aviso-flotante.mal { background: var(--peligro); }

@media (max-width: 900px) {
  .tablero { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
  .col-cuerpo { min-height: 0; }
}

/* Gráficas */
.graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap: var(--e4); }
.sin-datos { color: var(--texto-tenue); font-size: var(--t13); text-align: center; padding: var(--e10) 0; }

/* Acceso */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--e5); background: var(--fondo); }
.acceso-caja { width: 100%; max-width: 380px; }
.acceso-marca { text-align: center; margin-bottom: var(--e6); }
.acceso-logo {
  width: 54px; height: 54px; border-radius: var(--r3); background: var(--marca); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--t18); letter-spacing: .03em; box-shadow: var(--s2);
}

/* ---------- 6. Utilidades ---------- */
.fila { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.fila-lg { gap: var(--e5); }
.entre { justify-content: space-between; }
.suave { color: var(--texto-suave); }
.tenue { color: var(--texto-tenue); }
.t12 { font-size: var(--t12); } .t13 { font-size: var(--t13); }
.mt2 { margin-top: var(--e2); } .mt4 { margin-top: var(--e4); }
.mb0 { margin-bottom: 0; } .mb4 { margin-bottom: var(--e4); }
.ancho-form { max-width: 620px; }
.ancho-form-sm { max-width: 480px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.volver { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-suave); font-size: var(--t12); margin-bottom: var(--e3); }
.volver:hover { color: var(--texto); text-decoration: none; }

/* ---------- 7. Pantallas estrechas ---------- */
td[data-label] .lbl-movil { display: none; }

@media (max-width: 1000px) {
  .layout { flex-direction: column; }
  .nav {
    width: auto; flex: 0 0 auto; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--nav-borde);
  }
  .nav-marca { display: flex; align-items: center; gap: var(--e4); border-bottom: none; padding-bottom: var(--e3); }
  .nav-logo { min-height: 40px; }
  .nav-producto { margin: 0; }
  .nav-lista, .nav-empresas { flex-direction: row; flex-wrap: wrap; }
  .nav-lista a { flex: 0 1 auto; }
  .nav-lista a.activo::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .nav-pie { margin-top: var(--e3); }
  .nav-pie form, .nav-pie .nav-accion { display: inline-flex; width: auto; }
  .barra { padding: 0 var(--e4); }
  .lienzo { padding: var(--e4); }
}

@media (max-width: 720px) {
  .barra { height: auto; padding: var(--e3) var(--e4); flex-wrap: wrap; }
  .kpis { grid-template-columns: repeat(2,1fr); }
  h1 { font-size: var(--t18); }

  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr {
    border: 1px solid var(--borde); border-radius: var(--r2);
    margin-bottom: var(--e2); background: var(--superficie);
  }
  tbody tr:hover { background: var(--superficie); }
  td {
    border: none !important; display: flex; justify-content: space-between;
    align-items: center; gap: var(--e3); padding: 7px var(--e4);
  }
  td[data-label] .lbl-movil {
    display: inline; font-size: var(--t11); color: var(--texto-suave); font-weight: 550;
  }
  .meta-grid .meta { border-right: none; border-bottom: 1px solid var(--borde); }
  .zona-logo { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- 8. Impresión ---------- */
@media print {
  .nav, .barra, footer, .btn, .btn-ghost, .btn-plano, .filtros, .zona-peligro, form { display: none !important; }
  body { background: #fff; color: #000; }
  .layout { display: block; }
  .lienzo { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .detalle-cols { grid-template-columns: 1fr; }
}