/* Maro — hoja de estilos (rediseno completo, sept. 2026; paleta del logo, BRAND-01, oct. 2026).
   Inter como letra base (DS01a, oct. 2026; antes Arial 12) y escala de 7 tamanos en :root (--fs-*). Nada en mayuscula forzada:
   los titulos van en Tipo Titulo en el texto. Un solo color de acento, grises
   neutros y jerarquia por tamano, peso y espacio, no por fondos de colores.
   Cifras con digitos tabulares y alineadas a la derecha. */

:root {
  --fondo: #f3f6f9;      /* BRAND-01: gris claro del logo */
  --papel: #f3f6f9;
  --superficie: #ffffff;
  --superficie-2: #f8f9fb;
  --superficie-3: #f1f3f6;
  --borde: #e5e7eb;
  --borde-fuerte: #d0d5dd;
  --tinta: #151a22;
  --tinta-suave: #475569;   /* BRAND-01: gris oscuro del logo, 7,58:1 sobre blanco y 6,99:1 sobre --fondo (antes #475467) */
  --tinta-tenue: #5f6b7a;   /* DS01a: 5,43:1 sobre blanco, 4,97:1 sobre --fondo (antes #8a93a2, 3,10:1) */
  --borde-control: #7b8494; /* DS01a: borde de campos y controles, 3,77:1 sobre blanco */
  /* BRAND-01: la paleta sale del logo de Maro. --marca (azul marino) es el color de botones primarios, títulos de sección, enlaces activos y foco
     (15,15:1 con texto blanco). El turquesa puro --acento (2,86:1 sobre blanco) va SOLO en rellenos, bordes e indicadores y sobre fondos oscuros; para
     texto, enlaces o íconos pequeños sobre claro se usa --acento-texto (5,56:1 sobre blanco). */
  --marca: #0d2742;
  --marca-oscura: #081a2e;
  --marca-clara: #e6f6f5;
  --marca-borde: #b3e0dd;
  --acento: #01aba3;
  --acento-texto: #00756f;
  --degradado: linear-gradient(135deg, #0d2742 0%, #00756f 100%);        /* botones primarios, pestañas activas: texto blanco >= 5,5:1 en ambos extremos */
  --degradado-vivo: linear-gradient(135deg, #0d2742 0%, #01aba3 100%);   /* solo adornos sin texto (barritas de título, logo de documento) */
  --menu-fondo: #0d2742;
  --menu-fondo-2: #123456;
  --menu-tinta: #b8c7d9;
  --menu-grupo: #8fa3ba;
  --ancho-riel: 72px;
  --exito: #16794a;
  --exito-texto: #0f6a3d;
  --exito-claro: #e7f6ee;
  --alerta: #8a4b00;
  --alerta-clara: #fff4dc;
  --error: #b42318;
  --error-oscuro: #912018;
  --error-claro: #fdecea;
  --error-borde: #d1584c;
  --info: #1e5a7a;
  --info-clara: #e8f1f6;
  --saber: #00756f;
  --saber-claro: #f1f8f8;

  /* Graficas: paleta validada para daltonismo. Azul lo que entra, naranja lo que sale. */
  --serie-entra: #2a78d6;
  --serie-sale: #eb6834;
  --edad-1: #86b6ef;
  --edad-2: #5598e7;
  --edad-3: #2a78d6;
  --edad-4: #1c5cab;
  --edad-5: #104281;
  --estado-bien: #0ca30c;
  --estado-atencion: #fab219;
  --estado-mal: #d03b3b;

  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-alta: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
  --radio: 12px;
  --radio-chico: 8px;
  --ancho-menu: 264px;

  /* DS01a: letra Inter (local, /fuentes/InterVariable.woff2) y escala de 7 tamaños. Un tamaño nuevo se agrega aquí, no suelto. */
  --letra: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-chica: 14px;    /* etiquetas, encabezados de columna, chips, notas, migas */
  --fs-base: 16px;     /* cuerpo, celdas, campos, botones */
  --fs-seccion: 18px;  /* título de panel */
  --fs-dialogo: 20px;  /* título de diálogo, total del Resumen */
  --fs-pantalla: 24px; /* h2 de pantalla */
  --fs-cifra: 26px;    /* cifra de tarjeta, consecutivo */
  --fs-banda: 28px;    /* título en la banda */
  --ai-texto: 1.5; --ai-tabla: 1.4; --ai-titulo: 1.25;
  --peso-normal: 400; --peso-fuerte: 700;
  --alto-control: 40px; --alto-control-chico: 32px; --alto-control-movil: 44px;
  --radio-control: 8px;
  --foco: 0 0 0 2px #ffffff, 0 0 0 4px var(--marca);
  --sombra-primario: 0 4px 12px rgba(13, 39, 66, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--letra);
  font-size: var(--fs-base);
  line-height: var(--ai-texto);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: bold; }
code { font-family: Consolas, "Courier New", monospace; font-size: var(--fs-chica); }

.cifra, td.cifra, th.cifra, input[type="number"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.negativo { color: var(--error); }
.tenue, td.tenue { color: var(--tinta-tenue); }
.ayuda { color: var(--tinta-tenue); font-size: var(--fs-chica); font-weight: normal; }
.derecha { margin-left: auto; }
svg.icono { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================ Ingreso */

#ingreso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 10% -10%, #d7f0ee 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #e3ebf3 0%, transparent 60%),
    var(--fondo);
}
.tarjeta-ingreso {
  background: var(--superficie);
  padding: 40px 36px 34px;
  border-radius: 16px;
  width: min(410px, 100%);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
}
.logo-ingreso { margin-bottom: 18px; }
.tarjeta-ingreso h1 { margin: 0 0 4px; font-size: var(--fs-pantalla); letter-spacing: -.01em; }
.tarjeta-ingreso p.lema { margin: 0 0 26px; color: var(--tinta-suave); }
.tarjeta-ingreso .rejilla { gap: 14px; }
.tarjeta-ingreso button.accion { width: 100%; padding: 11px; }
/* BRAND-01: el encabezado de la pantalla de ingreso es el logo de Maro (dentro del h1, con alt «Maro»). */
.tarjeta-ingreso h1.logo-ingreso { margin: 0 0 18px; line-height: 0; }
.logo-ingreso img { display: block; width: auto; max-width: 100%; height: 60px; }

/* ================================================================== Marco */

#aplicacion { display: none; min-height: 100vh; grid-template-columns: var(--ancho-menu) minmax(0, 1fr); }
#aplicacion.visible { display: grid; }

#aplicacion > aside {
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px 0 12px;
}
#aplicacion > aside .marca { padding: 4px 18px 16px; }
#aplicacion > aside .logo { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* BRAND-01 (compuerta A-116 y A-240): con el logo de imagen, el nombre de la empresa y el botón «Menú» en una fila, el bloque no podía encogerse y ensanchaba 25 px
   la página a 390 px. El nombre (ya recortado con puntos suspensivos) cede el sitio. */
#aplicacion > aside .logo > div { min-width: 0; }
#aplicacion > aside .logo strong { display: block; font-size: var(--fs-base); color: var(--tinta); letter-spacing: -.01em; }
#aplicacion > aside .logo #nombre-empresa { display: block; font-size: var(--fs-chica); color: var(--tinta-tenue); line-height: 1.3;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aplicacion > aside .pie { display: none; }
/* BRAND-01: en el menú se ve UN logo a la vez. Celular y tableta (menú claro): el logo de letras oscuras. Escritorio (menú azul marino): el ícono
   blanco en el riel y el logo blanco con el menú abierto (ver el bloque del riel y los de menú fijo). */
#aplicacion > aside .logo img { width: auto; }
#aplicacion > aside .logo-claro { display: block; height: 34px; }
#aplicacion > aside .logo-riel, #aplicacion > aside .logo-oscuro { display: none; }

nav { overflow-y: auto; flex: 1; padding: 0 10px 8px; }
nav .grupo { padding: 16px 10px 6px; font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: bold; }
nav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; margin: 1px 0;
  background: none; border: 0; border-radius: var(--radio-chico);
  color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
nav button svg.icono { color: var(--tinta-tenue); }
nav button:hover { background: var(--superficie-3); color: var(--tinta); }
nav button:hover svg.icono { color: var(--tinta-suave); }
nav button.activo { background: var(--marca-clara); color: var(--marca-oscura); font-weight: bold; }
nav button.activo svg.icono { color: var(--marca); }
nav button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.columna { display: flex; flex-direction: column; min-width: 0; }

.barra-superior {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: 62px; padding: 0 28px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--borde);
}
.buscador-global { position: relative; flex: 1; max-width: 520px; }
.buscador-global > svg.icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); }
.buscador-global input {
  width: 100%; padding: 9px 14px 9px 38px; border-radius: 999px;
  background: var(--superficie-3); border: 1px solid transparent;
}
.buscador-global input:focus { background: var(--superficie); border-color: var(--marca-borde); }
.resultados-globales {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: 6px; max-height: 70vh; overflow-y: auto;
}
.resultados-globales.visible { display: block; }
.resultados-globales .grupo-resultado { padding: 8px 10px 4px; font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: bold; }
.resultados-globales button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: none; border-radius: var(--radio-chico); font: inherit; cursor: pointer; color: var(--tinta);
}
.resultados-globales button span { color: var(--tinta-tenue); font-size: var(--fs-chica); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultados-globales button:hover { background: var(--marca-clara); }
.vacio-menu { padding: 12px; color: var(--tinta-tenue); text-align: center; }

.acciones-superiores { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.desplegable { position: relative; }
.menu-desplegable {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; z-index: 35;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: 6px;
}
.menu-desplegable.derecha { left: auto; right: 0; }
.menu-desplegable.visible { display: block; }
.menu-desplegable button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: none; border-radius: var(--radio-chico);
  font: inherit; color: var(--tinta); cursor: pointer;
}
.menu-desplegable button:hover { background: var(--superficie-3); }
.menu-desplegable .cabeza-menu { padding: 10px 11px 12px; border-bottom: 1px solid var(--borde); margin-bottom: 6px; }
.menu-desplegable .cabeza-menu strong { display: block; }
.menu-desplegable .cabeza-menu span { display: block; color: var(--tinta-tenue); font-size: var(--fs-chica); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--degradado); color: #fff; font: inherit; font-weight: bold; font-size: var(--fs-chica);
}

main { padding: 26px 32px 72px; min-width: 0; }
header.titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
header.titulo .miga { font-size: var(--fs-chica); color: var(--tinta-tenue); margin-bottom: 2px; }
header.titulo h2 { margin: 0; font-size: var(--fs-pantalla); letter-spacing: -.015em; line-height: 1.2; }
header.titulo .contexto { color: var(--tinta-suave); font-size: var(--fs-chica); text-align: right; }
.para-que { color: var(--tinta-suave); font-size: var(--fs-chica); margin: 6px 0 22px; max-width: 92ch; }

.boton-menu { display: none; }

/* ================================================================ Bloques */

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel > h3 {
  margin: 0; padding: 16px 20px 14px; font-size: var(--fs-seccion); letter-spacing: -.005em;
  border-bottom: 1px solid var(--borde);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.panel > h3 .sub { font-weight: normal; font-size: var(--fs-chica); color: var(--tinta-tenue); }
.panel .cuerpo { padding: 18px 20px; }
.panel > table:first-child thead th:first-child { border-top-left-radius: var(--radio); }

.encabezado-acciones, .barra-acciones { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.encabezado-acciones { margin-bottom: 18px; }
.barra-acciones .campo { min-width: 140px; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.tres-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.cargando { padding: 32px; text-align: center; color: var(--tinta-tenue); }
.vacio { padding: 36px 20px; text-align: center; color: var(--tinta-tenue); }
.vacio strong { display: block; color: var(--tinta-suave); margin-bottom: 4px; font-size: var(--fs-base); }
/* ONB01g: el estado vacío que guía: un título corto y un solo botón (40 px, como todos los botones de la pantalla). */
.vacio.guia strong { margin-bottom: 14px; font-size: var(--fs-seccion); }
.vacio.guia .accion { min-height: var(--alto-control); }
.vacio.grande svg.icono { width: 40px; height: 40px; color: var(--borde-fuerte); margin-bottom: 8px; stroke-width: 1.5; }

/* Tarjetas de cifras (todas las pantallas comparten el mismo aspecto). */
.tarjetas, .kpis-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.tarjetas.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tarjeta, .kpi, .kpi-inicio {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 18px 20px 16px; min-width: 0;
  display: flex; flex-direction: column; gap: 4px; position: relative;
}
.tarjeta .etiqueta, .kpi .titulo, .kpi-inicio .etiqueta { font-size: var(--fs-chica); color: var(--tinta-suave); }
.tarjeta .valor, .kpi .valor, .kpi-inicio strong {
  font-size: var(--fs-cifra); font-weight: bold; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta .nota, .kpi .nota, .kpi-inicio .nota { font-size: var(--fs-chica); color: var(--tinta-tenue); }
.tarjeta .nota.mal, .kpi .nota.mal { color: var(--error); font-weight: bold; }
.kpi-inicio.malo strong, .kpi .valor.negativo { color: var(--error); }
.kpi-inicio.malo::before, .kpi.alerta::before, .kpi-inicio.atencion::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--error);
}
.kpi-inicio.atencion::before { background: var(--estado-atencion); }

/* ================================================================= Tablas */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: var(--fs-chica); font-weight: bold; color: var(--tinta-suave);
  padding: 10px 14px; vertical-align: bottom; background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
}
td { padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; line-height: var(--ai-tabla); }
tbody tr { transition: background .1s; }
tbody tr:hover { background: #fafbfc; }
tbody tr:last-child td { border-bottom: 0; }
td.codigo { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.fecha { white-space: nowrap; color: var(--tinta-suave); }
tr.mayor { font-weight: bold; }
tr.clase { font-weight: bold; background: var(--superficie-2); }
tr.total td, tr.fila-total td { border-top: 1px solid var(--borde-fuerte); font-weight: bold; background: var(--superficie-2); }
th.cifra { white-space: normal; }
td.acciones { text-align: right; width: 1%; white-space: nowrap; }
td.acciones > button + button { margin-left: 6px; }
td.acciones .pila { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
td.acciones .pila button + button { margin-top: 0; }
td.persona { min-width: 220px; }
td.persona span { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
td.persona .pildora { display: inline-block; min-width: 0; padding: 0 8px; margin-left: 6px; line-height: 1.3; }
td.cifra .ayuda { display: block; white-space: normal; min-width: 150px; }
.tabla-ancha { overflow-x: auto; max-width: 100%; }
.tabla-ancha td.persona { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
.tabla-ancha tr.total td:first-child { position: sticky; left: 0; z-index: 1; }
.tabla-lista td { padding: 12px 14px; }
tr.fila-activo, tr.fila-comprobante { cursor: pointer; }
tr.fila-activo:hover td, tr.fila-comprobante:hover td { background: var(--marca-clara); }
tr.resaltado td { background: #fff4c7 !important; transition: background .6s; }.barra-tabla .accion { font-size: var(--fs-chica); }

/* Encabezado de panel con sus herramientas (filtro y descarga) a la derecha. */
.panel > .cabeza-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--borde); min-height: 56px;
}
.cabeza-panel > h3 { margin: 0; font-size: var(--fs-seccion); letter-spacing: -.005em; display: flex; align-items: baseline; gap: 12px; }
.cabeza-panel > h3 .sub { font-weight: normal; font-size: var(--fs-chica); color: var(--tinta-tenue); }
.herramientas-tabla { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.herramientas-tabla.suelta { justify-content: flex-end; padding: 10px 14px; }
.filtro-tabla { width: 200px; padding: 6px 10px 6px 30px; border-radius: 999px; font-size: var(--fs-base); background: var(--superficie-2)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 15px; }
.filtro-tabla:focus { background-color: var(--superficie); }
.boton-icono {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--borde);
  border-radius: var(--radio-chico); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica);
  font-weight: bold; cursor: pointer;
}
.boton-icono:hover { border-color: var(--borde-fuerte); color: var(--tinta); background: var(--superficie-2); }
.boton-icono svg.icono { width: 16px; height: 16px; }

/* Acciones de fila: la principal a la vista, las demas en el menu "⋯". */
.acciones-fila { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.boton-mas {
  width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--radio-chico);
  background: none; color: var(--tinta-suave); cursor: pointer;
}
.boton-mas:hover, .boton-mas:focus-visible { background: var(--superficie-3); border-color: var(--borde); color: var(--tinta); outline: none; }
.boton-mas svg.icono { width: 18px; height: 18px; fill: currentColor; }
.menu-fila { position: fixed; min-width: 190px; z-index: 30; }
.menu-fila button.item-menu {
  display: flex; width: 100%; justify-content: flex-start; padding: 9px 12px; border: 0; border-radius: var(--radio-chico);
  background: none; color: var(--tinta); font-weight: normal; box-shadow: none; text-align: left;
}
.menu-fila button.item-menu:hover { background: var(--superficie-2); }
.menu-fila button.item-menu.peligro { color: var(--error); }
.menu-fila button.item-menu.peligro:hover { background: var(--error-claro); }

.etiqueta-tramo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-chica); background: var(--superficie-3); color: var(--tinta-suave); }
td.tramo.vencido .etiqueta-tramo { background: var(--error-claro); color: var(--error); }

.panel.oculto, .campo.oculto { display: none; }
.panel[data-pestana] > h3 { display: none; }
.pestanas-paneles { align-items: center; }
.lado-pestanas { margin-left: auto; display: flex; align-items: center; padding-bottom: 6px; }
.lado-pestanas > .oculto { display: none; }
.pestanas-paneles .cuenta {
  display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 6px; border-radius: 999px; font-size: var(--fs-chica);
  background: var(--superficie-3); color: var(--tinta-suave); text-align: center;
}
.pestanas-paneles button.activa .cuenta { background: var(--marca-clara); color: var(--marca-oscura); }

/* ============================================================== Etiquetas */

.marca-estado {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 9px; min-height: 24px; border-radius: 999px;
  font-size: var(--fs-chica); font-weight: bold; white-space: nowrap; background: var(--superficie-3); color: var(--tinta-suave);
}
.marca-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.marca-estado.BORRADOR, .marca-estado.GENERADO, .marca-estado.ENVIADO, .marca-estado.PENDIENTE,
.marca-estado.DIFERENCIA, .marca-estado.POR_COBRAR, .marca-estado.POR_PAGAR { background: var(--alerta-clara); color: var(--alerta); }
.marca-estado.CAUSADA, .marca-estado.CONTABILIZADO, .marca-estado.CONTABILIZADA, .marca-estado.CONFIRMADO,
.marca-estado.ACEPTADO, .marca-estado.ACTIVO, .marca-estado.ACTIVA, .marca-estado.PAGADA,
.marca-estado.CONCILIADO { background: var(--exito-claro); color: var(--exito-texto); }
.marca-estado.ANULADA, .marca-estado.ANULADO, .marca-estado.RECHAZADO, .marca-estado.VENDIDO, .marca-estado.RETIRADO,
.marca-estado.FALTA_EN_LIBROS, .marca-estado.FALTA_EN_DIAN, .marca-estado.VENCIDA { background: var(--error-claro); color: var(--error); }
.marca-estado.DEPRECIADO, .marca-estado.PAUSADA, .marca-estado.INACTIVO { background: var(--superficie-3); color: var(--tinta-suave); }
.tramo { font-size: var(--fs-chica); font-weight: bold; white-space: nowrap; color: var(--tinta-suave); }
.tramo.vencido { color: var(--error); }
.pildora { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-chica); font-weight: bold; background: var(--marca-clara); color: var(--marca-oscura); }
.pildora.gris { background: var(--superficie-3); color: var(--tinta-suave); }

/* ---------------------------------------------------- Factura electronica */

.panel-fe { display: flex; flex-direction: column; gap: 14px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linea-tiempo .hito { position: relative; padding: 6px 0 6px 22px; margin-left: 5px; border-left: 2px solid var(--borde); font-size: var(--fs-chica); }
.linea-tiempo .hito::before { content: ""; position: absolute; left: -7px; top: 11px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--borde-fuerte); }
.linea-tiempo .hito:last-child { border-left-color: transparent; }
.linea-tiempo .hito.hecho::before { background: var(--estado-bien); border-color: var(--estado-bien); }
.linea-tiempo .hito.actual { border-left-color: var(--marca); }
.linea-tiempo .hito.actual::before { background: var(--superficie); border-color: var(--marca); }
.linea-tiempo .hito.error::before { background: var(--estado-mal); border-color: var(--estado-mal); }
.linea-tiempo .hito.omitido { display: none; }
.codigo-cufe { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: var(--fs-chica);
  background: var(--superficie-3); padding: 2px 8px; border-radius: 6px; margin-right: 8px; }
.qr-fe { width: 120px; height: 120px; display: block; margin: 8px 0; }
.errores-dian { width: 100%; border-collapse: collapse; font-size: var(--fs-chica); }
.errores-dian th, .errores-dian td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.errores-dian th { color: var(--tinta-tenue); font-weight: bold; font-size: var(--fs-chica); }
.requisitos-fe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.requisitos-fe li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--superficie-3); }
.requisitos-fe li > div { flex: 1; min-width: 0; }

/* ============================================================ Formularios */

label { display: block; font-size: var(--fs-chica); color: var(--tinta-suave); margin-bottom: 6px; font-weight: bold; }
label .ayuda { font-weight: normal; }
input, select, textarea {
  width: 100%; padding: 8px 12px; min-height: var(--alto-control); border: 1px solid var(--borde-control); border-radius: var(--radio-control);
  font: inherit; color: var(--tinta); background: var(--superficie); transition: border-color .12s, box-shadow .12s;
}
input::placeholder { color: var(--tinta-tenue); }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-suave); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(1, 171, 163, .3); }
input:disabled, select:disabled, input[readonly] { background: var(--superficie-3); color: var(--tinta-suave); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--marca); }
input[type="range"], input[type="color"] { min-height: 0; }
input.invalido { border-color: var(--error); background: var(--error-claro); }
input.falta { border-color: var(--alerta); background: var(--alerta-clara); }
label.marca { display: flex; align-items: center; gap: 9px; color: var(--tinta); cursor: pointer; font-weight: normal; font-size: var(--fs-base); margin: 4px 0; }
label.marca input { width: auto; }

.rejilla { display: grid; gap: 14px 16px; }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.rejilla.cuatro { grid-template-columns: repeat(4, 1fr); }
.campo { min-width: 0; }
.campo-con-nuevo { display: flex; gap: 8px; align-items: center; }
.campo-con-nuevo select { flex: 1; min-width: 0; }

button.accion {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alto-control); padding: 0 18px; border: 1px solid var(--marca); border-radius: var(--radio-control);
  background: var(--marca); color: #fff; font: inherit; font-weight: bold; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08); transition: background .12s, border-color .12s, box-shadow .12s;
}
button.accion:hover { background: var(--marca-oscura); border-color: var(--marca-oscura); }
button.accion:focus-visible { outline: none; box-shadow: var(--foco); }
button.accion:disabled { background: var(--superficie-3); border-color: var(--borde); color: var(--tinta-tenue); cursor: not-allowed; box-shadow: none; }
button.accion.suave { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
button.accion.suave:hover { background: var(--superficie-2); border-color: #b8c0cc; }
button.accion.peligro { background: var(--superficie); border-color: var(--error-borde); color: var(--error); }
button.accion.peligro:hover { background: var(--error-claro); }
button.accion.peligro.lleno { background: var(--error); border-color: var(--error); color: #fff; }
button.accion.peligro.lleno:hover { background: var(--error-oscuro); border-color: var(--error-oscuro); }
button.accion.texto, button.accion.texto:hover { background: none; border-color: transparent; box-shadow: none; color: var(--marca); }
button.accion.texto:hover { background: var(--marca-clara); }
button.menuda { min-height: var(--alto-control-chico); padding: 0 12px; font-size: var(--fs-chica); }
button.accion svg.icono { width: 18px; height: 18px; }

/* ================================================================= Avisos */

.aviso { padding: 11px 14px; border-radius: var(--radio-chico); margin-bottom: 14px; font-size: var(--fs-base); display: none; }
.aviso.visible { display: block; }
.aviso.error { background: var(--error-claro); color: var(--error); border: 1px solid #f3cdc8; }
.aviso.exito { background: var(--exito-claro); color: var(--exito-texto); border: 1px solid #c3e6d3; }
.aviso.alerta { background: var(--alerta-clara); color: var(--alerta); border: 1px solid #f0dcad; }
/* NOMS (inicio): los avisos de salario de la nómina; cada aviso en su renglón y el texto largo parte línea a 390 px */
#avisos-salario { overflow-wrap: anywhere; }
#avisos-salario > div + div { margin-top: 6px; }
/* NOMS (fin) */

.porque {
  background: var(--saber-claro); border: 1px solid #d9ebea; border-radius: var(--radio);
  padding: 14px 18px; font-size: var(--fs-chica); color: var(--tinta-suave); margin: 4px 0 20px;
}
.porque h4 { margin: 0 0 6px; font-size: var(--fs-chica); color: var(--tinta); }
.porque h4 + ul { margin-top: 0; }
.porque ul, .porque ol { margin: 0 0 8px; padding-left: 20px; }
.porque li { margin-bottom: 4px; }
.porque li b { color: var(--tinta); }
/* ONB01i: «Palabras de Esta Pantalla» dentro de la caja de ayuda (solo se ve con la ayuda «?» encendida). */
.porque .glosario-titulo { margin-top: 12px; margin-bottom: 6px; }
.porque dl.glosario { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin-top: 0; margin-bottom: 8px; font-size: var(--fs-chica); }
.porque dl.glosario dt { font-weight: 700; color: var(--tinta); }
.porque dl.glosario dd { margin: 0; color: var(--tinta-suave); }
@media (max-width: 760px) { .porque dl.glosario { grid-template-columns: 1fr; gap: 0; } .porque dl.glosario dd { margin-bottom: 8px; } }

/* ONB01b: «Nueva Empresa» en tres pantallas (progreso, tarjetas de plantilla, preguntas Sí / No / No Sé y resumen) */
.alta-progreso { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: var(--fs-chica); font-weight: 700; color: var(--tinta-suave); }
.alta-progreso .barra { flex: 1; height: 6px; border-radius: 3px; background: var(--superficie-3); overflow: hidden; }
.alta-progreso .barra i { display: block; height: 100%; background: var(--marca); }
.alta-titulo { margin: 0 0 14px; font-size: var(--fs-seccion); }
.alta-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.alta-tarjeta { min-height: 64px; padding: 10px 14px; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie);
  color: var(--tinta); font: inherit; font-weight: bold; text-align: left; cursor: pointer; }
.alta-tarjeta:hover { background: var(--superficie-2); }
.alta-tarjeta[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-clara); box-shadow: inset 0 0 0 1px var(--marca); }
.alta-tarjeta:focus-visible, .alta-opcion:focus-visible, .alta-ayuda-boton:focus-visible { outline: none; box-shadow: var(--foco); }
.alta-pregunta { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.alta-pregunta .rotulo { font-weight: 600; }
.alta-opciones { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.alta-opcion { min-height: var(--alto-control-chico); padding: 0 14px; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: var(--fs-chica); font-weight: 600; cursor: pointer; }
.alta-opcion:hover { background: var(--superficie-2); }
.alta-opcion[aria-pressed="true"] { border-color: var(--marca); background: var(--marca); color: #fff; }
.alta-ayuda-boton { width: var(--alto-control-chico); height: var(--alto-control-chico); border: 1px solid var(--borde-control); border-radius: 50%; background: var(--superficie);
  color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); font-weight: 700; cursor: pointer; }
.alta-ayuda-boton[aria-expanded="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.alta-ayuda { grid-column: 1 / -1; padding: 8px 12px; border-radius: var(--radio-control); background: var(--marca-clara); color: var(--tinta-suave); font-size: var(--fs-chica); }
.alta-ayuda[hidden] { display: none; }
/* ONB01h: la casilla de los datos de ejemplo del asistente y la barra para quitarlos. */
.alta-casilla { display: flex; align-items: center; gap: 10px; min-height: var(--alto-control); cursor: pointer; font-size: var(--fs-base); font-weight: 600; color: var(--tinta); }
.alta-casilla input { width: 20px; height: 20px; }
.barra-ejemplos { align-items: center; margin-bottom: 14px; }
/* ONB01e: el selector «Guiado | Experto», el campo que «Arreglar» resalta 2 segundos y las filas del Modo Guiado (reusan las del Paso a Paso). */
.barra-modo { align-items: center; justify-content: flex-end; margin-bottom: 14px; }
.barra-modo .alta-opciones { flex-wrap: nowrap; }
.barra-modo .espaciador { display: none; }
.arreglo-resaltado { outline: 3px solid var(--marca); outline-offset: 2px; background: var(--marca-clara); transition: outline-color .3s; }
.pap-paso.AVISO .num { background: var(--alerta); color: #fff; }
.acciones-meta { padding: 4px 16px 14px; }
.meta-datos h3 { justify-content: space-between; flex-wrap: wrap; }
.meta-datos h3 .accion { white-space: nowrap; }
.alta-resumen { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }
.alta-resumen h4 { margin: 0 0 8px; font-size: var(--fs-base); }
.alta-resumen dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: var(--fs-chica); }
.alta-resumen dt { color: var(--tinta-suave); font-weight: 600; }
.alta-resumen dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .alta-pregunta { grid-template-columns: 1fr auto; }
  .alta-pregunta .rotulo { grid-column: 1; grid-row: 1; }
  .alta-pregunta .alta-ayuda-boton { grid-column: 2; grid-row: 1; }
  .alta-pregunta .alta-opciones { grid-column: 1 / -1; grid-row: 2; }
  .alta-pregunta .alta-ayuda { grid-row: 3; }
  .alta-pregunta > span:empty { display: none; }
  .alta-opcion { min-height: var(--alto-control-movil); }
}

#brindis {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: var(--radio);
  box-shadow: var(--sombra-alta); display: none; max-width: 460px;
}
#brindis.visible { display: block; }
#brindis.malo { background: var(--error); }

.cuadre { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radio-chico);
  font-variant-numeric: tabular-nums; margin-top: 14px; border: 1px solid transparent; }
.cuadre.bien { background: var(--exito-claro); color: var(--exito-texto); border-color: #c3e6d3; }
.cuadre.mal { background: var(--error-claro); color: var(--error); border-color: #f3cdc8; }
.cuadre b { font-size: var(--fs-seccion); }

/* ================================================================ Dialogo */

.velo { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); display: none; place-items: start center;
  padding: 36px 18px; overflow-y: auto; z-index: 60; backdrop-filter: blur(2px); }
.velo.visible { display: grid; grid-template-columns: minmax(0, 1fr); }
.velo.velo-encima { z-index: 65; background: rgba(17, 24, 39, .55); }
.dialogo { background: var(--fondo); border-radius: 16px; width: min(1040px, 100%); max-width: 100%; min-width: 0;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .28); overflow: hidden; }
.dialogo > header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px;
  border-bottom: 1px solid var(--borde); background: var(--superficie); }
.dialogo > header h3 { margin: 0; font-size: var(--fs-dialogo); letter-spacing: -.01em; }
.dialogo > .cuerpo { padding: 20px 22px 8px; overflow-x: hidden; }
.dialogo > footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--borde);
  background: var(--superficie); position: sticky; bottom: 0; }
.dialogo .panel, .dialogo .tabla-ancha { min-width: 0; }
.cerrar { background: none; border: 0; width: 34px; height: 34px; border-radius: var(--radio-chico); font-size: var(--fs-pantalla);
  line-height: 1; color: var(--tinta-tenue); cursor: pointer; }
.cerrar:hover { background: var(--superficie-3); color: var(--tinta); }

/* =============================================================== Pestanas */

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; flex-wrap: wrap; }
.pestanas button {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; font: inherit; font-weight: bold; color: var(--tinta-tenue); cursor: pointer;
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button.activa { color: var(--marca-oscura); border-bottom-color: var(--marca); }
.contador-pestana {
  display: inline-block; min-width: 16px; padding: 1px 6px; margin-left: 4px; border-radius: 999px;
  font-size: var(--fs-chica); font-weight: bold; line-height: 1.5; text-align: center; background: var(--error); color: #fff;
}
.lista-alertas { list-style: none; margin: 0; padding: 6px 0; }
.lista-alertas li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 20px; border-bottom: 1px solid var(--borde); }
.lista-alertas li:last-child { border-bottom: 0; }
.lista-alertas li > svg.icono { width: 34px; height: 34px; padding: 8px; border-radius: 10px; }
.lista-alertas li.alerta-alta > svg.icono { background: var(--error-claro); color: var(--error); }
.lista-alertas li.alerta-media > svg.icono { background: var(--alerta-clara); color: var(--alerta); }
.lista-alertas strong { display: block; }
.lista-alertas p { margin: 2px 0 0; color: var(--tinta-suave); font-size: var(--fs-chica); }
.todo-bien { display: flex; gap: 14px; align-items: center; padding: 22px 20px; }
.todo-bien svg.icono { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--exito-claro); color: var(--exito); }
.todo-bien p { margin: 2px 0 0; color: var(--tinta-suave); }
.accesos { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px 16px; }
.acceso {
  display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  font: inherit; color: var(--tinta); text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.acceso svg.icono { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--marca-clara); color: var(--marca); }
.acceso span { font-weight: bold; font-size: var(--fs-base); }
.acceso:hover { border-color: var(--marca-borde); box-shadow: var(--sombra); transform: translateY(-1px); }

/* =============================================================== Activos */

.barra-avance { height: 6px; background: var(--superficie-3); border-radius: 999px; overflow: hidden; margin-bottom: 4px; min-width: 110px; }
.barra-avance span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.avance-grande { margin-bottom: 18px; }
.avance-grande .barra-avance { height: 10px; margin-bottom: 6px; }
.avance-grande > span { color: var(--tinta-suave); font-size: var(--fs-chica); }
.explicacion-calculo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px;
  padding: 16px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.explicacion-calculo div span { display: block; font-size: var(--fs-chica); color: var(--tinta-tenue); }
.explicacion-calculo div b { font-size: var(--fs-seccion); font-variant-numeric: tabular-nums; }
.explicacion-calculo p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--tinta-suave); font-size: var(--fs-chica); }

/* ================================================ Consulta de comprobantes */

.fichas-tipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 18px; }
.ficha-tipo { text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 8px 12px 8px 8px; cursor: pointer; font: inherit; color: var(--tinta); min-height: 52px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  transition: border-color .12s, background .12s; }
.ficha-tipo:hover { border-color: var(--marca-borde); background: var(--marca-clara); }
.ficha-tipo.activa { border-color: var(--marca); background: var(--marca-clara); box-shadow: inset 3px 0 0 var(--marca); }
.ficha-tipo strong { font-size: var(--fs-chica); line-height: 1.25; }
.ficha-tipo .sigla { min-width: 40px; height: 34px; padding: 0 6px; display: grid; place-items: center; border-radius: 8px;
  background: var(--marca-clara); color: var(--marca-oscura); font-weight: bold; font-size: var(--fs-chica); }
.ficha-tipo.activa .sigla { background: var(--marca); color: #fff; }
.ficha-tipo .cantidad { color: var(--tinta-suave); font-size: var(--fs-chica); font-weight: bold; background: var(--superficie-3);
  border-radius: 999px; padding: 1px 8px; }
.filtros-busqueda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end;
  padding-top: 16px; border-top: 1px solid var(--borde); }
@media (max-width: 1000px) { .filtros-busqueda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.boton-busqueda .accion { width: 100%; }
table.resultados td.recorte { max-width: 0; }
table.resultados td.recorte span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.resultados .principal { font-weight: bold; }
table.resultados .secundario { color: var(--tinta-tenue); font-size: var(--fs-chica); }
.datos-comprobante, .datos-origen { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px 20px; }
.dato span { display: block; color: var(--tinta-tenue); font-size: var(--fs-chica); margin-bottom: 1px; }
.dato strong { font-size: var(--fs-base); }
.descripcion-comprobante { font-size: var(--fs-base); margin: 16px 0 0; }
.panel.origen { border-left: 3px solid var(--marca); }
table.asiento .cod, table.estado .cod { color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
table.asiento .cod { display: inline-block; min-width: 74px; }

/* ================================================ Renglones de causacion */

table.renglones td { padding: 5px 6px; }
table.renglones th { padding: 9px 6px; }
table.renglones input { padding: 7px 9px; }
td.numero-renglon { color: var(--tinta-tenue); text-align: center; font-variant-numeric: tabular-nums; }
td.acciones-renglon { white-space: nowrap; }
td.acciones-renglon .accion { padding: 4px 9px; }.catalogo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 8px; position: sticky; top: 82px; max-height: calc(100vh - 100px); overflow-y: auto; }
.catalogo h4 { margin: 12px 10px 4px; font-size: var(--fs-chica); color: var(--tinta-tenue); }
.catalogo .item-informe { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radio-chico);
  padding: 7px 10px; font: inherit; font-size: var(--fs-chica); color: var(--tinta-suave); cursor: pointer; }
.catalogo .item-informe:hover { background: var(--superficie-3); color: var(--tinta); }
.catalogo .item-informe.activo { background: var(--marca-clara); color: var(--marca-oscura); font-weight: bold; }
.visor { min-width: 0; }
.filtros-informe .cuerpo { padding: 16px 18px; }
/* La hoja de un informe se lee como un documento impreso. */
.hoja {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  padding: 44px 52px 36px; margin: 0 auto 22px; max-width: 1060px;
}
.membrete { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: end;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 2px solid var(--tinta); text-align: left; }
.membrete strong { font-size: var(--fs-seccion); grid-column: 1; }
.membrete h2 { grid-column: 1; margin: 10px 0 0; font-size: var(--fs-pantalla); letter-spacing: -.01em; }
.membrete span { grid-column: 1; color: var(--tinta-suave); font-size: var(--fs-chica); }
.membrete span.ayuda { grid-column: 2; grid-row: 1 / span 4; align-self: end; text-align: right; }

table.estado { border-collapse: collapse; font-size: var(--fs-base); }
table.estado th { background: none; color: var(--tinta); border-bottom: 1.5px solid var(--tinta); padding: 8px 10px; font-size: var(--fs-chica); }
table.estado td { border-bottom: 1px solid #eef0f3; padding: 6px 10px; }
table.estado tbody tr:hover { background: none; }
table.estado td.col-codigo, table.estado th.col-codigo { width: 72px; white-space: nowrap; }
table.estado td.concepto.nivel-6 { padding-left: 24px; }
table.estado tr.fila-seccion td { font-size: var(--fs-seccion); font-weight: bold; border-bottom: 1.5px solid var(--tinta); padding-top: 20px; background: none; }
table.estado tr.fila-titulo td { font-weight: bold; color: var(--tinta-suave); padding-top: 12px; border-bottom: 0; }
table.estado tr.fila-grupo td { font-weight: bold; }
table.estado tr.fila-subtotal td { font-weight: bold; border-top: 1px solid var(--tinta); border-bottom: 0; background: none; }
table.estado tr.fila-total td { font-weight: bold; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); background: var(--superficie-2); }
table.estado tr.destacado td { font-size: var(--fs-seccion); color: var(--tinta); background: none; border-top: 1px solid var(--tinta); border-bottom: 3px double var(--tinta); }
table.estado tr.con-auxiliar { cursor: pointer; }
table.estado tr.con-auxiliar:hover td { background: var(--marca-clara); }
.aviso-comparativo { margin: 0 0 10px; }
.pie-estado { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pie-estado p { flex-basis: 100%; margin: 2px 0 0; }
.cuadre-chico { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-weight: bold; font-size: var(--fs-chica); }
.cuadre-chico::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cuadre-chico.bien { background: var(--exito-claro); color: var(--exito-texto); }
.cuadre-chico.mal { background: var(--error-claro); color: var(--error); }
.alertas-estado { margin-top: 14px; }
.alertas-estado ul { margin: 6px 0 0 18px; padding: 0; }
.firmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 64px 12px 8px; text-align: center; font-size: var(--fs-chica); }
.firmas span { display: block; border-top: 1px solid var(--tinta); margin-bottom: 5px; }
.firmas small { color: var(--tinta-suave); }

.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.categoria { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.categoria h4 { margin: 0; padding: 12px 16px; font-size: var(--fs-base); border-bottom: 1px solid var(--borde); }
.categoria ul { list-style: none; margin: 0; padding: 6px 0; }
.categoria label { display: flex; align-items: center; gap: 10px; padding: 7px 16px; margin: 0; font-size: var(--fs-base); color: var(--tinta); cursor: pointer; font-weight: normal; }
.categoria label:hover { background: var(--marca-clara); }

/* =================================================== Control financiero */

.filtro-periodo { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.filtro-periodo .campo { min-width: 130px; }
.filtro-periodo .comparado { color: var(--tinta-suave); font-size: var(--fs-chica); padding-bottom: 9px; }
.grupo-kpi { margin-bottom: 24px; }
.grupo-kpi > h3 { margin: 0 0 12px; font-size: var(--fs-seccion); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi .pie-kpi { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.kpi .delta { font-size: var(--fs-chica); font-weight: bold; white-space: nowrap; }
.kpi .delta.mejor { color: var(--exito-texto); }
.kpi .delta.peor { color: var(--error); }
.kpi .delta.igual { color: var(--tinta-tenue); font-weight: normal; }
.kpi .delta small { font-weight: normal; color: var(--tinta-tenue); }
.kpi svg.chispa { width: 96px; height: 28px; flex: none; }
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.graficos .panel { margin-bottom: 0; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.leyenda .clave { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.leyenda .clave i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.leyenda .clave i.linea { height: 3px; border-radius: 2px; width: 16px; }
svg .marca-dato { cursor: default; }
svg .marca-dato:hover, svg .marca-dato:focus { opacity: .82; outline: none; }
svg text { font-family: var(--letra); }
.barras-h { display: flex; flex-direction: column; gap: 10px; }
.barra-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.barra-h .fila { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-chica); }
.barra-h .fila .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h .fila .monto { font-variant-numeric: tabular-nums; font-weight: bold; white-space: nowrap; }
.barra-h .pista { height: 8px; background: var(--superficie-3); border-radius: 999px; overflow: hidden; }
.barra-h .relleno { height: 100%; background: var(--serie-entra); border-radius: 999px; }
.barra-h.sale .relleno { background: var(--serie-sale); }
.edades { display: flex; flex-direction: column; gap: 16px; }
.edad-fila .rotulo { display: flex; justify-content: space-between; font-size: var(--fs-chica); margin-bottom: 6px; }
.edad-fila .apilada { display: flex; gap: 2px; height: 20px; background: var(--superficie); }
.edad-fila .apilada span { height: 100%; min-width: 3px; }
.edad-fila .apilada span:first-child { border-radius: 5px 0 0 5px; }
.edad-fila .apilada span:last-child { border-radius: 0 5px 5px 0; }
.semaforo { width: 100%; }
.semaforo td { vertical-align: top; }
.senal { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; font-size: var(--fs-chica); white-space: nowrap; }
.senal i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.semaforo .lectura { color: var(--tinta-suave); font-size: var(--fs-chica); }
.semaforo .formula { color: var(--tinta-tenue); font-size: var(--fs-chica); font-family: Consolas, monospace; }
#tip { position: fixed; pointer-events: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  box-shadow: var(--sombra-alta); padding: 9px 12px; font-size: var(--fs-chica); z-index: 60; display: none; min-width: 170px; }
#tip.visible { display: block; }
#tip .tip-titulo { font-weight: bold; margin-bottom: 5px; color: var(--tinta); }
#tip .tip-fila { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#tip .tip-fila .clave { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-suave); }
#tip .tip-fila .clave i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
#tip .tip-fila strong { font-variant-numeric: tabular-nums; }
.tabla-datos { margin-top: 10px; }
.tabla-datos summary { cursor: pointer; font-size: var(--fs-chica); color: var(--marca); padding: 4px 0; }
.tabla-datos table { margin-top: 6px; font-size: var(--fs-chica); }

/* ======================================================= Otros modulos */

.depuracion td:first-child { color: var(--tinta-suave); width: 60%; }
.depuracion tr.paso td { font-weight: bold; background: var(--superficie-2); }
.depuracion td.signo { width: 24px; text-align: center; color: var(--tinta-suave); }
/* NOM03b6: Cálculos explicados de un renglón de nómina */
.tabla-calculos td { vertical-align: top; }
.tabla-calculos td:nth-child(3) { font-variant-numeric: tabular-nums; }
.tabla-calculos tr.nota-calculo td { color: var(--tinta-suave); font-size: var(--fs-chica); padding-top: 0; border-top: 0; }
pre.bloque-codigo { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 12px; font-size: var(--fs-chica); overflow-x: auto; white-space: pre; }
.secreto { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.secreto code { background: var(--superficie); padding: 6px 10px; border-radius: 6px; word-break: break-all; }
.pos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; max-height: 480px; overflow-y: auto; }
.pos-producto { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); font: inherit; cursor: pointer; }
.pos-producto:hover { border-color: var(--marca-borde); background: var(--marca-clara); }
.tiquete { max-width: 380px; }
.fila-tiquete { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--borde); }
.total-tiquete { font-size: var(--fs-dialogo); border-bottom: 0; margin-bottom: 10px; }

/* ============================================================ Responsivo */

@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .tres-columnas, .inicio-columnas { grid-template-columns: 1fr; }
  .tarjetas.cinco { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 1100px) {
  .centro-informes { grid-template-columns: 1fr; }
  .catalogo { display: none; }  .hoja { padding: 30px 28px; }
}
@media (max-width: 1000px) {
  #aplicacion.visible { grid-template-columns: minmax(0, 1fr); }      /* BRAND-01: con 1fr la columna crecía hasta el ancho mínimo del menú (415 px a 390) */
  #aplicacion > aside { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--borde); padding: 12px 0; }
  #aplicacion > aside .marca { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 16px; }
  .boton-menu { display: inline-flex; align-items: center; gap: 6px; background: var(--superficie); color: var(--tinta);
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); padding: 7px 12px; font: inherit; font-weight: bold; cursor: pointer; }
  aside nav { display: none; }
  aside.abierto nav { display: block; padding-top: 8px; }
  .barra-superior { padding: 0 16px; gap: 10px; }
  main { padding: 18px 16px 60px; }
  .rejilla.dos, .rejilla.tres, .rejilla.cuatro, .dos-columnas, .graficos { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .panel { overflow-x: auto; }
  .datos-comprobante, .datos-origen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explicacion-calculo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #boton-crear { padding: 9px 12px; }
  .col-codigo { display: none; }
  .hoja { padding: 18px 14px; border-radius: var(--radio); }
  .membrete { grid-template-columns: 1fr; }
  .membrete span.ayuda { grid-column: 1; grid-row: auto; text-align: left; }
  table.estado td, table.estado th { padding: 5px 6px; font-size: var(--fs-chica); }
  header.titulo { flex-direction: column; align-items: flex-start; }
  header.titulo .contexto { text-align: left; }
}

@media print {
  body { background: #fff; }
  aside, .barra-superior, .filtros-informe, .barra-tabla, .alertas-estado { display: none !important; }
  .hoja { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .hoja.salto { page-break-before: always; }
  table.estado tr { page-break-inside: avoid; }
}
@media (max-width: 700px) {
  .tarjetas, .kpis-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tarjeta, .kpi-inicio { padding: 14px; }
  .tarjeta .valor, .kpi-inicio strong { font-size: var(--fs-dialogo); }
  .buscador-global input { padding-left: 34px; }
}

/* Las herramientas de la tabla viven en la barra de pestañas: no heredan su estilo. */
.pestanas .lado-pestanas .boton-icono { border: 1px solid var(--borde); border-radius: var(--radio-chico); margin-bottom: 0;
  padding: 6px 11px; font-size: var(--fs-chica); color: var(--tinta-suave); background: var(--superficie); }
.pestanas .lado-pestanas .boton-icono:hover { color: var(--tinta); border-color: var(--borde-fuerte); }
.dos-columnas td.persona { min-width: 0; }.lista-recientes .sigla { width: 42px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: var(--superficie-3); color: var(--tinta-suave); font-weight: bold; font-size: var(--fs-chica); }.lista-recientes .valor { font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); cursor: pointer; font-weight: bold; }
button.enlace:hover { text-decoration: underline; }

/* ====================================================== Menu lateral riel
   En escritorio el menu queda recogido en un riel de iconos: el area de
   trabajo gana casi 200 px. Al pasar el cursor (o al llegar con el teclado)
   se despliega por encima del contenido, sin moverlo. */
@media (min-width: 1001px) {
  #aplicacion.visible { grid-template-columns: var(--ancho-riel) minmax(0, 1fr); }
  #aplicacion > .columna { grid-column: 2; }
  #aplicacion > aside {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: var(--ancho-riel); height: 100vh;
    background: linear-gradient(180deg, var(--menu-fondo) 0%, var(--menu-fondo-2) 100%);
    border-right: 0; padding: 14px 0 10px; overflow: hidden;
    transition: width .2s ease, box-shadow .2s ease;
  }
  #aplicacion > aside:hover, #aplicacion > aside:has(:focus-visible) { width: var(--ancho-menu); box-shadow: 12px 0 40px rgba(6, 21, 37, .35); }
  #aplicacion > aside .marca { padding: 2px 16px 14px; }
  #aplicacion > aside .logo { gap: 12px; }
  /* TER01k: solo los rótulos del MENÚ LATERAL se esconden en el riel; antes la regla era `nav button span` y también borraba los contadores de las
     pestañas de Compras y de cualquier otro <nav> de la pantalla. */
  #aplicacion > aside .logo > div, #aplicacion > aside nav button span { opacity: 0; transition: opacity .15s ease; white-space: nowrap; }
  #aplicacion > aside:hover .logo > div, #aplicacion > aside:has(:focus-visible) .logo > div,
  #aplicacion > aside:hover nav button span, #aplicacion > aside:has(:focus-visible) nav button span { opacity: 1; transition-delay: .06s; }
  #aplicacion > aside:hover nav .grupo, #aplicacion > aside:has(:focus-visible) nav .grupo { color: var(--menu-grupo); }
  #aplicacion > aside .logo strong { color: #fff; }
  #aplicacion > aside .logo-claro { display: none; }
  #aplicacion > aside .logo-riel { display: block; width: 40px; height: 40px; }
  #aplicacion > aside .logo-oscuro { display: block; height: 34px; margin-bottom: 2px; }
  #aplicacion > aside .logo > div { display: none; }
  #aplicacion > aside:hover .logo > div, #aplicacion > aside:has(:focus-visible) .logo > div { display: block; }
  #aplicacion > aside:hover .logo-riel, #aplicacion > aside:has(:focus-visible) .logo-riel { display: none; }
  #aplicacion > aside .logo #nombre-empresa { color: var(--menu-tinta); }
  nav { padding: 0 12px 8px; overflow-x: hidden; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav .grupo { color: transparent; transition: color .15s ease; white-space: nowrap; font-size: var(--fs-chica); letter-spacing: .06em; text-transform: none; padding: 14px 12px 4px;
    height: 34px; position: relative; }
  nav .grupo::before { content: ""; position: absolute; left: 12px; right: 12px; top: 18px; border-top: 1px solid rgba(255,255,255,.08); opacity: 1; }
  #aplicacion > aside:hover nav .grupo::before, #aplicacion > aside:has(:focus-visible) nav .grupo::before { opacity: 0; }
  nav button { color: var(--menu-tinta); padding: 9px 12px; gap: 14px; border-radius: 10px; }
  nav button svg.icono { color: var(--menu-tinta); width: 20px; height: 20px; }
  nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  nav button:hover svg.icono { color: #fff; }
  nav button.activo { background: rgba(1, 171, 163, .2); color: #fff; font-weight: bold; box-shadow: inset 3px 0 0 var(--acento); }
  nav button.activo svg.icono { color: var(--acento); }
  nav button:focus-visible { outline: 2px solid #5ee0d8; outline-offset: 1px; }
}

/* ===================================================== Tablero contable */
.acciones-rapidas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.accion-rapida {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--marca-borde); background: var(--superficie); color: var(--marca-oscura);
  font: inherit; font-weight: bold; cursor: pointer; box-shadow: var(--sombra); transition: all .15s ease;
}
.accion-rapida svg.icono { color: var(--marca); }
.accion-rapida:hover { background: var(--degradado); color: #fff; border-color: transparent; transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(13, 39, 66, .28); }
.accion-rapida:hover svg.icono { color: #fff; }.modulo {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--superficie); font: inherit; color: var(--tinta); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.modulo > svg.icono { width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: #fff; background: var(--degradado);
  box-shadow: 0 4px 10px rgba(13, 39, 66, .25); }
.modulo strong { display: block; font-size: var(--fs-base); }
.modulo small { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); line-height: 1.4; margin-top: 2px; }
.modulo:hover { border-color: var(--marca-borde); box-shadow: var(--sombra-alta); transform: translateY(-2px); }
/* Tamanos de ventana */
.dialogo.chico { width: min(580px, 100%); }
.dialogo.amplio { width: min(1240px, 100%); }
.velo[data-medida="completo"] { padding: 0; }
.dialogo.completo { width: 100%; min-height: 100vh; border-radius: 0; display: flex; flex-direction: column; }
.dialogo.completo > header { position: sticky; top: 0; z-index: 2; padding: 14px 32px; }
.dialogo.completo > .cuerpo { flex: 1; padding: 22px 32px 12px; max-width: 1600px; width: 100%; margin: 0 auto; }
.dialogo.completo > footer { padding: 14px 32px; }
.dialogo > header h3 { display: flex; align-items: center; gap: 10px; }
.dialogo > header h3::before { content: ""; width: 8px; height: 22px; border-radius: 4px; background: var(--degradado-vivo); }

/* Catalogo de informes por categoria, con buscador y favoritos */
.catalogo #buscar-informe { width: 100%; margin: 4px 0 6px; }.categoria-informes h4 svg.icono { width: 16px; height: 16px; color: var(--marca); }
.categoria-informes.favoritos h4 svg.icono { color: #e0a100; fill: #ffd766; }.catalogo .estrella { opacity: 0; border: 0; background: none; cursor: pointer; padding: 4px 6px; color: var(--tinta-tenue); border-radius: 6px; }
.fila-informe:hover .estrella, .catalogo .estrella.activa, .catalogo .estrella:focus-visible { opacity: 1; }
.catalogo .estrella.activa svg.icono { color: #e0a100; fill: #ffd766; }
.catalogo .estrella svg.icono { width: 16px; height: 16px; }
.nota-informe { color: var(--tinta-suave); font-size: var(--fs-chica); margin: 12px 0 0; }
.informe-tabla td { font-size: var(--fs-chica); }

/* =====================================================================
   Capa de identidad v25: color con proposito, profundidad suave y una
   banda de encabezado por pantalla. Se apoya en los mismos tokens.
   ===================================================================== */
:root {
  --fondo: #f3f6f9;
  /* BRAND-01: c1 = azul marino y c3 = turquesa del logo; las otras cuatro series categóricas se conservan (c2 sigue siendo el violeta de antes a propósito). */
  --c1: #0d2742; --c2: #7c4dff; --c3: #01aba3; --c4: #0284c7; --c5: #ec4899; --c6: #22a06b;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(20, 28, 70, .05), 0 6px 18px rgba(20, 28, 70, .06);
  --sombra-alta: 0 18px 44px rgba(20, 28, 70, .18), 0 3px 8px rgba(20, 28, 70, .06);
}
body {
  background:
    radial-gradient(900px 420px at 100% -5%, rgba(1, 171, 163, .08), transparent 60%),
    radial-gradient(800px 380px at 20% -10%, rgba(13, 39, 66, .06), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}
.barra-superior { background: rgba(255, 255, 255, .82); }

/* Banda de encabezado: cada pantalla abre con su titulo en un bloque de color. */
.banda-pantalla {
  position: relative; overflow: hidden; display: flex; gap: 18px; align-items: center;
  margin-bottom: 24px; padding: 22px 26px; border-radius: 20px; color: #fff;
  background: linear-gradient(118deg, #0d2742 0%, #0e4a63 55%, #00756f 100%);   /* BRAND-01: marino al turquesa oscuro (blanco >= 5,5:1 en todo el recorrido) */
  box-shadow: 0 14px 34px rgba(13, 39, 66, .28);
}
.banda-pantalla::before, .banda-pantalla::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
}
.banda-pantalla::before { width: 320px; height: 320px; right: -80px; top: -150px; }
.banda-pantalla::after { width: 220px; height: 220px; right: 180px; bottom: -150px; opacity: .7; }
.icono-pantalla {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px);
}
.icono-pantalla svg.icono { width: 28px; height: 28px; color: #fff; stroke-width: 1.7; }
.banda-pantalla header.titulo { flex: 1; min-width: 0; align-items: center; position: relative; z-index: 1; }
.banda-pantalla header.titulo .miga { color: rgba(255, 255, 255, .72); font-weight: bold; letter-spacing: .02em; }
.banda-pantalla header.titulo h2 { color: #fff; font-size: var(--fs-banda); }
.banda-pantalla .para-que { color: rgba(255, 255, 255, .82); margin: 4px 0 0; font-size: var(--fs-chica); max-width: 88ch; }
.banda-pantalla header.titulo .contexto {
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  padding: 7px 14px; border-radius: 999px; font-weight: bold; white-space: nowrap;
}
.banda-pantalla header.titulo .contexto:empty { display: none; }

/* Tarjetas de cifras: cada una con su color de acento. */
.kpis-inicio > .kpi-inicio, .tarjetas > .tarjeta, .kpis > .kpi { --c: var(--c1); overflow: hidden; border-top: 4px solid var(--c); }
.kpis-inicio > :nth-child(6n+2), .tarjetas > :nth-child(6n+2), .kpis > :nth-child(6n+2) { --c: var(--c2); }
.kpis-inicio > :nth-child(6n+3), .tarjetas > :nth-child(6n+3), .kpis > :nth-child(6n+3) { --c: var(--c3); }
.kpis-inicio > :nth-child(6n+4), .tarjetas > :nth-child(6n+4), .kpis > :nth-child(6n+4) { --c: var(--c4); }
.kpis-inicio > :nth-child(6n+5), .tarjetas > :nth-child(6n+5), .kpis > :nth-child(6n+5) { --c: var(--c5); }
.kpis-inicio > :nth-child(6n+6), .tarjetas > :nth-child(6n+6), .kpis > :nth-child(6n+6) { --c: var(--c6); }
.kpi-inicio::after, .tarjeta::after, .kpi::after {
  content: ""; position: absolute; right: -26px; top: -26px; width: 104px; height: 104px; border-radius: 50%;
  background: var(--c); opacity: .09; pointer-events: none;
}
.kpi-inicio .etiqueta, .tarjeta .etiqueta, .kpi .titulo { display: flex; align-items: center; gap: 8px; font-weight: bold; }
.kpi-inicio .etiqueta::before, .tarjeta .etiqueta::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent);
}
.kpi-inicio.atencion, .kpi-inicio.malo { border-top-color: var(--estado-atencion); }
.kpi-inicio.malo { border-top-color: var(--error); }
.kpi-inicio.malo::before, .kpi-inicio.atencion::before, .kpi.alerta::before { display: none; }

/* Paneles con acento en el titulo. */
.panel { border-radius: var(--radio); border-color: #e2e8f0; }
.panel > h3, .cabeza-panel > h3 { position: relative; }
.panel > h3::before, .cabeza-panel > h3::before {
  content: ""; align-self: center; width: 5px; height: 18px; border-radius: 3px; background: var(--degradado-vivo); flex: none;
}
.panel > h3 { justify-content: flex-start; }
.panel > h3 .sub { margin-left: auto; }

/* Botones: el principal con degradado y sombra de color. */
button.accion:not(.suave):not(.peligro):not(.texto):not(:disabled) {
  background: var(--degradado); border-color: transparent; box-shadow: var(--sombra-primario);
}
button.accion:not(.suave):not(.peligro):not(.texto):not(:disabled):hover { filter: brightness(.92); }
button.accion:not(.suave):not(.peligro):not(.texto):not(:disabled):active { filter: brightness(.86); }
button.accion { border-radius: var(--radio-control); transition: filter .12s, box-shadow .12s, background .12s; }
button.accion.suave { border-color: var(--borde-control); }
button.accion.suave:hover { border-color: var(--marca); color: var(--marca-oscura); background: var(--marca-clara); }

/* Pestanas en forma de pildora dentro de una bandeja. */
.pestanas {
  display: flex; gap: 6px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 14px;
  background: #fff; box-shadow: var(--sombra); margin-bottom: 18px;
}
.pestanas button {
  border: 0; margin: 0; border-radius: 10px; padding: 9px 16px; color: var(--tinta-suave);
  transition: background .12s, color .12s;
}
.pestanas button:hover { background: var(--superficie-3); color: var(--tinta); }
.pestanas button.activa { background: var(--degradado); color: #fff; box-shadow: 0 6px 14px rgba(13, 39, 66, .26); }
.pestanas-paneles button.activa .cuenta { background: rgba(255, 255, 255, .25); color: #fff; }
.lado-pestanas { padding-bottom: 0; }

/* Tablas: encabezado teñido y fila activa en color. */
th { background: #f1f5f9; color: #475569; border-bottom-color: #e2e8f0; }
tbody tr:hover { background: #f6f9fb; }
td { border-bottom-color: #eaeff4; }

/* Barra superior: el boton Crear con degradado. */
#boton-crear { background: var(--degradado); border: 0; box-shadow: 0 6px 16px rgba(13, 39, 66, .3); }.aviso-inicio {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; margin-bottom: 22px;
  background: #fff7e6; border: 1px solid #f7dca3; color: #7a4d00;
}
.aviso-inicio svg.icono { color: #d98a00; }
.aviso-inicio button { margin-left: auto; }.lanzador-item > svg.icono {
  width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: #fff; stroke-width: 1.8;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #0d2742));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent);
}.crear-rapido .accion-rapida svg.icono { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .banda-pantalla { padding: 16px; border-radius: 16px; }
  .icono-pantalla { display: none; }
  .banda-pantalla header.titulo h2 { font-size: 22px; }
  .lanzador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .banda-pantalla { display: none !important; }
}
/* Cierre de año: pasos */
.pasos-cierre { padding: 8px 20px 16px; }
.paso-cierre { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 0;
  border-bottom: 1px dashed #e2e8f0; }
.paso-cierre:last-child { border-bottom: 0; }
.paso-cierre p { margin: 2px 0 0; color: var(--tinta-suave); font-size: var(--fs-chica); }
.numero-paso { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: bold;
  background: #e6f6f5; color: var(--marca-oscura); border: 2px solid var(--marca-borde); }
.paso-cierre.hecho .numero-paso { background: var(--exito); color: #fff; border-color: var(--exito); }
.paso-cierre.opcional .numero-paso { border-style: dashed; }

/* Usuarios y roles */
.opciones-rol { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.opcion-rol { align-items: flex-start !important; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; margin: 0 !important; }
.opcion-rol:has(input:checked) { border-color: var(--marca); background: var(--marca-clara); }
.opcion-rol input { margin-top: 3px; }
.opcion-rol small { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); margin-top: 2px; }
.clave-temporal { margin-top: 14px; padding: 16px; text-align: center; border-radius: 12px; background: #f1f5f9;
  border: 1px dashed var(--marca-borde); }
.clave-temporal code { font-size: var(--fs-dialogo); letter-spacing: .08em; color: var(--marca-oscura); user-select: all; }

tr.fila-marcada td { background: #f1fbf5; }
label.accion {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 9px 16px; border-radius: 10px;
  border: 1px solid #d3dbe5; background: var(--superficie); color: var(--tinta); font-size: var(--fs-base); font-weight: bold;
}
label.accion:hover { border-color: var(--marca-borde); color: var(--marca-oscura); background: var(--marca-clara); }

/* Borradores de formularios */
.formulario-borrador { margin: 0 auto 20px; }
.seccion-formulario { margin: 22px 0 6px; font-size: var(--fs-base); color: var(--marca-oscura); text-transform: none;
  border-bottom: 2px solid var(--marca-borde); padding-bottom: 4px; }
.formulario-borrador td.casilla { width: 56px; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; font-weight: bold; }
.formulario-borrador tr.fila-subtotal td { font-weight: bold; background: #f6f9fb; }
.filtros-declaracion { margin-bottom: 8px; }

/* ===================================================== Documento impreso */
body.documento-impreso { background: #fff; padding: 28px 36px; color: #111; font-size: 11.0pt; max-width: 900px; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; }
.doc-membrete { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding-bottom: 14px; border-bottom: 3px solid #0d2742; margin-bottom: 18px; }
.doc-logo { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  font-weight: bold; font-size: 22.0pt; background: linear-gradient(135deg, #0d2742, #01aba3);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-empresa strong { display: block; font-size: 14.0pt; }
.doc-empresa span { display: block; color: #555; font-size: var(--fs-chica); }
.doc-numero { text-align: right; }
.doc-numero span { display: block; color: #555; font-size: var(--fs-chica); }
.doc-numero strong { display: block; font-size: 16.0pt; color: #0d2742; }
.doc-estado { display: inline-block; margin-top: 4px; padding: 2px 10px; border: 2px solid #c0301f; color: #c0301f;
  font-style: normal; font-weight: bold; border-radius: 6px; }
.doc-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
  padding: 12px 14px; border: 1px solid #dce3ec; border-radius: 10px; margin-bottom: 14px; background: #f6f9fb;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-datos span { display: block; color: #666; font-size: var(--fs-chica); }
.doc-datos b { display: block; }
.doc-datos small { color: #666; }
.doc-tabla { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.doc-tabla th { background: #e6f6f5; color: #0d2742; font-size: var(--fs-chica); padding: 7px 8px; text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-tabla td { padding: 6px 8px; border-bottom: 1px solid #e6e8f0; font-size: var(--fs-chica); }
.doc-tabla th.cifra, .doc-tabla td.cifra { text-align: right; }
.doc-total td { font-weight: bold; border-top: 2px solid #333; }
.doc-totales { margin-left: auto; width: 45%; border-collapse: collapse; margin-bottom: 10px; }
.doc-totales td { padding: 5px 8px; border-bottom: 1px solid #e6e8f0; }
.doc-letras { font-style: italic; padding: 8px 12px; border-left: 3px solid #0d2742; background: #f6f9fb; margin: 10px 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-nota { color: #666; font-size: var(--fs-chica); }
.doc-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.doc-firmas { display: flex; gap: 30px; margin-top: 56px; }
.doc-firmas div { flex: 1; text-align: center; font-size: var(--fs-chica); color: #444; }
.doc-firmas span { display: block; border-top: 1px solid #333; margin-bottom: 6px; }
.doc-pie { margin-top: 24px; color: #888; font-size: var(--fs-chica); text-align: center; }
@media print { body.documento-impreso { padding: 0; } }
/* DS01a: en pantalla el documento no baja de 14 px (A-061); la impresión conserva sus tamaños de siempre. */
@media print {
  .doc-empresa span, .doc-numero span, .doc-tabla th, .doc-tabla td, .doc-firmas div { font-size: 10.0pt; }
  .doc-datos span { font-size: 9.50pt; }
  .doc-nota { font-size: 9.0pt; }
  .doc-pie { font-size: 8.50pt; }
}

/* Parametrizacion exogena */
.selector-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.chip-formato { text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff;
  font: inherit; cursor: pointer; box-shadow: var(--sombra); }
.chip-formato strong { display: block; font-size: var(--fs-seccion); color: var(--marca-oscura); }
.chip-formato span { display: block; font-size: var(--fs-chica); color: var(--tinta-suave); line-height: 1.3; }
.chip-formato.activa { background: var(--degradado); border-color: transparent; }
.chip-formato.activa strong, .chip-formato.activa span { color: #fff; }
tr[data-mapeo] select { min-width: 160px; padding: 6px 8px; font-size: var(--fs-base); }

/* Subtítulo dentro del encabezado de un panel: aclara el método o el alcance. */
h3 .subtitulo-panel {
  text-transform: none; font-weight: 400; font-size: var(--fs-chica); color: var(--tinta-suave);
  margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--marca-clara);
}

/* En pantallas angostas la rejilla es de una columna: un campo que abarca
   varias (grid-column: span N en línea) crearía columnas fantasma. */
@media (max-width: 1000px) {
  .rejilla > * { grid-column: auto !important; }
}

/* Marca de campo obligatorio. */
.obligatorio { color: var(--error); font-weight: 700; margin-left: 2px; }

/* Renglones de cotización, pedido y remisión. */
.renglones-comercial td { padding: 6px 6px; vertical-align: middle; }
.renglones-comercial input, .renglones-comercial select { width: 100%; min-width: 0; }
.renglones-comercial .c-total { font-weight: 600; white-space: nowrap; }
.renglones-comercial select:disabled { opacity: .45; }
#c-totales { display: flex; gap: 28px; justify-content: flex-end; flex-wrap: wrap; }
#c-totales b { margin-left: 6px; }

/* Certificado 220: una hoja por trabajador. */
.hoja-220 { break-inside: avoid; }
.hoja-220 .doc-tabla th[colspan] { text-align: left; background: var(--superficie-2); }

/* ======================================================= Menú por módulos
   NAV02b: dentro de un módulo la barra lateral va desplegada y fija. Cada grupo es un acordeón con sus pantallas
   (abierto el de la pantalla actual). En Inicio solo está «Inicio». En celular y tableta es un cajón. */
nav .item-modulo .flecha-modulo { margin-left: auto; width: 14px; height: 14px; flex: none; opacity: .55;
  transition: transform .15s ease, opacity .15s ease; }
nav .item-modulo[aria-expanded="true"] .flecha-modulo { transform: rotate(90deg); opacity: .9; }
nav .sub-movil { display: block; padding: 0 0 6px 34px; }
nav .sub-movil[hidden] { display: none; }
nav .sub-movil button { padding: 6px 10px; font-size: var(--fs-chica); }
/* El grupo abierto se marca sin pintar dos pastillas: la pastilla es de la pantalla actual. */
nav .item-modulo.activo[aria-expanded] { background: none; box-shadow: none; color: var(--marca-oscura); }
nav .item-modulo.activo[aria-expanded] svg.icono { color: var(--marca); }
nav .cabecera-cajon, .telon-menu { display: none; }
@media (min-width: 1001px) {
  nav .item-modulo { margin: 3px 0; }
  nav .item-modulo.activo[aria-expanded] { background: rgba(255, 255, 255, .07); color: #fff; }
  nav .item-modulo.activo[aria-expanded] svg.icono { color: #fff; }
}

/* Subnavegación: las pantallas hermanas del módulo, debajo de la banda. */
.subnav { display: none; gap: 8px; flex-wrap: wrap; margin: -6px 0 20px; }
.subnav.visible { display: flex; }
.subnav button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-suave); font: inherit;
  font-weight: 600; cursor: pointer; transition: all .12s ease; }
.subnav button .icono { width: 16px; height: 16px; color: var(--tinta-tenue); }
.subnav button:hover { border-color: var(--marca-borde); color: var(--marca-oscura); }
.subnav button.activa { background: var(--degradado); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(13, 39, 66, .28); }
.subnav button.activa .icono { color: #fff; }

/* Botón Crear agrupado por módulo. */
#menu-crear .grupo-crear { padding: 10px 14px 4px; font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; }
#menu-crear button { display: flex; align-items: center; gap: 10px; }
#menu-crear button .icono { width: 16px; height: 16px; color: var(--marca); }
#menu-crear { max-height: calc(100vh - 80px); overflow-y: auto; }
/* UI05a: desde 1200 px el menú Crear se reparte en dos columnas y se ve completo, sin desplazamiento interno. */
@media (min-width: 1200px) {
  #menu-crear.visible { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); column-gap: 6px; max-height: none; overflow-y: visible; }
  #menu-crear .separador-crear { grid-column: 1 / -1; }
}

/* ====================================================== Inicio: crear */
.crear-inicio > header { margin: 4px 0 16px; }
.crear-inicio > header h3 { margin: 0; font-size: var(--fs-dialogo); color: var(--tinta); }
.crear-inicio > header p { margin: 4px 0 0; color: var(--tinta-suave); }.tarjeta-crear .icono { flex: none; width: 18px; height: 18px; color: color-mix(in srgb, var(--acento) 70%, #0d2742); }.tarjeta-crear:hover .icono, .tarjeta-crear:hover small { color: #fff; }
.modulo-ventas { --acento: #2a78d6; }
.modulo-compras { --acento: #5c62ac; }
.modulo-tesoreria { --acento: #16794a; }
.modulo-inventarios { --acento: #c26a00; }
.modulo-nomina { --acento: #1e5a7a; }
.modulo-contabilidad { --acento: #0d2742; }
.modulo-configuracion { --acento: #525c6b; }

/* ================================================= Plan de cuentas: árbol */
.clases-puc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.clases-puc button[data-clase] { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta-suave); font: inherit; cursor: pointer; }
.clases-puc button[data-clase] b { color: var(--marca); margin-right: 2px; }
.clases-puc button.activa { background: var(--marca-clara); border-color: var(--marca-borde); color: var(--marca-oscura); font-weight: 600; }
.clases-puc .derecha { margin-left: auto; color: var(--tinta-tenue); }.arbol-puc tr.inactiva td { color: var(--tinta-tenue); }
.flecha-arbol { display: inline-block; width: 16px; margin-right: 4px; color: var(--marca); transition: transform .12s ease; }
.flecha-arbol.abierta { transform: rotate(90deg); }
.flecha-arbol.vacia { visibility: hidden; }

/* ======================================== Plan de cuentas en dos paneles */
.plan-paneles { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .plan-paneles { grid-template-columns: 1fr; } }
.panel-arbol { display: flex; flex-direction: column; max-height: calc(100vh - 220px); min-height: 480px; }
.panel-detalle { position: sticky; top: 80px; }
.cabeza-arbol { display: flex; gap: 14px; padding: 12px 16px 4px; }
.filtros-arbol { display: grid; grid-template-columns: 170px 1fr; gap: 8px; padding: 8px 16px 10px; border-bottom: 1px solid var(--borde); }
.lista-arbol { overflow-y: auto; flex: 1; }
.fila-arbol { display: grid; grid-template-columns: 170px 1fr; align-items: center; padding: 9px 16px; cursor: pointer;
  border-bottom: 1px solid var(--superficie-3); }
.fila-arbol:hover { background: var(--superficie-2); }
.fila-arbol.elegida { background: var(--marca-clara); box-shadow: inset 3px 0 0 var(--marca); }
.fila-arbol.nivel-0 { font-weight: 700; background: var(--superficie-3); }
.fila-arbol.nivel-1 { font-weight: 700; }
.fila-arbol.nivel-2 .nombre-arbol { font-weight: 600; }
.fila-arbol.inactiva { color: var(--tinta-tenue); }
.codigo-arbol { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nombre-arbol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flecha-arbol[data-alternar] { cursor: pointer; }
.niveles-detalle { display: grid; gap: 0; margin-bottom: 12px; }
.nivel-detalle { display: grid; grid-template-columns: 110px 80px 64px 1fr; gap: 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--superficie-3); }
.nivel-detalle.cabeza { font-weight: 700; color: var(--tinta-suave); font-size: var(--fs-chica); padding-top: 0; }
.nivel-detalle.cabeza span:nth-child(2) { grid-column: 2 / span 2; text-align: center; }
.rotulo-nivel { text-align: right; font-weight: 600; color: var(--tinta-suave); }
.prefijo-nivel { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-suave); letter-spacing: .02em; }
.nivel-detalle input:disabled { background: var(--superficie-3); color: var(--tinta); border-color: transparent; }
.nivel-detalle.propia .rotulo-nivel { color: var(--marca-oscura); }
.nivel-detalle.nueva { background: color-mix(in srgb, var(--marca-clara) 60%, transparent); }
.opciones-detalle { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
button.crear-rama { color: var(--exito-texto); font-weight: 700; font-size: var(--fs-chica); }

/* El menú Crear se abre hacia la izquierda: el botón está al borde derecho. */
#menu-crear { right: 0; left: auto; min-width: 260px; }

/* Centro de informes: catálogo plegable y detalle por tercero. */
.categoria-informes.plegable h4 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.categoria-informes.plegable h4 .cuenta-categoria { margin-left: auto; font-size: var(--fs-chica); color: var(--tinta-tenue);
  background: var(--superficie-3); border-radius: 999px; padding: 0 8px; }
.categoria-informes.plegable h4 .flecha-categoria { color: var(--marca); transition: transform .12s ease; }
.categoria-informes.plegable.abierta h4 .flecha-categoria { transform: rotate(90deg); }
.categoria-informes.plegable:not(.abierta) .fila-informe { display: none !important; }
.estado tr.fila-tercero td { color: var(--tinta-suave); font-size: var(--fs-chica); background: var(--superficie-2); }
.estado tr.fila-tercero td:nth-child(2) { padding-left: 34px; }
.estado tr.fila-tercero.con-auxiliar:hover td { background: var(--marca-clara); cursor: pointer; }

/* Tercero: selector de persona natural o jurídica. */
.selector-persona { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.selector-persona button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--borde);
  border-radius: 14px; background: var(--superficie); text-align: left; cursor: pointer; font: inherit; color: var(--tinta); }
.selector-persona button .icono { width: 26px; height: 26px; color: var(--tinta-tenue); flex: none; }
.selector-persona button strong { display: block; font-size: var(--fs-base); }
.selector-persona button small { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.selector-persona button.activo { border-color: var(--marca); background: var(--marca-clara); box-shadow: 0 6px 16px rgba(13, 39, 66, .15); }
.selector-persona button.activo .icono { color: var(--marca); }
.vista-nombre { margin: 12px 0 0; color: var(--tinta-suave); }
@media (max-width: 700px) { .selector-persona { grid-template-columns: 1fr; } }

#campo-tercero { min-width: 260px; }
#campo-tercero select { width: 100%; }

/* ================================================ Centro de Informes: espacio a pantalla completa */
/* REP-VIS (inicio) */
body[data-pantalla="informes"] .banda-pantalla, body[data-pantalla="informesadm"] .banda-pantalla, body[data-pantalla="informesnomina"] .banda-pantalla { display: none; }
body[data-pantalla="informes"] .columna, body[data-pantalla="informesadm"] .columna, body[data-pantalla="informesnomina"] .columna { height: 100vh; overflow: hidden; }
body[data-pantalla="informes"] main, body[data-pantalla="informesadm"] main, body[data-pantalla="informesnomina"] main { padding: 0; display: flex; flex-direction: column; min-height: 0; }
body[data-pantalla="informes"] .subnav.visible, body[data-pantalla="informesadm"] .subnav.visible, body[data-pantalla="informesnomina"] .subnav.visible { margin: 10px 16px 0; flex: none; }
body[data-pantalla="informes"] #pantalla, body[data-pantalla="informesadm"] #pantalla, body[data-pantalla="informesnomina"] #pantalla { flex: 1; min-height: 0; max-width: none; }
/* REP-VIS (fin) */

.espacio-informes { display: grid; grid-template-columns: 290px 1fr; height: 100%; }

.lista-informes { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borde); background: var(--superficie); }
.buscador-lista { position: relative; padding: 12px; border-bottom: 1px solid var(--borde); }
.buscador-lista svg.icono { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--tinta-tenue); }
.buscador-lista input { padding: 8px 10px 8px 32px; border-radius: 999px; font-size: var(--fs-base); }
#lista-informes { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 16px; }
.grupo-lista > h4, .grupo-lista > summary { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px 6px;
  font-size: var(--fs-chica); font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; list-style: none; }
.grupo-lista > summary::-webkit-details-marker { display: none; }
.grupo-lista > summary svg.icono { width: 15px; height: 15px; color: var(--tinta-tenue); }
.grupo-lista .conteo { margin-left: auto; font-weight: 400; color: var(--tinta-tenue); }
.item-informe { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: 0; border-left: 3px solid transparent; background: none; text-align: left; padding: 8px 14px 8px 17px;
  font: inherit; font-size: var(--fs-base); color: var(--tinta); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-informe:hover { background: var(--superficie-2); }
.item-informe.activo { background: var(--marca-clara); border-left-color: var(--acento, var(--marca)); color: var(--marca-oscura); font-weight: 700; }
.item-informe .estrella { flex: none; border: 0; background: none; padding: 2px; color: var(--tinta-tenue); opacity: 0; cursor: pointer; font-size: var(--fs-chica); }
.item-informe:hover .estrella, .item-informe .estrella.activa { opacity: 1; }
.item-informe .estrella.activa { color: #d99a00; }

.area-informe { min-height: 0; overflow-y: auto; padding: 0 24px 24px; }
.cabecera-informe { position: sticky; top: 0; z-index: 5; background: var(--superficie); padding-top: 14px; border-bottom: 1px solid var(--borde); }
/* El nombre de la fila de la barra no puede ser «fila-titulo»: así se llaman los subtítulos de los
   estados financieros (tr.fila-titulo) y el flex les desarma la tabla. */
.barra-titulo-informe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.barra-titulo-informe h3 { margin: 0; font-size: var(--fs-dialogo); letter-spacing: -.005em; white-space: nowrap; }
#r-volver[hidden] { display: none; }
.barra-titulo-informe .periodo-elegido { color: var(--tinta-suave); font-size: var(--fs-chica); white-space: nowrap; }
.barra-titulo-informe .espaciador { flex: 1; }
.fila-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 0 14px; }
.fila-filtros .campo { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.fila-filtros .campo label { margin: 0; font-size: var(--fs-chica); }
#r-filtros .campo input, #r-filtros .campo select, .fila-filtros .campo .combo-entrada { height: 34px; padding: 4px 10px; font-size: var(--fs-base); }
.fila-filtros .campo .combo { width: auto; min-width: 200px; }
.fila-filtros label.marca { height: 34px; display: flex; align-items: center; margin: 0; white-space: nowrap; }
.grafico-plegable { margin: 0 0 16px; }
.grafico-plegable > summary { cursor: pointer; font-weight: 700; color: var(--tinta-suave); padding: 6px 0; list-style: none; }
.grafico-plegable > summary::-webkit-details-marker { display: none; }
.grafico-plegable > summary::before { content: '▸ '; }
.grafico-plegable[open] > summary::before { content: '▾ '; }
.grafico-plegable .grafico-visor { margin-top: 8px; }
.espacio-informes .hoja:only-of-type .membrete { display: none; }

.fila-rapidos { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rotulo-rapidos { font-size: var(--fs-chica); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; min-width: 70px; }
.cabecera-informe .rotulo-rapidos { color: rgba(255, 255, 255, .85); }
.cabecera-informe .botones-opcion button { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.cabecera-informe .botones-opcion button:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: #fff; }
.cabecera-informe .botones-opcion button.activa { background: #fff; color: color-mix(in srgb, var(--acento) 85%, #000); border-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }

/* ---- Diseño llamativo del espacio de informes (pedido del usuario: «que sea llamativo») ----
   Cada categoría tiene su color (COLORES_CATEGORIA, que la pantalla pone en --acento): tiñe la cabecera,
   las tarjetas, la tabla y la lista. Arial se mantiene; se agrandan títulos y cifras. */
.grupo-lista[data-categoria="Contabilidad"] { --cat: #0d2742; } .grupo-lista[data-categoria="Nómina"] { --cat: #1e5a7a; }
.grupo-lista[data-categoria="Facturación"] { --cat: #2a78d6; } .grupo-lista[data-categoria="Inventarios"] { --cat: #c26a00; }
.grupo-lista[data-categoria="Tesorería"] { --cat: #16794a; } .grupo-lista[data-categoria="Impuestos"] { --cat: #5c62ac; }
.grupo-lista[data-categoria="Cartera"] { --cat: #00756f; } .grupo-lista[data-categoria="Compras"] { --cat: #5c62ac; }
.grupo-lista[data-categoria="Gerencia"] { --cat: #b45309; } .grupo-lista[data-categoria="Auditoría"] { --cat: #525c6b; }
.lista-informes { background: linear-gradient(180deg, #f6f9fb 0%, var(--superficie) 220px); }
.grupo-lista > summary { color: var(--cat, var(--tinta-suave)); font-size: var(--fs-chica); padding: 12px 14px 6px; }
.grupo-lista > summary svg.icono { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: #fff;
  background: var(--cat, var(--marca)); box-shadow: 0 3px 8px color-mix(in srgb, var(--cat, var(--marca)) 35%, transparent); }
.grupo-lista .conteo { background: color-mix(in srgb, var(--cat, var(--marca)) 12%, #fff); color: var(--cat, var(--tinta-suave));
  border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: var(--fs-chica); }
.grupo-lista .item-informe { padding-left: 50px; }
.grupo-lista .item-informe::before { content: ''; position: absolute; left: 30px; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  transform: translateY(-50%); background: color-mix(in srgb, var(--cat, var(--marca)) 55%, #fff); }
.grupo-lista .item-informe:hover { background: color-mix(in srgb, var(--cat, var(--marca)) 7%, #fff); color: var(--cat, var(--marca)); }
.grupo-lista .item-informe.activo { background: var(--cat, var(--marca)); color: #fff; border-left-color: color-mix(in srgb, var(--cat, var(--marca)) 70%, #000);
  border-radius: 0 10px 10px 0; margin-right: 10px; width: calc(100% - 10px); box-shadow: 0 6px 14px color-mix(in srgb, var(--cat, var(--marca)) 30%, transparent); }
.grupo-lista .item-informe.activo::before { background: #fff; }
.grupo-lista .item-informe.activo .estrella { color: #fff; }

.area-informe { --acento: var(--marca); background: #f1f5f9; padding: 0 26px 30px; }
.cabecera-informe { top: 10px; margin: 14px 0 18px; padding: 18px 22px 10px; border: 0; border-radius: 18px; color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--acento) 78%, #061525) 0%, var(--acento) 55%, color-mix(in srgb, var(--acento) 70%, #01aba3) 100%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--acento) 28%, transparent); }
.cabecera-informe .barra-titulo-informe h3 { color: #fff; font-size: var(--fs-pantalla); font-weight: 800; letter-spacing: -.01em; }
.cabecera-informe .barra-titulo-informe .periodo-elegido { color: #fff; background: rgba(255, 255, 255, .18); padding: 4px 12px;
  border-radius: 999px; font-weight: 700; font-size: var(--fs-chica); }
.cabecera-informe .fila-filtros { padding: 14px 0 8px; }
.cabecera-informe .fila-filtros .campo label, .cabecera-informe .fila-filtros label.marca { color: rgba(255, 255, 255, .9); font-weight: 700; }
.cabecera-informe #r-filtros .campo input, .cabecera-informe #r-filtros .campo select,
.cabecera-informe .fila-filtros .campo .combo-entrada { background: #fff; border: 0; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); color: var(--tinta); }
.cabecera-informe .filtro-renglones { background: #fff; border: 0; border-radius: 999px; padding: 0 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); margin: 0; }
.cabecera-informe .filtro-renglones input { background: transparent; border: 0; box-shadow: none; color: var(--tinta); }
.cabecera-informe .filtro-renglones input::placeholder { color: var(--tinta-tenue); }
.cabecera-informe .filtro-renglones svg.icono { color: var(--tinta-tenue); z-index: 1; }
.cabecera-informe .filtro-renglones small { color: var(--tinta-suave); font-weight: 700; }
.cabecera-informe .accion.suave { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }
.cabecera-informe .accion.suave:hover { background: rgba(255, 255, 255, .28); }
.cabecera-informe #r-exportar { background: #fff; color: color-mix(in srgb, var(--acento) 85%, #000); border: 0; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }

.area-informe .resumen-visor { gap: 14px; margin-bottom: 18px; }
.area-informe .kpi-visor { position: relative; overflow: hidden; background: #fff; border: 0; border-radius: 16px; padding: 16px 18px 14px 20px;
  box-shadow: 0 6px 18px rgba(25, 40, 110, .08); border-left: 6px solid var(--acento); }
.area-informe .kpi-visor::after { content: ''; position: absolute; right: -18px; top: -18px; width: 84px; height: 84px; border-radius: 50%;
  background: color-mix(in srgb, var(--acento) 10%, transparent); }
.area-informe .kpi-visor > span { color: var(--tinta-suave); font-size: var(--fs-chica); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.area-informe .kpi-visor > strong { display: block; margin-top: 6px; font-size: clamp(13pt, 1.45vw, 20pt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; font-weight: 800; color: color-mix(in srgb, var(--acento) 55%, #111); }
.area-informe .kpi-visor > strong.negativo { color: var(--error); }
.area-informe .kpi-visor.bien > strong { color: #15803d; } .area-informe .kpi-visor.mal > strong { color: var(--error); }
.area-informe .kpi-visor > small { display: block; margin-top: 4px; color: var(--tinta-tenue); }

.area-informe .hoja { background: #fff; border: 0; border-radius: 18px; padding: 20px 24px 22px; box-shadow: 0 8px 24px rgba(25, 40, 110, .07); }
.area-informe .hoja table thead th { background: color-mix(in srgb, var(--acento) 11%, #fff); color: color-mix(in srgb, var(--acento) 70%, #111);
  font-size: var(--fs-chica); font-weight: 800; white-space: nowrap; border-bottom: 2px solid var(--acento); padding: 11px 12px; }
.area-informe .tabla-ancha, .area-informe .hoja { overflow-x: auto; }
.area-informe .hoja table thead th:first-child { border-top-left-radius: 10px; } .area-informe .hoja table thead th:last-child { border-top-right-radius: 10px; }
.area-informe .hoja table tbody td { font-size: var(--fs-base); padding: 9px 12px; }
.area-informe .hoja table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--acento) 3.5%, #fff); }
.area-informe .hoja table tbody tr:hover td { background: color-mix(in srgb, var(--acento) 9%, #fff); }
.area-informe .hoja table tr.fila-total td, .area-informe .hoja table tr.total td, .area-informe .hoja table tfoot td {
  background: color-mix(in srgb, var(--acento) 14%, #fff) !important; font-weight: 800; color: color-mix(in srgb, var(--acento) 60%, #111); }
.area-informe .hoja a, .area-informe .hoja .enlace-auxiliar { color: color-mix(in srgb, var(--acento) 85%, #000); }
.area-informe .grafico-plegable > summary { color: color-mix(in srgb, var(--acento) 80%, #000); }
/* NOM03a12 (DS01): el `<small>` del navegador mide 11,67 px; los porcentajes de «Los Mayores» y las notas de las tarjetas del visor no bajan de 14 px. */
.area-informe small { font-size: var(--fs-chica); }

@media (max-width: 900px) {
  .espacio-informes { grid-template-columns: 1fr; }
  .cabecera-informe { position: static; }
  .area-informe { padding: 0 16px 16px; }
  /* El botón Exportar queda pegado a la izquierda (no a la derecha de la barra): el menú se abre
     hacia la derecha en vez de salirse de la pantalla por la izquierda. */
  .area-informe .menu-columnas { left: 0; right: auto; max-width: calc(100vw - 32px); }
}
/* REP-VIS (inicio) */
.area-informe[hidden], .herramientas-informe[hidden] { display: none; }
.espacio-informes[data-estado="lista"] { grid-template-columns: 1fr; }
.espacio-informes[data-estado="lista"] .lista-informes { border-right: 0; overflow-y: auto; }
.espacio-informes[data-estado="lista"] .buscador-lista { max-width: 480px; border-bottom: 0; padding: 16px 20px 8px; }
.espacio-informes[data-estado="lista"] .lista-informes > .accion { align-self: flex-start; margin: 0 0 8px 20px; }
.espacio-informes[data-estado="lista"] #lista-informes { flex: none; overflow: visible; columns: 300px auto; column-gap: 28px; padding: 4px 20px 24px; }
.espacio-informes[data-estado="lista"] #lista-informes .grupo-lista { break-inside: avoid; }
#r-volver-nomina { align-self: flex-start; margin: 12px 12px 0; }
.herramientas-informe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabecera-informe { margin: 10px 0 12px; padding: 12px 18px 6px; border-radius: 14px; }
.cabecera-informe .barra-titulo-informe h3 { font-size: var(--fs-dialogo); }
.cabecera-informe .fila-filtros { padding: 10px 0 6px; gap: 10px; }
#r-filtros > .fila-rapidos:first-child { flex: 0 1 auto; }
.lista-informes > #lista-informes { display: block; }      /* la regla `aside nav { display: none; }` del menú de celular (hasta 1000 px) también apagaba esta lista */
@media (min-width: 901px) {
  body[data-pantalla="informes"] main, body[data-pantalla="informesadm"] main, body[data-pantalla="informesnomina"] main { flex: 1; }
  #r-filtros > .fila-rapidos:first-child { max-width: calc(100% - 200px); }      /* «Generar Informe» queda a la derecha de los chips del período, no en un renglón aparte */
}
@media (max-width: 900px) {
  .espacio-informes[data-estado="lista"] .buscador-lista { max-width: none; padding: 12px; }
  .espacio-informes[data-estado="lista"] #lista-informes { columns: auto; padding: 4px 0 16px; }
  .herramientas-informe { width: 100%; }
}
/* REP-VIS (fin) */
/* UXI-b (inicio) */
.cabecera-informe { padding: 8px 14px; margin: 8px 0 10px; border-radius: 12px; }
.cabecera-informe .barra-titulo-informe { min-height: 36px; flex-wrap: nowrap; gap: 10px; }
.cabecera-informe .barra-titulo-informe h3 { font-size: var(--fs-seccion); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cabecera-informe .ayuda-signo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .8); background: transparent; color: #fff; font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.cabecera-informe .ayuda-signo[hidden] { display: none; }
.cabecera-informe .ayuda-signo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cabecera-informe .barra-titulo-informe .periodo-elegido { flex: none; }
.panel-parametros { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; color: var(--tinta); }
.panel-parametros > .cuerpo-param { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.panel-parametros > .campo-generar { align-self: start; min-width: 0; }
.panel-parametros .boton-generar:not(.pendiente) { background: var(--marca); color: #fff; box-shadow: none; }
.fila-param { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rotulo-param { font-weight: 700; color: var(--tinta-suave); min-width: 88px; }
.fila-param .campo { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
.fila-param .campo label { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }
.fila-param .campo select, .fila-param .campo input { width: auto; min-width: 160px; }
.fila-param .campo .combo { width: auto; min-width: 240px; }
.panel-parametros .botones-opcion.compactos button { min-height: 30px; padding: 4px 12px; }
.plegable-param { border-top: 1px solid var(--borde); padding-top: 8px; }
.plegable-param > summary { cursor: pointer; font-weight: 700; color: var(--marca-oscura); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 28px; }
.plegable-param > summary::-webkit-details-marker { display: none; }
.plegable-param > summary::before { content: '\25B8'; }
.plegable-param[open] > summary::before { content: '\25BE'; }
.plegable-param[open] > summary .resumen-param { display: none; }
.resumen-param { font-weight: 400; color: var(--tinta-suave); }
.plegable-param > .cuerpo-plegable { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 2px 18px; }
.chip-param { font-size: var(--fs-base); }
.recientes-param { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.recientes-param[hidden] { display: none; }
.recientes-param .chip-param { cursor: pointer; padding: 4px 14px; background: var(--superficie); border-radius: 999px; color: var(--tinta); font: inherit; }
.recientes-param .chip-param:hover { border-color: var(--marca); color: var(--marca); }
@media (max-width: 1180px) {
  .cabecera-informe .barra-titulo-informe { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .cabecera-informe .barra-titulo-informe .espaciador { display: none; }
  .cabecera-informe .barra-titulo-informe h3 { flex: 1 1 120px; }
  .cabecera-informe .barra-titulo-informe .periodo-elegido { order: 10; }
  .cabecera-informe .barra-titulo-informe .herramientas-informe { order: 11; }
  .panel-parametros { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .fila-param .campo { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .fila-param .campo select, .fila-param .campo input, .fila-param .campo .combo { width: 100%; min-width: 0; }
  .panel-parametros > .campo-generar, .panel-parametros .boton-generar { width: 100%; }
}
/* UXI-b (fin) */
/* UXI-c (inicio) */
.panel-parametros .campo.selector-chips { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 7.5rem; align-items: start; gap: 6px 10px;
  flex: 1 1 100%; width: 100%; min-width: 0; }
.selector-chips > label { grid-column: 1; grid-row: 1; margin: 0; padding-top: 9px; font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }
.selector-chips > .caja-chips { grid-column: 2; grid-row: 1; }
.selector-chips > #r-sin-tercero { grid-column: 3; grid-row: 1; margin-top: 4px; }
.selector-chips > .botones-opcion { grid-column: 2 / 4; grid-row: 2; }
.selector-chips > .aviso { grid-column: 2 / 4; margin: 0; }
.caja-chips { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 4px 8px; border: 1px solid var(--borde-fuerte);
  border-radius: 10px; background: #fff; }
.caja-chips:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.caja-chips .chip-param { max-width: 100%; overflow-wrap: anywhere; }
.caja-chips .chip-param button { font: inherit; font-size: var(--fs-base); }
.panel-parametros .caja-chips .entrada-chips { flex: 1 1 200px; width: auto; min-width: 120px; height: 30px; padding: 0 4px; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; outline: none; font-size: var(--fs-base); }
.sugerencias-param { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra); }
.sugerencias-param[hidden] { display: none; }
.sugerencias-param [role="option"] { display: block; width: 100%; padding: 7px 12px; border: 0; background: none; text-align: left; font: inherit; font-size: var(--fs-base);
  color: var(--tinta); cursor: pointer; }
.sugerencias-param [role="option"][aria-selected="true"], .sugerencias-param [role="option"]:hover { background: color-mix(in srgb, var(--marca) 10%, #fff); }
.selector-chips > #r-sin-tercero[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
@media (max-width: 900px) {
  .panel-parametros .campo.selector-chips { grid-template-columns: minmax(0, 1fr); }
  .selector-chips > label, .selector-chips > .caja-chips, .selector-chips > #r-sin-tercero, .selector-chips > .botones-opcion, .selector-chips > .aviso { grid-column: 1; grid-row: auto; }
  .selector-chips > label { padding-top: 0; }
  .selector-chips > #r-sin-tercero { justify-self: start; margin-top: 0; }
}
/* UXI-c (fin) */

.hoja-visor { max-width: none; }

/* ======================================================= Inicio: mosaicos */
.crear-inicio { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 22px 24px 8px; box-shadow: var(--sombra); }
.crear-inicio > header { margin: 0 0 14px; }
.lista-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 14px 28px; padding-bottom: 16px; }
.grupo-mosaicos { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 4px; }
.rotulo-mosaicos { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--tinta);
  padding-bottom: 6px; border-bottom: 1px solid var(--superficie-3); }
.rotulo-mosaicos .icono { width: 18px; height: 18px; color: color-mix(in srgb, var(--acento) 70%, #0d2742); }
.mosaicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; }
.mosaico { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 112px; padding: 14px 10px; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie-2);
  font: inherit; color: var(--tinta); cursor: pointer; text-align: center; transition: all .15s ease; }
.icono-mosaico { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.icono-mosaico .icono { width: 22px; height: 22px; }
.icono-mosaico b { position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--acento); color: #fff; font-size: var(--fs-chica); line-height: 1; border: 2px solid var(--superficie); }
.mosaico strong { font-size: var(--fs-chica); line-height: 1.25; }
.mosaico:hover, .mosaico:focus-visible { background: var(--superficie); border-color: var(--acento); transform: translateY(-3px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--acento) 22%, transparent); outline: none; }
.mosaico:hover .icono-mosaico { background: var(--acento); color: #fff; }
.rotulo-mosaicos.modulo-ventas, .rotulo-mosaicos.modulo-compras, .rotulo-mosaicos.modulo-tesoreria, .rotulo-mosaicos.modulo-inventarios,
.rotulo-mosaicos.modulo-nomina, .rotulo-mosaicos.modulo-contabilidad, .rotulo-mosaicos.modulo-configuracion { --acento: inherit; }
.rotulo-mosaicos.modulo-ventas .icono { color: #2a78d6; } .rotulo-mosaicos.modulo-compras .icono { color: #5c62ac; }
.rotulo-mosaicos.modulo-tesoreria .icono { color: #16794a; } .rotulo-mosaicos.modulo-inventarios .icono { color: #c26a00; }
.rotulo-mosaicos.modulo-nomina .icono { color: #1e5a7a; } .rotulo-mosaicos.modulo-contabilidad .icono { color: #0d2742; }
.rotulo-mosaicos.modulo-configuracion .icono { color: #525c6b; }
@media (max-width: 1000px) { .lista-grupos { grid-template-columns: 1fr; } }

.aviso-version { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center;
  gap: 14px; padding: 12px 14px 12px 20px; border-radius: 999px; background: var(--menu-fondo); color: #fff;
  box-shadow: 0 16px 40px rgba(6, 21, 37, .35); font-weight: 600; }

.mosaico.modulo-ventas { --acento: #2a78d6; } .mosaico.modulo-compras { --acento: #5c62ac; }
.mosaico.modulo-tesoreria { --acento: #16794a; } .mosaico.modulo-inventarios { --acento: #c26a00; }
.mosaico.modulo-nomina { --acento: #1e5a7a; } .mosaico.modulo-contabilidad { --acento: #0d2742; }
.mosaico.modulo-configuracion { --acento: #525c6b; }


/* ============================================== Tablero: accesos por grupo */
.accesos { margin-top: 18px; }
.grupos-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 6px 28px; padding-bottom: 14px; }
.grupo-accesos { --acento: var(--marca); display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; }
.grupo-accesos.modulo-contabilidad { --acento: #0d2742; }
.grupo-accesos.modulo-impuestos { --acento: #b4432a; }
.grupo-accesos.modulo-informes { --acento: #00756f; }
.grupo-accesos.modulo-configuracion { --acento: #525c6b; }
.rotulo-accesos { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--tinta);
  padding-bottom: 6px; border-bottom: 1px solid var(--superficie-3); }
.rotulo-accesos .icono { width: 18px; height: 18px; color: color-mix(in srgb, var(--acento) 70%, #0d2742); }
.lista-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.acceso { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 12px 12px 12px 12px;
  border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie-2); color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer; transition: all .15s ease; }
.icono-acceso { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); transition: all .15s ease; }
.icono-acceso .icono { width: 20px; height: 20px; }
.texto-acceso { flex: 1; min-width: 0; }
.texto-acceso strong { display: block; font-size: var(--fs-chica); line-height: 1.25; }
.texto-acceso small { display: block; margin-top: 2px; font-weight: 400; color: var(--tinta-suave); font-size: var(--fs-chica); line-height: 1.35; }
.flecha-acceso { flex: none; width: 16px; height: 16px; color: var(--tinta-suave); opacity: 0; transform: translateX(-4px); transition: all .15s ease; }
.acceso:hover, .acceso:focus-visible { background: var(--superficie); border-color: var(--acento); transform: translateY(-2px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--acento) 20%, transparent); outline: none; }
.acceso:hover .icono-acceso, .acceso:focus-visible .icono-acceso { background: var(--acento); color: #fff; }
.acceso:hover .flecha-acceso, .acceso:focus-visible .flecha-acceso { opacity: 1; transform: none; color: var(--acento); }
.dos-columnas-tablero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.dos-columnas-tablero > .panel { margin: 0; }
@media (max-width: 1000px) { .grupos-accesos, .dos-columnas-tablero { grid-template-columns: 1fr; } }


/* ============================================ Notas a los estados financieros */
.notas-eeff { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.nota-eeff h4 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: var(--fs-base); color: var(--tinta); }
.nota-eeff h4 span { flex: none; font-size: var(--fs-chica); font-weight: 700; color: var(--marca); text-transform: uppercase; letter-spacing: .04em; }
.nota-eeff p { margin: 0 0 6px; line-height: 1.5; text-align: justify; }
.nota-eeff table { margin-top: 6px; }
.firmas b { font-weight: 700; }
@media print { .nota-eeff { break-inside: avoid; } }

table.informe-tabla.compacta { font-size: var(--fs-chica); }
table.informe-tabla.compacta td, table.informe-tabla.compacta th { padding: 6px 5px; white-space: nowrap; }
table.informe-tabla.compacta th { white-space: normal; }
table.informe-tabla.compacta td:nth-child(2) { white-space: normal; min-width: 150px; }
table.informe-tabla.compacta td.cero { color: var(--tinta-tenue); }

.dos-columnas-tablero.una { grid-template-columns: 1fr; }


/* ================================================= Visor de informes (v2) */
.resumen-visor { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.resumen-visor:empty { display: none; }
.kpi-visor { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); border-top: 3px solid var(--acento, var(--marca)); }
.kpi-visor span { font-size: var(--fs-chica); font-weight: 600; color: var(--tinta-suave); }
.kpi-visor strong { font-size: var(--fs-dialogo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.kpi-visor small { font-size: var(--fs-chica); color: var(--tinta-suave); }
.kpi-visor.bien { border-top-color: var(--exito); } .kpi-visor.bien strong { color: var(--exito-texto); }
.kpi-visor.mal { border-top-color: var(--error); } .kpi-visor.mal strong { color: var(--error); }
.hoja-visor .hoja { max-width: none; margin: 0 0 22px; }

/* Tablas del informe: lectura contable */
.hoja table.informe-tabla { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.hoja table.informe-tabla thead th { background: color-mix(in srgb, var(--acento, var(--marca)) 8%, #fff); color: var(--tinta);
  font-size: var(--fs-chica); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--acento, var(--marca)) 45%, var(--tinta)); }
.hoja table.informe-tabla tbody td { padding: 8px 10px; border-bottom: 1px solid #eef0f4; }
.hoja table.informe-tabla tbody tr:nth-child(even) td { background: #fafbfd; }
.hoja table.informe-tabla tbody tr:hover td { background: color-mix(in srgb, var(--acento, var(--marca)) 6%, #fff); }
.hoja table.informe-tabla td.cifra, .hoja table.informe-tabla td.fecha { white-space: nowrap; }
.hoja table.informe-tabla tr.fila-total td { background: #fff !important; font-weight: 700;
  border-top: 1.5px solid var(--tinta); border-bottom: 3px double var(--tinta); }
.hoja table.estado thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
/* Dentro del espacio de informes la barra ya queda pegada arriba: el encabezado de la tabla no
   necesita su propia posición pegajosa (quedaría debajo de la barra en vez de verse). */
.espacio-informes .hoja table.estado thead th { position: static; }
.hoja table.estado tr.fila-seccion td { color: color-mix(in srgb, var(--acento, var(--marca)) 70%, var(--tinta)); }
.hoja .nota-informe { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--superficie-2);
  color: var(--tinta-suave); font-size: var(--fs-chica); }
@media print {
  .resumen-visor, .lista-informes, .cabecera-informe, .grafico-plegable { display: none !important; }
  .hoja table.informe-tabla thead th { background: none; }
  .hoja table.informe-tabla tbody tr:nth-child(even) td { background: none; }
}

.kpi-visor strong.negativo { color: var(--error); }
.hoja table.informe-tabla td:not(.cifra):not(.fecha):not(.codigo) { min-width: 120px; }


/* Configuración de nómina */
.subpestanas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding: 6px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.subpestanas button { border: 0; background: none; padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 600;
  color: var(--tinta-suave); cursor: pointer; }
.subpestanas button.activa { background: var(--marca-clara); color: var(--marca-oscura); }
.tabla-cuentas-nomina td { vertical-align: top; }
.celda-cuenta input { width: 100%; max-width: 150px; font-variant-numeric: tabular-nums; }
.celda-cuenta input.configurada { font-weight: 700; border-color: var(--marca-borde); background: var(--marca-clara); }
.celda-cuenta small { display: block; margin-top: 3px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.celda-cuenta.invalida input { border-color: var(--error); }
.celda-cuenta.invalida small { color: var(--error); font-weight: 600; }
.tarjetas-importar .panel p { margin: 0 0 12px; color: var(--tinta-suave); }
.carta-laboral { margin-top: 30px; font-size: var(--fs-base); line-height: 1.7; }
.carta-laboral h3 { font-size: var(--fs-base); margin: 22px 0 14px; }
.carta-laboral p { text-align: justify; }

tr.fila-vencida td { background: var(--error-claro); }
tr.fila-por-vencer td { background: #fff7e6; }


/* Presupuesto */
.tabla-presupuesto input.pl-mes { width: 96px; }
.tabla-presupuesto input.pl-cuenta { width: 110px; }
.barra-ejecucion { position: relative; height: 22px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.barra-ejecucion span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--exito); opacity: .35; }
.barra-ejecucion.mal span { background: var(--error); }
.barra-ejecucion b { position: relative; display: block; text-align: right; padding: 2px 10px; font-size: var(--fs-chica); }

/* CRM */
.tablero-crm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.columna-crm { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 16px; padding: 12px; min-height: 220px;
  display: flex; flex-direction: column; gap: 10px; }
.columna-crm header { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 8px;
  border-bottom: 2px solid var(--marca-borde); }
.columna-crm header span { font-size: var(--fs-chica); color: var(--tinta-suave); }
.tarjeta-op { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 12px; border: 1px solid var(--borde);
  border-radius: 12px; background: var(--superficie); font: inherit; color: var(--tinta); cursor: pointer; box-shadow: var(--sombra);
  transition: all .14s ease; }
.tarjeta-op:hover { border-color: var(--marca); transform: translateY(-2px); }
.tarjeta-op strong { font-size: var(--fs-chica); }
.tarjeta-op span, .tarjeta-op small { font-size: var(--fs-chica); color: var(--tinta-suave); }
.tarjeta-op .valor-op { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta-op .pendiente-op { color: #b45309; font-weight: 600; }
.etapas-op { display: flex; gap: 6px; flex-wrap: wrap; }
.etapa-op { flex: 1; min-width: 100px; padding: 9px 10px; border: 1px solid var(--borde); background: var(--superficie-2); border-radius: 10px;
  font: inherit; font-weight: 600; color: var(--tinta-suave); cursor: pointer; }
.etapa-op.actual { background: var(--marca); color: #fff; border-color: transparent; }
.etapa-op.ganar:not(:disabled):hover { background: var(--exito); color: #fff; }
.etapa-op.perder:not(:disabled):hover { background: var(--error); color: #fff; }
.etapa-op:disabled { cursor: default; opacity: .85; }
tr.actividad-hecha td { color: var(--tinta-tenue); text-decoration: line-through; }
@media (max-width: 1000px) { .tablero-crm { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------ segundo factor de ingreso */
.pasos-sf { margin: 0 0 14px 18px; padding: 0; line-height: 1.6; }
.qr-sf { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 14px; min-height: 48px; }
.qr-sf svg { width: 176px; height: 176px; background: #fff; border: 1px solid var(--borde, #e2e8f0); border-radius: 8px; }
.qr-sf > div { display: flex; flex-direction: column; gap: 6px; max-width: 280px; }
.clave-sf { font-family: Consolas, monospace; font-size: var(--fs-chica); letter-spacing: 1px; word-break: break-all;
  background: var(--fondo-suave, #f4f6fb); padding: 8px 10px; border-radius: 6px; }

/* ---------------------------------------------------- emisión electrónica */
.chip-dian { margin-left: 6px; }
.interruptor-dian { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); }
.chip-evento { margin: 2px 4px 2px 0; display: inline-block; }

/* Cierre del mes: los doce períodos del año */
.meses-cierre { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.mes-cierre { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: var(--radio-chico);
  border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; font: inherit; text-align: left; }
.mes-cierre strong { font-size: var(--fs-chica); }
.mes-cierre.activa { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-clara); }
.mes-cierre.trece { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
@media (max-width: 800px) { .meses-cierre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* CIERRE-c (inicio) */
.seccion-formulario .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.seccion-formulario .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (max-width: 420px) { .meses-cierre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* CIERRE-c (fin) */

/* Sin miga cuando repetiría el título. */
.miga:empty { display: none; }

/* Herramientas de análisis a la derecha de la barra de acciones. */
.herramientas-barra { margin-left: auto; display: inline-flex; gap: 10px; flex-wrap: wrap; }

/* Formulario 350: renta e IVA comparten columnas, las cifras quedan alineadas. */
.columnas-350 { table-layout: fixed; width: 100%; }

/* Campos de una línea con la misma altura: select, texto y fecha alinean sus etiquetas en la fila. */
.campo > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .campo > select { height: 44px; }

/* Tarjeta en alerta: el punto y el círculo toman el color de la alerta, no el de su posición. */
.kpis-inicio > .kpi-inicio.atencion { --c: var(--estado-atencion); }
.kpis-inicio > .kpi-inicio.malo { --c: var(--error); }

/* Saldos iniciales: el botón Cargar al pie de cada tarjeta, alineado entre tarjetas. */
.cargas-apertura .categoria { display: flex; flex-direction: column; }
.cargas-apertura .categoria > .cuerpo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.cargas-apertura .categoria > .cuerpo > button { margin-top: auto; }

/* Declaración vencida: la gradualidad de la sanción, bajo las tarjetas. */
.gradualidad { margin: -4px 0 16px; align-items: flex-end; }
.gradualidad .ayuda { flex: 1; min-width: 260px; }

/* Celular: las tablas de listas se apilan en tarjetas; cada dato con el nombre de su columna. */
@media (max-width: 640px) {
  .tabla-apilable, .tabla-apilable tbody { display: block; width: 100%; }
  .tabla-apilable thead { display: none; }
  .tabla-apilable tr { display: block; padding: 10px 4px; border-bottom: 1px solid var(--borde); }
  .tabla-apilable td { display: block; padding: 4px 12px; border: 0; text-align: right; min-height: 28px; }
  .tabla-apilable td::after { content: ""; display: block; clear: both; }
  .tabla-apilable td[data-etiqueta]::before { content: attr(data-etiqueta); float: left; max-width: 45%;
    margin-right: 14px; text-align: left; font-weight: bold; font-size: var(--fs-chica); color: var(--tinta-suave); }
  .tabla-apilable td > * { margin-left: auto; }
  .tabla-apilable td:empty { display: none; }
  .tabla-apilable td.acciones, .tabla-apilable td:not([data-etiqueta]) { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; width: auto; flex-wrap: wrap; }
  .tabla-apilable tr.fila-total td:first-child::before { content: none; }
}
@media (max-width: 640px) {
  /* En la tarjeta, el texto recortado de la tabla de escritorio se ve completo. */
  table.tabla-apilable td.recorte { max-width: none; }
  table.tabla-apilable td.recorte span { white-space: normal; overflow: visible; }
}
@media (max-width: 640px) {
  /* Renglones de captura (comprobante, compras, ventas): conservan su ancho y se desplazan de lado. */
  .panel:has(> .cuerpo > table.renglones) > .cuerpo, .cuerpo:has(> table.renglones),
  .panel:has(> table.renglones), .panel:has(table.renglones-comercial) { overflow-x: auto; }
  table.renglones, table.renglones-comercial { min-width: 720px; }
}
@media (max-width: 640px) {
  /* Pie del diálogo: los botones se reparten en filas, sin salirse de la pantalla. */
  .dialogo > footer, .dialogo.completo > footer { flex-wrap: wrap; padding: 12px 16px; }
  .dialogo > footer > button { flex: 1 1 auto; }
  .solo-escritorio { display: none !important; }
}
@media (max-width: 640px) {
  /* Informes en el visor: la hoja se desplaza de lado; el diálogo no deja cortar columnas. */
  .dialogo .hoja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #pantalla .hoja { overflow-x: auto; }
}
@media (max-width: 640px) {
  /* Embudo CRM: una etapa por fila; el encabezado no compite con la cifra. */
  .tablero-crm { grid-template-columns: 1fr; }
  .columna-crm header { flex-wrap: wrap; gap: 2px 8px; }
  /* Los botones de texto largo (habilitación DIAN, procesos) parten el texto en vez de salirse. */
  #pantalla button.accion { white-space: normal; max-width: 100%; line-height: 1.3; }
}
@media (max-width: 640px) {
  /* Tablas anchas dentro de un diálogo se desplazan de lado en vez de cortarse. */
  .dialogo > .cuerpo { overflow-x: auto; }
  /* Filtros con ancho mínimo fijo ocupan el ancho del teléfono. */
  .barra-acciones .campo, #pantalla .campo[style*="min-width"] { min-width: 0 !important; width: 100%; }
  #tabla-conceptos { min-width: 720px; }
}
/* Un gráfico solo en un panel ancho no se estira a toda la pantalla. */
.grafico-acotado svg { max-width: 760px; display: block; }

/* Lista desplegable con búsqueda: el <select> queda oculto y una entrada filtra sus opciones. */
.combo { position: relative; width: 100%; }
.combo > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; }
.combo-entrada { width: 100%; padding-right: 30px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' fill='none' stroke='%23667' stroke-width='1.8'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.combo-lista { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 280px; overflow: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 30, 70, .16); padding: 6px; }
.combo-lista.abierta { display: block; }
.combo-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: var(--fs-chica); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-item:hover, .combo-item.activo { background: var(--marca-clara, #e6f6f5); color: var(--marca); }
.combo-item.elegido { font-weight: bold; }
.combo-grupo { padding: 8px 10px 4px; font-size: var(--fs-chica); text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-tenue); }
.combo-vacio { padding: 8px 10px; color: var(--tinta-tenue); font-size: var(--fs-chica); }
td .combo-entrada { min-width: 160px; }

/* Cajas de ayuda plegadas: solo el título a la vista; un clic las abre. */
details.porque { padding: 0; }
details.porque > summary { cursor: pointer; list-style: none; padding: 12px 18px; font-weight: bold; color: var(--tinta); font-size: var(--fs-base);
  display: flex; align-items: center; gap: 8px; }
details.porque > summary::-webkit-details-marker { display: none; }
details.porque > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--tinta-tenue); border-bottom: 2px solid var(--tinta-tenue);
  transform: rotate(-45deg); transition: transform .15s; flex: none; }
details.porque[open] > summary::before { transform: rotate(45deg); }
details.porque > *:not(summary) { margin-left: 18px; margin-right: 18px; }
details.porque > ul, details.porque > ol { margin-bottom: 14px; }
details.porque > p:last-child, details.porque > div:last-child { margin-bottom: 14px; }

/* Exoneración de aportes: una tarjeta que dice claramente en qué está la empresa. */
.panel.exoneracion { border-left: 5px solid var(--borde); }
.panel.exoneracion.si { border-left-color: var(--exito, #1a8f5a); }
.panel.exoneracion.no { border-left-color: var(--alerta, #b45309); }

/* Anexos de cada declaración. */
.anexos-declaracion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.anexos-declaracion .etiqueta { font-size: var(--fs-chica); color: var(--tinta-suave); margin-right: 4px; }
@media (max-width: 640px) {
  /* En el teléfono, las opciones de la lista buscable se leen completas. */
  .combo-item { white-space: normal; }
}

/* Modo sin mensajes: los textos explicativos solo se ven con la ayuda encendida (botón «?»). */
body.sin-ayuda p.ayuda, body.sin-ayuda details.porque,
body.sin-ayuda .nota-informe, body.sin-ayuda div.ayuda, body.sin-ayuda ul.ayuda, body.sin-ayuda .porque:not(details) { display: none !important; }
#boton-ayuda { width: 38px; height: 38px; border-radius: 50%; font-weight: bold; font-size: 16px; }
#boton-ayuda.activo { background: var(--marca); color: #fff; border-color: var(--marca); }
body.sin-ayuda #para-que { display: none !important; }

/* Centro de informes: filtro de renglones en la barra, orden en la hoja, gráfico de los mayores. */
.filtro-renglones { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }
.filtro-renglones input { border: 0; background: none; min-width: 180px; padding: 7px 0; font: inherit; height: auto; }
.filtro-renglones input:focus { outline: none; }
.filtro-renglones .icono { width: 15px; height: 15px; color: var(--tinta-tenue); }
.filtro-renglones small { color: var(--tinta-suave); white-space: nowrap; }
tr.oculta-filtro { display: none !important; }
th.ordenable { cursor: pointer; user-select: none; }
th.ordenable:hover { color: var(--marca); }
th.ordenable[data-orden="asc"]::after { content: " ▲"; font-size: var(--fs-chica); }
th.ordenable[data-orden="desc"]::after { content: " ▼"; font-size: var(--fs-chica); }
.grafico-visor:empty { display: none; }
.grafico-visor { margin: 0 0 16px; }
.grafico-visor .panel { border-left: 5px solid var(--acento); padding: 16px 20px; }
.grafico-visor .panel.sale { --acento: var(--error); }
.grafico-visor header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.grafico-visor header h3 { margin: 0; }
.grafico-visor header p { margin: 3px 0 0; color: var(--tinta-suave); font-size: var(--fs-chica); }
.barras-informe { display: grid; gap: 8px; }
.barra-informe { display: grid; grid-template-columns: minmax(140px, 30%) 1fr auto; gap: 12px; align-items: center; font-size: var(--fs-chica); }
.barra-informe .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-informe .pista { height: 12px; border-radius: 6px; background: var(--superficie-3); overflow: hidden; }
.barra-informe .relleno { height: 100%; background: var(--acento); border-radius: 6px; }
.barra-informe.negativa .relleno { background: var(--error); }
.barra-informe .monto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-informe.negativa .monto { color: var(--error); }
.barra-informe .monto small { color: var(--tinta-suave); margin-left: 8px; }
@media (max-width: 640px) {
  .barra-informe { grid-template-columns: 1fr auto; }
  .barra-informe .pista { grid-column: 1 / -1; }
  .filtro-renglones input { min-width: 120px; }
}
#lista-adjuntos a { color: var(--marca); font-weight: 600; }
.selector-empresa { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; font-size: var(--fs-chica); font-weight: 700; color: var(--tinta-suave); border-top: 1px solid var(--borde); }
.selector-empresa select { font-weight: 400; font-size: var(--fs-base); max-width: 280px; }
#menu-empresas:empty { display: none; }
tr.inactiva td { color: var(--tinta-tenue); }

/* Del saldo al movimiento: cifras-enlace en el balance, comprobantes-enlace en el auxiliar, columnas elegibles. */
table.estado tr.con-auxiliar td.cifra { text-decoration: underline dotted transparent; text-underline-offset: 3px; transition: text-decoration-color .12s; }
table.estado tr.con-auxiliar:hover td.cifra { text-decoration-color: var(--marca); color: var(--marca-oscura); }
.ver-comprobante-aux { color: var(--marca); font-weight: 600; text-decoration: none; }
.ver-comprobante-aux:hover { text-decoration: underline; }
table.estado.auxiliar td.fecha { white-space: nowrap; }
.menu-columnas { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; max-height: 360px; overflow: auto;
  padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); display: grid; gap: 6px; }
.menu-columnas strong { font-size: var(--fs-chica); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.menu-columnas label.marca { font-weight: 400; }
.menu-columnas button.accion { width: 100%; justify-content: flex-start; text-align: left; }
.combo-lista { border-radius: 12px; }
.combo-item { padding: 10px 12px; font-size: var(--fs-base); }
/* FIX-LISTAS (inicio): G1 (10/10/2026). Las filas de las listas buscables partían el texto con «…» («15040501 · Terre…»): ahora se parten en renglones
   (la lista mide al menos lo que su campo y crece hasta 640 px: ver hacerBuscables). La rueda sobre la lista no desplaza la página de atrás. */
/* El texto de la lista NO hereda el color del sitio donde está el campo: en la cabecera oscura del Centro de Informes (Desde/Hasta la Cuenta, Tercero, Bodega,
   Producto, Vendedor) las filas salían blancas sobre el fondo blanco de la lista y la lista parecía vacía. */
.combo-lista { overscroll-behavior: contain; box-sizing: border-box; color: var(--tinta); }
.combo-item { color: var(--tinta); }
.combo-item { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
/* FIX-LISTAS (fin) */

/* Seguimiento electrónico */
.pestanas-dian { margin-bottom: 16px; }
.pestanas-dian button { font-size: var(--fs-base); }
#dian-filtro { align-items: center; margin-bottom: 12px; }
#dian-filtro .herramientas-barra { margin-left: auto; }
.estado-desprendible { display: block; font-size: var(--fs-chica); }

@media (max-width: 640px) { .firmas { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; } }

.barra-masiva { margin: 0 0 10px; align-items: center; }
.barra-masiva .herramientas-barra { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.lista-avisos { margin: 0; padding-left: 18px; line-height: 1.6; }
.eventos-webhook { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 0 4px; }
.eventos-webhook label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Grupo de botones de opción (filtros de estado de Vacaciones, seguimiento DIAN): uno activo a la vez. */
.botones-opcion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.botones-opcion button { font: inherit; font-weight: bold; padding: 8px 16px; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--superficie); color: var(--tinta); cursor: pointer; transition: border-color .15s, background .15s; }
.botones-opcion button:hover { border-color: var(--marca); color: var(--marca); }
.botones-opcion button.activa, .botones-opcion button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.botones-opcion.compactos button { padding: 6px 14px; font-size: var(--fs-chica); border-radius: 999px; }

/* ===================================================== Colaboración (campana, comentarios, tareas) */
.boton-campana { position: relative; }
.contador-campana { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--error); color: #fff; font-size: var(--fs-chica); font-weight: 800; line-height: 17px; text-align: center; }
.panel-notificaciones { width: 340px; max-height: 70vh; overflow: auto; padding: 0; }
.cabeza-notificaciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.notificacion { padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.notificacion:last-child { border-bottom: 0; }
.notificacion.con-enlace { cursor: pointer; }
.notificacion.con-enlace:hover { background: var(--superficie-2); }
.notificacion strong { display: block; font-size: var(--fs-chica); }
.notificacion p { margin: 3px 0; color: var(--tinta-suave); font-size: var(--fs-chica); }
.acciones-notificacion { display: flex; gap: 6px; margin-top: 6px; }

.hilo-comentarios { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-height: 360px; overflow: auto; }
.comentario { padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); }
.cabeza-comentario { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.texto-comentario { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.45; }
.acciones-comentario { display: flex; gap: 6px; margin-top: 8px; }

/* Tablero Kanban de Tareas */
.tablero-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.columna-kanban { background: var(--superficie-2); border-radius: var(--radio); padding: 12px; min-height: 120px; }
.columna-kanban > h4 { margin: 2px 6px 10px; display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-chica); }
.columna-kanban > h4 .cuenta { color: var(--tinta-suave); font-weight: 400; }
.tarjeta-tarea { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--marca); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--sombra); }
.tarjeta-tarea strong { display: block; font-size: var(--fs-chica); }
.tarjeta-tarea .detalle-tarea { margin: 4px 0; color: var(--tinta-suave); font-size: var(--fs-chica); }
.tarjeta-tarea .meta-tarea { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.tarjeta-tarea .vence-tarea.vencida { color: var(--error); font-weight: bold; }
.tarjeta-tarea .mover-tarea { display: flex; gap: 6px; margin-top: 8px; }
@media (max-width: 900px) { .tablero-kanban { grid-template-columns: 1fr; } }

/* Historial de auditoría de un documento (verComprobante, facturas) */
.linea-historial { padding: 10px 0; border-bottom: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.linea-historial:last-child { border-bottom: 0; }
.linea-historial .quien-historial { flex: 1; min-width: 160px; }
.linea-historial .quien-historial strong { display: block; }
.linea-historial .quien-historial span { color: var(--tinta-suave); font-size: var(--fs-chica); }
.cambios-historial { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.cambios-historial pre { margin: 0; padding: 10px 12px; background: var(--superficie-2); border-radius: var(--radio-chico);
  font-family: inherit; font-size: var(--fs-chica); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
.cambios-historial h5 { margin: 0 0 6px; font-size: var(--fs-chica); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }

/* Cadena del libro contable (integridad) */
.resultado-cadena { display: flex; flex-direction: column; gap: 10px; }
.rotos-cadena { margin: 0; padding-left: 18px; color: var(--error); }

/* Avisos de calidad de datos sobre el informe y tendencia coloreada de las variaciones. */
.aviso-calidad { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: #fff8e6; border-left: 6px solid #d99a00; }
.aviso-calidad > summary { cursor: pointer; font-weight: 800; color: #8a5a00; list-style: none; }
.aviso-calidad > summary::-webkit-details-marker { display: none; }
.aviso-calidad ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.aviso-calidad li.alta strong { color: var(--error); }
td.tendencia-buena { color: #15803d !important; font-weight: 700; }
td.tendencia-mala { color: var(--error) !important; font-weight: 700; }

/* Generar Informe: nada se consulta hasta que el usuario lo pide. */
.fila-filtros .campo-generar { min-width: 0; margin-left: auto; }
.boton-generar { height: 40px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: color-mix(in srgb, var(--acento, var(--marca)) 85%, #000);
  font: 800 var(--fs-base) var(--letra); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); white-space: nowrap; }
.boton-generar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.boton-generar.pendiente { background: #ffd43b; color: #3b2f00; animation: latido-generar 1.6s ease-in-out infinite; }
@keyframes latido-generar { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, .7); } 50% { box-shadow: 0 0 0 8px rgba(255, 212, 59, 0); } }
@media (prefers-reduced-motion: reduce) { .boton-generar.pendiente { animation: none; } }
.informe-desactualizado { opacity: .35; filter: grayscale(.6); pointer-events: none; transition: opacity .2s; }
@media (max-width: 760px) { .fila-filtros .campo-generar { margin-left: 0; width: 100%; } .boton-generar { width: 100%; } }

/* Cuentas de nómina: columnas iguales en todas las secciones (alineadas) y edición con guardar explícito. */
.tabla-cuentas-nomina { table-layout: fixed; width: 100%; }
.tabla-cuentas-nomina col.col-concepto-nomina { width: 28%; }
.tabla-cuentas-nomina td.celda-cuenta .codigo { font-weight: 700; font-variant-numeric: tabular-nums; }
.tabla-cuentas-nomina td.celda-cuenta small { display: block; color: var(--tinta-suave); margin-top: 2px; }
.tabla-cuentas-nomina td.celda-cuenta.invalida small { color: var(--error); font-weight: 700; }
.tabla-cuentas-nomina td.celda-cuenta .combo, .tabla-cuentas-nomina td.celda-cuenta select { width: 100%; min-width: 0; }
.tabla-cuentas-nomina td.cambiada, td.cambiada { background: color-mix(in srgb, #ffd43b 22%, transparent); }
.barra-edicion-cuentas { position: sticky; top: 0; z-index: 5; background: var(--fondo, #f3f6f9); padding: 10px 0; margin-bottom: 6px; }
.barra-edicion-cuentas .pendiente-guardar { color: #8a5a00; font-weight: 800; }
@media (max-width: 760px) {
  .tabla-cuentas-nomina { table-layout: auto; }
  .tabla-cuentas-nomina col.col-concepto-nomina { width: auto; }
}
.barra-edicion-cuentas { display: flex; align-items: center; gap: 10px; }
.barra-edicion-cuentas .espaciador { flex: 1; }
.tabla-cuentas-nomina td.celda-cuenta .combo { display: block; width: 100%; max-width: none; }
.tabla-cuentas-nomina td.celda-cuenta input.combo-entrada { width: 100%; max-width: none; text-overflow: ellipsis; }

/* Conciliación: cruce manual (varios-a-uno) de partidas del extracto contra movimientos del libro. */
.fila-seleccionada td { background: color-mix(in srgb, var(--marca) 14%, var(--superficie)); }
.barra-cruce { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
  background: var(--superficie); border-top: 1px solid var(--borde); padding: 12px 18px; margin-top: 14px;
  border-radius: 12px; box-shadow: 0 -2px 12px rgba(16, 24, 40, .08); flex-wrap: wrap; }
.barra-cruce .espaciador { flex: 1; }
.barra-cruce strong { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .barra-cruce { gap: 10px; } .barra-cruce .espaciador { flex-basis: 100%; height: 0; } }

/* D4a: pie de abrirDialogo para un documento (accionesDocumento + barraDocumento). Salida y
   "Más ▾" a la izquierda; Causar/Confirmar y Cerrar a la derecha; se apila en pantallas angostas. */
#pie-dialogo.barra-documento { justify-content: space-between; flex-wrap: wrap; }
.barra-documento > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#pie-dialogo button[aria-busy="true"] { opacity: .65; cursor: wait; }
@media (max-width: 760px) {
  .barra-documento, .barra-documento > div { width: 100%; }
  .barra-documento > div button { flex: 1 1 auto; }
}

/* D4b/D4c: panel plegable "Cómo se Causó Antes" (D2) en los formularios de causación manual, y la
   pastilla de sugerencia por renglón ("Sugerida: 513535 · 95 %"), que nunca se aplica sola. */
.panel-historial-causacion { border: 1px dashed var(--borde); border-radius: var(--radio); margin-top: 14px; }
.panel-historial-causacion > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style: none; }
.panel-historial-causacion > summary::-webkit-details-marker { display: none; }
.panel-historial-causacion[open] > summary { border-bottom: 1px solid var(--borde); }
.panel-historial-causacion > .cuerpo { padding: 4px 14px 14px; }
.fila-sugerida { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.fila-sugerida .pildora { background: var(--marca-clara); color: var(--marca-oscura); }

/* EDIT: la cuenta es un dato del documento, visible incluso si se ocultan las ayudas. */
.c-cuenta-asociada { margin-top: 6px; font-size: var(--fs-chica); color: var(--tinta-suave); white-space: normal; overflow-wrap: anywhere; }
#f-vista-asiento, #f-asiento-vigente { max-width: 100%; white-space: normal; line-height: 1.35; }

/* UNIFICACIÓN: Compras y Ventas con la misma lista operativa. Todo va acotado a .lista-facturas,
   .seccion-operativa y #tabla-conceptos: no cambia el resto de la aplicación. */
.lista-facturas .filtros-facturas { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 4px 0 12px; }
.lista-facturas .filtros-facturas .campo { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-chica);
  color: var(--tinta-suave); min-width: 0; }
.lista-facturas .filtros-facturas input[type="search"] { min-width: 240px; }
.lista-facturas .conteo-facturas { margin: 10px 0 0; }
.lista-facturas .pildora.tipo-factura { background: var(--superficie-3); color: var(--tinta); font-weight: normal; }
.lista-facturas td.acciones-factura { white-space: nowrap; }
.lista-facturas td.acciones-factura > button { margin-right: 6px; }
.lista-facturas .mas-acciones { display: inline-block; vertical-align: top; }
.lista-facturas .mas-acciones > summary { list-style: none; cursor: pointer; display: inline-flex; }
.lista-facturas .mas-acciones > summary::-webkit-details-marker { display: none; }
.lista-facturas .mas-acciones > summary::after { content: " ▾"; }
.lista-facturas .mas-acciones[open] > summary::after { content: " ▴"; }
.lista-facturas .mas-acciones > summary:focus-visible, .lista-facturas td.acciones-factura button:focus-visible,
.seccion-operativa > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--acento) 70%, #0d2742); outline-offset: 2px; }
.lista-facturas .menu-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 6px;
  padding: 6px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie, #fff); white-space: normal; }
.lista-facturas .menu-acciones > button { text-align: left; justify-content: flex-start; width: 100%; }
.seccion-operativa { margin: 0 0 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie, #fff); }
.seccion-operativa > summary { cursor: pointer; padding: 12px 16px; font-weight: bold; }
.seccion-operativa > summary .cuenta { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--superficie-3);
  font-weight: normal; font-size: var(--fs-chica); }
.seccion-operativa > .panel { margin: 0; border: 0; box-shadow: none; }
@media (max-width: 640px) {
  .lista-facturas .filtros-facturas .campo, .lista-facturas .filtros-facturas input[type="search"],
  .lista-facturas .filtros-facturas select { width: 100%; min-width: 0; }
  .lista-facturas td.acciones-factura { white-space: normal; }
  .lista-facturas .mas-acciones { display: block; width: 100%; }
  .lista-facturas .mas-acciones > summary { width: 100%; justify-content: center; }
  /* Conceptos de la factura: cada renglón es una tarjeta con sus campos a todo el ancho (sin recortar
     ni desbordar la página a 390 px). */
  #tabla-conceptos, #tabla-conceptos tbody { display: block; width: 100%; min-width: 0; }
  #tabla-conceptos thead { display: none; }
  #tabla-conceptos tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  #tabla-conceptos td { display: block; width: auto !important; padding: 4px 0; border: 0; }
  #tabla-conceptos td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 3px;
    font-size: var(--fs-chica); font-weight: bold; color: var(--tinta-suave); }
  #tabla-conceptos input, #tabla-conceptos select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  #tabla-conceptos td.acciones-renglon { display: flex; justify-content: flex-end; gap: 8px; }
  #tabla-conceptos td.acciones-renglon button { min-width: 44px; min-height: 40px; }
}

/* Revisión visual: nombres extensos no desplazan las acciones fuera de la lista. */
@media (min-width: 761px) {
  /* Los importes no se parten en dos líneas con la barra lateral fija: las columnas numéricas tienen un
     ancho mínimo (la tabla no baja de 1000 px) y el panel se desplaza de lado si no cabe. */
  .lista-facturas { overflow-x: auto; }
  .lista-facturas table.sin-filtro { table-layout: fixed; width: 100%; min-width: 1000px; }
  .lista-facturas th:nth-child(1) { width: 13%; }
  .lista-facturas th:nth-child(2) { width: 17%; }
  .lista-facturas th:nth-child(3), .lista-facturas th:nth-child(4) { width: 8%; }
  .lista-facturas th:nth-child(5) { width: 13%; }
  .lista-facturas th:nth-child(6) { width: 14%; }
  .lista-facturas th:nth-child(7) { width: 14%; }
  .lista-facturas th:nth-child(8) { width: 13%; }
  .lista-facturas th, .lista-facturas td { padding: 12px 8px; overflow-wrap: anywhere; }
  .lista-facturas td.codigo { white-space: normal; }
  .lista-facturas td.cifra { white-space: nowrap; overflow-wrap: normal; }
  .lista-facturas th.cifra { min-width: 110px; }
  .lista-facturas td.cifra .ayuda { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .lista-facturas td.acciones-factura { width: auto; white-space: normal; }
  .lista-facturas td.acciones-factura > button, .lista-facturas .mas-acciones { display: block; width: 100%; margin: 4px 0; }
  .lista-facturas td.acciones-factura .accion { white-space: normal; max-width: 100%; margin-left: 0; }
  .lista-facturas .mas-acciones > summary { display: flex; justify-content: center; }
}

.lista-facturas .marca-estado, .lista-facturas .pildora { max-width: 100%; white-space: normal; overflow-wrap: anywhere; box-sizing: border-box; }

/* ================================================== UI01a′ — documento comercial (Hito 1)
   Formulario y «Ver» de Compras y Ventas: encabezado con estado y número, secciones en tarjetas, Resumen
   junto a los conceptos, renglones en tarjetas hasta 1023 px y pie al final en el celular. Todo va acotado a
   .doc-cabecera, .captura-documento, .tabla-ver y .resumen-documento: no cambia el resto de la aplicación.
   Texto nuevo con --tinta-suave (6,9:1) o más oscuro; los bordes de controles con #8a93a2 (3,1:1). */

.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Encabezado del documento, dentro del <header> del diálogo: título, estados y número (una sola vez). */
.doc-cabecera { display: flex; align-items: center; gap: 10px 14px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; margin: 0 8px 0 18px; }
.doc-cabecera:empty { display: none; }
.doc-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.doc-consecutivo { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; padding: 7px 10px 7px 16px; border: 1px solid var(--marca-borde);
  border-radius: 12px; background: var(--marca-clara); max-width: 100%; }
.doc-consecutivo .rotulo { font-size: var(--fs-chica); font-weight: bold; color: var(--tinta-suave); }
.doc-consecutivo .valor { font-size: var(--fs-cifra); line-height: 1.2; font-weight: bold; color: var(--marca-oscura); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; padding-right: 4px; }
.doc-consecutivo .nota { flex: 1 0 100%; order: 3; font-size: var(--fs-chica); color: var(--tinta-suave); margin-top: -2px; }
.doc-consecutivo.pendiente { background: var(--superficie); border-style: dashed; border-color: var(--borde-control); }
.doc-consecutivo.pendiente .valor { color: var(--marca-oscura); }
.doc-consecutivo .copiar { padding: 4px 11px; font-size: var(--fs-chica); }

/* Los diálogos de documento se desplazan con la página: así el encabezado, el pie y el Resumen quedan fijos. */
.dialogo.completo:has(.captura-documento) { overflow: visible; }
.dialogo.completo:has(.captura-documento) > .cuerpo { overflow: visible; }

/* Rejilla: captura (y «Ver») en una sola columna; el Resumen va DEBAJO de los conceptos, a todo el ancho (decisión del dueño). */
.captura-documento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.captura-documento > * { grid-column: 1; min-width: 0; }
.captura-documento > .panel, .captura-documento > details.panel { margin-bottom: 0; }
.captura-documento .panel { min-width: 0; }
.captura-documento > .columna-resumen > .panel { margin-bottom: 0; }
/* Resumen en la franja inferior: tarjeta de ancho completo con los importes en una columna alineada a la derecha. */
.captura-documento > .columna-resumen .resumen-documento, .captura-documento > .columna-resumen details.porque { max-width: 560px; margin-left: auto; }

.captura-documento .rejilla.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* !important: una regla antigua (≤1000 px) pone `.rejilla > * { grid-column: auto !important }` y borraría estos anchos. */
.captura-documento .rejilla.seis > .span2 { grid-column: span 2 !important; }
.captura-documento .rejilla.seis > .span3 { grid-column: span 3 !important; }
.captura-documento .rejilla.seis > .span6 { grid-column: span 6 !important; }
.captura-documento .campo-con-nuevo > .combo { flex: 1; min-width: 0; }
.captura-documento .prefijo-numero { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
.captura-documento input::placeholder { color: var(--tinta-tenue); }
.captura-documento input:disabled, .captura-documento select:disabled { color: var(--tinta-suave); }
.captura-documento .sin-permiso-asiento { margin: 0; color: var(--tinta-suave); }

/* Datos del «Ver»: dato a dato, legible y sin cortar nombres largos. */
.dato-doc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dato-doc .rotulo { font-size: var(--fs-chica); font-weight: bold; color: var(--tinta-suave); }
.dato-doc .valor-dato { padding: 9px 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2);
  overflow-wrap: anywhere; }
.captura-documento .cuenta-saldo { margin: 14px 0 0; color: var(--tinta-suave); font-size: var(--fs-chica); }
.captura-documento .cuenta-saldo strong { color: var(--tinta); }

/* Tabla de conceptos: columnas fijas y alineadas, sin selectores cortados. */
.captura-documento #tabla-conceptos { table-layout: fixed; min-width: 0; width: 100%; }
.captura-documento #tabla-conceptos th { padding: 9px 6px; font-size: var(--fs-chica); }
.captura-documento #tabla-conceptos td { padding: 6px; vertical-align: top; border-bottom: 1px solid var(--borde); }
.captura-documento #tabla-conceptos tbody tr:last-child td { border-bottom: 0; }
.captura-documento #tabla-conceptos input, .captura-documento #tabla-conceptos select { font-size: var(--fs-base); padding: 8px 8px; min-width: 0; }
.captura-documento #tabla-conceptos .combo-entrada { padding-right: 28px; }
.captura-documento #tabla-conceptos .c-descripcion, .captura-documento #tabla-conceptos .c-cantidad { margin-top: 6px; text-overflow: ellipsis; }
.captura-documento .panel-conceptos > .cuerpo { padding: 14px 12px; }
.captura-documento #tabla-conceptos input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.captura-documento #tabla-conceptos input[type="number"]::-webkit-inner-spin-button,
.captura-documento #tabla-conceptos input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.captura-documento #tabla-conceptos .c-cuenta-asociada { font-size: var(--fs-chica); color: var(--tinta-suave); margin-top: 4px; }
.captura-documento #tabla-conceptos td.acciones-renglon { text-align: right; white-space: nowrap; }
.captura-documento #tabla-conceptos td.acciones-renglon button { padding: 4px 9px; }

/* Resumen: concepto con su base debajo y la cifra a la derecha; el total, destacado. */
.resumen-documento { width: 100%; }
.resumen-documento td { padding: 8px 0; border-bottom: 1px solid #eef0f3; vertical-align: baseline; background: none; }
.resumen-documento td.cifra { padding-left: 14px; }
.resumen-documento td:first-child { overflow-wrap: anywhere; }
.resumen-documento .detalle { display: block; font-size: var(--fs-chica); font-weight: normal; color: var(--tinta-suave); overflow-wrap: anywhere; }
.resumen-documento tr.subtotal td { font-weight: bold; }
.resumen-documento tr.total td { font-weight: bold; font-size: var(--fs-dialogo); border-top: 1.5px solid var(--tinta); border-bottom: 0; padding-top: 12px;
  color: var(--marca-oscura); background: none; }
.resumen-documento tr.saldo td { font-weight: bold; border-bottom: 0; }
.resumen-documento tr.equivalente td { color: var(--tinta-suave); }
/* DOCV-b: la retención elegida que no se practicó va en $0 y apagada; el aviso de la ficha incoherente, ámbar y sin bloquear. */
.resumen-documento tr.sin-practicar td { color: var(--tinta-suave); }
.resumen-documento tr.aviso-ficha td { padding: 4px 0 8px; }
.resumen-documento tr.aviso-ficha .pildora { white-space: normal; max-width: 100%; box-sizing: border-box; border-radius: var(--radio); line-height: 1.35; }
/* DOCV-f.2: el diálogo «Anticipos por Cruzar»: la tabla cabe en el celular (390 px) sin desplazarse de lado. */
table.renglones.tabla-cruce { min-width: 0; table-layout: auto; }
.tabla-cruce th:last-child, .tabla-cruce td:last-child { width: 120px; }
.tabla-cruce td { overflow-wrap: anywhere; }
.tabla-cruce .c-valor { width: 100%; min-width: 0; }
.captura-documento details.porque { margin: 10px 0 0; font-size: var(--fs-chica); color: var(--tinta-suave); }
.captura-documento details.porque summary { cursor: pointer; font-weight: bold; color: var(--tinta); }
.captura-documento details.porque ul { margin: 6px 0 0; padding-left: 18px; }

/* «Ver»: renglones y tablas de apoyo alineados (columnas fijas) y en tarjetas en pantallas angostas. */
.tabla-ver { table-layout: fixed; }
.tabla-ver td { vertical-align: middle; padding: 9px 10px; overflow-wrap: anywhere; }
.tabla-ver th { padding: 9px 10px; }
.tabla-ver td.cifra { white-space: nowrap; overflow-wrap: normal; }
.tabla-ver .nombre-cuenta { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.tabla-ver .codigo-producto { color: var(--tinta-suave); }
.tabla-ver .valor-celda { min-width: 0; }
.captura-documento details.panel > summary { cursor: pointer; padding: 14px 20px; font-weight: bold; font-size: var(--fs-seccion); }
.captura-documento details.panel[open] > summary { border-bottom: 1px solid var(--borde); }

/* Lista de Compras y Ventas: documento destacado, fechas en una línea y estados apilados. */
.lista-facturas tbody td.codigo { font-weight: bold; color: var(--tinta); }
.lista-facturas td.fecha { white-space: nowrap; overflow-wrap: normal; }
.lista-facturas .chips-fila { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lista-facturas td.celda-estado { vertical-align: middle; }

/* Debajo de 1024 px: cada renglón de conceptos es una tarjeta con sus campos a todo el ancho. */
@media (max-width: 1023px) {
  .captura-documento .rejilla.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .captura-documento .rejilla.seis > .span2, .captura-documento .rejilla.seis > .span3, .captura-documento .rejilla.seis > .span6 { grid-column: span 2 !important; }
  .captura-documento .rejilla.seis > .mitad { grid-column: span 1 !important; }
  .captura-documento .campo-con-nuevo { flex-wrap: wrap; }
  .captura-documento .campo-con-nuevo > :first-child { flex: 1 1 100%; }
  .captura-documento #tabla-conceptos, .captura-documento #tabla-conceptos tbody { display: block; width: 100%; min-width: 0; }
  .captura-documento #tabla-conceptos colgroup, .captura-documento #tabla-conceptos thead { display: none; }
  .captura-documento #tabla-conceptos tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding: 12px 0;
    border-bottom: 1px solid var(--borde); }
  .captura-documento #tabla-conceptos tbody tr:last-child { border-bottom: 0; }
  .captura-documento #tabla-conceptos td { display: block; padding: 0; border: 0; min-width: 0; width: auto !important; }
  .captura-documento #tabla-conceptos td[data-ancho="2"] { grid-column: span 2; }
  .captura-documento #tabla-conceptos td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 3px;
    font-size: var(--fs-chica); font-weight: bold; color: var(--tinta-suave); }
  .captura-documento #tabla-conceptos td.acciones-renglon { grid-column: span 2; display: flex; justify-content: flex-end; gap: 8px; }
  .captura-documento #tabla-conceptos td.acciones-renglon button { min-width: 44px; min-height: 40px; }
  .captura-documento #tabla-conceptos td:empty { display: none; }
  .captura-documento #tabla-conceptos input, .captura-documento #tabla-conceptos select { font-size: inherit; padding: 9px 11px; }
  /* Tablas del «Ver»: tarjetas apiladas, la primera celda como título. */
  .tabla-ver { table-layout: auto; }
  .tabla-ver colgroup, .tabla-ver thead { display: none; }
  .tabla-ver, .tabla-ver tbody, .tabla-ver tr { display: block; width: 100%; }
  .tabla-ver tr { padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .tabla-ver tbody tr:last-child { border-bottom: 0; }
  .tabla-ver td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border: 0; padding: 3px 0; text-align: right;
    white-space: normal; }
  .tabla-ver td::before { content: attr(data-etiqueta); flex: none; max-width: 45%; font-weight: bold; font-size: var(--fs-chica);
    color: var(--tinta-suave); text-align: left; }
  .tabla-ver td:first-child { display: block; text-align: left; font-weight: bold; padding-bottom: 6px; }
  .tabla-ver td:first-child::before { content: none; }
  .tabla-ver td.cifra { white-space: nowrap; }
  .tabla-ver td:empty { display: none; }
  .tabla-ver .nombre-cuenta { display: block; }
}

/* DOCT-a (inicio): el diálogo «Traer Pedidos / Cotizaciones» y «Traer Órdenes de Compra» de la factura (encima de ella), el renglón traído con su valor unitario editable y el aviso de la cotización vencida. */
table.renglones.tabla-traer { min-width: 0; table-layout: auto; }
.tabla-traer tr.grupo-traer td { background: var(--superficie-2); font-weight: 600; }
.tabla-traer .traer-marca { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; font-size: var(--fs-base); font-weight: inherit; color: inherit; cursor: pointer; }
.tabla-traer .traer-marca input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: none; }
.tabla-traer .traer-todo { color: var(--tinta-suave); font-size: var(--fs-chica); font-weight: normal; white-space: nowrap; }
.tabla-traer .solo-movil { display: none; }
.tabla-traer .pc-cantidad, .tabla-traer .pc-lote, .tabla-traer .pc-vence { width: 100%; min-width: 88px; }
.pildora.vencida { background: var(--alerta-clara); color: var(--alerta); }
.traer-encabezado { margin: 0 0 10px; color: var(--tinta-suave); }
.traer-encabezado .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.captura-documento .ayuda-signo[hidden], .captura-documento .pastilla[hidden] { display: none; }
.captura-documento #tabla-conceptos .precio-documento { display: block; width: fit-content; margin-top: 4px; }
@media (max-width: 700px) {
  .tabla-traer thead { display: none; }
  .tabla-traer, .tabla-traer tbody { display: block; width: 100%; }
  .tabla-traer tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .tabla-traer tbody tr.grupo-traer { display: block; padding: 0; }
  .tabla-traer td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  .tabla-traer td::before { content: attr(data-etiqueta); display: block; font-size: var(--fs-chica); color: var(--tinta-suave); }
  .tabla-traer td[data-ancho="2"] { grid-column: span 2; }
  .tabla-traer td:empty { display: none; }
  .tabla-traer td.cifra { white-space: normal; text-align: left; }
  .tabla-traer td.cifra:has(input) { text-align: right; }
  .tabla-traer tr.grupo-traer td { padding: 8px 10px; }
  .tabla-traer tr.grupo-traer td::before, .tabla-traer td[data-etiqueta="Traer"]::before { content: none; }
  .tabla-traer .solo-movil { display: inline; }
  .tabla-traer .traer-marca { min-height: 44px; }
  .tabla-traer .pc-cantidad, .tabla-traer .pc-lote, .tabla-traer .pc-vence { min-height: 44px; }
}
/* DOCT-a (fin) */

/* En el celular: encabezado compacto y pie al final, en el orden del DOM y con botones de 44 px. */
@media (max-width: 760px) {
  .dialogo.completo:has(.captura-documento) > header { padding: 10px 12px; gap: 6px 8px; flex-wrap: wrap; padding-right: 52px; }
  .dialogo.completo:has(.captura-documento) > header h3 { font-size: var(--fs-seccion); flex: 1 1 auto; min-width: 0; }
  .dialogo.completo:has(.captura-documento) > header .cerrar { position: absolute; top: 8px; right: 8px; margin: 0; }
  .dialogo.completo:has(.captura-documento) .doc-cabecera { flex: 1 1 100%; margin: 0; }
  .dialogo.completo:has(.captura-documento) .doc-consecutivo { margin-left: 0; width: 100%; justify-content: space-between; padding: 3px 6px 3px 10px; }
  .dialogo.completo:has(.captura-documento) > .cuerpo { padding: 14px 12px 8px; }
  .dialogo.completo:has(.captura-documento) > footer { position: static; padding: 10px 12px; }
  .dialogo.completo:has(.captura-documento) > footer button { min-height: 44px; min-width: 0; white-space: normal; line-height: 1.25; }
  .dialogo.completo:has(.captura-documento) > #pie-dialogo:not(.barra-documento) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dialogo.completo:has(.captura-documento) > #pie-dialogo:not(.barra-documento) > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .captura-documento .panel > h3 { padding: 12px 14px 10px; }
  .captura-documento .panel .cuerpo { padding: 14px; }
  .captura-documento .panel .cuerpo button.accion { white-space: normal; max-width: 100%; text-align: center; }
  .lista-facturas .chips-fila { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 600px) {
  .captura-documento #tabla-conceptos td { grid-column: span 2; }
}
@media (max-width: 360px) {
  .captura-documento .prefijo-numero { grid-template-columns: minmax(0, 1fr); }
  .resumen-documento tr.total td { font-size: var(--fs-base); }
  .dialogo.completo:has(.captura-documento) > #pie-dialogo:not(.barra-documento) { grid-template-columns: 1fr; }
  .dialogo.completo:has(.captura-documento) .doc-consecutivo { flex-wrap: wrap; }
}
@media (min-width: 761px) {
  .lista-facturas th:nth-child(1) { width: 14%; }
  .lista-facturas th:nth-child(2) { width: 21%; }
  .lista-facturas th:nth-child(3), .lista-facturas th:nth-child(4) { width: 9%; }
  .lista-facturas th:nth-child(5) { width: 10%; }
  .lista-facturas th:nth-child(6) { width: 12%; }
  .lista-facturas th:nth-child(7) { width: 14%; }
  .lista-facturas th:nth-child(8) { width: 11%; }
}
@media (max-width: 340px) {
  /* A 320 px la barra superior de la aplicación medía 324 px y desplazaba la página de lado. */
  .barra-superior { padding: 0 8px; gap: 6px; }
  .barra-superior .acciones-superiores { gap: 4px; }
  .barra-superior .buscador-global, .barra-superior .buscador-global input { min-width: 0; }
  #aplicacion > aside .marca { padding: 0 8px; gap: 6px; }
}

/* ====================================================================== NAV02
   Cuatro modulos (Administrativo, Contabilidad, Nomina, DataIA): rotulo en el
   menu lateral, conmutador en la barra superior e Inicio de cuatro botones.
   Valores tomados de nav02_maqueta/maqueta_inicio4.html y maqueta_menu_modulos.html. */
:root {
  --ancho-menu: 312px;  /* cabe «Configuración de la Empresa» sin cortarse */
  /* BRAND-01: administrativo = turquesa oscuro, contabilidad = azul marino, nómina = azul petróleo, DataIA = índigo atenuado. Cada una da >= 4,5:1 como
     texto sobre blanco y con texto blanco encima; siguen distinguibles entre sí (también simulando daltonismo). */
  --area-administrativo: #00756f;
  --area-contabilidad: #0d2742;
  --area-nomina: #1e5a7a;
  --area-dataia: #5c62ac;
  /* HOME02: oscuros de cada modulo (contraste de los accesos blancos >= 9) */
  --area-administrativo-o: #004b49;
  --area-contabilidad-o: #061525;
  --area-nomina-o: #0f3347;
  --area-dataia-o: #2e3470;
}
/* --c color del modulo; --g inicio del degradado del bloque del Inicio (el de Administrativo arranca en #00756f: blanco 5,56:1); --o oscuro */
.area-administrativo { --c: var(--area-administrativo); --g: #00756f; --o: var(--area-administrativo-o); }
.area-contabilidad { --c: var(--area-contabilidad); --g: var(--area-contabilidad); --o: var(--area-contabilidad-o); }
.area-nomina { --c: var(--area-nomina); --g: var(--area-nomina); --o: var(--area-nomina-o); }
.area-dataia { --c: var(--area-dataia); --g: var(--area-dataia); --o: var(--area-dataia-o); }

/* Rotulo del modulo dentro del menu lateral: reutiliza nav .grupo y agrega el punto de color. */
nav .rotulo-area::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); margin-left: 8px; vertical-align: middle; }
@media (min-width: 1001px) {
  /* Escritorio, en un modulo: barra lateral fija y desplegada (el contenido se corre a su derecha, no queda tapado). */
  #aplicacion.visible.menu-fijo:not(.menu-recogido) { grid-template-columns: var(--ancho-menu) minmax(0, 1fr); }
  #aplicacion.menu-fijo:not(.menu-recogido) > aside { width: var(--ancho-menu); box-shadow: none; }
  #aplicacion.menu-fijo:not(.menu-recogido) > aside .logo > div, #aplicacion.menu-fijo:not(.menu-recogido) > aside nav button span { opacity: 1; }
  #aplicacion.menu-fijo:not(.menu-recogido) > aside .logo > div { display: block; }
  #aplicacion.menu-fijo:not(.menu-recogido) > aside .logo-riel { display: none; }
  #aplicacion.menu-fijo:not(.menu-recogido) > aside nav .grupo { color: var(--menu-grupo); }
  #aplicacion.menu-fijo:not(.menu-recogido) > aside nav .rotulo-area { color: #e6edf5; }
  #aplicacion.menu-fijo:not(.menu-recogido) > aside nav .grupo::before { opacity: 0; }
  /* El logo vuelve al Inicio. */
  #aplicacion > aside .logo { cursor: pointer; border-radius: 12px; }
  #aplicacion > aside .logo:focus-visible { outline: 2px solid #5ee0d8; outline-offset: 3px; }
}

/* Conmutador de modulo (es un <nav>: se anulan las reglas generales de nav y nav button). */
.conmutador-area { display: flex; flex: none; gap: 4px; padding: 4px; overflow: visible; background: var(--superficie-3);
  border-radius: 999px; min-width: 0; }
.conmutador-area[hidden] { display: none; }
.conmutador-area button { display: flex; align-items: center; justify-content: center; gap: 7px; width: auto; margin: 0;
  border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: var(--fs-chica);
  color: var(--tinta-suave); cursor: pointer; white-space: nowrap; box-shadow: none; transition: background .12s, color .12s; }
.conmutador-area button:hover { background: rgba(255, 255, 255, .7); color: var(--tinta); }
.conmutador-area button svg.icono, .conmutador-area button:hover svg.icono { color: currentColor; width: 18px; height: 18px; }
.conmutador-area button span { opacity: 1; overflow: visible; }
.conmutador-area .punto { display: block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.conmutador-area button[aria-current="true"] { background: var(--superficie); color: var(--c); font-weight: bold; box-shadow: var(--sombra); }
.conmutador-area button:focus-visible { outline: 3px solid var(--c); outline-offset: 1px; }

/* ====================================================================== HOME02 (variante B)
   Inicio: mapa de modulos a todo color. Contabilidad («Nucleo Contable») al centro con halo, Administrativo a la izquierda y
   Nomina a la derecha en columnas altas, DataIA debajo, y conectores punteados que fluyen hacia Contabilidad (y de ella a DataIA).
   Valores copiados de docs/mejoras_v13/lotes/home02_maqueta/variante_b.html (px, como la maqueta); la letra es Inter local
   (desde DS01a la misma Inter local es la letra de toda la aplicacion; ver --letra en :root). */
@font-face { font-family: 'Inter'; src: url('/fuentes/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
body[data-pantalla="inicio"] { background: #f3f6f9; }
body[data-pantalla="inicio"] .banda-pantalla, body[data-pantalla="inicio"] .conmutador-area { display: none; }
/* El Inicio se ve COMPLETO en una pantalla, sin deslizar (decision del dueno, 04/10/2026, noche 3): el marco mide exactamente el alto de la
   ventana y el mapa reparte lo que sobra entre sus filas; el contenido de cada bloque encoge (la ilustracion cede primero), nunca se desborda. */
body[data-pantalla="inicio"] #aplicacion.visible { height: 100vh; min-height: 0; overflow: hidden; }
body[data-pantalla="inicio"] .columna { height: 100vh; min-height: 0; overflow: hidden; }
body[data-pantalla="inicio"] main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: clamp(12px, 2vh, 22px) 32px clamp(14px, 2.4vh, 26px); }
body[data-pantalla="inicio"] #pantalla { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hero-inicio, .mapa-modulos { font-family: Inter, 'Segoe UI', system-ui, sans-serif; font-size: 16px; line-height: normal; color: #151a22; }

.hero-inicio { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(10px, 2vh, 20px); flex: none; }
.hero-inicio h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.hero-inicio p { margin: 5px 0 0; color: #4b5565; font-size: 15px; font-weight: 500; }
.hero-inicio p .fecha { white-space: nowrap; }
.hero-inicio p .sep { margin: 0 8px; color: #9aa3b2; }
.herramientas-inicio { display: flex; align-items: center; gap: 12px; flex: 0 1 640px; min-width: 0; }
.hueco-buscador { display: flex; flex: 1; min-width: 0; }
/* El buscador global (el mismo nodo de la barra superior, movido aqui) toma la forma grande de la maqueta. */
.hueco-buscador .buscador-global { position: relative; z-index: 20; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; max-width: none;
  height: 52px; padding: 0 18px; border-radius: 14px; background: #fff; border: 1.5px solid #8a93a2; box-shadow: 0 4px 14px rgba(20, 28, 70, .06);
  color: #4b5565; transition: border-color .15s, box-shadow .15s; }
.hueco-buscador .buscador-global:focus-within { border-color: #0d2742; box-shadow: 0 0 0 4px rgba(1, 171, 163, .28); }
.hueco-buscador .buscador-global > svg.icono { position: static; transform: none; width: 20px; height: 20px; stroke-width: 2; color: #4b5565; }
.hueco-buscador .buscador-global input, .hueco-buscador .buscador-global input:hover, .hueco-buscador .buscador-global input:focus {
  border: 0; outline: 0; box-shadow: none; background: transparent; border-radius: 0; padding: 0; width: auto; height: 100%;
  font: inherit; font-size: 16px; flex: 1; min-width: 0; color: #151a22; }
.hueco-buscador .buscador-global input::placeholder { color: #5f6878; }
.por-atender { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 18px; border-radius: 14px; border: 1.5px solid #efc27d;
  background: #fff5e3; color: #713d00; font: inherit; font-weight: 600; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background .15s, transform .15s; }
.por-atender[hidden] { display: none; }
.por-atender:hover { background: #ffecc8; transform: translateY(-1px); }
.por-atender:focus-visible { outline: 3px solid #713d00; outline-offset: 2px; }
.por-atender b { font-weight: 800; }
.por-atender .punto { width: 9px; height: 9px; border-radius: 50%; background: #d97000; animation: latido-atender 2.2s infinite; }
@keyframes latido-atender { 0% { box-shadow: 0 0 0 0 rgba(217, 112, 0, .45); } 70% { box-shadow: 0 0 0 9px rgba(217, 112, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 112, 0, 0); } }

.mapa-modulos { --ancho-conector: clamp(36px, 4.4vw, 64px); flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-conector) minmax(0, 1.35fr) var(--ancho-conector) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.35fr) clamp(30px, 5vh, 46px) minmax(0, 1fr); }
.nodo-modulo { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: clamp(14px, 2.4vh, 26px) clamp(16px, 1.7vw, 26px); border-radius: 26px; color: #fff;
  background: radial-gradient(100% 80% at 50% 0%, rgba(255,255,255,.06), transparent 70%), linear-gradient(160deg, var(--g), var(--o));
  box-shadow: 0 18px 36px -18px var(--o), 0 2px 6px rgba(16,24,40,.10); transition: transform .22s ease, box-shadow .22s ease; }
.nodo-modulo:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -20px var(--o), 0 4px 10px rgba(16,24,40,.12); }
.ilustracion-modulo { display: block; color: var(--c); }
.nodo-modulo .ilustracion-modulo { transition: transform .35s ease; }
/* Administrativo y Nomina son columnas altas: la ilustracion toma lo que sobra y se achica antes que el texto. */
.nodo-administrativo .ilustracion-modulo, .nodo-nomina .ilustracion-modulo { flex: 1 1 0; width: 100%; max-width: 420px; min-height: 0; margin: 0 auto clamp(10px, 2.2vh, 24px); }
.nodo-modulo:hover .ilustracion-modulo { transform: scale(1.06) rotate(-1.5deg); }
.nodo-contabilidad { padding: clamp(14px, 2.6vh, 28px) clamp(18px, 2vw, 30px); justify-content: center; overflow: visible; background: radial-gradient(70% 90% at 30% 40%, rgba(255,255,255,.07), transparent 65%), linear-gradient(160deg, var(--area-contabilidad), var(--o));
  box-shadow: 0 0 0 8px rgba(1,171,163,.14), 0 0 0 18px rgba(1,171,163,.06), 0 26px 50px -18px var(--o); }
.nodo-contabilidad:hover { box-shadow: 0 0 0 10px rgba(1,171,163,.18), 0 0 0 24px rgba(1,171,163,.07), 0 34px 60px -20px var(--o); }
.nodo-contabilidad .cuerpo-nucleo { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); flex: 1; min-height: 0; }
.nodo-contabilidad .cuerpo-nucleo > div { min-width: 0; }
.nodo-contabilidad .ilustracion-modulo { width: 34%; max-width: 240px; max-height: 100%; margin: 0; flex: none; }
.nodo-dataia { justify-content: center; }
.nodo-dataia .ilustracion-modulo { position: absolute; z-index: -1; right: clamp(14px, 1.6vw, 26px); top: 50%; width: clamp(84px, 9vw, 150px); max-height: 80%; margin: 0; transform: translateY(-50%); }
.nodo-dataia:hover .ilustracion-modulo { transform: translateY(-50%) scale(1.06) rotate(-1.5deg); }
.nodo-dataia .entrar-modulo { padding-right: clamp(96px, 10vw, 160px); }
.etiqueta-nucleo { align-self: flex-start; display: inline-flex; margin-bottom: clamp(6px, 1.2vh, 12px); padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.18); font-size: var(--fs-chica); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.entrar-modulo { all: unset; cursor: pointer; display: block; }
.entrar-modulo::after { content: ""; position: absolute; inset: 0; border-radius: 26px; }
.entrar-modulo:focus-visible::after { outline: 3px solid #fff; outline-offset: -8px; }
.nombre-modulo { display: flex; align-items: center; gap: 12px; font-size: clamp(22px, 2.1vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.nodo-contabilidad .nombre-modulo { font-size: clamp(26px, 2.6vw, 42px); }
.flecha-modulo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); transition: transform .22s ease, background .22s ease; }
.flecha-modulo svg.icono { width: 20px; height: 20px; stroke-width: 2.4; }
.nodo-modulo:hover .flecha-modulo, .entrar-modulo:focus-visible .flecha-modulo { transform: translateX(7px); background: rgba(255,255,255,.32); }
.linea-modulo { display: block; margin-top: 8px; font-size: clamp(14px, 1.15vw, 18px); font-weight: 500; line-height: 1.35; }
.conector { align-self: center; justify-self: stretch; height: 6px; border-radius: 3px; position: relative; margin: 0 -2px;
  background: repeating-linear-gradient(90deg, var(--desde) 0 12px, transparent 12px 22px); background-size: 22px 6px; animation: fluir-d 1.1s linear infinite; }
.conector::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--area-contabilidad); box-shadow: 0 2px 6px rgba(13,39,66,.35); }
.conector-administrativo { --desde: var(--area-administrativo); } .conector-administrativo::after { right: -4px; }
.conector-nomina { --desde: var(--area-nomina); animation-name: fluir-i; } .conector-nomina::after { left: -4px; }
.conector-dataia { justify-self: center; align-self: stretch; width: 6px; height: auto; margin: -2px 0;
  background: repeating-linear-gradient(180deg, var(--area-contabilidad) 0 12px, transparent 12px 22px); background-size: 6px 22px; animation-name: fluir-b; }
.conector-dataia::after { top: auto; bottom: -4px; left: 50%; margin: 0 0 0 -9px; border-color: var(--area-dataia); }
@keyframes fluir-d { to { background-position: 22px 0; } }
@keyframes fluir-i { to { background-position: -22px 0; } }
@keyframes fluir-b { to { background-position: 0 22px; } }
@keyframes fluir-s { to { background-position: 0 -18px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-inicio *, .mapa-modulos, .mapa-modulos *, .mapa-modulos *::before, .mapa-modulos *::after { animation: none !important; transition: none !important; }
}
/* Escritorio (con riel o con menu desplegado): Administrativo y Nomina en columnas altas, Contabilidad al centro y DataIA debajo.
   Usuarios sin algun modulo: la rejilla se reacomoda (la maqueta solo dibuja los cuatro); sin Contabilidad no hay nucleo al que conectar. */
@media (min-width: 1001px) {
  .nodo-administrativo { grid-column: 1; grid-row: 1 / 4; } .nodo-contabilidad { grid-column: 3; grid-row: 1; } .nodo-nomina { grid-column: 5; grid-row: 1 / 4; }
  .nodo-dataia { grid-column: 3; grid-row: 3; }
  .conector-administrativo { grid-column: 2; grid-row: 1; } .conector-nomina { grid-column: 4; grid-row: 1; }
  .conector-dataia { grid-column: 3; grid-row: 2; }
  .mapa-modulos.sin-nomina { grid-template-columns: minmax(0, 1fr) var(--ancho-conector) minmax(0, 1.35fr); }
  .mapa-modulos.sin-administrativo { grid-template-columns: minmax(0, 1.35fr) var(--ancho-conector) minmax(0, 1fr); }
  .mapa-modulos.sin-administrativo .nodo-contabilidad, .mapa-modulos.sin-administrativo .nodo-dataia, .mapa-modulos.sin-administrativo .conector-dataia { grid-column: 1; }
  .mapa-modulos.sin-administrativo .conector-nomina { grid-column: 2; }
  .mapa-modulos.sin-administrativo .nodo-nomina { grid-column: 3; }
  .mapa-modulos.sin-administrativo.sin-nomina { grid-template-columns: minmax(0, 1fr); }
  .mapa-modulos.sin-dataia .nodo-contabilidad { grid-row: 1 / 4; }
  .mapa-modulos.sin-dataia .conector-administrativo, .mapa-modulos.sin-dataia .conector-nomina { grid-row: 1 / 4; }
  .mapa-modulos.sin-contabilidad { display: flex; gap: 20px; }
  .mapa-modulos.sin-contabilidad .nodo-modulo { flex: 1 1 0; }
}
/* De 1001 a 1279 px (riel lateral de 72 px) el ancho es corto: rellenos y letras un poco menores, para que ningun nombre quede cortado. */
@media (min-width: 1001px) and (max-width: 1279px) {
  body[data-pantalla="inicio"] main { padding-left: 20px; padding-right: 20px; }
  .nodo-modulo { border-radius: 22px; }
  .entrar-modulo::after { border-radius: 22px; }
  .nombre-modulo { font-size: 24px; gap: 8px; }
  .nodo-contabilidad .nombre-modulo { font-size: 28px; }
  .flecha-modulo { width: 28px; height: 28px; }
  .flecha-modulo svg.icono { width: 16px; height: 16px; }
}

/* Hasta 1100 px el conmutador baja a su propia fila: si no, el buscador queda reducido a un icono. */
@media (max-width: 1100px) {
  .barra-superior { flex-wrap: wrap; height: auto; min-height: 62px; padding: 8px 14px; gap: 8px; }
  .conmutador-area { order: 3; width: 100%; }
  .conmutador-area button { flex: 1; padding: 8px 6px; }
}
@media (max-width: 700px) {
  .conmutador-area button svg.icono { display: none; }
  .conmutador-area button { font-size: var(--fs-chica); gap: 5px; padding: 8px 3px; }
  .barra-superior .buscador-global, .barra-superior .buscador-global input { min-width: 0; }
}
@media (max-width: 360px) {
  .barra-superior { padding: 8px; gap: 6px; }
  .conmutador-area { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; }
}

/* NAV02b: celular y tableta. Dentro de un modulo el menu es un cajon que se abre al entrar (con telon detras);
   en Inicio no hay menu que abrir, asi que el boton Menu se oculta. */
@media (max-width: 1000px) {
  #aplicacion:not(.menu-fijo) .boton-menu { display: none; }
  #aplicacion > aside.abierto nav { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; width: min(92vw, 360px);
    padding: 0 12px 28px; overflow-y: auto; background: var(--superficie); box-shadow: 0 0 60px rgba(6, 21, 37, .4);
    animation: entrar-cajon .18s ease; }
  #aplicacion > aside.abierto .telon-menu { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(6, 21, 37, .45); }
  body.menu-abierto { overflow: hidden; }
  nav .cabecera-cajon { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0;
    z-index: 2; margin: 0 -12px 6px; padding: 14px 18px 10px 18px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
  nav .cabecera-cajon strong { font-size: var(--fs-seccion); color: var(--c); }
  nav .cerrar-cajon { width: 40px; height: 40px; margin: 0; padding: 0; justify-content: center; border-radius: 999px;
    font-size: var(--fs-pantalla); line-height: 1; color: var(--tinta-suave); border: 1px solid var(--borde); background: var(--superficie); }
  nav .rotulo-area { display: none; }
  nav button span { white-space: normal; }
}
@keyframes entrar-cajon { from { transform: translateX(-28px); opacity: .5; } to { transform: none; opacity: 1; } }

/* NAV02b: lo que antes mostraba el Inicio (Para Atender) vive en la campana; el menu Crear pone primero lo del modulo abierto. */
.atender-campana { border-bottom: 6px solid var(--superficie-3); }
.cabeza-atender { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 6px; }
.cabeza-atender .sub { min-width: 22px; padding: 1px 8px; border-radius: 999px; text-align: center; background: var(--alerta-clara);
  color: var(--alerta); font-weight: bold; font-size: var(--fs-chica); }
.lista-atender { list-style: none; margin: 0; padding: 0 0 4px; }
.lista-atender li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 14px; border-top: 1px solid var(--borde); }
.lista-atender li > svg.icono { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--alerta-clara); color: var(--alerta); }
.lista-atender li.alerta-alta > svg.icono { background: var(--error-claro); color: var(--error); }
.lista-atender strong { display: block; font-size: var(--fs-chica); }
.lista-atender p { margin: 2px 0 0; color: var(--tinta-suave); font-size: var(--fs-chica); }
#menu-crear .separador-crear { margin: 8px 6px 0; padding: 10px 8px 0; border-top: 1px solid var(--borde); font-size: var(--fs-chica);
  font-weight: 700; color: var(--tinta-tenue); }
#menu-crear .grupo-crear.del-modulo { color: var(--marca-oscura); }

/* Con la barra lateral fija el area de trabajo es mas angosta: el conmutador de modulo pierde el icono y deja sitio al buscador. */
@media (min-width: 1001px) and (max-width: 1599px) {
  #aplicacion.menu-fijo .conmutador-area button svg.icono { display: none; }
  #aplicacion.menu-fijo .conmutador-area button { padding: 7px 11px; font-size: var(--fs-chica); }
}

/* Con la barra lateral fija, en pantallas de menos de 1600 px las listas anchas se desplazan dentro de su panel
   en vez de quedar cortadas por el recorte del panel. */
@media (min-width: 1001px) and (max-width: 1599px) {
  #aplicacion.menu-fijo .panel:has(table) { overflow-x: auto; }
}

/* Tableta y celular: el marco no estira sus filas; el mapa de modulos del Inicio (HOME02) se apila en una columna
   con conectores verticales y acceso de 44 px (valores de la maqueta). */
@media (max-width: 1000px) {
  #aplicacion.visible { align-content: start; }
  body[data-pantalla="inicio"] main { padding: 16px 14px 24px; }
  .hero-inicio { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; }
  .hero-inicio h1 { font-size: 24px; }
  .hero-inicio p { font-size: 14px; }
  .herramientas-inicio { flex: none; flex-wrap: wrap; }
  .hueco-buscador { flex: 1 1 100%; }
  .hueco-buscador .buscador-global { height: 50px; }
  .por-atender { height: 44px; }
  .nodo-administrativo .ilustracion-modulo, .nodo-nomina .ilustracion-modulo { flex: none; height: auto; max-height: none; }
  .mapa-modulos { flex: none; min-height: 0; display: flex; flex-direction: column; }
  .nodo-modulo, .nodo-contabilidad { padding: 20px 18px 18px; border-radius: 22px; }
  .entrar-modulo::after { border-radius: 22px; }
  .nodo-dataia { flex-direction: column; align-items: stretch; gap: 0; }
  .nodo-modulo .ilustracion-modulo, .nodo-contabilidad .ilustracion-modulo, .nodo-dataia .ilustracion-modulo { position: absolute; z-index: -1; top: 16px; right: 12px; width: 96px; margin: 0; }
  .nodo-contabilidad .ilustracion-modulo { top: 50px; }
  .nodo-contabilidad .cuerpo-nucleo { display: block; }
  .entrar-modulo, .nodo-dataia .entrar-modulo { padding-right: 104px; }
  .nombre-modulo, .nodo-contabilidad .nombre-modulo { font-size: 26px; }
  .linea-modulo { font-size: 15px; }
  .etiqueta-nucleo { margin-bottom: 10px; font-size: var(--fs-chica); }
  .conector, .conector-nomina, .conector-dataia { grid-column: auto; grid-row: auto; align-self: center; justify-self: auto; width: 6px; height: 30px; margin: 2px 0;
    background: repeating-linear-gradient(180deg, var(--desde) 0 10px, transparent 10px 18px); background-size: 6px 18px; animation-name: fluir-b; }
  .conector-nomina { animation-name: fluir-s; } .conector-dataia { --desde: var(--area-contabilidad); }
  .conector::after { display: none; }
}
@media (max-width: 380px) {
  .nodo-modulo .ilustracion-modulo, .nodo-contabilidad .ilustracion-modulo, .nodo-dataia .ilustracion-modulo { width: 64px; height: auto; }
  .entrar-modulo, .nodo-dataia .entrar-modulo { max-width: calc(100% - 72px); padding-right: 0; }
  .nombre-modulo, .nodo-contabilidad .nombre-modulo { font-size: 22px; }
  .flecha-modulo { display: none; }
}

/* ============================================================== SEG01c — Seguimiento DIAN de ventas
   Acotado a .seguimiento-dian y .historial-seg-dian. En celular la tabla se apila en tarjetas con el
   mecanismo común (.tabla-apilable, arriba). */
.seguimiento-dian .filtros-seg-dian { align-items: flex-end; margin-bottom: 12px; }
.seguimiento-dian .barra-seg-dian { margin: 12px 0 8px; justify-content: flex-end; }
.seguimiento-dian .paginacion-seg-dian { margin-top: 12px; align-items: center; }
.seguimiento-dian .marca-estado, .seguimiento-dian .pildora { white-space: normal; max-width: 100%; }
.historial-seg-dian { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; }
.historial-seg-dian h4 { margin: 0 0 8px; }
.historial-seg-dian ol { margin: 0 0 8px; padding-left: 20px; }
.historial-seg-dian li { margin: 3px 0; overflow-wrap: anywhere; }
@media (min-width: 641px) {
  .seguimiento-dian table#sd-tabla { table-layout: fixed; width: 100%; min-width: 980px; }
  .seguimiento-dian #sd-tabla th:nth-child(1) { width: 15%; }
  .seguimiento-dian #sd-tabla th:nth-child(2) { width: 13%; }
  .seguimiento-dian #sd-tabla th:nth-child(3) { width: 9%; }
  .seguimiento-dian #sd-tabla th:nth-child(4) { width: 11%; }
  .seguimiento-dian #sd-tabla th:nth-child(5) { width: 14%; }
  .seguimiento-dian #sd-tabla th:nth-child(6) { width: 15%; }
  .seguimiento-dian #sd-tabla th:nth-child(7) { width: 8%; }
  .seguimiento-dian #sd-tabla th:nth-child(8) { width: 15%; }
  .seguimiento-dian #sd-tabla td.codigo { white-space: normal; }
  .seguimiento-dian #sd-tabla th, .seguimiento-dian #sd-tabla td { padding: 10px 8px; overflow-wrap: anywhere; vertical-align: top; }
  .seguimiento-dian #sd-tabla td.acciones-seg-dian { text-align: left; white-space: normal; }
  .seguimiento-dian #sd-tabla td.acciones-seg-dian > button { display: block; width: 100%; margin: 0 0 4px; white-space: normal; }
}
@media (max-width: 640px) {
  .seguimiento-dian .barra-seg-dian { justify-content: flex-start; }
  .seguimiento-dian .filtros-seg-dian .campo, .seguimiento-dian .filtros-seg-dian input,
  .seguimiento-dian .filtros-seg-dian select { width: 100%; min-width: 0; }
  .seguimiento-dian #sd-tabla td.acciones-seg-dian > button { flex: 1 1 auto; }
  .seguimiento-dian #sd-tabla tr.fila-historial-seg-dian td { display: block; padding: 0 0 10px; text-align: left; }
}

/* ============================================================== SEG01g — Eventos DIAN de compras
   Acotado a .eventos-dian. En celular la tabla se apila en tarjetas con el mecanismo común (.tabla-apilable). */
.eventos-dian .barra-ev-dian { margin: 12px 0 8px; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.eventos-dian .pasos-ev-dian { display: flex; flex-wrap: wrap; gap: 4px; }
.eventos-dian .marca-estado { white-space: normal; max-width: 100%; }
.eventos-dian .aviso-plazo { color: var(--alerta); }
@media (min-width: 641px) {
  .eventos-dian table#ev-tabla { table-layout: fixed; width: 100%; }
  .eventos-dian #ev-tabla th:nth-child(1) { width: 3%; }
  .eventos-dian #ev-tabla th:nth-child(2) { width: 15%; }
  .eventos-dian #ev-tabla th:nth-child(3) { width: 8%; }
  .eventos-dian #ev-tabla th:nth-child(4) { width: 11%; }
  .eventos-dian #ev-tabla th:nth-child(5) { width: 9%; }
  .eventos-dian #ev-tabla th:nth-child(6) { width: 21%; }
  .eventos-dian #ev-tabla th:nth-child(7) { width: 15%; }
  .eventos-dian #ev-tabla th:nth-child(8) { width: 18%; }
  .eventos-dian #ev-tabla td.fecha .accion { display: block; margin-top: 4px; }
  .eventos-dian #ev-tabla th.cifra, .eventos-dian #ev-tabla td.cifra { padding-right: 20px; }
  .eventos-dian #ev-tabla th, .eventos-dian #ev-tabla td { padding: 10px 8px; overflow-wrap: anywhere; vertical-align: top; }
  .eventos-dian #ev-tabla td.codigo { white-space: normal; }
  .eventos-dian #ev-tabla td.acciones-ev-dian { text-align: left; white-space: normal; }
  .eventos-dian #ev-tabla td.acciones-ev-dian > button { display: block; width: 100%; margin: 0 0 4px; white-space: normal; }
}
@media (max-width: 640px) {
  .eventos-dian .barra-ev-dian { justify-content: flex-start; }
  .eventos-dian #ev-tabla td.acciones-ev-dian > button { flex: 1 1 auto; }
}

/* ============================================================================ UI04 — formularios de compra y de venta
   Estructura de la referencia del dueño: encabezado a dos columnas, tabla de renglones con la columna «Tipo» y pie único con la forma de
   pago a la izquierda y los totales a la derecha. Solo clases semánticas y los tokens de :root, para que el sistema de diseño (DS01) se
   aplique después sobre ellas sin tocar valores sueltos. Valores medidos en docs/mejoras_v13/lotes/ui04_maqueta/maqueta_compra.html. */

:root {
  --ui04-etiqueta: 190px;          /* ancho del rótulo en el encabezado de dos columnas */
  --ui04-alto-campo: 36px;
  --alto-pie-dialogo: 69px;        /* DS01b: 14 + 40 (botón) + 14 + 1 (borde); antes 73. Alto de la barra de botones del diálogo: el pie de totales se pega justo encima */
}

/* Enlace de importación, en la cabecera del formulario. */
.enlace-importar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; font: inherit; font-weight: bold;
  color: var(--marca); text-decoration: underline; cursor: pointer; }
.enlace-importar:hover { color: var(--marca-oscura); }
.enlace-importar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* Encabezado: dos columnas, rótulo a la izquierda y campo a la derecha de cada fila. */
.captura-documento .encabezado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense;
  column-gap: 28px; row-gap: 12px; padding: 8px 0 18px; align-items: start; }
.captura-documento .fila-campo { display: grid; grid-template-columns: var(--ui04-etiqueta) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.captura-documento .fila-campo[hidden] { display: none; }
.captura-documento .fila-campo > label { margin: 0; font-size: var(--fs-chica); font-weight: normal; color: var(--tinta-suave); }
.captura-documento .fila-campo > label:empty { display: block; }
.captura-documento .fila-campo input:not([type="checkbox"]):not([type="radio"]), .captura-documento .fila-campo select { height: var(--ui04-alto-campo); }
.captura-documento .fila-campo input[readonly] { background: var(--superficie-2); color: var(--tinta-suave); }
.captura-documento .fila-campo .campo-con-nuevo { align-items: center; }
.captura-documento .fila-campo .prefijo-numero { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.captura-documento .fila-campo .campo-trm { margin-top: 8px; }
.captura-documento .fila-campo .aviso { margin: 8px 0 0; }
.captura-documento .fila-campo #f-historial-causacion { margin-top: 6px; }
.captura-documento .casilla { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-chica); font-weight: normal; color: var(--tinta-suave); cursor: pointer; }
.captura-documento .casilla input { width: 18px; height: 18px; }

/* Tabla de renglones: Tipo y, a su lado, la lista con buscador de ese tipo. */
.captura-documento .tabla-renglones #tabla-conceptos { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
.captura-documento #tabla-conceptos .col-n { width: 2.5%; }
.captura-documento #tabla-conceptos .col-tipo { width: 12.5%; }
.captura-documento #tabla-conceptos .col-elemento { width: 14.5%; }
.captura-documento #tabla-conceptos .col-descripcion { width: 8%; }
.captura-documento #tabla-conceptos .col-cantidad { width: 5%; }
.captura-documento #tabla-conceptos .col-unitario { width: 9.5%; }
.captura-documento #tabla-conceptos .col-descuento { width: 7.5%; }
.captura-documento #tabla-conceptos .col-iva { width: 11.5%; }
.captura-documento #tabla-conceptos .col-retencion { width: 10%; }
.captura-documento #tabla-conceptos .col-total { width: 8.5%; }
.captura-documento #tabla-conceptos .col-acciones { width: 10.5%; }
.captura-documento .tabla-renglones #tabla-conceptos th { background: var(--superficie-3); text-align: left; font-size: var(--fs-chica); color: var(--tinta-suave);
  padding: 10px 6px; vertical-align: bottom; border-bottom: 1px solid var(--borde); }
.captura-documento .tabla-renglones #tabla-conceptos th.cifra { text-align: right; }
.captura-documento .tabla-renglones #tabla-conceptos td { padding: 6px; vertical-align: top; border-bottom: 1px solid var(--borde); }
.captura-documento .tabla-renglones #tabla-conceptos tbody tr:last-child td { border-bottom: 0; }
.captura-documento #tabla-conceptos input:not([type="hidden"]), .captura-documento #tabla-conceptos select { height: var(--ui04-alto-campo); font-size: var(--fs-base); padding: 0 8px; min-width: 0; width: 100%; }
.captura-documento #tabla-conceptos .combo { min-width: 0; }
.captura-documento #tabla-conceptos .combo-entrada { padding-right: 28px; min-width: 0; }
.captura-documento #tabla-conceptos .c-descripcion { margin-top: 0; }
.captura-documento #tabla-conceptos td.n { padding-top: 14px; text-align: center; color: var(--tinta-suave); }
.captura-documento #tabla-conceptos tbody { counter-reset: renglon; }
.captura-documento #tabla-conceptos tr.renglon td.n::before { counter-increment: renglon; content: counter(renglon); }
/* DOCT-b (inicio): elegir un renglón con el ratón y quitarlo con Supr (el ✕ de siempre sigue siendo la vía del celular). */
tr.renglon-elegido > td { background: var(--marca-clara); }
tr.renglon-elegido > td:first-child { box-shadow: inset 3px 0 0 var(--marca); }
tr:has(.quitar, .c-quitar) > td.n, tr:has(.quitar, .c-quitar) > td.numero-renglon { cursor: pointer; }
td.n:focus-visible, td.numero-renglon:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.renglones-comercial tbody { counter-reset: renglon; }
.renglones-comercial tr.c-renglon td.n { text-align: center; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.renglones-comercial tr.c-renglon td.n::before { counter-increment: renglon; content: counter(renglon); }
#brindis .brindis-accion { margin-left: 12px; min-height: 40px; }
/* En el celular no hay ratón ni Supr: el ✕ de siempre mide al menos 44 x 40 px también en el comprobante y en los documentos comerciales. */
@media (max-width: 760px) {
  #tabla-lineas td.acciones-renglon button.quitar, .renglones-comercial .c-quitar { min-width: 44px; min-height: 40px; }
}
/* DOCT-b (fin) */
.captura-documento #tabla-conceptos .cuenta-renglon { margin-top: 4px; font-size: var(--fs-chica); color: var(--tinta-suave); overflow-wrap: anywhere; }
.captura-documento #tabla-conceptos .cuenta-renglon:empty { display: none; }
.captura-documento #tabla-conceptos td.total-renglon { padding-top: 14px; text-align: right; font-weight: bold; white-space: nowrap; }
.captura-documento #tabla-conceptos td.acciones-renglon { text-align: center; padding-top: 8px; white-space: nowrap; }
/* El ícono de bodega, lote y vencimiento solo existe en el renglón de inventario que lo necesita (el atributo hidden pierde frente a .accion). */
.captura-documento #tabla-conceptos .c-detalle[hidden] { display: none; }
.captura-documento #tabla-conceptos .quitar { padding: 2px 6px; color: var(--error); font-size: var(--fs-dialogo); line-height: 1.1; border-color: transparent; background: none; }
.captura-documento #tabla-conceptos .quitar:hover { background: var(--error-claro); }
.captura-documento #tabla-conceptos input.invalido { border-color: var(--error); background: var(--error-claro); }
.captura-documento #tabla-conceptos .fila-sugerida { margin-top: 4px; }
.captura-documento #tabla-conceptos tr.detalle td { background: var(--superficie-2); padding: 8px 10px 8px 3.5%; }
.captura-documento #tabla-conceptos tr.detalle .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.captura-documento #tabla-conceptos tr.detalle .sub label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-chica); font-weight: normal; }
.captura-documento #tabla-conceptos tr.detalle .sub input, .captura-documento #tabla-conceptos tr.detalle .sub select { height: 30px; width: auto; min-width: 130px; }
.captura-documento .pastilla { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--alerta-clara); color: var(--alerta); font-size: var(--fs-chica); }
.captura-documento.es-soporte .celda-descuento, .captura-documento.es-soporte #tabla-conceptos .col-descuento { display: none; }
.captura-documento.es-soporte #tabla-conceptos .col-elemento { width: 22%; }
.captura-documento .barra-renglon { display: flex; gap: 10px; margin: 2px 0 6px; flex-wrap: wrap; }

/* PRO01: «Proveedor del Ítem» (casilla «Proveedor por Ítem») y «Unidad» (solo con XML) se suman a la tabla sin romper la fila única: las
   demás columnas ceden ancho. Los campos bloqueados porque vienen del XML se ven «fijos» (fondo suave y borde punteado). */
.captura-documento #tabla-conceptos .col-proveedor { width: 14%; }
.captura-documento #tabla-conceptos .col-unidad { width: 5%; }
.captura-documento #tabla-conceptos .celda-proveedor { min-width: 180px; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-tipo { width: 9.5%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-elemento { width: 12%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-descripcion { width: 7%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-cantidad { width: 4.5%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-unitario { width: 8.5%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-descuento { width: 6.5%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-iva { width: 9.5%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-retencion { width: 8.5%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-total { width: 8%; }
.captura-documento #tabla-conceptos:has(.col-proveedor) .col-acciones { width: 9%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-tipo { width: 11%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-elemento { width: 14%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-descripcion { width: 9%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-cantidad { width: 4.5%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-unitario { width: 9%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-descuento { width: 7%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-iva { width: 10%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-retencion { width: 9%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-total { width: 8.5%; }
.captura-documento #tabla-conceptos:has(.col-unidad) .col-acciones { width: 9%; }
.captura-documento #tabla-conceptos input.fijo, .captura-documento #tabla-conceptos input.fijo:disabled { background: var(--superficie-2); border: 1px dashed var(--borde-fuerte, #c3cad5);
  color: var(--tinta); opacity: 1; -webkit-text-fill-color: var(--tinta); }
.captura-documento #tabla-conceptos input.fijo.cifra { text-align: right; }
.captura-documento .pastilla.xml { background: var(--exito-claro, #ecfdf3); color: var(--exito, #067647); border: 1px solid var(--exito-borde, #abefc6); font-size: var(--fs-chica); padding: 2px 10px; }
.captura-documento .pastilla.xml[hidden] { display: none; }
.captura-documento .pie-documento .radios .pastilla.xml { margin-left: 4px; }
.captura-documento .radios.invalido { outline: 2px solid var(--error); outline-offset: 4px; border-radius: var(--radio); }
.captura-documento .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.captura-documento .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.captura-documento #f-tercero-aviso > div + div { margin-top: 4px; }
.captura-documento select.invalido, .captura-documento .combo:has(select.invalido) .combo-entrada { border-color: var(--error); background: var(--error-claro); }
em.tercero-inferido { font-style: italic; color: var(--tinta-suave); }

/* «Más Datos»: lo poco usado (bodega y observaciones) queda plegado debajo de la tabla. */
.captura-documento .mas-datos { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.captura-documento .mas-datos > summary { cursor: pointer; padding: 10px 16px; font-weight: bold; color: var(--tinta-suave); }
.captura-documento .mas-datos[open] > summary { border-bottom: 1px solid var(--borde); }
.captura-documento .mas-datos-cuerpo { display: grid; gap: 12px; padding: 14px 16px; max-width: 720px; }

/* Pie único: forma de pago a la izquierda, totales a la derecha, de ancho completo y pegado sobre los botones. */
.captura-documento > .pie-documento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 32px; align-items: start;
  padding: 16px 20px; background: var(--superficie); border: 1px solid var(--borde); border-top: 2px solid var(--tinta); border-radius: var(--radio); }
.pie-documento h4 { margin: 0 0 10px; font-size: var(--fs-seccion); color: var(--marca-oscura); }
.pie-documento .radios { display: flex; gap: 24px; margin-bottom: 12px; }
.pie-documento .radios label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-base); font-weight: normal; color: var(--tinta); cursor: pointer; }
.pie-documento .radios input { width: 18px; height: 18px; }
.pie-documento .forma-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 20px; }
.pie-documento .forma-campos[hidden] { display: none; }
.pie-documento .fila-campo { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; }
.pie-documento .fila-campo > label { margin: 0; font-size: var(--fs-chica); font-weight: normal; color: var(--tinta-suave); }
.pie-documento .fila-campo input { height: var(--ui04-alto-campo); }
.pie-documento .nota { margin: 0; font-size: var(--fs-chica); color: var(--tinta-suave); }
.pie-documento .nota[hidden] { display: none; }
.pie-documento .pie-derecha .resumen-documento, .pie-documento .pie-derecha details.porque { max-width: none; margin-left: 0; }
.pie-documento .resumen-documento td { padding: 5px 0; }
.pie-documento .resumen-documento .detalle { display: inline; margin-left: 8px; font-size: var(--fs-chica); }
.pie-documento .resumen-documento tr.total td { padding-top: 8px; }
.pie-documento .dato-doc { max-width: 360px; }
.pie-documento .cuenta-saldo { margin: 12px 0 0; font-size: var(--fs-chica); }
@media (min-width: 1024px) and (min-height: 760px) {
  .dialogo.completo .captura-documento > .pie-documento:not(.ver) { position: sticky; bottom: var(--alto-pie-dialogo); z-index: 1; box-shadow: 0 -6px 16px rgba(16, 24, 40, .08); }
}

/* Hasta 900 px el renglón es una tarjeta: el tipo, la lista, la descripción y los importes en dos columnas. Desde 901 px es UNA sola fila. */
@media (max-width: 900px) {
  .captura-documento .tabla-renglones #tabla-conceptos { border: 0; background: none; border-radius: 0; overflow: visible; }
  .captura-documento .tabla-renglones #tabla-conceptos, .captura-documento .tabla-renglones #tabla-conceptos tbody { display: block; width: 100%; min-width: 0; }
  .captura-documento .tabla-renglones #tabla-conceptos colgroup, .captura-documento .tabla-renglones #tabla-conceptos thead { display: none; }
  .captura-documento #tabla-conceptos tr.renglon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding: 10px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio) var(--radio) 0 0; margin-top: 12px; }
  .captura-documento #tabla-conceptos tr.renglon:first-child { margin-top: 0; }
  .captura-documento #tabla-conceptos tr.renglon:not(:has(+ tr.detalle)) { border-radius: var(--radio); }
  .captura-documento .tabla-renglones #tabla-conceptos td { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
  .captura-documento #tabla-conceptos td[data-ancho="2"] { grid-column: span 2; }
  .captura-documento #tabla-conceptos td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 3px; font-size: var(--fs-chica); color: var(--tinta-suave); }
  .captura-documento #tabla-conceptos td.n { grid-column: span 2; padding: 0; text-align: left; font-weight: bold; color: var(--tinta-suave); }
  .captura-documento #tabla-conceptos tr.renglon td.n::before { content: "Renglón " counter(renglon); }
  .captura-documento #tabla-conceptos td.total-renglon { text-align: right; padding: 0; }
  .captura-documento #tabla-conceptos td.total-renglon .c-total { display: block; font-size: var(--fs-seccion); }
  .captura-documento #tabla-conceptos td.acciones-renglon { grid-column: span 2; display: flex; justify-content: flex-end; }
  .captura-documento #tabla-conceptos td.acciones-renglon .quitar { min-width: 44px; min-height: 40px; }
  .captura-documento #tabla-conceptos td:empty { display: none; }
  .captura-documento #tabla-conceptos tr.detalle { display: block; background: var(--superficie-2); border: 1px solid var(--borde); border-top: 0; border-radius: 0 0 var(--radio) var(--radio); }
  .captura-documento #tabla-conceptos tr.detalle td { display: block; padding: 8px 10px; }
  .captura-documento.es-soporte .celda-descuento { display: none !important; }
}
@media (max-width: 600px) {
  .captura-documento .tabla-renglones #tabla-conceptos td { grid-column: auto; }
  .captura-documento .tabla-renglones #tabla-conceptos td[data-ancho="2"], .captura-documento .tabla-renglones #tabla-conceptos td.n,
  .captura-documento .tabla-renglones #tabla-conceptos td.acciones-renglon { grid-column: span 2; }
}
@media (max-width: 760px) {
  .captura-documento .encabezado { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .captura-documento .encabezado > .fila-campo { grid-column: auto !important; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .captura-documento .fila-campo > label:empty { display: none; }
  .captura-documento > .pie-documento { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 18px; }
  .pie-documento .pie-derecha { order: -1; }
  .pie-documento .forma-campos { grid-template-columns: minmax(0, 1fr); }
  .pie-documento .fila-campo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .captura-documento .mas-datos-cuerpo { max-width: none; }
  .captura-documento #tabla-conceptos tr.detalle .sub label { width: 100%; justify-content: space-between; }
  .captura-documento #tabla-conceptos tr.detalle .sub input, .captura-documento #tabla-conceptos tr.detalle .sub select { flex: 1; }
}

/* «Ver»: las filas de datos de 1 y 4 columnas (NAV02e: proveedor o cliente a todo lo ancho que deja la fecha). */
.captura-documento .rejilla.seis > .span1 { grid-column: span 1 !important; }
.captura-documento .rejilla.seis > .span4 { grid-column: span 4 !important; }
@media (max-width: 1023px) {
  .captura-documento .rejilla.seis > .span1 { grid-column: span 1 !important; }
  .captura-documento .rejilla.seis > .span4 { grid-column: span 2 !important; }
}

/* ============================================================================ UI04c — formulario de venta
   La misma tabla de renglones que la de compra, sin la columna de descuento (en ventas llega con UI04g) y con el número que sigue arriba. */
.captura-documento.es-venta #tabla-conceptos .col-n { width: 3%; }
/* UI06: el renglón de producto suma el ícono de bodega junto a duplicar y quitar: la columna de acciones pasa de 5 % a 10 %. */
.captura-documento.es-venta #tabla-conceptos .col-elemento { width: 22%; }
.captura-documento.es-venta #tabla-conceptos .col-descripcion { width: 9%; }
.captura-documento.es-venta #tabla-conceptos .col-cantidad { width: 6%; }
.captura-documento.es-venta #tabla-conceptos .col-unitario { width: 12%; }
.captura-documento.es-venta #tabla-conceptos .col-iva { width: 13%; }
.captura-documento.es-venta #tabla-conceptos .col-retencion { width: 13%; }
.captura-documento.es-venta #tabla-conceptos .col-total { width: 11%; }
.captura-documento.es-venta #tabla-conceptos .col-acciones { width: 11%; }
.captura-documento .fila-campo .sub-rotulo { display: block; margin: 8px 0 3px; font-size: var(--fs-chica); font-weight: normal; color: var(--tinta-suave); }
.doc-avisos { flex: 1 0 100%; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-chica); color: var(--alerta); order: 4; }
.captura-documento #tabla-conceptos .c-cantidad { margin-top: 0; }     /* la regla heredada de la tabla vieja bajaba la cantidad respecto de sus vecinos */

/* Una sola fila por renglón: entre 901 y 1300 px los campos se compactan (letra, relleno y flechas) para que todo quepa sin apilarse. */
@media (min-width: 901px) and (max-width: 1300px) {
  .captura-documento #tabla-conceptos input:not([type="hidden"]), .captura-documento #tabla-conceptos select { font-size: var(--fs-chica); padding: 0 5px; }
  .captura-documento .tabla-renglones #tabla-conceptos th { font-size: var(--fs-chica); padding: 8px 4px; }
  .captura-documento .tabla-renglones #tabla-conceptos td { padding: 6px 3px; }
  .captura-documento #tabla-conceptos .combo-entrada { padding-right: 20px; }
  .captura-documento #tabla-conceptos td.total-renglon { font-size: var(--fs-chica); }
}

/* El detalle del renglón de inventario (bodega, lote y vencimiento) va plegado: el ícono «⋯» de la fila lo despliega. */
.captura-documento #tabla-conceptos tr.detalle[hidden] { display: none !important; }
.captura-documento #tabla-conceptos .c-detalle { padding: 2px 5px; font-size: var(--fs-seccion); line-height: 1.1; font-weight: bold; }
.captura-documento #tabla-conceptos .c-detalle[hidden] { display: none; }
.captura-documento #tabla-conceptos .c-detalle.pendiente { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-clara); }
.captura-documento #tabla-conceptos .c-detalle[aria-expanded="true"] { background: var(--marca-clara); border-color: var(--marca-borde); }

/* El cliente o el proveedor ocupa su línea y, si no caben, «+ Nuevo» y «Consumidor Final» pasan debajo (a 1100 px el selector quedaba diminuto). */
.captura-documento .fila-campo .campo-con-nuevo { flex-wrap: wrap; }
.captura-documento .fila-campo .campo-con-nuevo > .combo, .captura-documento .fila-campo .campo-con-nuevo > select { flex: 1 1 220px; }
/* La forma de pago pasa de dos columnas a una cuando el pie no da para dos campos con su rótulo. */
.pie-documento .forma-campos { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* ===================================================== UI05b — listas como panel (Compras)
   Pestañas de tarea, título con el botón principal «Nueva … ▾», barra de filtros con chips, tabla de una línea por documento y panel
   lateral «Más Filtros». Va acotado a .con-panel, .pestanas-tarea, .cabeza-lista, .menu-nuevo y .lista-panel. */
body.con-panel .banda-pantalla, body.con-panel .subnav { display: none !important; }
.pestanas-tarea { display: flex; gap: 4px; margin: 0 0 4px; padding: 0 4px; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: thin; }
.pestanas-tarea button { padding: 13px 16px 11px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 600;
  color: var(--tinta-suave); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; width: auto; }
.pestanas-tarea button:hover { color: var(--tinta); }
.pestanas-tarea button.activa { color: var(--marca); border-bottom-color: var(--marca); }
.pestanas-tarea button:focus-visible { outline: 2px solid color-mix(in srgb, var(--acento) 70%, #0d2742); outline-offset: -2px; border-radius: 6px; }
.contador { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--marca); color: #fff;
  font-size: var(--fs-chica); font-weight: 700; line-height: 1; }
.contador[hidden] { display: none; }
.cabeza-lista { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 20px 4px 16px; }
.cabeza-lista .titulo-lista { margin: 0; font-size: var(--fs-pantalla); font-weight: 700; letter-spacing: -.01em; color: var(--tinta); }
.acciones-cabeza { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acciones-cabeza .desplegable > .accion { white-space: nowrap; }
.menu-nuevo { min-width: 300px; padding: 6px; }
.menu-nuevo button { flex-direction: column; align-items: flex-start; gap: 2px; font-weight: 600; }
.menu-nuevo button span { font-weight: 400; font-size: var(--fs-chica); color: var(--tinta-tenue); }
.menu-nuevo hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 0; }

.lista-panel { padding: 0; overflow: visible; }
.lista-panel .barra-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 18px 10px; }
.lista-panel .barra-panel .campo { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-chica); color: var(--tinta-suave); font-weight: 600; min-width: 0; }
.lista-panel .barra-panel .campo select { min-width: 210px; }
.lista-panel .barra-panel .campo-buscar input { min-width: 250px; }
.lista-panel .barra-panel .espacio { flex: 1; }
.lista-panel .boton-filtros { display: inline-flex; align-items: center; gap: 8px; }
.columnas-panel { position: relative; }
.columnas-panel > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid var(--borde-fuerte);
  border-radius: 10px; background: var(--superficie); font-weight: 600; color: var(--tinta); }
.columnas-panel > summary::-webkit-details-marker { display: none; }
.columnas-panel > summary::after { content: " ▾"; }
.columnas-panel .menu-columnas { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 6px; min-width: 170px;
  padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); }
.columnas-panel .casilla { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--tinta); }
.chips-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px; }
.chips-filtros:not(:empty) { padding-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 6px 2px 12px; border: 1px solid var(--borde-fuerte); border-radius: 14px;
  font-size: var(--fs-chica); background: var(--superficie-2); }
.chip button { border: 0; background: var(--superficie-3); border-radius: 50%; width: 20px; height: 20px; padding: 0; cursor: pointer; color: var(--tinta-suave); line-height: 20px; }
.chip button:hover { background: var(--error-claro); color: var(--error); }
.limpiar { border: 0; background: none; color: var(--marca); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.limpiar:hover { text-decoration: underline; }
.lista-panel .envoltura-tabla { overflow-x: auto; border-top: 1px solid var(--borde); scrollbar-width: thin; }
.lista-panel table.tabla-panel { width: 100%; border-collapse: collapse; font-size: var(--fs-chica); }
.lista-panel .tabla-panel th { background: var(--superficie-2); text-align: left; font-weight: 600; color: var(--tinta-suave); padding: 10px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--borde); font-size: var(--fs-chica); }
.lista-panel .tabla-panel td { padding: 5px 8px; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--borde); height: 52px; }
.lista-panel .tabla-panel tbody tr:hover td { background: #f9fbfc; }
.lista-panel .tabla-panel th.cifra, .lista-panel .tabla-panel td.cifra { text-align: right; }
.lista-panel .tabla-panel .col-valor { font-variant-numeric: tabular-nums; }
/* NC-RET-b (inicio) */
.lista-panel .tabla-panel .col-facturado, .lista-panel .tabla-panel .col-retenciones { font-variant-numeric: tabular-nums; }
/* NC-RET-b (fin) */
.lista-panel .tabla-panel .negativo-valor { color: var(--error); }
.lista-panel .tabla-panel td.col-proveedor { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.lista-panel .tabla-panel .col-proveedor .enlace { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-align: left; white-space: nowrap; font-weight: 600; }
.lista-panel .tabla-panel .enlace { font-weight: 600; }
.lista-panel .tabla-panel .celda-estado .chips-fila { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; }
.lista-panel .tabla-panel .celda-estado .marca-estado { padding-top: 1px; padding-bottom: 1px; font-size: var(--fs-chica); }
.lista-panel .tabla-panel td.acciones-factura { white-space: nowrap; text-align: right; }
.lista-panel .tabla-panel td.acciones-factura > button, .lista-panel .tabla-panel td.acciones-factura > details { display: inline-block; margin: 0 0 0 4px; vertical-align: middle; width: auto; }
.lista-panel .mas-acciones > summary { list-style: none; cursor: pointer; display: inline-flex; }
.lista-panel .mas-acciones > summary::-webkit-details-marker { display: none; }
.lista-panel .mas-acciones > summary::after { content: " ▾"; }
.lista-panel .mas-acciones[open] > summary::after { content: " ▴"; }
.lista-panel .menu-acciones { position: fixed; z-index: 40; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 200px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); white-space: normal; text-align: left; }
.lista-panel .menu-acciones > button { text-align: left; justify-content: flex-start; width: 100%; }
.lista-panel .pie-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.lista-panel .pie-lista .total-lista { margin-left: auto; font-weight: 600; color: var(--tinta); }
.lista-panel.sin-col-nit .col-nit, .lista-panel.sin-col-vence .col-vence, .lista-panel.sin-col-dian .col-dian, .lista-panel.sin-col-moneda .col-moneda { display: none; }

.velo-filtros { position: fixed; inset: 0; background: rgba(13, 39, 66, .22); z-index: 60; }
.velo-filtros[hidden], .panel-filtros[hidden] { display: none; }
.panel-filtros { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100%; z-index: 61; display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
  padding: 20px; background: var(--superficie); border-left: 1px solid var(--borde); box-shadow: -12px 0 32px rgba(16, 24, 40, .14); }
.panel-filtros header { display: flex; align-items: center; justify-content: space-between; }
.panel-filtros header h3 { margin: 0; font-size: var(--fs-dialogo); }
.panel-filtros .cerrar { border: 0; background: none; font-size: var(--fs-pantalla); line-height: 1; cursor: pointer; color: var(--tinta-suave); }
.panel-filtros .campo { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-chica); color: var(--tinta-suave); font-weight: 600; }
.panel-filtros .campo select, .panel-filtros .campo input { width: 100%; min-width: 0; }
.panel-filtros .dos-campos { display: flex; gap: 8px; }
.panel-filtros .dos-campos .campo { flex: 1; min-width: 0; }
.panel-filtros .rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-filtros .rapidos button { height: 30px; border: 1px solid var(--borde-fuerte); background: var(--superficie); border-radius: 15px; padding: 0 11px; font: inherit;
  font-size: var(--fs-chica); font-weight: 500; cursor: pointer; }
.panel-filtros .rapidos button.sel { background: var(--marca-clara); border-color: var(--marca-borde); color: var(--marca); }
.panel-filtros .pie { margin-top: auto; display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 760px) {
  .pestanas-tarea { margin: 0 -4px 4px; }
  .cabeza-lista { padding: 16px 4px 12px; }
  .cabeza-lista .titulo-lista { font-size: var(--fs-dialogo); width: 100%; }
  .acciones-cabeza { margin-left: 0; width: 100%; }
  .acciones-cabeza .desplegable { flex: 1 1 auto; position: relative; }
  .acciones-cabeza .desplegable:last-child { flex: 1 1 100%; order: -1; }
  .acciones-cabeza .desplegable > .accion { width: 100%; justify-content: center; }
  .acciones-cabeza .menu-nuevo { left: 0; right: 0; min-width: 0; }
  .lista-panel .barra-panel { padding: 12px; }
  .lista-panel .barra-panel .campo, .lista-panel .barra-panel .campo select, .lista-panel .barra-panel .campo-buscar input { width: 100%; min-width: 0; }
  .lista-panel .barra-panel .campo { flex: 1 1 100%; }
  .lista-panel .barra-panel .espacio { display: none; }
  .lista-panel .barra-panel > .accion, .lista-panel .barra-panel > .columnas-panel { flex: 1 1 auto; }
  .lista-panel .barra-panel .columnas-panel > summary { justify-content: center; width: 100%; }
  .chips-filtros { padding: 0 12px; }
  .panel-filtros { width: 100%; border-left: 0; }
  .lista-panel .envoltura-tabla { overflow: visible; }
  .lista-panel .tabla-panel, .lista-panel .tabla-panel tbody { display: block; width: 100%; }
  .lista-panel .tabla-panel thead { display: none; }
  .lista-panel .tabla-panel tr { display: block; padding: 12px; border-bottom: 1px solid var(--borde); }
  .lista-panel .tabla-panel td { display: flex; justify-content: space-between; gap: 10px; height: auto; padding: 3px 0; border: 0; white-space: normal; text-align: right; }
  .lista-panel .tabla-panel td[data-etiqueta]::before { content: attr(data-etiqueta); color: var(--tinta-tenue); font-size: var(--fs-chica); text-align: left; flex: 0 0 auto; }
  .lista-panel .tabla-panel td.col-proveedor, .lista-panel .tabla-panel .col-proveedor .enlace { max-width: none; white-space: normal; }
  .lista-panel .tabla-panel td.celda-estado { flex-wrap: wrap; }
  .lista-panel .tabla-panel td.celda-estado .chips-fila { flex-wrap: wrap; justify-content: flex-end; }
  .lista-panel .tabla-panel td.acciones-factura { justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; text-align: left; }
  .lista-panel .tabla-panel td.acciones-factura > button, .lista-panel .tabla-panel td.acciones-factura > details { flex: 1 1 auto; margin: 0; }
  .lista-panel .mas-acciones > summary { justify-content: center; width: 100%; }
  .lista-panel .pie-lista .total-lista { margin-left: 0; }
}

/* ===================================================== UI05d, UI06 y UI05e
   La lista de Ventas como panel (comparte lo de Compras), la franja de crédito y el vencimiento del formulario de venta, y la Parametrización de Facturación. */
.lista-panel.sin-col-comprobante .col-comprobante, .lista-panel.sin-col-forma .col-forma { display: none; }
.lista-panel .tabla-panel td.col-cliente { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.lista-panel .tabla-panel .col-cliente .enlace { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-align: left; white-space: nowrap; font-weight: 600; }
.lista-panel .tabla-panel .chip-vence { margin-left: 6px; padding-top: 1px; padding-bottom: 1px; font-size: var(--fs-chica); }
.lista-panel .tabla-panel .ir-seguimiento-dian { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.lista-panel .tabla-panel .ir-seguimiento-dian:focus-visible { outline: 2px solid color-mix(in srgb, var(--acento) 70%, #0d2742); outline-offset: 2px; border-radius: 6px; }
.lista-panel .tabla-panel .ir-seguimiento-dian .marca-estado { margin: 0; }

/* Con tantas columnas la tabla de Ventas se desplaza de lado: las acciones se quedan a la vista a la derecha. */
#lista-ventas .tabla-panel th.col-acciones { position: sticky; right: 0; background: var(--superficie-2); }
#lista-ventas .tabla-panel td.acciones-factura { position: sticky; right: 0; background: var(--superficie); box-shadow: -10px 0 8px -8px rgba(16, 24, 40, .14); z-index: 1; }
#lista-ventas .tabla-panel tbody tr:hover td.acciones-factura { background: #f9fbfc; }
#lista-ventas .tabla-panel td.acciones-factura:has(details[open]) { z-index: 6; }

/* UI-A (inicio) */
/* FUN-1: en un contenedor de menos de ~1700 px (clase puesta por app.js) la tabla se compacta: Tipo de Transacción envuelto, vencimiento y estado en dos
   líneas y cliente más angosto, de modo que Número, Fecha, Cliente, Estado y Valor caben a 1440 px sin desplazarse de lado. */
@media (min-width: 761px) {
  .lista-panel.lista-estrecha .tabla-panel th, .lista-panel.lista-estrecha .tabla-panel td { padding-left: 6px; padding-right: 6px; }
  .lista-panel.lista-estrecha .tabla-panel th.col-tipo { white-space: normal; max-width: 96px; line-height: 1.2; }
  .lista-panel.lista-estrecha .tabla-panel td.col-tipo { white-space: normal; max-width: 96px; line-height: 1.25; }
  .lista-panel.lista-estrecha .tabla-panel td.col-vence { white-space: normal; line-height: 1.45; }
  .lista-panel.lista-estrecha .tabla-panel td.col-vence .chip-vence { display: flex; width: fit-content; margin: 2px 0 0; }
  .lista-panel.lista-estrecha .tabla-panel td.celda-estado .chips-fila { flex-wrap: wrap; row-gap: 3px; max-width: 150px; }
  .lista-panel.lista-estrecha .tabla-panel td.col-cliente, .lista-panel.lista-estrecha .tabla-panel td.col-proveedor { max-width: 150px; }
  .lista-panel.lista-estrecha .tabla-panel td { height: 60px; }
}
/* FUN-9: dentro de un módulo, con la barra lateral fija y menos de 1600 px, el buscador de arriba quedaba reducido a «Buscar pa»: el conmutador de módulos y
   los espacios se compactan para devolverle ancho. */
@media (min-width: 1001px) and (max-width: 1599px) {
  #aplicacion.menu-fijo .barra-superior { gap: 8px; padding: 0 20px; }
  #aplicacion.menu-fijo .conmutador-area { gap: 2px; padding: 3px; }
  #aplicacion.menu-fijo .conmutador-area button { padding: 6px 8px; gap: 5px; }
  #aplicacion.menu-fijo .barra-superior .acciones-superiores { gap: 8px; }
  #aplicacion.menu-fijo .barra-superior .buscador-global { flex: 1 1 230px; min-width: 210px; }
}
/* FUN-4: las acciones de cada empresa de la consola de Plataforma van en un menú «⋯» pegado a la derecha (la tabla ya no se sale del ancho). */
.mas-acciones-plat { position: relative; display: inline-block; }
.mas-acciones-plat > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 2px 12px; font-size: 18px; line-height: 1.2; }
.mas-acciones-plat > summary::-webkit-details-marker { display: none; }
.menu-acciones-plat { position: fixed; z-index: 70; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 190px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); white-space: normal; text-align: left; }
.menu-acciones-plat > button { width: 100%; margin: 0; text-align: left; justify-content: flex-start; }
#tabla-plataforma td.acciones { text-align: right; white-space: nowrap; width: 1%; }
#tabla-plataforma th, #tabla-plataforma td { padding: 8px 5px; font-size: var(--fs-chica); }
#tabla-plataforma td.fecha { white-space: normal; min-width: 84px; }
/* FUN-3: la nota de «Pagar» desde una nómina (cuál nómina es y que incluye saldos anteriores) se ve siempre. */
.nota-pago-nomina { margin: 0 0 10px; color: var(--tinta); font-size: var(--fs-base); }
/* FUN-10: el nombre de un informe largo («Pedidos Pendientes por Despachar», «Conciliación Administrativa contra Contabilidad») se envuelve en
   dos líneas en vez de cortarse con puntos suspensivos. */
.lista-informes .item-informe { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; min-width: 0; }
/* UI-A (fin) */

/* La franja de crédito bajo el cliente: «Cupo · Debe · Disponible» con el color del estado. Solo informa. */
.franja-credito { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; padding: 6px 12px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie-2); color: var(--tinta); font-size: var(--fs-chica); }
.franja-credito[hidden] { display: none; }
.franja-credito .estado-credito { margin-left: auto; padding: 1px 10px; border-radius: 12px; font-size: var(--fs-chica); background: rgba(255, 255, 255, .75); }
.franja-credito.ok { background: var(--exito-claro); border-color: #bfe5cd; color: var(--exito-texto); }
.franja-credito.alerta { background: var(--alerta-clara); border-color: #f1d9a5; color: var(--alerta); }
.franja-credito.excede, .franja-credito.mora { background: var(--error-claro); border-color: #f2c4bd; color: var(--error); }
.franja-credito .vencido { font-weight: 700; }
/* El vencimiento con el plazo del cliente debajo; sin plazo, vacío y obligatorio. */
.campo-vence { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nota-plazo { font-size: var(--fs-chica); color: var(--tinta-suave); }
.nota-plazo:empty { display: none; }
.nota-plazo.sin-plazo { color: var(--error); font-weight: 600; }
.fila-campo.requerida > label::after { content: " *"; color: var(--error); }
.pildora.ambar { background: var(--alerta-clara); color: var(--alerta); }

/* Parametrización de Facturación: las secciones como pastillas y tarjetas de lectura con edición explícita. */
.sub-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.sub-pestanas button { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 18px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta-suave); font: inherit; font-weight: 600; font-size: var(--fs-chica); cursor: pointer; white-space: nowrap; width: auto; }
.sub-pestanas button:hover { color: var(--tinta); border-color: var(--borde-fuerte); }
.sub-pestanas button.activa { background: var(--marca); border-color: var(--marca); color: #fff; }
.sub-pestanas button:focus-visible { outline: 2px solid color-mix(in srgb, var(--acento) 70%, #0d2742); outline-offset: 2px; }
.barra-seccion { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.barra-seccion .espacio { flex: 1; }
.barra-seccion .campo { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-chica); color: var(--tinta-suave); font-weight: 600; }
.barra-seccion .campo-buscar input { min-width: 260px; }
.rejilla-param { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tarjeta-param { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); overflow: hidden; margin-bottom: 16px; }
.rejilla-param .tarjeta-param { margin-bottom: 0; }
/* A-128: el Perfil pone las responsabilidades del RUT y la facturación electrónica lado a lado (una pared de 1.800 px no se lee) */
.perfil-rut-y-factura { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.tarjeta-param h3 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--borde); font-size: var(--fs-dialogo); display: flex; align-items: center; gap: 8px; }
.tarjeta-param h3 .sub { color: var(--tinta-suave); font-weight: 500; font-size: var(--fs-chica); }
.tarjeta-param dl { display: grid; grid-template-columns: minmax(180px, 42%) 1fr; margin: 0; padding: 6px 18px 14px; }
.tarjeta-param dt { padding: 10px 0; color: var(--tinta-suave); font-weight: 600; border-bottom: 1px solid var(--superficie-3); }
.tarjeta-param dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--superficie-3); min-width: 0; }
.tarjeta-param dd select { width: 100%; }
.tarjeta-param .enlace-pantalla { display: flex; padding: 12px 18px; border-top: 1px solid var(--borde); }
.tarjeta-param .vacio { margin: 12px 18px; }
.cambiado, .tarjeta-param dd.cambiado select { border-color: #e0a100 !important; background: #fffbea; }
.envoltura-param { overflow-x: auto; }
.tabla-param { width: 100%; border-collapse: collapse; font-size: var(--fs-chica); }
.tabla-param th { text-align: left; font-weight: 600; color: var(--tinta-suave); padding: 10px 12px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla-param td { padding: 8px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-param td.cifra, .tabla-param th.cifra { text-align: right; }
.tabla-param td.col-codigo { white-space: nowrap; font-weight: 600; }
.tabla-param select, .tabla-param input { min-width: 120px; max-width: 100%; }
.tabla-param td input[type=number] { width: 130px; text-align: right; }
.tabla-param .historial-gasto { margin-top: 4px; font-size: var(--fs-chica); }
.tabla-param .historial-gasto summary { cursor: pointer; color: var(--marca); }
.tabla-param .historial-gasto table { margin-top: 6px; }
.barra-edicion-param { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 18px; margin-top: 16px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); z-index: 5; }
.barra-edicion-param .n { color: var(--alerta); font-weight: 700; }
.barra-edicion-param .espacio { flex: 1; }
@media (max-width: 760px) {
  #lista-ventas .tabla-panel td.acciones-factura { position: static; box-shadow: none; z-index: auto; }
  .lista-panel .tabla-panel td.col-cliente, .lista-panel .tabla-panel .col-cliente .enlace { max-width: none; white-space: normal; }
  .franja-credito .estado-credito { margin-left: 0; }
  .sub-pestanas { flex-wrap: nowrap; overflow-x: auto; }
  .sub-pestanas button { flex: 0 0 auto; }
  .rejilla-param { grid-template-columns: 1fr; }
  .tarjeta-param dl { grid-template-columns: 1fr; }
  .tarjeta-param dt { border-bottom: 0; padding-bottom: 2px; }
  .barra-seccion .campo-buscar, .barra-seccion .campo-buscar input { width: 100%; min-width: 0; }
  .barra-seccion > .accion { flex: 1 1 auto; }
  .barra-edicion-param { flex-wrap: wrap; }
  .barra-edicion-param .accion { flex: 1 1 auto; }
}

/* ===================================================== FE01: Configuración Electrónica y Paso a Paso de la primera factura electrónica */
.tarjeta-param h3 .der { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.fe-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.fe-barra .espacio { flex: 1; }
.fe-ayuda { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-height: 0; border-radius: 50%; border: 1px solid var(--borde-control);
  background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); font-weight: 700; padding: 0; cursor: help; flex: none; }
.fe-ayuda:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.fe-oculto { letter-spacing: 2px; color: var(--tinta-suave); }
.fe-lista-faltas { margin: 0; padding: 12px 18px 14px 36px; }
.fe-lista-faltas li { margin: 4px 0; }
.fe-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; padding: 14px 18px 16px; }
.fe-datos > div { min-width: 0; overflow-wrap: anywhere; }
.fe-datos .rotulo { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); margin-bottom: 2px; }
.fe-datos .valor { font-weight: 600; }
.fe-datos .campo { margin: 0; }
.fe-datos .ancho { grid-column: 1 / -1; }
.fe-tabla-resoluciones .marca-estado { white-space: normal; max-width: 100%; }
.fe-tabla-resoluciones td:last-child { min-width: 150px; }
.fe-historial { margin: 0 0 16px; }
.fe-historial > summary { cursor: pointer; color: var(--marca); font-weight: 600; padding: 4px 0; }
.pap-resumen { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 12px 18px; margin-bottom: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; }
.pap-resumen .dato b { display: block; font-size: 20px; line-height: 1.2; }
.pap-barra { flex: 1; min-width: 160px; height: 10px; background: var(--superficie-3); border-radius: 6px; overflow: hidden; }
.pap-barra i { display: block; height: 100%; background: var(--exito); }
.pap-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pap-pasos { list-style: none; margin: 0; padding: 0; }
.pap-paso { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--borde); align-items: start; }
.pap-paso:first-child { border-top: 0; }
.pap-paso .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--superficie-3); color: var(--tinta-suave); }
.pap-paso.HECHO .num { background: var(--exito); color: #fff; }
.pap-paso.PENDIENTE { background: var(--marca-clara, var(--superficie-2)); }
.pap-paso.PENDIENTE .num { background: var(--marca); color: #fff; }
.pap-paso.BLOQUEADO, .pap-paso.NO_APLICA, .pap-paso.OMITIDO { color: var(--tinta-suave); }   /* IMP01c: la Puesta en Marcha reusa las filas del Paso a Paso */
.pap-paso .titulo { font-weight: 700; }
.pap-paso .donde { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; border: 1px solid var(--borde); font-size: var(--fs-chica); white-space: nowrap; }
.pap-paso .donde.fuera { background: var(--alerta-clara); color: var(--alerta); border-color: transparent; }
.pap-paso .donde.dentro { background: var(--marca-clara, var(--superficie-2)); color: var(--marca); border-color: transparent; }
.pap-paso .que { margin: 4px 0 0; }
.pap-paso .acciones-paso { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.pap-paso button.accion:disabled, .pap-paso button.accion.suave:disabled { background: var(--superficie-3); border-color: var(--borde); color: var(--tinta-tenue); cursor: not-allowed; }
.pap-paso .motivo { margin-top: 6px; color: var(--error); font-size: var(--fs-chica); }
.pap-lateral .tarjeta-param { padding-bottom: 12px; }
.pap-lateral ol, .pap-lateral ul { margin: 0; padding: 12px 18px 4px 36px; }
.pap-lateral li { margin: 6px 0; }
.pap-lateral .barra-acciones, .pap-lateral .acciones-paso { padding: 4px 18px 0; }
.pap-sin-permiso { margin: 0 0 12px; }
a.enlace-paso { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alto-control-chico); padding: 0 12px; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control); background: var(--superficie); color: var(--tinta); font-weight: bold; font-size: var(--fs-chica); text-decoration: none; }
a.enlace-paso:hover { border-color: var(--marca); color: var(--marca-oscura); background: var(--marca-clara); }
a.enlace-paso:focus-visible { outline: none; box-shadow: var(--foco); }
@media (max-width: 760px) {
  .fe-datos { grid-template-columns: 1fr 1fr; }
  .pap-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pap-paso { grid-template-columns: 28px minmax(0, 1fr); padding: 12px; }
  .pap-paso > .estado-paso { grid-column: 2; justify-self: start; }
  .pap-paso .donde { white-space: normal; }
  .pap-paso .acciones-paso .accion { flex: 1 1 auto; }
  .pap-resumen { gap: 12px; }
  .pap-resumen .dato b { font-size: 16px; }
  .pap-barra { flex-basis: 100%; }
  .fe-tabla-resoluciones thead { display: none; }
  .fe-tabla-resoluciones tr { display: block; border-top: 1px solid var(--borde); padding: 8px 0; }
  .fe-tabla-resoluciones td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 12px; text-align: right; }
  .fe-tabla-resoluciones td::before { content: attr(data-r); color: var(--tinta-suave); text-align: left; }
}

/* ===================================================== Comprobante a pantalla completa, con sus acciones arriba
   Imprimir, Editar y Ver Contabilización (y el resto) van en una barra fija en la parte superior del documento; el pie solo trae «Cerrar». */
.barra-superior-documento { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 0; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.barra-superior-documento > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra-superior-documento:empty { display: none; }
/* DOCV-c y DOCV-f (inicio): el sello de pago de la factura (verde PAGADO, ámbar PAGADO PARCIALMENTE) arriba a la izquierda del «Ver», y el sello del anticipo en su comprobante.
   Una pieza chica con borde, sin tarjetas nuevas; en el celular ocupa el ancho. */
.sello-pago, .sello-anticipo { display: flex; flex-direction: column; gap: 2px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 8px 14px;
  border: 2px solid var(--exito); border-radius: var(--radio-chico); background: var(--exito-claro); color: var(--exito-texto); font-weight: 700; }
.sello-pago.pagado, .sello-pago.anticipo { border-color: var(--exito); background: var(--exito-claro); color: var(--exito-texto); }
.sello-pago .sello-linea, .sello-anticipo .sello-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.sello-pago strong, .sello-anticipo strong { font-size: var(--fs-seccion); letter-spacing: .04em; }
.sello-pago .sello-linea > strong + span::before, .sello-anticipo .sello-linea > strong + span::before { content: "· "; }
.sello-pago .sello-linea > span, .sello-anticipo .sello-linea > span { font-size: var(--fs-base); font-weight: 600; overflow-wrap: anywhere; }
.sello-pago .sello-aparte > span, .sello-anticipo .sello-aparte > span { font-size: var(--fs-chica); font-weight: 600; }
.sello-pago.parcial, .sello-anticipo.saldo { border-color: var(--alerta); background: var(--alerta-clara); color: var(--alerta); }
.sello-pago .ayuda-signo { color: inherit; border-color: currentColor; background: transparent; margin-left: 0; }
.nota-edicion { margin: 0 0 8px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.marca-estado.anticipo-sello { white-space: normal; border-radius: var(--radio-chico); line-height: 1.3; }
@media (max-width: 760px) {
  .sello-pago, .sello-anticipo { width: 100%; }
}
/* DOCV-c y DOCV-f (fin) */
#asiento-comprobante.resaltado { outline: 3px solid var(--marca-borde); outline-offset: 2px; transition: outline-color .3s; }
#cuadre-comprobante { margin-top: 12px; }
@media (max-width: 760px) {
  .barra-superior-documento, .barra-superior-documento > div { width: 100%; }
  .barra-superior-documento > div > button, .barra-superior-documento > div > .desplegable { flex: 1 1 auto; }
}

/* ====================================================================== DS01 (a-d) — sistema de diseño
   Letra Inter y escala de 7 tamaños en :root (--fs-*), botones con jerarquía (primario, secundario, terciario, peligro) y alturas fijas
   (40/32 px en escritorio; 44/40 en celular), campos de 40 px con borde de 3:1, formulario de factura de una sola fila por renglón (UI05g)
   y menú lateral desplegado en el Inicio (A-053). Todo va sobre las clases existentes; no se renombra nada. */

/* DS01b: en las listas y en los renglones todo botón se ve como secundario chico (el único primario de una lista es «Nueva …», fuera de la fila).
   .accion.accion.accion sube la especificidad por encima de la regla del primario (que lleva cuatro :not). */
td.acciones button.accion, td.acciones-renglon button.accion { min-height: var(--alto-control-chico); padding: 0 12px; font-size: var(--fs-chica); }
td.acciones-renglon button.accion { padding: 0 9px; }
td.acciones button.accion.accion.accion:not(.peligro):not(:disabled),
td.acciones-renglon button.accion.accion.accion:not(.peligro):not(:disabled) {
  background: var(--superficie); background-image: none; color: var(--tinta); border-color: var(--borde-control); box-shadow: var(--sombra); filter: none; }
td.acciones button.accion.accion.accion:not(.peligro):not(:disabled):hover,
td.acciones-renglon button.accion.accion.accion:not(.peligro):not(:disabled):hover { background: var(--marca-clara); border-color: var(--marca); color: var(--marca-oscura); }
button.enlace { color: var(--marca); font-weight: var(--peso-fuerte); }
button.enlace:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }

/* DS01b: pie de los diálogos, a la derecha, 12 px entre botones y ancho mínimo de 120 px. */
.dialogo > footer { gap: 12px; }
.dialogo > footer > button.accion { min-width: 120px; }

/* DS01b: el foco se ve en todas las variantes. */
button.accion.suave:focus-visible, button.accion.peligro:focus-visible, button.accion.texto:focus-visible { box-shadow: var(--foco); outline: none; }

/* DS01c: tarjetas con la etiqueta en negrita. */
.tarjeta .etiqueta, .kpi .titulo, .kpi-inicio .etiqueta { font-weight: var(--peso-fuerte); }

/* DS01d / UI05g: el renglón de la factura (compra y venta) en UNA sola fila de 52 px o menos, a 1024 px y más.
   Campos de 38 px + 6 px de relleno arriba y abajo + 1 px de borde = 51 px. La «línea de cuenta» (código y nombre de la cuenta contable,
   y «Por Revisar») pasa a un globo sobre el concepto: aparece al pasar el cursor o al enfocar el concepto y no ocupa fila.
   Debajo de 1024 px el renglón es una tarjeta y la línea sigue visible debajo del concepto. */
@media (min-width: 1024px) {
  .captura-documento #tabla-conceptos input:not([type="hidden"]), .captura-documento #tabla-conceptos select { height: 38px; min-height: 38px; }
  .captura-documento #tabla-conceptos td.celda-elemento { position: relative; }
  .captura-documento #tabla-conceptos .cuenta-renglon { display: none; position: absolute; z-index: 8; left: 4px; bottom: calc(100% - 3px); width: max-content; max-width: 360px;
    margin: 0; padding: 4px 10px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde-control); border-radius: var(--radio-control);
    box-shadow: var(--sombra-alta); font-size: var(--fs-chica); line-height: 1.3; white-space: normal; pointer-events: none; }
  .captura-documento #tabla-conceptos td.celda-elemento:hover .cuenta-renglon:not(:empty),
  .captura-documento #tabla-conceptos td.celda-elemento:focus-within .cuenta-renglon:not(:empty) { display: block; }
  /* «Por Revisar» no se esconde: el campo del concepto lo marca con una franja de alerta. */
  .captura-documento #tabla-conceptos td.celda-elemento:has(.cuenta-renglon .pastilla) .combo-entrada { box-shadow: inset 4px 0 0 var(--alerta); }
  .captura-documento #tabla-conceptos td.celda-elemento:has(.cuenta-renglon:not(:empty)) { cursor: help; }
}

/* A-053: en el Inicio, desde 1280 px, el menú lateral va desplegado (208 px; mínimo pedido: 200) y el contenido se corre a su derecha, igual que
   dentro de un módulo. Debajo de 1280 px el Inicio conserva el riel de 72 px (no hay ancho para las cuatro tarjetas con el menú abierto). */
@media (min-width: 1280px) {
  body[data-pantalla="inicio"] #aplicacion.visible { grid-template-columns: var(--ancho-menu-inicio) minmax(0, 1fr); }
  body[data-pantalla="inicio"] #aplicacion > aside { width: var(--ancho-menu-inicio); box-shadow: none; }
  body[data-pantalla="inicio"] #aplicacion > aside .logo > div, body[data-pantalla="inicio"] #aplicacion > aside nav button span { opacity: 1; }
  body[data-pantalla="inicio"] #aplicacion > aside .logo > div { display: block; }
  body[data-pantalla="inicio"] #aplicacion > aside .logo-riel { display: none; }
  body[data-pantalla="inicio"] #aplicacion > aside nav .grupo { color: var(--menu-grupo); }
  body[data-pantalla="inicio"] #aplicacion > aside nav .grupo::before { opacity: 0; }
}
:root { --ancho-menu-inicio: 208px; }
/* Con el menú abierto el mapa del Inicio tiene 136 px menos que con el riel: los cortes de HOME02 se corren 144 px (1439→1583, 1279→1423, 1179→1323). */
@media (min-width: 1424px) and (max-width: 1583px) {
  .nodo-contabilidad .nombre-modulo { font-size: clamp(30px, calc(2.64vw - 4px), 38px); }
  .nodo-contabilidad .cuerpo-nucleo { gap: 16px; }
  .nodo-contabilidad .ilustracion-modulo { width: 28%; }
}
@media (min-width: 1280px) and (max-width: 1423px) {
  body[data-pantalla="inicio"] main { padding: 20px 20px 24px; }
  .mapa-modulos { --ancho-conector: 36px; }
  .nodo-modulo { padding: 20px 18px 18px; border-radius: 22px; }
  .nodo-contabilidad { padding: 22px 20px 20px; }
  .entrar-modulo::after { border-radius: 22px; }
  .nombre-modulo { font-size: 24px; gap: 8px; }
  .nodo-contabilidad .nombre-modulo { font-size: 26px; }
  .flecha-modulo { width: 28px; height: 28px; }
  .flecha-modulo svg.icono { width: 16px; height: 16px; }
  .linea-modulo { font-size: 14px; }
  .nodo-contabilidad .cuerpo-nucleo { gap: 14px; }
  .nodo-contabilidad .ilustracion-modulo { width: 30%; }
  .nodo-dataia .entrar-modulo { padding-right: 96px; }
  .nodo-dataia .ilustracion-modulo { width: 84px; right: 16px; }
}

/* DS01b: en el celular los botones miden 44 px (los chicos, 40) y los campos 44 px; los botones del pie reparten el ancho. */
@media (max-width: 700px) {
  button.accion { min-height: var(--alto-control-movil); }
  button.menuda, td.acciones button.accion, td.acciones-renglon button.accion { min-height: 40px; }
  input, select, textarea { min-height: var(--alto-control-movil); }
  .dialogo > footer { gap: 8px; }
  .dialogo > footer > button.accion { flex: 1 1 0; min-width: 0; padding: 0 10px; }
}

/* UI05g: n.º de renglón, total y acciones centrados en la altura del campo (la fila queda a ras: dispersión de los centros ≤ 2 px). */
@media (min-width: 1024px) {
  .captura-documento .tabla-renglones #tabla-conceptos tbody tr.renglon > td.n,
  .captura-documento .tabla-renglones #tabla-conceptos tbody tr.renglon > td.total-renglon,
  .captura-documento .tabla-renglones #tabla-conceptos tbody tr.renglon > td.acciones-renglon { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
}

/* DS01d: con Inter (más ancha) el título del diálogo de factura ya no se parte en dos líneas en escritorio. */
@media (min-width: 1101px) {
  .dialogo.completo:has(.captura-documento) > header h3 { white-space: nowrap; flex: none; }
}

/* UI05g: de 1024 a 1300 px la columna de acciones es de ~100 px: los tres íconos (⋯, duplicar y quitar) se compactan para que quepan sin salirse de la tabla. */
@media (min-width: 1024px) and (max-width: 1300px) {
  .captura-documento #tabla-conceptos td.acciones-renglon button.accion { padding: 0 4px; min-width: 26px; }
}

/* UI04e: Ingreso Vario y Egreso Vario. Reutilizan el encabezado, la tabla de renglones (#tabla-conceptos) y el pie único de los documentos; solo cambian los anchos de sus columnas. */
.captura-documento #tabla-conceptos .col-vario-cuenta { width: 34%; }
.captura-documento #tabla-conceptos .col-vario-detalle { width: 36%; }
.captura-documento #tabla-conceptos .col-vario-centro { width: 16%; }
.captura-documento #tabla-conceptos .col-vario-valor { width: 18%; }
.captura-documento #tabla-conceptos .col-vario-acciones { width: 8%; }
.captura-documento #tabla-conceptos.tabla-vario .col-n { width: 4%; }
.captura-documento #tabla-conceptos.tabla-vario:has(.col-vario-centro) .col-vario-cuenta { width: 28%; }
.captura-documento #tabla-conceptos.tabla-vario:has(.col-vario-centro) .col-vario-detalle { width: 26%; }
.captura-documento #tabla-conceptos.tabla-vario:has(.col-vario-centro) .col-vario-valor { width: 16%; }
.captura-documento #tabla-conceptos.tabla-vario:has(.col-vario-centro) .col-vario-acciones { width: 10%; }
.captura-documento #tabla-conceptos.tabla-vario td.acciones-renglon { text-align: center; }
.captura-vario .pie-documento .nota { font-size: var(--fs-base); color: var(--tinta); }
#panel-varios td.acciones { white-space: nowrap; }

/* ===== HOME02 — el Inicio sin deslizar también en celular y tableta (decisión del dueño, 04/10/2026, noche 3) =====
   Hasta 1000 px el mapa es una rejilla 2×2 que reparte el alto que queda bajo el encabezado; los conectores se ocultan y la ilustración
   se vuelve una marca pequeña. Cada bloque entero es el botón del módulo (sin accesos directos). */
@media (max-width: 1000px) {
  /* El encabezado de la barra lateral (logo y «Menú») ocupa su propia franja: el marco pasa a columna y la zona de contenido toma el resto. */
  body[data-pantalla="inicio"] #aplicacion.visible { display: flex; flex-direction: column; }
  body[data-pantalla="inicio"] #aplicacion > aside { flex: none; }
  body[data-pantalla="inicio"] .columna { flex: 1; height: auto; min-height: 0; }
  body[data-pantalla="inicio"] main { padding: 12px 14px 14px; }
  .hero-inicio { gap: 10px; margin-bottom: 10px; }
  .hero-inicio h1 { font-size: 22px; }
  .hero-inicio p { margin-top: 2px; font-size: 14px; }
  .herramientas-inicio { flex-wrap: nowrap; gap: 8px; }
  .hueco-buscador { flex: 1 1 0; }
  .hueco-buscador .buscador-global { height: 46px; padding: 0 12px; }
  .por-atender { height: 46px; padding: 0 12px; }
  .mapa-modulos { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); gap: 10px; }
  .mapa-modulos .conector { display: none; }
  .mapa-modulos .nodo-modulo { grid-column: auto; grid-row: auto; justify-content: flex-end; min-height: 0; padding: 12px 12px 12px; border-radius: 18px; }
  .mapa-modulos .nodo-modulo:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .mapa-modulos .nodo-modulo .ilustracion-modulo { position: absolute; z-index: -1; top: 10px; right: 10px; width: 56px; height: auto; margin: 0; }
  .nodo-contabilidad .cuerpo-nucleo, .nodo-dataia { display: block; }
  .entrar-modulo, .nodo-dataia .entrar-modulo { max-width: none; padding-right: 0; }
  .nombre-modulo, .nodo-contabilidad .nombre-modulo { font-size: 20px; }
  .linea-modulo { font-size: 14px; line-height: 1.25; }
  .etiqueta-nucleo { margin-bottom: 6px; font-size: var(--fs-chica); }
  .flecha-modulo { display: none; }
  .mapa-modulos .nodo-dataia .ilustracion-modulo { top: 14px; width: 52px; }
}

/* NOM01: Parametrización de Nómina, quincenas y vacaciones anticipadas */
.panel h3 .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.panel h3 .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.pn-fila { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px 18px; align-items: center; margin-bottom: 12px; }
.pn-fila > label { color: var(--tinta-suave); font-size: var(--fs-chica); }
.pn-fila .valor { font-weight: 700; }
.pn-fila > div { min-width: 0; }
.pn-fila .botones-opcion button { min-height: 40px; max-width: 100%; white-space: normal; text-align: center; }
.pn-fila .pn-corto { max-width: 220px; }
.tabla-resumen-anticipo td.cifra, .tabla-resumen-anticipo th.cifra { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-resumen-anticipo tr.total td { font-weight: 700; }
.tabla-novedades-manual { table-layout: fixed; }
.tabla-novedades-manual td { vertical-align: middle; }
.tabla-novedades-manual select, .tabla-novedades-manual input { width: 100%; min-width: 0; }
.tabla-novedades-manual select + select { margin-top: 6px; }
.tabla-novedades-manual th, .tabla-novedades-manual td { padding-left: 6px; padding-right: 6px; }
.tabla-novedades-manual th:nth-child(1) { width: 20%; }
.tabla-novedades-manual th:nth-child(2) { width: 24%; }
.tabla-novedades-manual th:nth-child(3), .tabla-novedades-manual th:nth-child(4) { width: 15%; }
.tabla-novedades-manual th:nth-child(5) { width: 9%; }
.tabla-novedades-manual th:nth-child(6) { width: 11%; }
.tabla-novedades-manual th:nth-child(7) { width: 6%; }
.tabla-novedades-manual.con-quincena th:nth-child(1) { width: 15%; }
.tabla-novedades-manual.con-quincena th:nth-child(2) { width: 20%; }
.tabla-novedades-manual.con-quincena th:nth-child(3) { width: 9%; }
.tabla-novedades-manual.con-quincena th:nth-child(4), .tabla-novedades-manual.con-quincena th:nth-child(5) { width: 15%; }
.tabla-novedades-manual.con-quincena th:nth-child(6) { width: 8%; }
.tabla-novedades-manual.con-quincena th:nth-child(7) { width: 11%; }
.tabla-novedades-manual.con-quincena th:nth-child(8) { width: 7%; }
.tabla-novedades-manual .nm-quitar { width: 100%; padding: 0 6px; }
.tabla-detalle-nomina th, .tabla-detalle-nomina td { padding-left: 5px; padding-right: 5px; }
.tabla-detalle-nomina td.acciones .pila button { padding-left: 8px; padding-right: 8px; }
.tabla-novedades-manual td.cifra input { text-align: right; }
.marca-periodo { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--marca-clara); color: var(--marca-oscura); font-size: var(--fs-chica); font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .pn-fila { grid-template-columns: 1fr; gap: 4px; }
  .pn-fila .botones-opcion button { flex: 1 1 100%; min-height: 44px; }
}

/* ===================================================== PAG01: paginador común y Excel de listas
   Un solo paginador (servidor o cliente) para toda tabla larga. Tokens DS01: Inter, --fs-chica, botones de 32 px (44 en el celular). */
.paginador { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.paginador .paginador-rango { margin-right: auto; color: var(--tinta); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.paginador .paginador-tamano, .paginador .paginador-ir { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.paginador select { width: auto; min-height: var(--alto-control-chico); padding: 2px 28px 2px 10px; font-size: var(--fs-chica); }
.paginador input[type="number"] { width: 72px; min-height: var(--alto-control-chico); padding: 2px 6px; text-align: center; font-size: var(--fs-chica); font-variant-numeric: tabular-nums; }
.paginador .paginador-botones { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paginador-cliente { margin: 4px 0 10px; }
tr.pag-fuera { display: none !important; }
@media (max-width: 760px) {
  .paginador { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .paginador .paginador-rango { margin-right: 0; }
  .paginador .paginador-tamano { justify-content: space-between; }
  .paginador .paginador-botones { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 6px; }
  .paginador .paginador-ir { gap: 4px; }
  .paginador input[type="number"] { width: 56px; }
  .paginador button.menuda, .paginador select, .paginador input[type="number"] { min-height: var(--alto-control-movil); }
  .paginador .paginador-excel { width: 100%; }
}
@media print {
  .paginador, .paginador-cliente { display: none !important; }
  tr.pag-fuera { display: table-row !important; }
}

/* UI03: Tesorería visual (inicio, recibo de caja y egreso, listados). Nombres verificados: ninguno existía antes. */
.inicio-tesoreria .barra-acciones { align-items: center; }
.inicio-tesoreria .barra-acciones .desplegable > .accion { white-space: nowrap; }
#vencimientos-tesoreria { margin-bottom: 16px; }
#vencimientos-tesoreria td.cifra { white-space: nowrap; }
#vencimientos-tesoreria th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.filtros-movimientos { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; padding: 0 16px 12px; }
.filtros-movimientos .grupo-filtro { display: grid; gap: 4px; }
.filtros-movimientos .grupo-filtro > .rotulo { font-size: var(--fs-chica); color: var(--tinta-suave); }
.filtros-movimientos .campo-buscar { flex: 0 1 280px; min-width: 220px; margin: 0; }
#tabla-movimientos th, #tabla-movimientos td { padding-left: 9px; padding-right: 9px; }
#tabla-movimientos td.acciones { white-space: nowrap; }
#tabla-movimientos td .sub, #tabla-traslados td .sub, .sub { color: var(--tinta-suave); font-size: var(--fs-chica); }
.captura-pago .franja-tercero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.captura-pago .franja-tercero[hidden] { display: none; }
.captura-pago .franja-tercero .dato { display: grid; gap: 2px; min-width: 0; }
.captura-pago .franja-tercero .rotulo { font-size: var(--fs-chica); color: var(--tinta-suave); }
.captura-pago .franja-tercero .valor { font-weight: 600; overflow-wrap: anywhere; }
.captura-pago .opciones-radio { border: 0; margin: 0; padding: 0; min-width: 0; }
.captura-pago .opciones-radio legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.captura-pago .opciones-radio label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: normal; cursor: pointer; }
.captura-pago .opciones-radio input { width: 18px; height: 18px; }
.captura-pago .barra-abonos { justify-content: flex-end; margin-bottom: 10px; }
.captura-pago #tabla-abonos { table-layout: fixed; width: 100%; }
.captura-pago #tabla-abonos input[type="checkbox"] { width: 20px; height: 20px; }
.captura-pago #tabla-abonos tfoot th, .captura-pago #tabla-abonos tfoot td { border-top: 2px solid var(--borde); font-weight: 600; background: none; text-align: right; }
.captura-pago #tabla-abonos tfoot th { text-align: left; }
.captura-pago details.panel > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; }
/* DOCV-d y DOCV-f (inicio): «Descuentos, Retenciones y Otras Cuentas» y «Anticipos Disponibles» del recibo de caja y del egreso (a la vista, sin tarjetas nuevas). */
.captura-pago #campo-referencia[hidden], .captura-pago #panel-anticipos[hidden], .captura-pago #panel-ajustes[hidden] { display: none; }
.captura-pago #tabla-ajustes-pago { table-layout: fixed; width: 100%; }
.captura-pago #tabla-ajustes-pago, .captura-pago #tabla-anticipos-recibo { min-width: 0; }      /* `table.renglones` pide 720 px en pantallas angostas: estas dos se apilan en tarjetas */
.captura-pago #tabla-ajustes-pago td { vertical-align: top; overflow-wrap: anywhere; }
.captura-pago #tabla-ajustes-pago select, .captura-pago #tabla-ajustes-pago input:not([type="checkbox"]) { max-width: 100%; }
/* Lo que no aplica al tipo del renglón (retención, descuento u otra cuenta) se esconde; el servidor sigue siendo quien valida. */
.captura-pago #tabla-ajustes-pago tr:not([data-tipo="RETENCION"]) .solo-retencion,
.captura-pago #tabla-ajustes-pago tr:not([data-tipo="DESCUENTO"]) .solo-descuento,
.captura-pago #tabla-ajustes-pago tr:not([data-tipo="OTRA"]) .solo-otra,
.captura-pago #tabla-ajustes-pago tr[data-tipo="OTRA"] .solo-no-otra { display: none; }
.captura-pago #tabla-ajustes-pago .solo-no-otra { display: inline-block; padding: 7px 0; color: var(--tinta-suave); }
.captura-pago #tabla-ajustes-pago .aj-detalle { margin-top: 4px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.captura-pago #tabla-ajustes-pago .aj-detalle:empty { display: none; }
.captura-pago #tabla-ajustes-pago .aj-detalle .detalle { display: block; }
.captura-pago #tabla-ajustes-pago .aj-detalle .pildora { white-space: normal; max-width: 100%; box-sizing: border-box; border-radius: var(--radio); line-height: 1.35; margin-top: 4px; }
.captura-pago #tabla-anticipos-recibo input[type="checkbox"] { width: 20px; height: 20px; }
.captura-pago #panel-anticipos .barra-acciones { justify-content: flex-end; margin-top: 8px; }
@media (max-width: 640px) {
  .captura-pago #tabla-ajustes-pago tr:not([data-tipo="RETENCION"]) td.celda-base { display: none; }
  .captura-pago #tabla-ajustes-pago .aj-detalle { text-align: left; clear: both; }
}
/* DOCV-d y DOCV-f (fin) */
/* COMP-C (inicio): recibo y egreso en moneda extranjera: «Dólares y Pesos» (los pesos que de verdad movió el banco). */
.captura-pago #bloque-divisa[hidden], .captura-pago #ayuda-ajustes-divisa[hidden], .captura-pago #p-pesos-sugerido[hidden], .captura-pago #p-usar-trm[hidden],
.captura-pago #tabla-ajustes-pago tr[hidden] { display: none; }
.captura-pago #bloque-divisa .trm-oficial { margin: 0 0 12px; overflow-wrap: anywhere; }
.captura-pago #bloque-divisa .trm-oficial:empty { display: none; }
.captura-pago #bloque-divisa .rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.captura-pago #bloque-divisa .campo { min-width: 0; }
.captura-pago #bloque-divisa input { width: 100%; box-sizing: border-box; min-height: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.captura-pago #bloque-divisa .pastilla.sugerido { margin-top: 6px; }       /* sin `display`: el atributo `hidden` lo oculta (con él, ganaba este selector y la pastilla se veía siempre) */
.captura-pago #bloque-divisa #p-usar-trm { margin-top: 6px; min-height: 40px; }
.captura-pago .resumen-divisa td:first-child { overflow-wrap: anywhere; }
/* El «Ver» de una factura en moneda extranjera: el valor en la divisa debajo de cada total y la fila de la TRM. */
.resumen-documento .divisa-total { text-align: right; }
.resumen-documento tr.trm-documento td { padding-top: 10px; border-bottom: 0; font-size: var(--fs-chica); color: var(--tinta-suave); overflow-wrap: anywhere; }
.captura-pago .resumen-divisa .ayuda-signo { vertical-align: middle; }       /* la zona de toque de 40 px del «?» (`::after` de 9 px por lado) ya la da la regla de DOCV para `.resumen-documento .ayuda-signo` */
@media (max-width: 640px) {
  .captura-pago #bloque-divisa .rejilla { grid-template-columns: minmax(0, 1fr); }
  .captura-pago #bloque-divisa input { font-size: 16px; }
  .captura-pago #bloque-divisa #p-usar-trm { width: 100%; }
}
/* COMP-C (fin) */
.captura-pago .pie-documento .nota { overflow-wrap: anywhere; }
/* UI04f: el contado pide la caja o el banco y el medio de pago: uno debajo del otro, para que el nombre de la cuenta se lea completo. */
.captura-documento .pie-documento #forma-contado.forma-campos { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .inicio-tesoreria .barra-acciones > .accion, .inicio-tesoreria .barra-acciones > .desplegable { flex: 1 1 calc(50% - 10px); }
  .inicio-tesoreria .barra-acciones > .desplegable > .accion { width: 100%; }
  .filtros-movimientos .campo-buscar { margin-left: 0; width: 100%; }
  .captura-pago .franja-tercero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .captura-pago #tabla-abonos td[data-etiqueta="Estado"] { width: 100%; }
  .captura-pago #tabla-abonos td[data-etiqueta]::before { content: attr(data-etiqueta); float: left; color: var(--tinta-suave); font-size: var(--fs-chica); }
  .captura-pago #tabla-abonos tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; }
  .captura-pago #tabla-abonos tfoot th[colspan] { flex: 1 1 auto; }
}

/* C03, C2 y C3: Impuestos y Cuentas Asociadas, tarifas por tipo de persona y calidad tributaria del proveedor en la compra */
.columnas-cuentas-impuesto, .columnas-reglas-retencion, .columnas-matriz-retencion { table-layout: fixed; width: 100%; }
.columnas-cuentas-impuesto td, .columnas-reglas-retencion td, .columnas-matriz-retencion td { overflow-wrap: anywhere; vertical-align: top; }
/* En celular y tableta la matriz de diez columnas no cabe: conserva un ancho legible y se desplaza dentro de su panel (el panel ya tiene overflow-x: auto), sin ensanchar la página. */
@media (max-width: 1000px) { .columnas-matriz-retencion { min-width: 960px; } }
.columnas-cuentas-impuesto select.cuenta-impuesto { width: 100%; }
.columnas-reglas-retencion input, .columnas-matriz-retencion input.regla-tarifa, .columnas-matriz-retencion input.regla-norma { width: 100%; }
/* IR01c: «Retención por Tipo de Persona»: el concepto abarca sus filas (rowspan); una línea fina separa un concepto del siguiente; el tope se edita en su celda. */
.columnas-matriz-retencion td[rowspan] { background: var(--superficie-2); border-right: 1px solid var(--borde); }
.columnas-matriz-retencion tr[data-concepto] td { border-top: 1px solid var(--borde); }
.columnas-matriz-retencion input.regla-tope { width: 5.5em; }
.columnas-matriz-retencion td .pildora { margin-top: 2px; white-space: normal; }
.columnas-matriz-retencion td.casilla { font-variant-numeric: tabular-nums; font-weight: bold; color: var(--tinta-suave); white-space: nowrap; }
.columnas-matriz-retencion td.cifra { white-space: nowrap; }
.columnas-matriz-retencion td.persona-matriz { white-space: nowrap; overflow-wrap: normal; }
.columnas-matriz-retencion th, .columnas-matriz-retencion td { padding-left: 6px; padding-right: 6px; }
.columnas-matriz-retencion input.regla-tarifa { min-width: 0; padding: 4px 6px; text-align: right; }
.columnas-cuentas-impuesto td.casilla { font-variant-numeric: tabular-nums; font-weight: bold; color: var(--tinta-suave); }
/* IR01g: Renglones de Formularios (casillas de los formularios 300 y 350, por versión) */
.columnas-formularios { table-layout: fixed; width: 100%; }
.columnas-formularios td { overflow-wrap: anywhere; vertical-align: top; }
.columnas-formularios th, .columnas-formularios td { padding-left: 6px; padding-right: 6px; }
.columnas-formularios td.casilla { font-variant-numeric: tabular-nums; font-weight: bold; color: var(--tinta-suave); white-space: nowrap; }
.columnas-formularios input.fm-numero { width: 5.5em; min-width: 0; padding: 4px 6px; text-align: right; }
.columnas-formularios input.fm-descripcion, .columnas-formularios input.fm-formula { width: 100%; min-width: 0; padding: 4px 6px; }
.columnas-formularios td .detalle { display: block; font-size: var(--fs-chica); }
.datos-formulario { margin: 4px 0 12px; color: var(--tinta-suave); overflow-wrap: anywhere; }
.datos-formulario .pildora { margin-left: 4px; }
.barra-acciones .campo select#fm-version { width: 22em; max-width: 100%; }
.columnas-formularios td .pildora { white-space: nowrap; }
@media (max-width: 700px) { .columnas-formularios { min-width: 640px; } }
.historial-cuenta summary { cursor: pointer; }
.historial-cuenta ul { margin: 6px 0 0; padding-left: 16px; font-size: var(--fs-chica); color: var(--tinta-suave); }
td > .detalle { display: block; font-size: var(--fs-chica); }
.columnas-350 th.casilla { text-align: center; }
.calidad-tributaria { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.calidad-tributaria:empty { display: none; }

/* PAG01: búsqueda de listas de servidor (Terceros y similares): el campo y su botón en una fila, apilados en el celular. */
.busqueda-lista { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 4px 18px 12px; }
.busqueda-lista .campo { flex: 1 1 260px; max-width: 420px; }
.busqueda-lista .campo label { margin-bottom: 6px; }
@media (max-width: 760px) {
  .busqueda-lista { padding: 4px 12px 12px; }
  .busqueda-lista .campo { max-width: none; }
  .busqueda-lista button.accion { width: 100%; min-height: var(--alto-control-movil); }
}

/* == DOC01: logo de la empresa (C11): en los documentos impresos y en Datos de la Empresa == */
.doc-logo-img { display: block; max-width: 160px; max-height: 64px; object-fit: contain; }
.vista-logo { display: flex; align-items: center; justify-content: center; width: 260px; max-width: 100%; height: 96px; padding: 8px;
  margin-bottom: 12px; border: 1px dashed var(--borde-fuerte, #b9bfd0); border-radius: 6px; background: #fff; color: #666e82; }
.vista-logo img { max-width: 100%; max-height: 80px; object-fit: contain; }
/* == DOCT-c (inicio): el logo de la empresa o, si no tiene, el de Maro, en TODO (impresos, vista previa y barra del menú). Una sola regla: se escala en proporción
   dentro de su caja y nunca se recorta ni se estira. Ya no existe el cuadro «Logo». == */
.doc-logo-maro { max-height: 44px; }
.vista-logo.de-maro { flex-direction: column; gap: 6px; }
.vista-logo.de-maro img { max-height: 44px; }
#logo-inicio.logo-empresa img { object-fit: contain; max-width: 180px; max-height: 34px; }
#logo-inicio.logo-empresa .logo-oscuro, #logo-inicio.logo-empresa .logo-riel { box-sizing: border-box; background: #fff; border-radius: 8px; padding: 3px; }
#logo-inicio.logo-empresa .logo-riel { width: 40px; height: 40px; max-width: 40px; max-height: 40px; }
@media (max-width: 480px) { #logo-inicio.logo-empresa img { max-width: 140px; } }
/* == DOCT-c (fin) == */
#em-panel-logo [hidden] { display: none !important; }      /* `.accion` fija display y anularía el atributo hidden */
/* == Fin DOC01 == */

/* == DOC02: columna Consecutivo (CP) de la lista de Compras (ocultable por «Columnas») y botón de vista previa del impreso == */
.lista-panel.sin-col-consecutivo .col-consecutivo { display: none; }
.lista-panel .tabla-panel td.col-consecutivo { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* == Fin DOC02 == */

/* NOM02a: barra del visor paginado de la nómina (tamaño, búsqueda, página y Excel). Tokens DS01. */
.barra-visor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 4px 0 12px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.barra-visor label { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.barra-visor [hidden] { display: none; }
.barra-visor select, .barra-visor input { width: auto; min-height: var(--alto-control-chico); font-size: var(--fs-chica); }
.barra-visor .texto-pagina { margin-right: auto; color: var(--tinta); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.barra-visor .acciones-visor { display: inline-flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .barra-visor { flex-direction: column; align-items: stretch; }
  .barra-visor label { justify-content: space-between; }
  .barra-visor .texto-pagina { margin-right: 0; }
  .barra-visor .acciones-visor { width: 100%; }
  .barra-visor .acciones-visor button { flex: 1; min-height: var(--alto-control-movil); }
}
/* NOM02: la ayuda «?» también va en las barras de acciones de Liquidaciones (fuera de un título). */
.barra-acciones .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.barra-acciones .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* C02b: resultado por centro de costo en árbol: los de primer nivel en negrita; el movimiento propio de un centro que luego pasó a agrupar, en cursiva. */
.hoja table.informe-tabla tr.centro-n1 td { font-weight: 700; }
.hoja table.informe-tabla tr.centro-propio td { font-style: italic; }

/* PUC01f: la ayuda «?» también va en el encabezado de una tabla de parametrización (Gastos Predefinidos › IVA o INC). */
.tabla-param th .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.tabla-param th .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* PUC01f: «Revisar Contra el PUC» (diálogo del Plan de Cuentas): dos tablas con desplazamiento propio. */
.revision-puc .envoltura-param { max-height: 38vh; overflow: auto; margin-bottom: 12px; }
.revision-puc h4 { margin: 8px 0 6px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.revision-puc td.detalle { white-space: normal; overflow-wrap: anywhere; }
/* AUD01i: visor de auditoría. Columnas fijas; en pantallas angostas la tabla se desplaza dentro de su caja. */
.tabla-auditoria { table-layout: fixed; }
@media (min-width: 641px) { .tabla-auditoria { min-width: 1020px; } }
.tabla-auditoria td.fecha { white-space: nowrap; }
@media (min-width: 641px) { .tabla-auditoria th, .tabla-auditoria td { padding-left: 8px; padding-right: 8px; } }
.tabla-auditoria th, .tabla-auditoria td { overflow: hidden; text-overflow: ellipsis; }
.tabla-auditoria td.persona span { display: block; overflow: hidden; text-overflow: ellipsis; }
.tabla-cambios { width: 100%; table-layout: fixed; }
.tabla-cambios th:first-child { width: 28%; }
.tabla-cambios td { white-space: normal; overflow-wrap: anywhere; }
.linea-historial .motivo-historial { flex-basis: 100%; color: var(--tinta-suave); font-size: var(--fs-chica); }
.paginador-historial { margin-top: 12px; display: flex; justify-content: center; }
.paginador-historial .paginador-botones { display: inline-flex; align-items: center; gap: 12px; }
.datos-auditoria { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 8px 18px; margin: 16px 0 0; }
.datos-auditoria dt { font-weight: 700; color: var(--tinta-suave); }
.datos-auditoria dd { margin: 0; overflow-wrap: anywhere; }
.revision-puc td.cod-puc { white-space: nowrap; font-weight: 600; }
.revision-puc table { min-width: 620px; }
.revision-puc td.detalle { min-width: 240px; }

/* Inventarios (INV-PANTALLAS: I15 existencias, I18a toma guiada, I18b lotes, I18c configuración, I18d móvil) */
.inv-filtros { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.inv-filtros .campo { margin: 0; }
.valor-lectura { min-height: 40px; display: flex; align-items: center; padding: 6px 12px; border: 1px solid var(--borde); border-radius: var(--radio-control);
  background: var(--superficie-2); font-size: var(--fs-base); overflow-wrap: anywhere; }
.inv-configuracion h4 { margin: 18px 0 8px; font-size: var(--fs-base); color: var(--tinta-suave); }
.inv-configuracion .campo.cambiada input { background: color-mix(in srgb, #ffd43b 22%, transparent); }
#inv-aviso-maestro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.inv-valoracion td.cifra, .inv-tabla-existencias td.cifra { font-variant-numeric: tabular-nums; }
.inv-tabla-existencias tr.inactivo td { color: var(--tinta-suave); }
.partidas-conciliacion { width: 100%; margin: 4px 0 8px; font-size: var(--fs-chica); }
.conciliacion-inventario tr.detalle > td, .conciliacion-deterioro tr.detalle > td { padding: 0 0 0 28px; background: var(--superficie-2); }

/* Toma física guiada (I18a): pasos, barra de búsqueda y avance, renglones con el campo Contado alineado. */
.pasos-toma { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 16px; padding: 0; }
.pasos-toma li { display: flex; align-items: center; gap: 8px; color: var(--tinta-suave); font-weight: 600; }
.pasos-toma .numero-paso { width: 30px; height: 30px; font-size: var(--fs-chica); }
.pasos-toma li.activo { color: var(--marca-oscura); }
.pasos-toma li.activo .numero-paso { background: var(--marca); color: #fff; border-color: var(--marca); }
.pasos-toma li.hecho .numero-paso { background: var(--exito); color: #fff; border-color: var(--exito); }
.barra-toma { align-items: flex-end; gap: 12px 16px; margin-bottom: 12px; }
.barra-toma .campo { margin: 0; min-width: 200px; }
.tabla-toma td { vertical-align: middle; }
.tabla-toma td.producto { min-width: 220px; }
.tabla-toma .tf-contado, .tabla-toma .tf-n-contado { width: 100%; min-width: 110px; text-align: right; }
.tabla-toma input.error { border-color: var(--error); background: var(--error-claro); }
.tabla-toma tr.tf-nueva td { background: var(--superficie-2); }
.tabla-toma .tf-n-lote, .tabla-toma .tf-n-vence { width: 100%; min-width: 120px; margin-bottom: 4px; }
.protocolo-toma { margin: 0; padding-left: 22px; line-height: 1.6; }
.protocolo-toma li { margin-bottom: 8px; }
.resumen-toma td.cifra, .resumen-toma th.cifra { width: 180px; }

@media (max-width: 700px) {
  /* I18d: las pestañas del módulo se desplazan de lado, sin partirse en renglones. */
  .pestanas-inventario { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .pestanas-inventario button { flex: 0 0 auto; white-space: nowrap; }
  .inv-filtros { grid-template-columns: 1fr; }
  .inv-existencias .tabla-ancha, .inv-lotes .tabla-ancha { max-width: 100%; }
  .paginador { padding: 10px 4px; }
  /* La toma en el teléfono: cada renglón es una tarjeta con el producto arriba y «Contado» a todo el ancho. */
  .tabla-toma, .tabla-toma tbody, .tabla-toma tr, .tabla-toma td { display: block; width: 100%; box-sizing: border-box; min-width: 0; }
  table.renglones.tabla-toma { min-width: 0; }
  .tabla-toma thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-toma tr { border: 1px solid var(--borde); border-radius: var(--radio-control); margin-bottom: 10px; padding: 8px 10px; background: var(--superficie); }
  .tabla-toma td { padding: 4px 0; border: 0; text-align: left; }
  .tabla-toma td.cifra { text-align: left; }
  .tabla-toma td[data-label]::before { content: attr(data-label) ": "; color: var(--tinta-suave); font-size: var(--fs-chica); font-weight: 600; }
  .tabla-toma td.producto { font-weight: 700; position: sticky; top: 0; background: var(--superficie); min-width: 0; }
  .tabla-toma td.producto::before, .tabla-toma td.tf-celda-contado::before { content: none; }
  .tabla-toma .tf-contado, .tabla-toma .tf-n-contado { width: 100%; min-height: 44px; text-align: left; font-size: var(--fs-base); }
  .tabla-toma td.vacio { text-align: center; }
  .pasos-toma { gap: 6px 14px; }
  .barra-toma .campo { min-width: 0; flex: 1 1 100%; }
  .dialogo.completo > .cuerpo { padding: 14px 12px 8px; }
}

/* I15: las tarjetas de Existencias en tres columnas para que las cifras no se corten; en el teléfono, las dos de siempre. */
@media (min-width: 701px) { #inv-resumen .kpis-inicio { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

/* Pestañas del módulo: ocho caben en una sola fila a 1440 px; tabla de lotes sin partir el producto ni cortar la acción. */
.pestanas-inventario { gap: 2px; }
.pestanas-inventario button { padding: 9px 12px; }
/* ALMA (inicio): ubicaciones, traslados con tránsito y conteos por zona. Los tokens de siempre; sin colores nuevos. */
.ruta-ubicacion { font-weight: 600; }
td.ruta-ubicacion[data-label="Ubicación"] { font-weight: 700; }
.chip-transito { background: var(--alerta-clara); color: var(--alerta); font-weight: 700; }
.tabla-ubicaciones td.acciones, .tabla-traslados td.acciones { white-space: normal; }
.tabla-ubicaciones td[hidden], .tabla-ubicaciones th[hidden], .tabla-apilable td[hidden], .tabla-apilable th[hidden] { display: none !important; }
#tf-productos { width: 100%; }
.alma-filtros { padding: 12px 18px 4px; }
#pie-dialogo button[hidden], #cuerpo-dialogo [hidden] { display: none !important; }
.alma-filtros .rotulo-grupo { display: block; font-size: var(--fs-chica); color: var(--tinta-suave); font-weight: 600; margin-bottom: 4px; }
@media (max-width: 700px) {
  .tabla-ubicaciones td.acciones .accion, .tabla-traslados td.acciones .accion, #tr-estado button, #tr-tipo button, #tf-alcance button,
  #tf-sin-contar, #tr-agregar, #tf-agregar { min-height: 44px; }
  .tabla-traslados td.acciones, .tabla-ubicaciones td.acciones { flex-direction: column; align-items: stretch; }
  .tabla-traslados td.acciones .accion, .tabla-ubicaciones td.acciones .accion { width: 100%; }
  .tabla-toma .tf-n-ubicacion { width: 100%; min-height: 44px; }
  #tf-productos { min-height: 150px; }
}
/* ALMA (fin) */
.inv-tabla-lotes td:first-child, .inv-tabla-bajas td:nth-child(3) { min-width: 210px; }
.inv-tabla-lotes td.acciones, .inv-tabla-bajas td.acciones { white-space: nowrap; }
.inv-tabla-lotes th:nth-child(8) { min-width: 120px; }

/* ROL01h: Usuarios, Roles y Permisos. Tabla de usuarios, matriz de acceso (primera columna fija, cabecera fija, desplazamiento dentro de su caja),
   vista previa del menú y «¿Por qué no ve…?». Tamaños de la escala --fs-* (nada menor de 14 px); botones de 40 y 32 px. */
@media (min-width: 641px) { .tabla-usuarios, .tabla-roles { min-width: 780px; } .tabla-usuarios th, .tabla-usuarios td { padding-left: 8px; padding-right: 8px; } }
.tabla-usuarios td.persona, .tabla-roles td.persona { min-width: 0; max-width: 300px; }
.tabla-usuarios td.persona span, .tabla-roles td.persona span { overflow-wrap: anywhere; }
.tabla-usuarios .pildora, .tabla-roles .pildora { white-space: nowrap; }
.tabla-usuarios td.vigencias { min-width: 150px; }
@media (min-width: 641px) { .tabla-usuarios td.acciones, .tabla-roles td.acciones { text-align: right; width: 1%; white-space: nowrap; } }
.vigencia { display: block; font-size: var(--fs-chica); color: var(--tinta-suave); line-height: 1.4; }
.vigencia b { color: var(--tinta); font-weight: 600; }
.vigencia.por-vencer { color: var(--alerta); font-weight: 600; }
.vigencia.vencida { color: var(--error); font-weight: 600; }
.vigencia.futura { color: var(--info); }
.menu-fila button.item-menu:disabled { color: var(--tinta-tenue); cursor: not-allowed; background: none; }
.tabla-roles-vigencia th, .tabla-roles-vigencia td { white-space: nowrap; }
.tabla-roles-vigencia td input[type="date"] { min-width: 150px; }
.nota-rol-empleado { margin-top: 10px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.bloque-empresa { margin-bottom: 18px; }
.bloque-empresa > h4 { margin: 0 0 8px; font-size: var(--fs-base); }
.cuerpo textarea[data-libre] { width: 100%; resize: vertical; }

.roles-mostrar { position: relative; display: inline-block; }
.roles-mostrar > summary { display: inline-flex; align-items: center; min-height: var(--alto-control-chico); padding: 0 12px; cursor: pointer; list-style: none; }
.roles-mostrar > summary::-webkit-details-marker { display: none; }
.roles-mostrar .menu-roles { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 280px; max-height: 320px; overflow: auto; padding: 8px 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.edicion-rol > .cuerpo { padding-bottom: 6px; }
.edicion-rol .barra-edicion-param { position: static; margin-top: 12px; }

.matriz-acceso { max-height: 72vh; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
table.matriz { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 620px; }
table.matriz th, table.matriz td { padding: 6px 12px; border-bottom: 1px solid var(--borde); background: var(--superficie); }
table.matriz thead th { position: sticky; top: 0; z-index: 3; background: var(--superficie-2); text-align: center; vertical-align: bottom; min-width: 150px; }
table.matriz thead th span { display: block; font-weight: normal; color: var(--tinta-tenue); }
table.matriz thead th.col-arbol { left: 0; z-index: 4; text-align: left; min-width: 300px; }
table.matriz thead th.en-edicion { background: var(--marca-clara); color: var(--marca-oscura); }
table.matriz td.col-arbol { position: sticky; left: 0; z-index: 1; min-width: 300px; max-width: 380px; border-right: 1px solid var(--borde); }
table.matriz td.celda-rol { text-align: center; }
table.matriz td.celda-rol input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
table.matriz td.celda-rol input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }
table.matriz .fila-titulo th { position: sticky; left: 0; text-align: left; background: var(--marca-clara); color: var(--marca-oscura); }
table.matriz tr.fila-area td { background: var(--superficie-3); }
table.matriz tr.fila-grupo td { background: var(--superficie-2); }
table.matriz tr.fila-pantalla td { font-weight: 600; }
table.matriz td.nivel-grupo { padding-left: 28px; }
table.matriz td.nivel-pantalla { padding-left: 48px; }
table.matriz td.nivel-accion { padding-left: 72px; }
table.matriz td.nivel-especial { padding-left: 16px; }
table.matriz .cuantas { color: var(--tinta-tenue); font-weight: normal; font-size: var(--fs-chica); }
table.matriz tr.permiso-especial td { background: var(--alerta-clara); }
table.matriz tr.permiso-especial td.col-arbol { border-left: 4px solid var(--alerta); }
table.matriz tr.fila-bloqueada td.col-arbol { color: var(--tinta-suave); }
table.matriz button.plegar { width: 32px; height: 32px; padding: 0; margin-right: 4px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--tinta-suave); font: inherit; cursor: pointer; }
table.matriz button.plegar:hover { color: var(--tinta); border-color: var(--marca); }

.bloques-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.bloque-menu { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 12px 14px; background: var(--superficie); }
.bloque-menu > h4 { margin: 0 0 8px; font-size: var(--fs-base); }
.grupo-menu { margin-bottom: 10px; }
.grupo-menu > strong { display: block; margin-bottom: 4px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.grupo-menu .pildora { margin: 0 4px 4px 0; }
.pantalla-ve { margin-bottom: 4px; }
.pantalla-ve .pildora { margin-right: 4px; }
.resumen-previa { margin: 0 0 12px; }
.grupo-no-ve { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.grupo-no-ve > strong { min-width: 130px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.grupo-no-ve > span { display: flex; flex-wrap: wrap; gap: 6px; }
.porque-pasos { margin-top: 14px; }
.panel-porque { border: 1px solid var(--borde); border-left: 4px solid var(--marca); border-radius: var(--radio-chico); padding: 12px 16px; background: var(--superficie-2); }
.panel-porque h4 { margin: 0 0 8px; }
.pasos-porque { list-style: none; margin: 0; padding: 0; }
.pasos-porque li { padding: 4px 0; }
.pasos-porque .marca-paso { display: inline-block; width: 22px; font-weight: 700; }
.pasos-porque li.cumple .marca-paso { color: var(--exito-texto); }
.pasos-porque li.falla .marca-paso { color: var(--error); }
.pasos-porque .detalle-paso { display: block; margin-left: 26px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.conclusion-porque { margin: 10px 0 0; }
.resumen-cambio { margin-bottom: 10px; }
.resumen-cambio .pildora { margin: 0 4px 4px 0; }
.politica-vigente { color: var(--marca-oscura); }
@media (max-width: 760px) {
  .matriz-acceso { max-height: 66vh; }
  table.matriz td.col-arbol, table.matriz thead th.col-arbol { width: 160px; min-width: 160px; max-width: 160px; padding-left: 8px; padding-right: 8px; }
  table.matriz .etiqueta-fila { overflow-wrap: anywhere; }
  table.matriz thead th { min-width: 108px; }
  table.matriz td.nivel-grupo { padding-left: 14px; }
  table.matriz td.nivel-pantalla { padding-left: 20px; }
  table.matriz td.nivel-accion { padding-left: 28px; }
  .roles-mostrar .menu-roles { right: auto; left: 0; }
}

/* PERS-A (inicio): «Personas y Acceso». La lista de personas e invitaciones: la vigencia va bajo cada rol, y a 390 px cada persona es una tarjeta apilada
   (nombre en negrilla arriba, renglones con su rótulo) con zonas de toque de 44 px. Nada de tarjetas decorativas nuevas. */
.tabla-usuarios .vigencia { margin-top: 2px; }
.tabla-usuarios .rol-con-vigencia { display: inline-block; vertical-align: top; margin: 0 8px 6px 0; }
.tabla-usuarios tr.fila-invitacion td.persona { font-style: normal; }
@media (max-width: 640px) {
  .tabla-usuarios td.persona { text-align: left; font-weight: 600; }
  .tabla-usuarios td.persona::before { content: none; }
  .tabla-usuarios .rol-con-vigencia { display: block; margin: 0 0 6px; text-align: right; }
  .acciones-fila [data-menu-fila] { min-height: 44px; min-width: 120px; }
  .menu-fila button.item-menu { min-height: 44px; }
  #us-acciones .accion { width: 100%; min-height: 44px; }
  body[data-pantalla="usuarios"] .sub-pestanas button { min-height: 44px; }
}
/* PERS-A (fin) */

/* PERS-B3 (inicio): «Mi Portal» pensado primero para el celular y «Portal de Personas». Cuatro botones grandes para pedir (44 px; 48 px a 390 px), los documentos en renglones y
   la configuración del portal en una columna. Toda zona de toque mide 40 px o más; nada de tarjetas decorativas nuevas. */
.portal-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.portal-acciones .accion { min-height: 44px; }
.fila-documento { display: flex; align-items: flex-end; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.documentos-portal .fila-documento:last-child { border-bottom: 0; }
.documentos-portal .nombre-documento { flex: 1 1 180px; align-self: center; font-weight: 600; }
.documentos-portal .accion { min-height: 44px; }
.columnas-portal > div { min-width: 0; }
.datos-portal td { overflow-wrap: anywhere; }
.columnas-portal > div > .panel { margin-bottom: 16px; }
.cifra-grande { font-size: var(--fs-dialogo); margin: 0 0 12px; }
.simulacion-portal { margin: 4px 0 14px; }
.simulacion-portal .rotulo-simulacion { display: block; font-weight: 600; color: var(--tinta-suave); margin-bottom: 6px; }
.simulacion-portal .simulacion-linea { margin: 0 0 8px; font-weight: 700; }
#portal-config .ayuda-signo, .simulacion-portal .ayuda-signo, .documentos-portal .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; vertical-align: middle; }
#portal-config .ayuda-signo:focus-visible, .simulacion-portal .ayuda-signo:focus-visible, .documentos-portal .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
#portal-config dd input[type="number"] { max-width: 140px; }
#portal-config .campo-motivo-portal { padding: 6px 18px 14px; }
.tabla-portal td.persona { min-width: 0; max-width: 300px; }
.tabla-portal td.persona span { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .columnas-portal { grid-template-columns: minmax(0, 1fr); }
  .portal-acciones { display: grid; grid-template-columns: 1fr; }
  .portal-acciones .accion { width: 100%; min-height: 48px; }
  .documentos-portal .fila-documento { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .documentos-portal .accion { width: 100%; min-height: 44px; }
  #portal-config h3 { flex-wrap: wrap; }
  #portal-config h3 .der { width: 100%; margin-left: 0; }
  #portal-config h3 .der .accion, #portal-config .barra-edicion-param .accion { width: 100%; min-height: 44px; }
  #portal-config label.marca { min-height: 44px; }
  #portal-config dd select, #portal-config dd input[type="number"] { min-height: 44px; max-width: none; width: 100%; }
  #portal-acciones .accion { width: 100%; min-height: 44px; }
  .tabla-portal td.persona { text-align: left; font-weight: 600; max-width: none; }
  .tabla-portal td.persona::before { content: none; }
  body[data-pantalla="portal"] button.menuda, #po-por-resolver .accion { min-height: 44px; }
  body[data-pantalla="usuarios"] .tabla-portal .marca-estado { white-space: normal; text-align: left; }
}
/* PERS-B3 (fin) */

/* ====================================================================== NAV03
   NAV03a: dentro de un módulo la barra lateral lista solo lo de ese módulo: «Inicio», el título del módulo (no es un botón) y sus grupos.
   Para cambiar de módulo está el conmutador de la barra superior. A 1001 px o más, con la barra fija, el subnav se oculta porque repite la barra. */
nav .titulo-area { display: flex; gap: 10px; align-items: center; padding: 10px 18px 6px; font-weight: 700; color: var(--c); }
nav .titulo-area svg.icono { width: 20px; height: 20px; flex: none; }
@media (min-width: 1001px) {
  #aplicacion.menu-fijo > aside nav .titulo-area { color: #e6edf5; padding-left: 12px; }
  #aplicacion.menu-fijo > aside nav .titulo-area svg.icono { color: #bfe9e6; }
  #aplicacion.menu-fijo .subnav { display: none !important; }
}
@media (max-width: 1000px) { nav .titulo-area { display: none; } }

/* ====================================================================== ONB01j/k/l
   «Mi Seguridad»: segundo factor con sus códigos de recuperación, sesiones propias y el chip de la demostración. Solo tokens
   de DS01 (--fs-*, alturas de control); nada por debajo de 14 px. */
.seccion-seguridad { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.seccion-seguridad:last-child { border-bottom: 0; }
.seccion-seguridad h3 { margin: 0 0 8px; font-size: var(--fs-seccion); }
.seccion-seguridad p { margin: 0 0 8px; }
.seccion-seguridad .barra-acciones { margin: 12px 0 8px; }
.lista-seguridad { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-base); }
.fila-sesion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.fila-sesion > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.codigos-recuperacion { list-style: none; counter-reset: codigo; margin: 10px 0; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.codigos-recuperacion li { counter-increment: codigo; font-family: Consolas, "Courier New", monospace; font-size: var(--fs-base); letter-spacing: 1px; white-space: nowrap; }
.codigos-recuperacion li::before { content: counter(codigo, decimal-leading-zero) ". "; color: var(--tinta-tenue); letter-spacing: 0; }
.chip-ambiente { flex: none; }
@media (max-width: 480px) {
  .codigos-recuperacion { grid-template-columns: minmax(0, 1fr); }
  .fila-sesion .menuda { min-height: var(--alto-control-movil); }
  /* El chip «Demostración» no empuja el avatar fuera de la barra: en el celular se lee «Demo» (el rótulo completo y el nombre
     accesible siguen en el elemento), sin el punto y con menos relleno. */
  .chip-ambiente { font-size: 0; padding: 0 8px; gap: 0; }
  .chip-ambiente::before { display: none; }
  .chip-ambiente::after { content: "Demo"; font-size: var(--fs-chica); }
}
@media (max-width: 380px) { .barra-superior .acciones-superiores { gap: 6px; } }
@media (max-width: 340px) {
  /* En 320 px solo cabe el punto. */
  .chip-ambiente { width: 22px; padding: 0; justify-content: center; }
  .chip-ambiente::before { display: block; }
  .chip-ambiente::after { display: none; }
}

/* ====================================================================== CFG03
   CFG03b: el Centro de Configuración (área que no es módulo): engranaje con contador, «Configurar {Módulo}» al final de la barra lateral, Estado
   de la Configuración con su barra de progreso y los puntos de estado (contraste mínimo 3:1 con el blanco, WCAG 1.4.11).
   CFG03c: barra de secciones fija bajo la barra superior (una sección visible a la vez) y barra de edición ARRIBA, no al pie. */
.area-configuracion { --c: #344054; --g: #344054; --o: #1d2939; }
.boton-configuracion svg.icono { width: 18px; height: 18px; }
.boton-configuracion[aria-current="page"] { border-color: var(--marca); color: var(--marca-oscura); background: var(--marca-clara); }
nav .item-configurar { margin-top: 12px; border-top: 1px solid var(--borde); border-radius: 0 0 10px 10px; padding-top: 12px; }
@media (min-width: 1001px) {
  nav .item-configurar { border-top-color: rgba(255, 255, 255, .12); }
}

.punto-estado { display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; vertical-align: middle;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92); }
.punto-estado.COMPLETA { background: #1a7f4b; }
.punto-estado.PENDIENTE { background: #a35a00; }
.punto-estado.ATENCION { background: var(--error); }
#menu button .punto-estado { margin-left: auto; }
.marca-estado.COMPLETA { background: var(--exito-claro); color: var(--exito-texto); }
.marca-estado.ATENCION { background: var(--error-claro); color: var(--error); }

.barra-progreso { height: 10px; margin: 0 0 18px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; border-radius: 999px; background: #1a7f4b; transition: width .25s ease; }

/* Una sección visible a la vez: lo oculto con `hidden` no se pinta aunque su clase diga otra cosa. */
[data-seccion][hidden] { display: none !important; }
.barra-seccion.fija { position: sticky; top: var(--alto-barra-superior, 62px); z-index: 20; align-items: center; justify-content: space-between;
  gap: 10px 12px; margin: 0 0 14px; padding: 8px 0; background: var(--fondo); }
.barra-seccion.fija .sub-pestanas { margin: 0; flex: 1 1 auto; min-width: 0; }
.barra-seccion.fija .acciones-seccion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.barra-seccion.fija .acciones-seccion .barra-acciones { margin: 0; }
.sub-pestanas button { position: relative; }
/* La barra de edición va arriba, debajo de las barras fijas; en un diálogo, pegada a su borde. */
.barra-edicion-param { top: calc(var(--alto-barra-superior, 62px) + var(--alto-barra-seccion, 0px)); bottom: auto; margin: 0 0 12px; z-index: 19;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .08); }
#velo .barra-edicion-param, #velo-encima .barra-edicion-param { top: 0; }
@media (max-width: 760px) {
  .barra-seccion.fija .acciones-seccion { width: 100%; }
}

/* ===== NOM03a ===== */
/* Nómina por secciones: pestañas con «Configuración» a la derecha, migas con «Volver», avance de la nómina, panel lateral (colilla y «Antes de
   Liquidar») y tarjetas de «Más Procesos». DS01: Inter, tokens --fs-*, botones de 40 px (32 en filas) y nada menor de 14 px. */
.marca-estado.CONTABILIZADA_PENDIENTE { background: var(--info-clara); color: var(--info); }
.nomina-cabecera { margin-bottom: 4px; }
.nomina-pestanas .nomina-config { margin-left: auto; }
.nomina-migas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 14px 4px 0; font-size: var(--fs-chica); color: var(--tinta-suave); }
.nomina-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.nomina-migas li + li::before { content: "›"; margin-right: 8px; color: var(--tinta-tenue); }
.nomina-migas li[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.nomina-migas + .cabeza-lista { padding-top: 12px; }
.nomina-migas > .accion { width: auto; flex: none; }
#chips-nominas .chip button { font-size: var(--fs-chica); }
.lista-panel .barra-panel > #paginador-nominas { margin-left: auto; }
#detalle-tarjetas .kpis-inicio .kpi-inicio strong { font-size: var(--fs-dialogo); }
#detalle-tarjetas .kpis-inicio { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nomina-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.nomina-titulo .titulo-lista { overflow-wrap: anywhere; }
.nomina-titulo .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.nomina-titulo .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* NOMEDIT-03: la ayuda del diálogo «Editar Nómina» (el signo «?» en una línea de un diálogo, `.linea-ayuda-dialogo`) con la misma forma que la de la cabecera. */
.linea-ayuda-dialogo .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.linea-ayuda-dialogo .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.nomina-datos { margin: -6px 4px 16px; color: var(--tinta-suave); font-size: var(--fs-chica); }

.pasos-nomina { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 18px; padding: 12px 16px; list-style: none; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; }
.pasos-nomina li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-chica); font-weight: 600; color: var(--exito-texto); }
.pasos-nomina li.pendiente { color: var(--tinta-tenue); font-weight: 400; }
.pasos-nomina .marca-paso { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; font-size: var(--fs-chica); line-height: 1; }
.pasos-nomina li.hecho .marca-paso { background: var(--exito-claro); }
.secciones-nomina { margin-top: 4px; }
.barra-seguridad { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.barra-seguridad .espacio { flex: 1; }

.boton-tarjeta { margin-top: 6px; padding-left: 0; padding-right: 0; justify-content: flex-start; }
.chips-novedad { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip-novedad { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--superficie-3); color: var(--tinta-suave); font-size: var(--fs-chica);
  font-weight: 600; white-space: nowrap; }
.acciones-fila { display: inline-flex; gap: 6px; }
td.col-novedades { white-space: normal; min-width: 120px; }

.velo-lateral { position: fixed; inset: 0; z-index: 58; display: none; background: rgba(13, 39, 66, .22); }
.velo-lateral.visible { display: block; }
.panel-lateral { position: fixed; top: 0; right: 0; bottom: 0; z-index: 59; display: none; flex-direction: column; width: 560px; max-width: 100%;
  background: var(--superficie); border-left: 1px solid var(--borde); box-shadow: -12px 0 32px rgba(16, 24, 40, .14); }
.panel-lateral.visible { display: flex; }
.panel-lateral > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--borde); }
.panel-lateral > header h3 { margin: 0; font-size: var(--fs-dialogo); overflow-wrap: anywhere; }
.panel-lateral .cerrar { min-width: 40px; min-height: 40px; border: 0; background: none; font-size: var(--fs-pantalla); line-height: 1; cursor: pointer; color: var(--tinta-suave); }
.panel-lateral .cerrar:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 8px; }
.cuerpo-panel-lateral { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 24px; }
.pie-panel-lateral { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.acciones-panel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.prevalida-resumen { margin: 0; }
.lista-prevalidacion { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.lista-prevalidacion li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: 10px; }
.lista-prevalidacion li.prevalida-bloquea { border-color: var(--error-borde); background: var(--error-claro); }
.lista-prevalidacion li .texto { min-width: 0; overflow-wrap: anywhere; }
/* NOMEDIT-06: «Antes de Liquidar» con nombre de la nómina y selección de empleados (tabla paginada, sin desplazamiento interno) */
.prevalida { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.prevalida > .campo input { width: 100%; }
.prevalida-empleados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.prevalida-empleados h3 { margin: 0; font-size: var(--fs-seccion); }
/* NOMX-d (inicio) «Antes de Liquidar» sin filtros de centro ni contrato: búsqueda y periodicidad en una sola línea que se parte en el celular */
.prevalida-empleados .barra-seleccion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.prevalida-empleados .barra-seleccion input[type="search"] { flex: 1 1 220px; min-width: 0; }
/* NOMX-d (fin) */
.prevalida-empleados .barra-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.prevalida-empleados table { font-size: var(--fs-chica); }
.prevalida-empleados th, .prevalida-empleados td { padding: 6px 5px; white-space: nowrap; }
.prevalida-empleados th.casilla, .prevalida-empleados td.casilla { width: 1%; }
.prevalida-empleados .casilla-todos { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; }
.prevalida-empleados td.vacio { white-space: normal; text-align: center; color: var(--tinta-suave); }
.prevalida-empleados input[type="checkbox"] { width: 18px; height: 18px; margin: 0; vertical-align: middle; }
.prevalida-empleados td.casilla { line-height: 1; }
.colilla-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.colilla-posicion { font-weight: 600; font-variant-numeric: tabular-nums; }
.colilla { display: grid; gap: 14px; }
.colilla-datos { display: grid; gap: 2px; }
.colilla-datos span { color: var(--tinta-suave); font-size: var(--fs-chica); }
.tabla-colilla { width: 100%; border-collapse: collapse; }
.tabla-colilla th:nth-child(2) { width: 24%; }
.tabla-colilla th:nth-child(3) { width: 24%; }
.tabla-colilla th, .tabla-colilla td { padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla-colilla th.cifra, .tabla-colilla td.cifra { text-align: right; }
.tabla-colilla tr.total td { font-weight: 700; }
.colilla-neto { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--marca-clara); }
.colilla-neto strong { font-size: var(--fs-cifra); font-variant-numeric: tabular-nums; }
/* NOM03a6: colilla con pestañas (Colilla, Cálculos y Novedades), más ancha para que la fórmula y la norma se lean sin desplazarse */
.panel-lateral.ancha { width: min(880px, 100%); }
.colilla-nav { flex-wrap: wrap; }
.colilla-nav .espacio { flex: 1 1 auto; }
.colilla-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.colilla-pestanas { margin: 0; }
.selector-calculos { margin-bottom: 12px; }
.tabla-calculos-colilla { width: 100%; border-collapse: collapse; }
.tabla-calculos-colilla th, .tabla-calculos-colilla td { padding: 8px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla-calculos-colilla th.cifra, .tabla-calculos-colilla td.cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-calculos-colilla tr.fila-total td { font-weight: 700; }
.formula-calculo { display: block; font-weight: 600; }
.valores-calculo { display: block; color: var(--tinta-suave); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nota-linea { display: block; margin-top: 4px; color: var(--tinta-suave); font-size: var(--fs-chica); }
.nota-norma { margin: 12px 0 0; font-size: var(--fs-chica); }
.subtitulo-colilla { margin: 16px 0 8px; }
.novedades-colilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; margin: 0; }
.novedades-colilla div { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.novedades-colilla dt { color: var(--tinta-suave); font-size: var(--fs-chica); }
.novedades-colilla dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.tarjetas-procesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tarjeta-proceso { padding: 18px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.tarjeta-proceso h3 { margin: 0 0 12px; font-size: var(--fs-seccion); }
.tarjeta-proceso ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tarjeta-proceso li button { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; padding-top: 8px; padding-bottom: 8px; height: auto; }

@media (max-width: 760px) {
  .panel-lateral { width: 100%; border-left: 0; }
  .nomina-pestanas { flex-wrap: wrap; overflow-x: visible; }
  .lista-prevalidacion li { grid-template-columns: minmax(0, 1fr) auto; }
  .lista-prevalidacion li .marca-estado { grid-column: 1 / -1; justify-self: start; }
  .prevalida-empleados .barra-seleccion input[type="search"] { flex-basis: 100%; }      /* NOMX-d */
  .pasos-nomina { gap: 8px 16px; }
  #detalle-tarjetas .kpis-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-panel .barra-panel > #paginador-nominas { margin-left: 0; width: 100%; }
}

/* NOM03a7 a a11: documentos electrónicos, empleados (lista, ficha y asistente) y más procesos */
.lista-panel .barra-panel > .paginador-lista { margin-left: auto; }
.lista-panel .tabla-panel td.persona { min-width: 0; }
.lista-panel .tabla-panel td.persona .enlace { padding: 0; text-align: left; }
#chips-empleados .chip button { font-size: var(--fs-chica); }
.filtro-estado-docs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.filtro-estado-docs button .cuenta { display: inline-block; min-width: 24px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--superficie-3); color: var(--tinta-suave);
  font-size: var(--fs-chica); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.filtro-estado-docs button[aria-pressed="true"] .cuenta { background: rgba(255, 255, 255, .22); color: inherit; }
.desactualizado { opacity: .45; transition: opacity .15s ease; }
.acciones-pila { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.lista-acciones-empleado { display: grid; gap: 8px; }
.lista-acciones-empleado .accion { width: 100%; justify-content: flex-start; text-align: left; }

.ficha-pestanas { flex-wrap: wrap; gap: 2px; }
.ficha-pestanas button { padding-left: 10px; padding-right: 10px; }
.barra-edicion-ficha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.barra-edicion-ficha .espaciador { flex: 1; }
.barra-edicion-ficha .pendiente-guardar { color: #8a5a00; font-weight: 800; }
.ficha-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.ficha-rejilla[hidden], [data-campo-ficha][hidden] { display: none; }
#fa-minimo { margin-top: 6px; align-self: flex-start; }
.ficha-dato { display: grid; gap: 2px; align-content: start; min-width: 0; }
.ficha-dato > span { color: var(--tinta-suave); font-size: var(--fs-chica); }
.ficha-dato > strong { font-size: var(--fs-base); font-weight: 600; overflow-wrap: anywhere; }
.ficha-dato > small { color: var(--tinta-suave); font-size: var(--fs-chica); }
.error-campo { display: block; margin-top: 4px; color: var(--error); font-size: var(--fs-chica); font-weight: 600; }
.con-error input, .con-error select { border-color: var(--error); }
.asistente-pasos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 16px; padding: 0; list-style: none; }
.asistente-pasos li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-chica); color: var(--tinta-tenue); }
.asistente-pasos li.actual { color: var(--tinta); font-weight: 700; }
.asistente-pasos li.hecho { color: var(--exito-texto); }
.asistente-pasos .numero-paso { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font-weight: 700;
  font-size: var(--fs-chica); line-height: 1; }
.asistente-pasos li.actual .numero-paso { background: var(--marca); border-color: var(--marca); color: #fff; }
.asistente-pasos li.hecho .numero-paso { background: var(--exito-claro); }
@media (max-width: 760px) {
  .lista-panel .barra-panel > .paginador-lista { margin-left: 0; width: 100%; }
  .filtro-estado-docs { padding: 0 12px 12px; }
  .ficha-rejilla { grid-template-columns: 1fr; }
  .asistente-pasos { gap: 6px 14px; }
}

/* ====================================================================== NAV03c y NAV03d
   NAV03c: en toda lista los controles van ARRIBA de la tabla: el paginador (con «Descargar Excel» y los filtros que la lista traiga) va en `.barra-lista`,
   fija bajo la barra superior en escritorio; en el celular no se fija (ocuparía media pantalla). Debajo de una tabla no queda ningún botón.
   NAV03d: en los diálogos de pantalla completa la barra de botones va ARRIBA, fija en el borde de arriba y en el mismo orden del DOM (el principal a la
   derecha); el encabezado (título, consecutivo y avisos: hasta 170 px) deja de ser fijo para que la barra quede a la vista; los totales siguen
   ABAJO (A-057) pero ya no son fijos: el total de 388 px con la forma de pago desplegada tapaba los renglones (A-059). */
.barra-lista { position: sticky; top: calc(var(--alto-barra-superior, 62px) + var(--alto-barra-seccion, 0px)); z-index: 3; display: flex; flex-wrap: wrap;
  gap: 8px 12px; align-items: center; justify-content: space-between; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.barra-lista > .paginador { flex: 1 1 auto; }
.barra-lista .espaciador { flex: 1; }
/* Un panel con overflow (hidden, o auto de las reglas para tablas anchas) rompería el sticky de su barra: el panel de una lista con barra no recorta. */
.panel:has(.barra-lista), #aplicacion.menu-fijo .panel:has(.barra-lista) { overflow: visible; }
.panel > h3 .der, .categoria > h4 .der { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.categoria > h4.cabeza-categoria { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.paginador-cliente .paginador { padding: 8px 4px; }
@media (max-width: 760px) { .barra-lista { position: static; } }

/* `overflow: hidden` en el diálogo rompería `position: sticky` (quien se desplaza es el velo): en pantalla completa no recorta. */
.dialogo.completo { overflow: visible; }
.dialogo.completo > header { position: static; order: 0; }
.dialogo.completo > #pie-dialogo { order: 1; position: sticky; top: 0; bottom: auto; z-index: 2; border-top: 0; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.dialogo.completo > .cuerpo { order: 2; }
.dialogo.completo:has(.barra-superior-documento) > .cuerpo { overflow: visible; }
#pie-dialogo:empty { display: none !important; }
.dialogo.completo .barra-superior-documento { top: 0; }
.dialogo.completo .captura-documento > .pie-documento:not(.ver) { position: static; box-shadow: none; }
@media (max-width: 760px) {
  /* En el celular las acciones de un documento corren en una sola tanda (sin separar izquierda y derecha) para que la barra fija no pase de la cuarta parte del alto. */
  .dialogo.completo .barra-superior-documento { gap: 8px; padding: 8px 0; }
  .dialogo.completo .barra-superior-documento > div { display: contents; }
  /* Los botones de un formulario caben en dos columnas (el texto parte en dos líneas) en vez de salirse por la derecha. */
  .dialogo.completo > #pie-dialogo:not(.barra-documento) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px; }
  .dialogo.completo > #pie-dialogo:not(.barra-documento) > button { min-width: 0; min-height: 44px; white-space: normal; line-height: 1.25; }
  .dialogo.completo > #pie-dialogo:not(.barra-documento) > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 360px) { .dialogo.completo > #pie-dialogo:not(.barra-documento) { grid-template-columns: 1fr; } }

/* ===== CFG03d-f: Empresa, Políticas y las demás secciones de configuración =====
   Lo que se pliega (`<details class="tarjeta-param plegable">`) lleva su estado y su acción en la cabecera; las acciones de cada sección suben a la barra fija. */
.acciones-seccion .barra-seccion { margin: 0; }
.acciones-seccion .barra-acciones { margin: 0; gap: 8px 12px; }
.acciones-seccion .barra-acciones .campo { margin: 0; flex-direction: row; align-items: center; gap: 8px; }
.acciones-seccion .barra-acciones .campo label { margin: 0; white-space: nowrap; }
.acciones-seccion .barra-acciones .campo input[type="search"] { min-width: 220px; }
.tarjeta-param.plegable > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px; cursor: pointer; list-style: none;
  font-size: var(--fs-dialogo); font-weight: 700; }
.tarjeta-param.plegable > summary::-webkit-details-marker { display: none; }
.tarjeta-param.plegable > summary::before { content: '\25B8'; color: var(--marca); transition: transform .12s ease; }
.tarjeta-param.plegable[open] > summary::before { transform: rotate(90deg); }
.tarjeta-param.plegable[open] > summary { border-bottom: 1px solid var(--borde); }
.tarjeta-param.plegable > summary:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 14px; }
.tarjeta-param.plegable > summary .estado-plegable { font-weight: 500; }
.tarjeta-param.plegable > summary .der { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.tarjeta-param.plegable .cuerpo-plegable > .cuerpo { padding: 14px 18px 16px; }
.tarjeta-param > .cuerpo { padding: 14px 18px 16px; }
.tarjeta-param small, td small { font-size: var(--fs-chica); }
.tabla-tipos td:nth-child(4) { min-width: 280px; }
#tabla-gastos td.col-nombre, #tabla-conceptos-venta td.col-nombre { min-width: 200px; }
#tabla-gastos td.col-codigo, #tabla-conceptos-venta td.col-codigo { max-width: 170px; overflow-wrap: anywhere; }
.resumen-config { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.vista-encabezado { padding: 16px; border: 1px dashed var(--borde-fuerte); border-radius: 12px; background: #fff; overflow-x: auto; }
.vista-encabezado .doc-membrete { margin: 0; }
.tarjeta-param .cuerpo .rejilla .campo .ayuda { display: block; margin-top: 4px; }
@media (max-width: 700px) {
  .tarjeta-param .cuerpo .rejilla.cuatro, .tarjeta-param .cuerpo .rejilla.dos { grid-template-columns: 1fr; }
  .tarjeta-param .cuerpo .rejilla > .campo { grid-column: auto !important; }
}

/* ====================================================================== TER01i-j — Terceros: lista unificada y ficha por secciones
   La lista usa las clases de Compras (.cabeza-lista, .pestanas-tarea, .lista-panel, .tabla-panel); aquí solo lo propio: el nombre del tercero con sus marcas, y la
   ficha (secciones en pestañas internas, consulta bloqueada y la barra de arriba con «N Cambios sin Guardar»). */
.lista-panel .tabla-panel td.col-tercero { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.lista-panel .tabla-panel td.col-tercero .enlace { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-align: left; white-space: nowrap; }
.lista-panel .tabla-panel td .pildora { white-space: nowrap; }
.lista-panel .barra-panel .campo select[data-sin-busqueda] { min-width: 160px; }
#lista-terceros .barra-panel > button.accion { margin-bottom: 6px; }      /* alinea el botón con los campos (cada .campo trae 6 px de margen abajo) */
.ficha-tercero [hidden] { display: none !important; }
.ficha-tercero fieldset.ficha-campos { border: 0; padding: 0; margin: 0; min-width: 0; }
.ficha-tercero > .pestanas-tarea { margin: 0 0 14px; }
.ficha-tercero #t-resumen:not(:empty) { margin-bottom: 4px; }
.ficha-tercero fieldset.ficha-campos:disabled input:not([type="checkbox"]), .ficha-tercero fieldset.ficha-campos:disabled select:not([data-combo]), .ficha-tercero fieldset.ficha-campos:disabled textarea {
  background: var(--superficie-2); color: var(--tinta); -webkit-text-fill-color: var(--tinta); cursor: default; }
.ficha-tercero fieldset.ficha-campos:disabled .selector-persona button:not(.activo) { display: none; }
.ficha-tercero .barra-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#pie-dialogo .n-cambios { order: -1; margin-right: auto; align-self: center; font-weight: 600; color: var(--tinta-suave); }
#pie-dialogo .n-cambios.con-cambios { color: var(--alerta); }
@media (max-width: 760px) {
  .dialogo.completo > #pie-dialogo .n-cambios { grid-column: 1 / -1; }
  .lista-panel .tabla-panel td.col-tercero { max-width: 220px; }
  /* Apiladas en tarjeta, las celdas con varias pastillas (Roles, Calidad Tributaria) bajan de renglón en vez de ensanchar la página (501 px a 390). */
  #lista-terceros .tabla-panel td { flex-wrap: wrap; }
}
/* TER01k: el diálogo «Fusionar» (el duplicado, el que se conserva y su vista previa) y la lista de Posibles Duplicados. */
.fusion-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--borde);
  border-radius: var(--radio-chico); background: var(--superficie-2); }
.fusion-resumen .fusion-lado { flex: 1 1 240px; min-width: 0; }
.fusion-resumen .fusion-lado small { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.fusion-resumen .fusion-lado strong { display: block; overflow-wrap: anywhere; }
.fusion-texto { margin: 0 0 10px; line-height: 1.5; overflow-wrap: anywhere; }
#fu-vista { margin: 6px 0 12px; }
.fusion-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.fusion-campos .campo { min-width: 0; margin-bottom: 0; }
.fusion-campos .campo.ancho { grid-column: 1 / -1; }
.fusion-campos input, .fusion-campos select { width: 100%; min-width: 0; }
.fusion-busqueda { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 14px; }
.fusion-busqueda .campo { flex: 1 1 260px; min-width: 0; margin-bottom: 0; }
.fusion-busqueda .campo input { width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .fusion-campos { grid-template-columns: minmax(0, 1fr); }
  .fusion-resumen .fusion-lado { flex-basis: 100%; }
  #pd-grupos .panel td.acciones { text-align: left; }
}
#pd-grupos .panel td.acciones { text-align: right; white-space: nowrap; }
#pd-grupos .panel td { overflow-wrap: anywhere; }

/* ====================================================================== CFG03g-j — Nómina en el Centro, buscador de configuración y procesos fuera de la configuración
   El buscador de «Estado de la Configuración» va en la barra fija de arriba; sus resultados reemplazan a «Lo Que Falta». La exoneración de aportes se lee (se cambia en el Perfil). */
.barra-seccion .campo-buscar { flex: 1 1 280px; max-width: 460px; }
.barra-seccion .campo-buscar input[type="search"] { width: 100%; }
.resultados-config { list-style: none; margin: 0; padding: 0; }
.resultados-config li + li { border-top: 1px solid var(--borde); }
.resultados-config .accion.texto { display: flex; width: 100%; justify-content: flex-start; text-align: left; white-space: normal; min-height: 44px; padding: 10px 4px; }
.valor-exoneracion { margin: 0; font-size: var(--fs-base); }
/* La «?» de cada criterio de nómina (dentro de una fila, no de una cabecera de panel) no baja de 14 px (DS01: un botón sin tamaño propio sale de 13,33 px). */
.pn-fila .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.pn-fila .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* Utilidades Contables (CFG03j): la acción de cada panel va en su cabecera; el subtítulo cede el sitio y, en el celular, los botones bajan a su propia fila. */
#utilidades-contenido .panel > h3 { flex-wrap: wrap; align-items: center; row-gap: 8px; }
#utilidades-contenido .panel > h3 .subtitulo-panel { flex: 1 1 260px; min-width: 0; margin-left: 0; border-radius: 12px; }
#utilidades-contenido .panel > h3 .der { flex: none; flex-wrap: nowrap; }
@media (max-width: 700px) {
  #utilidades-contenido .panel > h3 .der { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  #utilidades-contenido .panel > h3 .der .accion { flex: 1 1 auto; }
}

/* ====================================================================== NI-e — el índice de tarjetas del Centro de Configuración (DS01: la letra se hereda; tamaños solo con las fichas --fs-*) */
.mosaico-config { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
.mosaico-config[hidden] { display: none; }
.tarjeta-config { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 16px; }
.tarjeta-config h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-seccion); }
.tarjeta-config h3 .icono { width: 20px; height: 20px; color: var(--marca); flex: none; }
.tarjeta-config ul { list-style: none; margin: 0; padding: 0; }
.tarjeta-config li { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.tarjeta-config li .accion.texto { font-size: var(--fs-base); text-align: left; padding-left: 0; }
.tarjeta-config li .punto-estado { margin-left: 0; }
/* NOMEDIT-08b: tablas de la parametrización de nómina con columnas fijas y alineadas (quincenas, conceptos, tope del auxilio). */
.tabla-nomedit { table-layout: fixed; width: 100%; }
.tabla-nomedit col.col-quincena-concepto { width: 40%; }
.tabla-nomedit col.col-quincena-cuando { width: 60%; }
.tabla-nomedit col.col-concepto { width: 26%; }
.tabla-nomedit col.col-corta { width: 10%; }
.tabla-nomedit col.col-media { width: 16%; }
.tabla-nomedit col.col-dian { width: 22%; }
.tabla-nomedit col.col-dian-ancha { width: 74%; }
.tabla-nomedit td, .tabla-nomedit th { overflow-wrap: anywhere; vertical-align: top; }
.tabla-nomedit .codigo { font-variant-numeric: tabular-nums; font-weight: 700; }
.tabla-nomedit .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.tabla-nomedit .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.tabla-nomedit select { max-width: 100%; }
@media (max-width: 760px) { .tabla-nomedit { table-layout: auto; } }
/* NOMEDIT-09b: novedades por empleado, parámetros legales, descuentos y períodos del contrato: tablas de columnas fijas y alineadas. */
.tabla-nomedit col.ne-concepto { width: 30%; }
.tabla-nomedit col.ne-fecha { width: 15%; }
.tabla-nomedit col.ne-cantidad { width: 11%; }
.tabla-nomedit col.ne-valor { width: 13%; }
.tabla-nomedit col.ne-extra { width: 12%; }
.tabla-nomedit col.ne-acciones { width: 16%; }
.tabla-nomedit col.dc-persona { width: 14%; }
.tabla-nomedit col.dc-fecha { width: 8%; }
.tabla-nomedit col.dc-concepto { width: 14%; }
.tabla-nomedit col.dc-tipo { width: 10%; }
.tabla-nomedit col.dc-valor { width: 8%; }
.tabla-nomedit col.dc-corta { width: 5%; }
.tabla-nomedit col.dc-estado { width: 8%; }
.tabla-nomedit col.dc-cuando { width: 12%; }
.tabla-nomedit col.dc-prioridad { width: 7%; }
.tabla-nomedit col.dc-acciones { width: 9%; }
.tabla-nomedit col.pl-anio, .tabla-nomedit col.pl-codigo, .tabla-nomedit col.pl-piso { width: 12%; }
.tabla-nomedit col.pl-valor { width: 18%; }
.tabla-nomedit col.pl-valor-largo { width: 22%; }
.tabla-nomedit col.pl-pct { width: 16%; }
.tabla-nomedit col.pl-dias, .tabla-nomedit col.pl-etapa, .tabla-nomedit col.pl-regla { width: 26%; }
.tabla-nomedit col.pl-quien, .tabla-nomedit col.pl-concepto { width: 34%; }
.tabla-nomedit col.pl-norma, .tabla-nomedit col.pl-elemento, .tabla-nomedit col.pl-afiliacion { width: 40%; }
.tabla-nomedit col.cp-codigo, .tabla-nomedit col.cp-activo { width: 9%; }
.tabla-nomedit col.cp-nombre, .tabla-nomedit col.cp-ley { width: 18%; }
.tabla-nomedit col.cp-natu, .tabla-nomedit col.cp-base { width: 13%; }
.tabla-nomedit col.cp-dian { width: 20%; }
.tabla-nomedit col.col-fecha-per { width: 18%; }
.tabla-nomedit col.col-tipo-per { width: 32%; }
.tabla-nomedit input[type=number], .tabla-nomedit input[data-libre] { width: 100%; max-width: 100%; box-sizing: border-box; }
.error-campo { color: var(--error); font-size: var(--fs-chica); }
.estado-habilitacion-nomina .cuerpo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) { .tabla-nomedit col { width: auto !important; } }
/* MOD-01b: módulos de la empresa (Panel de Plataforma) y las tarjetas de la rueda que vienen del módulo abierto. Solo fichas del sistema de diseño. */
.tarjeta-config.del-modulo { border: 2px solid var(--marca); }
.tarjetas-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.tarjeta-modulo { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-modulo.activo { border-color: var(--marca); }
.tarjeta-modulo h4 { margin: 0; font-size: var(--fs-seccion); }
.interruptor-modulo { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
.nota-modulo { margin: 0; font-size: var(--fs-chica); color: var(--tinta-suave); }
#mod-estado-cambios.pendiente-guardar { font-weight: 800; }
/* NOM-CONFIG-b: la tabla de jornadas lleva una columna más (Horas al Mes) y las cuatro cifras caben en el ancho. */
#pl-tabla-jornadas col.pl-valor { width: 14%; }
/* UXB (inicio) */
.espacio-informes[data-estado="elegido"], .espacio-informes[data-estado="generado"] { grid-template-columns: minmax(0, 1fr); }
.espacio-informes[data-estado="elegido"] .lista-informes, .espacio-informes[data-estado="generado"] .lista-informes { display: none; }
body.informe-enfocado #aplicacion > aside, body.informe-enfocado .subnav { display: none !important; }
@media (min-width: 1001px) {
  body.informe-enfocado #aplicacion.visible, body.informe-enfocado #aplicacion.visible.menu-fijo { grid-template-columns: minmax(0, 1fr); }
  body.informe-enfocado #aplicacion > .columna { grid-column: 1; }
}
.barra-titulo-informe .cerrar-informe { width: 36px; height: 36px; margin: 0 0 0 4px; padding: 0; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--tinta-suave); font-size: var(--fs-base); line-height: 1; }
@media (min-width: 1001px) {
  #aplicacion.menu-recogido > aside:not(:hover):not(:has(:focus-visible)) nav .titulo-area span,
  #aplicacion.menu-recogido > aside:not(:hover):not(:has(:focus-visible)) nav .sub-movil { display: none; }
  #aplicacion.menu-recogido > aside:hover nav .titulo-area, #aplicacion.menu-recogido > aside:has(:focus-visible) nav .titulo-area { color: #e6edf5; }
}
nav .item-fijar { margin-top: 4px; }
nav .item-fijar[aria-pressed="true"] { color: #fff; font-weight: bold; }
@media (max-width: 1000px) { nav .item-fijar { display: none; } }
.tabla-detalle-nomina .col-detalle { white-space: nowrap; }
.tabla-detalle-nomina button.enlace.tenue { color: var(--tinta-suave); font-weight: normal; }
/* UXB (fin) */

/* NOMC (inicio) */
#nc-tabla th, #nc-tabla td { padding-left: 8px; padding-right: 8px; }
#nc-tabla th:first-child, #nc-tabla td:first-child { width: 90px; }
#nc-tabla th:nth-child(n+6), #nc-tabla td:nth-child(n+6) { width: 96px; }
.rejilla.nc-filtros { grid-template-columns: 2fr repeat(4, 1fr); margin-bottom: 12px; }
@media (max-width: 900px) { .rejilla.nc-filtros { grid-template-columns: 1fr; } }
#cpe-bases .ayuda-signo { margin-left: 4px; }
/* NOMC (fin) */
/* IMPU (inicio) */
/* IMPU-4/5/6: Configuración Tributaria limpia, Declaraciones y Roles de Cuenta. Una tabla por impuesto; la clase y la persona son columnas. */
.celda-cuenta { white-space: normal; word-break: keep-all; overflow-wrap: normal; min-width: 0; }
.celda-cuenta .detalle { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.celda-cuenta .casilla { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: var(--fs-chica); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: bold; }
.celda-cuenta select { width: 100%; min-width: 0; }
/* CTA8: el buscador de cuenta ocupa todo el ancho de su celda (la regla genérica `.celda-cuenta input` lo limitaba a 150 px y cortaba «13050501 · Na…»). */
.columnas-roles .celda-cuenta .combo, .columnas-roles .celda-cuenta input.combo-entrada { max-width: none; width: 100%; }
.columnas-iva .celda-cuenta .combo, .columnas-iva .celda-cuenta input.combo-entrada, .columnas-retencion-persona .celda-cuenta .combo, .columnas-retencion-persona .celda-cuenta input.combo-entrada,
.columnas-consumo .celda-cuenta .combo, .columnas-consumo .celda-cuenta input.combo-entrada, .columnas-otras .celda-cuenta .combo, .columnas-otras .celda-cuenta input.combo-entrada { max-width: none; width: 100%; }
.pildora.fabrica { background: var(--superficie-3); color: var(--tinta-suave); }
.pildora.personalizada { background: var(--marca-clara); color: var(--acento-texto); border: 1px solid var(--marca-borde); }
.columnas-iva, .columnas-retencion-persona, .columnas-consumo, .columnas-otras, .columnas-roles { width: 100%; }
.columnas-iva td, .columnas-retencion-persona td, .columnas-roles td { vertical-align: top; }
.columnas-iva td:first-child .codigo { display: block; font-weight: bold; }
.columnas-iva td:first-child .detalle { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.columnas-iva td.casilla, .columnas-retencion-persona td.casilla { font-variant-numeric: tabular-nums; font-weight: bold; color: var(--tinta-suave); white-space: nowrap; }
.columnas-retencion-persona th.grupo-persona { text-align: center; border-left: 2px solid var(--acento); }
.columnas-retencion-persona thead tr:nth-child(2) th:nth-child(1), .columnas-retencion-persona thead tr:nth-child(2) th:nth-child(4),
.columnas-retencion-persona tbody td:nth-child(3), .columnas-retencion-persona tbody td:nth-child(6) { border-left: 2px solid var(--acento); }
.columnas-retencion-persona td .detalle { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.filtro-fecha-tributaria { margin-bottom: 8px; }
.mas-impu { position: relative; display: inline-block; vertical-align: middle; }
.mas-impu > summary { list-style: none; cursor: pointer; display: inline-flex; }
.mas-impu > summary::-webkit-details-marker { display: none; }
.mas-impu > summary::after { content: " ▾"; }
.mas-impu[open] > summary::after { content: " ▴"; }
.mas-impu .menu-acciones { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 230px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); white-space: normal; text-align: left; }
.mas-impu .menu-acciones > button { text-align: left; justify-content: flex-start; width: 100%; }
.datos-formulario { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.bloque-350 { margin-bottom: 16px; }
.bloque-350 h4.seccion-formulario { border-left: 2px solid var(--acento); padding-left: 8px; }
.interruptor-todos { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: normal; color: var(--tinta-suave); cursor: pointer; }
#volver-config { margin-right: auto; }
.barra-seccion.fija #volver-config { order: -1; }
.pestanas-declaracion .acciones-declaracion { display: inline-flex; gap: 10px; align-items: center; margin-left: auto; }
.resumen-al-final { margin-top: 16px; }
@media (max-width: 640px) {
  .columnas-iva, .columnas-iva tbody, .columnas-retencion-persona, .columnas-retencion-persona tbody, .columnas-consumo, .columnas-consumo tbody, .columnas-otras, .columnas-otras tbody,
  .columnas-roles, .columnas-roles tbody { display: block; width: 100%; }
  .columnas-iva thead, .columnas-retencion-persona thead, .columnas-consumo thead, .columnas-otras thead, .columnas-roles thead { display: none; }
  .columnas-iva tr, .columnas-retencion-persona tr, .columnas-consumo tr, .columnas-otras tr, .columnas-roles tr { display: block; padding: 10px 4px; border-bottom: 1px solid var(--borde); }
  .columnas-iva td, .columnas-retencion-persona td, .columnas-consumo td, .columnas-otras td, .columnas-roles td { display: block; padding: 4px 12px; border: 0; min-height: 28px; }
  .columnas-iva td[data-etiqueta]::before, .columnas-retencion-persona td[data-etiqueta]::before, .columnas-consumo td[data-etiqueta]::before,
  .columnas-otras td[data-etiqueta]::before, .columnas-roles td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-weight: bold; color: var(--tinta-suave); font-size: var(--fs-chica); }
  .columnas-retencion-persona tbody td:nth-child(3), .columnas-retencion-persona tbody td:nth-child(6) { border-left: 0; }
  .mas-impu .menu-acciones { position: static; margin-top: 6px; }
}
/* IMPU (fin) */
/* UXC (inicio) */
/* UXC-a: el resumen como una línea discreta (conteos y configuración) y la fila de tarjetas al pie. 14 px como mínimo (DS01). */
.resumen-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 14px 0 0; padding: 10px 2px 0;
  border-top: 1px solid var(--borde); font-size: var(--fs-chica); line-height: var(--ai-texto); color: var(--tinta-suave); }
.resumen-linea.arriba { margin: 0 0 14px; padding: 0 2px 10px; border-top: 0; border-bottom: 1px solid var(--borde); }
.resumen-linea .dato-resumen { white-space: nowrap; }
.resumen-linea .dato-resumen b { color: var(--tinta); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.resumen-linea .dato-resumen.atencion b { color: var(--alerta); }
.resumen-linea .dato-resumen.malo b { color: var(--error); }
.resumen-linea .dato-resumen.bien b { color: var(--exito-texto); }
.resumen-linea .boton-resumen { font-size: var(--fs-chica); margin-left: 4px; }
.resumen-al-final > .kpis-inicio { margin-bottom: 0; }
/* UXC-a: la banda de título más baja y pareja (antes 22px 26px, ícono de 56 px y título de 28 px: unos 102 px de alto). */
.banda-pantalla { margin-bottom: 16px; padding: 12px 20px; gap: 14px; border-radius: 16px; }
.icono-pantalla { width: 40px; height: 40px; border-radius: 12px; }
.icono-pantalla svg.icono { width: 22px; height: 22px; }
.banda-pantalla header.titulo h2 { font-size: var(--fs-pantalla); line-height: var(--ai-titulo); }
.banda-pantalla header.titulo .contexto { padding: 5px 12px; }
.cabeza-lista.sin-titulo { justify-content: flex-end; }
.barra-plan { margin-bottom: 12px; }
.panel-arbol .filtros-arbol { grid-template-columns: 1fr auto; align-items: center; }
.panel-arbol .clases-puc { padding: 8px 16px 0; margin-bottom: 6px; }
@media (max-width: 700px) {
  .resumen-linea { gap: 2px 14px; }
  .resumen-linea .dato-resumen { white-space: normal; }
  .banda-pantalla { padding: 10px 14px; border-radius: 14px; margin-bottom: 12px; }
  .banda-pantalla header.titulo h2 { font-size: var(--fs-dialogo); }
  .clases-puc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .clases-puc button[data-clase] { flex: none; }
  .panel-arbol .filtros-arbol { grid-template-columns: 1fr; }
}
/* UXC (fin) */
/* UXA-a (inicio) */
/* Lista de cuentas: ancha, código y nombre completos en una o dos líneas, sin «…». */
.combo-lista.lista-de-cuentas { padding: 6px; }
.combo-lista.lista-de-cuentas .combo-item { white-space: normal; overflow: visible; text-overflow: clip; display: grid;
  grid-template-columns: 9ch minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 8px 10px; font-size: var(--fs-base); line-height: 1.35; }
.combo-lista.lista-de-cuentas .combo-codigo { font-weight: bold; font-variant-numeric: tabular-nums; color: var(--tinta); }
.combo-lista.lista-de-cuentas .combo-nombre { overflow-wrap: anywhere; color: var(--tinta); }
.combo-lista.lista-de-cuentas .combo-item.activo .combo-nombre, .combo-lista.lista-de-cuentas .combo-item:hover .combo-nombre { color: var(--marca); }
.combo-lista.lista-de-cuentas .combo-item.sin-codigo .combo-nombre { grid-column: 1 / -1; }
.combo-lista.lista-de-cuentas .combo-grupo { text-transform: none; letter-spacing: 0; font-size: var(--fs-base); font-weight: bold; }
.captura-documento #tabla-conceptos .cuenta-renglon .ruta-cuenta { display: block; color: var(--tinta-suave); }
@media (max-width: 640px) {
  /* Celular: hoja inferior a todo el ancho, sobre el teclado. */
  .combo-lista.lista-de-cuentas.hoja-inferior { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    border-radius: 16px 16px 0 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(20, 30, 70, .22); z-index: 80; }
  .combo-lista.lista-de-cuentas .combo-item { grid-template-columns: 1fr; row-gap: 2px; padding: 10px 12px; }
}
/* UXA-a (fin) */
/* IMPB-c (inicio) */
/* Lo que no aplica a la empresa: una línea discreta (sin borde, sin fondo, sin tarjeta) que dice por qué y lleva al Perfil. En Declaraciones la misma nota va al final de las pestañas. */
.nota-no-aplica { color: var(--tinta-suave); padding: 6px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pestanas > .nota-no-aplica { display: inline-flex; padding: 0 8px; margin-left: 6px; font-size: var(--fs-chica); align-self: center; }
@media (max-width: 640px) {
  .nota-no-aplica .accion { width: 100%; }
}
/* IMPB-c (fin) */
/* NOMN-a (inicio) */
.barra-periodo-nomina { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.barra-periodo-nomina .espaciador { flex: 1; }
.periodo-cargue { margin: 0 0 6px; }
.periodo-cargue .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.periodo-cargue .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.pasos-cargue { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; list-style: none; padding: 0; margin: 8px 0 12px; }
.resumen-revision { margin: 8px 0; }
details.plegable { margin: 12px 0; }
details.plegable > summary { cursor: pointer; font-weight: 700; color: var(--marca-oscura); padding: 6px 0; }
@media (max-width: 600px) { .pasos-cargue { flex-direction: column; align-items: stretch; } .barra-periodo-nomina .espaciador { display: none; } }
/* NOMN-a (fin) */

/* NOMN-c (inicio) «Ver Detalle» se despliega hacia abajo en la fila del empleado, con sus novedades editables. Arial 12 y colores heredados; nada de tarjetas. */
.tabla-detalle-nomina tr.fila-detalle-nomina > td { background: var(--superficie); padding: 12px; }
.detalle-desplegado:focus { outline: 2px solid var(--marca); outline-offset: 2px; }
.detalle-desplegado .subpestanas { overflow-x: auto; flex-wrap: nowrap; }
.detalle-desplegado .subpestanas button { white-space: nowrap; }
.detalle-desplegado .otros-datos-renglon { margin-top: 16px; }
.tabla-detalle-nomina tr.fila-detalle-nomina > td::before { content: none; }
.detalle-desplegado .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.detalle-desplegado .ayuda-signo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (max-width: 700px) {
  .tabla-detalle-nomina tr.fila-detalle-nomina > td { display: block; width: auto; text-align: left; }
  }
/* NOMN-c (fin) */
/* UXA-c (inicio) */
.donde-contabiliza { margin-top: 18px; }
.donde-contabiliza[hidden] { display: none; }
.donde-contabiliza h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.tabla-contabiliza { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-base); }
.tabla-contabiliza .col-cuenta { width: 40%; }
.tabla-contabiliza .col-concepto { width: 28%; }
.tabla-contabiliza .col-cifra { width: 16%; }
.tabla-contabiliza th, .tabla-contabiliza td { padding: 6px 4px; vertical-align: top; text-align: left; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--borde); }
.tabla-contabiliza th.cifra, .tabla-contabiliza td.cifra { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-contabiliza tr.grupo th { padding-top: 12px; color: var(--tinta-suave); font-weight: bold; border-bottom: 0; }
.tabla-contabiliza .codigo { font-weight: bold; margin-right: 4px; }
.cuenta-del-tercero { margin: 8px 0 0; }
.cuenta-del-tercero .rotulo { font-weight: bold; margin-right: 6px; }
.cuenta-del-tercero .codigo { font-weight: bold; margin-right: 4px; }
@media (max-width: 640px) {
  .tabla-contabiliza, .tabla-contabiliza tbody, .tabla-contabiliza tr, .tabla-contabiliza td { display: block; width: auto; }
  .tabla-contabiliza thead, .tabla-contabiliza colgroup { display: none; }
  .tabla-contabiliza td { border-bottom: 0; padding: 2px 0; }
  .tabla-contabiliza tr { padding: 6px 0; border-bottom: 1px solid var(--borde); }
  .tabla-contabiliza tr.grupo { padding: 0; border-bottom: 0; }
  .tabla-contabiliza td.cifra { text-align: left; }
  .tabla-contabiliza td.cifra:empty { display: none; }
  .tabla-contabiliza td[data-etiqueta]::before { content: attr(data-etiqueta) " "; font-weight: bold; }
}
/* UXA-c (fin) */
/* NOMX-a (inicio) */
/* Un dato calculado (tramos de la incapacidad, días, valores) nunca va en .ayuda: se oculta con la ayuda apagada. */
.dato-calculado { color: var(--tinta); margin: 4px 0 0; }
.detalle-fila { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
/* La carga a mano suma la columna «%» (porcentaje que recibe el trabajador en la incapacidad). */
.tabla-novedades-manual th:nth-child(1) { width: 17%; }
.tabla-novedades-manual th:nth-child(2) { width: 22%; }
.tabla-novedades-manual th:nth-child(3), .tabla-novedades-manual th:nth-child(4) { width: 13%; }
.tabla-novedades-manual th:nth-child(5), .tabla-novedades-manual th:nth-child(6) { width: 9%; }
.tabla-novedades-manual th:nth-child(7) { width: 11%; }
.tabla-novedades-manual th:nth-child(8) { width: 6%; }
.tabla-novedades-manual.con-quincena th:nth-child(1) { width: 14%; }
.tabla-novedades-manual.con-quincena th:nth-child(2) { width: 20%; }
.tabla-novedades-manual.con-quincena th:nth-child(3) { width: 8%; }
.tabla-novedades-manual.con-quincena th:nth-child(4), .tabla-novedades-manual.con-quincena th:nth-child(5) { width: 12%; }
.tabla-novedades-manual.con-quincena th:nth-child(6), .tabla-novedades-manual.con-quincena th:nth-child(7) { width: 8%; }
.tabla-novedades-manual.con-quincena th:nth-child(8) { width: 11%; }
.tabla-novedades-manual.con-quincena th:nth-child(9) { width: 7%; }
/* A 390 px la lista de la ventana de novedades (con los tramos de cada incapacidad) se desplaza dentro de su caja en vez de partir cada palabra. */
@media (max-width: 600px) {
  .tabla-novedades-ventana { display: block; overflow-x: auto; }
  .tabla-novedades-ventana td, .tabla-novedades-ventana th { overflow-wrap: normal; word-break: normal; }
  .tabla-novedades-ventana td:first-child { min-width: 11em; }
  .tabla-novedades-ventana td:nth-child(2) { min-width: 9em; }
}
/* NOMX-a (fin) */
/* UXF-a (inicio) */
/* UXF-a: tokens de espacio (múltiplos de 4) y la barra de filtros común (H2). Solo tokens de letra DS01 (mínimo 14 px). */
:root { --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px;
  --radio-pildora: 999px; --hoja-radio: 16px; --alto-fila: 48px; --alto-fila-compacta: 36px; }
.barra-filtros { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4) var(--esp-2); }
.barra-filtros .bf-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); }
.barra-filtros .bf-rotulo { display: block; margin: 0 0 var(--esp-1); font-size: var(--fs-chica); font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
.barra-filtros .bf-buscar { flex: 1 1 300px; max-width: 400px; min-width: 220px; margin: 0; }
.barra-filtros .bf-caja { position: relative; display: block; }
.barra-filtros .bf-caja svg.icono { position: absolute; left: var(--esp-3); top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); pointer-events: none; }
.barra-filtros .bf-caja input[type="search"] { width: 100%; min-height: var(--alto-control); padding-left: 38px; }
.barra-filtros .bf-campo { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.barra-filtros .bf-campo select { width: auto; min-width: 160px; max-width: 200px; min-height: var(--alto-control); }
.barra-filtros .bf-periodo { display: grid; grid-template-columns: repeat(3, auto); align-items: end; gap: 0 var(--esp-2); }
.barra-filtros .bf-periodo .bf-rotulo { grid-column: 1 / -1; }
.barra-filtros .bf-periodo input[type="date"][hidden] { display: none; }
.barra-filtros .bf-segmentos { flex-wrap: nowrap; }
.barra-filtros .bf-segmentos button { min-height: var(--alto-control); white-space: nowrap; }
.barra-filtros .bf-espacio { flex: 1 1 0; margin-left: calc(-1 * var(--esp-3)); }
.barra-filtros .bf-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); }
.barra-filtros .bf-chips { padding: 0; flex: 1 1 auto; }
.barra-filtros .bf-chips:empty, .barra-filtros .bf-paginador:empty, .barra-filtros .bf-conteo:empty { display: none; }
.barra-filtros .bf-paginador .paginador { margin: 0; padding: 0; }
.barra-filtros .bf-conteo { font-size: var(--fs-chica); color: var(--tinta-suave); }
.barra-filtros .bf-aplicar.pendiente { background: var(--alerta-clara); color: var(--alerta); border-color: var(--alerta); }
.bf-tercero { position: relative; }
.bf-panel .bf-panel-cuerpo { display: flex; flex-direction: column; gap: var(--esp-4); }
.esqueleto-tabla { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); }
.esqueleto-fila { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--esp-3); }
.esqueleto-celda { height: 14px; border-radius: var(--radio-pildora); background: linear-gradient(90deg, var(--superficie-3) 0%, var(--superficie-2) 50%, var(--superficie-3) 100%);
  background-size: 200% 100%; animation: esqueleto 1.2s ease-in-out infinite; }
@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto-celda { animation: none; } }
@media (max-width: 700px) {
  .barra-filtros { padding: var(--esp-2) var(--esp-3); }
  .barra-filtros .bf-fila { gap: var(--esp-2); }
  .barra-filtros .bf-buscar { flex: 1 0 100%; max-width: none; order: -2; }
  .barra-filtros .bf-buscar .bf-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .barra-filtros .bf-caja input[type="search"] { min-height: var(--alto-control-movil); }
  .barra-filtros .bf-mas, .barra-filtros .bf-excel, .barra-filtros .bf-aplicar { flex: 1 1 0; min-width: 0; order: -1; }
  .barra-filtros .bf-mas { white-space: nowrap; min-width: max-content; }
  .barra-filtros .bf-columnas, .barra-filtros .bf-espacio { display: none; }
  .barra-filtros .bf-grupo { flex: 1 0 100%; min-width: 0; }
  .barra-filtros .bf-grupo .bf-rotulo { display: none; }
  .barra-filtros .bf-segmentos { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .barra-filtros .bf-campo { flex: 1 1 calc(50% - var(--esp-2)); }
  .barra-filtros .bf-periodo { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .barra-filtros .bf-periodo .bf-rotulo { flex: 1 0 100%; }
  .barra-filtros .bf-campo select { min-width: 0; max-width: none; width: 100%; }
  .barra-filtros .bf-campo > .bf-rotulo, .barra-filtros .bf-campo > label.bf-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .barra-filtros .bf-paginador { flex: 1 0 100%; }
  .barra-filtros .bf-paginador .paginador { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
  .barra-filtros .bf-paginador .paginador-rango { flex: 1 1 auto; order: 0; }
  .barra-filtros .bf-paginador .paginador-excel { flex: 0 0 auto; width: auto; order: 1; }
  .barra-filtros .bf-paginador .paginador-tamano { flex: 1 0 100%; justify-content: flex-start; order: 2; }
  .barra-filtros .bf-paginador .paginador-botones { flex: 1 0 100%; order: 3; }
  .barra-filtros.bf-pocos .bf-buscar { flex: 1 1 52%; min-width: 0; }
  .barra-filtros.bf-pocos .bf-campo { flex: 1 1 36%; }
  .bf-panel.panel-filtros { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-radius: var(--hoja-radio) var(--hoja-radio) 0 0;
    padding-bottom: calc(var(--esp-4) + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(13, 39, 66, .22); }
  .bf-panel .pie { position: sticky; bottom: 0; background: var(--superficie); padding-top: var(--esp-3); }
  .bf-panel .pie .accion { flex: 1 1 0; min-height: var(--alto-control-movil); }
}
/* UXF-a (fin) */
/* NOMX-b (inicio) calendario de días de las vacaciones y «Mostrar Cálculo»: un dato calculado va en .dato-calculado (no se oculta con la ayuda apagada) */
.dato-calculado { color: var(--tinta); margin: 4px 0 0; }
.calendario-caja { margin: 6px 0; }
.calendario-vacaciones-bloque { margin: 4px 0 8px; }
.calendario-vacaciones { width: auto; border-collapse: collapse; margin: 6px 14px 6px 0; display: inline-table; vertical-align: top; }
.calendario-vacaciones caption { caption-side: top; text-align: left; font-weight: bold; padding: 2px 0 4px; }
.calendario-vacaciones th { width: 34px; padding: 4px 0; text-align: center; background: transparent; border-bottom: 1px solid var(--borde); }
.calendario-vacaciones td { width: 34px; height: 30px; padding: 0; text-align: center; border: 0; line-height: 30px; }
.calendario-vacaciones tbody tr:hover { background: transparent; }
.calendario-vacaciones td.dia-habil { background: var(--marca-clara); color: var(--marca); font-weight: bold; border-radius: 4px; }
.calendario-vacaciones td.dia-sabado, .calendario-vacaciones td.dia-domingo { color: var(--tinta-suave); }
.calendario-vacaciones td.dia-festivo { color: var(--tinta-suave); text-decoration: underline dotted; font-style: italic; cursor: help; }
.calendario-vacaciones td.fuera { visibility: hidden; }
.leyenda-calendario { color: var(--tinta-suave); font-size: var(--fs-chica); margin: 6px 0 0; }
.leyenda-calendario .muestra-dia { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--borde); border-radius: 3px; }
.leyenda-calendario .muestra-dia.dia-habil { background: var(--marca-clara); border-color: var(--marca); }
.leyenda-calendario .muestra-dia.dia-festivo { border: 1px dotted var(--tinta-suave); }
.tabla-calculo-vacaciones { margin-top: 8px; }
@media (max-width: 600px) {
  .calendario-vacaciones { display: table; width: 100%; margin-right: 0; }
  .calendario-vacaciones th, .calendario-vacaciones td { width: auto; }
}
/* NOMX-b (fin) */
/* VPAL (inicio) «Mostrar Cálculo» en palabras: un párrafo por paso; el texto se parte en el ancho de la ventana (celular de 390 px) y el resultado va destacado */
.explicacion-vacaciones { margin: 0 0 var(--esp-3); }
.explicacion-vacaciones h4 { margin: 0 0 var(--esp-2); }
.explicacion-vacaciones p.dato-calculado { margin: 0 0 var(--esp-2); line-height: 1.5; max-width: 80ch; overflow-wrap: anywhere; }
.explicacion-vacaciones p.resultado-vacaciones { font-weight: 700; padding-top: var(--esp-2); border-top: 1px solid var(--borde-fuerte); }
/* VPAL (fin) */
/* UXA-d (inicio) */
/* Recibo y egreso: «Ver Dónde Se Contabiliza» queda bajo el destino del dinero y su panel ocupa la columna de la izquierda del pie (sin tarjeta, igual que en compras y ventas). */
.captura-pago #p-ver-donde { margin-top: 8px; }
.captura-pago .donde-contabiliza { margin-top: 12px; }
.captura-pago .donde-contabiliza[hidden] { display: none; }
/* UXA-d (fin) */
/* UXF-d (inicio) */
/* UXF-d: la caja de búsqueda de los árboles (Plan de Cuentas y Centros de Costo) comparte la barra común sin perder su rejilla: buscador y casilla en una fila. Solo tokens. */
.filtros-arbol.barra-filtros { display: grid; gap: var(--esp-2); padding: var(--esp-2) var(--esp-4) var(--esp-3); }
.filtros-arbol.barra-filtros .bf-caja { min-width: 0; }
/* UXF-d: Auditoría lleva más controles a la vista que una lista común: el buscador y las listas se acortan para que «Consultar» quede en la misma fila a 1440 px;
   a 390 px la fecha (desde y hasta) va en una sola fila y Usuario y Módulo lado a lado. */
#barra-auditoria .bf-buscar { flex: 0 1 240px; min-width: 200px; max-width: 280px; }
#barra-auditoria .bf-campo select, #barra-auditoria .bf-campo .combo { min-width: 140px; max-width: 170px; }
@media (max-width: 700px) {
  #barra-auditoria .bf-buscar { flex: 1 0 100%; max-width: none; }
  #barra-auditoria .bf-periodo { flex: 1 0 100%; flex-direction: row; flex-wrap: nowrap; }
  #barra-auditoria .bf-periodo input[type="date"] { flex: 1 1 0; min-width: 0; width: 100%; }
  #barra-auditoria .bf-campo select, #barra-auditoria .bf-campo .combo { min-width: 0; max-width: none; width: 100%; }
}
/* UXF-d: el estado vacío con filtros de las listas del navegador (Diferidos, Plataforma) ocupa el sitio de la tabla. */
.bf-vacio:empty { display: none; }
.bf-vacio .vacio { margin: var(--esp-4); }
/* UXF-d (fin) */
/* ACT-c (inicio) */
/* ACT-c: Activos Fijos (lista, ficha, compra y política de menor cuantía). Solo tokens de letra y de espacio; el celular (390 px) apila la tabla y la ficha va en una columna. */
#lista-activos .tabla-lista td .pildora, .ficha-activo-estado .pildora { white-space: nowrap; }
#lista-activos .tabla-lista td .pildora { margin-left: var(--esp-2); vertical-align: middle; }
#lista-activos .fila-activo td { vertical-align: middle; }
#lista-activos .tabla-ancha { border-top: 1px solid var(--borde); }
.ficha-activo { display: flex; flex-direction: column; gap: var(--esp-3); }
.ficha-activo .panel { margin-bottom: 0; }
.ficha-activo-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.mas-opciones-activo { margin-top: var(--esp-3); border-top: 1px solid var(--borde); padding-top: var(--esp-2); }
.mas-opciones-activo > summary { cursor: pointer; padding: var(--esp-2) 0; font-size: var(--fs-chica); font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
.mas-opciones-activo > .rejilla { padding: var(--esp-2) 0 var(--esp-3); }
#a-aviso-menor.visible, #dc-aviso-menor.visible { margin: var(--esp-3) 0 0; }
.dialogo label.marca + .aviso.alerta { margin-top: var(--esp-2); }
#ac-avisos { margin-bottom: var(--esp-3); }
#lista-activos .chip button { font-size: var(--fs-chica); }
.campo-menor { align-self: end; padding-bottom: var(--esp-2); }
.campo-menor label.marca { margin: 0; }
@media (max-width: 760px) {
  .ficha-activo .datos-comprobante { grid-template-columns: 1fr; }
  #lista-activos .tabla-ancha { overflow-x: visible; }
  .mas-opciones-activo > .rejilla { grid-template-columns: 1fr; }
}
/* ACT-c (fin) */
/* NOMX-c (inicio) editar la liquidación de vacaciones: el estado de los cambios del asistente */
#lv-estado { display: block; margin: 0 0 8px; color: var(--tinta-suave); }
#lv-estado.pendiente-guardar { color: #8a5a00; font-weight: 800; }
/* NOMX-c (fin) */
/* UXF-b (inicio) */
/* UXF-b: las barras de Ventas, Compras y Movimientos llevan dos o tres filtros a la vista, «Más Filtros», Columnas y Excel además del buscador: el buscador empieza más angosto (y crece con lo que sobre) para que todo quepa en una sola fila a 1440 px. */
@media (min-width: 701px) {
  #barra-ventas .bf-buscar, #barra-compras .bf-buscar, #barra-movimientos .bf-buscar { flex: 1 1 200px; }
}
/* UXF-b: en el celular «Descargar Excel» no se parte en dos líneas (la barra gasta menos alto antes de la primera fila). DOCV-a: tampoco se encoge más que su texto (`min-width: max-content`): con el `min-width: 0` de la regla general quedaba de 24 px y el texto se salía del botón. */
@media (max-width: 700px) {
  #barra-ventas .bf-excel, #barra-compras .bf-excel, #barra-movimientos .bf-excel { white-space: nowrap; min-width: max-content; padding-left: var(--esp-2); padding-right: var(--esp-2); }
}
/* UXF-b (fin) */
/* NOMX-e (inicio) visual de novedades: el cargue con tres pasos numerados, la revisión en secciones planas, «Añadir Novedad» con su resumen y los totales sin tarjetas */
.pasos-cargue { align-items: center; }
.pasos-cargue li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pasos-cargue .numero-paso { width: 24px; height: 24px; flex: none; font-size: var(--fs-chica); border-width: 1px; background: var(--superficie); color: var(--tinta-suave); }
.paso-archivo label.accion { margin: 0; cursor: pointer; }
.paso-archivo input.solo-lector:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 2px; }
.paso-archivo .tenue { max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.revision-seccion { margin: 14px 0; }
.revision-seccion h4 { margin: 0 0 6px; }
.revision-seccion .cuenta { margin-left: 6px; color: var(--tinta-suave); font-weight: normal; }
.tabla-revision { width: 100%; }
.encabezado-lista-nve { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 6px; }
.encabezado-lista-nve h4 { margin: 0; }
#nve-estado:empty { display: none; }
.resumen-novedad { margin: 4px 0 0; padding: 8px 12px; background: var(--superficie-2); border-radius: 6px; font-weight: 700; }
.resumen-novedad:empty { display: none; }
.totales-novedades { margin: 12px 0 0; padding: 10px 12px; background: var(--superficie-2); border-radius: 6px; font-weight: 700; }
@media (max-width: 600px) {
  .pasos-cargue li { width: 100%; }
  .pasos-cargue li > .accion { flex: 1 1 0; justify-content: center; }
  .paso-archivo .tenue { flex-basis: 100%; max-width: 100%; }
  .encabezado-lista-nve { flex-wrap: wrap; }
  #nve-pestanas.pestanas-partes { flex-wrap: nowrap; overflow-x: auto; }
  #nve-pestanas.pestanas-partes button { flex: none; white-space: nowrap; }
}
@media (max-width: 640px) {
  .tabla-novedades-ventana.tabla-apilable { display: block; overflow-x: visible; }
  .tabla-novedades-ventana td:first-child, .tabla-novedades-ventana td:nth-child(2) { min-width: 0; }
  .tabla-novedades-ventana tr.total > td { display: block; width: auto; text-align: left; }
  .tabla-novedades-ventana tr.total > td::before { content: none; }
}
@media (max-width: 640px) {
  .tabla-revision td:has(> .sin-dato), .tabla-novedades-ventana td:has(> .sin-dato) { display: none; }
}
/* NOMX-e (fin) */
/* UXF-e (inicio) */
/* UXF-e: sistema de diseño aplicado a las listas de mayor uso (H3, estilo «Sereno»): la lista en una tarjeta blanca, filas de --alto-fila (cómoda 48 px o compacta 36 px por usuario),
   encabezado fijo, acciones secundarias atenuadas, estados sin amontonarse y, en el celular, tarjetas cortas. Solo tokens (ningún tamaño de letra suelto). */
:root { --relleno-celda: var(--esp-1) var(--esp-3); --relleno-celda-compacta: 0 var(--esp-2); --alto-control-compacto: 28px; --sombra-minima: 0 1px 2px rgba(16, 24, 40, .06); }
body.densidad-compacta { --alto-fila: var(--alto-fila-compacta); --relleno-celda: var(--relleno-celda-compacta); }
/* La tarjeta única de la lista: borde de 1 px y sombra mínima; el pie con los totales cierra la tarjeta. */
.lista-panel { border: 1px solid var(--borde); box-shadow: var(--sombra-minima); }
.lista-panel .pie-lista { border-top: 1px solid var(--borde); background: var(--superficie-2); border-radius: 0 0 var(--radio) var(--radio); }
.lista-panel .pie-lista .total-lista { color: var(--marca); font-weight: var(--peso-fuerte); }
.lista-panel .vacio { padding: var(--esp-8) var(--esp-5); }
.chip { border-radius: var(--radio-pildora); }
.chip button { font-size: var(--fs-chica); }
@media (min-width: 761px) {
  .lista-panel .tabla-panel td, .lista-panel .con-encabezado-fijo table td { height: var(--alto-fila); padding: var(--relleno-celda); }
  .lista-panel.lista-estrecha .tabla-panel td { height: var(--alto-fila); }
  .lista-panel .tabla-panel th, .lista-panel .con-encabezado-fijo table th { padding-top: var(--esp-2); padding-bottom: var(--esp-2); padding-left: var(--esp-3); padding-right: var(--esp-3); }
  .lista-panel .tabla-panel tbody tr:hover td, .lista-panel .con-encabezado-fijo tbody tr:hover td { background: var(--superficie-2); }
  #lista-ventas .tabla-panel tbody tr:hover td.acciones-factura { background: var(--superficie-2); }
  .lista-panel .tabla-panel td.acciones-factura, .lista-panel .tabla-panel td.acciones { padding-top: var(--esp-1); padding-bottom: var(--esp-1); }
  body.densidad-compacta .lista-panel .tabla-panel td.acciones-factura button.menuda, body.densidad-compacta .lista-panel .tabla-panel td.acciones button.menuda { min-height: var(--alto-control-compacto); }
  .lista-panel .tabla-panel td.celda-estado .chips-fila { flex-wrap: nowrap; max-width: none; }
}
/* El tipo de transacción cabe en una línea cuando la pantalla da para ello (antes se partía en dos y la fila crecía a 62 px). */
@media (min-width: 1280px) {
  .lista-panel.lista-estrecha .tabla-panel th.col-tipo, .lista-panel.lista-estrecha .tabla-panel td.col-tipo { white-space: nowrap; max-width: none; }
}
@media (min-width: 1024px) {
  .lista-panel .envoltura-tabla.con-encabezado-fijo, .lista-panel .tabla-ancha.con-encabezado-fijo { max-height: calc(100vh - 220px); overflow: auto; }
  .lista-panel .con-encabezado-fijo table thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--borde); }
  .lista-panel .tabla-panel td.acciones-factura > :not(:first-child) { opacity: .55; transition: opacity .12s ease-in-out; }
  .lista-panel .tabla-panel tbody tr:hover td.acciones-factura > *, .lista-panel .tabla-panel tbody tr:focus-within td.acciones-factura > * { opacity: 1; }
}
/* Los formularios de factura y comprobante: más aire entre secciones (sin cambiar ids ni textos). */
.captura-documento { gap: var(--esp-6); }
@media (max-width: 700px) {
  body.densidad-compacta { --alto-fila: var(--alto-control-movil); --relleno-celda: var(--esp-2) var(--esp-3); }
  .dialogo > footer { gap: var(--esp-2); }
}
/* En el celular cada documento de Ventas y de Compras es una tarjeta corta: tipo, número y valor, tercero, fechas, estado y acciones (lo demás, como NIT, forma de pago o moneda, se ve en el documento). */
@media (max-width: 760px) {
  #lista-ventas .tabla-panel tr, #lista-compras .tabla-panel tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-3); row-gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); }
  #lista-ventas .tabla-panel td, #lista-compras .tabla-panel td { grid-column: 1 / -1; padding: 0; min-width: 0; }
  #lista-ventas .tabla-panel td.col-comprobante, #lista-ventas .tabla-panel td.col-nit, #lista-ventas .tabla-panel td.col-forma, #lista-ventas .tabla-panel td.col-moneda,
  #lista-compras .tabla-panel td.col-consecutivo, #lista-compras .tabla-panel td.col-comprobante, #lista-compras .tabla-panel td.col-nit, #lista-compras .tabla-panel td.col-moneda { display: none; }
  #lista-ventas .tabla-panel td.col-tipo, #lista-compras .tabla-panel td.col-tipo { order: 1; grid-column: 1; justify-content: flex-start; color: var(--tinta-suave); text-align: left; }
  #lista-ventas .tabla-panel td.col-tipo::before, #lista-compras .tabla-panel td.col-tipo::before, #lista-ventas .tabla-panel td.col-numero::before, #lista-compras .tabla-panel td.col-factura::before,
  #lista-ventas .tabla-panel td.col-cliente::before, #lista-compras .tabla-panel td.col-proveedor::before, #lista-ventas .tabla-panel td.col-valor::before, #lista-compras .tabla-panel td.col-valor::before,
  #lista-ventas .tabla-panel td.celda-estado::before, #lista-compras .tabla-panel td.celda-estado::before, #lista-ventas .tabla-panel td.col-dian::before, #lista-compras .tabla-panel td.col-dian::before { display: none; }
  #lista-ventas .tabla-panel td.col-numero, #lista-compras .tabla-panel td.col-factura { order: 2; grid-column: 1; justify-content: flex-start; text-align: left; }
  #lista-ventas .tabla-panel td.col-valor, #lista-compras .tabla-panel td.col-valor { order: 2; grid-column: 2; justify-content: flex-end; font-weight: var(--peso-fuerte); }
  #lista-ventas .tabla-panel td.col-cliente, #lista-compras .tabla-panel td.col-proveedor { order: 3; justify-content: flex-start; text-align: left; }
  #lista-ventas .tabla-panel td.col-fecha, #lista-compras .tabla-panel td.col-fecha { order: 4; grid-column: 1; }
  #lista-ventas .tabla-panel td.col-vence, #lista-compras .tabla-panel td.col-vence { order: 4; grid-column: 2; flex-wrap: wrap; row-gap: var(--esp-1); }
  #lista-ventas .tabla-panel td.col-tipo > *, #lista-compras .tabla-panel td.col-tipo > *, #lista-ventas .tabla-panel td.col-numero > *, #lista-compras .tabla-panel td.col-factura > *,
  #lista-ventas .tabla-panel td.col-cliente > *, #lista-compras .tabla-panel td.col-proveedor > *, #lista-ventas .tabla-panel td.celda-estado > *, #lista-compras .tabla-panel td.celda-estado > *,
  #lista-ventas .tabla-panel td.acciones-factura > *, #lista-compras .tabla-panel td.acciones-factura > * { margin-left: 0; }
  #lista-ventas .tabla-panel td.celda-estado, #lista-compras .tabla-panel td.celda-estado { order: 5; justify-content: flex-start; }
  #lista-ventas .tabla-panel td.col-dian, #lista-compras .tabla-panel td.col-dian { order: 1; grid-column: 2; justify-content: flex-end; }
  #lista-ventas .tabla-panel td.acciones-factura, #lista-compras .tabla-panel td.acciones-factura { order: 9; padding-top: var(--esp-2); }
}
/* La ficha del tercero: más aire entre sus secciones. */
.ficha-tercero .panel { margin-bottom: var(--esp-6); }
@media (prefers-reduced-motion: reduce) { .lista-panel .tabla-panel td.acciones-factura > * { transition: none; } }
/* UXF-e (fin) */
/* NOMH (inicio) NOMH-d «Ver Detalle» por secciones: Ingresos y Deducciones lado a lado, Novedades a todo el ancho, Provisiones plegable. Tokens DS01; nada de tarjetas. */
.detalle-desplegado .dd-secciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); }
@media (min-width: 1024px) {
  .detalle-desplegado .dd-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-8); }
  .detalle-desplegado .dd-novedades, .detalle-desplegado .dd-provisiones, .detalle-desplegado .dd-pie { grid-column: 1 / -1; }
}
.dd-seccion > header { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-2); }
.dd-titulo { margin: 0; font-size: var(--fs-chica); font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
.dd-lista { list-style: none; margin: 0; padding: 0; }
.dd-lista > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--esp-4); align-items: center;
  min-height: var(--alto-fila-compacta); padding: var(--esp-1) 0; border-bottom: 1px solid var(--borde); }
.dd-lista-novedades > li { grid-template-columns: minmax(0, 1fr) 8em 9em auto; }
.dd-lista .dd-cantidad { color: var(--tinta-suave); white-space: nowrap; }
.dd-lista .dd-valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-lista .dd-sub { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.dd-lista .dd-acciones { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--esp-2); }
.dd-lista > li.dd-ajena .dd-concepto { color: var(--tinta-suave); }
.dd-lista > li.dd-edicion { display: block; padding: var(--esp-3); background: var(--superficie-2); border-radius: var(--radio-chico); }
.dd-pliegue { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: var(--alto-fila-compacta);
  padding: 0; border: 0; border-bottom: 1px solid var(--borde); background: none; color: inherit; font: inherit; cursor: pointer; }
.dd-otros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-3); color: var(--tinta-suave); }
@media (max-width: 700px) {
  .dd-lista-novedades > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--esp-1); }
  .dd-lista-novedades .dd-cantidad { grid-column: 1; grid-row: 2; }
  .dd-lista-novedades .dd-valor { grid-column: 2; grid-row: 1; }
  .dd-lista-novedades .dd-acciones { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* NOMH (fin) */

/* CAJB-e (inicio): Caja y Bancos (la antigua Conciliación Bancaria): acciones, cuentas, traslados y conciliación en la misma pantalla. */
.cb-acciones { align-items: center; }
.cb-acciones .cb-escritorio { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.cb-acciones .cb-movil { display: none; }
.barra-panel-cb { display: flex; justify-content: flex-end; padding: 12px 18px 0; }
.revision-extracto { width: 100%; margin-bottom: 10px; }
.resumen-revision { margin: 10px 0; }
.fila-sugerencias > td { background: var(--superficie-2); padding: 8px 12px; }
.fila-edicion input, .fila-edicion select { width: 100%; min-width: 0; }
@media (max-width: 1000px) {
  .cb-conciliacion .panel-extracto-cb { order: -1; }      /* en el celular, primero el extracto (lo que se recorre) y luego el libro */
}
@media (max-width: 600px) {
  .cb-acciones .cb-escritorio { display: none; }
  .cb-acciones .cb-movil { display: block; }
  .cb-acciones > .accion, .cb-acciones > .desplegable { flex: 1 1 calc(50% - 10px); }
  .cb-acciones .desplegable > .accion { width: 100%; }
  .cb-conciliacion .panel table { width: 100%; }
}
/* CAJB-e (fin) */
/* CAJB-fix (inicio): las sugerencias de una partida caben en su columna (sin desplazamiento horizontal) y el pie de «Partidas Sin Identificar» cabe en el celular. */
@media (min-width: 641px) {
  .fila-sugerencias > td { max-width: 0; width: 100%; overflow: hidden; }      /* la fila de sugerencias no ensancha la tabla del extracto: manda el ancho de la columna (en el celular las filas son bloques y ya miden el ancho) */
  /* Una línea por sugerencia (fecha, comprobante, tercero, valor, «Cruzar») y debajo los motivos; si la columna es angosta, el tercero y «Cruzar» bajan. */
  .fila-sugerencias .tabla-sugerencias, .fila-sugerencias .tabla-sugerencias tbody { display: block; width: 100%; max-width: 100%; }
  .fila-sugerencias .tabla-sugerencias thead { display: none; }
  .fila-sugerencias .tabla-sugerencias tr.fila-sug-cb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
  .fila-sugerencias .tabla-sugerencias tr.fila-sug-cb:last-child { border-bottom: 0; }
  .fila-sugerencias .tabla-sugerencias td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .fila-sugerencias .tabla-sugerencias td.fecha { flex: 0 0 88px; }
  .fila-sugerencias .tabla-sugerencias td.codigo { flex: 0 0 76px; }
  .fila-sugerencias .tabla-sugerencias td:nth-child(3) { flex: 1 1 120px; }
  .fila-sugerencias .tabla-sugerencias td.cifra { flex: 0 0 116px; text-align: right; }
  .fila-sugerencias .tabla-sugerencias td.acciones { flex: 0 0 auto; width: auto; margin-left: auto; order: 1; }
  .fila-sugerencias .tabla-sugerencias td:nth-child(5) { flex: 1 0 100%; order: 2; }
}
@media (max-width: 600px) {
  /* Pie con los botones apilados a todo el ancho: el principal arriba (el DOM trae «Omitir» primero), sin texto cortado. */
  .dialogo:has(.tabla-sin-regla) > footer { flex-direction: column-reverse; align-items: stretch; flex-wrap: nowrap; padding: 12px 16px; }
  .dialogo:has(.tabla-sin-regla) > footer > button.accion { width: 100%; min-width: 0; min-height: 44px; white-space: normal; line-height: 1.25; }
}
/* CAJB-fix (fin) */
/* AUDI (inicio) */
.captura-documento #tabla-conceptos .combo-entrada.solo-codigo { font-variant-numeric: tabular-nums; }
.captura-documento .cuenta-documento { display: grid; gap: 8px; margin-top: 10px; }
.captura-documento .cuenta-documento[hidden] { display: none; }
.captura-documento .fila-campo > .rotulo { margin: 0; font-size: var(--fs-chica); color: var(--tinta-suave); }
.cuenta-doc-valor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cuenta-doc-valor > #f-cuenta-doc-valor { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.cuenta-doc-valor > select, .cuenta-doc-valor > .combo { flex: 1 1 240px; min-width: 0; }
.cuenta-documento #f-cuenta-doc-aviso .aviso { margin: 0; }
.tabla-formas-pago .secundario { display: block; color: var(--tinta-suave); font-size: var(--fs-chica); }
.tabla-formas-pago td.acciones { white-space: nowrap; }
.formulario-forma-pago { display: grid; gap: 12px; }
.formulario-forma-pago [hidden] { display: none; }
.formulario-forma-pago .fp-uso { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 0; padding: 0; margin: 0; }
.formulario-forma-pago .fp-uso legend { padding: 0; margin-bottom: 4px; font-size: var(--fs-chica); color: var(--tinta-suave); }
@media (max-width: 600px) {
  .tabla-formas-pago td.acciones { white-space: normal; }
  .cuenta-doc-valor > .accion { flex: 1 1 100%; }
}
/* M1/M3: la lista única de forma de pago y el tercero como enlace */
.pie-documento .radios[hidden] { display: none; }
.captura-documento #f-forma-empresa.invalido { outline: 2px solid var(--error); outline-offset: 2px; border-radius: var(--radio); }
.tercero-enlace { margin-top: 4px; min-width: 0; }
.tercero-enlace[hidden] { display: none; }
.tercero-enlace .enlace { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
/* AUDI (fin) */

/* NOMK-d (inicio): una fila de «Ver Detalle» con valor que se puede cargar a mano (salud, pensión, auxilio): cuarta columna para «Editar» y, en el celular, el valor arriba y la acción abajo. */
.dd-lista > li[data-ajuste-fila] { grid-template-columns: minmax(0, 1fr) 6em 9em auto; }
.dd-lista .edicion-ajuste .barra-edicion-ficha { margin-top: var(--esp-3); }
@media (max-width: 700px) {
  .dd-lista > li[data-ajuste-fila] { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--esp-1); }
  .dd-lista > li[data-ajuste-fila] .dd-cantidad { grid-column: 1; grid-row: 2; }
  .dd-lista > li[data-ajuste-fila] .dd-valor { grid-column: 2; grid-row: 1; }
  .dd-lista > li[data-ajuste-fila] .dd-acciones { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* NOMK-d (fin) */
/* NOMK (inicio) */
/* NOMK-a: «Editar» solo donde hay algo que cambiar; lo fijado por la ley lo dice */
.marca-solo-consulta { margin: 0 0 var(--esp-3); color: var(--tinta-suave); font-size: var(--fs-chica); }
.valor-auxilio { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); }
.campo .nombre-de-ley { display: block; margin-top: var(--esp-1); }
/* NOMK-c: el globo de ayuda de todo «?» (clic, Enter o toque); a menos de 700 px, una hoja inferior a todo el ancho */
.globo-ayuda { position: absolute; z-index: 60; max-width: 26rem; padding: var(--esp-4); padding-right: var(--esp-8); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); font-size: var(--fs-chica); line-height: var(--ai-texto); color: var(--tinta); }
.globo-ayuda h4 { margin: 0 0 var(--esp-2); font-size: var(--fs-base); }
.globo-ayuda p { margin: 0 0 var(--esp-2); }
.globo-ayuda .ejemplo ul { margin: var(--esp-1) 0 var(--esp-2); padding-left: var(--esp-5); }
.globo-ayuda .ejemplo li { font-variant-numeric: tabular-nums; }
.globo-ayuda .norma { color: var(--tinta-suave); margin-bottom: 0; }
.globo-ayuda .cerrar-globo { position: absolute; top: var(--esp-2); right: var(--esp-2); width: var(--alto-control-chico); height: var(--alto-control-chico); padding: 0; border: 0; border-radius: var(--radio-control); background: transparent; color: var(--tinta-suave); font-size: var(--fs-seccion); line-height: 1; cursor: pointer; }
.globo-ayuda .cerrar-globo:hover { background: var(--fondo); }
.globo-ayuda .cerrar-globo:focus-visible { outline: none; box-shadow: var(--foco); }
@media (max-width: 700px) {
  .globo-ayuda { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; max-width: none; border-radius: var(--radio) var(--radio) 0 0; max-height: 70vh; overflow-y: auto; }
}
/* NOMK (fin) */
/* NOMA (inicio) */
/* «Configurar Nómina» (opción A que eligió el dueño el 15/10/2026): una página, dos columnas; la casilla cambiada se marca en turquesa; lo que fija la ley va en gris con su origen. */
.noma-estado { font-size: var(--fs-chica); color: var(--acento-texto); font-weight: var(--peso-fuerte); }
.noma-estado[hidden] { display: none; }
.noma-intro { margin: 14px 0 4px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.noma-intro b { color: var(--tinta); }
.noma-columnas { column-count: 2; column-gap: 20px; margin-top: 12px; }
.noma-sec { break-inside: avoid; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px 6px; margin: 0 0 20px; box-shadow: var(--sombra); }
.noma-sec h3 { margin: 0 0 6px; font-size: var(--fs-seccion); color: var(--marca); display: flex; align-items: center; gap: 8px; }
.noma-fila { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--borde); }
.noma-fila:first-of-type { border-top: 0; }
.noma-fila > label, .noma-fila > .rotulo { font-size: var(--fs-chica); color: var(--tinta-suave); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.noma-fila.cambiado { background: var(--marca-clara); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; border-top-color: transparent; box-shadow: inset 3px 0 0 var(--acento); }
.noma-fila.cambiado + .noma-fila { border-top-color: transparent; }
.noma-fila .valor { font-weight: var(--peso-fuerte); }
.noma input.corto { max-width: 110px; text-align: right; }
.noma-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.noma-seg button { border: 1px solid var(--borde-control); background: var(--superficie); color: var(--tinta); border-radius: var(--radio-control); padding: 7px 12px; font-size: var(--fs-chica); min-height: 36px; display: inline-flex; align-items: center; cursor: pointer; }
.noma-seg button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: var(--peso-fuerte); }
.noma .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--acento-texto); color: var(--acento-texto); background: var(--superficie); font-size: var(--fs-chica); font-weight: var(--peso-fuerte); flex: none; cursor: pointer; }
.noma .ayuda-signo[aria-expanded="true"] { background: var(--acento-texto); color: #fff; }
.noma-globo { grid-column: 1 / -1; background: var(--saber-claro); border: 1px solid var(--marca-borde); border-radius: 8px; padding: 10px 12px; font-size: var(--fs-chica); color: var(--tinta); }
.noma-globo b { color: var(--acento-texto); display: block; margin-bottom: 2px; }
.noma-globo .cifra { font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte); }
.noma-globo[hidden] { display: none; }
.noma-globo > div + div { margin-top: 4px; }
.noma-sec > .noma-globo { margin: 0 0 8px; }
.noma-globo, .noma-ley dt, .noma-ley dd, .noma-ley .origen, .noma-tabla td { overflow-wrap: anywhere; }
.noma select, .noma input { max-width: 100%; min-width: 0; }
.noma .aviso.alerta { margin: 4px 0 10px; padding: 8px 10px; font-size: var(--fs-chica); }
.noma-ley { margin: 10px 0 12px; padding: 10px 12px; background: var(--superficie-2); border-radius: 8px; }
.noma-ley dl { margin: 0; }
.noma-ley .par { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-chica); color: var(--tinta-tenue); padding: 2px 0; }
.noma-ley dt { min-width: 0; }
.noma-ley dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.noma-ley .origen { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--borde-fuerte); font-style: italic; color: var(--tinta-tenue); font-size: var(--fs-chica); }
.noma-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-chica); margin: 4px 0 10px; }
.noma-tabla th { text-align: left; color: var(--tinta-tenue); font-weight: var(--peso-fuerte); padding: 6px 6px 6px 0; border-bottom: 1px solid var(--borde-fuerte); }
.noma-tabla td { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.noma-tabla td input, .noma-tabla td select { min-height: 36px; }
.noma-tabla th.cifra, .noma-tabla td.cifra { text-align: right; }
.noma-tabla td input.num { text-align: right; max-width: 84px; }
.noma-tabla tr.cambiado td { background: var(--marca-clara); }
.noma-tabla tr.cambiado td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.noma .cod { font-family: Consolas, "Courier New", monospace; font-size: var(--fs-chica); color: var(--tinta-suave); }
@media (max-width: 860px) {
  .noma-columnas { column-count: 1; }
}
@media (max-width: 560px) {
  .noma-sec { padding: 14px 14px 4px; }
  .noma-fila { grid-template-columns: 1fr; gap: 6px; }
  .noma-fila.cambiado { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
  .noma-tabla thead { display: none; }
  .noma-tabla, .noma-tabla tbody, .noma-tabla tr, .noma-tabla td { display: block; width: 100%; }
  .noma-tabla tr { padding: 8px 0; border-bottom: 1px solid var(--borde); }
  .noma-tabla td { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; padding: 3px 0; }
  .noma-tabla td::before { content: attr(data-e); flex: 0 0 40%; font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: 600; text-align: left; }
  .noma-tabla td > * { flex: 1 1 auto; min-width: 0; }
  .noma-tabla td input.num { max-width: none; }
  .noma-tabla tr.cambiado td:first-child { box-shadow: none; }
  #noma-guardar { min-height: var(--alto-control-movil); }
  .noma input.corto { max-width: 140px; }
}
/* NOMA (fin) */
/* VLEYD (inicio) */
/* «Valores de Ley del Año» (opción A que eligió el dueño el 16/10/2026): reutiliza NOMA y agrega lo propio. */
.vley-anios { margin: 6px 0 14px; }
.vley-anios button i { font-style: normal; font-size: var(--fs-chica); opacity: .85; margin-left: 6px; }
.vley-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.vley-columnas.una { grid-template-columns: minmax(0, 720px); }
.vley .noma-sec > h3 .der { margin-left: auto; }
.vley input[type="date"].corto { max-width: 170px; }
.vley-valores td.val { font-weight: var(--peso-fuerte); color: var(--tinta); }
.vley-valores td.val small { display: block; font-weight: 400; color: var(--tinta-tenue); font-size: var(--fs-chica); }
.vley-valores td.vig { color: var(--tinta-suave); }
.vley-valores th.nuevo { color: var(--acento-texto); }
.vley-valores input.num { max-width: 170px; text-align: right; font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.vley-valores .vl-var { display: block; margin-top: 3px; text-align: right; font-size: var(--fs-chica); color: var(--acento-texto); font-weight: var(--peso-fuerte); white-space: nowrap; }
.vley-valores .vl-var.fuera { color: var(--alerta); }
.vley-valores tr.cambiado td { background: transparent; }
.vley-valores tr.cambiado td:first-child { box-shadow: none; }
.vley-valores tr.cambiado td.nv { background: var(--marca-clara); box-shadow: inset 3px 0 0 var(--acento); padding-left: 10px; }
.vley-norma { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.vley-mueven h4 { margin: 0 0 4px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.vley-efecto h3 small { font-size: var(--fs-chica); font-weight: 600; color: var(--tinta-tenue); }
.vley-asi { margin: 6px 0 12px; }
.vley-asi .vley-grande { display: block; font-size: var(--fs-seccion); font-weight: var(--peso-fuerte); color: var(--marca); }
.vley-conteos { display: grid; grid-template-columns: minmax(0, 1fr) auto; font-size: var(--fs-chica); margin: 4px 0 8px; }
.vley-conteos > div { padding: 6px 0; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.vley-conteos > div:nth-child(odd) { color: var(--tinta-suave); }
.vley-conteos > div:nth-child(even) { padding-left: 16px; text-align: right; font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.vley-conteos > div.malo { color: var(--error); }
.vley-pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; padding: 10px 0 8px; }
.vley-enlace-peligro { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-chica); font-weight: var(--peso-fuerte); color: var(--error); text-decoration: underline; cursor: pointer; }
.vley-viejo { opacity: .55; }
.vley-codigo { display: flex; gap: 6px; }
.vley-codigo input { flex: 1 1 0; min-width: 0; max-width: 48px; height: 44px; padding: 0; text-align: center; font-size: var(--fs-seccion); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .vley-columnas, .vley-columnas.una { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .vley-valores td.val { justify-content: flex-start; text-align: left; }
  .vley-valores td.val::before { display: none; }
  .vley-valores tr.cambiado { background: var(--marca-clara); border-radius: 8px; padding: 8px; box-shadow: inset 3px 0 0 var(--acento); }
  .vley-valores tr.cambiado td.nv { box-shadow: none; background: transparent; padding-left: 0; }
  .vley-valores input.num { max-width: none; }
  .vley-norma { grid-template-columns: minmax(0, 1fr); }
  .vley-pie > * { flex: 1 1 100%; }
  #vley-guardar { min-height: var(--alto-control-movil); }
}
/* VLEYD (fin) */
/* PARAMN-c (inicio) */
/* «Topes y Porcentajes de Ley» dentro de «Valores de Ley del Año» (dibujo A que eligió el dueño el 16/10/2026): reutiliza NOMA y VLEYD (casilla cambiada en turquesa, tabla que en el celular pasa a tarjetas). */
.vley-normativos-sec > h3 { flex-wrap: wrap; }
.vley-normativos-sec > h3 small { font-size: var(--fs-chica); font-weight: 600; color: var(--tinta-tenue); }
.vley-normativos-sec .chip { font-size: var(--fs-chica); font-weight: var(--peso-fuerte); border-radius: 999px; padding: 2px 10px; background: var(--marca-clara); color: var(--acento-texto); border: 1px solid var(--marca-borde); }
.vley-normativos-sec .chip.ambar { background: var(--alerta-clara); color: var(--alerta); border-color: #f0d9a8; }
.vley-normativos-sec .chip[hidden] { display: none; }
.vley-nota-pesos { font-size: var(--fs-chica); color: var(--tinta-tenue); margin: 0 0 6px; }
.vley-normativos td.par { width: 42%; padding-right: 12px; vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.vley-normativos td.vig { width: 22%; padding-right: 12px; vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.vley-normativos td.nv { width: 36%; vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.vley-normativos .nom { display: block; font-weight: 600; color: var(--tinta); }
.vley-normativos .nom .ayuda-signo { margin-left: 4px; vertical-align: middle; }
.vley-normativos .pre { display: block; margin-top: 2px; font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: 400; }
.vley-normativos td.vig b { font-variant-numeric: tabular-nums; }
.vley-normativos td.vig small { display: block; font-weight: 400; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.vley-normativos td.vig .pildora { margin: 4px 0 0; }
.vley-normativos .lista { font-weight: 400; display: flex; flex-direction: column; gap: 1px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.vley-normativos .lista[hidden] { display: none; }
.vley-normativos .ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.vley-normativos .caja { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 210px; }
.vley-normativos .caja input { text-align: right; font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; min-width: 0; }
.vley-normativos .caja .u { font-size: var(--fs-chica); color: var(--tinta-suave); min-width: 44px; }
.vley-normativos .eq { font-size: var(--fs-chica); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.vley-normativos .eq:empty { display: none; }
.vley-normativos .difiere { font-size: var(--fs-chica); background: var(--alerta-clara); color: var(--alerta); border-radius: 8px; padding: 3px 8px; text-align: right; }
.vley-normativos .difiere[hidden], .vley-normativos .enlace-t[hidden], .vley-normativos tr.motivo[hidden] { display: none; }
.vley-normativos .enlace-t { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-chica); font-weight: var(--peso-fuerte); color: var(--acento-texto); text-decoration: underline; cursor: pointer; }
.vley-normativos tr.grupo td { border-bottom: 0; padding: 14px 0 2px; }
.vley-normativos tr.grupo h4 { margin: 0; font-size: 16px; color: var(--marca); display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--marca-borde); padding-bottom: 4px; }
.vley-normativos tr.grupo h4 small { font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: 600; }
.vley-normativos tr.activa td { background: var(--marca-clara); }
.vley-normativos tr.activa td.par { box-shadow: inset 3px 0 0 var(--acento); padding-left: 10px; }
.vley-normativos tr.activa:not(.motivo) td { border-bottom-color: transparent; }
.vley-normativos tr.motivo td { padding: 0 12px 10px; border-bottom: 1px solid var(--borde); display: table-cell; }
.vley-normativos tr.motivo.activa td { box-shadow: inset 3px 0 0 var(--acento); }
.vley-normativos tr.motivo label { display: block; font-size: var(--fs-chica); color: var(--tinta-suave); font-weight: 600; margin: 0 0 4px; }
.vley-normativos tr.motivo input { width: 100%; }
.vley-n-error { color: var(--error); font-size: var(--fs-chica); font-weight: 600; margin-top: 4px; }
.vley-n-error:empty { display: none; }
.vley-sub { margin: 14px 0 2px; font-size: var(--fs-chica); color: var(--tinta-suave); }
.vley-cambios-n td, .vley-cambios-n th { white-space: normal; }
.vley-t-nota { font-size: var(--fs-chica); color: var(--tinta-suave); margin: 0 0 10px; }
.vley-t-editor { max-height: 60vh; overflow: auto; }
.vley-t-grupo { margin: 10px 0 4px; }
.vley-t-grupo > strong { display: block; font-size: var(--fs-chica); color: var(--marca); margin-bottom: 4px; }
.vley-t-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.vley-t-fijo { color: var(--tinta-suave); font-size: var(--fs-chica); }
.vley-t-editor input.num { max-width: 90px; text-align: right; }
@media (max-width: 1000px) {
  .vley-normativos td.par, .vley-normativos td.vig, .vley-normativos td.nv { width: auto; }
}
@media (max-width: 560px) {
  .vley-normativos td.par, .vley-normativos td.vig, .vley-normativos td.nv { width: 100%; padding-top: 3px; padding-bottom: 3px; }
  .vley-normativos td.par { display: block; text-align: left; }
  .vley-normativos td.par::before { display: none; }
  .vley-normativos .nom { font-size: 16px; font-weight: 700; }
  .vley-normativos td.vig { padding-right: 0; flex-wrap: nowrap; }
  .vley-normativos td.vig::before { flex: 0 0 28%; }
  .vley-normativos td.vig > * { flex: 0 0 auto; }
  .vley-normativos td.vig > b, .vley-normativos td.vig > .lista { margin-left: auto; text-align: right; }
  .vley-normativos td.vig small, .vley-normativos td.vig .pildora { margin-left: 10px; text-align: right; }
  .vley-normativos td.nv { padding-right: 0; align-items: flex-start; }
  .vley-normativos td.nv::before { flex: 0 0 28%; padding-top: 8px; }
  .vley-normativos .ctl { align-items: flex-end; flex: 1 1 auto; }
  .vley-normativos .caja { max-width: none; }
  .vley-normativos tr.grupo, .vley-normativos tr.grupo td { padding: 0; }
  .vley-normativos tr.grupo { border-bottom: 0; padding-top: 10px; }
  .vley-normativos tr.grupo td::before { display: none; }
  .vley-normativos tr.activa:not(.motivo) { background: var(--marca-clara); border-radius: 8px 8px 0 0; padding: 8px 8px 4px; box-shadow: inset 3px 0 0 var(--acento); border-bottom: 0; }
  .vley-normativos tr.activa td, .vley-normativos tr.activa td.par { background: transparent; box-shadow: none; padding-left: 0; }
  .vley-normativos tr.motivo { padding: 0 8px 8px; border-radius: 0 0 8px 8px; }
  .vley-normativos tr.motivo.activa { background: var(--marca-clara); box-shadow: inset 3px 0 0 var(--acento); }
  .vley-normativos tr.motivo td { display: block; padding: 0; }
  .vley-normativos tr.motivo td::before { display: none; }
  .vley-normativos tr.motivo.activa td { background: transparent; box-shadow: none; }
  .vley-normativos .difiere { text-align: right; }
  .vley-t-editor input.num { max-width: 70px; }
}
/* PARAMN-c (fin) */
/* EXOG (inicio) */
/* «Cuantías Mínimas» de la exógena (pestaña de Parametrización Exógena): reutiliza NOMA (casilla cambiada en turquesa, «Así queda», tabla que en el celular pasa a tarjetas). */
.xc-sec { margin-top: 12px; }
.xc-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 10px; }
.xc-barra .espaciador { flex: 1 1 auto; }
.xc-tabla td.val strong { color: var(--tinta); }
.xc-tabla td.val small, .xc-tabla td.cifra small { display: block; margin-top: 2px; font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: 400; }
.xc-tabla td.cifra { text-align: right; }
.xc-tabla .xc-valor { font-variant-numeric: tabular-nums; }
.xc-tabla .xc-valor.personalizada { font-weight: var(--peso-fuerte); color: var(--acento-texto); }
.xc-tabla .xc-pesos { font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte); }
.xc-tabla input.xc-uvt { max-width: 110px; text-align: right; font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.xc-tabla small.xc-aviso { color: var(--alerta); font-weight: var(--peso-fuerte); overflow-wrap: anywhere; }
.xc-tabla small.xc-aviso:empty { display: none; }
.xc-tabla td.acc { text-align: right; }
@media (max-width: 560px) {
  .xc-tabla td.acc::before { display: none; }
  .xc-tabla td.acc { justify-content: flex-end; }
  .xc-tabla td.cifra > div { text-align: right; }
  .xc-tabla input.xc-uvt { max-width: 140px; }
  .xc-barra > button { flex: 1 1 auto; }
  #xc-guardar { min-height: var(--alto-control-movil); }
}
/* EXOG (fin) */
/* EXOGD (inicio) */
/* «Cuantías Exógena» de la consola de Plataforma y los botones de la empresa ante una cuantía oficial nueva: reutiliza NOMA y VLEYD (selector de año, dos columnas, efecto, código de 6 casillas). */
.xcp-tabla input.num { max-width: 110px; }
.xcp-tabla input.xcp-art { display: block; margin-top: 4px; max-width: 220px; font-size: var(--fs-chica); }
.xcp-tabla td small { display: block; color: var(--tinta-tenue); font-size: var(--fs-chica); font-weight: 400; }
.xc-tabla td.acc button + button { margin-left: 6px; }
.xcp .noma-sec > h3 .der { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) {
  .xcp-tabla input.num, .xcp-tabla input.xcp-art { max-width: none; }
  .xc-tabla td.acc { flex-wrap: wrap; gap: 6px; }
  .xc-tabla td.acc button + button { margin-left: 0; }
}
/* EXOGD (fin) */
/* VFIX (inicio) */
/* Correcciones de la verificación visual de la versión 18 en Chrome real (defectos D1 a D10, 17/10/2026). Van al final y pisan lo anterior sin tocar los bloques ajenos. */
/* D1: el aviso de la cuantía de la empresa (xc-aviso) heredaba el `nowrap` de `.cifra` y ensanchaba toda la tabla: ahora parte líneas dentro de un ancho razonable. */
.xc-tabla small.xc-aviso { white-space: normal; max-width: 34ch; margin-left: auto; text-align: right; }
.xc-tabla td.cifra > div { min-width: 0; }
/* D3: «Topes y Porcentajes de Ley» y «Se Mueven Solos» ocupan TODO el ancho debajo de las dos columnas; el nombre del parámetro y su «Predefinida…» tienen sitio para leerse. */
.vley-ancho { margin-top: 4px; }
.vley-normativos.lectura td.par { width: 60%; }
.vley-normativos.lectura td.vig { width: 40%; }
.vley-normativos.edicion td.par { width: 44%; }
.vley-normativos.edicion td.vig { width: 22%; }
.vley-normativos.edicion td.nv { width: 34%; }
.vley-normativos tr.plegada { display: none !important; }
.vley-g-cab { display: flex; align-items: baseline; gap: 12px; }
.vley-g-cab h4 { flex: 1 1 auto; min-width: 0; }
.vley-g-btn { flex: none; margin-left: auto; }
.vley-n-todos { margin: 0 0 6px; text-align: right; }
.vley-n-todos .enlace-t { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-chica); font-weight: var(--peso-fuerte); color: var(--acento-texto); text-decoration: underline; cursor: pointer; }
.vley-normativos .caja .u { flex: none; white-space: nowrap; }
/* D5: las tablas de ley en lectura, con encabezados de columna (sin tablas anidadas: cuadrícula de dos a cuatro columnas). */
.vley-mini { display: block; text-align: left; white-space: normal; font-weight: 400; font-size: var(--fs-chica); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.vley-mini .vm-fila { display: grid; gap: 2px 12px; padding: 2px 0; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.vley-mini .vm-cab { color: var(--tinta-tenue); font-weight: 600; }
.vley-mini.c1 .vm-fila { grid-template-columns: minmax(0, 1fr); }
.vley-mini.c2 .vm-fila { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.vley-mini.c3 .vm-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.vley-mini.c4 .vm-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vley-mini .vm-fila > span:not(:first-child) { text-align: right; }
.vley-mini .vm-mas > summary { cursor: pointer; padding: 3px 0; color: var(--acento-texto); font-weight: 600; }
/* D4: la casilla del salario mínimo se cortaba («1.750.90…»): el tope de 84 px de NOMA pisaba al de Valores de Ley (170 px). */
.noma-tabla.vley-valores td input.num { max-width: 170px; }
.noma-tabla.xcp-tabla td input.num { max-width: 110px; }
.vley-normativos .caja input.num { flex: 1 1 auto; min-width: 0; max-width: none; }
/* D8: en «Efecto en Todas las Empresas» la nota de cada cifra (versión, «igual a la nueva») va en su propio renglón. */
.vley-cambios td small { display: block; margin-top: 2px; font-size: var(--fs-chica); color: var(--tinta-tenue); font-weight: 400; white-space: normal; }
.vley-cambios td > div { text-align: right; }
/* D9: «Cuantías Exógena» de Plataforma: el título no se parte, la casilla del artículo y los campos de norma y enlace se leen completos. */
.xcp .noma-sec > h3 { flex-wrap: wrap; }
.xcp-tabla td.nv { min-width: 280px; }
.xcp-tabla input.xcp-art { max-width: none; width: 100%; }
.xcp .vley-norma { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1001px) {
  .xcp .vley-columnas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .xcp .vley-columnas.una { grid-template-columns: minmax(0, 1000px); }
}
/* D10: el aviso de salario al guardar un empleado es un aviso (ámbar), no un error (rojo). */
#brindis.aviso { background: var(--alerta-clara); color: var(--alerta); border: 1px solid #f0dcad; max-width: 520px; }
#ficha-avisos:empty { display: none; }
@media (max-width: 560px) {
  .noma-tabla.vley-valores td input.num, .noma-tabla.xcp-tabla td input.num, .vley-normativos .caja input.num { max-width: none; }
  .vley-normativos td.vig-tabla { display: block; }
  .vley-normativos td.vig-tabla::before { display: block; margin-bottom: 4px; }
  .vley-mini { width: 100%; }
  .vley-normativos.lectura td.par, .vley-normativos.lectura td.vig, .vley-normativos.edicion td.par, .vley-normativos.edicion td.vig, .vley-normativos.edicion td.nv { width: 100%; }
  .vley-g-btn { min-height: 36px; padding: 0 8px; }
  .xcp-tabla td.val { display: block; }
  .xcp-tabla td.val::before { display: none; }
  .xcp-tabla td.nv { min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; }
  .xcp-tabla td.nv::before { flex: 0 0 auto; }
  .xc-tabla small.xc-aviso { max-width: none; }
  #brindis.aviso { max-width: none; }
}
/* VFIX (fin) */
/* AUD-C (inicio): auditoría Fable C del 21/10/2026, recorrido real en Chrome a 1440 y a 390 px.
   · Listas de Compras y Ventas a 1440: el chip de estado («Guardada · sin Contabilizar», «Pendiente de Cobro») iba en una sola línea y se montaba
     41 px sobre la cifra «Total Facturado» (13 px en Compras). La fila de chips ahora parte y el chip puede ocupar dos líneas dentro de su celda.
   · Productos y Servicios a 390: el código («COMBO-CAFE-AZUCAR», «S-MANTENIMIENTO») salía 67 px fuera de la celda apilada: ahora se parte.
   · Diálogos normales a 390: el texto de los botones del pie («Guardar y Crear Otro») salía 31 px del botón: los botones se reparten en filas de 44 px.
   · Zonas de toque en el celular: los enlaces de las listas (nombre del tercero, mes de la nómina, «Por Conciliar») medían 20 px de alto y
     pasan a 40; las casillas y radios sueltos (13 a 20 px) pasan a 24 px; todos los «?» de ayuda (24 px) ganan un área de toque de 40 px. */
.lista-panel .tabla-panel td.celda-estado .chips-fila { flex-wrap: wrap; row-gap: 3px; }
.lista-panel .tabla-panel td.celda-estado .marca-estado { white-space: normal; text-align: left; line-height: 1.2; }
@media (max-width: 760px) {
  .tabla-param td.col-codigo, #tabla-gastos td.col-codigo, #tabla-conceptos-venta td.col-codigo { white-space: normal; overflow-wrap: anywhere; }
  .dialogo > footer > button.accion { flex: 1 1 auto; min-width: 120px; white-space: normal; }
  button.enlace { min-height: 40px; padding-top: 10px; padding-bottom: 10px; }
  input[type="checkbox"], input[type="radio"], label.marca input[type="checkbox"], .captura-documento .casilla input[type="checkbox"],
  .tabla-traer .traer-marca input[type="checkbox"], table.matriz td.celda-rol input[type="checkbox"],
  .prevalida-empleados input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; }
  button.ayuda-signo, button.fe-ayuda { position: relative; }
  button.ayuda-signo::after, button.fe-ayuda::after { content: ""; position: absolute; inset: -8px; }
}
/* AUD-C (fin) */

/* COMP-A (inicio) Importaciones: la línea de etapas con fechas, los filtros de la lista y el campo «Importación» de la factura de compra. */
.etapas-importacion { list-style: none; display: flex; margin: 4px 0 14px; padding: 0; }
.etapas-importacion .paso { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  font-size: var(--fs-chica); color: var(--tinta-suave); }
.etapas-importacion .paso::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--borde); }
.etapas-importacion .paso:first-child::before { display: none; }
.etapas-importacion .paso.hecha::before { background: var(--marca); }
.etapas-importacion .punto { position: relative; z-index: 1; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borde); background: var(--superficie); }
.etapas-importacion .paso.hecha .punto { background: var(--marca); border-color: var(--marca); }
.etapas-importacion .paso.hecha { color: var(--tinta); }
.etapas-importacion .paso.actual .nombre { font-weight: bold; }
.etapas-importacion .dia { color: var(--tinta-suave); }
.filtros-importacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtros-importacion button.filtro { min-height: 40px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--tinta); font: inherit; cursor: pointer; }
.filtros-importacion button.filtro.activa { background: var(--marca-clara); border-color: var(--marca); color: var(--marca-oscura); font-weight: bold; }
.filtros-importacion button.filtro .cuenta { margin-left: 4px; color: var(--tinta-suave); }
.linea-ayuda-importacion .ayuda-signo, .campo-importacion .ayuda-signo { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 24px; height: 24px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--tinta-suave); background: var(--superficie); color: var(--tinta-suave); font: inherit; font-size: var(--fs-chica); line-height: 1; cursor: help; }
.linea-ayuda-importacion .ayuda-signo::after, .campo-importacion .ayuda-signo::after { content: ""; position: absolute; inset: -9px; }      /* 24 px menos el borde de 1 px + 9 px por lado = 40 px de zona de toque */
.campo-importacion .ayuda-signo { margin-top: -4px; margin-bottom: -4px; }      /* el «?» no engorda la línea del rótulo: los campos de la fila quedan a la misma altura */
.importacion-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.importacion-acciones button { min-height: 40px; }
.lista-gastos-importacion { margin: 6px 0 0; padding-left: 18px; }
.nota-importacion { margin: 10px 0 0; color: var(--tinta-suave); }      /* un dato, no una ayuda: no se apaga con «sin ayuda» */
.aviso-importacion { margin: 8px 0 0; color: var(--alerta); font-size: var(--fs-chica); }      /* un aviso del reparto: tampoco se apaga */
.fila-importacion { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--borde); border-radius: 8px; background: var(--superficie-2); }
.fila-importacion[hidden] { display: none; }
.fila-importacion .fila-campo { flex: 1 1 220px; margin: 0; }
@media (max-width: 600px) {
  .etapas-importacion { flex-direction: column; gap: 6px; }
  .etapas-importacion .paso { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
  .etapas-importacion .paso::before { display: none; }
  .etapas-importacion .dia { margin-left: auto; }
  .importacion-acciones { flex-direction: column; }
  .importacion-acciones button { width: 100%; }
  .filtros-importacion #nueva-importacion { width: 100%; margin-left: 0 !important; }
  .rejilla.cuatro.rejilla-movil-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; align-items: end; }      /* «Nueva Importación» cabe en una pantalla: los campos cortos van de a dos */
  .rejilla.cuatro.rejilla-movil-dos > .ancho-movil { grid-column: span 2 !important; }
  .fila-importacion .fila-campo { flex-basis: 100%; }
}
/* COMP-A (fin) */

/* COMP-B (inicio) Reabastecimiento por mínimo y máximo, órdenes de compra en borrador y ficha del producto con sus mínimos por bodega. */
.filtros-minmax { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros-minmax .campo { min-width: 200px; margin: 0; }
.filtros-minmax .marca { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; }
.aviso-minmax { display: block; margin-top: 4px; color: var(--alerta); font-size: var(--fs-chica); }
.sugerido-minmax { font-weight: 700; white-space: nowrap; }
.filtros-minmax .fila-generar { display: flex; align-items: center; gap: 8px; }
.filtros-minmax .ayuda-signo { position: relative; }
.filtros-minmax .ayuda-signo::after { content: ""; position: absolute; inset: -9px; }      /* zona de toque de 40 px */
.barra-acciones > #crear-oc-sugerida { margin-left: auto; align-self: center; }
.tabla-minmax th, .tabla-minmax td { padding-left: 8px; padding-right: 8px; }      /* 14 columnas: con el aire de siempre «Detalle» quedaba fuera de la caja a 1440 px */
.tabla-minmax td.cifra, .tabla-minmax td.fecha, .tabla-minmax td[data-etiqueta="Estado"], .tabla-minmax td[data-etiqueta="Detalle"] { white-space: nowrap; }
.tabla-minmax td[data-etiqueta="Producto"] { min-width: 180px; }
.detalle-minmax-boton { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--marca); font: inherit; cursor: pointer; }
.detalle-minmax-boton::after { content: " ▾"; }
.detalle-minmax-boton[aria-expanded="true"]::after { content: " ▴"; }
table.tabla-minmax .fila-detalle-minmax[hidden] { display: none !important; }
table.tabla-minmax .fila-detalle-minmax > td { padding: 0 8px 12px; }
.detalle-minmax { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; margin: 0; padding: 10px 14px; border: 1px dashed var(--borde); border-radius: 8px; background: var(--superficie-2); text-align: left; }
.detalle-minmax dt { color: var(--tinta-suave); font-size: var(--fs-chica); }
.detalle-minmax dd { margin: 0; }
.grupo-borrador { margin-top: 16px; }
.grupo-borrador .campo { margin-bottom: 10px; }
.ayuda-borrador { color: var(--tinta-suave); font-size: var(--fs-chica); }
#iv-compras table input { min-height: 40px; }
@media (max-width: 640px) {
  .filtros-minmax { flex-direction: column; align-items: stretch; }
  .filtros-minmax .campo { min-width: 0; }
  .filtros-minmax .fila-generar .accion { flex: 1 1 auto; min-height: 44px; }
  .barra-acciones > #crear-oc-sugerida { width: 100%; margin-left: 0; min-height: 44px; }
  /* La tarjeta de cada fila: producto, bodega y estado arriba; las cifras de a tres; lo que se pide y a quién, destacado. */
  table.tabla-minmax tr.fila-minmax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; padding: 14px 4px 6px; border-bottom: 0; }
  table.tabla-minmax tr.fila-minmax > td { display: block; padding: 0 8px; min-height: 0; text-align: left; }
  table.tabla-minmax tr.fila-minmax > td > * { margin-left: 0; }
  table.tabla-minmax tr.fila-minmax > td.cifra { white-space: normal; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Pedido"] .pildora { display: block; width: fit-content; margin-top: 2px; }      /* «29 En Borrador» no cabe en una columna de tres */
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta]::before { float: none; display: block; max-width: none; margin: 0 0 2px; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Producto"] { order: 1; grid-column: 1 / -1; font-size: 1.05em; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Producto"]::before, table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Detalle"]::before { display: none; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Bodega"] { order: 2; grid-column: span 2; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Estado"] { order: 3; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Existencia"] { order: 4; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="En Tránsito"] { order: 5; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Pedido"] { order: 6; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Reservado"] { order: 7; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Disponible"] { order: 8; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Mínimo"] { order: 9; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Máximo"] { order: 10; }
  table.tabla-minmax tr.fila-minmax > td.sugerido-minmax { order: 11; grid-column: span 2; font-size: 1.15em; color: var(--marca); }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Proveedor"] { order: 12; grid-column: span 2; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Llega Aprox."] { order: 13; }
  table.tabla-minmax tr.fila-minmax > td[data-etiqueta="Detalle"] { order: 14; grid-column: 1 / -1; }
  .detalle-minmax-boton { width: 100%; min-height: 44px; border: 1px solid var(--borde); border-radius: 8px; }
  table.tabla-minmax .fila-detalle-minmax { display: block; padding: 0 4px 12px; border-bottom: 1px solid var(--borde); }
  table.tabla-minmax tr.fila-minmax:has(+ .fila-detalle-minmax[hidden]) { border-bottom: 1px solid var(--borde); padding-bottom: 14px; }
  .detalle-minmax { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .grupo-borrador table.renglones, #bor-renglones, #iv-minmax { min-width: 0; table-layout: auto; }      /* `table.renglones` pide 720 px: estas tablas se apilan en tarjetas */
  .grupo-borrador table.renglones td input[type="number"], #bor-renglones td input[type="number"], #iv-minmax td input { width: 55%; min-width: 120px; min-height: 40px; }
  .grupo-borrador table input, #bor-renglones input, #iv-compras table input { min-height: 40px; }
  label:has(> #iv-lotes) { display: flex; align-items: center; gap: 8px; min-height: 40px; }      /* «Maneja Lotes y Vencimientos» de la ficha: casilla de 24 px con su rótulo de 40 px de alto */
}
/* COMP-B (fin) */
/* ACTV-a (inicio) */
/* ACTV-a: «Vender» un activo. El sello «VENDIDO · FV-n», el resultado con su explicación en palabras y el asiento; en el celular (390 px) todo va en una columna. */
.sello-venta { letter-spacing: .04em; }
.resultado-venta { margin-top: var(--esp-3); }
.resultado-venta .explicacion-venta { margin: var(--esp-3) 0 0; line-height: 1.5; overflow-wrap: anywhere; }
#v-resultado .tabla-ancha { margin-top: var(--esp-3); overflow-x: auto; }
@media (max-width: 760px) {
  .rejilla-venta-activo > * { grid-column: auto !important; }
  #v-resultado .datos-comprobante { grid-template-columns: 1fr; }
}
/* ACTV-a (fin) */

/* PF-27OCT (inicio) ------------------------------------------------------------------------------------------------------------------------
   Prueba final del 27/10/2026 (celular a 390 px): toques de 40 px y nombres del arbol del plan.
   - Los signos de ayuda «?» (24 px) y la «×» que quita un chip de filtro (20 px) ganan un area tactil de 40 x 40 px con un pseudoelemento,
     sin cambiar su tamano visual.
   - Las subpestanas (36 px), los botones de opcion compactos (35 px) y las clases del PUC (38 px) suben a 40 px de alto.
   - En el arbol del plan la columna del codigo mide lo que ocupa (indentacion + codigo) y el nombre se queda con el resto: a 390 px pasaba
     de 154 px y cortaba «Propiedades Planta y Equipo» o «Impuestos Gravamenes y Tasas». */
@media (max-width: 480px) {
  .ayuda-signo, .chip button[data-quitar-filtro] { position: relative; }
  .ayuda-signo::after, .chip button[data-quitar-filtro]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
    transform: translate(-50%, -50%); }
  .sub-pestanas button, .botones-opcion.compactos button, .clases-puc button { min-height: 40px; }
  .fila-arbol { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding-left: 12px; padding-right: 12px; }
}
/* PF-27OCT (fin) */
/* LIC-EXO (inicio) «Por Cuenta» de la exógena: un bloque por cuenta; en el celular cada cuenta es una tarjeta con sus parámetros apilados. Solo tokens. */
.xcu-tabla tbody.xcu-cuenta { border-top: 1px solid var(--borde); }
.xcu-tabla td { vertical-align: top; }
.xcu-tabla tr.xcu-fila.cambiada td { background: var(--marca-clara); }
.xcu-tabla tr.xcu-fila.quitada td { color: var(--tinta-tenue); }
.xcu-tabla tr.xcu-acciones-cuenta td { padding-top: 0; }
.xcu-tabla td.acciones { white-space: normal; }
.xcu-tabla td.acciones .accion { margin: 2px 6px 2px 0; }
.xcu-tabla select, .xcu-tabla input[type="search"] { max-width: 100%; min-width: 0; }
.xcu-tercero-caja { position: relative; display: block; min-width: 160px; }
.xcu-sugeridas { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; display: block; max-height: 220px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); box-shadow: var(--sombra-alta); }
.xcu-sugeridas[hidden] { display: none; }
.xcu-sugeridas button { display: block; width: 100%; min-height: var(--alto-control-chico); padding: 8px 10px; border: 0; background: transparent; color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer; }
.xcu-sugeridas button:hover, .xcu-sugeridas button:focus-visible { background: var(--marca-clara); }
.xcu-activa { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.origen-exog { font-size: var(--fs-chica); font-weight: var(--peso-fuerte); }
.origen-exog.origen-predefinida { color: var(--exito-texto); }
.origen-exog.origen-cambiada { color: var(--alerta); }
.origen-exog.origen-propia { color: var(--info); }
@media (max-width: 700px) {
  .xcu-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .xcu-tabla, .xcu-tabla tbody.xcu-cuenta, .xcu-tabla tbody.xcu-cuenta tr, .xcu-tabla tbody.xcu-cuenta td { display: block; width: 100%; box-sizing: border-box; }
  .xcu-tabla tbody.xcu-cuenta { margin-bottom: var(--esp-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
  .xcu-tabla tbody.xcu-cuenta tr + tr { border-top: 1px dashed var(--borde); }
  .xcu-tabla tbody.xcu-cuenta td { padding: 6px 12px; border: 0; }
  .xcu-tabla tbody.xcu-cuenta td.xcu-sin-cuenta { display: none; }
  .xcu-tabla .tabla-ancha td.persona, .xcu-tabla td.persona { position: static; }
  .xcu-tabla td[data-rotulo]:not([data-rotulo=""])::before { content: attr(data-rotulo); display: block; color: var(--tinta-tenue); font-size: var(--fs-chica); font-weight: var(--peso-fuerte); }
  .xcu-tabla td.persona::before { display: none; }
  .xcu-tabla select, .xcu-tabla input[type="search"] { width: 100%; min-height: var(--alto-control-movil); }
  .xcu-tabla .accion { min-height: var(--alto-control-movil); }
  .xcu-tercero-caja { min-width: 0; }
}
/* LIC-EXO (fin) */
/* CIVA (inicio): el panel «Cierre del Período de IVA» del formulario 300: la casilla «Todo el IVA es Descontable», el detalle por tercero y, en el celular, botones de al menos 40 px. */
#cierre-iva .marca-civa { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 6px 0; font-size: var(--fs-base); font-weight: inherit; color: inherit; cursor: pointer; }
#cierre-iva .marca-civa input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: none; }
#cierre-iva details.ver-terceros { margin-top: 10px; }
#cierre-iva details.ver-terceros summary { display: flex; align-items: center; cursor: pointer; font-weight: 600; }
@media (max-width: 1023px) {
  #cierre-iva details.ver-terceros summary { min-height: 40px; }
  #cierre-iva .barra-acciones button { min-height: 40px; }
}
/* CIVA (fin) */

/* LIC (inicio) «Mis Empresas» (capa de pantalla completa: tabla en escritorio y una tarjeta por empresa a 700 px o menos), el uso de la licencia y su formulario. Solo tokens. */
body.con-mis-empresas { overflow: hidden; }
#mis-empresas { position: fixed; inset: 0; z-index: 55; overflow-y: auto; background: var(--fondo); padding: var(--esp-8) var(--esp-4); }
#mis-empresas .me-panel { max-width: 960px; margin: 0 auto; padding: var(--esp-6); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
#mis-empresas .me-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }
#mis-empresas .me-cabeza h2 { margin: 0; font-size: var(--fs-pantalla); line-height: var(--ai-titulo); color: var(--marca); }
#mis-empresas .me-buscar { margin-bottom: var(--esp-4); }
#mis-empresas .me-buscar .bf-caja { position: relative; display: block; }
#mis-empresas .me-buscar .bf-caja svg.icono { position: absolute; left: var(--esp-3); top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); pointer-events: none; }
#mis-empresas .me-buscar .bf-caja input[type="search"] { width: 100%; min-height: var(--alto-control); padding-left: 38px; }
#mis-empresas .tabla-mis-empresas td.persona { position: static; }
#mis-empresas .tarjeta-empresa.actual td { background: var(--marca-clara); }
#mis-empresas .me-ingresar { min-height: var(--alto-control); }
.cifra.atencion, .us-cupo.atencion { color: var(--alerta); font-weight: var(--peso-fuerte); }
.us-cupo { margin-left: var(--esp-3); font-size: var(--fs-chica); color: var(--tinta-suave); }
.lic-forma .lic-ancho { grid-column: 1 / -1; }
.lic-forma { margin-bottom: var(--esp-3); }
.lic-forma .botones-opcion { align-items: stretch; }
.lic-estado-autorizacion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-3); }
.lic-resumen { margin: 0 0 var(--esp-3); }
label.accion.lic-subir { display: inline-flex; align-items: center; cursor: pointer; }
@media (max-width: 700px) {
  #mis-empresas { padding: var(--esp-3); }
  #mis-empresas .me-panel { padding: var(--esp-4); }
  #mis-empresas .me-buscar .bf-caja input[type="search"] { min-height: var(--alto-control-movil); }
  #mis-empresas .tabla-mis-empresas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #mis-empresas .tabla-mis-empresas, #mis-empresas .tabla-mis-empresas tbody { display: block; width: 100%; }
  #mis-empresas .tabla-mis-empresas tr.tarjeta-empresa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); margin-bottom: var(--esp-3);
    padding: var(--esp-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-sizing: border-box; }
  #mis-empresas .tabla-mis-empresas tr.tarjeta-empresa td { display: block; padding: 0; border: 0; background: transparent; }
  #mis-empresas .tabla-mis-empresas td.me-nombre, #mis-empresas .tabla-mis-empresas td.me-nit, #mis-empresas .tabla-mis-empresas td.me-estado, #mis-empresas .tabla-mis-empresas td.me-accion { flex: 1 1 100%; }
  #mis-empresas .tabla-mis-empresas td.me-nombre strong { font-size: var(--fs-base); }
  #mis-empresas .tabla-mis-empresas td.me-nit { color: var(--tinta-suave); font-size: var(--fs-chica); }
  #mis-empresas .tabla-mis-empresas td.me-plan, #mis-empresas .tabla-mis-empresas td.me-licencia { flex: 0 0 auto; color: var(--tinta-suave); font-size: var(--fs-chica); }
  #mis-empresas .tabla-mis-empresas td.me-plan::after { content: " \00b7"; }
  #mis-empresas .tabla-mis-empresas td.me-accion { margin-top: var(--esp-2); }
  #mis-empresas .me-ingresar { width: 100%; min-height: var(--alto-control-movil); }
  #mis-empresas .me-cabeza .accion { min-height: var(--alto-control-movil); }
  .lic-forma .botones-opcion button, .lic-forma input { min-height: var(--alto-control-movil); }
  .lic-forma .botones-opcion button { flex: 1 1 100%; }
  label.accion.lic-subir, #lic-descargar { min-height: var(--alto-control-movil); }
}
/* LIC (fin) */

/* AVISO: los bloques nuevos van ANTES de DOCV-e; DOCV-e y DOCV-m cierran esta hoja (sus pruebas exigen que sean lo ultimo del archivo). */
/* DOCV-e (inicio) ------------------------------------------------------------------------------------------------------------------------
   Visual menos plana (pedido del dueno, 19/10/2026: «todo el fondo blanco», «mejor letra»). Decisiones D-14 y D-15 (RESPUESTAS_DUENO_DOCV_19OCT.md):
   fondo gris turquesa muy suave con tarjetas blancas, encabezados de tabla en gris turquesa claro, filas alternas solo en tablas de datos, sombras
   algo mas marcadas, y la Inter local con titulos en peso 650 y rotulos en 600. Todo con tokens; sin tarjetas nuevas, sin KPI de adorno, sin CDN.
   Este bloque va al final: el ultimo :root gana (asi lo leen tests/brand01_maro.cjs y tests/test_ds01_estilos.py). --superficie sigue en #ffffff. */
:root {
  --fondo: #eaf0f3;      /* D-14: gris turquesa muy suave; --tinta-tenue 4,72:1 y --borde-control 3,28:1 sobre este fondo */
  --papel: #eaf0f3;
  --superficie-2: #f4f8f9;
  --superficie-3: #eaf1f3;
  --borde: #dde5ea;
  --sombra: 0 1px 2px rgba(13, 39, 66, .07), 0 3px 12px rgba(13, 39, 66, .08);
  --sombra-cabeza: 0 1px 0 var(--borde), 0 4px 12px rgba(13, 39, 66, .05);
  --encabezado-tabla: #e4edf0;   /* gris turquesa claro del encabezado de tabla; --tinta-suave sobre el da mas de 6:1 */
  --fila-alterna: #f6f9fa;       /* fila par de las tablas de datos; el hover usa --marca-clara */
  --peso-titulo: 650; --peso-rotulo: 600;
}
body { font-optical-sizing: auto; text-rendering: optimizeLegibility; }
body[data-pantalla="inicio"] { background: var(--fondo); }
th { background: var(--encabezado-tabla); border-bottom: 1px solid var(--borde-fuerte); font-weight: var(--peso-rotulo); }
.panel > h3 { color: var(--marca); font-weight: var(--peso-titulo); }
.cabeza-panel > h3, .dialogo > header h3 { font-weight: var(--peso-titulo); }
label, .dato-doc .rotulo, .tarjeta .etiqueta { font-weight: var(--peso-rotulo); }
.dialogo.completo > header { box-shadow: var(--sombra-cabeza); }
table.asiento tbody tr:nth-child(even), .tabla-ver tbody tr:nth-child(even), table.resultados tbody tr:nth-child(even),
table.tabla-panel tbody tr:nth-child(even) { background: var(--fila-alterna); }
table.asiento tbody tr:hover, .tabla-ver tbody tr:hover, table.resultados tbody tr:hover, table.tabla-panel tbody tr:hover { background: var(--marca-clara); }
@media (max-width: 640px) {
  /* En el celular estas tablas se apilan en tarjetas: la franja alterna no se pinta (cada tarjeta ya lleva su raya divisoria). */
  .tabla-ver, .tabla-apilable { --fila-alterna: transparent; }
}
/* DOCV-e (fin) */
/* DOCV-m (inicio) ------------------------------------------------------------------------------------------------------------------------
   La versión celular (390 px) del lote DOCV, medida en Chrome real (tests/interfaz/captura_docv_movil.py). Todo va dentro de media queries: a 1440 px nada cambia
   (salvo `.cruce-anticipo`, que a 1440 px es solo el agrupador en línea de la pastilla y su «Deshacer»).
   · «?» de los sellos, del resumen, de los formularios y del diálogo de cruce: siguen de 24 px a la vista, pero su zona de toque mide 40 px (pseudo-elemento invisible;
     -9 px porque el botón trae borde de 1 px). Lo mismo con las casillas de las tablas apiladas (facturas por abonar, anticipos, cruce, nota crédito) y con las de una
     etiqueta (Proveedor por Ítem, Caja, Banco), donde la etiqueta entera mide 40 px.
   · Resumen del «Ver» y de los formularios: el detalle de cada impuesto o retención va en su propia línea (en línea se mezclaba con el nombre y con el valor).
   · Sellos: cuando el detalle baja de renglón, el punto medio se queda al final del encabezado y no al principio del renglón siguiente.
   · Listas de Compras y Ventas: «Más» es un botón de 40 px como «Ver» y «Editar»; los enlaces del documento y del tercero miden 40 px; el aviso «Facturación Electrónica» también.
   · Diálogo «Anticipos por Cruzar»: los tres botones se apilan (se montaban unos sobre otros) y la tabla se apila en tarjetas (la fecha se partía a media cifra).
   · Recibo y egreso: la fila de totales de «Facturas Pendientes» con sus rótulos. «Ver»: «Cuentas y Partida Doble» con su aire. Comprobante: el asiento en tarjetas con Débito
     y Crédito a la vista. Pantalla «Anticipos»: cada cruce con su «Deshacer» en el mismo renglón. Hoja de ayuda: «×» de 40 px. */
@media (max-width: 760px) {
  .sello-pago .ayuda-signo, .sello-anticipo .ayuda-signo, .resumen-documento .ayuda-signo, .captura-documento .ayuda-signo, .linea-ayuda-dialogo .ayuda-signo { position: relative; }
  .sello-pago .ayuda-signo::after, .sello-anticipo .ayuda-signo::after, .resumen-documento .ayuda-signo::after, .captura-documento .ayuda-signo::after,
  .linea-ayuda-dialogo .ayuda-signo::after { content: ""; position: absolute; inset: -9px; }
  #tabla-abonos .a-marca, #tabla-anticipos-recibo .x-marca, .tabla-cruce .c-marca, .n-marca { position: relative; width: 20px !important; height: 20px; }
  #tabla-abonos .a-marca::after, #tabla-anticipos-recibo .x-marca::after, .tabla-cruce .c-marca::after, .n-marca::after { content: ""; position: absolute; inset: -10px; }
  .captura-documento .casilla, .captura-pago .opciones-radio label { min-height: 40px; }
  .pie-documento .resumen-documento .detalle { display: block; margin-left: 0; }
  .sello-pago .sello-linea > strong + span::before, .sello-anticipo .sello-linea > strong + span::before { content: none; }
  .sello-pago .sello-linea > strong:has(+ span)::after, .sello-anticipo .sello-linea > strong:has(+ span)::after { content: "·"; margin-left: 6px; }
  #lista-compras .mas-acciones > summary, #lista-ventas .mas-acciones > summary { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 40px;
    padding: 0 14px; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie); color: var(--tinta); font-weight: var(--peso-rotulo); }
  #lista-compras .tabla-panel td .enlace, #lista-ventas .tabla-panel td .enlace, #f-ver-tercero { display: inline-flex; align-items: center; min-height: 40px; }
  .boton-mas { width: 40px; height: 40px; }
  /* El aviso «Facturación Electrónica» de la lista de Ventas: su rótulo de 24 px pegado al borde pasa a una fila de 40 px con aire. */
  #pantalla details.panel > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; font-weight: var(--peso-rotulo); }
  /* «Cuentas y Partida Doble» e «Historial» del «Ver»: las tarjetas apiladas llegaban pegadas al borde del cuadro. */
  .captura-documento details.panel .tabla-ver tr { padding: 10px 14px; }
}
@media (max-width: 640px) {
  .dialogo:has(.tabla-cruce) > footer { flex-direction: column; align-items: stretch; }
  .dialogo:has(.tabla-cruce) > footer > button.accion { flex: none; width: 100%; min-height: var(--alto-control-movil); white-space: normal; line-height: 1.25; }
  .tabla-cruce td:last-child { width: auto; }
  .tabla-cruce td.cifra { text-align: right; }
  /* Facturas por abonar: la fila de totales (Total, Saldo y Abona) en dos columnas con su rótulo; antes iba en una sola línea, con cifras sin rótulo y celdas con raya propia. */
  .captura-pago #tabla-abonos tfoot { display: block; width: 100%; }
  .captura-pago #tabla-abonos tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; width: 100%; box-sizing: border-box; padding: 10px 12px 6px; }
  .captura-pago #tabla-abonos tfoot th[colspan] { grid-column: 1 / -1; width: auto; padding: 0 0 4px; border-top: 0; }
  .captura-pago #tabla-abonos tfoot td { display: flex; flex-direction: column; align-items: flex-start; width: auto; min-width: 0; padding: 2px 0; border-top: 0; text-align: left; }
  .captura-pago #tabla-abonos tfoot td:empty { display: none; }
  .captura-pago #tabla-abonos #total-saldo::before { content: "Saldo"; }
  .captura-pago #tabla-abonos #total-abona::before { content: "Abona"; }
  .captura-pago #tabla-abonos tfoot td::before { float: none; font-size: var(--fs-chica); font-weight: var(--peso-rotulo); color: var(--tinta-suave); }
  /* Asiento del comprobante: cada renglón es una tarjeta con la cuenta, el tercero, el detalle y sus cifras a la vista (Débito y Crédito quedaban fuera de la pantalla, a la derecha de una caja que se desplaza). */
  #asiento-comprobante .tabla-ancha { overflow-x: visible; }
  #asiento-comprobante table.asiento, #asiento-comprobante table.asiento tbody, #asiento-comprobante table.asiento tr { display: block; width: 100%; min-width: 0; }
  #asiento-comprobante table.asiento thead { display: none; }
  #asiento-comprobante table.asiento tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--borde); }
  #asiento-comprobante table.asiento td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  #asiento-comprobante table.asiento td:empty { display: none; }
  #asiento-comprobante table.asiento tr:not(.fila-total) td:nth-child(-n+3) { grid-column: 1 / -1; }
  #asiento-comprobante table.asiento tr:not(.fila-total) td:nth-child(4)::before, #asiento-comprobante table.asiento tr.fila-total td:nth-child(2)::before { content: "Débito"; }
  #asiento-comprobante table.asiento tr:not(.fila-total) td:nth-child(5)::before, #asiento-comprobante table.asiento tr.fila-total td:nth-child(3)::before { content: "Crédito"; }
  #asiento-comprobante table.asiento td:nth-child(n+4)::before, #asiento-comprobante table.asiento tr.fila-total td:nth-child(n+2)::before { display: block; font-size: var(--fs-chica); font-weight: var(--peso-rotulo); color: var(--tinta-suave); }
  #asiento-comprobante table.asiento tr.fila-total td:nth-child(1) { grid-column: 1 / -1; }
  #asiento-comprobante table.asiento .cod { margin-right: 8px; }
  .globo-ayuda .cerrar-globo { width: 40px; height: 40px; }      /* la hoja de ayuda del celular: su «×» de 32 px pasa a 40 */
}
/* Pantalla «Anticipos» (a 1440 y a 390 px): la celda de acciones se parte en renglones (antes iba en una sola línea sin cortar y se salía de la tabla: pastillas cortadas a la
   derecha y el «Estado» apretado en cuatro líneas). Cada cruce, su documento y su «Deshacer», va junto, en su propio renglón. */
td.acciones.acciones-anticipo { width: auto; white-space: normal; text-align: left; }
td.acciones.acciones-anticipo > button { margin: 0 0 6px; }
.cruce-anticipo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: fit-content; max-width: 100%; margin: 0 0 6px; }
@media (max-width: 760px) {
  .cruce-anticipo { display: flex; width: 100%; justify-content: space-between; }
  .boton-icono { min-height: 40px; }
}
/* DOCV-m (fin) */