/* =============================================================================
   MQS — Design System
   Fuente de verdad: 01-Estilos.md (decidido con José el 25-Ago-2026).
   Todo color de la aplicación sale de estos tokens: cero HEX sueltos en vistas.
   Los contrastes entre paréntesis están medidos contra WCAG AA (4.5 para texto
   normal) — si se cambia un token, hay que volver a medirlo.
   ========================================================================== */

:root{
  /* ---- Estructura: el menú (el navy que separa MQS de MQP) ---- */
  --navy:            #081628;
  --navy-hover:      rgba(255,255,255,.07);
  --navy-activo:     rgba(255,255,255,.10);
  --navy-texto:      rgba(255,255,255,.58);  /* ítem inactivo    (6.65) */
  --navy-texto-alto: #FFFFFF;                /* ítem activo     (18.17) */
  --navy-categoria:  rgba(255,255,255,.46);  /* rótulo de grupo  (4.62) */

  /* ---- El dato: azul (muestreado del texto del logo) ---- */
  --azul:            #1D375B;                /*                 (12.00) */
  --azul-hover:      #254570;
  --azul-light:      #EAEFF7;

  /* ---- El acento: naranja (muestreado del isotipo) ---- */
  --naranja:         #E47137;   /* SUPERFICIES: barra activa, ícono +, bordes */
  --naranja-texto:   #B84E19;   /* TEXTO naranja: badges, alertas     (5.07) */
  --naranja-light:   #FDF0E7;

  /* ---- Neutros ---- */
  --tinta:           #0F1923;                /*                 (17.74) */
  --gris-nube:       #F5F7FA;
  --gris-acero:      #63717F;                /*                  (5.00) */
  --borde:           #E2E8F0;                /* bordes Y el color de los ceros */
  --borde-suave:     #F0F2F5;

  /* ---- Estados ---- */
  --verde:           #2E7D32;
  --verde-light:     #E8F5E9;
  --rojo:            #C62828;
  --rojo-light:      #FDE8E8;

  /* ---- Medidas ---- */
  --menu-ancho:      214px;
  --header-alto:     56px;
  --radio-card:      12px;
  --radio-control:   8px;
  --sombra-card:     0 4px 12px rgba(15,25,35,.08);
}

/* ============================ base ====================================== */

*{box-sizing:border-box}

body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px;
  line-height:1.55;
  color:var(--tinta);
  background:var(--gris-nube);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--azul)}

/* Un código contable es una matrícula, no una palabra: en monoespaciada se
   compara de un vistazo. */
.codigo{
  font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  font-size:11.5px;font-weight:500;color:var(--gris-acero);
}

/* Foco visible SIEMPRE: se navega con teclado en pantallas de captura. */
:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================ pantallas de acceso ======================= */
/* Login, cambio de clave y acceso denegado: tarjeta centrada sobre el navy. */

.acceso{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:var(--navy);
}

.acceso-tarjeta{
  width:100%;max-width:392px;
  background:#FFFFFF;
  border-radius:var(--radio-card);
  box-shadow:0 18px 48px rgba(0,0,0,.34);
  padding:32px;
  display:flex;flex-direction:column;gap:20px;
}

.acceso-logo{width:100%;max-width:236px;height:auto;align-self:center}

.acceso-titulo{
  font-size:16px;font-weight:800;color:var(--azul);
  margin:0;letter-spacing:-.01em;text-align:center;
}
.acceso-nota{
  font-size:12.5px;color:var(--gris-acero);
  margin:-14px 0 0;text-align:center;
}

.campo{display:flex;flex-direction:column;gap:6px}
.campo label{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-acero);
}
.campo input{
  font-family:inherit;font-size:13.5px;color:var(--tinta);
  padding:9px 13px;
  border:1px solid var(--borde);
  border-radius:6px;
  background:#FFFFFF;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(29,55,91,.10);
}

.boton{
  font-family:inherit;font-size:13.5px;font-weight:600;
  border:1px solid transparent;border-radius:var(--radio-control);
  padding:10px 16px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .15s ease;
}
.boton-primario{background:var(--azul);color:#FFFFFF}
.boton-primario:hover{background:var(--azul-hover)}
/* Solo en las pantallas de acceso el botón ocupa el ancho de la tarjeta;
   dentro de la app va a su tamaño natural. */
.acceso .boton{width:100%}
/* El "+" de crear es el único naranja dentro de un botón. */
.boton-primario .mas{color:var(--naranja);font-weight:800}
.boton-secundario{background:transparent;border-color:var(--azul);color:var(--azul)}
.boton-secundario:hover{background:var(--azul);color:#FFFFFF}
.boton-peligro{background:transparent;color:var(--rojo)}
.boton-peligro:hover{background:var(--rojo-light)}

/* ---- avisos ---- */
.aviso, .error{
  font-size:12.5px;
  border-radius:6px;
  padding:10px 13px;
  border:1px solid;
}
.aviso{
  background:var(--naranja-light);
  border-color:#F2C9A8;
  color:var(--naranja-texto);
}
.error{
  background:var(--rojo-light);
  border-color:#EFB4B4;
  color:var(--rojo);
}
/* El resumen de validación sin errores no pinta una franja vacía. */
.validation-summary-valid{display:none}
.error ul{margin:0;padding-left:18px}

.acceso-pie{
  font-size:11.5px;color:var(--gris-acero);
  text-align:center;margin:0;
}

/* ============================ layout de la app ========================== */
/* 01-Estilos.md §5. El menú navy es lo que separa MQS de MQP de un vistazo. */

body.app{
  display:grid;
  grid-template-columns:var(--menu-ancho) 1fr;
  min-height:100vh;
}

/* ---- menú lateral ---- */
.menu{
  background:var(--navy);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.menu-marca{padding:18px 16px 14px;display:flex;align-items:center}
.menu-marca img{width:100%;max-width:172px;height:auto}
.menu-nav{display:flex;flex-direction:column;padding:0 8px;gap:1px;flex:1;overflow-y:auto}
.menu-categoria{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-categoria);padding:16px 10px 7px;
}
.menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:7px;
  color:var(--navy-texto);font-weight:500;text-decoration:none;
  border-left:3px solid transparent;
  transition:background .12s ease,color .12s ease;
}
.menu-item:hover{background:var(--navy-hover);color:rgba(255,255,255,.9)}
.menu-item.activo{
  background:var(--navy-activo);
  color:var(--navy-texto-alto);font-weight:700;
  border-left-color:var(--naranja);
  border-radius:0 7px 7px 0;
}
/* Etiqueta del módulo que todavía no está construido (M4, M5…): una matrícula, en mono. */
.menu-item .mod{
  font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.04em;color:var(--navy-categoria);
}
/* Insignia numérica de un ítem (linaje controlado: cuentas del MASTER disponibles). */
.menu-item .conteo{
  min-width:18px;padding:1px 5px;border-radius:9px;text-align:center;
  background:var(--naranja);color:#fff;font-size:10.5px;font-weight:700;line-height:15px;
}
/* Separador de línea entre bloques del menú (José, 2-Sep-2026): la estructura se deduce, sin rótulos. */
.menu-sep{height:1px;background:rgba(255,255,255,.10);margin:8px 6px 6px}
.menu-sep + .menu-categoria{padding-top:4px}
/* Desplegable de un ítem (José, 2-Sep-2026): lo poco usado de Ventas cuelga de Factura electrónica. */
.menu-con-sub{display:flex;align-items:stretch;gap:2px}
.menu-con-sub .menu-item{flex:1;min-width:0}
.menu-desplegar{
  flex:none;width:26px;border:0;background:transparent;color:var(--navy-texto);border-radius:7px;cursor:pointer;
  font-size:12px;line-height:1;display:grid;place-items:center;transition:transform .15s ease,background .12s ease;
}
.menu-desplegar:hover{background:var(--navy-hover);color:#fff}
.menu-con-sub.abierto .menu-desplegar{transform:rotate(180deg)}
.menu-sub{display:flex;flex-direction:column;gap:1px;margin:1px 0 3px}
.menu-sub[hidden]{display:none}   /* el display:flex de la clase le ganaría al atributo hidden (lo cazó la captura, 2-Sep-2026) */
.menu-sub .menu-item{padding:6px 10px 6px 24px;font-size:12.5px}
.menu-con-sub .menu-item > span:first-child{line-height:1.25}   /* «Factura electrónica» + M19 + ▾ parte en dos líneas mientras M19 no exista */
.menu-pie{
  padding:14px 16px;font-size:11px;
  color:var(--navy-categoria);
  border-top:1px solid rgba(255,255,255,.08);
}

/* ---- tarjeta de contexto: dice en qué nivel estás, siempre en el mismo lugar
   (navegación por niveles, 01-Estilos §5) ---- */
.contexto{
  margin:0 8px 4px;padding:11px 12px 12px;border-radius:8px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);
}
.contexto-eyebrow{
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--navy-categoria);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.contexto-nombre{font-size:13.5px;font-weight:700;color:var(--navy-texto-alto);line-height:1.3;text-wrap:balance}
.contexto-sub{font-size:11px;color:var(--navy-texto);margin-top:4px}
.contexto.proveedor{border-left:3px solid var(--naranja)}

/* ---- ↑ subir un nivel (pie del menú) ---- */
.menu-subir{
  display:flex;align-items:center;gap:8px;width:100%;
  border-top:1px solid rgba(255,255,255,.08);
  padding:12px 16px;color:var(--navy-texto);font-size:12px;font-weight:600;
  text-decoration:none;text-align:left;
}
.menu-subir:hover{color:#FFFFFF;background:var(--navy-hover)}
.menu-subir .flecha{font-size:14px;line-height:1;color:var(--naranja)}
.menu-subir small{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-categoria);
}

/* ---- área principal ---- */
.principal{display:flex;flex-direction:column;min-width:0;background:var(--gris-nube)}
.cabecera{
  background:#FFFFFF;border-bottom:1px solid var(--borde);
  height:var(--header-alto);padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:10;
}
.cabecera-derecha{display:flex;align-items:center;gap:12px}

/* ---- miga jerárquica: el "dónde estoy" y el camino de subida; el título
   vive una sola vez, en la página ---- */
.miga{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:600;color:var(--gris-acero)}
.miga-item{
  padding:4px 6px;border-radius:6px;color:var(--gris-acero);font:inherit;font-weight:600;
  text-decoration:none;white-space:nowrap;
}
a.miga-item:hover{background:var(--gris-nube);color:var(--azul)}
.miga-item.actual{color:var(--azul);font-weight:700}
.miga-sep{color:var(--borde);font-size:15px;line-height:1;user-select:none}
.miga-proveedor{display:inline-flex;align-items:center;gap:6px}
.miga-proveedor::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--naranja);display:inline-block}

.selector-contexto,.contexto-fijo{
  display:flex;align-items:center;gap:8px;
  background:var(--gris-nube);border:1px solid var(--borde);
  border-radius:var(--radio-control);padding:5px 11px;
}
.selector-contexto label,.contexto-fijo .rotulo{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-acero);
}
.selector-contexto select{
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--azul);
  border:0;background:transparent;cursor:pointer;max-width:230px;
}
.contexto-fijo{font-size:12.5px;font-weight:600;color:var(--azul)}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--azul);color:#FFFFFF;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
}
.boton-texto{
  font-family:inherit;font-size:12.5px;font-weight:600;
  background:transparent;border:0;color:var(--gris-acero);cursor:pointer;padding:6px 2px;
}
.boton-texto:hover{color:var(--azul)}

.lienzo{padding:20px;display:flex;flex-direction:column;gap:16px}

/* ---- tarjetas de cifras (nivel 1, sobre la lista): números del dato en azul,
   tabulares; el cero atenuado, no borrado (01-Estilos §6) ---- */
.cifras{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  background:#FFFFFF;border-radius:var(--radio-card);box-shadow:var(--sombra-card);
  padding:6px 8px;
}
.cifra{display:flex;flex-direction:column;gap:0;padding:6px 16px;min-width:96px}
.cifra-numero{font-size:18px;font-weight:800;color:var(--azul);line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cifra-numero.cero{color:var(--borde);font-weight:600}
.cifra-rotulo{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-acero);white-space:nowrap}
.cifra-sep{width:1px;background:var(--borde-suave);margin:10px 6px}

/* ---- encabezado de pantalla ---- */
.fila-titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.titulo-pagina{font-size:22px;font-weight:800;color:var(--azul);letter-spacing:-.02em;margin:0}
.subtitulo-pagina{font-size:12px;color:var(--gris-acero);margin:3px 0 0}
.acciones{display:flex;gap:8px;align-items:center}
.boton[class]{text-decoration:none}

.filtro-estado{display:flex;align-items:center;gap:8px}
.filtro-estado label{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-acero);
}
.filtro-estado select{
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--tinta);
  border:1px solid var(--borde);border-radius:var(--radio-control);
  padding:7px 11px;background:#FFFFFF;cursor:pointer;
}

/* ---- tarjetas ---- */
.tarjeta{background:#FFFFFF;border-radius:var(--radio-card);box-shadow:var(--sombra-card);overflow:hidden}
.tarjeta-cuerpo{padding:22px}
.tarjeta-pie{
  padding:14px 22px;background:var(--gris-nube);
  border-top:1px solid var(--borde);
  display:flex;justify-content:flex-end;gap:9px;
}
.dos-columnas{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:900px){.dos-columnas{grid-template-columns:1.3fr 1fr}}

/* ---- tablas ---- */
.tabla-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%}
thead th{
  background:var(--gris-nube);color:var(--gris-acero);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-align:left;padding:11px 14px;white-space:nowrap;
}
tbody td{
  padding:11px 14px;border-top:1px solid var(--borde-suave);
  font-size:13px;vertical-align:middle;
}
tbody tr:hover td{background:#FAFBFC}
/* La organización del propio usuario en el tablero del proveedor: se distingue, no se destaca. */
tbody tr.fila-propia td{background:var(--azul-light)}
.fecha{font-variant-numeric:tabular-nums;white-space:nowrap}
.principal-celda{font-weight:600}
.secundaria{font-size:11px;color:var(--gris-acero);font-weight:400}
/* Los montos van a la derecha, en cifras tabulares (01-Estilos.md §6). */
.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--azul)}
.num.cero{color:var(--borde);font-weight:400}
tr.totales td{background:var(--azul-light);border-top:2px solid var(--azul);font-weight:800;color:var(--azul)}
.col-acciones{width:1%;white-space:nowrap;text-align:right}
.col-acciones form{display:inline}
.enlace-accion{
  font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--azul);background:none;border:0;cursor:pointer;
  padding:4px 7px;text-decoration:none;border-radius:5px;
}
.enlace-accion:hover{background:var(--azul-light)}
.enlace-accion.sutil{color:var(--gris-acero)}
.enlace-accion.sutil:hover{background:var(--borde-suave);color:var(--tinta)}

