/* Portal SAP · Synergy Supplies.
   Tokens de Informes_Correo_Electronico/motor/marca.css (fuente de verdad de la marca). Visby CF solo en títulos y
   etiquetas en mayúsculas (dibuja el 0 como O); cifras, fechas y documentos en Barlow Semi Condensed.
   Sin estilos en línea ni recursos externos: la CSP es style-src 'self'. */

@font-face { font-family: "Visby CF"; font-weight: 700; font-display: swap; src: url("../marca/fuentes/visby-cf-bold.a3c473f9f746.otf") format("opentype"); }
@font-face { font-family: "Visby CF"; font-weight: 800; font-display: swap; src: url("../marca/fuentes/visby-cf-extrabold.2a630f2dd460.otf") format("opentype"); }
@font-face { font-family: "Visby CF"; font-weight: 900; font-display: swap; src: url("../marca/fuentes/visby-cf-heavy.c0e7edf42e60.otf") format("opentype"); }
@font-face { font-family: "Barlow SC"; font-weight: 400; font-display: swap; src: url("../marca/fuentes/BarlowSemiCondensed-Regular.cfe0d9778b20.ttf") format("truetype"); }
@font-face { font-family: "Barlow SC"; font-weight: 500; font-display: swap; src: url("../marca/fuentes/BarlowSemiCondensed-Medium.1e07a24a70c5.ttf") format("truetype"); }
@font-face { font-family: "Barlow SC"; font-weight: 600; font-display: swap; src: url("../marca/fuentes/BarlowSemiCondensed-SemiBold.033c77a16a15.ttf") format("truetype"); }
@font-face { font-family: "Barlow SC"; font-weight: 700; font-display: swap; src: url("../marca/fuentes/BarlowSemiCondensed-Bold.396b59d3782c.ttf") format("truetype"); }

:root {
  --verde: #00B142;
  --verde-oscuro: #00813A;
  --degradado: linear-gradient(90deg, #20B24C 0%, #8BC63F 55%, #BFD72F 100%);
  --tinta: #050708;
  --tinta-2: #2B3033;
  --gris: #5F676C;          /* algo más oscuro que el del PDF: contraste AA en pantalla */
  --gris-claro: #A7AEB2;
  --linea: #E3E7E9;
  --fondo: #F5F7F6;
  --fondo-app: #EEF1EF;

  --vencido: #C21F30;  --vencido-fondo: #FDECEE;
  --proximo: #9A5F00;  --proximo-fondo: #FFF4DC;
  --a-tiempo: #00753A; --a-tiempo-fondo: #E6F6EC;
  --en-stock: #0B6E79; --en-stock-fondo: #E3F3F4;

  /* Gestión de compras */
  /* 03/11/2026: comprado en amarillo (primer paso) y en aduana en verde (ya viene en camino: casi completo) */
  --comprado: #7A5C00;  --comprado-fondo: #FFEFA8; --comprado-borde: #D9A800; --comprado-icono: #E8B400;
  --aduana: #00753A;    --aduana-fondo: #D5F2DF;   --aduana-borde: #00753A;   --aduana-icono: #00753A;
  /* Comprado a proveedor nacional: mismo verde que En aduana (compra nacional ya hecha) */
  --nacional: var(--aduana); --nacional-fondo: var(--aduana-fondo); --nacional-borde: var(--aduana-borde); --nacional-icono: var(--aduana-icono);
  /* 04/11/2026: En fabricación: el mismo verde, pero SIEMPRE en franjas diagonales verde/transparente (el proceso no está
     cerrado); nunca verde sólido */
  --fabricacion: var(--aduana); --fabricacion-fondo: var(--aduana-fondo); --fabricacion-borde: var(--aduana-borde); --fabricacion-icono: var(--aduana-icono);
  --fabricacion-franjas: repeating-linear-gradient(135deg, var(--fabricacion-fondo) 0 6px, transparent 6px 10px);
  --nuevas: #6A3BA8;    --nuevas-fondo: #EEE5FA;

  --f-titulo: "Visby CF", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Barlow SC", "Segoe UI", system-ui, sans-serif;
  --radio: 8px;
  --menu-ancho: 200px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; font-family: var(--f-texto); font-size: 14.5px; line-height: 1.35; color: var(--tinta-2); background: var(--fondo-app); }
h1, h2, h3 { font-family: var(--f-titulo); color: var(--tinta); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--verde-oscuro); }
:focus-visible { outline: 3px solid #1A73E8; outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; border-radius: 6px; }
.saltar:focus { left: 8px; }
.tenue { color: var(--gris); }
.antetitulo { font-family: var(--f-titulo); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-oscuro); }
.barra-marca { height: 4px; background: var(--degradado); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--f-texto); padding: 9px 14px; border-radius: 7px;
         border: 1px solid var(--linea); background: #fff; color: var(--tinta); cursor: pointer; text-decoration: none; white-space: nowrap; }
.boton:hover { border-color: var(--gris-claro); }
.boton--primario { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; }
.boton--primario:hover { background: #006B30; }
.boton--fantasma { background: transparent; }
.boton--chico { padding: 5px 10px; font-size: 13px; }
.boton--enlace { border: 0; background: none; color: var(--gris); text-decoration: underline; padding: 4px 0; }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.aviso { padding: 10px 14px; border-radius: var(--radio); margin: 0 0 14px; font-weight: 500; }
.aviso--error { background: var(--vencido-fondo); color: var(--vencido); }
.aviso--alerta { background: var(--proximo-fondo); color: var(--proximo); }
.vacio { padding: 22px; text-align: center; border: 1px dashed #CDD3D6; border-radius: var(--radio); color: var(--gris); background: #fff; }

/* ── Acceso (ingreso, TOTP) ──────────────────────────────────────────────── */
body.acceso { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.acceso__panel { width: min(440px, 100%); background: #fff; border-radius: 12px; padding: 28px 30px 30px;
                 box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 16px 40px rgba(5,7,8,.10); }
.acceso__logo { display: block; height: 48px; width: auto; }
.acceso__panel .barra-marca { margin: 14px 0 18px; border-radius: 2px; }
.acceso__panel h1 { font-size: 24px; font-weight: 900; margin: 4px 0 6px; }
.acceso__ayuda { color: var(--gris); margin-bottom: 16px; }
.acceso__salir { margin-top: 14px; }
.formulario { display: grid; gap: 6px; }
.formulario label { font-weight: 600; color: var(--tinta); margin-top: 6px; }
.formulario input { font: 500 16px var(--f-texto); padding: 10px 12px; border: 1px solid #C9CFD2; border-radius: 7px; }
.formulario input:focus { border-color: var(--verde-oscuro); }
.formulario .boton { margin-top: 14px; justify-content: center; padding: 12px; font-size: 15px; }
.formulario label.formulario__recordar { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 12px; cursor: pointer; }
.formulario .formulario__recordar input { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--verde-oscuro); }
.formulario__nota { color: var(--gris); font-size: 13px; margin: 0 0 0 28px; }
.pasos { padding-left: 20px; color: var(--tinta-2); margin: 0 0 12px; }
.pasos li { margin: 3px 0; }
.qr { display: grid; place-items: center; padding: 10px; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 8px; }
.qr__manual { margin-bottom: 12px; color: var(--gris); }
.qr__manual summary { cursor: pointer; }
.clave { display: block; margin-top: 6px; font: 600 15px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--tinta);
         background: var(--fondo); padding: 8px 10px; border-radius: 6px; word-break: break-all; }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 12px 12px 12px 34px; background: var(--fondo);
           border-radius: var(--radio); margin: 0 0 18px; }
.codigos code { font: 600 15px ui-monospace, Consolas, monospace; color: var(--tinta); }

/* ── Estructura de la app ────────────────────────────────────────────────── */
.barra-sup { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; background: #fff; }
.barra-sup__marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.barra-sup__marca img { height: 34px; width: auto; }
.barra-sup__producto { font-family: var(--f-titulo); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
                       color: var(--tinta); padding-left: 14px; border-left: 1px solid var(--linea); }
.barra-sup__usuario { display: flex; align-items: center; gap: 12px; color: var(--gris); }
.barra-sup__nombre { font-weight: 600; color: var(--tinta-2); }
.barra-sup__enlace { color: var(--verde-oscuro); font-weight: 600; text-decoration: none; }
.barra-sup__enlace:hover { text-decoration: underline; }
.marco { display: grid; grid-template-columns: var(--menu-ancho) minmax(0, 1fr); min-height: calc(100vh - 58px); }
.menu { background: #fff; border-right: 1px solid var(--linea); padding: 18px 12px; position: sticky; top: 0; align-self: start;
        height: calc(100vh - 58px); overflow-y: auto; }
.menu__titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta);
                padding: 0 8px 6px; }
.menu__seccion { font-size: 12.5px; font-weight: 600; color: var(--gris); padding: 4px 8px 2px; }
.menu ul { list-style: none; margin: 0 0 12px; padding: 0; }
.menu__enlace { display: block; padding: 7px 10px 7px 18px; border-radius: 6px; color: var(--tinta-2); text-decoration: none; font-weight: 500; position: relative; }
.menu__enlace:hover { background: var(--fondo); }
.menu__enlace--activo { background: #E9F7EE; color: var(--tinta); font-weight: 700; }
.menu__enlace--activo::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--verde); }
.menu__vacio { color: var(--gris); padding: 8px; }
.contenido { padding: 16px 24px 48px; min-width: 0; }
.contenido:focus { outline: none; }

.migas ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; color: var(--gris); }
.migas li + li::before { content: "›"; margin-right: 6px; color: var(--gris-claro); }
.migas li[aria-current] { color: var(--tinta); font-weight: 600; }

