. */
.admin-shell .tabla-odoo td code,
.admin-shell .doc-table td code {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: .9em;
background: none;
padding: 0;
color: var(--ink-2);
white-space: nowrap;
}
/* Y el pequeno detalle que hace que una tabla se lea: la fila bajo el cursor. Ya existia;
aqui solo se asegura de que gane a la banda del encabezado sin taparla. */
.admin-shell .tabla-odoo tbody tr:hover td { background: var(--realce); }
/* =========================================================================================
LA CABECERA DE CADA PANTALLA DE MODULO
=========================================================================================
166 pantallas abren con la misma pieza —titulo a la izquierda, acciones a la derecha— y
se veia como un titulo suelto encima de un contenido suelto: nada decia donde empieza la
pantalla.
Ahora la cabecera se asienta sobre una banda y se separa con una linea, como en un
sistema de gestion de verdad. El titulo baja de tamano y sube de peso: en una pantalla de
trabajo, el titulo compite con la fila de botones que tiene al lado, y lo que hay que
leer primero es el boton.
EL CONTADOR SE VUELVE PASTILLA. Ya existia —«Suscripciones 142»— pero iba como texto
suelto pegado al titulo, del mismo color, y se leia como parte del nombre. En pastilla
monoespaciada se lee como lo que es: cuantos hay.
========================================================================================= */
.admin-shell .tbl-toolbar {
padding: .7rem .9rem;
margin-bottom: 1rem;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 11px;
}
.admin-shell .tbl-toolbar h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.012em; }
/* La primera columna —titulo y contador— se alinea entre si aunque el contador falte. */
.admin-shell .tbl-toolbar > div:first-child {
display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0;
}
/* Vacio no se pinta. El contador se rellena cuando llega la lista, asi que hasta
entonces era una pastilla con borde y nada dentro: se leia como un guion suelto pegado
al titulo, y en 27 pantallas. */
.admin-shell .tbl-count:empty { display: none; }
.admin-shell .tbl-count {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: .72rem; font-weight: 600;
color: var(--ink-2); background: var(--cream-2);
border: 1px solid var(--line); border-radius: 99px;
padding: .06rem .5rem;
font-variant-numeric: tabular-nums;
}
/* La caja de buscar de la barra: del mismo alto que los botones que tiene al lado. Antes
heredaba el alto de un campo de formulario y sobresalia medio centimetro por arriba y
por abajo de la fila. */
.admin-shell .tbl-search {
font: inherit; font-size: .85rem;
padding: .36rem .6rem;
border: 1px solid var(--line-2); border-radius: 8px;
background: var(--surface); color: var(--ink);
min-width: 13rem;
}
.admin-shell .tbl-search:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 2px var(--red-tint); }
/* Los grupos de pestanas dentro de una pantalla —«Suscripciones / Por plan / Cobros por
mes»—: se aprietan y se meten en una caja, para que se lean como un selector y no como
tres botones sueltos. */
.admin-shell .toggle-group {
display: inline-flex; gap: .15rem; padding: .2rem;
background: var(--cream-2); border: 1px solid var(--line); border-radius: 9px;
}
.admin-shell .toggle-group .toggle {
border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600;
color: var(--muted-2); padding: .3rem .7rem; border-radius: 7px; cursor: pointer;
}
.admin-shell .toggle-group .toggle:hover { color: var(--ink); }
.admin-shell .toggle-group .toggle.on { background: var(--red); color: #fff; }
/* =========================================================================================
LOS FORMULARIOS DE LOS MODULOS
========================================================================================= */
/* ---------- El aviso de arriba ----------
62 pantallas abren con un parrafo que explica de que va: «Las resenas quedan pendientes
hasta que las apruebas», «De aqui sale una sola poliza por corrida». Es lo primero que
hay que leer y lo llevaba la misma clase que las notas al pie de cada campo — mismo
tamano, mismo gris, misma nada. Asi que no se leia: se saltaba.
Ahora va en caja, con una marca. No en azul chillon: esto sale en 62 pantallas, y una
banda de color fuerte repetida sesenta y dos veces deja de significar «leeme» y pasa a
ser papel pintado. La marca de la izquierda es la que dice que hay algo que leer. */
/* NADA DE `display: grid` AQUI, y es un error que solo se ve mirando.
*
* El aviso es un con texto suelto y algun dentro: «Las resenas quedan
* pendientes hasta que las apruebas». Con grid, cada trozo de texto y
* cada se vuelve UNA CELDA propia, asi que la frase se partia en tres pedazos
* repartidos por la caja. No da error, no rompe nada: solo deja de ser una frase.
*
* El icono va colocado por encima con `absolute`, que es lo que hace falta: el texto se
* queda siendo texto y fluye entero. */
.admin-shell .aviso {
position: relative;
margin: 0 0 1.1rem;
padding: .7rem .9rem .7rem 2.15rem;
background: var(--cream);
border: 1px solid var(--line);
border-left: 3px solid var(--info-tinta);
border-radius: 0 10px 10px 0;
font-size: .855rem;
line-height: 1.55;
color: var(--ink-2);
max-width: 78ch;
}
.admin-shell .aviso::before {
content: "";
position: absolute; left: .82rem; top: .92rem;
width: 15px; height: 15px;
background: var(--info-tinta);
/* El icono como mascara y no como imagen de fondo: asi toma el color del token y sirve
en los dos temas sin tener que llevar dos archivos. */
-webkit-mask: var(--ico-info) center / contain no-repeat;
mask: var(--ico-info) center / contain no-repeat;
}
.admin-shell .aviso strong, .admin-shell .aviso b { color: var(--ink); font-weight: 600; }
.admin-shell .aviso a { color: var(--red-tinta); }
/* ---------- Las secciones de un formulario ----------
Un alta de empleado son cuatro secciones —quien es, su trabajo, si cobra por tabulador,
su seguridad social— y cada una se anunciaba con el mismo adorno de marca: una raya roja
corta. Cuatro rayas rojas en una pantalla dejan de marcar nada.
Aqui el encabezado de seccion hace lo que tiene que hacer: separar. Una linea que cruza
el ancho del formulario y el rotulo encima de ella. */
.admin-shell .form > .eyebrow {
display: block;
margin: .6rem 0 .1rem;
padding-bottom: .4rem;
border-bottom: 1px solid var(--line);
font-size: .68rem;
color: var(--muted-2);
}
.admin-shell .form > .eyebrow::before { display: none; }
/* La primera no necesita aire por arriba: ya lo pone la tarjeta. */
.admin-shell .form > .eyebrow:first-child { margin-top: 0; }
/* ---------- La rejilla de campos ----------
`1fr 1fr` fijo, sin excepcion para pantalla chica: en un telefono de 380px eso son dos
columnas de 170px con un desplegable dentro. Se desarma cuando ya no caben. */
@media (max-width: 620px) {
.form .row { grid-template-columns: 1fr; }
}
/* ---------- El pie del formulario ----------
El boton de guardar iba pegado al ultimo campo, con el mismo hueco que hay entre dos
campos: se leia como un campo mas. Una linea lo separa y lo convierte en lo que es, el
final. */
.admin-shell .form > .fila-acc,
.admin-shell .form > button[type="submit"] {
margin-top: .5rem;
padding-top: .9rem;
border-top: 1px solid var(--line);
}
.admin-shell .form > button[type="submit"] { justify-self: start; }
/* ---------- Las casillas ----------
Una casilla con su texto es UNA cosa, no dos: al ir sueltas, el texto no encendia la
casilla y habia que apuntar al cuadrito de 13px. */
.admin-shell .fila-chica {
display: flex; align-items: center; gap: .45rem;
font-size: .87rem; color: var(--ink-2);
}
.admin-shell label.fila-chica { cursor: pointer; }
.admin-shell .fila-chica input[type="checkbox"],
.admin-shell .fila-chica input[type="radio"] { margin: 0; flex: none; accent-color: var(--red); }
/* ---------- LOS DESPLEGABLES ----------
El navegador dibuja su propia caja en un `select`: gris, cuadrada, con una flechita
distinta en cada sistema operativo. Al lado de un campo de texto del panel -redondeado,
con su borde claro y su anillo de foco rojo- no se parecen en nada, y el formulario
deja de leerse como una sola cosa.
Los de dentro de un `.field` ya estaban resueltos. Los SUELTOS no -los de las barras de
herramientas, los filtros, el de «como se paga esta corrida»-, y son justamente los que
se ven en medio de una pantalla llena, sin un campo al lado que los disimule.
La flecha va en gris medio a proposito: es el unico color que se lee igual sobre el
fondo claro y sobre el oscuro sin tener que dibujarla dos veces. */
.admin-shell select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
font: inherit; font-size: .87rem;
padding: .42rem 1.9rem .42rem .6rem;
border: 1px solid var(--line-2); border-radius: 8px;
background-color: var(--surface); color: var(--ink);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23908981' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .6rem center;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.admin-shell select:hover { border-color: var(--muted-2); }
.admin-shell select:focus {
outline: none; border-color: var(--red);
box-shadow: 0 0 0 2px var(--red-tint);
}
.admin-shell select:disabled { opacity: .55; cursor: default; }
/* Los de dentro de un campo mantienen su alto, que va con el del input de al lado. */
.admin-shell .field select { padding: .48rem 1.9rem .48rem .6rem; font-size: .89rem; }
/* Y la barra de un reporte tiene los suyos mas bajos por su cuenta. */
.admin-shell .rep__barra select { padding-top: 0; padding-bottom: 0; }
/* ---------- UNA BARRA DE CONTROL SOBRE UNA TABLA ----------
Un `select` suelto en medio de la pagina, con una etiqueta a un lado y una nota al
otro, se lee como tres cosas sueltas puestas en fila. Metido en una tira con fondo
propio se lee como lo que es: un control que manda sobre la tabla de debajo. */
.admin-shell .barra-ctrl {
display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem;
padding: .55rem .75rem;
background: var(--realce);
border: 1px solid var(--line); border-radius: 10px;
}
.admin-shell .barra-ctrl > label {
font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--muted); margin: 0;
}
.admin-shell .barra-ctrl .form__note { flex: 1 1 14rem; margin: 0; font-size: .78rem; }
/* ---------- COMO SE LE PAGA A CADA QUIEN ----------
Iba como texto corrido y se partia en tres renglones -«Transferencia / electronica /
sin cuenta»-, que en una tabla de cuatrocientas filas es lo que hace que una columna
deje de poder leerse de un vistazo.
Va en una pastilla que NO SE PARTE, con un punto de color delante. Y el color dice
algo: el efectivo va en ambar porque casi siempre significa que a esa persona le falta
la CLABE, que es justo la fila que hay que mirar antes de timbrar. */
.paga {
display: inline-flex; align-items: center; gap: .35rem;
padding: .12rem .5rem .12rem .42rem;
border: 1px solid var(--line-2); border-radius: 999px;
background: var(--surface);
font-size: .78rem; line-height: 1.55; white-space: nowrap;
}
.paga::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--muted); flex: none;
}
.paga--banco::before { background: var(--ok-tinta); }
.paga--efectivo::before { background: var(--aviso-tinta); }
.paga--vale::before { background: var(--info-tinta); }
.paga--nada { color: var(--muted); border-style: dashed; }
.paga--nada::before { display: none; }
/* DE QUIEN ES LA DECISION. Una forma de pago que viene de la ficha de una persona no la
cambia el selector de arriba; sin decirlo, quien lo mueva esperara que cambie toda la
columna y creera que el selector no funciona. */
.paga__ficha { font-weight: 700; color: var(--aviso-tinta); }
/* ---------- LA BARRA DE ACCIONES ----------
Once botones iguales repartidos en dos o tres filas no son un menu: son una pared, y
quien la mira tiene que leerla entera cada vez para encontrar la que toca -que casi
siempre es UNA-.
Aqui el orden significa algo: primero EL PASO QUE TOCA -en rojo-, despues lo que se usa
en cada corrida, y el resto en «Mas». Y CABE EN UNA FILA, que no es estetica: la
segunda fila empuja la tabla fuera de la pantalla, y la tabla es lo que hay que mirar
antes de emitir cuatrocientos comprobantes. */
.admin-shell .barra-acc {
display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
}
/* El de «Mas» se va al final de la fila: es el cajon, no una accion mas. */
.admin-shell .barra-acc .mas { position: relative; margin-left: auto; }
/* El cajon. Se abre por encima de todo lo demas, asi que necesita salirse de la barra:
dentro del flujo empujaria la tabla hacia abajo cada vez que se abre. */
.admin-shell .mas__panel {
position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40;
min-width: 15rem; padding: .35rem 0;
background: var(--tarjeta); border: 1px solid var(--line-2); border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.admin-shell .mas__titulo {
font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); padding: .5rem .8rem .25rem;
}
/* Los titulos no son adorno: sin ellos son ocho renglones seguidos y hay que leerlos
todos igual que antes. El primero no lleva linea encima porque no separa nada. */
.admin-shell .mas__titulo + .mas__titulo,
.admin-shell .mas__item + .mas__titulo { border-top: 1px solid var(--line); margin-top: .3rem; }
.admin-shell .mas__item {
display: block; width: 100%; text-align: left;
font: inherit; font-size: .86rem; color: var(--ink);
background: none; border: 0; padding: .45rem .8rem; cursor: pointer;
}
.admin-shell .mas__item:hover { background: var(--realce); }
.admin-shell .mas__item:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
/* ---------- UN CUADRO CON MUCHOS CAMPOS CORTOS ----------
Doce campos numericos, uno por fila y del ancho de la pantalla, para escribir un «2»:
hay que desplazarse para ver lo que cabria de un vistazo, y el tamanio de la caja
promete un dato largo que no existe. La caja tiene que decir cuanto se espera dentro.
`auto-fit` con un minimo, y no un numero fijo de columnas: en un movil cae a una y en
una pantalla ancha reparte cuatro, sin una consulta de medios por cada caso. */
.pm-body--rejilla {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: .5rem .9rem;
align-items: start;
}
/* Las notas y los titulos son separaciones, no campos: ocupan la fila entera. */
.pm-body--rejilla > .form__note,
.pm-body--rejilla > .pm-grupo { grid-column: 1 / -1; }
.pm-body--rejilla .field { margin: 0; }
.pm-body--rejilla .field label { font-size: .78rem; }
.pm-body--rejilla .field input { padding: .42rem .55rem; font-size: .88rem; }
/* El titulo de cada grupo. Con doce campos seguidos hay que leerlos todos para encontrar
el que se viene a cambiar; agrupados se va directo al grupo. */
.pm-grupo {
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted);
margin: .7rem 0 -.1rem;
padding-top: .7rem;
border-top: 1px solid var(--line);
}
/* El primero no lleva linea encima: no separa nada de nada. */
.pm-body--rejilla > .pm-grupo:first-of-type { margin-top: .2rem; padding-top: 0; border-top: 0; }
/* Y la caja se ensancha, porque ahora cabe mas en cada fila. */
.pm-caja--ancha { max-width: min(46rem, 94vw); }
/* ---------- LA ULTIMA COLUMNA SE QUEDA A LA VISTA ----------
La tabla de una corrida tiene catorce columnas -dias, SD, SBC, gravado, exento, ISR,
IMSS, otros, percepciones, neto, como se le paga, folio fiscal- y no cabe. Eso no seria
grave si lo que se corta fuera un numero mas: lo que se corta son los BOTONES, y
entonces «Recibo» y «Editar» dejan de existir para quien mira.
No se ve como una tabla ancha, se ve como una pantalla incompleta: el desplazamiento
horizontal esta abajo del todo, fuera de la vista, y nadie lo busca.
La ultima columna se pega a la derecha y viaja con el desplazamiento. Se le pone fondo
propio -si no, el texto de las columnas de abajo se le transparenta encima- y una linea
a la izquierda, que es lo que dice que ahi hay mas tabla debajo. */
.admin-shell .tabla-scroll { position: relative; }
.admin-shell .tabla-scroll > .tabla-odoo th:last-child,
.admin-shell .tabla-scroll > .tabla-odoo td:last-child {
position: sticky; right: 0; z-index: 3;
background: var(--tarjeta);
border-left: 1px solid var(--line-2);
}
/* El encabezado de esa columna se pega en las dos direcciones a la vez, asi que necesita
quedar por encima del resto del encabezado, que ya es pegajoso por su cuenta. */
.admin-shell .tabla-scroll > .tabla-odoo thead th:last-child {
z-index: 5; background: var(--tabla-cab); color: var(--tabla-cab-tinta);
}
/* Y la de las casillas, a la izquierda: marcar a alguien despues de desplazarse a la
derecha obligaba a volver para encontrar su fila. */
.admin-shell .tabla-scroll > .tabla-odoo th.col-check,
.admin-shell .tabla-scroll > .tabla-odoo td.col-check {
position: sticky; left: 0; z-index: 3;
background: var(--tarjeta);
border-right: 1px solid var(--line-2);
}
.admin-shell .tabla-scroll > .tabla-odoo thead th.col-check {
z-index: 5; background: var(--tabla-cab);
}
/* ---------- EL ENCABEZADO DE UNA CORRIDA SE QUEDA ----------
Una corrida son cuatrocientas filas de numeros. Al tercer desplazamiento ya no se sabe
si la columna que se esta leyendo es el ISR o el IMSS, y para averiguarlo hay que subir
hasta el encabezado -perdiendo de vista la fila de la persona- y volver a bajar.
SE PEGA AL BORDE DE SU PROPIA CAJA, NO A LA VENTANA. Lo intente con `top: var(--techo)`
y salia MAL: `--techo` mide la barra de arriba, pero entre esa barra y la tabla hay dos
bandas mas -la cuenta con la que se paga y como se paga- que si se van al desplazar.
El encabezado se quedaba clavado a media pantalla, con filas por encima y por debajo, y
eso se ve peor que no tenerlo: parece que la tabla se partio en dos.
Con la tabla en su propia caja de alto limitado no hay nada que calcular: el
encabezado se para en el borde de la caja, que es un sitio que siempre existe, y las
filas corren por debajo. Setenta por ciento del alto de la ventana deja ver el
encabezado, unas quince filas y el final de la pagina a la vez. */
.admin-shell #nmcRecibos > .tabla-wrap {
max-height: 70vh;
overflow: auto;
}
.admin-shell #nmcRecibos .tabla-odoo thead th {
position: sticky;
top: 0;
z-index: 4;
}
/* Las dos columnas pegadas a los lados necesitan quedar por encima del encabezado en su
cruce, o el texto de una se ve a traves de la otra. */
.admin-shell #nmcRecibos .tabla-odoo thead th:last-child,
.admin-shell #nmcRecibos .tabla-odoo thead th.col-check { z-index: 6; }
.admin-shell #nmcRecibos .tabla-odoo td:last-child,
.admin-shell #nmcRecibos .tabla-odoo td.col-check { z-index: 3; }
}
/* ===== A QUE CUENTA VA CADA COSA (polizas automaticas) =====
* Cincuenta y ocho cuentas. En una columna a lo ancho de la pantalla habria que bajar
* cincuenta y ocho veces para encontrar la que se viene a cambiar, y cada caja mediria
* media pantalla para escribir «601-001». */
.pca-bloque { margin-bottom: 1rem; }
.pca-grupo { margin-top: .9rem; }
.pca-grupo h5 { margin: 0 0 .45rem; font-size: .78rem; text-transform: uppercase;
letter-spacing: .05em; color: var(--ink-2); font-weight: 600; }
.pca-rej { display: grid; gap: .5rem .9rem;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pca-campo { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.pca-campo__t { font-size: .82rem; color: var(--ink); line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pca-campo input { width: 100%; padding: .32rem .5rem; font-size: .84rem;
font-variant-numeric: tabular-nums; }
/* La de fabrica SIEMPRE visible: una caja con un numero dentro no dice si ese numero lo
* puso alguien o venia puesto, y esa diferencia es justo lo que se viene a mirar. */
.pca-campo__f { font-size: .68rem; color: var(--ink-3, var(--ink-2)); line-height: 1.2; }
.pca-campo__n { font-size: .74rem; color: var(--ink-2, inherit); line-height: 1.25; min-height: 1em; }
.pca-campo__n--mal { color: var(--danger, #b42318); }
.pca-campo--propia .pca-campo__t::after { content: ' \2022'; color: var(--brand, #1f6feb); }
.pca-campo--propia input { border-color: var(--brand, #1f6feb); }
.pca-campo--propia .pca-campo__f { color: var(--brand, #1f6feb); }
/* ===== LA REPRESENTACIÓN IMPRESA DE UN CFDI =====
*
* El comprobante es el XML; esto es el papel. El SAT obliga a que lleve el folio fiscal,
* los dos números de certificado, los dos sellos, la cadena original del timbre y el QR,
* y todo eso son cadenas de cuatrocientos caracteres: en una línea corrida se salen de la
* hoja, y lo que se sale de la hoja al imprimir no existe. */
.doc-fiscal {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: .45rem 1.2rem; margin: 1rem 0;
padding: .7rem .85rem; border: 1px solid var(--doc-raya); border-radius: 6px;
}
.doc-fiscal div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.doc-fiscal span { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--doc-apagado); }
.doc-fiscal b { font-size: .86rem; font-variant-numeric: tabular-nums; word-break: break-word; }
/* Emisor y receptor uno al lado del otro: es la primera comparación que hace quien mira
* un comprobante, y en dos bloques seguidos hay que subir y bajar para hacerla. */
.doc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 560px) { .doc-dos { grid-template-columns: 1fr; } }
.doc-sellos { margin-top: 1.4rem; border-top: 1px solid var(--doc-raya); padding-top: .9rem; }
.doc-sellos h6 {
font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--doc-apagado); margin: .8rem 0 .25rem; font-weight: 600;
}
/* `break-all` y no `break-word`: un sello es un solo «palabra» de cuatrocientos
* caracteres sin un hueco donde partirlo, así que sin esto sale una línea que se escapa
* de la hoja. Y en monoespaciada porque lo que se hace con esto es COMPARARLO carácter a
* carácter contra el del XML. */
.doc-sellos pre {
margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .58rem; line-height: 1.35; white-space: pre-wrap; word-break: break-all;
color: var(--doc-tinta-2, var(--doc-apagado));
}
/* El QR va arriba, junto al folio: es por donde se comprueba el papel, y escondido al pie
* en dos centímetros no lo enfoca ningún teléfono. */
.doc-head .meta svg { display: inline-block; border: 1px solid var(--doc-raya); border-radius: 4px; }
/* ===== UNA TABLA QUE SE CAPTURA COMO UNA TABLA =====
* La tarifa del ISR, la prima quinquenal, las fuentes de financiamiento. Se capturaban
* escribiendo su JSON en una caja de texto, y una coma de más tiraba el ajuste entero sin
* decirlo. Las celdas van apretadas a propósito: son números cortos, y una caja del ancho
* de la pantalla para escribir «1.92» promete un dato largo que no existe. */
.te-tabla td { padding: .2rem .25rem; }
.te-tabla th { padding: .4rem .35rem; white-space: nowrap; }
.te-tabla input {
width: 100%; min-width: 5.5rem; padding: .3rem .45rem; font-size: .85rem;
font-variant-numeric: tabular-nums;
}
/* Los números a la derecha, como en cualquier tabla de importes: el 1 no puede quedar más
angosto que el 8 o las columnas dejan de poder compararse de un vistazo. */
.te-tabla input.num { text-align: right; }
.te-suf { color: var(--ink-3, var(--ink-2)); font-weight: 400; }
/* De qué empresa es el registro patronal que se está capturando. Va pegado a la etiqueta
y no en una nota debajo: es una aclaración sobre ESE campo, y una nota más en una
pantalla que ya tiene treinta no la lee nadie. */
.rp-de { font-weight: 400; font-size: .8rem; color: var(--brand, #1f6feb); }
/* Un KPI sobre el que hay que HACER algo —lo que falta por facturar— no puede pintarse
igual que los demás: se lee como un dato más y no lo mira nadie. */
.kpi--mal .kpi__value { color: var(--red, #C1272D); }
.kpi--mal { border-color: color-mix(in srgb, var(--red, #C1272D) 35%, transparent); }
/* ===== LA FICHA DE UNA VENTA (pedido o factura) =====
Al abrir un documento: arriba el camino de la venta y lo que se puede hacer; a la
izquierda el documento, sus cobros y lo que ampara; a la derecha su historial. En
pantalla angosta el historial baja, no se aprieta. */
.ficha-cab { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 .9rem; }
.ficha-cab h2 { margin: 0; font-size: 1.5rem; }
.ficha-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .ficha-grid { grid-template-columns: minmax(0, 1fr); } }
.ficha-caja { background: var(--tarjeta); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; margin: 0 0 1rem; min-width: 0; }
.ficha-caja h4 { margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1.2rem; }
.ficha-datos div span { display: block; font-size: .75rem; color: var(--muted); }
/* El camino: cada paso hecho, el actual o el que falta. Cancelada lo corta en rojo. */
.camino { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--tarjeta); }
.camino-paso { flex: 1 1 140px; padding: .55rem .8rem; border-right: 1px solid var(--line); color: var(--muted); min-width: 0; }
.camino-paso:last-child { border-right: 0; }
.camino-paso b { display: block; font-size: .85rem; }
.camino-paso small { display: block; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camino-paso.hecho { color: var(--ok-tinta); background: var(--ok-fondo); }
.camino-paso.actual { color: var(--ink); background: var(--aviso-fondo); box-shadow: inset 0 -3px 0 var(--aviso-tinta); }
.camino-paso.cancelado { color: var(--mal-tinta); background: var(--mal-fondo); }
/* El historial: lo más reciente arriba, con quién lo hizo. */
.historial { list-style: none; margin: 0; padding: 0; }
.historial-item { position: relative; padding: 0 0 .8rem 1rem; border-left: 2px solid var(--line); margin-left: .3rem; font-size: .85rem; }
.historial-item::before { content: ''; position: absolute; left: -6px; top: .2rem; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.historial-item.error::before { background: var(--mal-tinta); }
.historial-item small { display: block; color: var(--muted); font-size: .75rem; }
/* Las hojas del SAT en Impuestos: menu de regimenes y formulario, como en el SAT. */
.hojas-sat { display: grid; grid-template-columns: 260px 1fr; min-height: 420px; }
.hs-menu { border-right: 1px solid var(--line); padding: .4rem 0; }
.hs-menu button { display: block; width: 100%; text-align: left; padding: .55rem 1rem; background: none; border: 0;
color: inherit; font: inherit; font-size: .9rem; cursor: pointer; border-left: 3px solid transparent; }
.hs-menu button:hover { background: var(--realce); }
.hs-menu button[aria-current="true"] { background: var(--realce); border-left-color: var(--red); font-weight: 600; }
.hs-grupo { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .9rem 1rem .3rem;
border-top: 1px solid var(--line); margin-top: .3rem; }
.hs-tuyo { font-size: .68rem; color: var(--red-tinta); font-weight: 600; margin-left: .3rem; }
.hs-cont { padding: 1rem 1.15rem; min-width: 0; }
.hs-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.hs-tabla td.r, .hs-tabla th.r { text-align: right; }
.hs-tabla th:nth-child(2), .hs-tabla td:nth-child(2), .hs-tabla th:nth-child(3), .hs-tabla td:nth-child(3) { width: 24%; white-space: nowrap; }
.hs-tabla input { width: 100%; max-width: 12rem; text-align: right; }
.hs-tabla .hs-fuerte td { font-weight: 600; }
.hs-calc { font-variant-numeric: tabular-nums; }
.hs-cont .tabla-odoo td:not(:first-child) { white-space: nowrap; }
.hs-dif { color: var(--red-tinta); font-weight: 600; }
.hs-avisos { margin: 0 0 .8rem; padding-left: 1.1rem; color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) {
.hojas-sat { grid-template-columns: 1fr; }
.hs-menu { border-right: 0; border-bottom: 1px solid var(--line); max-height: 14rem; overflow: auto; }
}
/* ===================== IMPLEMENTACIÓN Y SERVICIOS (/implementacion) =====================
* Lo que se contrata además del sistema: horas de asistencia, horas de implementación
* especial y maquila de nómina. Va en su propia página y no en los planes de la portada:
* no son lo que cuesta usar Kern, son ayuda opcional. */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; align-items: stretch; }
.svc { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 2rem 1.7rem 1.8rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: transform .2s, box-shadow .2s; }
.svc:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(27,23,20,.08); }
.svc--destacado { border-color: var(--red); box-shadow: 0 18px 48px rgba(var(--red-rgb),.14); }
.svc__tag { position: absolute; top: -12px; left: 1.7rem; background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 999px; }
.svc__icono { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--red-tint); color: var(--red-tinta); }
.svc__icono svg { width: 24px; height: 24px; }
.svc h3 { font-size: 1.25rem; margin: .2rem 0 0; }
.svc__que { color: var(--muted); margin: 0; }
.svc__precio { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .2rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--line); }
.svc__precio span { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--ink); line-height: 1; }
.svc__precio small { color: var(--muted); font-size: .9rem; }
.svc__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; flex: 1; }
.svc__lista li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.svc__lista li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .4rem; border-left: 2px solid var(--red-tinta); border-bottom: 2px solid var(--red-tinta); transform: rotate(-45deg); }
.svc__ideal { margin: .6rem 0 0; padding: .7rem .9rem; border-radius: 10px; background: var(--cream); color: var(--ink-2); font-size: .9rem; }
.svc__pie { text-align: center; color: var(--muted); margin: 1.8rem auto 0; max-width: 720px; }
.horas { max-width: 780px; margin: 2.2rem auto 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.horas__fila { display: flex; justify-content: space-between; gap: 1.2rem; align-items: center; padding: 1rem 1.3rem; border-top: 1px solid var(--line); }
.horas__fila:first-child { border-top: none; }
.horas__fila b { white-space: nowrap; color: var(--red-tinta); }
.svc-cta { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 2.2rem 2.4rem; border-radius: 20px; background: var(--ink-band, #1B1714); color: #F2EAE0; }
.svc-cta h2 { color: #F2EAE0; margin: 0 0 .4rem; }
.svc-cta p { color: #CFC4B6; margin: 0; }
/* En la portada: la franja que lleva a esta página. */
.svc-banda { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 2.2rem auto 0; padding: 1.3rem 1.6rem; border: 1px dashed var(--line-2, var(--line)); border-radius: 16px; background: var(--cream); }
.svc-banda p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } .horas__fila { flex-direction: column; align-items: flex-start; } .svc-cta { padding: 1.6rem; } }
/* ===== Organigrama (panel de nómina) =====
* Árbol con listas anidadas y conectores de CSS puro: sin librerías. El lienzo es el
* que se desplaza a lo ancho; la página nunca. El zoom usa `zoom` y no `transform`,
* porque `zoom` sí cambia el tamaño que ocupa y el desplazamiento sigue cuadrando. */
.org-zoom { gap: .4rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.org-zoom span { min-width: 3.2rem; text-align: center; font-size: .85rem; color: var(--muted); }
.org-lienzo { max-width: 100%; overflow: auto; background: var(--cream); border: 1px solid var(--line);
border-radius: 14px; padding: 1.2rem .6rem; max-height: 75vh; -webkit-overflow-scrolling: touch; }
.org-arbol { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: max-content; min-width: 100%; }
.org-arbol ul { display: flex; justify-content: center; padding: 1.1rem 0 0; margin: 0; position: relative; list-style: none; }
.org-arbol ul.org-raiz { padding-top: 0; }
.org-arbol li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 1.1rem .4rem 0; }
.org-arbol ul.org-raiz > li { padding-top: 0; }
/* Los conectores: una raya horizontal sobre cada hermano y una vertical hacia su caja. */
.org-arbol li::before, .org-arbol li::after { content: ''; position: absolute; top: 0; width: 50%; height: 1.1rem; border-top: 2px solid var(--line-2); }
.org-arbol li::before { right: 50%; }
.org-arbol li::after { left: 50%; border-left: 2px solid var(--line-2); }
.org-arbol li:first-child::before, .org-arbol li:last-child::after { border-top: 0; }
.org-arbol li:only-child::before { display: none; }
.org-arbol li:only-child::after { border-top: 0; }
.org-arbol li:first-child::after { border-top-left-radius: 8px; }
.org-arbol li:last-child::before { border-right: 2px solid var(--line-2); border-top-right-radius: 8px; }
.org-arbol ul.org-raiz > li::before, .org-arbol ul.org-raiz > li::after { display: none; }
/* Y la vertical que baja de la caja del jefe hacia sus hijos. */
.org-arbol li > ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 1.1rem; border-left: 2px solid var(--line-2); }
.org-caja { position: relative; display: flex; flex-direction: column; gap: .1rem; min-width: 9.5rem; max-width: 13rem;
padding: .6rem .8rem .7rem; background: var(--tarjeta); border: 1px solid var(--line-2); border-top: 3px solid var(--red);
border-radius: 10px; box-shadow: var(--shadow-sm); text-align: center; }
.org-nombre { font-weight: 600; color: var(--ink); font-size: .9rem; line-height: 1.2; }
.org-puesto { color: var(--ink-2); font-size: .8rem; line-height: 1.25; }
.org-depto { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.org-nota { color: var(--aviso-tinta); font-size: .72rem; }
.org-caja--vacante { background: transparent; border: 2px dashed var(--aviso-tinta); border-top-width: 2px; box-shadow: none; }
.org-caja--vacante .org-nombre { color: var(--aviso-tinta); }
.org-caja--ciclo { border-color: var(--mal-tinta); border-top-color: var(--mal-tinta); background: var(--mal-fondo); }
.org-toggle { position: absolute; left: 50%; bottom: -.8rem; transform: translateX(-50%); z-index: 1; min-width: 1.6rem; height: 1.6rem;
padding: 0 .35rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
font: 600 .75rem/1 var(--font-sans); cursor: pointer; }
.org-toggle:hover { background: var(--realce); }
.org-caja:has(.org-toggle) { margin-bottom: .5rem; }
@media (max-width: 640px) {
.org-caja { min-width: 7.5rem; max-width: 10rem; padding: .5rem .55rem .6rem; }
.org-lienzo { max-height: 65vh; }
}
/* La hoja impresa: se abre aparte (orgImprimir) y va en papel blanco y apaisado. */
.org-impresion { background: #fff; color: #111; padding: 1rem; }
.org-impresion__titulo { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 .2rem; }
.org-impresion__fecha { color: #555; font-size: .85rem; margin: 0 0 1rem; }
.org-impresion .org-toggle { display: none; }
.org-impresion .org-caja { box-shadow: none; break-inside: avoid; }
/* Página con nombre: un `@page { size: landscape }` suelto se aplicaba a TODO lo que se
imprime en el sitio (pólizas, manual, cotizaciones) y los ponía apaisados. */
@page organigrama { size: landscape; margin: 10mm; }
@media print {
.org-impresion { page: organigrama; }
.org-impresion { padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ===== Combo con búsqueda (comboBusca en admin.js) =====
Una caja de texto con su lista debajo. La lista flota sobre lo que sigue y se
desplaza sola; en un teléfono las opciones miden lo que un dedo. */
.combo { position: relative; width: 100%; }
.combo > input { width: 100%; }
.combo__lista { position: absolute; z-index: 60; left: 0; top: calc(100% + 4px);
width: max(100%, min(26rem, calc(100vw - 2.5rem)));
margin: 0; padding: .25rem; list-style: none; max-height: min(320px, 50vh); overflow-y: auto;
background: var(--surface); color: var(--ink); border: 1px solid var(--line-2, var(--line));
border-radius: var(--r-sm); box-shadow: var(--shadow); text-align: left; }
.combo__lista li { padding: .5rem .65rem; border-radius: 8px; cursor: pointer; line-height: 1.3;
display: flex; flex-direction: column; gap: .1rem; min-height: 40px; justify-content: center; }
.combo__lista li:hover, .combo__lista li.is-activo { background: var(--realce); }
.combo__l { font-size: .92rem; overflow-wrap: anywhere; }
.combo__d { font-size: .78rem; color: var(--muted); }
.combo__lista li.combo__vacio { cursor: default; color: var(--muted); font-size: .85rem; }
.combo__lista li.combo__vacio:hover { background: none; }
.combo-nota { display: block; margin-top: .25rem; font-size: .76rem; color: var(--muted); }
/* El botón de actualizar de la pestaña activa: gira al pasar encima. */
.wstab__r { font-size: .95rem; }
.wstab__r:hover { transform: rotate(90deg); transition: transform .2s; background: var(--cream-2, var(--line)); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .wstab__r:hover { transform: none; } }
/* ============================================================================ * TABLERO CONTABLE ESTILO BI (admin.js: loadContabilidad)
* Series validadas con el validador de paletas (CVD y contraste) en claro y oscuro:
* azul = ingresos/entradas, naranja = egresos/salidas, aqua = utilidad/IVA a pagar,
* violeta = saldo. El texto nunca va del color de la serie: usa las tintas del panel.
* =================================================================================== */
:root { --bi-1: #2a78d6; --bi-2: #eb6834; --bi-3: #1baf7a; --bi-4: #4a3aa7; --bi-ref: #8C847B; }
:root[data-theme="dark"] { --bi-1: #3987e5; --bi-2: #d95926; --bi-3: #199e70; --bi-4: #9085e9; --bi-ref: #968B7E; }
.bi { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bi-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.bi-filtros { position: sticky; top: var(--techo, 58px); z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem;
padding: .65rem .8rem; background: var(--tarjeta); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.bi-f { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; min-width: 0; }
.bi-f select, .bi-f input { font-size: .88rem; text-transform: none; letter-spacing: 0; max-width: 220px; }
.bi-f__par { display: flex; gap: .3rem; flex-wrap: wrap; }
.bi-f__par input { max-width: 150px; }
.bi-f__fijo { font-size: .9rem; color: var(--ink); text-transform: none; letter-spacing: 0; padding: .35rem 0; }
.bi-chk { display: flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--ink-2); margin: 0 0 .35rem; }
.bi-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--bi-1); color: var(--ink); background: var(--info-fondo);
border-radius: 999px; padding: .3rem .75rem; font-size: .84rem; font-weight: 600; cursor: pointer; margin-bottom: .25rem; }
.bi-chip span { font-size: 1.05rem; line-height: 1; }
.bi-pend { border: 1px solid var(--line); border-left: 3px solid var(--mal-tinta); border-radius: 12px; background: var(--tarjeta); padding: .6rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.bi-pend__i { display: flex; justify-content: space-between; gap: 1rem; background: none; border: 0; padding: .3rem 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bi-pend__i b { color: var(--mal-tinta); white-space: nowrap; }
.bi-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .75rem; }
/* En el teléfono: dos tarjetas por renglón y la barra de filtros deja de pegarse, que
si no se come media pantalla al bajar. */
@media (max-width: 600px) {
.bi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bi-kpi { padding: .6rem .65rem; }
.bi-kpi__v { font-size: 1.1rem; }
.bi-filtros { position: static; }
}
.bi-kpi { display: grid; grid-template-rows: auto auto auto 28px; gap: .25rem; min-width: 0; text-align: left; font: inherit; color: inherit;
background: var(--tarjeta); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem .7rem; }
button.bi-kpi { cursor: pointer; }
button.bi-kpi:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.bi-kpi__l { font-size: .74rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bi-kpi__v { font-size: 1.45rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.bi-neg { color: var(--mal-tinta); }
.bi-kpi__var { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; font-size: .78rem; min-height: 1.1em; }
.bi-var { font-weight: 600; }
.bi-var-b { color: var(--ok-tinta); }
.bi-var-m { color: var(--mal-tinta); }
.bi-var-n { color: var(--muted); font-weight: 500; }
.bi-var__ant { color: var(--muted); }
.bi-spark { width: 100%; height: 28px; display: block; }
.bi-spark polyline { fill: none; stroke: var(--bi-1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .9rem; }
.bi-card { display: flex; flex-direction: column; min-width: 0; background: var(--tarjeta); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.bi-w2 { grid-column: span 2; }
@media (max-width: 760px) { .bi-w2 { grid-column: auto; } }
.bi-card header h3 { font-family: var(--font-sans); font-size: .98rem; font-weight: 700; margin: 0; color: var(--ink); }
.bi-card header p { font-size: .78rem; color: var(--muted); margin: .15rem 0 .5rem; }
.bi-card__cuerpo { flex: 1; min-width: 0; }
.bi-graf { width: 100%; min-width: 0; overflow: hidden; }
.bi-svg { display: block; max-width: 100%; }
.bi-eje { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.bi-rej { stroke: var(--line); stroke-width: 1; }
.bi-cero { stroke: var(--muted); stroke-width: 1.2; }
.bi-foco-banda { fill: var(--info-fondo); }
.bi-hit { fill: transparent; }
.bi-hit[data-bimes] { cursor: pointer; }
.bi-hit:hover, .bi-hit:focus { fill: rgba(128,128,128,.10); outline: none; }
.bi-f-s1 { fill: var(--bi-1); background: var(--bi-1); }
.bi-f-s2 { fill: var(--bi-2); background: var(--bi-2); }
.bi-f-s3 { fill: var(--bi-3); background: var(--bi-3); }
.bi-f-s4 { fill: var(--bi-4); background: var(--bi-4); }
.bi-l-s1, .bi-l-s2, .bi-l-s3, .bi-l-s4, .bi-l-ref { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bi-l-s1 { stroke: var(--bi-1); }
.bi-l-s2 { stroke: var(--bi-2); }
.bi-l-s3 { stroke: var(--bi-3); }
.bi-l-s4 { stroke: var(--bi-4); }
.bi-l-ref { stroke: var(--bi-ref); }
.bi-punteada { stroke-dasharray: 5 4; }
.bi-p-s1, .bi-p-s2, .bi-p-s3, .bi-p-s4, .bi-p-ref { stroke: var(--tarjeta); stroke-width: 2; }
.bi-p-s1 { fill: var(--bi-1); }
.bi-p-s2 { fill: var(--bi-2); }
.bi-p-s3 { fill: var(--bi-3); }
.bi-p-s4 { fill: var(--bi-4); }
.bi-p-ref { fill: var(--bi-ref); }
.bi-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--ink-2); margin-bottom: .4rem; }
.bi-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.bi-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bi-sw-s1 { background: var(--bi-1); }
.bi-sw-s2 { background: var(--bi-2); }
.bi-sw-s3 { background: var(--bi-3); }
.bi-sw-s4 { background: var(--bi-4); }
.bi-sw-ref { background: var(--bi-ref); }
.bi-sw-linea { height: 3px; border-radius: 2px; width: 16px; }
.bi-sw-punteada { background: repeating-linear-gradient(90deg, var(--bi-ref) 0 5px, transparent 5px 8px); }
.bi-hbar { display: flex; flex-direction: column; gap: .55rem; }
.bi-hbar__fila { min-width: 0; }
.bi-hbar__cab { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; }
.bi-hbar__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bi-hbar__cab b { font-variant-numeric: tabular-nums; color: var(--ink); }
.bi-hbar__pista { position: relative; height: 10px; background: var(--cream-2); border-radius: 4px; margin-top: .2rem; }
.bi-hbar__pista i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.bi-otros { opacity: .55; }
.bi-hbar__marca { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
.bi-hbar__nota { font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.bi-sem { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.bi-sem-verde { color: var(--ok-tinta); }
.bi-sem-ambar { color: var(--aviso-tinta); }
.bi-sem-rojo { color: var(--mal-tinta); }
.bi-sem-gris { color: var(--muted); }
.bi-embudo { display: flex; flex-direction: column; gap: .45rem; }
.bi-embudo__f { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .5rem; align-items: center; font-size: .84rem; color: var(--ink-2); }
.bi-embudo__f div { height: 14px; background: var(--cream-2); border-radius: 4px; }
.bi-embudo__f i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bi-embudo__f b { font-variant-numeric: tabular-nums; color: var(--ink); }
.bi-emb-0 { background: #86b6ef; }
.bi-emb-1 { background: #5598e7; }
.bi-emb-2 { background: #2a78d6; }
.bi-emb-3 { background: #256abf; }
.bi-emb-4 { background: #1c5cab; }
.bi-emb-5 { background: #184f95; }
:root[data-theme="dark"] .bi-emb-0 { background: #184f95; }
:root[data-theme="dark"] .bi-emb-1 { background: #1c5cab; }
:root[data-theme="dark"] .bi-emb-2 { background: #256abf; }
:root[data-theme="dark"] .bi-emb-3 { background: #2a78d6; }
:root[data-theme="dark"] .bi-emb-4 { background: #3987e5; }
:root[data-theme="dark"] .bi-emb-5 { background: #6da7ec; }
.bi-hero { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; border-radius: 10px; margin-bottom: .7rem; }
.bi-hero b { font-size: 1.15rem; }
.bi-hero.bi-ok { background: var(--ok-fondo); }
.bi-hero.bi-mal { background: var(--mal-fondo); }
.bi-hero.bi-ok b, td.bi-ok { color: var(--ok-tinta); }
.bi-hero.bi-mal b, td.bi-mal { color: var(--mal-tinta); }
.bi-hero span { color: var(--ink-2); font-size: .88rem; }
.bi-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.2rem; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--muted); font-size: .88rem; }
.bi-vacio p { margin: 0; }
.bi-nota { font-size: .76rem; color: var(--muted); margin: .4rem 0 0; }
.bi-datos { margin-top: .5rem; font-size: .82rem; }
.bi-datos summary { cursor: pointer; color: var(--muted); font-size: .78rem; }
.bi-datos__caja { overflow-x: auto; max-width: 100%; }
.bi-datos table, .bi-card__cuerpo table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.bi-datos th, .bi-datos td, .bi-card__cuerpo th, .bi-card__cuerpo td { padding: .3rem .45rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.bi-datos td.num, .bi-card__cuerpo td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bi-tip { position: fixed; z-index: 1000; pointer-events: none; white-space: pre-line; max-width: 260px; font-size: .8rem; line-height: 1.4;
background: var(--ink); color: var(--bg); padding: .45rem .6rem; border-radius: 8px; box-shadow: var(--shadow); }
/* ---------- Inteligencia de negocio (complemento 'bi') ----------
Reusa las tarjetas y gráficas bi-*; aquí sólo las pestañas, la tabla dinámica y el
aviso de lo que incluye. */
.ibn-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ibn-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .8rem; font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer; }
.ibn-tab:hover { color: var(--ink); }
.ibn-tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--bi-1); }
[data-ibnpanel] { display: flex; flex-direction: column; gap: 1rem; margin-top: .9rem; min-width: 0; }
[data-ibnpanel][hidden] { display: none; }
.ibn-piv { max-height: 70vh; }
.ibn-piv thead th { position: sticky; top: 0; background: var(--tarjeta); z-index: 1; }
.ibn-piv tfoot td { font-weight: 700; border-top: 2px solid var(--line-2); }
.ibn-ord { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; }
.ibn-cel { background: none; border: 0; padding: .1rem .2rem; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; border-radius: 4px; }
.ibn-cel:hover, .ibn-cel:focus-visible { background: var(--cream-2); text-decoration: underline; }
.ibn-cel.bi-neg { color: var(--mal-tinta); }
.ibn-lista { margin: 0 0 .8rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--ink-2); }
/* ---------- El manual completo (Ayuda › Manual completo) ----------
Índice a la izquierda, contenido a la derecha; en el teléfono, uno debajo del otro.
Los botones del manual son réplicas inertes de los del panel: mismas clases, sin clic. */
.man-barra { align-items: flex-end; }
.man-lay { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.man-indice { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: .6rem; background: var(--surface); }
.man-ind__mod { padding: .15rem 0; }
.man-ind__tit { display: block; padding: .35rem .5rem; border-radius: 7px; font-weight: 600; font-size: .88rem; color: var(--ink); text-decoration: none; }
.man-ind__tit:hover { background: var(--realce); }
.man-ind__mod.on .man-ind__tit { background: var(--red-tint); color: var(--red-tinta); }
.man-ind__mod ul { list-style: none; margin: .2rem 0 .4rem; padding: 0 0 0 .6rem; border-left: 2px solid var(--line); }
.man-ind__mod li a { display: block; padding: .22rem .5rem; font-size: .82rem; color: var(--ink-2); text-decoration: none; border-radius: 6px; }
.man-ind__mod li a:hover { background: var(--realce); color: var(--ink); }
.man-doc { min-width: 0; max-width: 860px; overflow-wrap: anywhere; }
.man-cab { margin-bottom: 1.2rem; }
.man-cab h3 { margin: .2rem 0 .4rem; }
.man-sec { border-top: 1px solid var(--line); padding: 1.1rem 0 .6rem; scroll-margin-top: 1rem; }
.man-sec h4 { margin: 0 0 .5rem; font-size: 1.05rem; }
.man-link { color: var(--muted); text-decoration: none; font-weight: 400; margin-left: .3rem; }
.man-link:hover { color: var(--red-tinta); }
.man-que { color: var(--ink-2); margin: 0 0 .8rem; }
.man-res { margin: 1.2rem 0 .2rem; }
.man-pasos { list-style: none; counter-reset: manpaso; margin: 0; padding: 0; }
.man-pasos > li { counter-increment: manpaso; position: relative; padding: .55rem 0 .55rem 2.3rem; border-bottom: 1px dashed var(--line); }
.man-pasos > li::before { content: counter(manpaso); position: absolute; left: 0; top: .5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.man-paso__txt { line-height: 1.5; }
.man-paso__acc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .8rem; margin-top: .45rem; }
.man-rep { display: inline-flex; flex-direction: column; gap: .2rem; max-width: 100%; }
.man-inerte { pointer-events: none; cursor: default; user-select: none; align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; }
.man-rep .tb-link.man-inerte { border: 1px dashed var(--line-2); }
.man-rep .admin-nav-item.man-inerte { border: 1px solid var(--line-2); background: var(--surface); }
.man-campo { display: inline-block; min-width: 12rem; padding: .4rem .7rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg, var(--surface)); color: var(--muted); font-size: .85rem; }
.man-donde { color: var(--muted); font-size: .76rem; }
.man-muestra { align-self: flex-start; }
.man-caja { margin: .8rem 0 .2rem; padding: .7rem .9rem; border-radius: 8px; background: var(--surface); border-left: 3px solid var(--line-2); }
.man-caja ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.man-caja dl { margin: .35rem 0 0; }
.man-caja dt { font-weight: 600; margin-top: .4rem; }
.man-caja dd { margin: .1rem 0 0; color: var(--ink-2); }
.man-caja--tip { border-left-color: var(--ok-tinta); }
.man-caja--err { border-left-color: var(--red); }
.man-preg { margin: .5rem 0; }
.man-preg summary { cursor: pointer; font-weight: 600; }
.man-preg p { margin: .35rem 0 0; color: var(--ink-2); }
.man-flujo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 1rem; }
.man-flujo__paso { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 600; }
.man-flujo__paso b { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--red-tint); color: var(--red-tinta); font-size: .72rem; }
.man-flujo__fl { color: var(--muted); font-weight: 700; }
@media (max-width: 760px) {
.man-lay { grid-template-columns: minmax(0, 1fr); }
.man-indice { position: static; max-height: 16rem; }
.man-campo { min-width: 0; }
.man-flujo { flex-direction: column; align-items: flex-start; }
.man-flujo__fl { transform: rotate(90deg); margin-left: .8rem; }
}
@media print {
body.imprime-manual * { visibility: hidden !important; }
body.imprime-manual #manualDoc, body.imprime-manual #manualDoc * { visibility: visible !important; }
body.imprime-manual #manualDoc { position: absolute; left: 0; top: 0; max-width: none; width: 100%; }
body.imprime-manual .man-muestra, body.imprime-manual .man-link { display: none !important; }
body.imprime-manual .man-sec { break-inside: avoid-page; }
body.imprime-manual .man-pasos > li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ================= REJILLA DE INCIDENCIAS DEL PERIODO =================
* Como una hoja de cálculo: encabezado en dos niveles con el grupo ROTULADO (antes era
* un fondo rosa sin nombre, con el título gris encima que casi no se leía), nombre fijo a
* la izquierda en una sola línea, encabezado fijo arriba, columnas angostas con cifras
* alineadas a la derecha y totales al pie. El color del grupo es una raya, no un fondo:
* así el texto conserva el contraste de siempre en claro y en oscuro. */
:root { --ri-aus: #B3262D; --ri-inc: #8A6520; --ri-ext: #2F5E9A; --ri-esp: #6B4FA0; --ri-imp: #17724A; --ri-des: #9A4A12; --ri-otr: #6E655C; }
:root[data-theme="dark"] { --ri-aus: #E4626A; --ri-inc: #D9A94F; --ri-ext: #7EA7E0; --ri-esp: #B39AE0; --ri-imp: #5CC592; --ri-des: #E08A4F; --ri-otr: #A99E92; }
.nom-seccion { display: block; border-top: 1px solid var(--line); padding-top: 1rem; }
.ri-herr { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 .7rem; }
.ri-herr[hidden] { display: none; }
.ri-herr__tit { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.ri-herr select, .ri-herr input[type="text"], .ri-herr input[type="search"] { padding: .35rem .55rem; font-size: .86rem; border: 1px solid var(--line-2, var(--line)); border-radius: 6px; background: var(--surface); color: var(--ink); }
.ri-grupos { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ri-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ink); padding: .2rem .55rem; border: 1px solid var(--line); border-left: 4px solid var(--ri-otr); border-radius: 999px; cursor: pointer; background: var(--surface); }
.ri-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); -webkit-overflow-scrolling: touch; }
.ri-tabla { border-collapse: separate; border-spacing: 0; font-size: .86rem; width: max-content; min-width: 100%; }
.ri-tabla th, .ri-tabla td { padding: .3rem .45rem; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ri-tabla thead th { position: sticky; z-index: 2; background: var(--realce); color: var(--ink); font-weight: 600; }
.ri-tabla thead tr:first-child th { top: 0; }
.ri-tabla thead tr:nth-child(2) th { top: 2rem; }
.ri-grupo { height: 2rem; text-align: center; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; border-top: 3px solid var(--ri-otr); border-left: 1px solid var(--line); }
.ri-col { max-width: 6.2rem; min-width: 4.4rem; white-space: normal; vertical-align: bottom; text-align: right; font-size: .76rem; line-height: 1.2; }
.ri-col__n { display: block; }
.ri-col__u { display: block; font-weight: 400; color: var(--ink-2); font-size: .72rem; }
.ri-g--ausencias.ri-grupo, .ri-chip.ri-g--ausencias { border-top-color: var(--ri-aus); border-left-color: var(--ri-aus); }
.ri-g--incapacidades.ri-grupo, .ri-chip.ri-g--incapacidades { border-top-color: var(--ri-inc); border-left-color: var(--ri-inc); }
.ri-g--extras.ri-grupo, .ri-chip.ri-g--extras { border-top-color: var(--ri-ext); border-left-color: var(--ri-ext); }
.ri-g--especiales.ri-grupo, .ri-chip.ri-g--especiales { border-top-color: var(--ri-esp); border-left-color: var(--ri-esp); }
.ri-g--importes.ri-grupo, .ri-chip.ri-g--importes { border-top-color: var(--ri-imp); border-left-color: var(--ri-imp); }
.ri-g--descuentos.ri-grupo, .ri-chip.ri-g--descuentos { border-top-color: var(--ri-des); border-left-color: var(--ri-des); }
.ri-fijo0 { position: sticky; left: 0; z-index: 1; width: 2.2rem; min-width: 2.2rem; text-align: center; }
.ri-fijo1 { position: sticky; left: 2.2rem; z-index: 1; width: 15rem; min-width: 11rem; max-width: 15rem; text-align: left; font-weight: 400; box-shadow: 1px 0 0 var(--line); }
.ri-tabla thead .ri-fijo0, .ri-tabla thead .ri-fijo1 { z-index: 3; top: 0; }
.ri-nom { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-sub { display: block; font-size: .74rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-aviso { display: block; font-size: .74rem; color: var(--aviso-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-celda { text-align: right; }
.ri-in { width: 4.4rem; padding: .25rem .35rem; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); font-size: .86rem; }
.ri-in:hover { border-color: var(--line-2, var(--line)); }
.ri-in:focus { outline: 2px solid var(--ri-ext); outline-offset: -1px; background: var(--surface); }
.ri-in.ri-mal { border-color: var(--mal-tinta); background: var(--mal-fondo); }
.ri-marca { width: 1.05rem; height: 1.05rem; accent-color: var(--ri-ext); }
.ri-tabla tbody tr:hover td, .ri-tabla tbody tr:hover th, .ri-tabla tbody tr:focus-within td, .ri-tabla tbody tr:focus-within th { background: var(--realce); }
.ri-tabla tfoot th, .ri-tabla tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--realce); font-weight: 600; font-variant-numeric: tabular-nums; border-top: 2px solid var(--line); text-align: right; }
.ri-tabla tfoot .ri-fijo0, .ri-tabla tfoot .ri-fijo1 { z-index: 3; text-align: left; }
@media (max-width: 640px) {
.ri-fijo1 { width: 9rem; min-width: 9rem; max-width: 9rem; }
.ri-scroll { max-height: 65vh; }
}
/* LA HOJA DE LA PÓLIZA DE NÓMINA: una sola hoja carta, con 1 o con 400 personas.
Todo agrupado por cuenta, así que no crece con la plantilla; letra compacta y cifras
tabulares para comparar de arriba abajo contra la hoja de trabajo propia. En pantalla
sigue el tema (oscuro legible); al imprimir, la hoja blanca de `@media print`. */
.ph { font-size: .78rem; line-height: 1.3; color: var(--doc-tinta); font-variant-numeric: tabular-nums; }
.ph-cab { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--doc-raya-fuerte); padding-bottom: .35rem; }
.ph-cab b { font-size: 1rem; display: block; }
.ph-cab span { color: var(--doc-apagado); }
.ph-cab__t { text-align: right; }
.ph-meta { display: grid; grid-template-columns: repeat(6, auto); gap: .2rem .8rem; margin: .35rem 0 .2rem; }
.ph-meta small { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--doc-apagado); }
.ph-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doc-apagado); margin: .5rem 0 .15rem; }
.ph-t { width: 100%; border-collapse: collapse; }
.ph-t th { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--doc-apagado); text-align: left; border-bottom: 1.5px solid var(--doc-raya-fuerte); padding: .12rem .3rem; }
.ph-t td { padding: .08rem .3rem; border-bottom: 1px solid var(--doc-raya); }
.ph-t .r { text-align: right; white-space: nowrap; }
.ph-sec td { font-weight: 700; padding-top: .25rem; }
.ph-sec em { font-weight: 400; font-style: normal; color: var(--doc-apagado); font-size: .7rem; }
.ph-sub td { color: var(--doc-tinta-2); font-style: italic; border-bottom-color: var(--doc-raya-fuerte); }
.ph-tot td { font-weight: 700; border-top: 2px solid var(--doc-raya-fuerte); border-bottom: 0; }
.ph-ok { color: var(--ok-tinta, #17724A); font-weight: 700; font-style: normal; }
.ph-mal { color: var(--doc-marca); font-weight: 700; font-style: normal; }
.ph-cajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.ph-caja { border: 1px solid var(--doc-raya-fuerte); border-radius: 4px; padding: .2rem .35rem; }
.ph-caja h5 { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--doc-apagado); margin: 0 0 .1rem; }
.ph-caja div { display: flex; justify-content: space-between; gap: .5rem; }
.ph-caja div span { color: var(--doc-tinta-2); }
.ph-caja div:last-child b { border-top: 1px solid var(--doc-raya); }
.ph-cuadres { margin-top: .3rem; }
.ph-avisos { margin: .25rem 0; font-size: .72rem; color: var(--aviso-tinta, #8A6520); }
.ph-avisos p { margin: 0; }
.ph-firmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.2rem; text-align: center; font-size: .72rem; color: var(--doc-tinta-2); }
.ph-firmas span { display: block; border-top: 1px solid var(--doc-tinta-2); margin-bottom: .15rem; }
@media (max-width: 700px) { .ph-meta { grid-template-columns: repeat(2, auto); } .ph-cajas { grid-template-columns: 1fr; } }
@media print {
@page { size: letter; margin: 9mm 10mm; }
.doc-page:has(> .ph) { padding: 0 !important; }
.ph { font-size: 7.2pt; line-height: 1.22; color: #1B1714; }
.ph-t td { padding: .02rem .25rem; }
.ph-h { margin: .3rem 0 .1rem; }
.ph-firmas { margin-top: 1.6rem; }
.ph-meta { grid-template-columns: repeat(6, auto); }
.ph-cajas { grid-template-columns: repeat(3, 1fr); }
.ph-ok { color: #17724A; } .ph-avisos { color: #8A6520; }
.ph-t tr, .ph-caja { break-inside: avoid; }
}
/* ===== Checklist de obligaciones (admin.js · obChk*) ===== */
.ob-grupo { margin: 1rem 0 .4rem; font-size: .95rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ob-dias { display: block; font-size: .8rem; color: var(--muted); }
.ob-dias--vencida { color: var(--mal-tinta); font-weight: 600; }
.ob-dias--pronto { color: var(--aviso-tinta); font-weight: 600; }
.ob-fund { display: block; font-size: .78rem; color: var(--muted); }
.ob-noaplica { opacity: .6; }
.ob-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: .6rem; }
.ob-cal__dow { font-size: .72rem; text-align: center; color: var(--muted); padding: .2rem 0; }
.ob-cal__dia { min-height: 5.2rem; border: 1px solid var(--line); border-radius: 8px; padding: .3rem; font-size: .72rem; overflow: hidden; }
.ob-cal__dia--fuera { opacity: .35; }
.ob-cal__dia--inhabil { background: var(--neutro-fondo); }
.ob-cal__num { font-weight: 700; display: block; margin-bottom: .15rem; }
.ob-cal__ev { display: block; border-radius: 4px; padding: 1px 4px; margin-top: 2px; background: var(--aviso-fondo); color: var(--aviso-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-cal__ev--hecha { background: var(--ok-fondo); color: var(--ok-tinta); text-decoration: line-through; }
.ob-cal__ev--vencida { background: var(--mal-fondo); color: var(--mal-tinta); }
.ob-perfil { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem 1rem; padding: .8rem 0; }
.ob-aviso-inicio { margin-bottom: 1.4rem; border-left: 3px solid var(--aviso-tinta); }
@media (max-width: 640px) {
.ob-cal { gap: 2px; }
.ob-cal__dia { min-height: 3.6rem; font-size: .62rem; padding: .15rem; }
.ob-cal__ev { white-space: normal; }
}
@media print {
body.imprime-obligaciones * { visibility: hidden !important; }
body.imprime-obligaciones #obChkHoja, body.imprime-obligaciones #obChkHoja * { visibility: visible !important; }
body.imprime-obligaciones #obChkHoja { position: absolute; left: 0; top: 0; width: 100%; font-size: 10px; }
body.imprime-obligaciones #obChkHoja button, body.imprime-obligaciones #obChkHoja .ob-no-imprimir { display: none !important; }
body.imprime-obligaciones #obChkHoja tr { break-inside: avoid; }
body.imprime-obligaciones .tb-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* «¿DÓNDE ESTÁ CADA COSA?» (kern-mapa.js, 2026-10-01): la bienvenida de cada plan. Un
* mapa de cajas, una por área, con su renglón por pantalla y su «Ir». Sale sobre el panel
* como las ventanas de captura (.pm-fondo) y respeta el tema claro y el oscuro. */
.km-fondo { position: fixed; inset: 0; background: rgba(20,16,14,.55); backdrop-filter: blur(3px);
z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.km-caja { background: var(--tarjeta); color: var(--ink); border-radius: 16px; width: min(60rem, 100%); max-height: 92vh;
display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.km-cab { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.3rem .9rem; border-bottom: 1px solid var(--line); }
.km-cab > div { flex: 1; min-width: 0; }
.km-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--red-tinta); }
.km-cab h2 { margin: .15rem 0 .25rem; font-size: 1.35rem; }
.km-que { margin: 0; color: var(--muted); font-size: .9rem; }
.km-x { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .2rem; }
.km-x:hover { color: var(--red-tinta); }
.km-cuerpo { padding: 1rem 1.3rem; overflow: auto; }
.km-donde { display: flex; flex-direction: column; gap: .15rem; background: var(--realce); border-radius: 10px;
padding: .7rem .9rem; font-size: .86rem; margin-bottom: .8rem; }
.km-donde b { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.km-aclara { border-left: 3px solid var(--red-tinta); padding: .55rem .8rem; margin-bottom: .9rem; font-size: .88rem;
background: var(--surface); border-radius: 0 8px 8px 0; }
.km-mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .8rem; }
.km-grupo { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem .5rem; background: var(--surface); }
.km-grupo h3 { margin: 0 0 .4rem; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.km-grupo ul { list-style: none; margin: 0; padding: 0; }
.km-cosa { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.km-cosa:first-child { border-top: 0; }
.km-ic { font-size: 1.15rem; width: 1.6rem; text-align: center; flex: none; }
.km-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .78rem; color: var(--muted); }
.km-txt b { font-size: .88rem; color: var(--ink); }
.km-ir { flex: none; border: 1px solid var(--line); background: var(--tarjeta); color: var(--ink); border-radius: 8px;
padding: .25rem .7rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.km-ir:hover { border-color: var(--red-tinta); color: var(--red-tinta); }
.km-cosa--no { opacity: .55; }
.km-noesta { flex: none; font-size: .7rem; color: var(--muted); max-width: 7rem; text-align: right; }
.km-nota { margin: .9rem 0 0; font-size: .82rem; color: var(--muted); }
.km-pie { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
padding: .8rem 1.3rem; border-top: 1px solid var(--line); }
.km-pie__izq { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.km-guia { font-weight: 600; color: var(--red-tinta); }
.km-guia[hidden] { display: none; }
.km-ok { border: 0; border-radius: 10px; background: var(--red); color: #fff; font: inherit; font-weight: 700;
padding: .55rem 1.2rem; cursor: pointer; }
@media (max-width: 620px) { .km-caja { max-height: 96vh; } .km-cab h2 { font-size: 1.15rem; } .km-reabrir { display: none; } }
/* «Emite: …» arriba de cada captura que crea un documento con emisor (admin.js,
EMITE_PANELES): de qué empresa sale, su RFC y «Cambiar». Con «Todas las empresas» pide
elegirla; una empresa de pruebas lleva su franja. */
.emite-banda { margin: 0 0 1rem; border: 1px solid var(--line); border-left: 4px solid var(--info-tinta);
border-radius: 10px; background: var(--tarjeta); overflow: hidden; }
.emite-banda__fila { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .6rem .9rem; font-size: .95rem; }
.emite-banda__fila > span:first-child { color: var(--muted); }
.emite-banda__fila b { font-size: 1.05rem; }
.emite-banda__rfc { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }
.emite-banda__fila--falta { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.emite-banda[data-falta] { border-left-color: var(--aviso-tinta); }
.emite-banda .emite-sel { max-width: 100%; }
.emite-banda .emite-sel[hidden] { display: none; }
.emite-banda__pruebas { padding: .5rem .9rem; font-weight: 700; color: #fff; letter-spacing: .01em;
background: repeating-linear-gradient(-45deg, #B45309, #B45309 12px, #92400E 12px, #92400E 24px); }
/* ===== Correos: Para, CC y CCO con chips, cuadro de envío y Empresas › Correos (237) ===== */
.pm-caja.pm-caja--correo { width: min(780px, 100%); }
.dest { display: grid; gap: .4rem; }
.dest-fila { display: flex; gap: .5rem; align-items: flex-start; }
.dest-fila[hidden] { display: none; }
.dest-etq { flex: 0 0 2.6rem; padding-top: .45rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.dest-caja { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .3rem .4rem;
border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); cursor: text; }
.dest-caja:focus-within { border-color: var(--realce, #0E7C86); box-shadow: 0 0 0 2px rgba(14, 124, 134, .15); }
.dest-chips { display: contents; }
.dest-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .15rem .25rem .15rem .55rem;
border-radius: 999px; background: var(--cream, #f3f1ec); border: 1px solid var(--line); font-size: .8rem; line-height: 1.3;
color: var(--ink); overflow-wrap: anywhere; }
.dest-chip--var { padding: .15rem .55rem; cursor: pointer; font-family: ui-monospace, Menlo, Consolas, monospace; }
.dest-chip--var:hover { border-color: var(--realce, #0E7C86); }
.dest-x { border: 0; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 .2rem; cursor: pointer; border-radius: 50%; }
.dest-x:hover { color: var(--red-tinta, #b42318); background: rgba(0, 0, 0, .06); }
.dest-caja .dest-in { flex: 1 1 10rem; min-width: 8rem; border: 0; outline: 0; padding: .25rem .2rem; background: transparent; font: inherit; font-size: .88rem; }
.dest-in--mal, .dest-caja .dest-in--mal { color: var(--red-tinta, #b42318); text-decoration: underline wavy; }
input.cc-email.dest-in--mal { border-color: var(--red-tinta, #b42318); }
.dest-mas { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding-left: 3.1rem; font-size: .82rem; }
.dest-mas [hidden] { display: none; }
.dest-aviso { color: var(--red-tinta, #b42318); font-size: .8rem; }
.mc-frame { display: block; width: 100%; height: 460px; border: 1px solid var(--line); border-radius: 8px; background: #f2f3f5; margin-top: .5rem; }
.mc-prev > summary, .mc-bit > summary { cursor: pointer; font-weight: 600; font-size: .88rem; margin: .4rem 0; }
.cc-tabla td { vertical-align: middle; }
.cc-tabla input[type="email"] { width: 100%; min-width: 12rem; }
.eco-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.eco-previa .mc-frame { height: 620px; }
.eco-vars { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .3rem; }
@media (max-width: 900px) { .eco-rejilla { grid-template-columns: 1fr; } .eco-previa .mc-frame { height: 480px; } }
/* =========================================================================================
PANTALLAS COMPLETAS: TABLAS DE TRABAJO (2026-10-03)
=========================================================================================
Enrique: «trata que todas las pantallas se vean completas». La columna fija de acciones
de Suscripciones medía casi 400 px y tapaba «Cobro»; nombres y planes se partían en tres
renglones; el texto era de lectura, no de trabajo. Lo arregla `tablaHTML` (admin.js,
bloque TABLA-COMPACTA) y aquí van sus medidas:
· Un tamaño de trabajo: .875rem, subtextos a .78rem, celdas más bajas y buen
interlineado; los números en `tabular-nums`.
· `tb-nw`: folio, fecha, montos y estado no se parten. `tb-largo`: cliente, plan o
concepto se cortan en dos renglones con «…» (el texto completo va en el title).
· `tb-oc3` / `tb-oc2`: las columnas de prioridad 3 y 2 se esconden cuando la tabla no
cabe en su caja.
· `col-acc`: la columna de acciones, angosta: una acción y «⋯».
· `tb-desborda`: sólo cuando de verdad hay algo debajo, la columna fija lleva sombra. */
.admin-shell .tabla-odoo { font-size: .875rem; line-height: 1.4; }
.admin-shell .tabla-odoo tbody td { padding: .38rem .65rem; font-variant-numeric: tabular-nums; }
.admin-shell .tabla-odoo thead th { padding: .45rem .65rem; }
.admin-shell .tabla-odoo .tb-sub { font-size: .78rem; line-height: 1.3; }
.admin-shell .tabla-odoo .tb-avatar { width: 26px; height: 26px; font-size: .74rem; }
.admin-shell .tabla-odoo .tb-cell-avatar { gap: .5rem; }
.tabla-odoo .tb-nw, .tabla-odoo td.r, .tb-pill { white-space: nowrap; }
.tabla-odoo .tb-clamp,
.tabla-odoo td.tb-largo > b,
.tabla-odoo td.tb-largo .tb-cell-avatar b {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
overflow: hidden; max-width: 19rem; min-width: 10rem; overflow-wrap: break-word;
}
.tabla-scroll.tb-pocas > .tabla-odoo { min-width: 0; }
.tabla-scroll.tb-pocas .tb-clamp,
.tabla-scroll.tb-pocas td.tb-largo > b,
.tabla-scroll.tb-pocas td.tb-largo .tb-cell-avatar b { min-width: 4.5rem; }
.admin-shell .tabla-scroll.tb-pocas > .tabla-odoo :is(th, td) { padding-left: .45rem; padding-right: .45rem; }
.tabla-odoo.tb-oc3 .tb-p3,
.tabla-odoo.tb-oc2 .tb-p2 { display: none; }
/* La columna de acciones: lo justo para una acción y «⋯». */
.tabla-odoo td.col-acc, .tabla-odoo th.col-acc { width: 1%; white-space: nowrap; }
.tabla-odoo td.col-acc .tb-actions { gap: .15rem; align-items: center; }
.tb-mas { font-size: 1.05rem; line-height: 1; letter-spacing: .04em; min-width: 1.9rem; padding: .22rem .4rem; }
.tb-mas[aria-expanded="true"] { background: var(--realce); color: var(--ink); }
.tb-link:focus-visible, .tb-mas:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
/* El menú va fijo a la ventana (la caja de la tabla recorta lo que se le sale) y su celda
sube por encima de las de los demás renglones, que también son pegajosas. */
.tabla-odoo td.tb-acc-abierta { z-index: 30 !important; }
.tb-menu {
position: fixed; z-index: 400; min-width: 11.5rem; max-width: 18rem;
display: flex; flex-direction: column; gap: 1px; padding: .3rem;
background: var(--surface, #fff); color: var(--ink);
border: 1px solid var(--line-2, var(--line)); border-radius: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
white-space: nowrap;
}
.tb-menu[hidden] { display: none; }
.tb-menu .tb-menu__item {
display: flex; align-items: center; gap: .45rem; width: 100%;
text-align: left; justify-content: flex-start;
padding: .42rem .65rem; font-size: .85rem; border-radius: 7px; color: var(--ink-2);
}
.tb-menu .tb-menu__item:hover, .tb-menu .tb-menu__item:focus { background: var(--realce); color: var(--ink); outline: none; }
.tb-menu .tb-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--red); }
.tb-menu .tb-menu__item.tb-link--danger { color: var(--red-tinta); }
.tb-menu .tb-menu__item.tb-link--danger:hover, .tb-menu .tb-menu__item.tb-link--danger:focus { background: rgba(193,39,45,.09); color: var(--red-tinta); }
.tb-menu__sep { height: 1px; background: var(--line); margin: .25rem .2rem; }
.tb-menu__etq { font-weight: 600; }
/* Sólo si aun así no cabe: la caja se desplaza de lado y la columna fija lo dice con sombra. */
.admin-shell .tabla-scroll.tb-desborda > .tabla-odoo td:last-child,
.admin-shell .tabla-scroll.tb-desborda > .tabla-odoo th:last-child { box-shadow: -8px 0 10px -8px rgba(0,0,0,.35); }
/* LA CABECERA DE CADA PANTALLA. En anchos medianos los botones bajan en orden y no se
parten; el principal ya no es el doble de alto que los demás. */
.admin-shell .tbl-toolbar__actions { gap: .45rem; justify-content: flex-end; }
.admin-shell .tbl-toolbar__actions > .btn,
.admin-shell .tbl-toolbar__actions > a.btn,
.admin-shell .tbl-toolbar__actions > .toggle-group,
.admin-shell .tbl-toolbar__actions > .tbl-search { white-space: nowrap; }
.admin-shell .tbl-toolbar__actions > .btn:not(.btn--sm),
.admin-shell .tbl-toolbar__actions > a.btn:not(.btn--sm) { padding: .42rem .95rem; font-size: .84rem; line-height: 1.25; }
@media (max-width: 620px) {
.admin-shell .tbl-toolbar__actions > .btn,
.admin-shell .tbl-toolbar__actions > a.btn { white-space: normal; }
}
/* ===== Balanza y estados financieros, papel de trabajo (admin.js · loadBalanza/loadEstados, 2026-10-03) =====
* Cifras a la derecha y tabulares, sin signos (la columna dice el lado), jerarquía por
* peso y sangría, no por color. Los mismos tokens de siempre. */
.bal-tabla, .ef-tabla { font-variant-numeric: tabular-nums; }
.bal-tabla td, .bal-tabla th, .ef-tabla td, .ef-tabla th { padding: .38rem .6rem; }
.bal-tabla .r, .ef-tabla .r { text-align: right; white-space: nowrap; }
.bal-tabla .c { text-align: center; }
.bal-tabla thead th { border-bottom: 1px solid var(--line); }
.bal-imp-cab { display: none; }
.bal-grupo td { background: var(--realce); font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.bal-mayor td { font-weight: 600; }
.bal-sub td { color: var(--ink-2); font-size: .84rem; }
.bal-subtotal td { font-weight: 700; border-top: 1px solid var(--line-2); }
.bal-total td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); }
.bal-contra { color: var(--aviso-tinta); font-size: .8em; }
.bal-pie, .ef-pie { margin: .6rem 0 0; }
.bal-tabla .tb-link { font-family: var(--font-mono, monospace); font-size: .82rem; }
.ef-hojas { display: grid; gap: 1.6rem; }
.ef-cab { text-align: center; margin: .6rem 0 .5rem; font-size: .86rem; }
.ef-nombre { font-family: var(--font-display); font-size: 1.15rem; margin-top: .15rem; }
.ef-sub { color: var(--muted); font-size: .8rem; }
.ef-tabla { max-width: 52rem; margin: 0 auto; }
.ef-pct { color: var(--muted); font-size: .8rem; }
.ef-seccion td { font-weight: 800; letter-spacing: .06em; padding-top: .8rem; }
.ef-titulo td { font-weight: 700; padding-top: .6rem; }
.ef-rubro td { font-weight: 600; padding-left: 1rem; }
.ef-cuenta td:first-child { padding-left: 2rem; color: var(--ink-2); }
.ef-subtotal td { font-weight: 700; border-top: 1px solid var(--line-2); }
.ef-total td { font-weight: 800; border-top: 1px solid var(--ink); }
.ef-final td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); }
@media print {
body.imprime-balanza * , body.imprime-estados * { visibility: hidden !important; }
body.imprime-balanza #balList, body.imprime-balanza #balList *,
body.imprime-estados .ef-hojas, body.imprime-estados .ef-hojas * { visibility: visible !important; }
body.imprime-balanza #balList, body.imprime-estados .ef-hojas { position: absolute; left: 0; top: 0; width: 100%; padding: 0 !important; }
body.imprime-balanza .bal-imp-cab { display: table-row; }
body.imprime-balanza .bal-imp-cab th { text-align: left; text-transform: none; font-size: 9pt; color: #000; background: none; }
.bal-tabla, .ef-tabla { font-size: 7.6pt; color: #000; min-width: 0 !important; }
.bal-tabla thead { display: table-header-group; }
.bal-tabla tr, .ef-tabla tr { break-inside: avoid; }
.bal-tabla .tb-link { color: #000; text-decoration: none; }
.tabla-scroll { overflow: visible !important; }
body.imprime-estados .ef-hojas > div + div { break-before: page; }
}
/* ===== Teléfono y tableta: que ninguna opción se corte (2026-10-04) =====
* Enrique: «en dispositivos móviles no salen completas las opciones». Lo que se cortaba a
* 375 px: las pestañas de Impuestos (.seg: Saldos ISR, DIOT, Anual y Auditoría quedaban
* fuera por su overflow:hidden), los Estados financieros (la rejilla .ef-hojas tomaba el
* ancho de la tabla y .rep lo recortaba), las filas .fila de Pólizas automáticas (fecha y
* «Ver qué haría» salían del panel) y el menú en columna, que en teléfono va en renglón y
* partía «Punto de venta» en tres líneas. Nada de esto toca el escritorio. */
.ef-hojas { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
.seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; }
.admin-shell .fila { flex-wrap: wrap; gap: .5rem; }
.admin-shell .fila > * { min-width: 0; max-width: 100%; }
.admin-shell .fila-acc, .admin-shell .rep__acciones { flex-wrap: wrap; }
.admin-shell .btn { max-width: 100%; }
.admin-shell input, .admin-shell select, .admin-shell textarea { max-width: 100%; }
[data-menu="columna"] .admin-side .admin-nav-item { white-space: nowrap; width: auto; }
.tabla-wrap, .tabla-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm-caja, .km-caja { max-height: calc(100dvh - 2rem); }
.pm-fondo, .km-fondo { padding: 1rem; }
}
@media (max-width: 480px) {
.admin-shell .btn { white-space: normal; }
.pm-fondo, .km-fondo { padding: .5rem; }
.pm-caja, .km-caja { max-height: calc(100dvh - 1rem); }
}
/* HERRAMIENTAS ▾ (admin.js, herrRefrescar): menú de herramientas de cada pantalla y su
hoja lateral. Las herramientas guardadas no ocupan lugar en la lista. */
details.herr-guardado:not(.herr-en-modal) { display: none !important; }
.herr { position: relative; display: inline-flex; }
.herr[hidden] { display: none; }
.herr__menu {
position: absolute; top: calc(100% + .35rem); right: 0; z-index: 60;
min-width: 17rem; max-width: min(24rem, 90vw); padding: .35rem;
background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
display: flex; flex-direction: column;
}
.herr__menu[hidden] { display: none; }
.herr__item {
appearance: none; background: none; border: 0; border-radius: 8px; text-align: left;
font: inherit; font-size: .92rem; color: var(--ink); padding: .6rem .75rem; cursor: pointer;
}
.herr__item:hover, .herr__item:focus { background: var(--cream, #f4f1ea); outline: none; }
.herr__item:focus-visible { box-shadow: inset 0 0 0 2px var(--realce, #2563eb); }
/* Menús con opciones fijas (data-menu-fijo: «Subir ▾», «Acciones ▾» de CFDI del SAT). */
.herr__item--peligro { color: var(--red, #b91c1c); }
.herr__item[disabled] { opacity: .5; cursor: not-allowed; }
.herr__sep { border: 0; border-top: 1px solid var(--line); margin: .25rem .2rem; }
.herr__btn[disabled] { opacity: .55; cursor: not-allowed; }
.herr-modal { position: fixed; inset: 0; z-index: 900; }
.herr-modal[hidden] { display: none; }
.herr-modal__fondo { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.herr-modal__hoja {
position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%);
background: var(--surface, #fff); box-shadow: -12px 0 32px rgba(15, 23, 42, .2);
overflow-y: auto; overscroll-behavior: contain;
}
.herr-modal__cab {
position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .9rem 1.15rem; background: var(--surface, #fff); border-bottom: 1px solid var(--line);
}
.herr-modal__cab h3 { margin: 0; font-size: 1.05rem; }
.herr-modal__cuerpo { padding: 1rem 1.15rem 2rem; }
.herr-modal__cuerpo > details.herr-en-modal { margin: 0 !important; border: 0; box-shadow: none; padding: 0; background: none; }
.herr-modal__cuerpo > details.herr-en-modal > summary { display: none; }
body.herr-modal-abierto { overflow: hidden; }
@media (max-width: 640px) {
.herr__menu {
position: fixed; top: auto; left: 0; right: 0; bottom: 0; max-width: none; min-width: 0;
border-radius: 16px 16px 0 0; padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
box-shadow: 0 -12px 32px rgba(15, 23, 42, .22);
}
.herr__item { padding: .85rem .9rem; font-size: 1rem; }
body.herr-menu-abierto::after { content: ''; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 59; }
.herr-modal__hoja { top: auto; left: 0; width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(15, 23, 42, .22); }
}
/* ENCABEZADOS DE TABLA SIEMPRE A LA VISTA (pedido de Enrique, 2026-10-06).
*
* En un listado largo, al bajar se perdía qué decía cada columna. Como `.tabla-wrap` y
* `.tabla-scroll` desplazan de lado (`overflow-x: auto`), son contenedores de
* desplazamiento y un `sticky` de la página no funcionaría dentro. Así que el propio
* contenedor desplaza también hacia abajo con un alto máximo, y la cabecera se pega a
* SU borde superior — igual que `.piv-wrap`. Una tabla corta no cambia nada: el tope
* sólo actúa cuando la tabla es más alta que la pantalla. */
.tabla-wrap, .tabla-scroll { max-height: calc(100vh - 150px); overflow: auto; }
.tabla-wrap > .tabla-odoo > thead > tr > th, .tabla-scroll > .tabla-odoo > thead > tr > th,
.tabla-wrap > .tabla > thead > tr > th, .tabla-scroll > .tabla > thead > tr > th {
position: sticky; top: 0; z-index: 2; background: var(--realce);
box-shadow: inset 0 -1px 0 var(--line);
}
@media print { .tabla-wrap, .tabla-scroll { max-height: none; overflow: visible; } .tabla-wrap thead th, .tabla-scroll thead th { position: static; } }
/* En el panel la banda del encabezado es oscura (`--tabla-cab`, letra clara): la regla de
* arriba le ponía fondo claro y el texto claro se perdía. */
.admin-shell .tabla-wrap > .tabla-odoo > thead > tr > th,
.admin-shell .tabla-scroll > .tabla-odoo > thead > tr > th { background: var(--tabla-cab); }
/* ---------- COLUMNAS FIJAS A LA IZQUIERDA (reutilizable) ----------
*
* `col-fija-izq` en las celdas de una columna (en tablaHTML: `cl: 'col-fija-izq'`) la pega
* al borde izquierdo de la caja al desplazarse de lado, igual que la de acciones a la
* derecha. La segunda fija lleva además `col-fija-izq-2` (su `left` es el ancho de la
* primera, en `--fija-izq-2`) y la última fija, `col-fija-ult`, la que pinta la sombra
* cuando hay tabla debajo. Fondo opaco para que no se transparente lo de abajo. El
* encabezado sube un piso, y su cruce con una columna fija otro más: se pega en los dos
* sentidos y debe quedar encima de todo. */
.admin-shell .tabla-scroll > .tabla-odoo td.col-fija-izq {
position: sticky; left: 0; z-index: 3; background: var(--tarjeta);
}
.admin-shell .tabla-scroll > .tabla-odoo th.col-fija-izq { position: sticky; left: 0; z-index: 6; }
.admin-shell .tabla-scroll > .tabla-odoo:has(.col-fija-izq) > thead > tr > th { z-index: 4; }
.admin-shell .tabla-scroll > .tabla-odoo:has(.col-fija-izq) > thead > tr > th.col-fija-izq,
.admin-shell .tabla-scroll > .tabla-odoo:has(.col-fija-izq) > thead > tr > th:last-child { z-index: 6; }
.admin-shell .tabla-scroll > .tabla-odoo :is(th, td).col-fija-izq-2 { left: var(--fija-izq-2, 2.6rem); }
.admin-shell .tabla-scroll > .tabla-odoo :is(th, td).col-fija-ult { border-right: 1px solid var(--line-2); }
.admin-shell .tabla-scroll.tb-desborda > .tabla-odoo :is(th, td).col-fija-ult { box-shadow: 8px 0 10px -8px rgba(0,0,0,.35); }
/* La lista de un combo fija a la ventana (comboBusca con `fijo`): ni la caja que desplaza
* la recorta ni las columnas pegajosas la tapan. El JS pone left/top/ancho. */
.combo__lista.combo__lista--fija { position: fixed; z-index: 500; top: 0; left: 0; }
/* ---------- ADMINISTRADOR DE CFDIs: ANCHOS QUE NO SE AMONTONAN ---------- */
.cfa-tabla .tabla-odoo :is(th, td).cfa-c-sel { width: 2.6rem; min-width: 2.6rem; max-width: 2.6rem; box-sizing: border-box; padding-left: .55rem; padding-right: .4rem; text-align: center; }
.cfa-tabla .tabla-odoo td.cfa-c-emisor { min-width: 12rem; max-width: 16rem; }
.cfa-tabla .tabla-odoo td.cfa-c-emisor .tb-clamp { min-width: 10rem; max-width: 15rem; font-weight: 600; }
.cfa-tabla .tabla-odoo td.cfa-c-fecha { white-space: nowrap; }
.cfa-tabla .tabla-odoo td.cfa-c-folio { min-width: 6.5rem; }
.cfa-tabla .tabla-odoo td.cfa-c-folio .tb-pill { display: inline-block; margin-top: .15rem; }
.cfa-tabla .tabla-odoo td.cfa-c-forma .tb-clamp { min-width: 6.5rem; max-width: 10rem; }
.cfa-tabla .tabla-odoo td.cfa-c-cta { min-width: 12.5rem; width: 12.5rem; }
.cfa-tabla .cfa-cta { width: 100%; font-size: .8rem; padding: .2rem .4rem; }
.cfa-tabla .cfa-cta-nom {
max-width: 12rem; white-space: normal; overflow: hidden; overflow-wrap: anywhere;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.cfa-tabla .tabla-odoo td.cfa-c-receptor { max-width: 10rem; font-size: .8rem; }
.cfa-tabla .tabla-odoo td.cfa-c-receptor .tb-clamp { min-width: 6rem; max-width: 9.5rem; }
.cfa-tabla .cfa-ed { font-size: .8rem; padding: .2rem .4rem; box-sizing: border-box; }
.cfa-tabla .tabla-odoo td code { white-space: nowrap; }
/* ---------- TABLA EN TARJETAS EN EL TELÉFONO (reutilizable: tablaHTML con `tarjetas`) ----------
*
* En 375 px una tabla de quince columnas sólo se lee desplazándose de lado, y la columna
* fija se come media pantalla. Aquí cada renglón se vuelve una tarjeta: cada dato lleva su
* etiqueta (data-l), los campos editables ocupan su ancho y la caja deja de desplazar (la
* página baja normal, sin scroll de lado). */
@media (max-width: 640px) {
.tabla-wrap:has(> .tb-tarjetas) { max-height: none; overflow: visible; background: none; border: 0; box-shadow: none; }
.admin-shell .tabla-scroll.tb-tarjetas { max-height: none; overflow: visible; }
.admin-shell .tabla-scroll.tb-tarjetas > .tabla-odoo { min-width: 0; width: 100%; display: block; }
.tb-tarjetas > .tabla-odoo > thead { display: none; }
.tb-tarjetas > .tabla-odoo > tbody { display: block; }
.admin-shell .tb-tarjetas > .tabla-odoo > tbody > tr {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .45rem .75rem;
margin: 0 0 .7rem; padding: .7rem .8rem; background: var(--tarjeta);
border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.admin-shell .tb-tarjetas > .tabla-odoo > tbody > tr > td {
position: static; display: block; min-width: 0; max-width: none; width: auto;
padding: 0; border: 0; box-shadow: none; background: none; white-space: normal;
}
/* Las columnas fijas no tienen nada de qué despegarse en una tarjeta. */
.admin-shell .tabla-scroll.tb-tarjetas > .tabla-odoo td:is(.col-fija-izq, .col-fija-ult) {
position: static; border-right: 0; box-shadow: none; background: none;
}
.tb-tarjetas > .tabla-odoo > tbody > tr > td[data-l]::before {
content: attr(data-l); display: block; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
text-transform: uppercase; color: var(--muted); margin-bottom: .1rem;
}
.admin-shell .tb-tarjetas > .tabla-odoo > tbody > tr > td.col-acc { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .4rem; }
.tb-tarjetas .tb-clamp { min-width: 0; max-width: none; }
.tb-tarjetas input:not([type="checkbox"]) { width: 100%; font-size: 16px; min-height: 2.25rem; }
/* El CFDI: casilla y emisor arriba, el total grande a su lado; la cuenta, a lo ancho. */
.admin-shell .cfa-tabla .tabla-scroll.tb-tarjetas td.cfa-c-sel.col-fija-izq { position: absolute; top: .75rem; left: .75rem; width: auto; min-width: 0; max-width: none; }
.cfa-tabla .tb-tarjetas td.cfa-c-sel input { width: 1.25rem; height: 1.25rem; margin: 0; }
.cfa-tabla .tb-tarjetas > .tabla-odoo > tbody > tr > td:is(.cfa-c-sel, .cfa-c-emisor, .cfa-c-total)::before { display: none; }
/* Arriba de la tarjeta: el emisor a lo ancho (junto a la casilla) y el total, grande. */
.admin-shell .cfa-tabla .tb-tarjetas td.cfa-c-emisor { padding-left: 2rem; order: -2; grid-column: 1 / -1; }
.admin-shell .cfa-tabla .tb-tarjetas td.cfa-c-emisor .tb-clamp { font-size: .95rem; min-width: 0; max-width: none; }
.admin-shell .cfa-tabla .tb-tarjetas td.cfa-c-total { order: -1; grid-column: 1 / -1; padding-left: 2rem; font-size: 1.25rem; font-weight: 700; text-align: left; }
.admin-shell .cfa-tabla .tb-tarjetas td:is(.cfa-c-cta, .cfa-c-receptor) { grid-column: 1 / -1; }
.cfa-tabla .tb-tarjetas .cfa-cta-nom { max-width: none; }
.cfa-tabla .tb-tarjetas .cfa-ed { width: 100% !important; }
.cfa-tabla .tb-tarjetas td.cfa-c-chico { font-size: .8rem; }
}
/* =========================================================================
TEMA «DESPACHOS» — /admin dentro de Kern Despachos (iframe incrustado de la ficha
del cliente) o en una cuenta solo_despacho / kern_despacho. Sólo cambia tokens hacia
la paleta de solo.css (navy #1F3864, acero #2E5496, oro #B8933E, gris-azulado
#f5f7fa, líneas #e3e8ef). El rojo queda sólo para errores y borrar.
Lo enciende admin.js con document.documentElement.dataset.marca = 'despachos'.
========================================================================= */
:root[data-marca="despachos"] {
--red: #1F3864; --red-600: #2E5496; --red-700: #17294a; --red-tint: #e8edf6;
--red-rgb: 31,56,100; --red-tinta: #2E5496;
--ink: #1b2330; --ink-2: #2f3a4b; --muted: #5d6878; --muted-2: #6b7686;
--line: #e3e8ef; --line-2: #d3dbe6;
--cream: #f5f7fa; --cream-2: #eceff3; --realce: #eef2f7; --ink-band: #1F3864;
--mal-tinta: #c0392b; --mal-fondo: #fdecec;
--info-tinta: #2E5496; --info-fondo: rgba(46,84,150,.10);
--neutro-fondo: #eceff3;
--tabla-cab: #1F3864; --tabla-cab-tinta: #ffffff;
--font-display: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
--font-sans: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
--serie-facturado: #1F3864; --kpi-linea: #b8c2d0;
--doc-marca: #1F3864;
}
:root[data-marca="despachos"][data-theme="dark"] {
--red: #3b5f9e; --red-600: #4a71b4; --red-tint: #1a2436; --red-rgb: 106,145,214; --red-tinta: #8fb0e8;
--ink: #e6ebf2; --ink-2: #c9d2de; --muted: #9aa6b6; --muted-2: #8e9aab;
--line: #2a3342; --line-2: #364153;
--bg: #11161f; --cream: #161c27; --cream-2: #1d2532; --realce: #232c3b; --surface: #19202c; --tarjeta: #1d2532;
--mal-tinta: #F0757B; --mal-fondo: #2C1618; --info-tinta: #8fb0e8;
--tabla-cab: #24314a; --tabla-cab-tinta: #e6ebf2;
}
/* Foco con el oro de Despachos; borrar y los KPI malos siguen rojos. */
:root[data-marca="despachos"] :focus-visible { outline-color: rgba(184,147,62,.8); }
:root[data-marca="despachos"] .btn--primary:hover { background: #2E5496; box-shadow: inset 0 -2px 0 #B8933E; }
:root[data-marca="despachos"] .tb-link--danger,
:root[data-marca="despachos"] .tb-menu .tb-menu__item.tb-link--danger,
:root[data-marca="despachos"] .kpi--mal .kpi__value { color: #c0392b; }
:root[data-marca="despachos"] .kpi--mal { border-color: rgba(192,57,43,.35); }
:root[data-marca="despachos"][data-theme="dark"] .tb-link--danger,
:root[data-marca="despachos"][data-theme="dark"] .tb-menu .tb-menu__item.tb-link--danger,
:root[data-marca="despachos"][data-theme="dark"] .kpi--mal .kpi__value { color: #F0757B; }
/* Incrustado: sin fondo de página propio, toma el de la ficha. */
html.kern-incrustado[data-marca="despachos"],
html.kern-incrustado[data-marca="despachos"] body { background: transparent; }
/* ================= VACACIONES: DOS COLUMNAS =================
* Izquierda la lista de personas, derecha la elegida (periodos, registrar, tomas).
* Sólo tokens: con el tema despachos el resaltado y el botón salen navy/oro solos.
* Debajo de 1200px (con el menú lateral ya no caben dos) va en una columna y «← Empleados» regresa a la lista. */
.vac-dos { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 1rem; align-items: start; }
.vac-col { min-width: 0; padding: 1rem; }
.vac-col--emp { position: sticky; top: var(--techo, 54px); max-height: calc(100vh - var(--techo, 54px) - 1rem); display: flex; flex-direction: column; }
.vac-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.vac-col--emp > input[type=search] { width: 100%; margin-bottom: .5rem; padding: .4rem .6rem; font: inherit; font-size: .88rem; border: 1px solid var(--line-2, var(--line)); border-radius: 6px; background: var(--surface); color: var(--ink); }
.vac-filtros { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }
.vac-chip { border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); border-radius: 999px; padding: .2rem .65rem; font: inherit; font-size: .8rem; cursor: pointer; }
.vac-chip.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.vac-lista { overflow: auto; min-height: 0; border: 1px solid var(--line); border-radius: 8px; outline: none; }
.vac-lista:focus-visible { box-shadow: 0 0 0 2px rgba(var(--red-rgb), .35); }
.vac-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.vac-tabla th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 600; color: var(--muted); font-size: .74rem; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.vac-tabla td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vac-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.vac-tabla tbody tr { cursor: pointer; }
.vac-tabla tbody tr:hover, .vac-tabla tbody tr.is-foco { background: rgba(var(--red-rgb), .05); }
.vac-tabla tbody tr.is-sel { background: rgba(var(--red-rgb), .1); box-shadow: inset 3px 0 0 var(--red); }
.vac-tabla .tb-pill, .vac-tabla td:nth-child(2), .vac-tabla .num, .vac-nw { white-space: nowrap; }
#vacPeriodos th { white-space: nowrap; }
#vacPeriodos table { font-size: .84rem; }
#vacPeriodos th, #vacPeriodos td, #vacTomadas th, #vacTomadas td { padding-left: .45rem; padding-right: .45rem; }
.tb-pill--neutro { background: var(--neutro-fondo); color: var(--neutro-tinta); }
.vac-volver { display: none; margin-bottom: .6rem; }
.vac-quien { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line); }
.vac-quien__nombre { font-size: 1.08rem; }
.vac-quien__saldo { font-size: .9rem; }
.vac-mal { color: var(--mal-tinta); }
.vac-aviso-tinta { color: var(--aviso-tinta); }
.vac-aviso { border-left: 3px solid var(--mal-tinta); background: var(--mal-fondo); border-radius: 6px; padding: .45rem .7rem; margin-bottom: .8rem; font-size: .88rem; }
.vac-aviso summary { cursor: pointer; }
#vacPeriodos tr.vac-clic { cursor: pointer; }
#vacPeriodos tr.vac-clic:hover { background: rgba(var(--red-rgb), .05); }
.vac-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem .8rem; }
.vac-rejilla .field { margin: 0; min-width: 0; }
.vac-rejilla .field input, .vac-rejilla .field select { width: 100%; }
.vac-rejilla .vac-ancho { grid-column: span 2; }
.vac-rejilla input[readonly] { background: var(--cream, transparent); color: var(--ink-2); }
.vac-prima { width: 4.2rem; text-align: right; }
@media (max-width: 1199px) {
.vac-dos { grid-template-columns: minmax(0, 1fr); }
.vac-col--emp { position: static; max-height: none; }
.vac-lista { max-height: 60vh; }
.vac-dos.is-detalle .vac-col--emp { display: none; }
.vac-dos:not(.is-detalle) .vac-col--det { display: none; }
.vac-volver { display: inline-flex; }
}
@media (max-width: 560px) {
.vac-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vac-col { padding: .75rem; }
.vac-tabla th:nth-child(2), .vac-tabla td:nth-child(2) { display: none; }
}
/* Vacaciones: la tabla de periodos es corta y no necesita la última columna pegada a la
* derecha; pegada, tapaba la fecha del plazo. Que quepa sin desplazarse de lado. */
.admin-shell #vacPeriodos .tabla-scroll > .tabla-odoo { min-width: 0; }
.admin-shell #vacPeriodos .tabla-scroll > .tabla-odoo th:last-child,
.admin-shell #vacPeriodos .tabla-scroll > .tabla-odoo td:last-child { position: static; border-left: 0; }
.admin-shell #vacPeriodos .tabla-odoo th, .admin-shell #vacPeriodos .tabla-odoo td { padding-left: .45rem; padding-right: .45rem; }
.admin-shell #vacPeriodos .tb-pill { white-space: nowrap; }