/* ---- pastillas ---- */
.pastilla{display:inline-block;border-radius:20px;padding:3px 11px;font-size:11px;font-weight:600;line-height:1.5}
.p-azul{background:var(--azul-light);color:var(--azul)}
.p-naranja{background:var(--naranja-light);color:var(--naranja-texto)}
.p-verde{background:var(--verde-light);color:var(--verde)}
.p-gris{background:var(--borde-suave);color:#5F6B76}
.p-modulo{
  font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-weight:500;font-size:10.5px;
  letter-spacing:.03em;padding:2px 8px;background:var(--borde-suave);color:var(--gris-acero);
}

/* ---- formularios ---- */
.grupo-campos{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--borde-suave)}
.grupo-campos:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.grupo-titulo{font-size:13px;font-weight:800;color:var(--azul);margin:0 0 14px;letter-spacing:-.01em}
.rejilla-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.campo-ancho{grid-column:1/-1}
.campo select{
  font-family:inherit;font-size:13.5px;color:var(--tinta);
  padding:9px 13px;border:1px solid var(--borde);border-radius:6px;background:#FFFFFF;
}
.campo select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}
.campo-ayuda{font-size:11px;color:var(--gris-acero)}
/* La ayuda como tooltip (José, 10-Sep-2026): un «?» al final del rótulo; el texto aparece al pasar el mouse o al enfocarlo.
   Arriba y alineado a la izquierda por defecto; el JS del layout le pone .der (sin lugar a la derecha) o .abajo (primera fila
   de la tarjeta, que recorta por overflow:hidden). Sale del rótulo en mayúsculas: se le devuelve la caja y el espaciado. */
.ayuda{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;border-radius:50%;
  background:var(--azul-light);color:var(--azul);font-size:10px;font-weight:800;line-height:1;letter-spacing:0;cursor:help;
  position:relative;vertical-align:-2px;user-select:none;transition:background .12s ease,color .12s ease}
.ayuda:hover,.ayuda:focus{background:var(--azul);color:#FFFFFF;outline:none}
.ayuda::after{content:attr(data-ayuda);position:absolute;left:-4px;bottom:calc(100% + 8px);width:max-content;max-width:280px;
  padding:8px 11px;border-radius:6px;background:var(--navy);color:#FFFFFF;font-size:12px;font-weight:500;line-height:1.45;
  letter-spacing:0;text-transform:none;white-space:normal;text-align:left;box-shadow:var(--sombra-card);
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;z-index:40;pointer-events:none}
.ayuda::before{content:"";position:absolute;left:3px;bottom:calc(100% + 3px);border:5px solid transparent;border-top-color:var(--navy);
  opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:41;pointer-events:none}
.ayuda:hover::after,.ayuda:focus::after,.ayuda:hover::before,.ayuda:focus::before{opacity:1;visibility:visible;transform:none}
.ayuda.der::after{left:auto;right:-4px}
.ayuda.der::before{left:auto;right:3px}
.ayuda.abajo::after{bottom:auto;top:calc(100% + 8px);transform:translateY(-4px)}
.ayuda.abajo::before{bottom:auto;top:calc(100% + 3px);border-top-color:transparent;border-bottom-color:var(--navy)}
.ayuda.abajo:hover::after,.ayuda.abajo:focus::after{transform:none}
.casillero .ayuda{margin-left:6px}
.campo-error{font-size:11.5px;color:var(--rojo);font-weight:600}
.campo-error:empty{display:none}
.dato-fijo{font-size:13.5px;font-weight:600;padding:9px 0}

.lista-datos{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0;align-items:baseline}
.lista-datos dt{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-acero);
}
.lista-datos dd{margin:0;font-size:13px;font-weight:600;color:var(--tinta)}
.lista-datos dd.num{text-align:left;color:var(--azul)}

/* ---- avisos y vacío ---- */
.aviso-exito{
  font-size:12.5px;border-radius:6px;padding:10px 13px;
  background:var(--verde-light);border:1px solid #BEDBC0;color:var(--verde);
}

/* ---- estar dentro de una organización ajena como proveedor (M0) ----
   Superficie clara + texto naranja OSCURO, no barra naranja con texto blanco:
   sobre --naranja el blanco da 3.13 y no llega al 4.5 de AA. El par
   --naranja-light / --naranja-texto está medido en 5.07 y es el mismo que usa
   .aviso — un aviso permanente no puede ser el elemento menos legible de la
   pantalla, justo el que hay que leer. */
.banner-proveedor{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:11px 20px;font-size:12.5px;line-height:1.45;
  background:var(--naranja-light);color:var(--naranja-texto);
  border-bottom:1px solid #F2D3BE;box-shadow:inset 3px 0 0 var(--naranja);
}
.banner-proveedor strong{font-weight:800}
.boton-banner{
  border:1px solid var(--naranja-texto);background:transparent;color:var(--naranja-texto);
  font:inherit;font-weight:700;padding:5px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;
}
.boton-banner:hover{background:var(--naranja-texto);color:#FFFFFF}
.vacio{padding:44px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.vacio-titulo{font-size:15px;font-weight:700;color:var(--azul);margin:0}
.vacio-texto{font-size:13px;color:var(--gris-acero);margin:0 0 8px;max-width:48ch;text-wrap:pretty}
.tarjeta-titulo{font-size:16px;font-weight:800;color:var(--azul);margin:0 0 12px;letter-spacing:-.01em}

/* ---- accesos del Resumen (casa del nivel 2, provisional hasta M13) ----
   Ojo con el nombre: `.acceso` a secas es el envoltorio navy de las pantallas
   de login (arriba); acá es `.acceso-modulo`. */
.accesos{display:grid;grid-template-columns:1fr;gap:16px}
.accesos-lista{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.acceso-modulo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;border-top:1px solid var(--borde-suave);
  padding:10px 2px;font-size:13px;font-weight:600;color:var(--azul);text-decoration:none;text-align:left;
}
li:first-child > .acceso-modulo{border-top:0}
.acceso-modulo:hover .acceso-nombre{text-decoration:underline;text-underline-offset:3px}
.acceso-modulo .secundaria{display:block;font-weight:400}
.acceso-modulo.pendiente{color:var(--gris-acero)}

/* ---- el menú se va arriba en pantallas angostas ---- */
@media(max-width:820px){
  body.app{grid-template-columns:1fr}
  .menu{position:static;height:auto;flex-direction:row;align-items:center;gap:12px;overflow-x:auto}
  .menu-marca{padding:12px 14px}
  .menu-marca img{max-width:120px}
  .menu-nav{flex-direction:row;padding:0 8px;align-items:center}
  .menu-categoria{display:none}
  .menu-item{border-left:0;border-bottom:3px solid transparent;white-space:nowrap}
  .menu-item.activo{border-left:0;border-bottom-color:var(--naranja);border-radius:7px}
  .menu-pie{display:none}
  .contexto{flex:none;margin:8px 0 8px 8px;min-width:160px}
  .contexto-sub{display:none}
  .menu-subir{width:auto;border-top:0;white-space:nowrap}
  .miga-item{white-space:normal}
}

/* ---- casilleros (cartera, matriz de permisos, opt-in de contraseña) ---- */
.casillero{
  display:flex;align-items:flex-start;gap:9px;
  padding:7px 0;cursor:pointer;font-size:13px;
}
.casillero input{margin-top:2px;flex:none;width:15px;height:15px;accent-color:var(--azul)}
.casillero .campo-ayuda{display:block;margin-top:1px}
/* La fila del administrador se ve marcada pero no se toca: tiene todos los
   permisos por construcción, así que ofrecerla editable sería mentir. */
.casillero.fijo{cursor:default;opacity:.72}

.cartera{margin-top:6px}
.cartera-lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 18px;margin-top:4px;
  max-height:280px;overflow-y:auto;
  border:1px solid var(--borde);border-radius:var(--radio-control);
  padding:6px 12px;
}

/* ---- matriz de roles ---- */
.rol-cabecera{
  padding:18px 22px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--borde-suave);
}
.rol-nombre{
  font-size:16px;font-weight:800;color:var(--azul);margin:0;
  display:flex;align-items:center;gap:9px;letter-spacing:-.01em;
}
.matriz{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:4px 26px;padding:18px 22px;
}
.matriz-grupo-titulo{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-acero);margin:10px 0 4px;
}
.crear-rol{display:flex;gap:8px;align-items:center}
.crear-rol input{
  font-family:inherit;font-size:13px;color:var(--tinta);
  padding:9px 12px;border:1px solid var(--borde);border-radius:var(--radio-control);
}
.crear-rol input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}

/* ---- contraseña temporal: se muestra una sola vez ---- */
.clave-temporal{border-left:3px solid var(--naranja)}
.clave-valor{
  font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  font-size:19px;font-weight:600;letter-spacing:.06em;color:var(--azul);
  background:var(--gris-nube);border:1px dashed var(--borde);
  border-radius:var(--radio-control);
  padding:12px 16px;margin-top:10px;
  display:inline-block;user-select:all;
}

/* ---- formulario de contribuyente (3b-iv): consulta a Hacienda y actividades ---- */
/* El número con su botón ocupa dos columnas de la rejilla: al lado del botón, una sola lo cortaba. */
@media(min-width:700px){.campo-doble{grid-column:span 2}}
.campo-con-boton{display:flex;gap:8px;align-items:stretch}
.campo-con-boton input{flex:1;min-width:0}
.campo-con-boton .boton{white-space:nowrap;padding:8px 12px;font-size:12.5px}
.hacienda-estado{font-size:12px;color:var(--gris-acero)}
.consultando #numeroIdentificacion{opacity:.6}
.pastillas{display:flex;flex-wrap:wrap;gap:6px}
/* Pastilla de estado malo (moroso, omiso, desinscrito): rojo hondo sobre rojo claro. */
.p-rojo{background:var(--rojo-light);color:var(--rojo)}
.dato-fijo.monedas{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.dato-fijo.monedas .codigo{font-size:13px;color:var(--azul)}

.sugerencias{
  list-style:none;margin:4px 0 0;padding:4px;
  border:1px solid var(--borde);border-radius:var(--radio-control);
  background:#FFFFFF;box-shadow:var(--sombra-card);max-height:240px;overflow-y:auto;
}
.sugerencias li{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px}
.sugerencias li:hover{background:var(--azul-light)}

.actividades-lista{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--borde);border-radius:var(--radio-control)}
.actividades-lista li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-top:1px solid var(--borde-suave);font-size:13px}
.actividades-lista li:first-child{border-top:0}
.actividades-lista .actividad-desc{flex:1;min-width:0}
.actividades-lista .radio{
  display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-acero);
}
.actividades-lista .radio input{accent-color:var(--azul);margin:0;width:14px;height:14px}
.actividades-lista li.predeterminada .radio{color:var(--azul)}

/* Columnas "de un vistazo" de la lista (situación en Hacienda y las que vengan): pegadas y con pastilla chica. */
thead th.col-compacta,tbody td.col-compacta{padding-left:6px;padding-right:6px;width:1%;white-space:nowrap;text-align:center}
.pastilla.mini{padding:2px 8px;font-size:10.5px;min-width:44px;text-align:center}

/* Actividades en Resumen/Datos (solo lectura). */
.lista-actividades{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.lista-actividades li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.columna{display:flex;flex-direction:column;gap:16px}

/* ---- ubicación y contacto (3b-v) ---- */
/* La cascada es un .rejilla-campos más; el país va como .dato-fijo (se muestra, no se elige). */
.cascada-ubicacion select:disabled{color:var(--gris-acero);background:var(--gris-nube)}
.lista-contacto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lista-contacto li{display:flex;gap:8px;align-items:baseline}
.lista-contacto .secundaria{min-width:74px}

/* ---- nivel 0 · Plantillas MASTER (M4, sesión 4b) ---- */
.tarjeta-cabecera{
  padding:18px 22px 14px;display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--borde-suave);
}
.tarjeta-cabecera .tarjeta-titulo{margin-bottom:4px}
.tarjeta-cabecera .campo-ayuda{max-width:72ch;text-wrap:pretty}
.buscador{
  font-family:inherit;font-size:13px;color:var(--tinta);
  padding:8px 12px;border:1px solid var(--borde);border-radius:var(--radio-control);
  background:#FFFFFF;min-width:220px;
}
.buscador:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}
/* Panel emergente de captura dentro de la tarjeta (agregar / renombrar / tarifa nueva). */
.panel{padding:18px 22px;background:var(--gris-nube);border-bottom:1px solid var(--borde)}
.panel-pie{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
.codigo-input{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;letter-spacing:.02em}

/* La nota del catálogo vive a la derecha de las cifras: abajo empujaba el grid (José, 1-Sep-2026). */
.cifras-nota{margin-left:auto;align-self:center;padding:4px 16px;max-width:64ch;font-size:10.5px;line-height:1.45;color:var(--gris-acero);text-wrap:pretty}
.cifras-nota-titulo{display:block;font-size:12.5px;font-weight:800;color:var(--azul);margin-bottom:2px}
.arbol-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--borde-suave)}
.arbol-barra .buscador{flex:1;min-width:200px;max-width:320px}