.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.cabecera h1 { font-size: 28px; font-weight: 900; line-height: 1.05; margin-top: 2px; }
.cabecera__sub { color: var(--gris); margin-top: 4px; }
.sello { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.sello__corte { color: var(--gris); margin-right: 4px; }
.sello__corte b { color: var(--tinta); font-size: 16px; }
.estado-datos, .estado-conector { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 4px 10px;
                                   border-radius: 99px; background: #fff; border: 1px solid var(--linea); color: var(--tinta-2); }
.estado-conector::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.estado-conector--sin-senal { background: var(--vencido-fondo); border-color: #F5C2C8; color: var(--vencido); }
.estado-conector--sin-senal::before { background: var(--vencido); }

/* ── Indicadores ─────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kpi { display: block; text-decoration: none; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px 9px 15px;
       position: relative; overflow: hidden; color: inherit; }
.kpi:hover { border-color: var(--gris-claro); }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--color, var(--verde)); }
.kpi__etiqueta { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color, var(--gris)); }
.kpi__valor { display: block; font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--tinta); }
.kpi__valor small { font-size: 13px; font-weight: 600; color: var(--gris); margin-left: 4px; }
.kpi__detalle { display: block; font-size: 13px; color: var(--gris); }
.kpi__detalle b { color: var(--tinta-2); font-weight: 600; }

.vencido  { --color: var(--vencido);  --fondo-color: var(--vencido-fondo); }
.proximo  { --color: var(--proximo);  --fondo-color: var(--proximo-fondo); }
.a-tiempo { --color: var(--a-tiempo); --fondo-color: var(--a-tiempo-fondo); }
.en-stock { --color: var(--en-stock); --fondo-color: var(--en-stock-fondo); }
.neutro   { --color: var(--tinta-2);  --fondo-color: var(--fondo); }

.distribucion { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 14px 12px; margin-top: 10px; }
.distribucion__cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.titulo-menor { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.barra { display: block; width: 100%; height: 14px; border-radius: 7px; background: var(--fondo); overflow: hidden; }
.barra__tramo { fill: var(--color); stroke: #fff; stroke-width: .25; }
.barra__tramo.neutro { fill: var(--gris-claro); }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--gris); }
.leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--color); margin-right: 6px; }
.leyenda .neutro i { background: var(--gris-claro); }
.leyenda b { color: var(--tinta); }
.nota { margin-top: 8px; font-size: 13px; color: var(--gris); }
.nota--intro { margin: 0 0 14px; max-width: 110ch; }

.indice-secciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.indice-secciones a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 99px; background: #fff;
                      border: 1px solid var(--linea); color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.indice-secciones a:hover { border-color: var(--color); }
.indice-secciones span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color); color: #fff;
                         font-family: var(--f-titulo); font-weight: 900; font-size: 12px; }

/* ── Secciones y tablas ──────────────────────────────────────────────────── */
.seccion { margin-top: 26px; }
.seccion__cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding-bottom: 8px;
                border-bottom: 2px solid var(--color, var(--tinta)); margin-bottom: 8px; }
.seccion__num { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 900;
                font-size: 16px; color: #fff; background: var(--color, var(--tinta)); }
.seccion__cab h2 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seccion__cab p { color: var(--gris); font-size: 13.5px; margin-top: 1px; }
.seccion__total { text-align: right; font-size: 13px; color: var(--gris); line-height: 1.35; }
.seccion__total b { font-weight: 700; font-size: 18px; color: var(--tinta); display: block; }
.etiqueta-gestion { font-family: var(--f-titulo); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                    color: var(--verde-oscuro); background: #E9F7EE; padding: 3px 8px; border-radius: 99px; }

.tabla-marco { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th { font-family: var(--f-titulo); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
            text-align: left; padding: 8px 8px 6px; border-bottom: 1px solid var(--tinta); white-space: nowrap; background: #fff;
            position: sticky; top: 0; z-index: 1; vertical-align: bottom; }
.tabla td { padding: 5px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.llega { display: block; color: var(--aduana); font-weight: 700; }
/* Estado automático: el stock cubre lo pendiente → listo para despacho (color de la sección 4) */
.estado-compra--stock { color: var(--en-stock); }
.estado-compra--stock .estado-compra__icono { background: var(--en-stock); }
.estado-compra--stock .estado-compra__icono::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.listo { display: block; color: var(--en-stock); font-weight: 600; }
.estado-compra--stock-parcial { color: var(--en-stock); }
.estado-compra--stock-parcial .estado-compra__icono { background: linear-gradient(90deg, var(--en-stock) 50%, #fff 50%); border: 2px solid var(--en-stock); }
.compra .estado-compra { display: flex; margin-top: 3px; }
.compra .estado-compra:first-child { margin-top: 0; }
.llega--alerta { color: var(--vencido); }
.sin-compra { display: block; color: var(--vencido); font-weight: 700; }
.aviso-linea { display: block; margin-top: 3px; color: var(--proximo); font-weight: 700; }
.compra .estado-compra + .llega, .compra .estado-compra + .tenue { margin-top: 2px; }
.compra .compra__oc { display: block; margin-top: 3px; }
.lote__llegada { font-weight: 700; color: var(--aduana); font-size: 13px; }
.lote__llegada-cambio { display: inline-block; }
.lote__llegada-cambio[open] { display: block; width: 100%; margin-top: 8px; }
.lote__llegada-cambio form { display: grid; gap: 6px; margin-top: 8px; max-width: 360px; }
.admin-persona { display: block; color: var(--tinta-2); }
.admin-correo { display: block; font-size: 12.5px; color: var(--gris); word-break: break-all; }
.admin-subtitulo { margin: 22px 0 8px; font-size: 16px; }
/* Copia fija del encabezado (portal.js): bajo la barra de atajos mientras la tabla está en pantalla */
.tabla-cabeza-fija { position: fixed; z-index: 4; overflow: hidden; pointer-events: none; background: #fff;
                     border: 1px solid var(--linea); border-top: 0; box-shadow: 0 4px 10px rgba(5, 7, 8, .08); }
.tabla-cabeza-fija[hidden] { display: none; }
.tabla-cabeza-fija table { table-layout: fixed; max-width: none; }
.tabla-cabeza-fija th { position: static; box-sizing: border-box; }
.tabla tbody tr:hover td { background: #FAFBFB; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .centro { text-align: center; }
.tabla .cod { font-weight: 600; color: var(--tinta); white-space: nowrap; }
.tabla .desc { min-width: 220px; }
.tabla .fuerte { font-weight: 700; color: var(--tinta); }
.tabla .alerta, .alerta { font-weight: 700; color: var(--vencido); }
.um { color: var(--gris); font-size: 11px; margin-left: 2px; }
.compra { font-size: 13px; line-height: 1.25; }
.compra small { display: block; color: var(--gris); font-size: 12px; }
.etiqueta-parcial { font-family: var(--f-titulo); font-weight: 700; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--proximo); margin-left: 4px; }
.insignia { display: inline-block; font-family: var(--f-titulo); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
            padding: 2px 7px 1.5px; border-radius: 99px; white-space: nowrap; color: var(--color, var(--gris)); background: var(--fondo-color, var(--fondo)); }
/* Visby dibuja el 0 como O: las cifras dentro de insignias van en Barlow */
.insignia .n { font-family: var(--f-texto); font-size: 12px; letter-spacing: 0; }
.insignia.cifra { font-family: var(--f-texto); font-size: 13px; letter-spacing: 0; padding: 0 8px; }
.dias { display: inline-flex; justify-content: flex-end; min-width: 40px; font-weight: 700; font-size: 13px; padding: 1px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.dias--vencido  { color: var(--vencido);  background: var(--vencido-fondo); }
.dias--proximo  { color: var(--proximo);  background: var(--proximo-fondo); }
.dias--a-tiempo { color: var(--a-tiempo); background: var(--a-tiempo-fondo); }

.pedido-cab td { background: var(--fondo); padding: 6px 8px 5px; border-bottom: 1px solid var(--linea); }
.tabla tbody tr.pedido-cab:hover td { background: var(--fondo); }
.pedido-cab__fila { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pedido-cab__doc { font-weight: 700; color: var(--tinta); font-size: 14.5px; white-space: nowrap; }
.pedido-cab__doc small, .sigla { font-family: var(--f-titulo); font-weight: 700; font-size: 9.5px; letter-spacing: .06em; color: var(--gris); margin-right: 4px; }
.pedido-cab__cliente { font-weight: 700; color: var(--tinta); }
.pedido-cab__meta { color: var(--gris); font-size: 13px; }
.pedido-cab__valor { margin-left: auto; font-weight: 700; color: var(--tinta); white-space: nowrap; }
tbody.pedido tr:last-child td { border-bottom-color: #CDD3D6; }

.etiqueta-kit { font-family: var(--f-titulo); font-weight: 700; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--en-stock);
                background: var(--en-stock-fondo); border-radius: 3px; padding: 0 4px; margin-left: 5px; }
.resumen-kit { display: block; font-size: 12.5px; color: var(--gris); }
.resumen-kit b { color: var(--tinta); }
tr.componente td { background: #FAFBFB; font-size: 13px; }
tr.componente td.cod { padding-left: 24px; font-weight: 500; }
tr.componente td.cod::before { content: "↳"; color: var(--gris-claro); margin-left: -14px; margin-right: 5px; }
.falta { color: var(--vencido); font-weight: 600; }
.insumo-de { display: block; margin-top: 1px; font-size: 12px; color: var(--gris); }
.insumo-de b { color: var(--en-stock); }
.subtitulo-tabla { margin: 16px 0 6px; font-family: var(--f-titulo); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--en-stock); }
.subtitulo-tabla span { font-family: var(--f-texto); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gris); font-size: 13px; }

/* ── Gestión de compras (sección 5) ──────────────────────────────────────── */
.guia-gestion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; font-size: 13px; color: var(--gris); }
.guia-gestion b { color: var(--tinta-2); }
.muestra { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta-2); }
.muestra::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--muestra); border: 1px solid rgba(0,0,0,.08); }
.muestra.comprado { --muestra: var(--comprado-fondo); }
.muestra.aduana { --muestra: var(--aduana-fondo); }
.muestra.nacional { --muestra: var(--nacional-fondo); }
.muestra.fabricacion { --muestra: repeating-linear-gradient(135deg, var(--fabricacion-fondo) 0 3px, transparent 3px 5px); }
.muestra.fabricacion::before { border-color: var(--fabricacion-borde); }
.muestra.nuevas { --muestra: var(--nuevas-fondo); }

.tabla--compras th { white-space: normal; }
.tabla--compras th.gestion { color: var(--verde-oscuro); }
.tabla--compras .desc { min-width: 150px; max-width: 230px; }
.tabla--compras td, .tabla--compras th { padding-left: 6px; padding-right: 6px; }
.tabla--compras td.cantidad { white-space: normal; min-width: 64px; }
.tabla--compras td.cantidad .um { display: inline-block; margin-left: 0; }
.tabla--compras .compra { white-space: nowrap; }
.tabla--compras .compra small { white-space: normal; max-width: 120px; }
.tabla--compras td.estado { min-width: 150px; }
.tabla--compras .estado small { display: block; color: var(--gris); font-size: 12px; margin-top: 2px; white-space: nowrap; }
.tabla--compras .acciones { white-space: normal; min-width: 96px; }
.tabla--compras .acciones .sync { white-space: normal; }
.tabla--compras td.gestion { background: #FCFDFC; }
.tabla--compras tr:hover td.gestion { background: #F6F9F7; }
.tabla--compras .entrega { white-space: nowrap; }
.tabla--compras .notas { min-width: 120px; max-width: 180px; font-size: 13px; color: var(--tinta-2); overflow-wrap: anywhere; }
.cantidad--comprado { background: var(--comprado-fondo) !important; color: var(--comprado); box-shadow: inset 3px 0 0 var(--comprado-borde); }
.cantidad--aduana { background: var(--aduana-fondo) !important; color: var(--aduana); box-shadow: inset 3px 0 0 var(--aduana-borde); }
.cantidad--nacional { background: var(--nacional-fondo) !important; color: var(--nacional); box-shadow: inset 3px 0 0 var(--nacional-borde); }
.cantidad--fabricacion { background: var(--fabricacion-franjas) !important; color: var(--fabricacion); box-shadow: inset 3px 0 0 var(--fabricacion-borde); }
.cantidad--nuevas { background: var(--nuevas-fondo) !important; color: var(--nuevas); box-shadow: inset 3px 0 0 var(--nuevas); }
.estado-compra { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.estado-compra__icono { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.estado-compra--comprado { color: var(--comprado); }
.estado-compra--comprado .estado-compra__icono { background: var(--comprado-icono); }
/* 03/11/2026: iconos por proceso. Importación = avión; En aduana = chulo en un cuadrado (ya gestionado); nacional = camión;
   fabricación (04/11/2026) = fábrica */
.estado-compra--comprado .estado-compra__icono::after { content: ""; width: 11px; height: 11px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.estado-compra--aduana { color: var(--aduana); }
.estado-compra--aduana .estado-compra__icono { background: var(--aduana-icono); border-radius: 3px; }
.estado-compra--aduana .estado-compra__icono::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.estado-compra--nacional { color: var(--nacional); }
.estado-compra--nacional .estado-compra__icono { background: var(--nacional-icono); }
.estado-compra--nacional .estado-compra__icono::after { content: ""; width: 11px; height: 11px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* En fabricación (04/11/2026): fábrica clásica (planta con chimeneas) en verde sobre franjas; el aro verde la distingue */
.estado-compra--fabricacion { color: var(--fabricacion); }
.estado-compra--fabricacion .estado-compra__icono { background: repeating-linear-gradient(135deg, var(--fabricacion-fondo) 0 2px, #fff 2px 4px); box-shadow: inset 0 0 0 1.5px var(--fabricacion-icono); }
.estado-compra--fabricacion .estado-compra__icono::after { content: ""; width: 10px; height: 10px; background: var(--fabricacion-icono); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21V11l5 3v-3l5 3v-3l3 1.8V3h2.5v10h2V6H22v15z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21V11l5 3v-3l5 3v-3l3 1.8V3h2.5v10h2V6H22v15z'/%3E%3C/svg%3E") center / contain no-repeat; }
.estado-compra--nuevas { color: var(--nuevas); white-space: normal; }
.estado-compra--nuevas .estado-compra__icono { background: var(--nuevas); }
.estado-compra--nuevas .estado-compra__icono::after { content: "+"; color: #fff; font: 800 13px/1 var(--f-texto); }
.tabla--compras .cantidades b { color: var(--tinta); }
.tabla--compras .cantidades b.nuevas { color: var(--nuevas); }

.acciones { white-space: nowrap; }
.acciones .boton { margin-top: 2px; }
.sync { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; margin-right: 6px; white-space: nowrap; }
.sync--pendiente { color: var(--proximo); }
.sync--pendiente::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
                           animation: girar 1s linear infinite; }
.sync--aplicado { color: var(--a-tiempo); }
.sync--aplicado::before { content: "✓"; }
.sync--simulado { color: var(--en-stock); white-space: normal; }
.sync--simulado::before { content: "i"; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--en-stock); color: #fff; font-size: 10px; }
.sync--error { color: var(--vencido); white-space: normal; }
.sync--error::before { content: "!"; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--vencido); color: #fff; font-size: 10px; }
.sync__mensaje { display: block; font-size: 12px; color: var(--gris); max-width: 240px; white-space: normal; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sync--pendiente::before { animation: none; } html { scroll-behavior: auto; } }

.fila-articulo--editando td { background: #F3FAF5 !important; }
.editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.editor label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--gris); }
.editor select, .editor input { font: 500 14px var(--f-texto); padding: 6px 8px; border: 1px solid #C9CFD2; border-radius: 6px; background: #fff; color: var(--tinta); }
.editor__notas { flex: 1 1 220px; }
.editor__notas input { width: 100%; }
.editor__botones { display: flex; gap: 6px; }
.editor__ayuda { flex-basis: 100%; font-size: 12px; color: var(--gris); }
.editor__errores { flex-basis: 100%; margin: 0; padding: 6px 10px 6px 26px; background: var(--vencido-fondo); color: var(--vencido); border-radius: 6px; font-size: 13px; }

.boton-pdf { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--linea); background: #fff; border-radius: 6px; padding: 3px 7px 3px 4px;
             cursor: pointer; color: var(--vencido); text-decoration: none; font: 600 12.5px var(--f-texto); }
.boton-pdf:hover { border-color: var(--vencido); background: var(--vencido-fondo); }
.boton-pdf__hoja { fill: #fff; stroke: currentColor; stroke-width: 1.6; }
.boton-pdf__doblez { fill: none; stroke: currentColor; stroke-width: 1.6; }
.boton-pdf__texto { fill: currentColor; font: 800 6.5px var(--f-texto); }
.boton-pdf__n { color: var(--tinta-2); }
.boton-pdf--enlace span { color: var(--tinta-2); }
.sin-anexo { font-weight: 600; color: var(--gris); }
.anexos { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 64px); border: 0; border-radius: 12px; padding: 18px 20px 20px;
         box-shadow: 0 24px 64px rgba(5,7,8,.28); }
.modal::backdrop { background: rgba(5,7,8,.45); }
.modal__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.modal__cab h2 { font-family: var(--f-texto); font-weight: 700; font-size: 22px; }
.tabla--modal th { position: static; }

/* ── Inicio ──────────────────────────────────────────────────────────────── */
.indice { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 18px; margin-top: 12px; }
.indice h2 { font-size: 16px; font-weight: 800; }
.indice h3 { font-family: var(--f-texto); font-size: 13px; color: var(--gris); margin: 8px 0 2px; }
.indice__lista { list-style: none; padding: 0; margin: 0; }
.indice__lista li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.indice__lista li:last-child { border-bottom: 0; }
.indice__lista a { font-weight: 700; font-size: 15px; }
.indice__lista span { color: var(--gris); }

/* ── Tablet y pantallas angostas ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .marco { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linea); display: flex; gap: 16px; overflow-x: auto; padding: 10px 14px; }
  .menu ul { display: flex; gap: 4px; margin: 0; }
  .contenido { padding: 14px 14px 40px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seccion__cab { grid-template-columns: auto 1fr; }
  .seccion__total { grid-column: 1 / -1; text-align: left; }
  .barra-sup__nombre { display: none; }
}

/* Portátil de 1280-1440 px: la tabla de gestión (12 columnas) cabe sin desplazamiento lateral */
@media (max-width: 1440px) {
  :root { --menu-ancho: 176px; }
  .contenido { padding-left: 16px; padding-right: 16px; }
  .tabla--compras .desc { min-width: 140px; max-width: 180px; }
  .tabla--compras td.estado { min-width: 120px; }
  .tabla--compras .notas { min-width: 90px; max-width: 130px; }
  .tabla--compras .acciones { min-width: 0; max-width: 112px; }
  .tabla--compras th { font-size: 10px; letter-spacing: .04em; }
  .sync__mensaje { max-width: 112px; }
}

/* ── Modal «Registrar compra» ────────────────────────────────────────────── */
.modal--ancho { width: min(1200px, calc(100vw - 48px)); padding: 22px 28px 24px; }
/* Estado a todo el ancho; las dos fechas seguidas debajo; observaciones en su propia fila */
.registrar__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)) 1fr; gap: 16px 28px; margin-bottom: 16px; }
.registrar__datos > .segmento, .registrar__datos > .registrar__campo--ancho { grid-column: 1 / -1; }
.segmento { display: inline-flex; border: 0; padding: 0; margin: 0; }
.registrar__datos > .segmento { display: flex; }
.registrar__datos > .segmento .segmento__opcion { flex: 1 1 0; justify-content: center; }
.registrar__datos .campo-fecha { display: flex; }
.registrar__datos .campo-fecha input[data-fecha] { flex: 1 1 auto; width: auto; }
.segmento legend { font-size: 12px; font-weight: 600; color: var(--gris); padding: 0; margin-bottom: 4px; }
.segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmento__opcion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; cursor: pointer;
                    font-weight: 700; font-size: 15px; color: var(--tinta-2); background: #fff; border: 1px solid #C9CFD2; }
.segmento__opcion:first-of-type { border-radius: 8px 0 0 8px; }
.segmento__opcion:last-of-type { border-radius: 0 8px 8px 0; border-left: 0; }
.segmento__opcion::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.segmento input:checked + .segmento__opcion--C { background: var(--comprado-fondo); border-color: var(--comprado-borde); color: var(--comprado); }
.segmento input:checked + .segmento__opcion--A { background: var(--aduana-fondo); border-color: var(--aduana-borde); color: var(--aduana); }
.segmento input:checked + .segmento__opcion--L { background: var(--nacional-fondo); border-color: var(--nacional-borde); color: var(--nacional); }
.segmento input:checked + .segmento__opcion--F { background: var(--fabricacion-franjas), #fff; border-color: var(--fabricacion-borde); color: var(--fabricacion); }
.segmento input:checked + .segmento__opcion::before { background: currentColor; box-shadow: inset 0 0 0 2px #fff; }
.segmento input:focus-visible + .segmento__opcion { outline: 3px solid #1A73E8; outline-offset: 2px; position: relative; z-index: 1; }
.registrar__campo { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gris); }
.registrar__campo input { font: 500 15px var(--f-texto); padding: 9px 10px; border: 1px solid #C9CFD2; border-radius: 7px; color: var(--tinta); min-height: 44px; }
.registrar__campo--ancho { position: relative; }
/* Observaciones, notas y motivos: siempre en MAYÚSCULAS (el JS y el servidor también las convierten) */
[data-mayusculas] { text-transform: uppercase; }
[data-mayusculas]::placeholder { text-transform: none; }
.registrar__campo input[aria-invalid="true"] { border-color: var(--vencido); background: var(--vencido-fondo); }
.registrar__contador { position: absolute; right: 0; top: 0; font-weight: 500; color: var(--gris); }
.registrar__errores { margin: 0 0 10px; padding: 8px 12px 8px 28px; background: var(--vencido-fondo); color: var(--vencido); border-radius: 7px; }
.registrar__atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 13px; }
.tabla--registrar td { vertical-align: middle; }
.tabla--registrar .cantidad-input { width: 110px; text-align: right; font: 600 15px var(--f-texto); font-variant-numeric: tabular-nums;
                                    padding: 7px 9px; border: 1px solid #C9CFD2; border-radius: 6px; color: var(--tinta); }
.tabla--registrar .cantidad-input:focus { border-color: var(--verde-oscuro); background: #F3FAF5; }
.tabla--registrar .cantidad-input[aria-invalid="true"] { border-color: var(--vencido); background: var(--vencido-fondo); }
.tabla--registrar tr.con-error td { background: var(--vencido-fondo); }
.tabla--registrar .ya-comprado { display: block; font-size: 11.5px; color: var(--comprado); font-weight: 600; }
.tabla--registrar tfoot th, .tabla--registrar tfoot td { padding: 8px; border-top: 2px solid var(--tinta); font-size: 14px; text-align: right; }
.tabla--registrar tfoot th { font-family: var(--f-titulo); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.tabla--registrar tfoot td:last-child { text-align: left; }
.tabla--registrar tfoot b { font-size: 16px; color: var(--tinta); }
.registrar__aviso { margin: 8px 0 0; padding: 8px 12px; border-radius: 7px; background: var(--proximo-fondo); color: var(--proximo); font-weight: 600; }
.registrar__pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.registrar__pie .boton { min-height: 44px; padding: 0 18px; font-size: 15px; }
.boton--peligro { margin-left: auto; color: var(--vencido); border-color: #F0B6BD; background: #fff; }
.boton--peligro:hover { background: var(--vencido-fondo); }

/* Resumen de la gestión de compras (se actualiza en tiempo real) */
.resumen-gestion__lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.resumen-gestion__item { display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 7px; background: #fff;
                         border: 1px solid var(--linea); border-left: 4px solid var(--borde, var(--gris-claro)); }
.resumen-gestion__item dt { font-size: 12.5px; color: var(--gris); font-weight: 600; }
.resumen-gestion__item dd { margin: 0; font-weight: 700; font-size: 16px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.resumen-gestion__item.comprado { --borde: var(--comprado-borde); }
.resumen-gestion__item.aduana { --borde: var(--aduana-borde); }
.resumen-gestion__item.nacional { --borde: var(--nacional-borde); }
/* Contador En fabricación: la franja izquierda en rayas verde/transparente */
.resumen-gestion__item.fabricacion { border-left-color: transparent;
  background: repeating-linear-gradient(135deg, var(--fabricacion-borde) 0 3px, transparent 3px 6px) left top / 4px 100% no-repeat border-box, #fff; }
.resumen-gestion__item.nuevas { --borde: var(--nuevas); }
.resumen-gestion__item.pendiente { --borde: var(--proximo); }
.resumen-gestion__item.total { --borde: var(--tinta); margin-left: auto; }
.tabla--registrar tr.cubierta td { color: var(--gris); background: #FAFBFB; }
.tabla--registrar tr.cubierta .cantidad-input { color: var(--gris); }
.tabla--registrar .cubierta__nota { display: block; font-size: 11.5px; color: var(--gris); }
.tabla--registrar tfoot tr { border-top: 2px solid var(--tinta); }
.tabla--registrar tfoot th, .tabla--registrar tfoot td { border-top: 0; border-bottom: 0; }

/* ── Filtro por vendedor ─────────────────────────────────────────────────── */
.filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 12px; }
.filtro__etiqueta { font-weight: 600; color: var(--gris); }
.filtro select { font: 600 14.5px var(--f-texto); padding: 7px 30px 7px 10px; border: 1px solid #C9CFD2; border-radius: 7px; background: #fff; color: var(--tinta); min-height: 38px; }
.filtro__fijo { color: var(--tinta); }
.filtro__quitar { font-size: 13px; }

/* ── Barra de atajos fija ────────────────────────────────────────────────── */
.atajos { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap; margin: 14px -4px 0; padding: 6px 4px;
          background: rgba(238, 241, 239, .94); backdrop-filter: blur(4px); border-bottom: 1px solid var(--linea); }
.atajos__item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; text-decoration: none;
                color: var(--tinta-2); font-weight: 600; font-size: 13px; border: 1px solid transparent; }
.atajos__item:hover { background: #fff; border-color: var(--linea); }
.atajos__num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color); color: #fff;
               font-family: var(--f-titulo); font-weight: 900; font-size: 12px; }
.atajos__conteo { font-variant-numeric: tabular-nums; color: var(--gris); font-weight: 600; }
.atajos__item--activo { background: #fff; border-color: var(--color); color: var(--tinta); }
.atajos__item--activo .atajos__conteo { color: var(--tinta); }
.seccion { scroll-margin-top: 56px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 900px) { .atajos__texto { display: none; } }
/* Atajo al menú principal (solo donde el menú no queda fijo) y botón flotante «inicio de la sección» */
.atajos__menu { display: none; flex: none; place-items: center; width: 40px; min-height: 40px; border-radius: 10px; color: var(--tinta-2);
                border: 1px solid var(--linea); background: #fff; margin-right: 4px; }
.atajos__menu path, .volver-arriba path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .atajos__menu { display: grid; } }
.volver-arriba { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 6; display: grid; place-items: center;
                 width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--verde-oscuro); color: #fff; cursor: pointer;
                 box-shadow: 0 6px 18px rgba(5, 7, 8, .25); }
.volver-arriba[hidden] { display: none; }
.volver-arriba:hover { background: var(--verde); }
.volver-arriba:focus-visible { outline: 3px solid #1A73E8; outline-offset: 3px; }

/* ── Administración ──────────────────────────────────────────────────────── */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }
.pestanas__item { padding: 8px 14px; text-decoration: none; color: var(--gris); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas__item--activa { color: var(--tinta); border-bottom-color: var(--verde); }
.barra-acciones { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.tabla--admin td { vertical-align: middle; }
/* El flex va en un contenedor dentro de la celda: un <td> con display:flex deja de ser celda y desalinea la fila */
.acciones-admin { display: flex; gap: 6px; flex-wrap: wrap; }
.acciones-admin form { margin: 0; }
.aviso--ok { background: var(--a-tiempo-fondo); color: var(--a-tiempo); }
.aviso--ok .clave { margin: 6px 0; }
.form-admin { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; }
.form-admin h2 { font-size: 18px; margin-bottom: 12px; }
.form-admin__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.form-admin__campo { display: grid; gap: 4px; align-content: start; }
/* Etiquetas de una sola línea: si una ocupa dos, su casilla queda más abajo que las demás de la fila; lo que no cabe
   va como ayuda debajo de la casilla */
.form-admin__campo label { font-size: 12.5px; font-weight: 600; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-admin__ayuda { font-size: 12px; color: var(--gris); }
.form-admin__campo input, .form-admin__campo select { font: 500 15px var(--f-texto); padding: 8px 10px; border: 1px solid #C9CFD2; border-radius: 7px; min-height: 40px; }
.form-admin__campo--ancho { grid-column: span 2; }
.form-admin__check { display: flex; align-items: center; gap: 8px; }
.form-admin__check label { font-size: 14px; color: var(--tinta-2); }
.form-admin__error { color: var(--vencido); font-size: 13px; font-weight: 600; }
.form-admin__vendedores, .matriz { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px 12px; margin: 0 0 14px; }
.form-admin__vendedores legend, .matriz legend { font-weight: 700; color: var(--tinta); padding: 0 4px; }
.opcion { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 4px 0; font-weight: 500; }
.matriz__tabla th[scope="row"] { font-family: var(--f-texto); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); font-weight: 600; position: static; }
.matriz__tabla td { vertical-align: middle; }
.matriz__opcion { display: inline-grid; place-items: center; width: 36px; height: 30px; cursor: pointer; }
.matriz__opcion input { width: 18px; height: 18px; accent-color: var(--verde-oscuro); }
.permisos-resumen { display: flex; flex-wrap: wrap; gap: 4px; }
.permiso { font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--fondo); color: var(--gris); }
.permiso--1 { background: var(--en-stock-fondo); color: var(--en-stock); }
.permiso--2 { background: var(--a-tiempo-fondo); color: var(--a-tiempo); font-weight: 600; }
.permiso--0 { text-decoration: line-through; }

/* ── v1.4: compra parcial, situaciones y fecha DD/MM/AAAA ────────────────── */
/* 03/11/2026: compra parcial en la familia amarilla de «Comprado» (más claro y con rayado/borde punteado);
   el verde queda solo para «En aduana» (ya viene en camino) */
:root { --parcial: #7A5C00; --parcial-fondo: #FFF5CC; --parcial-borde: #D9A800; }
.cantidad--parcial { background: repeating-linear-gradient(135deg, var(--parcial-fondo) 0 6px, #fff 6px 9px) !important;
                     color: var(--parcial); box-shadow: inset 3px 0 0 var(--parcial-borde); outline: 1px dashed var(--parcial-borde); outline-offset: -1px; }
.estado-compra--parcial { color: var(--parcial); }
.estado-compra--parcial .estado-compra__icono { background: linear-gradient(90deg, var(--parcial-borde) 50%, #fff 50%); border: 2px solid var(--parcial-borde); }
.muestra.parcial { --muestra: repeating-linear-gradient(135deg, var(--parcial-fondo) 0 3px, #fff 3px 5px); border: 1px dashed var(--parcial-borde); }
.resumen-gestion__item.parcial { --borde: var(--parcial-borde); border-left-style: dashed; }
.aviso-secundario { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--nuevas); }
.tabla--compras .comprado-col { color: var(--comprado); font-weight: 600; }
.situacion { white-space: nowrap; }
.situacion small { display: block; font-size: 11.5px; color: var(--gris); }
.situacion__etiqueta { display: inline-block; font-weight: 700; font-size: 12.5px; padding: 1px 8px; border-radius: 99px; }
.situacion--nuevas { color: var(--nuevas); background: var(--nuevas-fondo); }
.situacion--parcial { color: var(--parcial); background: var(--parcial-fondo); border: 1px dashed var(--parcial-borde); }
.situacion--comprado { color: var(--comprado); background: var(--comprado-fondo); }
.situacion--aduana { color: var(--aduana); background: var(--aduana-fondo); }
.situacion--nacional { color: var(--nacional); background: var(--nacional-fondo); }
.situacion--fabricacion { color: var(--fabricacion); background: repeating-linear-gradient(135deg, var(--fabricacion-fondo) 0 4px, transparent 4px 7px); box-shadow: inset 0 0 0 1px var(--fabricacion-borde); }
.obligatorio { color: var(--vencido); text-decoration: none; font-weight: 700; }
.error-campo { display: block; color: var(--vencido); font-weight: 700; }

.campo-fecha { position: relative; display: inline-flex; align-items: stretch; }
.campo-fecha input[data-fecha] { width: 132px; font: 600 15px var(--f-texto); font-variant-numeric: tabular-nums; padding: 9px 10px;
                                 border: 1px solid #C9CFD2; border-radius: 7px 0 0 7px; min-height: 44px; color: var(--tinta); }
.campo-fecha input[data-fecha][aria-invalid="true"] { border-color: var(--vencido); background: var(--vencido-fondo); }
.campo-fecha__calendario { display: grid; place-items: center; width: 42px; border: 1px solid #C9CFD2; border-left: 0;
                           border-radius: 0 7px 7px 0; background: #fff; cursor: pointer; color: var(--tinta-2); }
.campo-fecha__calendario:hover { background: var(--fondo); }
.calendario__marco { fill: none; stroke: currentColor; stroke-width: 1.8; }
.campo-fecha__nativo { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.registrar__campo > small { font-size: 11.5px; font-weight: 500; }
.interruptores { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tinta-2); cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--verde-oscuro); }

/* ── Historial de compras (v2.0) ─────────────────────────────────────────── */
.acciones__fila { display: inline-flex; gap: 4px; margin-top: 4px; align-items: center; }
.tabla--compras .acciones { min-width: 150px; }
.historial { display: grid; gap: 10px; }
.lote { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; background: #fff; }
.lote__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lote__fecha { font-weight: 700; font-size: 15px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.lote__total { margin-left: auto; font-size: 16px; color: var(--tinta); }
.lote__total small { font-weight: 500; color: var(--gris); font-size: 12px; }
.lote__id { font-size: 12px; }
.lote__quien, .lote__anulado, .lote__notas { margin: 4px 0 0; font-size: 13px; color: var(--gris); }
.lote__notas { color: var(--tinta-2); font-style: italic; }
.lote__anulado { color: var(--vencido); }
.lote__detalle { margin-top: 6px; font-size: 13px; }
.lote__detalle th { position: static; }
.lote__acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.lote__acciones form { margin: 0; }
.lote__anular summary { list-style: none; cursor: pointer; }
.lote__anular summary::-webkit-details-marker { display: none; }
.lote__anular[open] form { display: grid; gap: 4px; margin-top: 6px; padding: 8px 10px; border: 1px solid #F0B6BD; border-radius: 8px; background: var(--vencido-fondo); min-width: 320px; }
.lote__anular label { font-size: 12.5px; font-weight: 600; color: var(--vencido); }
.lote__anular input[type=text] { font: 500 14px var(--f-texto); padding: 7px 9px; border: 1px solid #E59AA4; border-radius: 6px; }
.lote--anulado { opacity: .62; background: var(--fondo); }
.lote--anulado .lote__total, .lote--anulado .lote__detalle td { text-decoration: line-through; }
.situacion--anulado { color: var(--vencido); background: var(--vencido-fondo); }
.historial__pie { display: flex; gap: 18px; justify-content: flex-end; padding-top: 6px; border-top: 2px solid var(--tinta); }

/* Sección 5 a 1280 px sin desplazamiento lateral (fechas DD/MM/AAAA más anchas) */
.tabla--compras .compra { white-space: normal; min-width: 76px; }
.tabla--compras .compra b { display: block; }
.tabla--compras td.entrega { white-space: normal; min-width: 78px; }
.tabla--compras td.entrega .dias { display: inline-flex; margin-top: 2px; }
.tabla--compras td.cod { white-space: normal; overflow-wrap: anywhere; max-width: 118px; }
.tabla--compras .acciones { min-width: 0; }
.tabla--compras .acciones .boton--primario { padding: 5px 9px; }
@media (max-width: 1440px) { .tabla--compras .desc { min-width: 130px; max-width: 150px; } .tabla--compras td.estado { min-width: 112px; } }
.tabla--compras .estado-compra { white-space: normal; }
.tabla--compras td.num .insignia { white-space: normal; }
.tabla--compras td.cantidad .um { display: block; }
.acciones__fila { flex-wrap: wrap; }
.tabla--compras .acciones .boton { white-space: nowrap; }
.tabla--compras .acciones { width: 1%; }
.tabla--compras td, .tabla--compras th { padding-left: 5px; padding-right: 5px; }
.tabla--compras .acciones { width: auto; min-width: 124px; }
.tabla--compras .acciones .boton--primario { padding: 5px 8px; font-size: 12.5px; }
@media (max-width: 1440px) { .tabla--compras .desc { max-width: 140px; } }
.historial .sync__mensaje { max-width: none; color: var(--vencido); }
.tabla--compras .acciones { min-width: 136px; }
.acciones__fila { flex-wrap: nowrap; }
.acciones__fila .boton { padding: 4px 7px; font-size: 12.5px; }
@media (max-width: 1440px) { .tabla--compras .desc { min-width: 120px; max-width: 128px; } }

/* ── Documento como en SAP (v2.1) ────────────────────────────────────────── */
.flecha-sap { display: inline-grid; place-items: center; width: 18px; height: 18px; vertical-align: -3px; margin-left: 2px; border-radius: 4px;
              color: var(--verde-oscuro); text-decoration: none; }
.flecha-sap:hover { background: #E3F5E9; }
.flecha-sap:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: 1px; }
.flecha-sap__marco { fill: var(--verde); stroke: var(--verde-oscuro); stroke-width: 1; }
.flecha-sap__trazo { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.doc-oc { display: inline-flex; align-items: center; gap: 1px; margin-right: 6px; white-space: nowrap; }

.modal--sap { width: min(1180px, 82vw); max-height: calc(100vh - 48px); padding: 0; overflow: auto; }
.modal--sap::backdrop { background: rgba(5, 7, 8, .55); }
.doc-sap { display: grid; gap: 12px; padding: 0 20px 20px; }
.doc-sap__barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
                  margin: 0 -20px; padding: 14px 20px 10px; background: #fff; border-bottom: 1px solid var(--linea);
                  box-shadow: 0 3px 0 -1px transparent; }
.doc-sap__barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--degradado); }
.doc-sap__titulo { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.doc-sap__titulo h2 { font-size: 21px; font-weight: 900; }
.doc-sap__num { font-family: var(--f-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.doc-sap__frescura { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.doc-sap__frescura form { margin: 0; }
.doc-estado { font-family: var(--f-titulo); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
              padding: 3px 9px; border-radius: 99px; background: var(--a-tiempo-fondo); color: var(--a-tiempo); }
.doc-estado--cerrado { background: var(--fondo); color: var(--gris); }
.doc-estado--cancelado { background: var(--vencido-fondo); color: var(--vencido); }
.doc-parcial { font-weight: 700; color: var(--proximo); background: var(--proximo-fondo); padding: 3px 9px; border-radius: 99px; }
.doc-sap__cabecera { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 32px; background: var(--fondo); border: 1px solid var(--linea);
                     border-radius: 10px; padding: 10px 16px; }
.doc-sap__col { margin: 0; display: grid; gap: 4px; }
.doc-sap__col > div { display: grid; grid-template-columns: 170px 1fr; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed #DCE1E3; }
.doc-sap__col > div:last-child { border-bottom: 0; }
.doc-sap__col dt { font-size: 12.5px; color: var(--gris); font-weight: 600; }
.doc-sap__col dd { margin: 0; color: var(--tinta); font-weight: 500; }
.doc-sap__col--ancha > div { grid-template-columns: 200px 1fr; }
.doc-sap__pestanas { display: flex; gap: 2px; border-bottom: 2px solid var(--linea); }
.doc-pestana { font: 600 14px var(--f-texto); padding: 8px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
               background: none; color: var(--gris); cursor: pointer; margin-bottom: -2px; }
.doc-pestana--activa { background: #fff; color: var(--tinta); border-color: var(--linea); border-bottom: 2px solid #fff; box-shadow: inset 0 3px 0 var(--verde); }
.doc-panel[hidden] { display: none; }
.doc-sap__lineas { max-height: 46vh; overflow: auto; }
.tabla--doc th { top: 0; }
.tabla--doc tr.linea--origen td { background: #E6F6EC !important; box-shadow: inset 0 1px 0 var(--verde), inset 0 -1px 0 var(--verde); }
.tabla--doc tr.linea--origen td:first-child { box-shadow: inset 4px 0 0 var(--verde), inset 0 1px 0 var(--verde), inset 0 -1px 0 var(--verde); }
.tabla--doc tr.linea--componente td.cod { padding-left: 18px; }
.doc-linea-estado { font-size: 12px; font-weight: 600; color: var(--a-tiempo); }
.doc-linea-estado--cerrada { color: var(--gris); }
.doc-sap__pie { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 20px; margin-top: 10px; align-items: start; }
.doc-sap__comentarios { font-size: 13px; color: var(--tinta-2); background: var(--fondo); border-radius: 8px; padding: 8px 12px; }
.doc-totales { margin: 0; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.doc-totales > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 12px; border-bottom: 1px solid var(--linea); }
.doc-totales dt { color: var(--gris); font-size: 13px; }
.doc-totales dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.doc-totales__total { background: #F1FAF4; }
.doc-totales__total dd { font-size: 17px; font-weight: 800; }
.doc-totales__saldo--pendiente dd { color: var(--vencido); }
.doc-totales__saldo--pagada dd { color: var(--a-tiempo); }
.doc-anexo { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
@media (max-width: 900px) { .doc-sap__cabecera, .doc-sap__pie { grid-template-columns: 1fr; } .modal--sap { width: calc(100vw - 16px); } }
.doc-totales__menor { padding: 3px 12px !important; }
.doc-totales__menor dt, .doc-totales__menor dd { font-size: 12.5px; font-weight: 500; }
.doc-totales__total dt { font-weight: 700; color: var(--tinta); }

/* ── Mapa de relaciones (v2.2) ───────────────────────────────────────────── */
.modal--mapa { width: min(1240px, 94vw); max-height: calc(100vh - 40px); padding: 0; overflow: auto; }
.modal--mapa::backdrop { background: rgba(5, 7, 8, .5); }
.boton--mapa { border-color: var(--verde); color: var(--verde-oscuro); }
.boton--mapa::before { content: ""; width: 14px; height: 10px; border: 2px solid currentColor; border-radius: 3px;
                       box-shadow: 8px 6px 0 -2px #fff, 8px 6px 0 0 currentColor; margin-right: 6px; }
.mapa { display: grid; gap: 10px; padding: 0 20px 18px; }
.mapa__barra { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px;
               margin: 0 -20px; padding: 14px 20px 10px; background: #fff; border-bottom: 1px solid var(--linea); }
.mapa__barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--degradado); }
.mapa__barra h2 { font-size: 20px; font-weight: 900; }
.mapa__acciones { display: flex; align-items: center; gap: 8px; }
.mapa__leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; color: var(--gris); }
.mapa-tipo i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px;
               background: var(--tipo-fondo); box-shadow: inset 3px 0 0 var(--tipo); }
.mapa__leyenda-arista { display: inline-flex; align-items: center; gap: 4px; }
.mapa__lienzo { border: 1px solid var(--linea); border-radius: 12px; overflow: auto; max-height: 68vh; cursor: grab;
                background: radial-gradient(circle, #DCE3DF 1px, transparent 1.2px) 0 0 / 18px 18px, #FAFCFB; }
.mapa__svg { display: block; margin: 0 auto; }
/* Lienzo libre (portal.js): fondo que se desplaza y acerca; cajas que se arrastran */
.mapa__lienzo--libre { position: relative; overflow: hidden; height: min(66vh, 640px); max-height: none; touch-action: none; outline: none; }
.mapa__lienzo--libre:focus-visible { box-shadow: 0 0 0 3px rgba(26, 115, 232, .35); }
.mapa__lienzo--libre .mapa__svg { width: 100%; height: 100%; margin: 0; overflow: visible; }
.mapa__lienzo--libre .mapa-nodo { cursor: grab; }
.mapa__lienzo--moviendo, .mapa__lienzo--moviendo .mapa-nodo { cursor: grabbing; user-select: none; }
[data-nodo] { overflow: visible; transition: opacity .15s; }
[data-nodo].es-arrastrado .mapa-nodo { box-shadow: inset 4px 0 0 var(--tipo), 0 14px 32px rgba(5,7,8,.22); }
[data-nodo].es-tenue { opacity: .3; }
.arista { transition: opacity .15s, stroke-width .15s; }
.arista.es-tenue { opacity: .12; }
.arista--flujo { stroke-width: 3.2; }
.mapa__controles { position: absolute; left: 12px; bottom: 12px; display: grid; background: #fff; border: 1px solid var(--linea);
                   border-radius: 10px; box-shadow: 0 4px 14px rgba(5,7,8,.1); overflow: hidden; }
.mapa__controles button { display: grid; place-items: center; width: 34px; height: 32px; border: 0; border-bottom: 1px solid var(--linea);
                          background: #fff; color: var(--tinta-2); font: 700 18px var(--f-texto); cursor: pointer; }
.mapa__controles button:last-child { border-bottom: 0; }
.mapa__controles button:hover { background: var(--fondo); color: var(--verde-oscuro); }
.mapa__controles button:focus-visible { outline: 3px solid #1A73E8; outline-offset: -3px; }
.mapa__icono { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mapa__icono--lleno { fill: currentColor; }
.mapa__mini { position: absolute; right: 12px; bottom: 12px; width: 168px; height: 112px; background: rgba(255,255,255,.94);
              border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 4px 14px rgba(5,7,8,.1); cursor: pointer; }
.mini-nodo { fill: #D5DCD8; }
.mini-nodo--flujo { fill: var(--verde); }
.mini-nodo--actual { fill: #F5C400; }
.mini-vista { fill: rgba(0, 177, 66, .07); stroke: var(--verde-oscuro); stroke-width: 1.2; }
.arista { fill: none; stroke-width: 2.2; }
.arista--copia { stroke: var(--verde-oscuro); }
.arista--pago { stroke: var(--en-stock); stroke-dasharray: 6 5; }
.punta--copia { fill: var(--verde-oscuro); }
.punta--pago { fill: var(--en-stock); }

/* Colores por tipo: paleta de marca y semánticos; el tipo va siempre escrito en la tarjeta */
.mapa-tipo--oferta, .mapa-nodo--oferta { --tipo: #6B7378; --tipo-fondo: #F1F3F4; }
.mapa-tipo--pedido, .mapa-nodo--pedido { --tipo: var(--verde-oscuro); --tipo-fondo: #E9F7EE; }
.mapa-tipo--entrega, .mapa-nodo--entrega { --tipo: var(--en-stock); --tipo-fondo: var(--en-stock-fondo); }
.mapa-tipo--factura, .mapa-nodo--factura { --tipo: #8A6A00; --tipo-fondo: #FFF4D6; }
.mapa-tipo--pago, .mapa-nodo--pago { --tipo: #2F6B3A; --tipo-fondo: #EEF7E6; }
.mapa-tipo--devolucion, .mapa-nodo--devolucion { --tipo: var(--vencido); --tipo-fondo: var(--vencido-fondo); }
.mapa-tipo--nota, .mapa-nodo--nota { --tipo: #A33A55; --tipo-fondo: #FBEAF0; }
.mapa-tipo--compra, .mapa-nodo--compra { --tipo: var(--nuevas); --tipo-fondo: var(--nuevas-fondo); }

.mapa-nodo { display: grid; align-content: start; gap: 3px; width: 100%; height: 100%; margin: 0; padding: 9px 12px 8px 14px; text-align: left;
             font: 500 13px var(--f-texto); color: var(--tinta-2); background: #fff; border: 1px solid var(--linea); border-radius: 12px;
             box-shadow: inset 4px 0 0 var(--tipo), 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(5,7,8,.06); cursor: pointer; }
.mapa-nodo:hover { border-color: var(--tipo); background: var(--tipo-fondo); }
.mapa-nodo:focus-visible { outline: 3px solid #1A73E8; outline-offset: 2px; }
.mapa-nodo[aria-disabled="true"] { opacity: .75; }
/* Documento actual: amarillo fuerte (distinto del ocre de las facturas) y «Usted está aquí» */
.mapa-nodo--actual, .mapa-nodo--actual:hover { background: #FFE66B; border: 2px solid #D9A800;
                    box-shadow: inset 5px 0 0 var(--tipo), 0 0 0 5px rgba(245, 196, 0, .32), 0 10px 26px rgba(5,7,8,.14); }
.mapa-nodo--actual .mapa-nodo__fila, .mapa-nodo--actual .mapa-nodo__cliente { color: var(--tinta-2); }
.mapa-nodo__aqui { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--tinta); color: #FFE66B;
                   font-size: 8.5px; letter-spacing: .04em; vertical-align: 1px; }
.mapa-tipo--actual { --tipo: #D9A800; --tipo-fondo: #FFE66B; font-weight: 700; color: var(--tinta-2); }
.mapa-nodo__tipo { font-family: var(--f-titulo); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tipo); }
.mapa-nodo__num { display: flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mapa-nodo__flecha { display: inline-grid; }
.mapa-nodo__clip { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.mapa-nodo__clip path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mapa-nodo__fila { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.mapa-nodo__fila .doc-estado { font-size: 9px; padding: 2px 7px; }
.mapa-nodo__total { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mapa-nodo__total small { font-weight: 500; color: var(--gris); }
.mapa-nodo__cliente { font-size: 11.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ── Migas dentro del modal ─────────────────────────────────────────────── */
.doc-sap__migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--gris); }
.doc-sap__migas button { border: 0; background: none; padding: 0; color: var(--verde-oscuro); text-decoration: underline; cursor: pointer; font: inherit; }
.doc-sap__migas span[aria-current] { color: var(--tinta); font-weight: 700; }
.doc-sap__migas .sep { color: var(--gris-claro); }
.mapa-tipo--anticipo, .mapa-nodo--anticipo { --tipo: #5A6B2F; --tipo-fondo: #F2F6E4; }

/* ══ Celular (360-430 px) ═════════════════════════════════════════════════════════════════════════════════════════
   Decisiones: las tablas anchas pasan a tarjetas (cada línea con sus etiquetas, sin desplazamiento lateral); las
   etiquetas salen de CSS por posición de columna (sin atributos nuevos). Modales a pantalla completa con la barra
   de título fija (Cerrar siempre visible) y, en «Registrar compra», el pie Guardar/Cancelar fijo abajo.
   Botones y enlaces de acción de al menos 40 px de alto. */

/* Contenedores en rejilla: una tabla ancha dentro no debe ensanchar el modal (sirve a todo ancho). */
.doc-sap, .mapa { grid-template-columns: minmax(0, 1fr); }

/* ── Esqueleto: menú en una franja de chips (tablet y celular) ── */
@media (max-width: 900px) {
  .marco { min-height: 0; }
  .menu { display: flex; align-items: center; gap: 6px; padding: 6px 12px; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu__modulo { display: flex; align-items: center; gap: 4px; flex: none; }
  .menu__modulo + .menu__modulo { border-left: 1px solid var(--linea); padding-left: 6px; }
  .menu__titulo, .menu__seccion { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .menu ul { display: flex; gap: 4px; margin: 0; }
  .menu__enlace { display: flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 99px; white-space: nowrap;
                  border: 1px solid var(--linea); font-size: 14px; }
  .menu__enlace--activo { border-color: var(--verde); }
  .menu__enlace--activo::before { display: none; }
  .menu__vacio { padding: 4px 0; font-size: 13px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .barra-sup { padding: 8px 12px; gap: 10px; }
  .barra-sup__marca { gap: 10px; min-width: 0; }
  .barra-sup__marca img { height: 28px; }
  .barra-sup__producto { font-size: 11px; letter-spacing: .12em; padding-left: 10px; white-space: nowrap; }
  .barra-sup .boton { min-height: 40px; padding: 8px 12px; }
  .contenido { padding: 10px 12px 40px; }
  .migas ol { font-size: 12.5px; margin-bottom: 6px; }

  /* Botones cómodos para el dedo */
  .boton { min-height: 40px; }
  .boton--chico { padding: 8px 12px; font-size: 14px; }
  .boton--enlace { min-height: 40px; }
  .boton-pdf { min-height: 40px; padding: 4px 10px 4px 6px; font-size: 13.5px; }
  .flecha-sap { width: 30px; height: 30px; margin: -7px -3px -5px; vertical-align: middle; }

  /* Acceso */
  body.acceso { padding: 14px 12px; place-items: start center; }
  .acceso__panel { margin-top: 4vh; padding: 22px 18px 24px; }
  .acceso__logo { height: 40px; }
  .acceso__panel h1 { font-size: 22px; }
  .formulario input { min-height: 48px; }
  .formulario .boton { min-height: 48px; }
  .codigos { gap: 6px 12px; padding-left: 30px; }
  .acceso__panel > .boton { width: 100%; justify-content: center; min-height: 48px; }

  /* Cabecera del informe */
  .cabecera { gap: 8px; margin-bottom: 10px; }
  .cabecera h1 { font-size: 24px; }
  .sello { justify-content: flex-start; gap: 6px; }
  .sello__corte b { font-size: 15px; }
  .filtro { margin: 0 0 10px; }
  .filtro select { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; }

  /* Tarjetas de resumen */
  .kpis { gap: 8px; }
  .kpi { padding: 9px 10px 8px 13px; }
  .kpi__etiqueta { font-size: 10px; }
  .kpi__valor { font-size: 26px; }
  .kpi__detalle { font-size: 12.5px; }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .distribucion { padding: 10px 12px; }
  .leyenda { gap: 4px 12px; font-size: 12.5px; }

  /* Barra de atajos 1-6: una sola línea */
  .atajos { flex-wrap: nowrap; gap: 2px; justify-content: space-between; margin: 12px -12px 0; padding: 4px 8px;
            overflow-x: auto; scrollbar-width: none; }
  .atajos::-webkit-scrollbar { display: none; }
  .atajos__item { flex: none; min-height: 40px; gap: 4px; padding: 3px 8px 3px 3px; }
  .atajos__num { width: 26px; height: 26px; font-size: 12.5px; }
  .atajos__conteo { font-size: 14px; }
  .seccion { scroll-margin-top: 54px; margin-top: 22px; }

  /* Encabezado de sección */
  .seccion__cab { gap: 4px 10px; align-items: start; }
  .seccion__num { width: 28px; height: 28px; font-size: 15px; }
  .seccion__cab h2 { font-size: 17px; gap: 6px; }
  .seccion__cab p { font-size: 13px; }
  .seccion__total b { display: inline; font-size: 15px; margin-right: 6px; }

  /* Gestión de compras */
  .guia-gestion { gap: 6px 12px; }
  .guia-gestion > span:first-child { flex-basis: 100%; }
  .resumen-gestion__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .resumen-gestion__item { justify-content: space-between; padding: 6px 10px; }
  .resumen-gestion__item.total { margin-left: 0; }

  /* ── Tablas como tarjetas ── */
  .tabla-marco:has(> .tabla--tarjetas) { background: none; border: 0; border-radius: 0; overflow: visible; }
  .tabla--tarjetas, .tabla--tarjetas > tbody, .tabla--tarjetas > tfoot { display: block; width: 100%; }
  .tabla--tarjetas > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla--tarjetas tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; align-items: start; }
  .tabla--tarjetas td, .tabla--tarjetas tfoot th { display: block; padding: 0; border: 0; text-align: left; white-space: normal;
                                                  min-width: 0 !important; max-width: none !important; width: auto !important; }
  .tabla--tarjetas td[colspan] { grid-column: 1 / -1; }
  .tabla--tarjetas tbody tr:hover td, .tabla--tarjetas td.gestion, .tabla--tarjetas tr:hover td.gestion { background: transparent; }
  .tabla--tarjetas td::before { display: block; font: 600 11.5px/1.25 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--gris); margin-bottom: 2px; }
  .tabla--tarjetas td.cod { font-size: 15px; overflow-wrap: anywhere; }
  .tabla--tarjetas td.desc { font-size: 14px; color: var(--tinta-2); }
  .tabla--tarjetas td.num { font-size: 16px; text-align: left; }
  .tabla--tarjetas .dias { justify-content: flex-start; min-width: 0; }
  .tabla--tarjetas .acciones-admin { flex-wrap: nowrap; }
  .tabla--tarjetas td.permisos-resumen { display: flex; }
  .tabla--tarjetas .um { font-size: 11.5px; }
  .tabla--tarjetas .compra small, .tabla--tarjetas .sync__mensaje { max-width: none; }

  /* Tarjeta = documento (secciones 1-4 y 6): cabecera del pedido arriba y sus líneas debajo */
  .tabla--tarjetas > tbody.pedido { background: #fff; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; margin-bottom: 10px;
                                    box-shadow: 0 1px 2px rgba(5,7,8,.04); }
  .tabla--tarjetas > tbody.pedido > tr + tr { border-top: 1px solid var(--linea); }
  .tabla--tarjetas tr.pedido-cab { display: block; padding: 0; }
  .tabla--tarjetas tr.pedido-cab td { display: block; padding: 9px 12px 8px; background: var(--fondo); }
  .pedido-cab__fila { gap: 2px 10px; }
  .pedido-cab__doc { font-size: 15.5px; }
  .pedido-cab__valor { order: 1; }
  .pedido-cab__cliente { order: 2; flex-basis: 100%; }
  .pedido-cab__meta { order: 3; flex-basis: 100%; font-size: 12.5px; }
  .pedido-cab__fila > .insignia { order: 4; }

  /* Secciones 1-3: Artículo, Descripción, Alm., Pendiente, Stock asig., Faltante, Compras en curso, Entrega, Días */
  .tabla--pendientes tr:not(.pedido-cab) { grid-template-areas: "cod cod cod" "des des des" "pen asi fal" "com com com" "ent dia alm"; }
  .tabla--pendientes td:nth-child(1) { grid-area: cod; }
  .tabla--pendientes td:nth-child(2) { grid-area: des; }
  .tabla--pendientes td:nth-child(3) { grid-area: alm; }
  .tabla--pendientes td:nth-child(4) { grid-area: pen; }
  .tabla--pendientes td:nth-child(5) { grid-area: asi; }
  .tabla--pendientes td:nth-child(6) { grid-area: fal; }
  .tabla--pendientes td:nth-child(7) { grid-area: com; }
  .tabla--pendientes td:nth-child(8) { grid-area: ent; }
  .tabla--pendientes td:nth-child(9) { grid-area: dia; }
  .tabla--pendientes td:nth-child(3)::before { content: "Almacén"; }
  .tabla--pendientes td:nth-child(4)::before { content: "Pendiente"; }
  .tabla--pendientes td:nth-child(5)::before { content: "Stock asignado"; }
  .tabla--pendientes td:nth-child(6)::before { content: "Faltante"; }
  .tabla--pendientes td:nth-child(7)::before { content: "Estado de compra"; }
  .tabla--pendientes td:nth-child(8)::before { content: "Entrega"; }
  .tabla--pendientes td:nth-child(9)::before { content: "Días"; }

  /* Sección 4: Artículo, Descripción, Alm., Pendiente, Stock alm., Entrega, Días, Estado */
  .tabla--stock tr:not(.pedido-cab) { grid-template-areas: "cod cod est" "des des des" "pen sto alm" "ent dia dia" "com com com"; }
  .tabla--stock td:nth-child(9) { grid-area: com; }
  .tabla--stock td:nth-child(1) { grid-area: cod; }
  .tabla--stock td:nth-child(2) { grid-area: des; }
  .tabla--stock td:nth-child(3) { grid-area: alm; }
  .tabla--stock td:nth-child(4) { grid-area: pen; }
  .tabla--stock td:nth-child(5) { grid-area: sto; }
  .tabla--stock td:nth-child(6) { grid-area: ent; }
  .tabla--stock td:nth-child(7) { grid-area: dia; }
  .tabla--stock td:nth-child(8) { grid-area: est; justify-self: end; }
  .tabla--stock td:nth-child(3)::before { content: "Almacén"; }
  .tabla--stock td:nth-child(4)::before { content: "Pendiente"; }
  .tabla--stock td:nth-child(5)::before { content: "Stock almacén"; }
  .tabla--stock td:nth-child(6)::before { content: "Entrega"; }
  .tabla--stock td:nth-child(7)::before { content: "Días"; }

  /* Sección 6: kits (Artículo, Descripción, Pendiente, Entrega, Días, Estado) y sus componentes debajo */
  .tabla--kits tr:not(.pedido-cab) { grid-template-areas: "cod cod est" "des des des" "pen ent dia"; }
  .tabla--kits td:nth-child(1) { grid-area: cod; }
  .tabla--kits td:nth-child(2) { grid-area: des; }
  .tabla--kits td:nth-child(3) { grid-area: pen; }
  .tabla--kits td:nth-child(4) { grid-area: ent; }
  .tabla--kits td:nth-child(5) { grid-area: dia; }
  .tabla--kits td:nth-child(6) { grid-area: est; justify-self: end; }
  .tabla--kits tr:not(.componente) td:nth-child(3)::before { content: "Pendiente"; }
  .tabla--kits tr:not(.componente) td:nth-child(4)::before { content: "Entrega"; }
  .tabla--kits tr:not(.componente) td:nth-child(5)::before { content: "Días"; }
  .tabla--kits tr.componente { grid-template-areas: "cod cod est" "des des des" "pen com com"; padding-left: 26px; background: #FAFBFB; }
  .tabla--kits tr.componente td { background: transparent; }
  .tabla--kits tr.componente td:nth-child(4) { grid-area: com; }
  .tabla--kits tr.componente td:nth-child(5) { grid-area: est; justify-self: end; }
  .tabla--kits tr.componente td:nth-child(3)::before { content: "Pedido"; }
  .tabla--kits tr.componente td:nth-child(4)::before { content: "Compras en curso"; }
  .tabla--kits tr.componente td.cod { padding-left: 0; font-size: 14px; }
  .tabla--kits tr.componente td.cod::before { display: inline; margin: 0 5px 0 -16px; font: inherit; color: var(--gris-claro); }
  .tabla--kits .resumen-kit { margin-top: 2px; }

  /* Sección 5: una tarjeta por artículo */
  .tabla--compras > tbody > tr { background: #fff; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 10px;
                                 box-shadow: 0 1px 2px rgba(5,7,8,.04); grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tabla--compras td:nth-child(1) { grid-area: cod; }
  .tabla--compras td:nth-child(2) { grid-area: des; }
  .tabla--compras td:nth-child(3) { grid-area: ped; }
  .tabla--compras td:nth-child(4) { grid-area: fal; }
  .tabla--compras td:nth-child(5) { grid-area: sto; }
  .tabla--compras td:nth-child(6) { grid-area: com; }
  .tabla--compras td:nth-child(3)::before { content: "Pedidos"; }
  .tabla--compras td:nth-child(4)::before { content: "Faltante"; }
  .tabla--compras td:nth-child(5)::before { content: "Stock"; }
  .tabla--compras td:nth-child(6)::before { content: "OC abiertas"; }
  .tabla--compras td.entrega { text-align: right; }
  .tabla--compras td.entrega::before { content: "1.ª entrega"; }
  .tabla--compras td.entrega .dias { margin-top: 0; margin-left: 4px; }
  /* Sin columnas de gestión: …, Por comprar (7), 1.ª entrega (8) */
  .tabla--compras:not(.tabla--gestion) > tbody > tr { grid-template-areas: "cod cod cod cod ent ent" "des des des des des des" "fal fal sto sto por por" "com com com com ped ped"; }
  .tabla--compras:not(.tabla--gestion) td:nth-child(7) { grid-area: por; }
  .tabla--compras:not(.tabla--gestion) td:nth-child(7)::before { content: "Por comprar"; }
  .tabla--compras:not(.tabla--gestion) td:nth-child(8) { grid-area: ent; }
  /* Con gestión: …, Comprado (7), Por comprar (8), 1.ª entrega (9), Estado de compra (10), Compras (11) */
  .tabla--gestion > tbody > tr { grid-template-areas: "cod cod cod cod ent ent" "des des des des des des" "fal fal cmp cmp por por"
                                                      "com com com com ped sto" "est est est est est est" "acc acc acc acc acc acc"; }
  .tabla--gestion td:nth-child(7) { grid-area: cmp; }
  .tabla--gestion td:nth-child(7)::before { content: "Comprado"; }
  .tabla--gestion td:nth-child(8) { grid-area: por; }
  .tabla--gestion td:nth-child(8)::before { content: "Por comprar"; }
  .tabla--gestion td:nth-child(9) { grid-area: ent; }
  .tabla--gestion td:nth-child(10) { grid-area: est; padding-top: 8px; border-top: 1px dashed var(--linea); }
  .tabla--gestion td:nth-child(10)::before { content: "Estado de compra"; }
  .tabla--gestion td:nth-child(11) { grid-area: acc; }
  .tabla--compras td.cantidad[class*="cantidad--"] { padding: 4px 6px 4px 9px; margin: -4px 0 0 -9px; border-radius: 6px; }
  .tabla--compras td.cantidad .um { display: inline; margin-left: 3px; }
  .tabla--compras td:nth-child(3), .tabla--compras td:nth-child(5) { font-size: 15px; }
  .tabla--compras td.compra { font-size: 13.5px; }
  .tabla--compras .compra b { display: inline; }
  .tabla--compras .compra small { display: block; }
  .tabla--compras .estado small, .tabla--compras .estado-compra { white-space: normal; }
  .tabla--compras .estado-compra { font-size: 14.5px; }
  .tabla--compras .sync { margin: 4px 0 0; }
  .tabla--tarjetas.tabla--compras .acciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tabla--tarjetas.tabla--compras .acciones .boton { min-height: 44px; padding: 8px 12px; font-size: 15px; justify-content: center; margin: 0; }
  .tabla--tarjetas .acciones__fila { display: flex; gap: 6px; margin: 0; }
  .tabla--tarjetas .acciones__fila .boton { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; font-size: 15px; }
  .tabla--tarjetas .acciones__fila .boton-pdf { min-height: 44px; min-width: 64px; justify-content: center; font-size: 15px; }
  .subtitulo-tabla { margin-top: 18px; }

  /* ── Modales a pantalla completa ── */
  .modal, .modal--ancho, .modal--sap, .modal--mapa { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0;
                                                     background: var(--fondo); }
  dialog.modal { padding: 0 12px 16px; }
  dialog.modal:has(.registrar__pie) { padding-bottom: 0; }
  dialog.modal--sap, dialog.modal--mapa { padding: 0; }
  .modal__cab { position: sticky; top: 0; z-index: 3; align-items: center; gap: 10px; margin: 0 -12px 12px; padding: 10px 12px;
                background: #fff; border-bottom: 1px solid var(--linea); }
  .modal__cab > div { min-width: 0; }
  .modal__cab h2 { font-size: 19px; overflow-wrap: anywhere; }
  .modal__cab .tenue { font-size: 13.5px; }
  .modal__cab [data-cerrar-modal] { flex: none; }
  .modal .registrar__pie { position: sticky; bottom: 0; z-index: 3; margin: 12px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
                           background: #fff; border-top: 1px solid var(--linea); box-shadow: 0 -6px 16px rgba(5,7,8,.06); }
  .registrar__pie .boton { flex: 1 1 0; justify-content: center; }
  .modal .nota { margin-bottom: 4px; }

  /* Registrar compra */
  .registrar__datos { grid-template-columns: 1fr; gap: 12px; }
  .registrar__datos .campo-fecha input[data-fecha] { max-width: none; }
  .segmento { display: flex; width: 100%; }
  .segmento__opcion { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  .registrar__campo { flex: 1 1 100%; }
  .campo-fecha input[data-fecha] { flex: 1 1 auto; width: auto; font-size: 16px; }
  .registrar__campo input { font-size: 16px; }
  .campo-fecha__calendario { width: 48px; }
  .registrar__atajos > .tenue { display: none; }
  .registrar__atajos .boton { flex: 1 1 auto; justify-content: center; }
  /* Reparto por pedido: Pedido, Cliente, OC cliente, Entrega, Situación, Falta por comprar, Compra ahora, Anexo */
  .tabla--registrar > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ped ent" "cli cli" "oc sit" "fal com" "anx anx";
                                   background: #fff; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; }
  .tabla--registrar > tbody > tr > td { background: transparent; }
  .tabla--registrar tr.con-error { background: var(--vencido-fondo); border-color: #F0B6BD; }
  .tabla--registrar tr.cubierta { background: #FAFBFB; }
  .tabla--registrar td:nth-child(1) { grid-area: ped; }
  .tabla--registrar td:nth-child(2) { grid-area: cli; font-weight: 700; color: var(--tinta); }
  .tabla--registrar td:nth-child(3) { grid-area: oc; }
  .tabla--registrar td:nth-child(4) { grid-area: ent; text-align: right; }
  .tabla--registrar td:nth-child(5) { grid-area: sit; white-space: normal; }
  .tabla--registrar td:nth-child(6) { grid-area: fal; align-self: end; font-size: 18px; font-weight: 700; }
  .tabla--registrar td:nth-child(7) { grid-area: com; }
  .tabla--registrar td:nth-child(8) { grid-area: anx; }
  .tabla--registrar td:nth-child(3)::before { content: "OC cliente"; }
  .tabla--registrar td:nth-child(4)::before { content: "Entrega"; }
  .tabla--registrar td:nth-child(5)::before { content: "Situación"; }
  .tabla--registrar td:nth-child(6)::before { content: "Falta por comprar"; }
  .tabla--registrar td:nth-child(7)::before { content: "Compra ahora"; color: var(--verde-oscuro); }
  .tabla--registrar td:nth-child(8)::before { content: "Anexo"; }
  .tabla--registrar td:nth-child(8):has(> .sin-anexo:only-child) { font-size: 13px; }
  .tabla--registrar td:nth-child(8):has(> .sin-anexo:only-child)::before { content: none; }
  .tabla--registrar > tbody > tr { gap: 6px 10px; }
  .tabla--registrar .cantidad-input { width: 100%; min-height: 46px; font-size: 18px; }
  .tabla--registrar > tfoot > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "tot tot" "fal com" "dif dif";
                                   background: #fff; border: 2px solid var(--tinta); border-radius: 10px; }
  .tabla--registrar > tfoot th, .tabla--registrar > tfoot td { text-align: left; padding: 0; }
  .tabla--registrar > tfoot th { grid-area: tot; }
  .tabla--registrar > tfoot td:nth-of-type(1) { grid-area: fal; }
  .tabla--registrar > tfoot td:nth-of-type(2) { grid-area: com; }
  .tabla--registrar > tfoot td:nth-of-type(3) { grid-area: dif; }
  .tabla--registrar > tfoot td:nth-of-type(1)::before { content: "Falta por comprar"; }
  .tabla--registrar > tfoot td:nth-of-type(2)::before { content: "Compra ahora"; }
  .tabla--registrar > tfoot td:nth-of-type(3):has(> span:empty) { display: none; }
  .tabla--registrar > tfoot b { font-size: 18px; }

  /* Documentos de compra: Pedido, Cliente, OC del cliente, Faltante, Entrega, Anexo */
  .tabla--docs-compra > tbody > tr { grid-template-areas: "ped ped ent" "cli cli cli" "oc oc fal" "anx anx anx";
                                     background: #fff; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; }
  .tabla--docs-compra td:nth-child(1) { grid-area: ped; }
  .tabla--docs-compra td:nth-child(2) { grid-area: cli; font-weight: 700; color: var(--tinta); }
  .tabla--docs-compra td:nth-child(3) { grid-area: oc; }
  .tabla--docs-compra td:nth-child(4) { grid-area: fal; text-align: right; }
  .tabla--docs-compra td:nth-child(5) { grid-area: ent; text-align: right; }
  .tabla--docs-compra td:nth-child(6) { grid-area: anx; }
  .tabla--docs-compra td:nth-child(3)::before { content: "OC del cliente"; }
  .tabla--docs-compra td:nth-child(4)::before { content: "Faltante"; }
  .tabla--docs-compra td:nth-child(5)::before { content: "Entrega"; }
  .tabla--docs-compra td:nth-child(6)::before { content: "Anexos"; }
  .anexos { gap: 6px; }

  /* Historial de compras */
  .lote { padding: 10px 12px; }
  .lote__total { font-size: 17px; }
  .lote__detalle { width: 100%; font-size: 13.5px; }
  .lote__detalle th, .lote__detalle td { padding-left: 4px; padding-right: 4px; }
  .lote__acciones { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lote__acciones .boton, .lote__anular summary { width: 100%; justify-content: center; min-height: 44px; margin: 0; }
  .lote__anular[open] form { min-width: 0; }
  .lote__anular input[type=text] { font-size: 16px; min-height: 44px; }
  .historial__pie { justify-content: space-between; }

  /* Documento como en SAP */
  .doc-sap { padding: 0 12px 16px; gap: 10px; }
  .doc-sap__barra { gap: 8px; margin: 0 -12px; padding: 10px 12px 8px; }
  .doc-sap__barra::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .doc-sap__migas { order: -1; flex-basis: 100%; }
  .doc-sap__titulo { order: 0; flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 4px 8px; }
  .doc-sap__titulo h2 { font-size: 18px; }
  .doc-sap__frescura { display: contents; }
  .doc-sap__frescura > * { order: 3; }
  .doc-sap__frescura > [data-cerrar-modal] { order: 1; flex: none; }
  .doc-sap__cabecera { background: #fff; padding: 8px 12px; }
  .doc-sap__col > div, .doc-sap__col--ancha > div { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .doc-sap__col dd { overflow-wrap: anywhere; }
  .doc-sap__pestanas { overflow-x: auto; scrollbar-width: none; }
  .doc-pestana { flex: 1 0 auto; min-height: 44px; padding: 8px 10px; }
  .doc-panel > .doc-sap__col { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; }
  .doc-sap__lineas { max-height: none; overflow: visible; }
  .doc-sap__pie { gap: 10px; }
  .doc-totales { background: #fff; }
  .doc-sap__comentarios { background: #fff; border: 1px solid var(--linea); }
  /* Líneas: #, Artículo, Descripción, Cantidad, Abierta, Entregada, UM, [Precio, % desc., Impuesto, Total], Alm., Estado */
  .tabla--doc > tbody > tr { grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px;
                             grid-template-areas: "num cod cod alm" "des des des des" "can abi ent um" "est est est est"; }
  .tabla--doc.tabla--con-precios > tbody > tr { grid-template-areas: "num cod cod alm" "des des des des" "can abi ent um" "pre pre dto imp" "tot tot est est"; }
  .tabla--doc td:nth-child(1) { grid-area: num; font-size: 14px; }
  .tabla--doc td:nth-child(1)::before { content: "Línea"; }
  .tabla--doc td:nth-child(2) { grid-area: cod; }
  .tabla--doc td:nth-child(3) { grid-area: des; }
  .tabla--doc td:nth-child(4) { grid-area: can; }
  .tabla--doc td:nth-child(5) { grid-area: abi; }
  .tabla--doc td:nth-child(6) { grid-area: ent; }
  .tabla--doc td:nth-child(7) { grid-area: um; }
  .tabla--doc td:nth-child(4)::before { content: "Cantidad"; }
  .tabla--doc td:nth-child(5)::before { content: "Abierta"; }
  .tabla--doc td:nth-child(6)::before { content: "Entregada"; }
  .tabla--doc.tabla--factura td:nth-child(6)::before { content: "Facturada"; }
  .tabla--doc td:nth-child(7)::before { content: "UM"; }
  .tabla--doc:not(.tabla--con-precios) td:nth-child(8), .tabla--con-precios td:nth-child(12) { grid-area: alm; text-align: right; }
  .tabla--doc:not(.tabla--con-precios) td:nth-child(8)::before, .tabla--con-precios td:nth-child(12)::before { content: "Almacén"; }
  .tabla--doc:not(.tabla--con-precios) td:nth-child(9), .tabla--con-precios td:nth-child(13) { grid-area: est; }
  .tabla--con-precios td:nth-child(13) { text-align: right; align-self: end; }
  .tabla--con-precios td:nth-child(8) { grid-area: pre; }
  .tabla--con-precios td:nth-child(9) { grid-area: dto; }
  .tabla--con-precios td:nth-child(10) { grid-area: imp; font-size: 14px; }
  .tabla--con-precios td:nth-child(11) { grid-area: tot; font-size: 17px; }
  .tabla--con-precios td:nth-child(8)::before { content: "Precio"; }
  .tabla--con-precios td:nth-child(9)::before { content: "% desc."; }
  .tabla--con-precios td:nth-child(10)::before { content: "Impuesto"; }
  .tabla--con-precios td:nth-child(11)::before { content: "Total"; }
  .tabla--doc tr.linea--origen { background: #E6F6EC; border-color: var(--verde); box-shadow: inset 4px 0 0 var(--verde); }
  .tabla--doc tr.linea--origen td, .tabla--doc tr.linea--origen td:first-child { background: transparent !important; box-shadow: none; }
  .tabla--doc tr.linea--componente { margin-left: 14px; }
  .tabla--doc tr.linea--componente td.cod { padding-left: 0; }

  /* Mapa de relaciones */
  .mapa { padding: 0 12px 14px; gap: 8px; }
  .mapa__barra { flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0 -12px; padding: 10px 12px 8px; }
  .mapa__barra::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .mapa__barra > div:first-child { flex: 1 1 0; min-width: 0; }
  .mapa__barra h2 { font-size: 18px; }
  .mapa__acciones { display: contents; }
  .mapa__acciones > * { order: 3; }
  .mapa__acciones > [data-cerrar-modal] { order: 1; flex: none; }
  .mapa__leyenda { flex-wrap: nowrap; gap: 4px 12px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 12px; margin: 0; }
  .mapa__leyenda::-webkit-scrollbar { display: none; }
  .mapa__leyenda > li { flex: none; }
  .mapa__lienzo--libre { height: calc(100dvh - 176px); min-height: 300px; }
  .mapa__controles { left: 8px; bottom: 8px; }
  .mapa__controles button { width: 44px; height: 42px; }
  .mapa__mini { display: none; }

  /* Inicio */
  .indice { padding: 12px 14px; }
  .indice__lista li { flex-direction: column; gap: 2px; padding: 8px 0; }
  .indice__lista a { display: inline-flex; align-items: center; min-height: 32px; }

  /* Administración */
  .pestanas__item { display: flex; align-items: center; min-height: 44px; }
  .barra-acciones .boton { width: 100%; justify-content: center; }
  .form-admin { padding: 14px 12px; }
  .form-admin__rejilla { grid-template-columns: minmax(0, 1fr); }
  .form-admin__campo--ancho { grid-column: auto; }
  .form-admin__campo input, .form-admin__campo select { min-height: 44px; font-size: 16px; }
  .form-admin__vendedores, .matriz { padding: 8px 10px 10px; }
  .opcion { min-height: 40px; margin-right: 12px; }
  .opcion input, .form-admin__check input { width: 20px; height: 20px; accent-color: var(--verde-oscuro); }
  .matriz__tabla th, .matriz__tabla td { padding-left: 4px; padding-right: 4px; }
  .matriz__tabla th[scope="row"] { font-size: 13.5px; white-space: normal; border-bottom-color: var(--linea); }
  .matriz__opcion { width: 44px; height: 40px; }
  .matriz__opcion input { width: 22px; height: 22px; }
  .interruptor { min-height: 40px; }
  .form-admin .registrar__pie .boton { flex: 1 1 0; justify-content: center; }
  .tabla--usuarios > tbody > tr, .tabla--perfiles > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff;
                                   border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; }
  /* Usuario, Nombre, Perfil, Vendedores, Segundo factor, Estado, Acciones */
  .tabla--usuarios > tbody > tr { grid-template-areas: "usu est" "nom nom" "per tfa" "ven ven" "acc acc"; }
  .tabla--usuarios td:nth-child(1) { grid-area: usu; }
  .tabla--usuarios td:nth-child(2) { grid-area: nom; }
  .tabla--usuarios td:nth-child(3) { grid-area: per; }
  .tabla--usuarios td:nth-child(4) { grid-area: ven; }
  .tabla--usuarios td:nth-child(5) { grid-area: tfa; }
  .tabla--usuarios td:nth-child(6) { grid-area: est; justify-self: end; }
  .tabla--usuarios td:nth-child(7) { grid-area: acc; }
  .tabla--usuarios td:nth-child(2)::before { content: "Persona"; }
  .tabla--usuarios td:nth-child(3)::before { content: "Área y perfil"; }
  .tabla--usuarios td:nth-child(4)::before { content: "Ventas"; }
  .tabla--usuarios td:nth-child(5)::before { content: "Segundo factor"; }
  /* Perfil, Usuarios, Pedidos atrasados, Acciones */
  .tabla--perfiles > tbody > tr { grid-template-areas: "per usu" "res res" "acc acc"; }
  .tabla--perfiles td:nth-child(1) { grid-area: per; }
  .tabla--perfiles td:nth-child(2) { grid-area: usu; text-align: right; }
  .tabla--perfiles td:nth-child(3) { grid-area: res; }
  .tabla--perfiles td:nth-child(4) { grid-area: acc; }
  .tabla--perfiles td:nth-child(2)::before { content: "Usuarios"; }
  .tabla--perfiles td:nth-child(3)::before { content: "Pedidos atrasados"; flex-basis: 100%; }
  .acciones-admin { display: flex; }
  .acciones-admin .boton { flex: 1 1 auto; justify-content: center; }
  .acciones-admin form { flex: 1 1 auto; display: flex; }
  .acciones-admin form .boton { width: 100%; }
  .tabla--perfiles td:nth-child(4) .boton { width: 100%; justify-content: center; }
}