/* El plan de cuentas (José, 1-Sep-2026, mirando el de SAP B1): GAVETAS a la izquierda —las clases,
   con "Todos" arriba— para navegar y filtrar de un clic, y el árbol como LISTA LIMPIA: sin flechitas
   ni guías; el título (grupo) va en azul con peso por nivel y un clic lo abre o lo cierra; la cuenta
   de movimiento va en tinta. La sangría del código dice el nivel; las acciones aparecen al pasar. */
/* minmax(0,1fr): sin él, el hijo de la grid no encoge por debajo de su contenido (min-width:auto)
   y la tabla desborda la tarjeta a 1366px en vez de scrollear dentro de .tabla-scroll. */
.plan{display:grid;grid-template-columns:172px minmax(0,1fr)}
.plan > .tabla-scroll{
  min-width:0;
  /* El árbol scrollea en su propio panel: con 311 filas, la barra horizontal quedaba al
     pie de la página y había que bajar todo para verla (José, 1-Sep-2026). */
  max-height:calc(100vh - 285px);min-height:340px;overflow-y:auto;
}
.arbol thead th{position:sticky;top:0;z-index:2}
/* Gavetas compactas: UNA línea por gaveta (nombre + conteo a la derecha), la primera alineada
   con la primera fila del grid (padding-top = alto del thead, lo fija el JS). */
.gavetas{border-right:1px solid var(--borde-suave);background:var(--gris-nube);display:flex;flex-direction:column;gap:5px;padding:38px 10px 12px;align-content:start}
.gaveta{
  border:1px solid var(--borde);background:#FFFFFF;border-radius:8px;padding:6px 10px;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--gris-acero);cursor:pointer;text-align:left;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;white-space:nowrap;
}
.gaveta small{font-weight:500;font-size:10px;opacity:.8}
.gaveta:hover{border-color:var(--azul);color:var(--azul)}
.gaveta.activa{background:var(--azul);color:#FFFFFF;border-color:var(--azul)}
@media(max-width:900px){.plan{grid-template-columns:1fr}.gavetas{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--borde-suave)}}

.arbol tbody td{padding-top:2px;padding-bottom:2px;border-top:1px solid var(--borde-suave)}
.arbol .cuenta-celda{padding-left:calc(16px + (var(--nivel, 1) - 1) * 22px);padding-right:18px;white-space:nowrap;width:1%}
.arbol .cuenta-celda .codigo{font-size:12px}
.arbol .nombre-celda{white-space:nowrap;padding-left:calc(14px + (var(--nivel, 1) - 1) * 22px)}
.arbol .fila-n1{--nivel:1} .arbol .fila-n2{--nivel:2} .arbol .fila-n3{--nivel:3} .arbol .fila-n4{--nivel:4} .arbol .fila-n5{--nivel:5}
.arbol .fila-grupo{cursor:pointer}
.arbol .fila-grupo .codigo,.arbol .fila-grupo .nombre{color:var(--azul)}
.arbol .fila-n1 .nombre,.arbol .fila-n1 .codigo{font-weight:800;font-size:14px}
.arbol .fila-n2 .nombre,.arbol .fila-n2 .codigo{font-weight:700}
.arbol .fila-n3 .nombre,.arbol .fila-n3 .codigo{font-weight:600}
.arbol .fila-n4 .nombre,.arbol .fila-n4 .codigo{font-weight:500}
.arbol .fila-n1 td{padding-top:5px}
.arbol .fila-movimiento .codigo{color:var(--tinta);font-weight:500}
.arbol .fila-movimiento .nombre{color:var(--tinta)}
.arbol .fila-bloqueada .nombre{color:var(--gris-acero);text-decoration:line-through;text-decoration-color:var(--borde)}
.arbol .fila-resaltada td{background:var(--naranja-light)}
.arbol .nombre-celda .pastilla{margin-left:8px}
.arbol .nat-select{
  appearance:none;-webkit-appearance:none;border:0;border-radius:20px;padding:1px 17px 1px 9px;font-family:inherit;
  font-size:11px;font-weight:600;cursor:pointer;text-align:left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%2363717F'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 5px center;
}
.arbol .nat-select.deudora{background-color:var(--azul-light);color:var(--azul)}
.arbol .nat-select.acreedora{background-color:var(--naranja-light);color:var(--naranja-texto)}
.arbol .nat-select:hover{box-shadow:0 0 0 2px var(--azul)}
.arbol .niif-celda{white-space:nowrap}
.arbol .niif{
  border:1px solid transparent;background:transparent;font:inherit;font-size:12px;color:var(--gris-acero);cursor:pointer;
  padding:1px 18px 1px 6px;margin-left:-6px;border-radius:6px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%2363717F'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;
}
.arbol .niif:hover{border-color:var(--borde);background-color:#FFFFFF;color:var(--azul)}
.arbol .niif.sin{color:var(--borde);font-style:italic}
.arbol .fila-movimiento .niif.sin{color:var(--rojo)}
.niif-select{font-family:inherit;font-size:12px;color:var(--tinta);padding:3px 8px;border:1px solid var(--azul);border-radius:6px;background:#FFFFFF;max-width:320px}
.arbol .nat.deudora{background:var(--azul-light);color:var(--azul)}
.arbol .nat.acreedora{background:var(--naranja-light);color:var(--naranja-texto)}
/* "+" a secas para agregar una hija: el ícono + va en naranja, como el del botón primario (§5). */
.arbol .hija{color:var(--naranja);font-size:15px;font-weight:800;line-height:1;padding:2px 9px}
.arbol .hija:hover{background:var(--naranja-light)}
.arbol .col-acciones{text-align:left;padding-left:4px;padding-right:4px}
.arbol tbody .col-acciones > *{opacity:0;transition:opacity .12s ease}
.arbol tr:hover .col-acciones > *,.arbol tr:focus-within .col-acciones > *{opacity:1}
.leyenda-arbol{padding:10px 16px 14px;margin:0;border-top:1px solid var(--borde-suave)}
/* La descripción se edita en su lugar: se guarda al perder el foco o 2 s después de escribir. */
.arbol .nombre[contenteditable]{padding:2px 6px;margin-left:-6px;border-radius:5px;cursor:text;outline:none;min-width:40px;display:inline-block}
.arbol .nombre[contenteditable]:hover{background:rgba(29,55,91,.06)}
.arbol .nombre[contenteditable]:focus{background:#FFFFFF;box-shadow:0 0 0 2px var(--azul)}
.guardado{font-size:11px;color:var(--verde);margin-left:8px;opacity:0;transition:opacity .2s ease}
.guardado.visible{opacity:1}
.guardado.error{color:var(--rojo)}
.caret{
  display:inline-block;width:18px;height:18px;margin-right:4px;vertical-align:-4px;
  border:0;background:transparent;cursor:pointer;padding:0;position:relative;
}
.caret::before{
  content:"";position:absolute;left:6px;top:4px;width:6px;height:6px;
  border-right:2px solid var(--gris-acero);border-bottom:2px solid var(--gris-acero);
  transform:rotate(45deg);transition:transform .12s ease;
}
.caret.cerrado::before{transform:rotate(-45deg)}
.caret:hover::before{border-color:var(--azul)}
.sin-resultados{padding:18px 22px;margin:0}

/* ---- Catálogo en los niveles 1 y 2 (4c): adopción, inactivas, linaje controlado ---- */
.arbol .adopcion{font-size:11px;color:var(--gris-acero);white-space:nowrap}
.arbol .adopcion.cero{color:var(--borde)}
.arbol .fila-inactiva .nombre,.arbol .fila-inactiva .codigo{color:var(--borde)}
.arbol .pastilla.nat{min-width:72px}
.ver-inactivas{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gris-acero);white-space:nowrap}
/* "¿No será esta?": sugerencias del MASTER dentro del modal de agregar local. */
.parecidas{margin-top:12px;padding:10px 12px;border:1px solid var(--naranja);border-radius:var(--radio-control);background:var(--naranja-light)}
.parecidas ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.parecidas li{font-size:12.5px}
.parecidas .codigo{font-size:11.5px}
/* "Heredar del MASTER": la lista de disponibles con casillas, sangrada por nivel. */
.lista-disponibles{max-height:46vh;overflow-y:auto;border:1px solid var(--borde-suave);border-radius:var(--radio-control);padding:6px 0;display:flex;flex-direction:column}
.disponible{display:flex;align-items:center;gap:8px;padding:3px 12px;font-size:12.5px;cursor:pointer}
.disponible:hover{background:var(--azul-light)}
.disponible .codigo{font-size:11.5px}
.disponible.nivel-1{font-weight:800}.disponible.nivel-2{font-weight:700;padding-left:26px}
.disponible.nivel-3{font-weight:600;padding-left:40px}.disponible.nivel-4{font-weight:500;padding-left:54px}
.disponible.nivel-5{padding-left:68px}
/* "Heredar de" del contribuyente sin catálogo (organización o hermano). */
.heredar-de{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left}
.opcion-heredar{display:flex;align-items:center;gap:8px;font-size:13px}
.opcion-heredar select{font-family:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--borde);border-radius:6px}
.enlace-accion.peligro{color:var(--rojo)}
.enlace-accion.peligro:hover{background:var(--rojo-light)}

/* Pestañas de una pantalla con varias secciones (nivel 0: Catálogo · Impuestos · Roles). Una sola
   sección a la vista; la activa lleva la barra naranja, como el ítem activo del menú. */
/* Una sola línea siempre (Configuración trae 7): si no caben, la barra se desplaza; una pestaña nunca parte su nombre. */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--borde);margin-top:-4px;overflow-x:auto;scrollbar-width:thin}
.pestana{
  border:0;border-bottom:3px solid transparent;background:transparent;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--gris-acero);padding:6px 12px 5px;cursor:pointer;margin-bottom:-1px;white-space:nowrap;text-decoration:none;flex:0 0 auto;
}
.pestana:hover{color:var(--azul)}
.pestana.activa{color:var(--azul);font-weight:700;border-bottom-color:var(--naranja)}
/* Pestañas de un ítem del menú (Contabilidad, Configuración): enlaces desde el mapa; lo no construido lleva su etiqueta. */
.pestana .mod{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:9.5px;font-weight:500;letter-spacing:.04em;color:var(--gris-acero);margin-left:6px}
.pestana .conteo{min-width:18px;padding:1px 5px;border-radius:9px;text-align:center;background:var(--naranja);color:#fff;font-size:10.5px;font-weight:700;line-height:15px;margin-left:6px;display:inline-block}
/* Pestañas SECUNDARIAS dentro de una pantalla que ya es pestaña (Dimensiones): pastillas, sin la barra naranja. */
.pestanas.secundarias{border-bottom:0;gap:6px;margin:0}
.pestanas.secundarias .pestana{border:1px solid var(--borde);border-radius:20px;padding:4px 12px;font-size:12px;margin:0;background:#fff}
.pestanas.secundarias .pestana.activa{background:var(--azul);color:#fff;border-color:var(--azul)}
.pestanas.secundarias .pestana .secundaria{color:inherit;opacity:.75}

/* Modal de captura (agregar cuenta): la tarjeta flota sobre la pantalla y, al cerrar, uno sigue donde estaba. */
.modal{
  border:0;border-radius:var(--radio-card);padding:0;width:min(720px,calc(100vw - 32px));
  box-shadow:0 18px 48px rgba(8,22,40,.28);color:var(--tinta);background:#FFFFFF;
}
.modal::backdrop{background:rgba(8,22,40,.45)}
.modal-cuerpo{padding:22px}
.modal-contexto{margin:-10px 0 14px}

/* Impuestos: un bloque por impuesto; la vigencia se edita en su fila, sin salir. */
.impuesto{padding:14px 22px 18px;border-top:1px solid var(--borde-suave)}
.impuesto:first-of-type{border-top:0}
.impuesto-titulo{font-size:13.5px;font-weight:700;color:var(--tinta);margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.impuesto-titulo .codigo{font-size:12px}
details.vigencia summary,details.agregar-tarifa summary{list-style:none;cursor:pointer;display:inline-block}
details.vigencia summary::-webkit-details-marker,details.agregar-tarifa summary::-webkit-details-marker{display:none}
.vigencia-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.vigencia-form label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-acero);text-align:left}
.vigencia-form input{
  font-family:inherit;font-size:12.5px;color:var(--tinta);padding:6px 9px;
  border:1px solid var(--borde);border-radius:6px;background:#FFFFFF;
}
.vigencia-form .boton{padding:7px 12px;font-size:12.5px}
details.agregar-tarifa{margin-top:10px}
details.agregar-tarifa .panel{margin-top:8px;border:1px solid var(--borde);border-radius:var(--radio-control)}

/* ============================ Motor (sesión 5b) ========================== */
/* ---- El grid de MQS: Tabulator 6.4 vestido con los tokens por sobreescritura de
   tabulator_simple.css (01-Estilos §7; decidido por José el 1-Sep-2026 con el prototipo).
   .grid-mqs = todo grid (captura y listas); .lista = con scroll virtual y orden por cabecera. ---- */
.grid-mqs.tabulator{border:0;font-family:inherit;font-size:13px;background:#fff;border-radius:0}
.grid-mqs .tabulator-header{background:var(--gris-nube);border-bottom:1px solid var(--borde);color:var(--gris-acero);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.grid-mqs .tabulator-header .tabulator-col{background:var(--gris-nube);border-right:1px solid var(--borde-suave)}
.grid-mqs .tabulator-header .tabulator-col .tabulator-col-content{padding:10px 10px}
.grid-mqs .tabulator-header .tabulator-col.c-num .tabulator-col-content{text-align:right}
/* Filtros de cabecera (José, 10-Sep-2026: filtrar por cada columna del grid): un cuadro bajo el rótulo, vestido como los inputs del tema. */
.grid-mqs .tabulator-header .tabulator-col .tabulator-header-filter{margin-top:5px}
.grid-mqs .tabulator-header-filter input,.grid-mqs .tabulator-header-filter select{width:100%;box-sizing:border-box;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--tinta);padding:4px 7px;border:1px solid var(--borde);border-radius:4px;background:#FFFFFF}
.grid-mqs .tabulator-header-filter input::placeholder{color:var(--borde);font-weight:500}
.grid-mqs .tabulator-header-filter input:focus,.grid-mqs .tabulator-header-filter select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 2px rgba(29,55,91,.10)}
.grid-mqs .tabulator-header .tabulator-col.c-num .tabulator-header-filter input{text-align:right}
.grid-mqs.captura .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:0}
.grid-mqs .tabulator-header .tabulator-col.tabulator-sortable:hover{background:var(--borde-suave)}
.grid-mqs .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom-color:var(--azul)}
.grid-mqs .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top-color:var(--azul)}
.grid-mqs .tabulator-tableholder{background:#fff}
.grid-mqs .tabulator-row{border-bottom:1px solid var(--borde-suave);background:#fff;min-height:36px}
.grid-mqs .tabulator-row.tabulator-row-even{background:#fff}
.grid-mqs .tabulator-row:hover{background:#FAFBFC}
.grid-mqs .tabulator-row.tabulator-selected,.grid-mqs .tabulator-row.tabulator-selected:hover{background:var(--azul-light)}
.grid-mqs .tabulator-row .tabulator-cell{border-right:1px solid var(--borde-suave);padding:0 10px;color:var(--tinta);display:flex;align-items:center;min-height:36px}
.grid-mqs .tabulator-row .tabulator-cell.c-num{justify-content:flex-end;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--azul)}
.grid-mqs .tabulator-row .tabulator-cell.c-num.cero{color:var(--borde);font-weight:400}
.grid-mqs .tabulator-row .tabulator-cell.c-fecha{font-variant-numeric:tabular-nums;white-space:nowrap}
.grid-mqs .tabulator-row .tabulator-cell.c-acciones{justify-content:flex-end;gap:2px;padding-right:6px}
.grid-mqs .tabulator-row .tabulator-cell.c-acciones form{display:inline}
.grid-mqs .tabulator-row .tabulator-cell .enlace{color:var(--azul);text-decoration:none;font-weight:600}
.grid-mqs .tabulator-row .tabulator-cell .enlace:hover{text-decoration:underline;text-underline-offset:3px}
.grid-mqs .tabulator-row .tabulator-cell .principal-celda{font-weight:600}
.grid-mqs.captura .tabulator-table{counter-reset:fila}
.grid-mqs.captura .tabulator-row{counter-increment:fila}
.grid-mqs .tabulator-row .tabulator-cell.c-n{justify-content:flex-end;color:var(--gris-acero);font-size:11.5px;font-variant-numeric:tabular-nums;padding-right:8px;cursor:grab}
.grid-mqs.captura .tabulator-row .tabulator-cell.c-n::before{content:counter(fila)}
.grid-mqs .tabulator-row .tabulator-cell.c-x{justify-content:center;padding:0}
.grid-mqs .tabulator-row .tabulator-cell.tabulator-editing{border:0;box-shadow:inset 0 0 0 2px var(--azul);padding:0!important;background:#fff}
.grid-mqs .tabulator-row .tabulator-cell.tabulator-editing input,.grid-mqs .tabulator-row .tabulator-cell.tabulator-editing select{font:inherit;font-size:13px;height:100%!important;min-height:36px;padding:0 10px!important;border:0!important;outline:none!important;background:transparent;color:var(--tinta);width:100%;border-radius:0}
.grid-mqs .tabulator-row .tabulator-cell.tabulator-editing.c-num input{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--azul)}
.grid-mqs .tabulator-row.tabulator-moving{border:1px solid var(--azul);background:var(--azul-light)}
.grid-mqs .tabulator-row.fila-error .tabulator-cell:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
.grid-mqs .tabulator-cell .codigo{margin-right:8px}
.grid-mqs .tabulator-cell .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid-mqs .tabulator-cell .vacio{color:#AEB7C0}
.grid-mqs .tabulator-cell .contado{color:var(--gris-acero);font-style:italic}
.grid-mqs .tabulator-cell .quitar{border:0;background:transparent;color:var(--gris-acero);cursor:pointer;font-size:12px;padding:6px;border-radius:5px;opacity:0}
.grid-mqs .tabulator-row:hover .quitar,.grid-mqs .tabulator-row.tabulator-editing .quitar{opacity:1}
.grid-mqs .tabulator-cell .quitar:hover{background:var(--rojo-light);color:var(--rojo)}
.grid-mqs .tabulator-cell .monto{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.grid-mqs .tabulator-cell .monto .func{font-size:10px;color:var(--gris-acero);font-weight:400}
.grid-mqs .tabulator-cell.tc-uno{color:var(--gris-acero);font-weight:400}
.grid-mqs .tabulator-col-resize-handle{opacity:0}
.grid-mqs .tabulator-col-resize-handle:hover{opacity:1}
.grid-mqs .tabulator-row .tabulator-cell .pastilla{margin-left:0}
.grid-mqs .tabulator-placeholder{background:#fff}
/* Extremos fijos (# y ✕; casilla y acciones en las listas): sin la sombra oscura de la librería. */
.grid-mqs .tabulator-header .tabulator-col.tabulator-frozen{background:var(--gris-nube)}
/* La columna fija va SOBRE lo que se desplaza: opaca, con una sombra que dice que flota (10-Sep-2026: se veía el Total debajo de «Abrir»). */
.grid-mqs .tabulator-row .tabulator-cell.tabulator-frozen{background:#FFFFFF}
.grid-mqs .tabulator-row:hover .tabulator-cell.tabulator-frozen{background:#FAFBFC}
.grid-mqs .tabulator-frozen.tabulator-frozen-right{box-shadow:-6px 0 8px -6px rgba(8,22,40,.18)}
.grid-mqs .tabulator-frozen.tabulator-frozen-left{border-right:1px solid var(--borde)}
.grid-mqs .tabulator-frozen.tabulator-frozen-right{border-left:1px solid var(--borde)}
.grid-mqs .tabulator-header .tabulator-col.tabulator-moving{background:var(--azul-light);border:1px solid var(--azul)}
.grid-mqs .tabulator-placeholder .tabulator-placeholder-contents{font:inherit;color:var(--gris-acero);font-size:13px}
/* La lista desplegable vive en <body>, fuera del grid. */
.tabulator-popup-container{background:#fff;border:1px solid var(--borde);border-radius:var(--radio-control);box-shadow:var(--sombra-card);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:13px;padding:4px}
.tabulator-edit-list{max-height:260px;font-size:13px}
.tabulator-edit-list .tabulator-edit-list-item{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:6px;color:var(--tinta);white-space:nowrap}
.tabulator-edit-list .tabulator-edit-list-item.focused{outline:0;background:var(--azul-light)}
.tabulator-edit-list .tabulator-edit-list-item.active{background:var(--azul-light);color:var(--tinta)}
.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:0}
.tabulator-edit-list .tabulator-edit-list-item:hover{background:var(--azul-light);color:var(--tinta)}
.tabulator-edit-list .tabulator-edit-list-item .grupo{margin-left:auto;font-size:11px;color:var(--gris-acero)}
.tabulator-edit-list .tabulator-edit-list-placeholder{color:var(--gris-acero);padding:8px}
.grid-lista{min-height:120px}
.roles{display:inline-flex;gap:3px}
.roles span{font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:1px 5px;border-radius:4px;background:var(--borde-suave);color:var(--gris-acero)}

/* ---- Pestañas como enlaces (Diario · Bitácora son dos rutas) ---- */
a.pestana{text-decoration:none;display:inline-block}

/* ---- Filtros de barra (diario, bitácora) y formulario en línea (dimensiones) ---- */
.filtro-diario{align-items:flex-end;gap:10px 12px}
.filtro-diario .campo{gap:3px}
.filtro-diario .campo label{font-size:9.5px}
.filtro-diario .campo input,.filtro-diario .campo select{padding:7px 10px;font-size:12.5px;min-width:0}
.filtro-diario .campo select{font-family:inherit;color:var(--tinta);border:1px solid var(--borde);border-radius:6px;background:#fff}
.filtro-diario .campo-texto{flex:1;min-width:200px}
.filtro-diario .campo-texto .buscador{width:100%;max-width:none;min-width:0}
.filtro-diario .boton{padding:8px 14px;font-size:12.5px}
.resumen-diario{gap:14px;align-items:center}
.resumen-diario .total .rotulo{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero)}
.resumen-diario .total .valor{font-size:14px;font-weight:800;color:var(--azul);font-variant-numeric:tabular-nums}
.resumen-diario .total .valor.cero{color:var(--borde);font-weight:400}
.panel-inline{border-bottom:1px solid var(--borde-suave)}
.panel-inline .rejilla-campos{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}
.panel-inline .boton{padding:9px 14px}
.fila-inactiva .nombre,.fila-inactiva .codigo{color:var(--gris-acero)}
table.dimensiones .nombre[contenteditable]{padding:2px 6px;margin-left:-6px;border-radius:5px;cursor:text;outline:none;min-width:40px;display:inline-block}
table.dimensiones .nombre[contenteditable]:hover{background:rgba(29,55,91,.06)}
table.dimensiones .nombre[contenteditable]:focus{background:#fff;box-shadow:0 0 0 2px var(--azul)}

/* ---- La pantalla del asiento (prototipo 5-grid, ficha M5) ---- */
.cab-asiento{padding:18px 22px 16px;border-bottom:1px solid var(--borde-suave)}
/* Dos filas (José, 2-Sep-2026): Tipo · Fecha documento · T/C del día · Fecha contable / Referencia · Detalle. */
.cab-asiento .cab-fila-1{grid-template-columns:150px 150px 190px 150px;justify-content:start}
.cab-asiento .cab-fila-2{grid-template-columns:260px minmax(200px,1fr);margin-top:14px}
@media(max-width:1100px){.cab-asiento .cab-fila-1{grid-template-columns:repeat(2,1fr)}.cab-asiento .cab-fila-2{grid-template-columns:1fr}}
.cab-asiento .campo input:disabled,.cab-asiento .campo select:disabled{background:var(--gris-nube);color:var(--gris-acero)}
.numero-asiento{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:13px;color:var(--gris-acero);font-weight:500;padding:9px 0;letter-spacing:.02em}
.numero-asiento b{color:var(--azul);font-weight:500}
.campo-tasa .dato-fijo{padding:9px 0}
.campo-tasa .tasa-valor{font-size:13px;color:var(--azul)}
.avisos{display:flex;flex-direction:column;gap:8px;padding:12px 22px 0}
.avisos:empty{display:none}
.avisos ul{margin:4px 0 0;padding-left:18px}
.zona-grid{position:relative;margin-top:12px}
.pie-grid{display:flex;align-items:center;gap:18px;padding:10px 22px 12px;border-top:1px solid var(--borde-suave);flex-wrap:wrap}
.boton-linea{padding:7px 12px;font-size:12.5px}
/* Los totales van DEBAJO de su columna (fila de cálculos de Tabulator, vestida como la fila de totales de §5). */
.grid-mqs .tabulator-footer{background:#fff;border-top:0;padding:0}
.grid-mqs .tabulator-footer .tabulator-calcs-holder{background:var(--azul-light)!important;border-top:2px solid var(--azul)!important;border-bottom:0!important}
.grid-mqs .tabulator-row.tabulator-calcs{background:var(--azul-light)!important;font-weight:800;color:var(--azul);min-height:40px}
.grid-mqs .tabulator-row.tabulator-calcs .tabulator-cell{border-right:1px solid rgba(29,55,91,.08);min-height:40px;color:var(--azul)}
.grid-mqs .tabulator-row.tabulator-calcs .tabulator-cell.c-num{font-size:14px;font-weight:800}
.grid-mqs .tabulator-row.tabulator-calcs .tabulator-cell .monto.cero{color:var(--gris-acero);font-weight:500}
.grid-mqs .tabulator-row.tabulator-calcs .tabulator-cell .monto .func{color:var(--gris-acero);font-weight:500}
.grid-mqs .tabulator-row.tabulator-calcs .tabulator-cell .rotulo{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);margin-right:10px}
.grid-mqs .tabulator-row.tabulator-calcs .tabulator-cell .valor.rojo{color:var(--rojo);font-weight:800;font-variant-numeric:tabular-nums}
.grid-mqs .tabulator-row.tabulator-calcs .tabulator-cell.tabulator-frozen{background:var(--azul-light)}
/* La fila de totales no es una línea: no cuenta ni muestra número. */
.grid-mqs.captura .tabulator-row.tabulator-calcs{counter-increment:none}
.grid-mqs.captura .tabulator-row.tabulator-calcs .tabulator-cell.c-n::before{content:""}
.leyenda-teclado{padding:0 22px 12px;font-size:11px;color:var(--gris-acero)}
.leyenda-teclado kbd{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:10.5px;border:1px solid var(--borde);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:#fff;color:var(--tinta)}
.acciones-asiento{margin-right:auto;gap:8px}
.acciones-asiento form{display:inline}
.acciones-asiento .boton{padding:8px 13px;font-size:12.5px}
.fila-titulo .acciones .pastilla a{color:inherit;font-weight:700}

/* ---- Bitácora de asientos: la lista de huellas y la foto del asiento en el modal ---- */
table.huellas td{vertical-align:top}
tr.huella-borrado td{background:var(--rojo-light)}
tr.huella-borrado:hover td{background:#FBDCDC}
.modal.modal-ancho{width:min(1180px,calc(100vw - 32px))}
.huella-cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.huella-dos{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1100px){.huella-dos{grid-template-columns:1fr 1fr}}
.huella-subtitulo{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);margin:0 0 6px}
.foto-cabecera{margin-bottom:10px;font-size:12.5px}
.foto-cabecera dd{font-size:12.5px}
table.foto-lineas thead th,table.foto-lineas tbody td{padding:6px 8px;font-size:12px;white-space:nowrap}
table.foto-lineas tfoot td{padding:8px}

/* ============================ Mayor · balance de comprobación · EEFF (sesión 5c) ========================== */
/* ---- La línea de resumen bajo el filtro: el rango y los totales del reporte (misma familia que .resumen-diario) ---- */
.resumen-mayor{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--borde-suave);font-size:12px;color:var(--gris-acero)}
.resumen-mayor .contexto-rango{margin-right:auto;line-height:1.45;max-width:64ch;text-wrap:pretty}
.resumen-mayor .contexto-rango b{color:var(--tinta);font-weight:700}
.resumen-mayor .dato{display:flex;flex-direction:column;gap:1px;align-items:flex-end}
.resumen-mayor .rotulo{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);white-space:nowrap}
.resumen-mayor .valor{font-size:14px;font-weight:800;color:var(--azul);font-variant-numeric:tabular-nums;white-space:nowrap}
.resumen-mayor .valor small{font-size:11px;font-weight:500;color:var(--gris-acero)}
.resumen-mayor .valor.cero{color:var(--borde);font-weight:400}
.resumen-mayor .valor.contrario{color:var(--rojo)}
.resumen-mayor .abrir-cerrar{display:inline-flex;gap:2px}
.aviso-en-tarjeta{margin:10px 16px 0;border-radius:6px}
.codigo-titulo{font-size:16px;color:var(--gris-acero);margin-right:6px}
.leyenda-arbol .contrario{color:var(--rojo);font-weight:600}
/* ---- La HOJA de reporte (José, 2-Sep-2026, con los referentes a la vista: Xero, QBO, Alegra y los impresos de SAP y
   Exactus acotan el reporte a una hoja; ninguno lo estira a toda la pantalla). Ancho fijo pegado a la izquierda:
   760 px con una columna de montos (situación, resultados, flujo) y 960 px con cuatro o más (balance de
   comprobación, cambios en el patrimonio, mayor por cuenta); la forma de cuenta del ESF pide 1100 px. A 1366 px
   todos caben sin scroll horizontal. Estirada de entrada: sin flechitas ni «Abrir todo»; «Nivel» y «Ver» ocultan filas. ---- */
.hoja{width:min(100%,760px)}
.hoja.hoja-ancha{width:min(100%,960px)}
.hoja.hoja-cuenta{width:min(100%,1100px)}
.envoltura-reporte{overflow-x:auto}
/* ---- La tabla del reporte: la misma familia que el grid de MQS, más densa (30 px por fila: es lectura, no captura) ---- */
table.reporte{width:100%;border-collapse:collapse;font-size:13px}
.reporte th{background:var(--gris-nube);border-bottom:1px solid var(--borde);color:var(--gris-acero);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:9px 10px;white-space:nowrap}
.reporte th.num{text-align:right}
.reporte td{border-bottom:1px solid var(--borde-suave);padding:0 10px;height:30px;vertical-align:middle;white-space:nowrap}
.reporte td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--azul);width:150px}
.reporte td.num.cero{color:var(--borde);font-weight:400}
.reporte td.num.contrario{color:var(--rojo)}
.reporte tbody tr:hover td{background:#FAFBFC}
.reporte td.cuenta{overflow:hidden;text-overflow:ellipsis;max-width:0;padding-left:calc(10px + var(--n,0) * 18px)}   /* sangría de 18 px por nivel */
.reporte td.cuenta .codigo{margin-right:8px}
.reporte td.cuenta .nom{color:var(--tinta);font-weight:500;text-decoration:none}
.reporte td.cuenta a.nom:hover{text-decoration:underline;text-underline-offset:3px}
.reporte td.cuenta .pastilla{margin-left:6px}
.reporte tr[hidden],.reporte th[hidden],.reporte td[hidden]{display:none}
/* Balance de comprobación: los grupos en azul con el peso de su nivel (como el plan de cuentas), la cuenta de movimiento en tinta. */
.reporte tr.n1 td.cuenta .nom{font-weight:800;color:var(--azul);text-transform:uppercase;letter-spacing:.02em}
.reporte tr.n2 td.cuenta .nom{font-weight:700;color:var(--azul)}
.reporte tr.n3 td.cuenta .nom{font-weight:600;color:var(--azul)}
.reporte tr.n4 td.cuenta .nom{font-weight:500;color:var(--azul)}
.reporte tr.n5 td.cuenta .nom{font-weight:500;color:var(--tinta)}
.reporte tr.n1 td.num,.reporte tr.n2 td.num{font-weight:800}
/* Estados financieros: grupo · sección · partida · subgrupo · cuenta · subtotal · total. Un negativo NO va en rojo: una contra-cuenta restando es normal. */
.reporte tr.grupo td.cuenta .nom{font-weight:800;color:var(--azul);text-transform:uppercase;letter-spacing:.02em}
.reporte tr.seccion td.cuenta .nom{font-weight:700;color:var(--azul)}
.reporte tr.partida td.cuenta .nom{font-weight:600;color:var(--tinta)}
.reporte tr.subgrupo td.cuenta .nom{font-weight:500;color:var(--azul)}
.reporte tr.cuenta td.cuenta .nom{font-weight:400;color:var(--tinta)}
.reporte tr.subtotal td,.reporte tr.total td{background:var(--azul-light)}
.reporte tr.subtotal td.cuenta .nom,.reporte tr.total td.cuenta .nom{font-weight:800;color:var(--azul)}
.reporte tr.total td{border-top:2px solid var(--azul)}
.reporte tr.total td.num,.reporte tr.subtotal td.num{font-size:14px;font-weight:800}
.reporte tr.aire td{height:12px;border-bottom:0}
.reporte tbody tr.aire:hover td{background:transparent}
.reporte tfoot td{background:var(--gris-nube);border-top:2px solid var(--azul);font-weight:800;color:var(--azul);height:38px}
.reporte tfoot td .rotulo{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);margin-right:10px}
.reporte tfoot td .valor.rojo{color:var(--rojo);font-size:12px}
.reporte tfoot td.num{font-size:14px}
/* Situación financiera en forma de cuenta: Activo a la izquierda, Pasivo + Patrimonio a la derecha; nombres largos envuelven */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr}
.dos-columnas > div:first-child{border-right:1px solid var(--borde)}
.dos-columnas .reporte td.num{width:140px}
.dos-columnas .reporte td.cuenta{white-space:normal;max-width:none;line-height:1.3;padding-top:4px;padding-bottom:4px}
@media(max-width:1100px){.dos-columnas{grid-template-columns:1fr}.dos-columnas > div:first-child{border-right:0}}
/* La ecuación contable al pie (las dos formas cierran igual) */
.ecuacion{display:flex;justify-content:center;align-items:baseline;gap:14px;padding:12px 16px;border-top:2px solid var(--azul);background:var(--azul-light);font-size:13px;color:var(--gris-acero);flex-wrap:wrap}
.ecuacion b{font-size:15px;color:var(--azul);font-variant-numeric:tabular-nums}
.ecuacion .op{font-size:15px;color:var(--gris-acero)}
/* Cambios en el patrimonio: matriz componentes × movimientos */
.reporte.ecp td.cuenta{min-width:240px;max-width:none}
.reporte.ecp td.num{width:auto;min-width:118px}
.reporte.ecp th.num{min-width:118px}
.reporte.ecp tr.mov td.cuenta .nom{font-weight:500;color:var(--tinta)}
.reporte.ecp tr.saldo td{background:var(--azul-light)}
.reporte.ecp tr.saldo td.cuenta .nom,.reporte.ecp tr.saldo td.num{font-weight:800;color:var(--azul)}
/* Subledger CxC / CxP (5d): la antigüedad son siete columnas de montos — la misma hoja de
   reporte con las cifras más juntas, como el ECP, para que quepan a 1366 px sin scroll */
.reporte.antiguedad td.num,.reporte.antiguedad th.num{width:112px;min-width:112px}
.reporte.antiguedad td.cuenta{min-width:230px}
.reporte.antiguedad td.cuenta .codigo{margin-left:8px;margin-right:0;color:var(--gris-acero)}
/* Aplicar: el monto se teclea dentro de la hoja, alineado con la columna de cifras */
.reporte input.monto-aplicar{width:100%;max-width:130px;text-align:right;font-variant-numeric:tabular-nums;
    font-size:13px;font-weight:600;color:var(--azul);padding:4px 6px;border:1px solid var(--borde);border-radius:4px;background:#FFFFFF}
.reporte input.monto-aplicar:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--azul);border-color:var(--azul)}
.reporte tr.fila-error td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
.campo-ayuda.rojo{color:var(--rojo);font-weight:600}
/* El número de asiento es la IDENTIDAD de la fila: ancho propio y nunca elipsado (la primera
   captura de 5d mostró «FAC-2026-0…» dos veces y parecían la misma factura). Lo que sí cede
   es el detalle, que es texto libre y para eso está `td.cuenta`. */
.reporte td.c-asiento{white-space:nowrap;max-width:none;width:1%}
.reporte td.c-asiento .nom{font-variant-numeric:tabular-nums;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12.5px}
.reporte td.c-asiento .pastilla{margin-left:6px}
/* El detalle es la columna que CEDE (texto libre), pero con un mínimo legible: la captura de
   5d la dejó en «Factura …», que no dice nada. Elipsa a partir de ahí. */
.reporte td.detalle{max-width:0;min-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta)}
.hoja .leyenda-arbol{padding:8px 16px 12px}
/* En la hoja angosta (una columna de montos) el contexto cede espacio para que las cifras y la pastilla queden en una línea */
.hoja:not(.hoja-ancha):not(.hoja-cuenta) .resumen-mayor .contexto-rango{max-width:34ch}

/* ============================================================================
   Reglas de contabilización (4d, 3-Sep-2026) — variante A: un bloque por
   concepto. La MISMA pantalla en los tres niveles; solo cambian la columna
   Origen y el botón de heredar. Prototipo: 2026-09-03_reglas-contabilizacion.html
   ========================================================================== */
.reglas-barra{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.reglas-cuenta{font-size:12px;color:var(--gris-acero)}
.reglas-cuenta b{color:var(--azul);font-variant-numeric:tabular-nums}
.reglas-acciones{margin-left:auto;display:flex;gap:8px;align-items:center}

.concepto{border-bottom:1px solid var(--borde)}
.concepto:last-child{border-bottom:0}
.concepto-cab{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--gris-nube);cursor:pointer;user-select:none}
.concepto-cab:hover{background:#EFF2F6}
.concepto-cab .flecha{color:var(--gris-acero);font-size:10px;width:10px;transition:transform .12s ease}
.concepto.cerrado .flecha{transform:rotate(-90deg)}
.concepto.cerrado .concepto-cuerpo{display:none}
.concepto-cab .nom{font-weight:700;color:var(--azul);font-size:14px}
/* La clave en código (CXC, IVA_DEBITO): es la que se escribe en la BD y en los MDs */
.concepto-cab .clave{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:10.5px;font-weight:500;
  color:var(--gris-acero);background:#FFFFFF;border:1px solid var(--borde);border-radius:5px;padding:1px 7px}
.concepto-cab .n{font-size:11.5px;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.concepto-cab .usa{font-size:11px;color:var(--gris-acero);margin-left:auto;white-space:nowrap}
.concepto-ayuda{padding:8px 16px 0;font-size:11.5px;color:var(--gris-acero);max-width:88ch;text-wrap:pretty;margin:0}

/* La columna de acciones va a ancho FIJO: con `auto`, la fila que trae «Quitar»
   se lleva más espacio y la pastilla de esa fila queda desalineada del resto. */
.regla{display:grid;grid-template-columns:34px 1fr 110px 240px;align-items:center;gap:10px;padding:0 16px;
  min-height:38px;border-top:1px solid var(--borde-suave)}
.regla:hover{background:#FAFBFC}
.regla:hover .acciones > *,.regla:focus-within .acciones > *{opacity:1}
.regla .pred{display:flex;justify-content:center}
.regla .pred input{accent-color:var(--naranja);width:15px;height:15px;cursor:pointer}
.regla .punto-pred{color:var(--naranja);font-size:13px}
.regla .cta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.regla .cta .codigo{margin-right:8px}
.regla .cta .nom{font-weight:500;color:var(--tinta)}
.regla.es-pred .cta .nom{font-weight:700;color:var(--azul)}
.regla .acciones{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.regla .acciones > *{opacity:0;transition:opacity .12s ease}
.regla .acciones form{display:inline}

.concepto-pie{display:flex;gap:10px;align-items:center;padding:9px 16px;border-top:1px solid var(--borde-suave);flex-wrap:wrap}
.concepto-pie .nota{font-size:11px;color:var(--gris-acero);margin-left:auto}
.enlace-accion .mas{color:var(--naranja);font-weight:800}
/* El vacío dice QUÉ SE PIERDE, no «sin datos» */
.vacio-concepto{padding:12px 16px;border-top:1px solid var(--borde-suave);font-size:12.5px;color:var(--gris-acero);text-wrap:pretty}

/* Un formulario de una sola acción dentro de una celda: no puede romper la grilla */
.en-linea{display:inline;margin:0}

/* En el modal de heredar, lo que todavía no se puede traer se ve y se explica */
.disponible .clave{font-size:11px;color:var(--azul);font-weight:700;min-width:120px}
.disponible.sin-cuenta{opacity:.55;cursor:default}
.disponible.sin-cuenta:hover{background:transparent}
.disponible .motivo{font-size:11px;color:var(--naranja-texto)}

/* ============================================================================
   Estilos de negocio y reglas CABYS (O2, 6-Sep-2026) — la misma pantalla en los
   tres niveles. Prototipo: Prototipos/2026-09-06_estilos-cabys.html.
   ============================================================================ */
.estilos-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--borde-suave)}
.estilos-cuenta{font-size:12.5px;color:var(--gris-acero)}
.estilos-cuenta b{color:var(--azul);font-variant-numeric:tabular-nums}
.estilos-acciones{margin-left:auto;display:flex;gap:8px;align-items:center}
.estilos-tabla td.nom .n{font-weight:700;color:var(--azul);text-decoration:none}
.estilos-tabla td.nom .n:hover{text-decoration:underline}
.estilos-tabla td.nom .clave{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:10.5px;font-weight:500;color:var(--gris-acero);background:var(--gris-nube);border:1px solid var(--borde);border-radius:5px;padding:1px 7px;margin-left:8px;vertical-align:middle}
.estilos-tabla td.nom .rotulo-base{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-texto);margin-left:8px;vertical-align:middle}
.estilos-tabla td.nom .d{display:block;font-size:11.5px;color:var(--gris-acero);max-width:70ch;text-wrap:pretty}
.estilos-tabla td.divs{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:11.5px;color:var(--tinta);white-space:nowrap}
.estilos-tabla td.divs .base{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--gris-acero);font-style:italic}
.estilos-tabla tr.es-base td{background:#FCFCFD}
.estilos-tabla tr.inactivo td.nom .n{color:var(--gris-acero)}
.estilos-leyenda{padding:10px 22px 14px;margin:0;font-size:11.5px;color:var(--gris-acero);max-width:92ch;text-wrap:pretty;border-top:1px solid var(--borde-suave)}
.estilos-leyenda b{color:var(--tinta)}
.motivo-sutil{font-size:11px;color:var(--gris-acero);margin-left:auto;font-variant-numeric:tabular-nums}
.disponible .motivo{font-size:11px;color:var(--naranja-texto)}
.disponible.sin-cuenta{opacity:.6}
.dos-columnas-fijas{grid-template-columns:1fr 1fr}

/* ---- el detalle de un estilo: cabecera y sus reglas ---- */
.estilo-cab{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--borde-suave);background:var(--gris-nube);flex-wrap:wrap}
.estilo-cab .volver{color:var(--azul);font-weight:700;text-decoration:none;font-size:12.5px}
.estilo-cab .volver:hover{text-decoration:underline}
.estilo-cab .titulo{font-weight:800;color:var(--azul);font-size:15px}
.estilo-cab .clave{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:10.5px;color:var(--gris-acero);background:#fff;border:1px solid var(--borde);border-radius:5px;padding:1px 7px}
.estilo-cab .sub{font-size:11.5px;color:var(--gris-acero)}
.estilo-cab .sub b{color:var(--tinta)}
.estilo-cab .derecha{margin-left:auto;display:flex;gap:8px}
.reglas-cabys{min-width:900px}
.regla-cabys{display:grid;grid-template-columns:108px minmax(240px,1.4fr) minmax(170px,1fr) minmax(170px,1fr) 88px 44px;align-items:center;gap:10px;padding:5px 22px;min-height:40px;border-top:1px solid var(--borde-suave)}
.regla-cabys.cab{min-height:32px;background:var(--gris-nube);border-top:0;border-bottom:1px solid var(--borde);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-acero)}
.regla-cabys:not(.cab):hover{background:#FAFBFC}
.regla-cabys .cab-cod{display:flex;flex-direction:column;line-height:1.2}
.regla-cabys .cab-cod .alc{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero)}
.regla-cabys .cab-cod.hoja .alc{color:var(--naranja-texto)}
.regla-cabys .desc{color:var(--tinta);font-size:12.5px;line-height:1.35;text-wrap:pretty}
.regla-cabys .desc .nota{display:block;font-size:11px;color:var(--gris-acero);font-style:italic}
.regla-cabys .cta{font-size:12.5px;line-height:1.35}
.regla-cabys .cta .nom{display:block}
.regla-cabys .cta .codigo{margin-right:6px}
.regla-cabys .cta .vacio-cta{color:var(--borde);font-weight:600}
.regla-cabys .cta.ausente .nom{color:var(--naranja-texto)}
.regla-cabys .cta .falta{font-size:10px;color:var(--naranja-texto);font-weight:700;display:block}
.regla-cabys.escalon-sep{min-height:30px;background:var(--gris-nube);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-acero);grid-template-columns:1fr}
.regla-cabys.escalon-sep b{color:var(--azul)}
.codigo-cabys{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:11.5px;font-weight:600;color:var(--azul)}
.vacio-regla{padding:14px 22px;border-top:1px solid var(--borde-suave);font-size:12.5px;color:var(--gris-acero)}
.reglas-cabys-pie{display:flex;gap:8px;align-items:center;padding:9px 22px;border-top:1px solid var(--borde-suave);flex-wrap:wrap}
.reglas-cabys-pie .nota{font-size:11px;color:var(--gris-acero);margin-left:auto}

/* ---- nivel 2: la tarjeta del estilo ---- */
.estilo-actual{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 22px;align-items:start}
.estilo-actual .eyebrow{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-acero)}
.estilo-actual .nombre{font-size:20px;font-weight:800;color:var(--azul);letter-spacing:-.01em;margin:2px 0 4px}
.estilo-actual .nombre .clave{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-size:10.5px;font-weight:500;color:var(--gris-acero);background:var(--gris-nube);border:1px solid var(--borde);border-radius:5px;padding:1px 7px;margin-left:8px;vertical-align:middle}
.estilo-actual .desc{font-size:12.5px;color:var(--tinta);max-width:70ch;text-wrap:pretty}
.estilo-actual .meta{display:flex;gap:18px;margin-top:10px;font-size:11.5px;color:var(--gris-acero);flex-wrap:wrap}
.estilo-actual .meta b{color:var(--tinta);font-variant-numeric:tabular-nums}
.estilo-actual .derecha{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.estilo-actual .derecha form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.estilo-actividad{display:flex;gap:10px;align-items:center;padding:10px 22px;border-top:1px solid var(--borde-suave);font-size:12.5px;color:var(--gris-acero);flex-wrap:wrap}
.estilo-actividad .codigo{color:var(--tinta)}
.estilo-actividad .prop{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.estilo-actividad form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.estilo-actividad select{max-width:min(100%,520px)}

/* ---- el modal de la regla CABYS ---- */
.modal-asignar{width:min(680px,calc(100vw - 32px))}
.cabys-sug{border:1px solid var(--borde);border-radius:6px;max-height:190px;overflow:auto;display:flex;flex-direction:column;margin-top:4px}
.cabys-sug button{display:grid;grid-template-columns:120px 1fr auto;gap:10px;text-align:left;border:0;border-bottom:1px solid var(--borde-suave);background:#fff;padding:6px 10px;font-size:12px;cursor:pointer;font-family:inherit;line-height:1.3}
.cabys-sug button:hover{background:var(--azul-light)}
.cabys-sug .lvl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);white-space:nowrap}
.cabys-alcance{display:flex;flex-direction:column;border:1px solid var(--borde);border-radius:8px;overflow:hidden}
.cabys-alcance label{display:grid;grid-template-columns:22px 118px 1fr auto;gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--borde-suave);font-size:12.5px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;color:var(--tinta)}
.cabys-alcance label:last-child{border-bottom:0}
.cabys-alcance label:hover{background:#FAFBFC}
.cabys-alcance label.elegida{background:var(--azul-light)}
.cabys-alcance input{accent-color:var(--naranja);width:15px;height:15px;margin:0}
.cabys-alcance .d{line-height:1.3}
.cabys-alcance .alc{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);white-space:nowrap}
.cabys-alcance label.hoja .alc{color:var(--naranja-texto)}

/* ---- nivel 0 · pestaña CABYS: el árbol del Banco Central ---- */
.cabys-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 22px;border-bottom:1px solid var(--borde-suave)}
.cabys-barra input{flex:1;min-width:220px;max-width:460px;padding:6px 10px;border:1px solid var(--borde);border-radius:6px;font-size:12.5px}
.cabys-barra input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}
.cabys-barra .ayuda{font-size:11.5px;color:var(--gris-acero);margin-left:auto}
.cabys-arbol{display:grid;grid-template-columns:260px 1fr;min-height:360px}
.cabys-gavetas{border-right:1px solid var(--borde-suave);padding:8px 0}
.cabys-gaveta{display:flex;gap:8px;align-items:baseline;padding:7px 14px;cursor:pointer;font-size:12.5px;color:var(--tinta);border-left:3px solid transparent}
.cabys-gaveta:hover{background:#FAFBFC}
.cabys-gaveta.activa{background:var(--azul-light);border-left-color:var(--naranja);font-weight:700;color:var(--azul)}
.cabys-gaveta .codigo-cabys{width:14px;flex-shrink:0}
.cabys-gaveta .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cabys-ruta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--borde-suave);font-size:12px;min-height:40px}
.cabys-ruta button{border:0;background:transparent;color:var(--azul);font-weight:600;cursor:pointer;padding:0;font-size:12px;font-family:inherit}
.cabys-ruta .sep{color:var(--borde)}
.cabys-ruta .aqui{color:var(--tinta);font-weight:700}
.cabys-nodo{display:grid;grid-template-columns:120px 1fr 110px 70px;gap:10px;align-items:center;padding:5px 16px;min-height:38px;border-bottom:1px solid var(--borde-suave);font-size:12.5px;cursor:pointer}
.cabys-nodo:hover{background:#FAFBFC}
.cabys-nodo .d{line-height:1.3}
.cabys-nodo .lvl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);white-space:nowrap}
.cabys-nodo .iva{text-align:right;font-weight:600;color:var(--azul);font-variant-numeric:tabular-nums}
.cabys-nodo .hijos{text-align:right;color:var(--gris-acero)}
.cabys-nodo.hoja{cursor:default}
.cabys-nodo.hoja .codigo-cabys{color:var(--tinta)}
.cabys-leyenda{padding:10px 22px 14px;margin:0;font-size:11.5px;color:var(--gris-acero);max-width:92ch;text-wrap:pretty;border-top:1px solid var(--borde-suave)}

/* ---- el menú de tres puntos de la fila (José, 7-Sep-2026): las acciones no roban espacio ---- */
.celda-menu{text-align:right;position:relative}
.menu-fila{position:relative;display:inline-block}
.menu-fila>summary{list-style:none;cursor:pointer;width:30px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--gris-acero);font-size:18px;font-weight:800;line-height:1;user-select:none}
.menu-fila>summary::-webkit-details-marker{display:none}
.menu-fila>summary:hover,.menu-fila[open]>summary{background:var(--azul-light);color:var(--azul)}
.menu-fila-panel{position:absolute;right:0;top:32px;z-index:20;min-width:210px;background:#fff;border:1px solid var(--borde);border-radius:8px;box-shadow:0 8px 24px rgba(15,25,35,.16);padding:6px;display:flex;flex-direction:column;gap:2px;text-align:left}
.menu-fila-panel .enlace-accion,.menu-fila-panel form{display:block;width:100%}
.menu-fila-panel form .enlace-accion{width:100%;text-align:left}
.menu-fila-panel .enlace-accion{text-align:left;padding:7px 10px}

/* ---- O3 · Movimientos del departamento (cobro / pago · notas · saldos iniciales) ---- */
.form-movimiento .tarjeta-cuerpo{padding:18px 22px}
.form-movimiento .avisos{padding:0 0 12px}
.form-movimiento .campo input.monto{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.form-movimiento .campo-tasa .dato-fijo{padding:6px 0}
.form-movimiento .grupo-campos .resumen-mayor{border:1px solid var(--borde-suave);border-radius:var(--radio-control);margin-bottom:8px}
table.reporte.aplicar-docs td.num input.monto-aplicar,
table.reporte input.monto-aplicar{width:130px;text-align:right;font-variant-numeric:tabular-nums;padding:5px 8px;border:1px solid var(--borde);border-radius:5px;font:inherit}
table.reporte input.monto-aplicar:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}
table.reporte tr.fila-error td{background:var(--rojo-light)}
table.reporte tr.fila-error td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
table.reporte td .mon{font-size:10.5px;color:var(--gris-acero);margin-left:4px}
.campo-ayuda.rojo{color:var(--rojo);font-weight:600}
.valor.rojo{color:var(--rojo)}
.valor.verde{color:var(--verde)}
/* La vista previa del Excel: los errores de la fila, todos juntos */
table.reporte.vista-previa ul.errores-fila{margin:0;padding-left:16px;color:var(--rojo);font-size:12px}
table.reporte.vista-previa td.detalle{white-space:normal;min-width:220px}
/* El menú «Más ▾» de la pestaña Movimientos se ve como botón */
.acciones details.menu-fila>summary.boton{width:auto;height:auto;font-size:12.5px;font-weight:600}

/* El atributo hidden gana SIEMPRE (O4, 10-Sep-2026): la clase con display:flex / grid le ganaba al atributo y los campos
   «T/C del documento» y «Banco o caja» se veían cuando no tocaban — la misma trampa que .menu-sub[hidden] cazó el 2-Sep. */
[hidden]{display:none!important}

/* ------------------------------------------------------------------ O4 · Ventas y Compras (10-Sep-2026)
   La bandeja es una tabla (los pendientes son pocos por naturaleza y el motivo NO se corta: nada se corta, José 7-Sep);
   la lista de comprobantes va sobre el grid; el comprobante reusa .form-movimiento y suma «la plata» y el resumen. */
table.bandeja td.motivo{white-space:normal;min-width:260px;max-width:52ch;font-size:12.5px;line-height:1.4;color:var(--tinta);text-wrap:pretty}
table.bandeja td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--azul);white-space:nowrap}
table.bandeja td .mon{font-size:10.5px;color:var(--gris-acero);margin-left:4px;font-weight:400}
table.bandeja td.c-fecha{white-space:nowrap;font-variant-numeric:tabular-nums}
table.bandeja td.col-acciones{white-space:nowrap}
table.bandeja td.col-acciones form.en-linea{display:inline}
.plata-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:12px}
.plata-opciones label{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--borde);border-radius:var(--radio-control);cursor:pointer;font-size:13px;font-weight:600;color:var(--tinta);background:#fff}
.plata-opciones label:has(input:checked){border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}
.plata-opciones label:has(input:disabled){cursor:default;background:var(--gris-nube)}
.plata-opciones label input{margin-right:6px}
.plata-opciones label small{font-size:11px;font-weight:400;color:var(--gris-acero);padding-left:22px}
.form-comprobante .grupo-lineas .zona-grid{margin-top:4px}
.form-comprobante .resumen-comprobante{border:1px solid var(--borde-suave);border-radius:var(--radio-control);margin-top:10px}
.form-comprobante .grid-mqs .c-num .monto.cero{color:var(--borde)}
.form-comprobante .grid-mqs .vacio{color:var(--gris-acero);font-size:11.5px}
.form-comprobante .grid-mqs .c-regla button{border:0;background:transparent;color:var(--azul);font-size:16px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.form-comprobante .grid-mqs .c-regla button:hover{background:var(--azul-light)}
.form-comprobante .campo input:disabled,.form-comprobante .campo select:disabled{background:var(--gris-nube);color:var(--gris-acero)}
/* La captura de Ventas (José, 10-Sep-2026): la etiqueta de contexto a la derecha (fecha · quién registra · T/C del día), los datos
   a la izquierda con la jerarquía tipo → cliente → condición…, y los totales en vivo a la derecha ocupando esa misma altura. */
.form-comprobante .doc-contexto{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--borde-suave);font-size:12px;color:var(--gris-acero)}
.form-comprobante .doc-contexto .dato{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.form-comprobante .doc-contexto .rotulo{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.form-comprobante .doc-contexto .valor{font-size:13px;font-weight:600;color:var(--tinta)}
.form-comprobante .doc-contexto .dato-fijo{padding:0;border:0;background:transparent;min-height:0;font-size:13px;font-weight:600;color:var(--tinta)}
.form-comprobante .doc-contexto #c-tasa-manual{width:130px;text-align:right;font-size:13px;padding:5px 9px;border:1px solid var(--borde);border-radius:6px}
.form-comprobante .venta-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:stretch;margin-top:14px}
.form-comprobante .venta-datos{min-width:0}
.form-comprobante .venta-datos .grupo-campos{margin-top:14px}
.form-comprobante .venta-totales{display:flex;flex-direction:column}
.form-comprobante .venta-totales .resumen-vertical{flex:1;justify-content:space-between}
.resumen-vertical{border:1px solid var(--borde);border-radius:var(--radio-control);background:var(--gris-nube);padding:14px 16px;display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
.resumen-vertical .dato{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.resumen-vertical .rotulo{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero)}
.resumen-vertical .valor{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinta)}
.resumen-vertical .dato.total{border-top:1px solid var(--borde);padding-top:10px;margin-top:2px}
.resumen-vertical .dato.total .rotulo{color:var(--azul)}
.resumen-vertical .dato.total .valor{font-size:20px;font-weight:800;color:var(--azul)}
@media(max-width:1100px){.form-comprobante .venta-cuerpo{grid-template-columns:1fr}}
/* Cada control mide lo que su contenido necesita (José, 10-Sep-2026): la fila envuelve y cada .campo es tan ancho como su dato; el
   select se mide solo por su opción más larga; el cliente es el triple del tipo (lo fija el JS); el plazo cabe 3 dígitos. */
.fila-campos{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:flex-start}
.fila-campos .campo{flex:0 0 auto;max-width:100%}
.fila-campos .salto{flex-basis:100%;height:0;margin:-14px 0 0}
.fila-campos select{width:auto;min-width:0;padding-right:32px}
.fila-campos input[type=date]{width:auto}
.fila-campos .campo-plazo input{width:5ch;text-align:right;box-sizing:content-box}
.fila-campos .campo-tc input{width:11ch;text-align:right;box-sizing:content-box}
.fila-campos .campo-numero input{width:24ch;box-sizing:content-box}
.fila-campos .campo-cliente input{width:100%;box-sizing:border-box}
.fila-campos .campo-cliente .campo-ayuda{white-space:normal}
/* El modal de la regla CABYS montado en la bandeja: la pregunta «¿dónde queda la decisión?» */
.destinos-asignacion label{cursor:pointer}
/* Nivel 1: la cifra y la columna de pendientes (O4) */
.cifra-numero.naranja{color:var(--naranja-texto)}
td.pendientes-celda{white-space:nowrap}
td.pendientes-celda form.en-linea{display:inline-block;margin-right:4px}
.pastilla-boton{border:0;cursor:pointer;font:inherit;font-size:11px;font-weight:600}
.pastilla-boton:hover{filter:brightness(.95)}

/* ====================================================================================================
   Jerarquía visual v1 (dirección B, 11-Sep-2026 — 01-Estilos §5b). Cinco niveles, sobre los tokens de siempre:
   ningún color nuevo; lo tenue se deriva del azul primario con color-mix.
   ==================================================================================================== */
.nivel-protagonista{font-size:14.5px;font-weight:600;color:var(--tinta)}
.nivel-contexto{font-size:12.5px;font-weight:400;color:var(--gris-acero)}
/* Nivel 3 (acción principal, una por pantalla) = .boton.boton-primario, que ya existe. */
.nivel-ghost{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--azul);background:transparent;border:0;border-radius:6px;padding:6px 10px;cursor:pointer;text-decoration:none;white-space:nowrap}
.nivel-ghost:hover{background:var(--azul-light)}
.nivel-ghost:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
.nivel-ghost.peligro{color:var(--rojo)}
.nivel-ghost.peligro:hover{background:var(--rojo-light)}
.nivel-estado{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:10px;line-height:1.5;white-space:nowrap}
.nivel-estado.ambar{background:var(--naranja-light);color:var(--naranja-texto)}
.nivel-estado.rojo{background:var(--rojo-light);color:var(--rojo)}
.nivel-estado.verde{background:var(--verde-light);color:var(--verde)}
/* Ancho de contenido: 1360 px, centrado a la derecha del menú (nunca scroll horizontal). */
.lienzo > *{width:100%;max-width:1360px;margin-inline:auto}
/* Naturaleza sin color: un punto de 7 px, relleno = deudora, hueco = acreedora. */
.nat-punto{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1.5px solid var(--azul);box-sizing:border-box}
.nat-punto.lleno{background:var(--azul)}
/* Cifras de resumen sin tarjeta, a la derecha del título. */
.cifras-inline{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;padding-top:6px}
.cifras-inline .cifra{padding:0;min-width:0;align-items:flex-end}
.cifras-inline .cifra-numero{font-size:20px}
.cifras-inline .cifra-rotulo{font-size:11px}
/* «¿Cómo funciona?»: el texto largo va a un popover, nunca fijo bajo el título. */
.popover{display:inline;position:relative}
.popover > summary{list-style:none;cursor:pointer;color:var(--azul);font-weight:600;display:inline}
.popover > summary::-webkit-details-marker{display:none}
.popover > summary:hover{text-decoration:underline;text-underline-offset:3px}
.popover-cuerpo{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:min(560px,80vw);background:#FFFFFF;border:1px solid var(--borde);border-radius:8px;box-shadow:var(--sombra-card);padding:14px 16px;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--tinta);text-wrap:pretty}

/* ---- la tarjeta del menú ES el selector de contribuyente (dirección B) ---- */
.contexto.selector{padding:0;position:relative}
.contexto-boton{width:100%;text-align:left;background:transparent;border:0;padding:11px 12px 12px;cursor:pointer;font:inherit;color:inherit;border-radius:8px}
.contexto-boton:hover{background:rgba(255,255,255,.06)}
.contexto-boton:focus-visible{outline:2px solid var(--naranja);outline-offset:-2px}
.contexto-chevron{font-size:11px;color:var(--navy-texto);margin-left:4px;display:inline-block;transition:transform .15s ease}
.contexto.selector.abierta .contexto-chevron{transform:rotate(180deg)}
.contexto-lista{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:25;background:#FFFFFF;border:1px solid var(--borde);border-radius:8px;box-shadow:var(--sombra-card);padding:6px;max-height:320px;overflow:auto}
.contexto-lista form{display:block}
.contexto-opcion{width:100%;text-align:left;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--tinta);background:transparent;border:0;border-radius:6px;padding:7px 9px;cursor:pointer;display:flex;gap:8px;align-items:baseline}
.contexto-opcion:hover{background:var(--azul-light);color:var(--azul)}
.contexto-opcion.actual{color:var(--azul)}
.contexto-opcion .codigo{font-size:11px}

/* ---- Catálogo de cuentas, patrón B (dirección B): control segmentado, árbol con chevrones y ficha a la derecha ---- */
.catalogo-b .herramientas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--borde-suave)}
.catalogo-b .herramientas-derecha{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.catalogo-b .herramientas .buscador{min-width:150px;max-width:190px;margin-right:4px}
.segmentado{display:inline-flex;background:var(--gris-nube);border-radius:8px;padding:3px;gap:2px;flex-wrap:wrap}
.segmento{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--gris-acero);background:transparent;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.segmento:hover{color:var(--azul)}
.segmento.activa{background:#FFFFFF;color:var(--azul);box-shadow:0 1px 2px rgba(8,22,40,.10)}
.segmento:focus-visible{outline:2px solid var(--naranja);outline-offset:1px}
/* O5a‑2b · la línea del documento bajo el título (Compras, y lo que entró con XML): Hacienda, la aceptación, Gasto / Compra, XML, PDF, el correo */
.linea-documento{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:8px;font-size:12.5px}
.linea-documento .dato{display:inline-flex;align-items:center;gap:6px}
.linea-documento .rotulo{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-acero)}
.linea-documento .segmentado,.grid-mqs .tabulator-cell .segmentado{padding:2px}
.linea-documento .segmento{padding:3px 9px;font-size:12px}
.grid-mqs .tabulator-cell .segmento{padding:2px 9px;font-size:12px}
.plan-b{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.plan-b .arbol-b{min-width:0;border-right:1px solid var(--borde-suave);overflow:auto;max-height:calc(100vh - 320px)}
.catalogo-b .arbol{width:100%}
.catalogo-b .arbol thead th{position:sticky;top:0;z-index:2}
.catalogo-b .arbol tbody tr{height:34px}
.catalogo-b .arbol tbody td{padding-top:0;padding-bottom:0;vertical-align:middle;border-top:1px solid var(--borde-suave)}
.catalogo-b .arbol .fila-n1{height:38px}
.catalogo-b .arbol .fila-n1 td{background:color-mix(in srgb, var(--azul) 5%, #FFFFFF);border-top:1px solid var(--borde)}
.catalogo-b .arbol .cuenta-celda{padding-left:calc(8px + (var(--nivel, 1) - 1) * 20px);padding-right:14px;white-space:nowrap;width:1%}
.catalogo-b .arbol .nombre-celda{padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:44%}
.catalogo-b .chevron{width:18px;height:18px;margin-right:6px;border:0;background:transparent;color:var(--gris-acero);font-size:12px;line-height:1;cursor:pointer;border-radius:4px;display:inline-grid;place-items:center;vertical-align:middle}
.catalogo-b .chevron:hover{background:var(--azul-light);color:var(--azul)}
.catalogo-b .chev-espacio{display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:middle}
.catalogo-b .arbol .codigo{color:var(--gris-acero);font-size:12px;font-weight:500}
.catalogo-b .arbol .fila-grupo .codigo,.catalogo-b .arbol .fila-grupo .nombre{color:var(--tinta)}
.catalogo-b .arbol .fila-grupo{cursor:default}
.catalogo-b .arbol .nombre{font-size:13.5px}
.catalogo-b .arbol .fila-n1 .nombre{font-size:14.5px;font-weight:700}
.catalogo-b .arbol .fila-n1 .codigo{font-weight:700;color:var(--tinta)}
.catalogo-b .arbol .fila-n2 .nombre{font-weight:600}
.catalogo-b .arbol .fila-n3 .nombre,.catalogo-b .arbol .fila-n4 .nombre{font-weight:500}
.catalogo-b .arbol .fila-n2 .codigo,.catalogo-b .arbol .fila-n3 .codigo,.catalogo-b .arbol .fila-n4 .codigo{font-weight:500}
.catalogo-b .arbol .fila-movimiento .nombre{font-weight:400;color:var(--gris-acero)}
.catalogo-b .arbol .fila-movimiento .codigo{color:var(--gris-acero);font-weight:400}
.catalogo-b .arbol .subcuentas{margin-left:8px}
.catalogo-b .arbol .nombre-celda .nivel-estado{margin-left:8px;vertical-align:1px}
.catalogo-b .arbol .nat-celda{white-space:nowrap;width:1%;padding-right:18px}
.catalogo-b .arbol .niif-celda{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:30%}
.catalogo-b .arbol tr.seleccionada td{background:color-mix(in srgb, var(--azul) 8%, #FFFFFF)}
.catalogo-b .arbol tr.seleccionada td:first-child{box-shadow:inset 3px 0 0 var(--azul)}
.catalogo-b .arbol:focus-visible{outline:2px solid var(--naranja);outline-offset:-2px}
.catalogo-b .arbol .fila-resaltada td{background:color-mix(in srgb, var(--azul) 8%, #FFFFFF)}
.ficha{padding:18px 20px;min-width:0}
.ficha-vacia{text-align:center;padding:48px 10px;margin:0}
.ficha-codigo{font-size:12px;color:var(--gris-acero)}
.ficha-nombre{font-size:19px;font-weight:800;color:var(--tinta);margin:4px 0 6px;line-height:1.2;overflow-wrap:anywhere}
.ficha-ruta{margin:0}
.ficha-datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 14px;margin:16px 0 0;font-size:13px}
.ficha-datos dt{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);align-self:center}
.ficha-datos dd{margin:0;color:var(--tinta);overflow-wrap:anywhere}
.ficha-nota{padding:10px 12px;border-radius:6px;background:var(--gris-nube);font-size:12px;line-height:1.45;margin:14px 0 0}
.ficha-acciones{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
.ficha-acciones form{display:contents}
.ficha-acciones .boton{align-self:stretch;text-align:center}
@media(max-width:1100px){.plan-b{grid-template-columns:1fr}.plan-b .arbol-b{border-right:0;max-height:none}}

/* ====================================================================================================
   Ventas · «Comprobante nuevo», ronda 4 (José, 11-Sep-2026 — «Tres caminos para la Factura»): sin las pestañas del módulo;
   dos columnas en 1360 (la izquierda flexible: Documento · Líneas; la derecha de 340 px FIJA al hacer scroll: contexto ·
   totales · pagos · acciones); el cliente primero y como tarjeta; las líneas con las columnas exactas; pagos con vuelto.
   Sobre los tokens de siempre y la jerarquía v1 (§5b): ningún color nuevo. El «Borrador» es nivel 5 gris (derivado de .p-gris).
   ==================================================================================================== */
.nivel-estado.gris{background:var(--borde-suave);color:var(--gris-acero)}
.venta-cabecera .titulo-linea{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.venta-cabecera .titulo-linea .nivel-estado{vertical-align:middle}
.venta-b{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.venta-izq{display:flex;flex-direction:column;gap:16px;min-width:0}
.venta-der{position:sticky;top:calc(var(--header-alto) + 16px)}
.venta-b .tarjeta-cuerpo{padding:18px 22px}
.venta-b .grupo-campos{margin-top:16px}
.venta-b .campo textarea{font-family:inherit;font-size:13.5px;color:var(--tinta);padding:9px 13px;border:1px solid var(--borde);border-radius:6px;background:#fff;resize:vertical;min-height:58px}
.venta-b .campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}
.venta-b .campo input:disabled,.venta-b .campo select:disabled,.venta-b .campo textarea:disabled{background:var(--gris-nube);color:var(--gris-acero)}
/* El cliente: el campo mide lo que necesita (y se estira hasta 520 px); elegido, se vuelve tarjeta con iniciales. */
/* min-width:0: el campo puede encogerse (la tarjeta del cliente recorta el nombre con «…» en vez de desbordar la fila). */
.fila-campos .campo-cliente-b{flex:1 1 340px;max-width:520px;min-width:0}
.fila-campos .campo-cliente-b input{width:100%;box-sizing:border-box;border-color:var(--azul)}
.fila-campos .campo-nombre-manual{flex:1 1 220px;max-width:320px;min-width:0}
.fila-campos .campo-nombre-manual input{width:100%;box-sizing:border-box}
.fila-campos .campo-razon{flex:1 1 260px;min-width:0}
.fila-campos .campo-razon input{width:100%;box-sizing:border-box}
.fila-campos .campo-tipo .nivel-contexto{font-size:11.5px}
.cliente-tarjeta{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--borde);border-radius:var(--radio-control);background:#fff;min-height:58px}
.cliente-iniciales{width:38px;height:38px;border-radius:50%;background:var(--azul-light);color:var(--azul);font-weight:800;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.cliente-datos{min-width:0;flex:1;line-height:1.3}
.cliente-datos .nivel-protagonista,.cliente-datos .nivel-contexto{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Las líneas: filas de 46 px (la descripción lleva su nivel 2 debajo), el total de línea en negrita. */
.venta-b .lineas-cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.venta-b .lineas-cabecera .grupo-titulo{margin:0}
.interruptor{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gris-acero);cursor:pointer;font-weight:600;white-space:nowrap}
.interruptor input{accent-color:var(--azul);margin:0;width:15px;height:15px}
.venta-b .grid-mqs .tabulator-row .tabulator-cell{min-height:46px}
.venta-b .grid-mqs .tabulator-row .tabulator-cell.tabulator-editing input{min-height:46px}
.venta-b .grid-mqs .linea-detalle{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.venta-b .grid-mqs .linea-detalle .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.venta-b .grid-mqs .linea-detalle .nivel-contexto{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.venta-b .grid-mqs .tabulator-cell .total-linea{font-weight:800;color:var(--tinta)}
.venta-b .grid-mqs .tabulator-cell .total-linea.cero{color:var(--borde);font-weight:400}
.venta-b .grid-mqs .tabulator-cell .vacio{color:#AEB7C0;font-size:12px}
.venta-b .grid-mqs .tabulator-row .tabulator-cell.c-n{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;color:#AEB7C0}
.venta-b .grid-mqs .editor-descuento{display:flex;align-items:center;height:100%;width:100%}
.venta-b .grid-mqs .editor-descuento input{flex:1;min-width:0}
.venta-b .grid-mqs .editor-descuento .tipo-desc{border:0;background:var(--gris-nube);color:var(--azul);font:inherit;font-size:12px;font-weight:700;width:28px;height:28px;border-radius:6px;margin-right:4px;cursor:pointer}
.venta-b .grid-mqs .editor-descuento .tipo-desc:hover{background:var(--azul-light)}
.venta-b .pie-lineas{display:flex;gap:2px;align-items:center;margin-top:10px;flex-wrap:wrap}
.venta-b .pie-lineas .derecha{margin-left:auto}
.venta-b .pie-lineas .nivel-ghost:disabled{color:var(--gris-acero);opacity:.6;cursor:default}
.venta-b .pie-lineas .nivel-ghost:disabled:hover{background:transparent}
/* El panel derecho: contexto arriba, totales (el Total protagonista), pagos, acciones. */
.venta-b .doc-contexto{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--borde-suave);font-size:12px;color:var(--gris-acero)}
.venta-b .doc-contexto .dato{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.venta-b .doc-contexto .rotulo{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.venta-b .doc-contexto .valor{font-size:12.5px;font-weight:600;color:var(--tinta);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.venta-b .doc-contexto .dato-fijo{padding:0;font-size:12.5px;font-weight:600;color:var(--tinta)}
.venta-b .doc-contexto #v-tasa-manual,.venta-b .doc-contexto .fecha-contable{width:130px;text-align:right;font:inherit;font-size:12.5px;padding:4px 8px;border:1px solid var(--borde);border-radius:6px}
.totales-b{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--borde-suave)}
.totales-b .dato{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.totales-b .rotulo{font-size:12px;color:var(--gris-acero)}
.totales-b .valor{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinta)}
.totales-b .dato.descuento .valor{color:var(--gris-acero);font-weight:400}
.totales-b .dato.total{border-top:1px solid var(--borde);padding-top:10px;margin-top:4px}
.totales-b .dato.total .rotulo{color:var(--azul);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.totales-b .dato.total .valor{font-size:24px;font-weight:800;color:var(--azul);letter-spacing:-.01em}
.venta-b #panel-pagos .grupo-titulo{margin-bottom:10px}
.fila-condicion{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fila-condicion .cond-select{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--borde);border-radius:6px;background:#fff}
.fila-condicion .nivel-ghost.activa{background:var(--azul-light)}
.bloque-credito{margin-top:10px}
.pago-fila{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--borde-suave)}
.pago-fila:first-child{border-top:0;padding-top:0}
.pago-medio,.pago-monto{display:flex;gap:6px;align-items:center}
.pago-medio .medio{flex:1;min-width:0}
.pago-medio .mon{flex:0 0 auto;width:auto}
.pago-monto .monto{flex:1;min-width:0}
.pago-fila select,.pago-fila input{font:inherit;font-size:12.5px;color:var(--tinta);padding:6px 8px;border:1px solid var(--borde);border-radius:6px;background:#fff;min-width:0;width:100%;box-sizing:border-box}
.pago-fila select:focus,.pago-fila input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,55,91,.10)}
.pago-fila input.monto{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.pago-fila .nivel-ghost.todo{padding:6px 6px;font-size:11.5px}
.pago-fila .quitar-pago{border:0;background:transparent;color:var(--gris-acero);cursor:pointer;font-size:12px;padding:6px;border-radius:5px}
.pago-fila .quitar-pago:hover{background:var(--rojo-light);color:var(--rojo)}
.pago-fila select:disabled,.pago-fila input:disabled{background:var(--gris-nube);color:var(--gris-acero)}
.venta-b #btn-pago{margin-top:8px;padding-left:0}
.franja{padding:9px 12px;border-radius:6px;font-size:12.5px;font-weight:600;margin-top:10px;line-height:1.35;text-wrap:pretty}
.franja.ambar{background:var(--naranja-light);color:var(--naranja-texto)}
.franja.verde{background:var(--verde-light);color:var(--verde)}
.franja.rojo{background:var(--rojo-light);color:var(--rojo)}
.franja.gris{background:var(--gris-nube);color:var(--gris-acero)}
.franja.grande{font-size:24px;font-weight:800;letter-spacing:-.01em}
.venta-b #pagos-nota{margin:8px 0 0;font-size:11.5px}
.acciones-b{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.acciones-b .boton{width:100%}
.acciones-b.secundarias{flex-direction:row;justify-content:flex-end;gap:2px;margin-top:10px}
.acciones-b.secundarias form{display:contents}
.venta-b .boton-primario:disabled{background:var(--borde);color:var(--gris-acero);cursor:not-allowed}
/* El combobox: la lista flota en <body>; grupos, coincidencia en azul, el dato secundario a la derecha. */
.sugerencias.flotante{position:absolute;z-index:40;margin:0;max-height:300px}
.sugerencias li.activa{background:var(--azul-light)}
.sugerencias li.grupo{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-acero);cursor:default;padding:7px 10px 2px}
.sugerencias li.grupo:hover{background:transparent}
.sugerencias li.vacio-sug{color:var(--gris-acero);cursor:default;font-size:12.5px}
.sugerencias li .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.sugerencias li .codigo{flex:0 0 auto}
.sugerencias li .sec{color:var(--gris-acero);font-size:11.5px;white-space:nowrap;flex:0 0 auto}
.sugerencias mark{background:transparent;color:var(--azul);font-weight:700}
.sugerencias li .nivel-estado{flex:0 0 auto}
/* La barra inferior del celular (M1): solo bajo 768 px. */
.barra-celular{display:none}
.venta-b .modal .rejilla-campos{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media(max-width:1100px){
  .venta-b{grid-template-columns:1fr}
  .venta-der{position:static}
}
/* ---- Correos recibidos (O5a‑2a): la dirección del buzón con «Copiar» y el detalle de un correo ---- */
.buzon-direccion{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap}
.buzon-direccion .nivel-ghost{padding:2px 8px;font-size:12px}
.buzon-linea{margin:4px 0 8px}
.buzon-linea .codigo{font-size:15px}
.tarjeta-buzon{margin-top:16px}
.correo-detalle{display:flex;flex-direction:column;gap:16px}
.correo-detalle .tarjeta-cuerpo:has(> .grupo-titulo:only-child){padding-bottom:0}
table.resultados-correo td{vertical-align:top}
table.resultados-correo td:first-child{min-width:170px}
table.resultados-correo td.detalle-celda{white-space:normal;min-width:280px;line-height:1.45}
table.resultados-correo .nom-archivo{overflow-wrap:anywhere}
/* El guion de «nada» dentro de una celda es un span.vacio: sin esto heredaba el padding de 44 px del estado vacío de página y
   el «—» quedaba corrido o caído (capturas de O5a‑2a; también la columna Pendientes de Contribuyentes y los grids). */
td > span.vacio, .tabulator-cell span.vacio{display:inline;padding:0}
.celda-con-extra{display:flex;align-items:baseline;gap:6px;min-width:0}
.celda-con-extra .nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mas-otros{flex:0 0 auto;white-space:nowrap}
.pie-tabla{margin:0;padding:10px 22px 14px}
pre.extracto{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:13px;line-height:1.5;color:var(--tinta);margin:0 0 8px;max-height:320px;overflow:auto;background:var(--gris-nube);border-radius:6px;padding:10px 12px}
.grid-mqs .tabulator-cell .nivel-estado{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
td.correos-celda .secundaria.cero{color:var(--borde)}
@media(max-width:767px){
  .venta-b .tarjeta-cuerpo{padding:14px 16px}
  .fila-campos .campo-cliente-b{flex-basis:100%;max-width:none}
  .acciones-b{margin-bottom:64px}
  .barra-celular{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--borde);padding:8px 12px;box-shadow:0 -4px 12px rgba(15,25,35,.08)}
  .barra-celular .franja{margin:0 0 8px}
  .barra-celular-fila{display:flex;align-items:center;gap:8px}
  .barra-celular .barra-total{font-size:18px;font-weight:800;color:var(--azul);flex:1;font-variant-numeric:tabular-nums}
  .lienzo{padding-bottom:88px}
}

/* O5a‑2c · las acciones de fila son botones-ícono (José, 14-Sep-2026: ▶ procesar, ✕ eliminar; 01-Estilos §7) */
.boton-icono{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--azul);cursor:pointer;padding:0;vertical-align:middle;text-decoration:none}
.boton-icono:hover{background:var(--azul-light)}
.boton-icono:disabled{color:var(--borde);cursor:default;background:transparent}
.boton-icono.primario{background:var(--azul);color:#fff}
.boton-icono.primario:hover{background:var(--azul-hover)}
.boton-icono.peligro{color:var(--rojo)}
.boton-icono.peligro:hover{background:var(--rojo-light)}
.boton-icono.sutil{color:var(--gris-acero)}
.boton-icono.sutil:hover{background:var(--borde-suave);color:var(--tinta)}
.boton .boton-icono-svg, .boton svg{vertical-align:-2px}
/* Recibidos: la vía y ▶ en la misma celda; la barra de lo seleccionado para procesar varios a la vez */
.celda-procesar{display:flex;align-items:center;gap:6px;width:100%}
.celda-procesar select{height:28px;padding:2px 6px;font-size:12.5px;min-width:0;flex:1 1 auto;max-width:180px}
.barra-lote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 22px;background:color-mix(in srgb, var(--azul) 5%, #FFF);border-bottom:1px solid var(--borde-suave)}
.barra-lote select{height:30px}