/* Planeación de Flujo — identidad Sago Marca: #173233 (verde profundo) · #5cb070 (verde) · #d5eb89 (lima) #cecece (gris) · #ffffff · #ff619e (rosa, acento) Tipografía: Neue Haas Grotesk (títulos y texto) + Times New Roman itálica (acentos) */ :root { color-scheme: light; /* --- colores de marca --- */ --marca-oscuro: #173233; --marca-verde: #5cb070; --marca-lima: #d5eb89; --marca-gris: #cecece; --marca-rosa: #ff619e; /* --- superficies e ink --- */ --plano: #f3f6ef; --superficie: #ffffff; --tinta: #173233; --tinta-2: #4a6163; --tinta-suave: #85999a; --linea: #e2e8dd; --eje: #c7d2c6; --borde: rgba(23, 50, 51, 0.14); /* --- acciones --- */ --acento: #173233; --acento-oscuro: #0d2021; --acento-wash: #eaf4d5; --enlace: #2c7a4b; /* --- estados (semántica de datos) --- Tonos derivados de la marca y validados: separación mínima entre estados ΔE 22.5 en visión normal y 12.0 con daltonismo (umbral 8); contraste 3.84:1 y 7.44:1 sobre blanco. El ámbar queda en 2.19:1 a propósito —para que se lea como advertencia— y por eso cada semana lleva SIEMPRE su etiqueta de texto y su cifra, nunca solo el color. */ --bien: #419257; --bien-texto: #2c7a4b; --alerta: #e0a52e; --alerta-texto: #855400; --grave: #ec835a; --critico: #9e2b21; --bien-wash: rgba(65, 146, 87, 0.13); --alerta-wash: rgba(224, 165, 46, 0.18); --critico-wash: rgba(158, 43, 33, 0.10); /* --- armazón oscuro (barra + menú) --- */ --shell: #173233; --shell-tinta: #eef4e6; --shell-suave: #9cb3a9; --shell-linea: rgba(213, 235, 137, 0.15); --shell-hover: rgba(213, 235, 137, 0.10); /* --- escala adaptable (pantallas 1920 / 2560 / 3840) --- Dos perillas: --u para el TEXTO y --e para el AIRE (paddings, huecos, anchos de columna). Todo lo demás se escribe como calc(N * var(--u)), así el número original sigue a la vista: 13.5 sigue diciendo 13.5. OJO, se mide contra el ancho CSS de la VENTANA, no contra los pixeles del monitor, y eso es lo correcto: un 4K con el escalado normal de macOS reporta 1920 px CSS —el texto ya se ve del tamaño debido— así que agrandarlo por sus 3840 físicos lo dejaría enorme. Por eso un 1920 y un 4K en Retina dan el mismo resultado, y un 2560 sin escalar sí crece. Al ser clamp() y no escalones, una ventana a media pantalla cae en el punto que le toca en vez de saltar de golpe. ancho de ventana: 1400 1920 2560 3000+ --u (texto): 1.00 1.08 1.18 1.25 --e (aire): 1.00 1.16 1.36 1.50 */ --u: clamp(1px, 0.0156vw + 0.781px, 1.25px); --e: clamp(1px, 0.0313vw + 0.563px, 1.5px); /* Tope del ancho de lectura: crece con la ventana pero no sin límite — pasados ~1900 px una tabla de 6 columnas solo separa la fecha del monto y obliga a barrer la vista de lado a lado. */ --ancho-contenido: clamp(1180px, 84vw, 1900px); --radio: 10px; --sombra: 0 1px 2px rgba(23, 50, 51, 0.06), 0 6px 18px rgba(23, 50, 51, 0.05); --sans: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, Arial, sans-serif; --serif: "Times New Roman", Times, serif; font-family: var(--sans); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Columna de altura completa: así el menú oscuro llega hasta abajo sin depender de restarle a 100vh la altura de la barra, que ya no es un número fijo (crece con --e). */ body { background: var(--plano); color: var(--tinta); font-size: calc(14.5 * var(--u)); line-height: 1.45; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } h1 { font-size: calc(22 * var(--u)); margin: 0 0 4px; letter-spacing: -0.4px; font-weight: 700; } h2 { font-size: calc(16 * var(--u)); margin: 26px 0 10px; letter-spacing: -0.2px; } h3 { font-size: calc(14.5 * var(--u)); margin: 0 0 8px; letter-spacing: -0.1px; font-weight: 650; } p { margin: 6px 0; } a { color: var(--enlace); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--marca-oscuro); } code { font-family: ui-monospace, Menlo, monospace; font-size: 0.92em; background: var(--plano); border: 1px solid var(--linea); border-radius: 5px; padding: 1px 5px; } .acento-serif { font-family: var(--serif); font-style: italic; } /* ---------- barra superior (oscura, marca) ---------- */ #barra { display: flex; align-items: center; gap: 14px; padding: calc(10 * var(--e)) calc(18 * var(--e)); background: var(--shell); color: var(--shell-tinta); position: sticky; top: 0; z-index: 20; flex: 0 0 auto; } #logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--shell-tinta); font-weight: 650; font-size: calc(15.5 * var(--u)); letter-spacing: -0.2px; } #logo:hover { color: var(--marca-lima); } #barra-empresa { display: flex; align-items: center; gap: 10px; min-width: 0; } #barra-hoy { margin-left: auto; color: var(--shell-suave); font-size: calc(13 * var(--u)); white-space: nowrap; } .chip-empresa { display: inline-flex; align-items: center; gap: 8px; background: rgba(213, 235, 137, 0.14); color: var(--marca-lima); border: 1px solid var(--shell-linea); padding: 4px 12px; border-radius: 99px; font-weight: 600; font-size: calc(13.5 * var(--u)); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .enlace-cambiar { font-size: calc(12.5 * var(--u)); color: var(--shell-suave); text-decoration: none; } .enlace-cambiar:hover { color: var(--marca-lima); } /* ---------- estructura ---------- */ #cuerpo { display: flex; flex: 1 1 auto; min-height: 0; } #menu { width: calc(212 * var(--u)); flex: 0 0 auto; padding: calc(14 * var(--e)) calc(10 * var(--e)); background: var(--shell); color: var(--shell-tinta); } #menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 2px 0; border-radius: 8px; color: var(--shell-tinta); text-decoration: none; font-weight: 500; font-size: calc(14 * var(--u)); opacity: 0.86; } #menu a:hover { background: var(--shell-hover); opacity: 1; } #menu a.activo { background: var(--marca-lima); color: var(--marca-oscuro); font-weight: 650; opacity: 1; } .icono-nav { flex: 0 0 auto; } #menu .mini-saldo { margin: 16px 8px 4px; padding: 12px; border: 1px solid var(--shell-linea); border-radius: var(--radio); background: rgba(0, 0, 0, 0.16); } #menu .mini-saldo .etiqueta { font-size: calc(11.5 * var(--u)); color: var(--shell-suave); } #menu .mini-saldo .valor { font-size: calc(17 * var(--u)); font-weight: 650; margin-top: 2px; color: var(--marca-lima); font-variant-numeric: tabular-nums; } /* El ancho deseado va como flex-basis (no como max-width) para poder centrar con `margin-inline: auto`: en una pantalla muy ancha el contenido topa con su tope de lectura y lo que sobra se reparte a los dos lados, en vez de dejar un hueco muerto de 1600 px pegado a la derecha. OJO: los márgenes automáticos se comen el espacio libre ANTES que flex-grow, así que crecer y centrar a la vez no se puede — de ahí que el ancho viaje en la base y el crecimiento quede en 0. El `shrink: 1` con `min-width: 0` es lo que deja encoger cuando la ventana es más angosta. */ #contenido { flex: 0 1 var(--ancho-contenido); min-width: 0; margin-inline: auto; padding: calc(24 * var(--e)) calc(26 * var(--e)) calc(60 * var(--e)); } .sub { color: var(--tinta-suave); font-size: calc(13 * var(--u)); } /* La rueda es la única señal de que algo sigue ocurriendo: sin ella, un "Cargando…" quieto se lee igual que una pantalla colgada. */ .cargando { color: var(--tinta-suave); padding: 40px 0; text-align: center; } .cargando::before { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 12px; border: 2.5px solid var(--linea); border-top-color: var(--marca-verde); border-radius: 50%; animation: girar 0.7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cargando::before { animation-duration: 2.4s; } } /* ---------- tarjetas / tiles ---------- */ .fila-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(190 * var(--u)), 1fr)); gap: calc(12 * var(--e)); margin: calc(14 * var(--e)) 0 6px; } .tile { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: calc(14 * var(--e)) calc(16 * var(--e)); box-shadow: var(--sombra); /* Para que la cifra pueda medirse contra SU tile y no contra la ventana. */ container-type: inline-size; } .tile .etiqueta { font-size: calc(12.5 * var(--u)); color: var(--tinta-2); } /* tabular-nums también aquí: las cifras de los tiles se leen en fila y con ancho variable los pesos y los centavos bailan de un tile a otro. */ .tile .valor { font-size: calc(25 * var(--u)); font-weight: 650; margin-top: 3px; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; } .tile .detalle { font-size: calc(12.5 * var(--u)); color: var(--tinta-suave); margin-top: 3px; } .tile.heroe { border-color: rgba(23, 50, 51, 0.22); } .tile.heroe .valor { font-size: calc(31 * var(--u)); } /* La cifra se sale del tile cuando es larga: $1,561,734.59 mide 190 px a 31 px de fuente contra 172 px de interior. Y no bastaba encogerla según el ancho del tile, porque el ancho que necesita depende de DOS cosas: cuánto espacio hay y cuántos dígitos son. CSS sabe lo primero (100cqi) y app.js pone lo segundo en `--n` al pintar (ajustarCifras). El 0.48 sale de medir, no de adivinar: a 31 px, «$1,561,734.59» —13 caracteres— mide 190 px, o sea 14.65 px por carácter, 0.4726 del tamaño de fuente. Con tabular-nums todos los dígitos miden igual, así que la cuenta es fiable; 0.48 deja un pelo de holgura. `min()` es lo que hace que esto NO sea un cambio de diseño: una cifra que cabe conserva su tamaño exacto —$0.00 sigue a 31 px— y solo encoge la que se saldría, lo justo para caber. Si `--n` faltara (JS que no corrió), el divisor se va a 0.48 y el mínimo lo gana el tamaño de diseño: se comporta como antes en vez de encoger de más. Medido: 13 caracteres 27–31 px, 15 caracteres 23.5–28.4 px, 18 caracteres 19.6–23.7 px, sin desborde a 1460, 1042, 900 ni 700 px de contenido. */ .tile .valor { font-size: min(calc(25 * var(--u)), calc(100cqi / (var(--n, 1) * 0.48))); } .tile.heroe .valor { font-size: min(calc(31 * var(--u)), calc(100cqi / (var(--n, 1) * 0.48))); } .valor.negativo, .monto-neg { color: var(--critico); } .detalle .malo { color: var(--critico); font-weight: 600; } .detalle .bueno { color: var(--bien-texto); } .tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: calc(16 * var(--e)) calc(18 * var(--e)); box-shadow: var(--sombra); margin: calc(14 * var(--e)) 0; } /* ---------- botones ---------- */ button, .boton { font: inherit; font-family: var(--sans); font-size: calc(13.5 * var(--u)); font-weight: 600; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); padding: 7px 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } button:hover, .boton:hover { background: var(--plano); border-color: var(--eje); } .primario { background: var(--acento); border-color: var(--acento); color: #fff; } .primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: var(--marca-lima); } .peligro { color: var(--critico); border-color: rgba(158, 43, 33, 0.38); } .peligro:hover { background: var(--critico-wash); border-color: var(--critico); } /* Acción en vuelo: la pone el manejador de clics de app.js mientras el botón está cerrado con llave, para que se vea que el toque sí se registró y que lo que falta es esperar — no volver a picarle. */ button[aria-busy="true"] { opacity: .55; cursor: progress; } /* El dato de respaldo bajo el que de verdad se lee: la razón social bajo el nombre comercial, o el concepto bajo el folio. Va más chico y apretado porque en columnas angostas un texto largo se partía en cuatro renglones y estiraba toda la fila. */ .subrenglon { display: block; font-size: calc(11 * var(--u)); line-height: 1.2; font-weight: 400; } .mini { padding: 3px 9px; font-size: calc(12.5 * var(--u)); font-weight: 550; } .fantasma { border-color: transparent; background: transparent; color: var(--enlace); } .fantasma:hover { background: var(--acento-wash); border-color: transparent; } .barra-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; } .separador-flex { flex: 1; } /* Los botones de una barra de lote viajan JUNTOS: cuando la barra ya no alcanza, el grupo entero baja al siguiente renglón y se queda a la derecha, en vez de que el último se desprenda solo hasta la izquierda. */ .acciones-lote { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } /* Y apagados se VEN apagados. Sin esto, «Eliminar marcadas» se lee igual de vivo con cero casillas marcadas que con cuarenta, y un botón rojo que parece listo para borrar y no hace nada es peor que uno que se ve gris. */ #lote-barra button:disabled { opacity: 0.45; cursor: not-allowed; } /* Lo mismo para «Ligar» en «Ya facturó»: espera a que se escoja factura y, si falta facturar, qué pasa con el resto. */ #lig-ligar:disabled { opacity: 0.45; cursor: not-allowed; } .segmentos { display: inline-flex; border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; background: var(--superficie); } .segmentos button { border: 0; border-radius: 0; font-weight: 550; color: var(--tinta-2); } .segmentos button + button { border-left: 1px solid var(--linea); } .segmentos button.activo { background: var(--marca-lima); color: var(--marca-oscuro); font-weight: 650; } /* Rango de fechas de las bandejas (Facturas SAT y Banco). */ .rango-fechas { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); } .rango-fechas input { padding: 6px 8px; } /* Y el de importe (Banco y Tarjetas): lo que no se entiende como importe se pinta, porque una casilla llena que no filtra se lee como un filtro puesto. */ .rango-importe { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); } .rango-importe input { width: 96px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; } .rango-importe input.invalido { border-color: var(--critico); background: var(--critico-wash); } select, input, textarea { font: inherit; font-family: var(--sans); font-size: calc(13.5 * var(--u)); color: var(--tinta); border: 1px solid var(--eje); border-radius: 8px; padding: 7px 10px; background: #fff; } input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 1px; border-color: var(--marca-verde); } label { display: block; font-size: calc(12.5 * var(--u)); color: var(--tinta-2); font-weight: 550; margin: 10px 0 4px; } .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .campos .ancho { grid-column: 1 / -1; } /* ---------- combo: elegir de lo ya capturado, o escribir uno nuevo ---------- */ .combo { position: relative; display: block; } .combo > input { width: 100%; padding-right: 30px; } .combo-flecha { position: absolute; top: 0; right: 0; height: 100%; width: 28px; padding: 0; justify-content: center; font-size: calc(11 * var(--u)); line-height: 1; border: 0; background: transparent; color: var(--tinta-suave); } .combo-flecha:hover { background: transparent; color: var(--tinta); } .combo-panel { position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--superficie); border: 1px solid var(--eje); border-radius: 8px; box-shadow: 0 10px 26px rgba(23, 50, 51, 0.16); padding: 4px; } .combo.arriba .combo-panel { top: auto; bottom: calc(100% + 3px); } .combo-opcion { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; text-align: left; font-weight: 500; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; } .combo-opcion:hover, .combo-opcion.activa { background: var(--acento-wash); border: 0; } .combo-opcion > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-opcion .texto-suave { font-size: calc(11.5 * var(--u)); white-space: nowrap; } .combo-nuevo { color: var(--enlace); font-weight: 600; } .combo-vacio { padding: 7px 8px; font-size: calc(12.5 * var(--u)); color: var(--tinta-suave); } .combo-nota { font-size: calc(11.5 * var(--u)); color: var(--alerta-texto); margin-top: 3px; } .combo-nota button { font-size: calc(11.5 * var(--u)); padding: 1px 5px; vertical-align: baseline; } /* ---------- tablas ---------- */ table { border-collapse: collapse; width: 100%; font-size: calc(13.5 * var(--u)); } th { text-align: left; font-size: calc(11.5 * var(--u)); font-weight: 650; color: var(--tinta-suave); padding: calc(8 * var(--e)) calc(10 * var(--e)); border-bottom: 1px solid var(--linea); white-space: normal; text-transform: uppercase; letter-spacing: 0.4px; } /* El aire de la celda va con --e, que crece más rápido que el texto: es lo que quita la sensación de apretado cuando sobra pantalla. */ td { padding: calc(8 * var(--e)) calc(10 * var(--e)); border-bottom: 1px solid var(--linea); vertical-align: top; } tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } tbody tr:hover { background: var(--plano); } .tabla-envoltura { overflow-x: auto; } /* La columna del nombre no se estruja hasta partir «ACME SA DE CV» en tres renglones: antes cede el resto. */ th.col-nombre { min-width: 12ch; } /* ---------- celda de acciones ---------- Antes heredaba el nowrap de las cifras (iba con class="num" para alinearla a la derecha) y los botones no podían envolver: en pantallas de menos de ~1,900 px la tabla se pasaba del ancho de la tarjeta y los botones de la derecha se cortaban. Ahora los botones van en una fila que envuelve con separación pareja, y las acciones secundarias viven en un menú de tres puntos para que cada renglón mida lo mismo en cualquier pantalla. */ td.celda-acciones, th.celda-acciones { text-align: right; white-space: normal; } td.celda-acciones .acciones { justify-content: flex-end; min-width: 0; } td.celda-acciones .vinculos-mov { align-items: flex-end; } /* La columna del concepto es la que crece: sin esto la de acciones se quedaba con el ancho sobrante y la descripción del banco se partía en cuatro renglones junto a un hueco vacío. */ th.col-concepto { width: 44%; } /* Los desplegables de la bandeja miden lo que su opción más larga —«SAGO ACELERADORA DE NEGOCIOS · Factura del 1 sep · $57,418.98 · 7 sep»—, y eso le ponía a la columna de acciones un piso de 538 px: la mitad de la tabla. El tope de 420 px NO bastaba, porque un tope acota pero no obliga a ceder: el select seguía sin poder encoger y la tabla se desbordaba con los botones afuera. Ahora es un elemento flexible que sí cede —el min-width lo deja legible y el texto completo sigue ahí al abrirlo— y la columna lleva su propio tope, para que el ancho sobrante se lo quede el concepto. Medido en el arnés a 1344 px de ventana (un 1680 al 125 % de zoom, que es donde se reportó): la tabla pedía 1074 px contra 1042 disponibles y cortaba «Casar» e «Ignorar»; ahora pide 1042 y no corta nada. El punto de quiebre pasa de ~1220 px de contenido a ~950. */ select.sel-casar, select.sel-linea { max-width: min(420px, 100%); min-width: calc(120 * var(--u)); flex: 1 1 calc(150 * var(--u)); } th.celda-acciones, td.celda-acciones { max-width: calc(330 * var(--u)); } /* La rutina trae su propia celda de acciones (nowrap) y sus propios topes. */ .rutina th.celda-acciones, .rutina td.celda-acciones { max-width: none; } .acciones { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .menu-mas { display: inline-block; position: relative; } .menu-mas > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 30px; padding: 3px 7px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-2); font-weight: 700; line-height: 1.15; font-size: calc(14 * var(--u)); letter-spacing: 1px; } .menu-mas > summary::-webkit-details-marker { display: none; } .menu-mas > summary:hover, .menu-mas[open] > summary { background: var(--plano); border-color: var(--eje); color: var(--tinta); } /* La lista va con position:fixed y la coloca app.js: dentro de la tarjeta de una tabla, lo que se sale del área que se desplaza se recorta. */ .menu-mas .menu-lista { position: fixed; z-index: 40; min-width: calc(190 * var(--u)); padding: 5px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 8px 28px rgba(23, 50, 51, 0.16); display: flex; flex-direction: column; text-align: left; } .menu-mas .menu-lista button { width: 100%; justify-content: flex-start; border: 0; border-radius: 7px; background: transparent; padding: 7px 10px; font-weight: 550; font-size: calc(13 * var(--u)); color: var(--tinta); white-space: nowrap; } .menu-mas .menu-lista button:hover { background: var(--plano); } .menu-mas .menu-lista button.peligro { color: var(--critico); } .menu-mas .menu-lista button.peligro:hover { background: var(--critico-wash); } .fila-error { background: var(--critico-wash); } .fila-error:hover { background: var(--critico-wash); } .texto-suave { color: var(--tinta-suave); } .texto-2 { color: var(--tinta-2); } .tachado { text-decoration: line-through; color: var(--tinta-suave); } /* ---------- chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: calc(11.5 * var(--u)); font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--borde); color: var(--tinta-2); white-space: nowrap; } .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); } .chip.alta::before, .chip.confirmado::before, .chip.ok::before { background: var(--bien); } .chip.media::before, .chip.estimado::before, .chip.ajustado::before { background: var(--alerta); } .chip.baja::before, .chip.negativo::before { background: var(--critico); } .chip.critico { background: var(--marca-oscuro); color: var(--marca-lima); border-color: var(--marca-oscuro); } .chip.critico::before { background: var(--marca-lima); } .chip.importante::before { background: var(--marca-verde); } .chip.flexible::before { background: var(--marca-gris); } /* Un chip que además es botón: el de prioridad en el flujo, que se cambia ahí mismo en vez de ir a Pagos → Editar. Hereda todo del chip —no es un control nuevo que aprender— y solo se le quita el fondo que los botones traen de serie, para que se vea idéntico al chip de al lado. */ button.chip { background: transparent; } button.chip:hover { background: var(--plano); border-color: var(--eje); } button.chip.critico:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); } /* Las tres opciones de prioridad, cada una con lo que significa: la palabra sola no dice lo que hace, y lo que de verdad cambia es a quién va a proponer posponer el plan de pagos cuando la semana no alcance. */ .opciones-prioridad { display: grid; gap: 8px; margin-top: 14px; } .opcion-prioridad { display: grid; grid-template-columns: auto 1fr; gap: 4px calc(12 * var(--e)); align-items: center; text-align: left; padding: calc(10 * var(--e)) calc(13 * var(--e)); font-weight: 500; } .opcion-prioridad .texto { color: var(--tinta-2); font-size: calc(13 * var(--u)); } .opcion-prioridad .texto-suave { grid-column: 2; font-size: calc(12 * var(--u)); } .opcion-prioridad.actual { border-color: var(--eje); background: var(--plano); } .opcion-prioridad[disabled] { opacity: 1; cursor: default; } .chip.vencida { background: var(--critico-wash); color: var(--critico); border-color: rgba(158, 43, 33, 0.3); } .chip.vencida::before { background: var(--critico); } .chip.aplazado { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.aplazado::before { background: var(--alerta); } .chip.inicial { background: var(--acento-wash); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.2); } .chip.inicial::before { background: var(--marca-oscuro); } .chip.credito { background: var(--acento-wash); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.18); } .chip.credito::before { background: var(--marca-oscuro); } .chip.planeado::before { background: var(--marca-verde); } /* El interruptor del IVA de cada mes hacia el flujo (2026-09-16). Se ve como un chip porque lo primero que se lee de él es un ESTADO —entra o no entra al flujo—, pero es un botón de verdad: se pica y cambia. El punto de color y el lavado son los mismos de .chip.ok y .chip.vencida, para que la columna se lea con el mismo vocabulario que el resto de la tabla. */ button.interruptor { display: inline-flex; align-items: center; gap: 5px; font-size: calc(11.5 * var(--u)); font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--borde); color: var(--tinta-2); white-space: nowrap; cursor: pointer; } button.interruptor::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); } button.interruptor.si { background: var(--bien-wash); color: var(--bien); border-color: rgba(65, 146, 87, 0.3); } button.interruptor.si::before { background: var(--bien); } button.interruptor.no { background: var(--critico-wash); color: var(--critico); border-color: rgba(158, 43, 33, 0.3); } button.interruptor.no::before { background: var(--critico); } button.interruptor:hover { border-color: var(--tinta-2); } /* Partida cobrada o aplicada A MEDIAS: lima de la marca, para que se vea que ya entró dinero sin confundirse con «pendiente» ni con «cobrada». */ .chip.parcial { background: var(--marca-lima); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.18); } .chip.parcial::before { background: var(--marca-oscuro); } /* Bandeja del banco: lo que un movimiento ya tiene aplicado, vínculo por vínculo, y el modal «Repartir» que casa un movimiento con varias partidas. */ .vinculos-mov { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; } .vinculos-mov .vinculo { font-size: calc(12.5 * var(--u)); color: var(--tinta-suave); } .vinculos-mov .vinculo .num { font-variant-numeric: tabular-nums; color: var(--tinta); } .reparto tr.rep-grupo td { font-size: calc(11.5 * var(--u)); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); padding-top: calc(12 * var(--e)); border-bottom: none; } .reparto tr.marcada td { background: var(--acento-wash); } .reparto .subrenglon { display: block; font-size: calc(12 * var(--u)); } /* La lista de movimientos que se van a aplicar juntos: informativa, no se toca, y va arriba del todo para que lo que se está por mover siga a la vista mientras se elige la partida. */ .lote-movs table { font-size: calc(13 * var(--u)); } .lote-movs td { padding-top: calc(4 * var(--e)); padding-bottom: calc(4 * var(--e)); } .lote-movs .subrenglon { display: block; font-size: calc(12 * var(--u)); } .rep-pie { display: flex; flex-wrap: wrap; gap: 8px calc(16 * var(--e)); align-items: center; margin-top: calc(14 * var(--e)); padding-top: calc(12 * var(--e)); border-top: 1px solid var(--linea); } .rep-pie .sumas { font-variant-numeric: tabular-nums; } .rep-pie .bien { color: var(--bien); } .rep-pie .negativo, .rep-pie .sumas .negativo { color: var(--critico); } .chip.realizado::before { background: var(--bien); } /* medidor de uso de línea */ .meter { position: relative; display: inline-block; vertical-align: middle; width: 120px; height: 8px; border-radius: 5px; background: var(--acento-wash); overflow: hidden; } .meter > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--marca-verde); } .meter.ambar > i { background: var(--alerta); } .meter.rojo > i { background: var(--critico); } /* ---------- semana (flujo) ---------- */ .semana { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); margin: 10px 0; overflow: hidden; box-shadow: var(--sombra); } .semana > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: calc(26 * var(--u)) minmax(calc(150 * var(--u)), 1.4fr) repeat(3, minmax(calc(120 * var(--u)), 1fr)) calc(130 * var(--u)); gap: calc(8 * var(--e)); align-items: center; padding: calc(10 * var(--e)) calc(14 * var(--e)); } .semana > summary::-webkit-details-marker { display: none; } .semana > summary:hover { background: var(--plano); } .semana .flecha { color: var(--tinta-suave); font-size: calc(11 * var(--u)); transition: transform 0.15s; } .semana[open] .flecha { transform: rotate(90deg); } .semana .rotulo { font-weight: 650; } .semana .rotulo .sub { font-weight: 400; } .semana .cifra { text-align: right; font-variant-numeric: tabular-nums; } .semana .cifra .etiqueta { display: block; font-size: calc(11 * var(--u)); color: var(--tinta-suave); font-weight: 500; } .semana.estado-negativo { border-left: 4px solid var(--critico); } .semana.estado-ajustado { border-left: 4px solid var(--alerta); } .semana.estado-ok { border-left: 4px solid var(--marca-verde); } .semana .interior { border-top: 1px solid var(--linea); padding: calc(10 * var(--e)) calc(14 * var(--e)) calc(14 * var(--e)); background: #fff; } .semana .interior h4 { font-size: calc(11.5 * var(--u)); color: var(--tinta-suave); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; } .semana .interior h4:first-child { margin-top: 2px; } /* Cobros o pagos plegados en todas las semanas a la vez (2026-10-06): el título es un botón que se lee como título, con la flecha de las semanas y cuántos son y cuánto suman, que se quedan a la vista al plegar. */ .plegar-seccion { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: transparent; border: 0; border-radius: 6px; padding: 3px 6px 3px 2px; margin-left: -2px; gap: 7px; } .plegar-seccion:hover { background: var(--plano); } .plegar-seccion .flecha { font-size: calc(9 * var(--u)); } .semana .plegar-seccion[aria-expanded="true"] .flecha { transform: rotate(90deg); } .semana .plegar-seccion[aria-expanded="false"] .flecha { transform: none; } .plegar-seccion .resumen-seccion { text-transform: none; letter-spacing: 0; font-weight: 500; font-variant-numeric: tabular-nums; } .semanas-flujo.sin-cobros [data-seccion="cobros"], .semanas-flujo.sin-pagos [data-seccion="pagos"] { display: none; } .actual-marca { font-size: calc(11 * var(--u)); color: var(--marca-oscuro); background: var(--marca-lima); border-radius: 5px; padding: 1px 7px; font-weight: 650; margin-left: 8px; } /* ---------- gráfica ---------- */ .grafica-envoltura { overflow-x: auto; padding: 4px 0 2px; } .grafica-leyenda { display: flex; gap: 16px; font-size: calc(12 * var(--u)); color: var(--tinta-2); margin-top: 6px; flex-wrap: wrap; } .grafica-leyenda span { display: inline-flex; align-items: center; gap: 6px; } .punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } #tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--marca-oscuro); color: var(--shell-tinta); border-radius: 8px; padding: 8px 11px; font-size: calc(12.5 * var(--u)); line-height: 1.5; max-width: 260px; box-shadow: 0 6px 20px rgba(23, 50, 51, 0.3); } #tooltip .t-titulo { font-weight: 650; color: var(--marca-lima); margin-bottom: 2px; } #tooltip .t-fila { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; } /* ---------- inicio ---------- */ .rejilla-empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(290 * var(--u)), 1fr)); gap: calc(14 * var(--e)); margin-top: 16px; } .tarjeta-empresa { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); cursor: pointer; display: block; text-decoration: none; color: var(--tinta); } .tarjeta-empresa:hover { border-color: var(--marca-verde); box-shadow: 0 2px 4px rgba(23,50,51,0.08), 0 10px 24px rgba(23,50,51,0.08); } .tarjeta-empresa h3 { font-size: calc(15 * var(--u)); margin-bottom: 8px; } .tarjeta-empresa .linea-dato { display: flex; justify-content: space-between; font-size: calc(13 * var(--u)); padding: 3px 0; color: var(--tinta-2); } .tarjeta-empresa .linea-dato b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); } .banda-alerta { margin-top: 10px; font-size: calc(12.5 * var(--u)); font-weight: 600; padding: 5px 10px; border-radius: 7px; display: flex; align-items: center; gap: 7px; } .banda-alerta.roja { background: var(--critico-wash); color: var(--critico); } .banda-alerta.ambar { background: var(--alerta-wash); color: var(--alerta-texto); } .banda-alerta.verde { background: var(--bien-wash); color: var(--bien-texto); } /* ---------- alertas panel ---------- */ .lista-alertas { list-style: none; padding: 0; margin: 0; } .lista-alertas li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linea); } .lista-alertas li:last-child { border-bottom: 0; } .icono-alerta { flex: 0 0 auto; color: var(--tinta-suave); display: inline-flex; align-items: center; padding-top: 1px; } .icono-alerta.critico { color: var(--critico); } .icono-alerta.alerta { color: var(--alerta-texto); } /* ---------- modal ---------- */ dialog { border: 0; border-radius: 14px; padding: 0; width: calc(560 * var(--u)); max-width: min(calc(640 * var(--u)), 92vw); box-shadow: 0 24px 60px rgba(23, 50, 51, 0.28); background: var(--superficie); color: var(--tinta); } dialog::backdrop { background: rgba(23, 50, 51, 0.42); } /* Para los modales que muestran una tabla (amortización): con 560px las columnas quedan ilegibles y el área de pegado no cabe. */ dialog.ancho { width: min(calc(1040 * var(--u)), 94vw); max-width: min(calc(1040 * var(--u)), 94vw); } .modal-cuerpo { padding: calc(20 * var(--e)) calc(22 * var(--e)); max-height: 82vh; overflow-y: auto; } .modal-cuerpo h3 { font-size: calc(16.5 * var(--u)); margin-bottom: 4px; } .modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } /* El visor de adjuntos (verArchivo en app.js): casi toda la pantalla, porque un PDF a 560 px no se lee. El display solo con [open]: un #visor { display } le ganaría al dialog:not([open]) del navegador y el visor nunca se cerraría. */ #visor { width: min(calc(1100 * var(--u)), 96vw); max-width: min(calc(1100 * var(--u)), 96vw); height: 92vh; max-height: 92vh; overflow: hidden; } #visor[open] { display: flex; flex-direction: column; } .visor-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: calc(10 * var(--e)) calc(12 * var(--e)) calc(10 * var(--e)) calc(18 * var(--e)); border-bottom: 1px solid var(--linea); } .visor-nombre { flex: 1 1 200px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .visor-acciones { display: flex; gap: 6px; flex-wrap: wrap; } .visor-cuerpo { flex: 1; min-height: 0; display: flex; overflow: auto; background: var(--plano); } .visor-cuerpo iframe { flex: 1; border: 0; background: var(--superficie); } .visor-cuerpo img { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; } .visor-cuerpo img.real { max-width: none; max-height: none; cursor: zoom-out; } .visor-sin-vista { margin: auto; max-width: 440px; padding: 24px; text-align: center; } @media (max-width: 860px) { /* En el teléfono sube desde abajo, como los demás modales, y a todo lo ancho. */ #visor { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; } .visor-nombre { flex-basis: 100%; } .visor-cuerpo { padding-bottom: env(safe-area-inset-bottom); } } /* El avance de una descarga larga (el ZIP de XML de Facturas SAT). Sin valor la barra se mueve sola: es la espera de la lista, que no sabe cuánto falta. */ progress.avance { display: block; width: 100%; height: 8px; margin-top: 12px; accent-color: var(--marca-verde); } .aviso-nota { font-size: calc(12.5 * var(--u)); color: var(--tinta-2); background: var(--plano); border: 1px solid var(--linea); border-left: 3px solid var(--marca-lima); border-radius: 8px; padding: 8px 11px; margin-top: 10px; } /* .banda-alerta nació para un renglón corto y es flex: cada hijo se vuelve una columna. Con .parrafo se le mete un solo hijo y el texto fluye como prosa, sin tocar el resto de pantallas que ya la usan de una línea. */ .banda-alerta.parrafo { align-items: flex-start; font-weight: 400; padding: 10px 13px; line-height: 1.5; } /* ---------- carpetas de empresas y modo presentación ---------- La carpeta solo agrupa visualmente; el candado entre clientes es la membresía por empresa (RLS). La banda de presentación va FIJA abajo a propósito: si se pudiera perder de vista al hacer scroll, se olvidaría encendida, que es justo el descuido que viene a evitar. */ .carpeta { margin-top: calc(26 * var(--e)); } .carpeta:first-of-type { margin-top: calc(10 * var(--e)); } .carpeta-cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--linea); } .carpeta-cabeza h2 { font-size: calc(15 * var(--u)); margin: 0; } .carpeta-cuenta { font-size: calc(12 * var(--u)); color: var(--tinta-suave); } .carpeta-cabeza button { margin-left: auto; } .carpeta .rejilla-empresas { margin-top: calc(12 * var(--e)); } #banda-presentacion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: calc(8 * var(--e)) calc(16 * var(--e)); background: var(--marca-lima); color: var(--marca-oscuro); font-size: calc(13 * var(--u)); font-weight: 600; box-shadow: 0 -2px 10px rgba(23, 50, 51, 0.14); } #banda-presentacion.fuera { background: var(--critico); color: #fff; } #banda-presentacion button { background: transparent; border: 1px solid currentColor; color: inherit; } #banda-presentacion button:hover { background: rgba(255, 255, 255, 0.35); } body.presentando #cuerpo { padding-bottom: calc(46 * var(--e)); } body.presentando #toasts { bottom: calc(58 * var(--e)); } .banda-alerta.parrafo b { font-weight: 600; } /* ---------- IVA ---------- */ /* La cifra del próximo entero es lo único que se busca al abrir la pantalla: se lee antes que el título. */ .cifra-grande { font-size: calc(34 * var(--u)); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 6px 0 4px; } /* Las dos mitades de la tabla responden preguntas distintas —lo que verá el SAT y lo que dice el flujo—, así que se separan con una regla visible en lugar de confiar en que el encabezado agrupado se entienda solo. */ th.grupo-sat, th.grupo-flujo { text-align: left; font-size: calc(11 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); } th.grupo-sat { border-bottom: 2px solid var(--marca-oscuro); } th.grupo-flujo { border-bottom: 2px solid var(--marca-gris); } tr.fila-resaltada { background: var(--acento-wash); } .detalle-mes { border-top: 1px solid var(--linea); padding: 10px 0; } .detalle-mes:first-of-type { border-top: none; } .detalle-mes > summary { cursor: pointer; padding: 4px 2px; font-size: calc(13.5 * var(--u)); color: var(--tinta-2); border-radius: 6px; } .detalle-mes > summary:hover { color: var(--tinta); } .detalle-mes > summary:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; } .detalle-mes[open] > summary { margin-bottom: 8px; } .lista-avisos { list-style: none; display: grid; gap: 7px; } .lista-avisos li { font-size: calc(13 * var(--u)); color: var(--tinta-2); background: var(--plano); border: 1px solid var(--linea); border-left: 3px solid var(--alerta); border-radius: 8px; padding: 8px 11px; } /* ---------- toasts ---------- */ #toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; } .toast { background: var(--marca-oscuro); color: var(--shell-tinta); border-radius: 9px; padding: 10px 15px; font-size: calc(13.5 * var(--u)); box-shadow: 0 8px 24px rgba(23, 50, 51, 0.3); max-width: 340px; border-left: 3px solid var(--marca-lima); } .toast.error { background: var(--critico); border-left-color: #7d1e18; color: #fff; } /* ---------- importar ---------- */ .zonas-importar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .zona { border: 1.5px dashed var(--eje); border-radius: var(--radio); padding: 18px; text-align: center; background: var(--superficie); color: var(--tinta-2); } .zona.activa { border-color: var(--marca-verde); background: var(--acento-wash); } textarea.pegar { width: 100%; min-height: 120px; font-family: ui-monospace, Menlo, monospace; font-size: calc(12 * var(--u)); } .insignia-num { font-weight: 650; font-variant-numeric: tabular-nums; } /* ---------- entrada (modo nube) ---------- */ #velo-sesion, #velo-mfa { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background-color: var(--marca-oscuro); /* Patrón de marca: la «S» encadenada en diagonal, igual que la pág. 9 del manual. Lo genera `python3 marca/patron_a_css.py` — el color va incrustado porque un SVG dentro de un background-image no lo hereda por CSS. El SVG cubre el área y el repite por dentro, así que NO lleva repeat. */ background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cg id='s' fill='none' stroke='%23d5eb89' stroke-width='1.6' stroke-opacity='.18' transform='skewX(4.26) rotate(-39.02) scale(0.83)'%3E%3Cpath d='M 147.8 158.8 C 147.3 162.1 146.8 165 146.3 167.6 C 145.2 167.7 144.3 167.8 143.5 167.8 L 141.5 167.8 C 84.2 167.8 70.9 141.8 52.5 141.8 C 50.1 141.8 47.6 142.3 45.1 143.4 C 43.3 144.1 41.2 145.4 38.8 147.2 L 38.8 147.1 L 38.2 146.6 L 86.7 96.3 C 87.4 96.1 88.3 95.9 89.3 95.7 C 91.1 95.4 92.7 95.2 94.2 95.2 C 103.9 95.2 112.2 96.6 119 99.4 C 125.9 102.1 131.5 105.9 135.9 110.8 C 140.3 115.6 143.5 121.3 145.5 127.8 C 147.5 134.2 148.5 141.2 148.5 148.6 C 148.5 152.2 148.3 155.6 147.8 158.8 M 53.7 33.2 C 55 32.5 56.6 32.1 58.6 31.7 C 60.5 31.4 63.1 31.3 66.3 31.3 C 87.4 31.3 107.1 41.4 121.3 41.4 C 126.9 41.4 132.6 39 137.2 36.3 L 137.8 36.9 L 80.6 96.2 C 76.5 92.4 72.7 88.2 69.2 83.7 C 65.7 79.1 62.6 74.5 59.9 70 C 57.2 65.5 55.2 61.2 53.7 57.1 C 52.3 52.9 51.5 49.3 51.5 46.3 C 51.5 41 52.3 36.6 53.7 33.2 M 181.3 95.8 C 178.8 89.4 175.2 83.8 170.5 79 C 165.8 74.3 160.2 70.5 153.5 67.7 C 146.9 65 139.5 63.6 131.3 63.6 C 124.2 63.6 119 63.9 115.6 64.5 L 115.6 64.5 L 175.8 1 L 174.7 0 C 172.3 1.8 170.2 3.3 168.2 4.3 C 166 5.6 163.9 6.4 161.9 6.9 C 160 7.4 157.9 7.7 155.8 7.7 C 136.4 7.7 119.4 0.5 100.2 0.5 C 97.8 0.5 95.7 0.8 93.9 1.3 C 92.2 1.8 90.5 2.4 88.7 3.2 C 87.2 3.9 85.5 4.8 83.6 5.9 C 81.7 7.1 79.6 8.8 77.1 11.1 C 72.5 15 67.6 19.3 62.4 24 C 57.1 28.7 51.2 34 44.6 40.1 C 37.3 47 31.8 54.1 28.3 61.5 C 24.8 68.9 23 76.5 23 84.4 C 23 88.8 23.4 93 24.2 97 C 25.1 101 26.5 104.9 28.4 108.7 C 30.4 112.5 33 116.2 36.2 120 C 39.3 123.7 43.2 127.6 47.8 131.6 L 26.1 154.2 L 1.6 179 L 0 180.6 L 1.1 181.6 C 4.8 178.5 9.4 175.6 14.1 175.6 C 38.8 175.6 51.7 200 99.3 200 C 101.8 200 103.8 199.9 105.5 199.8 C 107.1 199.6 108.6 199.2 110 198.6 C 111.4 198.1 112.9 197.3 114.3 196.2 C 115.8 195.1 117.6 193.7 119.7 191.9 L 132.5 180.7 C 137.1 176.7 141.7 172.8 146.3 169 C 151.2 164.8 156.1 160.6 161 156.5 C 166 152.4 170.4 148.6 174.3 145.2 C 178.3 141.6 181 137.5 182.7 133 C 184.3 128.5 185.1 122.8 185.1 115.9 C 185.1 108.9 183.9 102.2 181.3 95.8'/%3E%3C/g%3E%3Cpattern id='p' width='137.86' height='206.99' patternUnits='userSpaceOnUse' patternTransform='rotate(39.02) skewX(-4.26)'%3E%3Cuse href='%23s' x='-137.86' y='-206.99'/%3E%3Cuse href='%23s' x='-137.86' y='0'/%3E%3Cuse href='%23s' x='-137.86' y='206.99'/%3E%3Cuse href='%23s' x='0' y='-206.99'/%3E%3Cuse href='%23s' x='0' y='0'/%3E%3Cuse href='%23s' x='0' y='206.99'/%3E%3Cuse href='%23s' x='137.86' y='-206.99'/%3E%3Cuse href='%23s' x='137.86' y='0'/%3E%3Cuse href='%23s' x='137.86' y='206.99'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E"); } .caja-sesion { background: var(--superficie); border-radius: 16px; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34); padding: 32px 34px; width: min(410px, 92vw); /* El alta del segundo factor lleva QR, clave de respaldo y advertencias: en una laptop de pantalla corta no cabe, y sin esto el botón de "Activar" quedaba fuera del área visible y sin manera de llegar a él. */ max-height: 92vh; overflow-y: auto; } /* Por encima del velo de entrada: si ambos coincidieran, el de 2FA es el que tiene algo que pedir. */ #velo-mfa { z-index: 600; } .caja-sesion p { font-size: calc(13.5 * var(--u)); line-height: 1.5; margin: 0 0 8px; } .caja-sesion img { max-width: 100%; } .caja-sesion .marca-sesion { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .caja-sesion h2 { margin: 0; font-size: calc(20 * var(--u)); letter-spacing: -0.4px; } .caja-sesion .lema { color: var(--tinta-suave); font-size: calc(13 * var(--u)); margin: 0 0 18px; } .caja-sesion input { width: 100%; } .error-sesion { color: var(--critico); font-size: calc(13 * var(--u)); min-height: 18px; margin-top: 8px; } /* ---------- responsivo / impresión ---------- */ @media (max-width: 860px) { #menu { display: none; } .campos { grid-template-columns: 1fr; } .zonas-importar { grid-template-columns: 1fr; } } @media print { /* En papel la escala de pantalla no aplica: las medidas vuelven a ser las que dice el número. */ :root { --u: 1px; --e: 1px; --ancho-contenido: none; } #barra, #menu, .barra-acciones, button, .boton, #toasts, #banda-presentacion { display: none !important; } #contenido { padding: 0; max-width: none; } body { background: #fff; font-size: calc(12 * var(--u)); } .tarjeta, .semana, .tile { box-shadow: none; break-inside: avoid; } .solo-impresion { display: block !important; } /* El título plegable de Flujo es un botón, pero en papel sigue siendo título. */ button.plegar-seccion { display: inline-flex !important; padding: 0; } .plegar-seccion .flecha { display: none; } } .solo-impresion { display: none; font-size: calc(12 * var(--u)); color: var(--tinta-2); margin-bottom: 10px; } /* ---------- Conexiones (bancos y SAT vía Syncfy) ---------- */ .conexion-fila { display: flex; align-items: center; gap: calc(14 * var(--e)); padding: calc(12 * var(--e)) 4px; border-bottom: 1px solid var(--linea); } .conexion-fila:last-child { border-bottom: 0; } .conexion-icono { width: calc(38 * var(--e)); height: calc(38 * var(--e)); border-radius: 9px; background: var(--acento-wash); display: flex; align-items: center; justify-content: center; font-size: calc(18 * var(--u)); flex: 0 0 auto; } .conexion-icono.fiscal { background: rgba(213, 235, 137, 0.45); } .conexion-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .conexion-datos .sub { margin: 0; } .conexion-sync { flex: 0 0 auto; text-align: right; font-size: calc(12.5 * var(--u)); } .conexion-acciones { display: flex; gap: 8px; flex: 0 0 auto; } @media (max-width: 860px) { .conexion-fila { flex-wrap: wrap; } .conexion-sync { text-align: left; } } /* ---------- Contrapartes (fase 1, 2026-09-07) ---------- Según SAT manda a la vista: negrita y filo lima en su tile. Lo que no es del cliente que tienes enfrente lleva .solo-interno y desaparece en modo presentación: el flujo, la diferencia, las causas y lo anterior al corte. */ .tile.manda { border-color: var(--marca-oscuro); box-shadow: inset 3px 0 0 var(--marca-lima), var(--sombra); } th.manda, td.manda { font-weight: 650; color: var(--tinta); } th.ordenable { cursor: pointer; } th.ordenable:hover, th.ordenable.activo { color: var(--tinta); } th .flecha-orden { margin-left: 3px; } .tabla-contrapartes td.nombre b { display: block; } .dif-pos { color: var(--alerta-texto); } .dif-neg { color: var(--critico); } tr.total td { background: var(--plano); font-weight: 650; border-top: 2px solid var(--eje); } label.inter { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: calc(13 * var(--u)); } body.presentando .solo-interno { display: none !important; } /* antigüedad: barra apilada de cinco cubetas más el desglose en texto */ .antig { min-width: calc(150 * var(--u)); max-width: calc(210 * var(--u)); } .antig .barra-ant { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--plano); margin-bottom: 4px; } .antig .barra-ant span { display: block; height: 100%; } .antig .c1, .leyenda-antig .c1 { background: var(--bien); } .antig .c2, .leyenda-antig .c2 { background: var(--alerta); } .antig .c3, .leyenda-antig .c3 { background: #c8862a; } .antig .c4, .leyenda-antig .c4 { background: #b4483a; } .antig .c5, .leyenda-antig .c5 { background: var(--critico); } .antig .texto { font-size: calc(11.5 * var(--u)); color: var(--tinta-2); font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; } .antig .texto i, .leyenda-antig i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; } .leyenda-antig { display: flex; gap: 12px; flex-wrap: wrap; font-size: calc(11.5 * var(--u)); color: var(--tinta-suave); margin: 8px 2px 0; } .tile .antig { max-width: none; margin-top: 4px; } .tile .antig .texto { white-space: normal; } /* ficha */ .ficha-cabeza { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 4px; } .tiempo { display: grid; grid-template-columns: calc(104 * var(--u)) 1fr; gap: 0 14px; } .tiempo .fecha { color: var(--tinta-suave); font-variant-numeric: tabular-nums; padding: 9px 0; border-top: 1px solid var(--linea); font-size: calc(13 * var(--u)); } .tiempo .evento { padding: 9px 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: calc(118 * var(--u)) 1fr auto; gap: 10px; align-items: baseline; } .tiempo .tipo { font-size: calc(11.5 * var(--u)); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; } .tiempo .tipo.sat { color: var(--marca-oscuro); } .tiempo .tipo.flujo { color: var(--bien-texto); } .tiempo .tipo.rep { color: var(--tinta-2); } .tiempo .tipo.banco { color: var(--alerta-texto); } .tiempo .importe { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .tiempo .detalle { color: var(--tinta-2); font-size: calc(13 * var(--u)); } details.detalle-viejo { margin-top: 10px; } details.detalle-viejo > summary, .tarjeta details > summary { cursor: pointer; color: var(--tinta-2); font-size: calc(13 * var(--u)); } /* estado de cuenta a terceros: una hoja, con la identidad de la emisora */ .hoja { background: #fff; border: 1px solid var(--eje); border-radius: 6px; padding: calc(34 * var(--e)) calc(40 * var(--e)); max-width: calc(880 * var(--u)); box-shadow: 0 10px 30px rgba(23, 50, 51, 0.08); font-size: calc(13.5 * var(--u)); } .hoja .encabezado { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 2px solid var(--marca-oscuro); padding-bottom: 16px; } .hoja .logo-empresa { max-width: calc(200 * var(--u)); max-height: calc(80 * var(--u)); display: block; } .hoja .emisor { font-size: calc(12.5 * var(--u)); color: var(--tinta-2); margin-top: 8px; line-height: 1.5; } /* Sin logotipo, la razón social es el encabezado: nunca se pone el de Sago en el papel de otra empresa. */ .hoja .emisor.sin-logo { margin-top: 0; } .hoja .emisor.sin-logo b { display: block; font-size: calc(19 * var(--u)); color: var(--tinta); letter-spacing: -0.2px; margin-bottom: 2px; } .hoja .titulo { text-align: right; } .hoja .titulo h3 { font-size: calc(18 * var(--u)); font-weight: 650; margin: 0; } .hoja .titulo .sub { font-size: calc(12.5 * var(--u)); } .hoja .para { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; font-size: calc(13 * var(--u)); } .hoja .para > div > b:first-child { display: block; font-size: calc(11 * var(--u)); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin-bottom: 3px; } .hoja table { font-size: calc(13 * var(--u)); } .hoja td.uuid { font-variant-numeric: tabular-nums; color: var(--tinta-suave); } .hoja .pie { margin-top: 18px; font-size: calc(11.5 * var(--u)); color: var(--tinta-suave); line-height: 1.5; border-top: 1px solid var(--linea); padding-top: 10px; } /* identidad fiscal en Configuración */ .logo-config { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 10px; } .logo-config h4 { margin: 0 0 4px; font-size: calc(13.5 * var(--u)); } .logo-vista { max-width: 220px; max-height: 90px; display: block; border: 1px solid var(--linea); border-radius: 6px; padding: 6px; background: #fff; } @media (max-width: 720px) { .hoja { padding: 18px 14px; } .hoja .para { grid-template-columns: 1fr; } } @media print { .no-print { display: none !important; } .hoja { box-shadow: none; border: 0; max-width: none; padding: 0; } } /* ===== mis pendientes (2026-10-19) ========================================= «Te toca» y «Dale seguimiento»: renglones que se abren para ver sus partidas. La marca de la izquierda es la palomita (al día), el número en ámbar (pendiente) o en rojo (algo pasó su plazo); punteada si espera a otra persona. El color solo acompaña: cada estado lleva su texto. */ .frescura-pend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 calc(12 * var(--e)); font-size: calc(12.5 * var(--u)); color: var(--tinta-2); } .frescura-pend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bien); margin-right: 6px; vertical-align: 1px; } .frescura-pend span.malo { color: var(--critico); font-weight: 600; } .frescura-pend span.malo::before { background: var(--critico); } .bloque-pend { margin: calc(16 * var(--e)) 0; } .bloque-pend-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; } .bloque-pend-cab h2 { margin: 0; padding: 0; border: 0; font-size: calc(13 * var(--u)); text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); } .barra-avance-pend { flex: 1 1 120px; max-width: 220px; height: 6px; border-radius: 99px; background: var(--linea); overflow: hidden; align-self: center; } .barra-avance-pend i { display: block; height: 100%; background: var(--bien); } .renglones-pend { display: grid; gap: 6px; } .renglon-pend { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .renglon-pend.atrasado { border-color: rgba(158, 43, 33, 0.35); } .renglon-pend.aldia { background: var(--plano); } .renglon-pend > summary { list-style: none; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; cursor: pointer; } .renglon-pend > summary::-webkit-details-marker { display: none; } .renglon-pend.aldia > summary { cursor: default; } .renglon-pend > summary:focus-visible { outline: 2px solid var(--marca-oscuro); outline-offset: 2px; border-radius: var(--radio); } .renglon-pend .tit { font-weight: 600; min-width: 0; } .renglon-pend.aldia .tit { font-weight: 500; color: var(--tinta-2); } .renglon-pend .det { grid-column: 2; color: var(--tinta-2); font-size: calc(12.5 * var(--u)); min-width: 0; } .renglon-pend .lado { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; } .marca-pend { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: calc(13.5 * var(--u)); font-variant-numeric: tabular-nums; border: 2px solid var(--eje); background: var(--superficie); color: var(--tinta); } .marca-pend.ok { border-color: var(--bien); background: var(--bien); color: #fff; } .marca-pend.pend { border-color: var(--alerta); background: var(--alerta-wash); color: var(--alerta-texto); } .marca-pend.mal { border-color: var(--critico); background: var(--critico-wash); color: var(--critico); } .marca-pend.espera { border-style: dashed; } .renglon-pend .espera-a { font-size: calc(12 * var(--u)); color: var(--tinta-2); background: var(--plano); border: 1px solid var(--linea); border-radius: 99px; padding: 2px 9px; } .renglon-pend .recordado { font-size: calc(12 * var(--u)); color: var(--bien-texto, var(--bien)); white-space: nowrap; } .pend-items { padding: 0 12px 12px 58px; } .pend-items table { font-size: calc(12.5 * var(--u)); } .pend-items .sub { margin: 6px 0 0; } .linea-pend { margin: 6px 0 0; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--marca-oscuro); background: var(--acento-wash); border-radius: 8px; padding: 4px 10px; } .linea-pend.con-atrasados { color: var(--critico); background: var(--critico-wash); } #menu a .cuenta-menu.con-atrasados { background: var(--critico); color: #fff; } @media (max-width: 700px) { .pend-items table.tabla-tarjetas td.c-sub:empty, .pend-items table.tabla-tarjetas td.c-dato:empty { display: none; } .renglon-pend > summary { grid-template-columns: 30px minmax(0, 1fr); } .renglon-pend .lado { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; padding-left: 42px; } .pend-items { padding: 0 10px 10px; } } /* ===== rutina diaria ===================================================== Una pantalla: cabecera con el contador del día, barra de diez pasos, el paso abierto y el pie pegado abajo. El color solo acompaña: cada estado lleva su texto, y los chips de estado dicen quién y a qué hora. */ :root { --grave-wash: rgba(236, 131, 90, 0.16); --grave-texto: #8a3d1e; } .rutina { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); margin: calc(14 * var(--e)) 0 6px; } .cab-rutina { display: flex; gap: calc(14 * var(--e)); align-items: center; flex-wrap: wrap; padding: calc(12 * var(--e)) calc(18 * var(--e)); border-bottom: 1px solid var(--linea); background: var(--plano); border-radius: var(--radio) var(--radio) 0 0; } .cab-rutina h2 { border: 0; margin: 0; padding: 0; font-size: calc(18 * var(--u)); } .cab-rutina .huella { color: var(--tinta-2); font-size: calc(12.5 * var(--u)); } .cab-rutina .contador { font-weight: 650; font-variant-numeric: tabular-nums; background: var(--superficie); border: 1px solid var(--eje); border-radius: 99px; padding: 4px 12px; font-size: calc(13 * var(--u)); } .cab-rutina .contador .aparte { font-weight: 500; color: var(--tinta-2); } .banda-dia { width: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; font-size: calc(13 * var(--u)); } .banda-dia.cerrado { background: var(--bien-wash); color: var(--bien-texto); } .banda-dia.obs { background: var(--acento-wash); color: var(--marca-oscuro); } .banda-dia.atraso { background: var(--alerta-wash); color: var(--alerta-texto); } .banda-dia.atraso a { color: inherit; font-weight: 600; } .barra-pasos { list-style: none; margin: 0; padding: calc(10 * var(--e)) calc(12 * var(--e)); display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; border-bottom: 1px solid var(--linea); } .barra-pasos li { min-width: 0; } .barra-pasos button { width: 100%; font: inherit; text-align: left; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 7px; cursor: pointer; min-width: 0; background: var(--superficie); color: var(--tinta); } .barra-pasos button:hover { border-color: var(--eje); } .barra-pasos button[aria-current="step"] { background: var(--marca-lima); border-color: var(--marca-oscuro); box-shadow: inset 0 0 0 1px var(--marca-oscuro); } .barra-pasos button.no-aplica { border-style: dashed; color: var(--tinta-2); } .barra-pasos .n { font-size: calc(11.5 * var(--u)); color: var(--tinta-2); font-variant-numeric: tabular-nums; } .barra-pasos button[aria-current="step"] .n { color: var(--marca-oscuro); } .barra-pasos .r { font-weight: 650; font-size: calc(12.5 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra-pasos .e { display: block; margin-top: 4px; height: 6px; border-radius: 3px; background: var(--linea); } .barra-pasos .t { display: block; font-size: calc(11.5 * var(--u)); color: var(--tinta-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra-pasos .e.hecho { background: var(--bien); } .barra-pasos .e.no_hubo { background: var(--bien); opacity: 0.55; } .barra-pasos .e.automatico { background: var(--marca-oscuro); } .barra-pasos .e.por_verificar { background: var(--grave); } .barra-pasos .e.pendiente { background: var(--linea); } .barra-pasos .e.pendiente.con-motivo { background: var(--alerta); } .barra-pasos .e.omitido, .barra-pasos .e.por_hacer { background: transparent; border: 1px dashed var(--eje); } .rutina .paso { padding: calc(16 * var(--e)) calc(18 * var(--e)) calc(18 * var(--e)); } .rutina .paso h4 { margin: 12px 0 4px; font-size: calc(13.5 * var(--u)); } .paso-cab { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .paso-cab h3 { font-size: calc(16.5 * var(--u)); font-weight: 650; margin: 0; } .paso-cab .chip, .pie-rutina .chip, .tiles-cierre .chip, .cab-rutina .chip, .rutina td .chip.pendiente_motivo, .rutina td .chip.declarado { white-space: normal; text-align: left; } .paso-cab .tira { margin-left: auto; display: inline-flex; gap: 14px; font-size: calc(12.5 * var(--u)); color: var(--tinta-2); font-variant-numeric: tabular-nums; border: 1px solid var(--linea); border-radius: 8px; padding: 5px 10px; background: var(--plano); } .paso-cab .tira b { color: var(--tinta); } .fuentes { margin: 10px 0 12px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--plano); font-size: calc(12.5 * var(--u)); color: var(--tinta-2); display: grid; gap: 3px; } .fuentes b { color: var(--tinta); } .fuentes .fija { color: var(--tinta-2); font-style: italic; font-size: calc(12.5 * var(--u)); } .cubetas { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; } .cubetas span { border: 1px solid var(--linea); border-radius: 99px; padding: 3px 10px; font-size: calc(12 * var(--u)); color: var(--tinta-2); font-variant-numeric: tabular-nums; } .cubetas span b { color: var(--tinta); } details.rezago { border: 1px solid var(--linea); border-left: 3px solid var(--marca-oscuro); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-top: 12px; background: var(--acento-wash); font-size: calc(13 * var(--u)); } details.rezago summary { cursor: pointer; font-weight: 600; } details.rezago > div { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .lista-paso td .acciones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .rutina .celda-acciones { text-align: right; white-space: nowrap; } .rutina .subrenglon { display: block; font-size: calc(11.5 * var(--u)); } .rutina .candidata { margin-top: 4px; font-size: calc(12.5 * var(--u)); } .rutina td.candidatas select { max-width: calc(320 * var(--u)); } .vacio { padding: 14px; border: 1px dashed var(--eje); border-radius: 8px; color: var(--tinta-2); font-size: calc(13 * var(--u)); text-align: center; margin: 8px 0; } .pie-rutina { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: calc(12 * var(--e)) calc(18 * var(--e)); border-top: 1px solid var(--linea); background: var(--superficie); position: sticky; bottom: 0; border-radius: 0 0 var(--radio) var(--radio); z-index: 2; } .pie-rutina .medio { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; } .pie-rutina .motivo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; padding-top: 8px; border-top: 1px dashed var(--linea); } .pie-rutina .motivo input { flex: 1; min-width: calc(220 * var(--u)); } .rutina button.secundario { font: inherit; padding: 7px 14px; border: 1px solid var(--eje); border-radius: 8px; background: var(--superficie); color: var(--tinta); cursor: pointer; font-weight: 550; } .rutina button:disabled { opacity: 0.45; cursor: not-allowed; } /* estados de paso: siempre con texto; el punto de color solo acompaña */ .chip.hecho { background: var(--bien-wash); color: var(--bien-texto); border-color: rgba(65, 146, 87, 0.35); } .chip.hecho::before { background: var(--bien); } .chip.no_hubo { background: #fff; color: var(--bien-texto); border-color: var(--bien); } .chip.no_hubo::before { background: #fff; box-shadow: inset 0 0 0 2px var(--bien); } .chip.declarado { background: var(--marca-lima); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.25); } .chip.declarado::before { background: var(--marca-oscuro); } .chip.automatico { background: var(--acento-wash); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.2); } .chip.automatico::before { background: var(--marca-oscuro); } .chip.por_verificar { background: var(--grave-wash); color: var(--grave-texto); border-color: rgba(236, 131, 90, 0.5); } .chip.por_verificar::before { background: var(--grave); } .chip.omitido { background: #fff; color: var(--tinta-2); border-style: dashed; } .chip.omitido::before { background: transparent; border: 1px solid var(--tinta-2); } .chip.pendiente { background: #fff; color: var(--tinta-2); border-color: var(--eje); } .chip.pendiente::before { background: #fff; box-shadow: inset 0 0 0 2px var(--tinta-2); } .chip.pendiente_motivo { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.pendiente_motivo::before { background: var(--alerta); } .chip.por_hacer { background: #fff; color: var(--tinta-2); } .chip.por_hacer::before { background: var(--tinta-2); } .chip.tardio { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.tardio::before { background: var(--alerta); } .chip.despacho { background: var(--marca-oscuro); color: var(--marca-lima); border-color: var(--marca-oscuro); } .chip.despacho::before { background: var(--marca-lima); } .chip.rezago { border-color: var(--marca-oscuro); background: var(--acento-wash); color: var(--marca-oscuro); } .chip.rezago::before { background: var(--marca-oscuro); } /* día cerrado y solo lectura: nada se toca sin la inversa correcta (Reabrir y Volver al paso siguen; los botones de acción y los campos se van) */ .rutina.dia-cerrado .paso button:not([data-accion="rutina-paso"]):not([data-accion="rutina-reabrir"]), .rutina.dia-cerrado .paso input, .rutina.dia-cerrado .paso select, .rutina.dia-cerrado .paso textarea, .rutina.dia-cerrado .pie-rutina .medio, .rutina.dia-cerrado .pie-rutina .motivo { display: none; } .rutina.solo-lectura .paso button:not([data-accion="rutina-paso"]), .rutina.solo-lectura .paso input, .rutina.solo-lectura .paso select, .rutina.solo-lectura .paso textarea, .rutina.solo-lectura .pie-rutina .medio, .rutina.solo-lectura .pie-rutina .motivo { display: none; } /* cierre */ .tiles-cierre { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150 * var(--u)), 1fr)); gap: 8px; margin: 10px 0; } .tiles-cierre .tile .valor { font-size: calc(24 * var(--u)); } .rutina .cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; } .rutina .caja { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; font-size: calc(13 * var(--u)); background: var(--plano); } .rutina .caja b { display: block; margin-bottom: 3px; } .rutina textarea { font: inherit; width: 100%; min-height: 64px; border: 1px solid var(--eje); border-radius: 8px; padding: 8px; } .banda-cierre { background: var(--bien-wash); border: 1px solid rgba(65, 146, 87, 0.3); color: var(--bien-texto); padding: 10px 14px; border-radius: 8px; font-weight: 600; margin: 10px 0; } .banda-cierre.medias { background: var(--alerta-wash); border-color: rgba(224, 165, 46, 0.45); color: var(--alerta-texto); } /* dónde se ve: menú, Panel, portada */ #menu a .cuenta-menu { margin-left: auto; background: var(--marca-lima); color: var(--marca-oscuro); border-radius: 99px; padding: 0 7px; font-size: calc(11.5 * var(--u)); font-weight: 650; font-variant-numeric: tabular-nums; } .tile-rutina { border-color: var(--marca-oscuro); box-shadow: inset 3px 0 0 var(--marca-lima); } .banda-rutina { display: flex; align-items: center; gap: 8px; font-size: calc(12.5 * var(--u)); font-weight: 600; padding: 5px 10px; border-radius: 7px; margin-top: 6px; } .banda-rutina.ambar { background: var(--alerta-wash); color: var(--alerta-texto); } .banda-rutina.verde { background: var(--bien-wash); color: var(--bien-texto); } .banda-rutina.gris { background: var(--plano); color: var(--tinta-2); } /* tablero de cumplimiento */ .cuadricula { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); margin-top: 10px; } .cuadricula table { font-size: calc(12 * var(--u)); } .cuadricula th.dia { text-align: center; font-size: calc(11.5 * var(--u)); padding: 8px 3px; white-space: nowrap; } .cuadricula th.dia.hoy { background: var(--marca-lima); color: var(--marca-oscuro); } .cuadricula td.celda { padding: 3px; text-align: center; vertical-align: middle; min-width: calc(56 * var(--u)); } .celda .c { display: block; width: 100%; font: inherit; border-radius: 5px; padding: 4px 3px; font-size: calc(11 * var(--u)); line-height: 1.25; border: 1px solid transparent; background: none; color: var(--tinta-2); text-decoration: none; } .celda .c small { display: block; font-size: calc(10.5 * var(--u)); } .c.a_tiempo { background: var(--bien-wash); color: var(--bien-texto); } .c.tarde { background: var(--bien-wash); color: var(--bien-texto); box-shadow: inset 3px 0 0 var(--alerta); } .c.a_medias { background: var(--alerta-wash); color: var(--alerta-texto); } .c.sin_empezar { background: var(--critico-wash); color: var(--critico); } .c.sin_empezar.hoy { background: var(--plano); color: var(--tinta-2); } .c.no_aplica { background: #fff; border: 1px dashed var(--eje); color: var(--tinta-2); } .c.en_curso { background: var(--acento-wash); color: var(--marca-oscuro); border-color: var(--marca-oscuro); } .fila-emp td.nombre { min-width: calc(230 * var(--u)); } .fila-emp .ctx { display: block; margin-top: 3px; } .fila-emp .ctx .chip { font-size: calc(10.5 * var(--u)); padding: 1px 7px; white-space: normal; } .leyenda-t { display: flex; gap: 10px; flex-wrap: wrap; font-size: calc(11.5 * var(--u)); color: var(--tinta-2); margin: 8px 2px; } .leyenda-t span i { display: inline-block; width: 12px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; } /* plantilla en Configuración */ .plantilla td label { display: inline-flex; gap: 6px; align-items: center; font-size: calc(12.5 * var(--u)); color: var(--tinta-2); } @media (max-width: 1000px) { .barra-pasos { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 760px) { .rutina .cajas { grid-template-columns: 1fr; } .barra-pasos { grid-template-columns: repeat(2, 1fr); } .cab-rutina .separador-flex { display: none; } } @media print { .pie-rutina, .barra-pasos { display: none !important; } } /* rutina: lo decidido hoy se queda en el renglón con huella e inversa; bitácora del día */ .rutina .lista-paso tr.decidida td { background: var(--bien-wash); } .rutina .lista-paso tr.decidida .chip { white-space: normal; text-align: left; } .barra-pasos .e.declarado { background: var(--marca-lima); box-shadow: inset 0 0 0 1px var(--marca-oscuro); } .rutina ul.bitacora { margin: 6px 0 10px; padding-left: 18px; font-size: calc(12.5 * var(--u)); } .rutina ul.bitacora li { margin: 3px 0; } .campo-motivo[hidden] { display: none; } .lista-vencidos td { font-size: calc(12.5 * var(--u)); } /* ===== portal de proveedores y solicitudes de pago (fase 1, 2026-09-21) ===== Las clases van con prefijo p- para no chocar con nada. Los chips de estado siempre llevan su texto; el color solo acompaña. */ .chip.p-recibida { background: #fff; color: var(--tinta-2); border-color: var(--eje); } .chip.p-recibida::before { background: #fff; box-shadow: inset 0 0 0 2px var(--tinta-2); } .chip.p-por_aprobar { background: var(--marca-lima); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.25); } .chip.p-por_aprobar::before { background: var(--marca-oscuro); } .chip.p-programada { background: var(--acento-wash); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.2); } .chip.p-programada::before { background: var(--marca-oscuro); } .chip.p-pagada, .chip.p-en_sat { background: var(--bien-wash); color: var(--bien-texto); border-color: rgba(65, 146, 87, 0.35); } .chip.p-pagada::before, .chip.p-en_sat::before { background: var(--bien); } .chip.p-rechazada { background: var(--critico-wash); color: var(--critico); border-color: rgba(158, 43, 33, 0.3); } .chip.p-rechazada::before { background: var(--critico); } .chip.p-cancelada, .chip.p-retirada { background: #fff; color: var(--tinta-2); border-style: dashed; } .chip.p-cancelada::before, .chip.p-retirada::before { background: transparent; border: 1px solid var(--tinta-2); } .chip.p-pendiente_sat { background: rgba(236, 131, 90, 0.16); color: #8a3d1e; border-color: rgba(236, 131, 90, 0.5); } .chip.p-pendiente_sat::before { background: var(--grave); } .chip.p-cancelada_sat { background: var(--critico); color: #fff; border-color: var(--critico); } .chip.p-cancelada_sat::before { background: #fff; } .chip.p-diferencias, .chip.p-sin_asignar { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.p-diferencias::before, .chip.p-sin_asignar::before { background: var(--alerta); } .chip.p-receptor { background: var(--plano); color: var(--tinta-2); } .chip.p-receptor::before { background: var(--marca-verde); } .tile.tile-portal { border-color: var(--marca-oscuro); box-shadow: inset 3px 0 0 var(--marca-lima); } /* línea de tiempo de una solicitud: cinco paradas */ .p-ruta { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } .p-ruta li { position: relative; padding: 0 8px 0 0; min-width: 0; } .p-ruta li i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--eje); position: relative; z-index: 1; } .p-ruta li::before { content: ""; position: absolute; left: 14px; right: 0; top: 6px; height: 2px; background: var(--linea); } .p-ruta li:last-child::before { display: none; } .p-ruta li b { display: block; font-size: calc(12.5 * var(--u)); margin-top: 6px; } .p-ruta li span { display: block; font-size: calc(12 * var(--u)); color: var(--tinta-2); line-height: 1.35; } .p-ruta li.hecho i { background: var(--bien); border-color: var(--bien); } .p-ruta li.hecho::before { background: var(--bien); } .p-ruta li.actual i { background: var(--marca-lima); border-color: var(--marca-oscuro); } .p-ruta li.actual b { color: var(--marca-oscuro); } .p-ruta li.malo i { background: var(--critico); border-color: var(--critico); } .p-ruta li.malo b, .p-ruta li.malo span { color: var(--critico); } .p-ruta li.gris i { border-style: dashed; } /* la ficha */ .p-ficha { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 10px; } .p-bloque { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; background: var(--plano); } .p-bloque h4 { margin: 0 0 8px; font-size: calc(12.5 * var(--u)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-2); } .p-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: calc(13 * var(--u)); margin: 0; } .p-datos dt { color: var(--tinta-2); } .p-datos dd { margin: 0; } .p-uuid { font-size: calc(11 * var(--u)); color: var(--tinta-suave); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; margin-top: 4px; } .p-archivos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } /* portal-16: las notas de crédito de una factura, debajo de sus archivos */ .p-notas { margin-top: 12px; border-top: 1px solid var(--linea); padding-top: 8px; } .p-notas > h4 { margin: 0 0 4px; } .p-nota { padding: 6px 0; border-top: 1px dashed var(--linea); } .p-nota:first-of-type { border-top: 0; } .p-nota .p-archivos { margin-top: 4px; } .p-nota.cancelada .p-nota-monto { text-decoration: line-through; color: var(--tinta-suave); } .p-archivo { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--eje); border-radius: 8px; padding: 5px 10px; font-size: calc(12.5 * var(--u)); background: var(--superficie); cursor: pointer; } .p-archivo .ext { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; background: var(--marca-oscuro); color: var(--marca-lima); border-radius: 4px; padding: 2px 5px; } .p-archivo .ext.pdf { background: var(--critico); color: #fff; } .p-motivo { background: var(--critico-wash); border-left: 3px solid var(--critico); padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: calc(13 * var(--u)); margin-top: 8px; } .p-motivo.gris { background: var(--plano); border-left-color: var(--eje); } .p-eventos { list-style: none; margin: 6px 0 0; padding: 0; font-size: calc(12.5 * var(--u)); display: grid; gap: 4px; } .p-eventos li { display: grid; grid-template-columns: 130px 1fr; gap: 10px; } .p-eventos li span:first-child { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; } .p-bitacora { margin-top: 10px; } .p-bitacora summary { cursor: pointer; } .p-conceptos td, .p-conceptos th { padding: 5px 8px; font-size: calc(12.5 * var(--u)); } .p-conceptos tr.total td { font-weight: 650; border-top: 2px solid var(--eje); background: var(--plano); } .p-accion { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); } .p-accion h4 { margin: 0 0 8px; font-size: calc(14 * var(--u)); } .p-radios { display: grid; gap: 6px; margin: 6px 0 10px; } .p-radios label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: calc(13 * var(--u)); } .p-radios label:has(input:checked) { border-color: var(--marca-oscuro); background: var(--acento-wash); } .p-radios input { margin-top: 2px; width: auto; } .p-radios small { display: block; color: var(--tinta-2); } .p-ob { color: var(--critico); font-weight: 600; } .p-ayuda { font-size: calc(11.5 * var(--u)); color: var(--tinta-suave); margin-top: 2px; } /* la subida */ .p-paso { margin: 14px 0 6px; font-size: calc(14 * var(--u)); } .p-zona { border: 1.5px dashed var(--eje); border-radius: var(--radio); padding: 12px 14px; background: var(--plano); } .p-zona input[type=file] { width: 100%; } .p-permitido { font-size: calc(11.5 * var(--u)); color: var(--tinta-suave); margin-top: 6px; } .p-resumen-factura { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; } .p-resumen-factura div { background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; font-size: calc(12.5 * var(--u)); } .p-resumen-factura div b { display: block; font-size: calc(14 * var(--u)); font-variant-numeric: tabular-nums; } .p-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: calc(13 * var(--u)); } .p-checks li { display: flex; gap: 8px; align-items: flex-start; } .p-checks li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; background: var(--bien); color: #fff; font-size: 11px; display: grid; place-items: center; flex: none; margin-top: 1px; } .p-checks li.mal::before { content: "✕"; background: var(--critico); } .p-declaro { display: flex; gap: 8px; align-items: flex-start; font-size: calc(13 * var(--u)); margin-top: 8px; } .p-declaro input { margin-top: 3px; width: auto; } /* receptor-areas: las áreas de un receptor, en casillas */ .p-areas-casillas { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 2px 0 4px; } .p-areas-casillas .p-declaro { margin-top: 4px; } /* paredes de entrada del externo y términos */ .p-muro { max-width: 860px; } .p-terminos { white-space: pre-wrap; font-family: var(--sans); font-size: calc(13 * var(--u)); line-height: 1.5; max-height: 46vh; overflow: auto; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px; background: var(--plano); } .p-codigo { font-size: 1.6rem; letter-spacing: 0.3em; text-align: center; user-select: all; font-variant-numeric: tabular-nums; } /* la cuenta de destino del proveedor (portal-9 y 10, 2026-10-05): la de pago lleva el filo verde, la que espera verificación el ámbar y la que está a nombre de otro el rojo */ .p-cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; } .p-cuenta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; min-width: 0; } .p-cuenta.usa { box-shadow: inset 3px 0 0 var(--bien); } .p-cuenta.pendiente { border-color: rgba(224, 165, 46, 0.55); box-shadow: inset 3px 0 0 var(--alerta); } .p-cuenta.tercero { border-color: rgba(158, 43, 33, 0.35); box-shadow: inset 3px 0 0 var(--critico); } .p-cuenta-cab { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .p-cuenta-cab b { font-size: calc(12 * var(--u)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-2); margin-right: 2px; } .p-cuenta .p-datos dd { min-width: 0; overflow-wrap: anywhere; } .p-cuenta-pie { margin-top: 8px; font-size: calc(12 * var(--u)); color: var(--tinta-suave); } .p-cuenta-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .p-clabe { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; } .p-clabe i { font-style: normal; color: var(--tinta-suave); } .p-alerta-cuenta { border: 1px solid rgba(224, 165, 46, 0.55); background: var(--alerta-wash); border-radius: var(--radio); padding: 11px 14px; margin: 10px 0; font-size: calc(13 * var(--u)); } .p-alerta-cuenta > b:first-child { display: block; color: var(--alerta-texto); margin-bottom: 3px; } .p-alerta-cuenta.roja { border-color: rgba(158, 43, 33, 0.35); background: var(--critico-wash); } .p-alerta-cuenta.roja > b:first-child { color: var(--critico); } .p-alerta-cuenta p { margin: 4px 0 0; } .p-verificar-aqui { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--eje); } .p-forma-cuenta h3 { margin-bottom: 2px; } .p-paso-cuenta { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--linea); } .p-paso-cuenta > span { width: 26px; height: 26px; border-radius: 7px; background: var(--plano); border: 1px solid var(--eje); display: grid; place-items: center; font-weight: 650; font-size: calc(12.5 * var(--u)); color: var(--tinta-2); } .p-paso-cuenta.listo > span { background: var(--bien); border-color: var(--bien); color: #fff; } .p-paso-cuenta h4 { margin: 2px 0 8px; font-size: calc(14 * var(--u)); } .p-paso-cuenta label { display: block; margin-top: 8px; } .p-paso-cuenta input:not([type=checkbox]):not([type=file]), .p-paso-cuenta select { width: 100%; max-width: 520px; } #pc-clabe { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; max-width: 300px; } .p-paso-cuenta .p-codigo-firma { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.35em; text-align: center; max-width: 170px; font-size: calc(16 * var(--u)); } .p-linea { font-size: calc(12.5 * var(--u)); margin-top: 4px; min-height: 1.3em; color: var(--tinta-2); } .p-linea.ok { color: var(--bien-texto); } .p-linea.ok::before { content: "✓ "; font-weight: 700; } .p-linea.mal { color: var(--critico); } .p-linea.mal::before { content: "✕ "; font-weight: 700; } .p-linea.aviso { color: var(--alerta-texto); } .p-linea.aviso::before { content: "! "; font-weight: 700; } .p-declaracion { white-space: pre-wrap; font-size: calc(13 * var(--u)); line-height: 1.5; max-height: 340px; overflow: auto; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px; background: var(--plano); max-width: 78ch; } .p-frase { border-left: 3px solid var(--marca-oscuro); background: var(--acento-wash); padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: calc(13.5 * var(--u)); max-width: 78ch; margin: 6px 0; } #velo-contrasena { position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; background: rgba(23, 50, 51, 0.92); } /* configuración */ .p-interruptor { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: calc(13 * var(--u)); } .p-interruptor small { display: block; color: var(--tinta-2); } .p-interruptor input[type=checkbox] { width: auto; } .p-interruptor select { width: auto; } .p-tipo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-2); border: 1px solid var(--linea); border-radius: 4px; padding: 1px 5px; white-space: nowrap; } .p-inactivo td { color: var(--tinta-suave); } .tachado { text-decoration: line-through; color: var(--tinta-suave); } /* el programa de pagos (portal-12) y el comprobante de pago (portal-13), 2026-10-06 */ .chip.p-por_proponer { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.p-por_proponer::before { background: var(--alerta); } .chip.p-propuesta { background: var(--marca-lima); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.25); border-style: dashed; } .chip.p-propuesta::before { background: var(--marca-oscuro); } .chip.p-sin_propuesta, .chip.p-parcial { background: #fff; color: var(--tinta-2); border-color: var(--eje); } .chip.p-sin_propuesta::before { background: var(--grave); } .chip.p-parcial::before { background: var(--marca-verde); } .chip.p-rep_ok { background: var(--bien-wash); color: var(--bien-texto); border-color: rgba(65, 146, 87, 0.35); } .chip.p-rep_ok::before { background: var(--bien); } .chip.p-rep_falta { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.p-rep_falta::before { background: var(--alerta); } .chip.p-rep_vencido { background: var(--critico-wash); color: var(--critico); border-color: rgba(158, 43, 33, 0.3); } .chip.p-rep_vencido::before { background: var(--critico); } .p-programa td { vertical-align: top; } .p-programa input[type=date], .p-programa select { width: auto; max-width: 170px; } .p-programa input[type=text] { width: 100%; min-width: 140px; } .p-programa input[type=checkbox] { width: auto; margin-top: 3px; } .p-programa tr.resaltada td { background: var(--acento-wash); } .p-programa tr.grupo td { background: var(--plano); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--tinta-2); } .p-sub { display: block; font-size: calc(12 * var(--u)); color: var(--tinta-2); margin-top: 2px; } .p-sub.devuelta { color: var(--alerta-texto); } .p-flujo { margin: 12px 0; border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 14px; background: var(--superficie); } .p-flujo h4 { margin: 0 0 6px; } .p-flujo table td { font-size: calc(12.5 * var(--u)); } .p-flujo tr.bajo td { background: var(--critico-wash); } .p-barra-saldo { position: relative; height: 10px; min-width: 120px; background: var(--plano); border-radius: 5px; overflow: hidden; } .p-barra-saldo i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--marca-verde); } .p-barra-saldo.bajo i { background: var(--critico); } .p-barra-saldo b { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--marca-oscuro); } .p-urgente { margin-top: 14px; border-top: 1px dashed var(--eje); padding-top: 10px; } .p-urgente summary { cursor: pointer; font-weight: 600; } .p-pagos { margin-top: 10px; } .p-pago-renglon { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--linea); } .p-pago-renglon:first-of-type { border-top: 0; } .p-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .p-zona-comprobante { border: 1px dashed var(--eje); border-radius: var(--radio); padding: 10px 12px; margin: 8px 0; background: var(--plano); font-size: calc(13 * var(--u)); } .p-zona-comprobante.lista { border-style: solid; border-color: rgba(65, 146, 87, 0.45); background: var(--bien-wash); } @media (max-width: 860px) { .p-ficha { grid-template-columns: 1fr; } .p-ruta { grid-template-columns: 1fr; gap: 8px; } .p-ruta li::before { display: none; } } /* ---------- portal de proveedores: la marca del cliente (2026-09-24) ---------- El externo ve el logotipo de la empresa que le dio acceso sobre una placa blanca (cualquier logotipo se lee así sobre la barra oscura) o su nombre en texto; nunca la S de Sago. index.html pone .ruta-portal en una ruta #/p/ y portal.js la quita cuando la marca ya está. */ .ruta-portal #logo { visibility: hidden; } #logo .marca-nombre { font-weight: 650; font-size: calc(16 * var(--u)); letter-spacing: -0.2px; } .placa-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; padding: 5px 12px; height: calc(40 * var(--e)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } .placa-logo img { display: block; height: calc(30 * var(--e)); width: auto; max-width: calc(200 * var(--u)); object-fit: contain; } .placa-logo.cargando { width: calc(110 * var(--e)); } #velo-sesion.sin-patron, #velo-mfa.sin-patron { background-image: none; } .caja-sesion .icono-portal { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: var(--plano); border: 1px solid var(--linea); color: var(--tinta-2); } .caja-sesion .marca-cliente { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--linea); } .caja-sesion .marca-cliente img { display: block; max-height: 48px; max-width: 240px; width: auto; } .caja-sesion .marca-cliente .nombre-cliente { font-size: calc(19 * var(--u)); letter-spacing: -0.3px; } .caja-sesion .sello-portal { font-size: calc(11.5 * var(--u)); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); font-weight: 650; } .caja-sesion .marca-pendiente { min-height: 36px; margin-bottom: 16px; } .tarjeta-empresa .logo-tarjeta { display: block; margin-bottom: 8px; } .tarjeta-empresa .logo-tarjeta img { display: block; max-height: 36px; max-width: 180px; width: auto; } /* Configuración → Identidad fiscal: el logotipo como lo ve el proveedor. */ .vista-barra-portal { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 14px; border-radius: 10px; background: var(--shell); } /* Portal: lo cerrado llega por tandas (portal-7, 2026-09-24). */ .p-mas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 4px 2px; color: var(--tinta-suave); font-size: calc(13 * var(--u)); } /* ---------- teléfono (≤ 860 px, 2026-09-28) ---------- El menú lateral no cabe: en su lugar va #barra-inferior, una barra flotante y translúcida abajo —el estilo de las pestañas de iOS desde la 26— con cuatro pantallas fijas y «Más», que abre #hoja-mas desde abajo (las arma app.js con lo que haya en #menu). Además: la barra de arriba se compacta, los campos van a 16 px (con menos, Safari se acerca solo al tocarlos), los modales suben desde abajo y Cobranza, Pagos, Facturas SAT y Banco se leen como tarjetas (.tabla-tarjetas). En la computadora nada de esto aplica. */ #barra-inferior, #hoja-mas { display: none; } @media (max-width: 860px) { /* barra de arriba: la S, la empresa y «Cambiar»; la fecha no cabe */ #barra { gap: 10px; padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); } #logo .marca-texto, #barra-hoy, .texto-escritorio { display: none; } #barra-empresa { flex: 1 1 auto; justify-content: space-between; } .chip-empresa { max-width: none; min-width: 0; flex: 0 1 auto; font-size: 14px; } .enlace-cambiar { flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--shell-linea); border-radius: 99px; color: var(--shell-tinta); font-size: 13px; } #contenido { padding: 18px max(14px, env(safe-area-inset-right)) 40px max(14px, env(safe-area-inset-left)); } /* la barra de abajo: vidrio CLARO, como las pestañas de iOS 26 sobre una página clara. El contenido se asoma por debajo (el saturate es lo que deja pasar su color; sin él el desenfoque se ve lechoso), el borde hace de filo y la sombra apenas la despega. La primera versión era verde oscuro al 78 % con una sombra fuerte y en el iPhone se leía como una franja opaca con una mancha alrededor (Mario, 2026-09-28). */ #barra-inferior:not([hidden]) { display: flex; gap: 2px; position: fixed; z-index: 60; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); padding: 5px; border-radius: 32px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 0.5px solid rgba(23, 50, 51, 0.12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 0.5px 0 rgba(255, 255, 255, 0.8); } /* Quien pidió menos transparencia o más contraste en su iPhone, o un navegador sin desenfoque: blanco sólido, que se lea sobre lo que sea. */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { #barra-inferior:not([hidden]) { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--eje); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #barra-inferior:not([hidden]) { background: rgba(255, 255, 255, 0.97); } } #barra-inferior > a, #barra-inferior > button { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 2px; margin: 0; border: 0; border-radius: 26px; background: transparent; color: rgba(23, 50, 51, 0.8); text-decoration: none; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.1px; line-height: 1.1; -webkit-tap-highlight-color: transparent; } /* El 80 % del verde da 5:1 aun con lo más oscuro de la página debajo. */ #barra-inferior > .activo { background: rgba(213, 235, 137, 0.72); color: var(--marca-oscuro); } #barra-inferior svg { width: 23px; height: 23px; } #barra-inferior .etiqueta-barra { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #barra-inferior .punto-barra { position: absolute; top: 7px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%; background: var(--marca-rosa); box-shadow: 0 0 0 2px #fff; } body.con-barra-inferior #contenido { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } body.con-barra-inferior #toasts { left: 14px; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); } body.con-barra-inferior .toast { max-width: none; } /* Presentando, la banda va abajo del todo y la barra flota encima de ella. */ body.presentando #barra-inferior:not([hidden]) { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 44px); } body.presentando.con-barra-inferior #contenido { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } #banda-presentacion { padding-bottom: max(8px, env(safe-area-inset-bottom)); } /* la hoja «Más»: sube desde abajo, como las de iOS */ #hoja-mas[open] { display: block; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 86vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 0 0 max(14px, env(safe-area-inset-bottom)); background: var(--superficie); animation: subir-hoja 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); } .hoja-asa { width: 38px; height: 5px; border-radius: 3px; background: var(--eje); margin: 8px auto 2px; } .hoja-cabeza { display: flex; align-items: flex-start; gap: 12px; padding: 8px 18px 14px; border-bottom: 1px solid var(--linea); } .hoja-empresa { flex: 1; min-width: 0; } .hoja-titulo { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hoja-saldo { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; } .hoja-saldo .etiqueta { color: var(--tinta-suave); font-size: 13px; } .hoja-saldo .valor { font-weight: 650; font-variant-numeric: tabular-nums; } .hoja-saldo .valor.negativo { color: var(--critico); } .hoja-cerrar { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--plano); color: var(--tinta-2); font-size: 14px; justify-content: center; } .hoja-lista { display: flex; flex-direction: column; padding: 6px 10px; } .hoja-lista a { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 12px; border-radius: 12px; color: var(--tinta); text-decoration: none; font-size: 16px; font-weight: 500; } .hoja-lista a.activo { background: var(--acento-wash); font-weight: 650; } .hoja-lista a svg { width: 22px; height: 22px; color: var(--tinta-2); flex: 0 0 auto; } .hoja-lista .cuenta-menu { margin-left: auto; background: var(--marca-lima); color: var(--marca-oscuro); border-radius: 99px; padding: 0 8px; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; } .hoja-lista .flecha { margin-left: auto; color: var(--tinta-suave); font-size: 20px; } .hoja-lista .cuenta-menu + .flecha { margin-left: 8px; } .hoja-cambiar { display: block; margin: 4px 20px 6px; padding: 13px; text-align: center; border: 1px solid var(--linea); border-radius: 14px; color: var(--tinta); text-decoration: none; font-weight: 600; } /* campos a 16 px y blancos del tamaño del dedo */ select, input, textarea { font-size: 16px; } #contenido input[type="search"] { width: 100% !important; } input[type="checkbox"] { width: 20px; height: 20px; } .menu-mas > summary { min-width: 40px; min-height: 34px; } /* los modales suben desde abajo, a todo lo ancho */ dialog, dialog.ancho { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92vh; border-radius: 20px 20px 0 0; } .modal-cuerpo { max-height: 92vh; padding-bottom: max(20px, env(safe-area-inset-bottom)); } .modal-pie { flex-wrap: wrap; } /* En una sola columna, cada campo a todo lo ancho (el selector de moneda conserva el suyo: lo trae escrito en línea). */ .modal-cuerpo .campos input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .modal-cuerpo .campos select, .modal-cuerpo .campos textarea { width: 100%; } /* las listas como tarjetas */ .tarjeta:has(table.tabla-tarjetas) { background: transparent; border: 0; box-shadow: none; padding: 0; } .tabla-envoltura:has(> table.tabla-tarjetas) { overflow: visible; } table.tabla-tarjetas, table.tabla-tarjetas > tbody { display: block; width: 100%; } table.tabla-tarjetas > thead { display: none; } table.tabla-tarjetas > tbody > tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 10px; row-gap: 6px; padding: 13px 14px; margin: 0 0 10px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); } table.tabla-tarjetas > tbody > tr:hover { background: var(--superficie); } table.tabla-tarjetas td { display: block; min-width: 0; padding: 0; border: 0; } table.tabla-tarjetas td.c-sel { grid-column: 1; grid-row: 1; padding-top: 1px; } table.tabla-tarjetas td.c-titulo { grid-column: 2; grid-row: 1; font-size: 15.5px; font-weight: 650; } table.tabla-tarjetas tr.sin-casilla > td.c-sel { display: none; } table.tabla-tarjetas tr.sin-casilla > td.c-titulo { grid-column: 1 / 3; } table.tabla-tarjetas td.c-monto { grid-column: 3; grid-row: 1; text-align: right; font-size: 15.5px; font-weight: 700; white-space: nowrap; } table.tabla-tarjetas td.c-sub { grid-column: 1 / -1; color: var(--tinta-2); font-size: 14px; } /* La etiqueta a la izquierda y el valor —con sus botones, como el ✎ de la fecha— junto a la derecha: cada pedazo del valor es su propio elemento. */ table.tabla-tarjetas td.c-dato { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 6px; row-gap: 2px; text-align: right; font-size: 14px; } table.tabla-tarjetas td.c-dato::before { content: attr(data-etiqueta); margin-right: auto; padding-right: 10px; text-align: left; color: var(--tinta-suave); font-size: 13px; } table.tabla-tarjetas td.c-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--linea); text-align: right; } table.tabla-tarjetas td.c-acciones:empty { display: none; } table.tabla-tarjetas td.c-mensaje { grid-column: 1 / -1; } } @keyframes subir-hoja { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { #hoja-mas[open] { animation: none; } } /* ---- Servicio de la deuda (2026-09-29) ---- */ .sd-umbral { display: inline-flex; align-items: center; gap: calc(6 * var(--e)); font-size: calc(13 * var(--u)); color: var(--tinta-2); } .sd-umbral input { width: calc(72 * var(--u)); text-align: right; font-variant-numeric: tabular-nums; } .sd-bajo { background: var(--grave-wash); color: var(--grave-texto); font-weight: 650; border-radius: 6px; padding: 1px 6px; } tr.apagada td { color: var(--tinta-suave); } tr.apagada td b { font-weight: 500; } #grafica-deuda { margin-top: calc(8 * var(--e)); } /* cinco botones no caben en un teléfono: la tira se desliza en vez de cortarse */ .sd-agrupar { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .sd-agrupar button { flex: 0 0 auto; } /* ---- Conciliación: el banco y las facturas lado a lado (2026-10-04) ---- Dos lados con su barra de filtros cada uno, la barra de cuadre pegada abajo y, en el teléfono, un lado a la vez con dos pestañas. */ .oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .conc-cab { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; } .conc-cab h1 { margin: 0; } .conc-vistas { margin: 4px 0 12px; } .conc-lados { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; } .conc-lado { background: var(--superficie); border: 1px solid var(--linea); border-radius: 11px; min-width: 0; } .conc-lado-cab { padding: 10px 12px 8px; border-bottom: 1px solid var(--linea); display: grid; gap: 8px; } .conc-titulo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .conc-titulo h2 { font-size: calc(16 * var(--u)); margin: 0; } .conc-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .conc-filtros select, .conc-filtros input { font-size: calc(12.5 * var(--u)); } .conc-filtros input[type="search"] { flex: 1 1 160px; min-width: 120px; } .conc-importe { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); font-size: calc(12 * var(--u)); } .conc-importe input { width: 92px; } .conc-contador { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: calc(12 * var(--u)); color: var(--tinta-2); } .conc-tabla { border: 0; border-radius: 0 0 11px 11px; max-height: 62vh; overflow: auto; } .conc-tabla th { position: sticky; top: 0; z-index: 1; } .conc-fila { cursor: pointer; } .conc-fila:hover td { background: var(--plano); } .conc-fila.marcada td { background: var(--acento-wash); } .conc-fila.pareja td { background: var(--alerta-wash); } .conc-fila.pareja td:first-child { box-shadow: inset 3px 0 0 var(--alerta); } .conc-fila.apagada { cursor: default; } .conc-fila.apagada td { color: var(--tinta-suave); } .conc-desc { font-weight: 550; word-break: break-word; } .conc-folio { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .conc-tag { display: inline-block; font-size: 10.5px; font-weight: 650; letter-spacing: .04em; padding: 0 5px; border-radius: 4px; border: 1px solid var(--eje); color: var(--tinta-2); margin-left: 4px; vertical-align: 1px; } .conc-tag.ppd { border-color: rgba(23, 50, 51, 0.35); color: var(--marca-oscuro); } .conc-tag.rep { background: var(--acento-wash); color: var(--marca-oscuro); } .conc-razones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .conc-razon { font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--alerta); color: var(--alerta-texto); background: var(--superficie); } .conc-parejas { margin: 10px 12px 2px; padding: 9px 11px; border: 1px solid var(--alerta); border-radius: 9px; background: var(--alerta-wash); display: grid; gap: 6px; font-size: calc(12.5 * var(--u)); } .conc-parejas .titulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--alerta-texto); } .conc-pareja { display: flex; gap: 8px; align-items: flex-start; } .conc-pareja .que { flex: 1 1 auto; min-width: 0; } .conc-cuadre { position: sticky; bottom: 10px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 12px; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--eje); border-radius: 12px; box-shadow: 0 -6px 24px rgba(23, 50, 51, 0.10); } .conc-cuadre .cifra { display: grid; gap: 1px; } .conc-cuadre .cifra small { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; } .conc-cuadre .cifra b { font-size: calc(17 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; } .conc-cuadre .mensaje { flex: 1 1 240px; min-width: 0; font-size: calc(13 * var(--u)); color: var(--tinta-2); } .conc-cuadre.ok { border-color: var(--bien); } .conc-cuadre.ok .dif b { color: var(--bien-texto); } .conc-cuadre.aviso .dif b { color: var(--alerta-texto); } .conc-cuadre.bloqueo .dif b { color: var(--critico); } .conc-pasos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } .conc-pasos li { border: 1px solid var(--linea); border-radius: 9px; padding: 9px 11px 9px 38px; position: relative; font-size: calc(13 * var(--u)); } .conc-pasos li::before { content: ""; position: absolute; left: 13px; top: 12px; width: 13px; height: 13px; border-radius: 4px; background: var(--marca-lima); box-shadow: inset 0 0 0 1.5px var(--marca-oscuro); } .conc-pasos li.mov::before { border-radius: 50%; background: var(--superficie); } .conc-aplicar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: calc(12.5 * var(--u)); color: var(--tinta-2); } .conc-aplicar input { width: 120px; text-align: right; } .conc-opciones { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--alerta); background: var(--alerta-wash); border-radius: 9px; font-size: calc(13 * var(--u)); } .conc-opciones label { display: flex; gap: 8px; align-items: flex-start; } .conc-grupos .linea { display: block; } .conc-pestanas { display: none; } .conc-ver-filtros { display: none; margin-left: auto; } @media (max-width: 1100px) { .conc-lados { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .conc-pestanas { display: inline-flex; margin-bottom: 8px; } .conc-ver-filtros { display: inline-flex; } .conc-filtros { display: none; } .conc-lado.filtros-abiertos .conc-filtros { display: flex; } .conc-lados.ver-banco .conc-facturas, .conc-lados.ver-facturas .conc-banco { display: none; } /* encima de la barra flotante de abajo, y solo cuando hay algo marcado */ .conc-cuadre { bottom: calc(86px + env(safe-area-inset-bottom)); padding: 8px 10px; gap: 4px 12px; } .conc-cuadre.sin-marcas { display: none; } .conc-cuadre .mensaje { flex-basis: 100%; order: 4; font-size: 12.5px; } .conc-cuadre .cifra b { font-size: 15px; } .conc-cuadre .primario { margin-left: auto; } .conc .fila-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .conc .tile { padding: 10px 12px; } .conc .tile .detalle { display: none; } .conc-tabla { max-height: none; } } .conc-rango { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .conc-rango input[type="date"] { width: 132px; } .conc-estado { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 4px; } .conc-accion { padding: 1px 6px; font-size: calc(11.5 * var(--u)); } .conc-tabla td:first-child, .conc-tabla th:first-child { width: 28px; } .conc-tabla td:nth-child(2) { white-space: nowrap; } /* ===== el convenio de pago con proveedores (portal-14, maqueta del 2026-10-08) ===== Violeta: la app no lo usa para nada más y no se confunde con el verde de pagado, el ámbar de aplazado ni el rojo de vencido (punto 12). El chip lleva siempre su texto; el color y la raya del renglón solo acompañan. */ :root { --convenio: #5b45c9; --convenio-texto: #4631a8; --convenio-wash: rgba(91, 69, 201, 0.10); --convenio-borde: rgba(91, 69, 201, 0.38); } .chip.convenio { background: var(--convenio-wash); color: var(--convenio-texto); border-color: var(--convenio-borde); font-weight: 650; } .chip.convenio::before { background: var(--convenio); } tr.fila-convenio > td:first-child { box-shadow: inset 3px 0 0 var(--convenio); } .chip.cv-por_aceptar, .chip.cv-version { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.cv-por_aceptar::before, .chip.cv-version::before { background: var(--alerta); } .chip.cv-en_curso { background: var(--convenio-wash); color: var(--convenio-texto); border-color: var(--convenio-borde); } .chip.cv-en_curso::before { background: var(--convenio); } .chip.cv-cumplido { background: var(--bien-wash); color: var(--bien-texto); border-color: rgba(65, 146, 87, 0.35); } .chip.cv-cumplido::before { background: var(--bien); } .chip.cv-cancelado { background: #fff; color: var(--tinta-2); border-style: dashed; } .chip.cv-cancelado::before { background: transparent; border: 1px solid var(--tinta-2); } .chip.cv-pendiente { background: #fff; color: var(--tinta); border-color: var(--eje); } .chip.cv-pendiente::before { background: var(--alerta); } .chip.cv-cambio { background: #fff; color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.55); border-style: dashed; } .chip.cv-cambio::before { background: var(--alerta); } .chip.cv-pue { background: var(--alerta-wash); color: var(--alerta-texto); border-color: rgba(224, 165, 46, 0.45); } .chip.cv-pue::before { background: var(--alerta); } .chip.cv-origen { background: var(--plano); color: var(--tinta-2); } .chip.cv-origen::before { background: var(--marca-oscuro); } /* el formulario: seis secciones numeradas, en el orden en que se llena */ .cv-seccion { border-top: 1px solid var(--linea); margin-top: 16px; padding-top: 14px; } .cv-seccion > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: calc(15.5 * var(--u)); } .cv-seccion > p.sub { margin: 0 0 10px; max-width: 88ch; } .cv-paso { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--marca-oscuro); color: var(--marca-lima); font-size: 12px; font-weight: 650; flex: none; } .cv-cab { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: end; } .cv-cab select { width: 100%; } .cv-folio { font-size: calc(17 * var(--u)); font-variant-numeric: tabular-nums; } .cv-campos { display: flex; gap: 10px 16px; align-items: flex-end; flex-wrap: wrap; } .cv-campo { display: grid; gap: 3px; } .cv-campo label { font-size: calc(12 * var(--u)); color: var(--tinta-2); } .cv-campo input[type=text] { width: 10em; } .cv-campo input.pct { width: 5.5em; } .cv-resultado { padding-bottom: 8px; font-variant-numeric: tabular-nums; } .cv-ayudante { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; background: var(--plano); border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 12px; margin: 0 0 10px; font-size: calc(13 * var(--u)); } .cv-ayudante input[type=text] { width: 4em; } .cv-ayudante input[type=date] { width: auto; } .cv-ayudante .sub { flex-basis: 100%; } .cv-ayudante select { width: auto; } .cv-dias button { padding-left: 10px; padding-right: 10px; } .cv-pagos td .p-sub { display: block; } .cv-pagos input[type=text].monto { width: 10em; text-align: right; font-variant-numeric: tabular-nums; } .cv-pagos input[type=date] { width: auto; } .cv-reparto th, .cv-reparto td { white-space: nowrap; vertical-align: middle; } .cv-reparto input.celda { width: 8.5em; text-align: right; font-variant-numeric: tabular-nums; padding: 4px 6px; } .cv-pegar textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: calc(12.5 * var(--u)); white-space: pre; overflow-x: auto; } .cv-resultado-pegar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: calc(13 * var(--u)); } .cv-resultado-pegar li.aviso { color: var(--alerta-texto); } .cv-resultado-pegar li.mal { color: var(--critico); } .cv-resultado-pegar li.nuevo { color: var(--convenio-texto); } .cv-resultado-pegar li.resumen { font-weight: 650; color: var(--tinta); } .cv-resultado-ok { margin-top: 8px; font-size: calc(13 * var(--u)); } .cv-resultado-ok summary { cursor: pointer; color: var(--tinta-2); } .cv-resultado-ok .cv-resultado-pegar { margin-top: 6px; max-height: calc(220 * var(--u)); overflow-y: auto; } /* Los filtros de «Qué entra»: se acomodan en renglones en pantallas angostas. */ .cv-filtros { margin: 0 0 10px; } .cv-filtros .cv-campo > .sub { font-size: calc(12 * var(--u)); font-weight: 550; color: var(--tinta-2); } .cv-filtros input[type=date] { width: auto; } .cv-filtros input[type=search] { width: 13em; max-width: 100%; } .cv-marcar .mini.fantasma { margin-left: auto; } /* Las facturas fijas de un pago, en el reparto. */ .cv-fijas { margin-top: 8px; } .cv-fijas textarea { flex-basis: 100%; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: calc(12.5 * var(--u)); } .cv-fijas label { margin: 0; } .cv-fijas select { width: auto; } .cv-fijas-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: calc(13 * var(--u)); } .cv-fijas-lista .chip, .cv-fijas-lista button { margin-left: 4px; } .cv-pendientes { margin: 6px 0 0; padding-left: 18px; font-size: calc(12.5 * var(--u)); color: var(--critico); display: grid; gap: 2px; } .cv-linea { display: block; font-size: calc(12.5 * var(--u)); margin: 1px 0; } .cv-linea .chip { margin-left: 4px; } .cv-linea button.mini { margin-left: 6px; } .cv-tabla td:first-child, .cv-tabla td:nth-child(2) { white-space: nowrap; } /* El concepto de una factura del SAT junta todos sus renglones y llega a 300 caracteres: con el nowrap de arriba empujaba «Lo que entra» a lo ancho y había que deslizar para ver lo pagado y lo que falta (el primer proveedor real, 2026-10-12). Se parte en renglones y se corta en dos; completo en el title. Lo mismo para lo que se marca en «Cambiar el convenio». */ .cv-tabla td .p-sub, .cv-tabla td .p-declaro > span { white-space: normal; } .cv-tabla .cv-concepto { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 24ch; max-width: 70ch; } .cv-tabla td .p-declaro { min-width: 30ch; } .cv-ficha .fila-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .cv-aceptar { border: 1px solid rgba(224, 165, 46, 0.55); background: var(--alerta-wash); border-radius: var(--radio); padding: 12px 14px; margin-top: 14px; } .cv-aceptado { border: 1px solid rgba(65, 146, 87, 0.35); background: var(--bien-wash); border-radius: var(--radio); padding: 10px 14px; margin-top: 14px; font-size: calc(13 * var(--u)); } @media (max-width: 860px) { .cv-cab { grid-template-columns: minmax(0, 1fr); } } /* ===== el saldo a favor (maqueta del 2026-10-13) ===== Azul: la app no lo usa para ningún otro estado y no se confunde con el verde de pagado, el ámbar de aplazado, el rojo de vencido ni el violeta del convenio. Es dinero que ya se sabe de quién es y falta decidir a qué se aplica; el chip lleva siempre su texto. */ :root { --favor: #2f6d95; --favor-texto: #235578; --favor-wash: rgba(47, 109, 149, 0.10); --favor-borde: rgba(47, 109, 149, 0.38); } .chip.favor { background: var(--favor-wash); color: var(--favor-texto); border-color: var(--favor-borde); font-weight: 600; } .chip.favor::before { background: var(--favor); } .chip.cerrado { background: #fff; color: var(--tinta-2); border-style: dashed; } .chip.cerrado::before { background: transparent; border: 1px solid var(--tinta-2); } /* el posible pago repetido, arriba de las facturas */ .conc-repetido { margin: 10px 12px 2px; padding: 9px 11px; border: 1px solid rgba(158, 43, 33, 0.3); border-radius: 9px; background: var(--critico-wash); display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; font-size: calc(12.5 * var(--u)); } .conc-repetido .que { flex: 1 1 240px; min-width: 0; color: var(--critico); } .conc-opciones label.apagada { color: var(--tinta-suave); } .sf-campo { display: grid; gap: 4px; margin-top: 10px; font-size: calc(13 * var(--u)); } .sf-campo > span:first-child { font-weight: 600; } .sf-campo textarea { font: inherit; width: 100%; min-height: 58px; resize: vertical; } .conc-opciones label.sf-campo { display: grid; margin: 2px 0 0 24px; } /* cada saldo, con sus señales y su historia */ .sf-lista { display: grid; gap: 10px; margin-top: 12px; } .sf-saldo { border: 1px solid var(--linea); border-radius: 11px; background: var(--superficie); padding: 12px 14px 12px 17px; display: grid; gap: 9px; box-shadow: inset 3px 0 0 var(--favor); min-width: 0; } .sf-saldo.cerrado { box-shadow: none; background: var(--plano); } .sf-cab { display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; } .sf-cab h3 { margin: 0; font-size: calc(16 * var(--u)); font-weight: 650; } .sf-cab .cifra { margin-left: auto; text-align: right; display: grid; } .sf-cab .cifra small { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; } .sf-cab .cifra b { font-size: calc(20 * var(--u)); font-variant-numeric: tabular-nums; color: var(--favor-texto); white-space: nowrap; } .sf-saldo.cerrado .sf-cab .cifra b { color: var(--tinta-2); } .sf-meta { font-size: calc(12.5 * var(--u)); color: var(--tinta-2); display: grid; gap: 2px; max-width: 90ch; } .sf-meta .nota { color: var(--tinta); } .sf-senales { display: grid; gap: 6px; } .sf-senal { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: calc(13 * var(--u)); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--linea); background: var(--plano); } .sf-senal .que { flex: 1 1 260px; min-width: 0; } .sf-senal.fuerte { background: var(--acento-wash); border-color: rgba(23, 50, 51, 0.2); } .sf-senal.edad { background: var(--alerta-wash); border-color: rgba(224, 165, 46, 0.45); color: var(--alerta-texto); } .sf-historia { list-style: none; margin: 0; padding: 0; font-size: calc(12.5 * var(--u)); color: var(--tinta-2); display: grid; gap: 2px; } .sf-historia li { padding-left: 16px; position: relative; } .sf-historia li::before { content: "↳"; position: absolute; left: 0; color: var(--tinta-suave); } .sf-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .sf-acciones .sub { font-size: 12px; } .sf-tabla input[type="number"] { width: 120px; text-align: right; } .sf-resumen { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 10px; font-size: calc(13 * var(--u)); color: var(--tinta-2); } .sf-resumen b { color: var(--tinta); font-variant-numeric: tabular-nums; } .tile.favor { border-color: var(--favor-borde); background: var(--favor-wash); } .tile.favor .valor { color: var(--favor-texto); } /* el aviso en Pagos y en «Por pagar»: hay saldo a favor de ese proveedor */ .sf-aviso { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; padding: 9px 11px; border: 1px solid var(--favor-borde); border-radius: 9px; background: var(--favor-wash); font-size: calc(13 * var(--u)); margin: 10px 0; } .sf-aviso .que { flex: 1 1 260px; min-width: 0; } tr.sf-con-aviso td { border-bottom: 0; } tr.sf-aviso-fila td { background: var(--favor-wash); border-bottom: 1px solid var(--favor-borde); } @media (max-width: 640px) { .sf-cab .cifra { margin-left: 0; text-align: left; width: 100%; } .conc-opciones label.sf-campo { margin-left: 0; } } .tiempo .tipo.favor { color: var(--favor-texto); } .favor-cifra { color: var(--favor-texto); font-weight: 600; } tr.sf-aviso-fila .aviso-cont { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; font-size: calc(13 * var(--u)); } tr.sf-aviso-fila .aviso-cont .que { flex: 1 1 300px; min-width: 0; } /* ---- Varios cargos del banco a un crédito (creditos-cargos-lote, 2026-10-15) ---- La ventana «Aplicar a un crédito» (Banco y Conciliación), la razón visible del botón apagado en la barra de marcados, el lado «Créditos» de Conciliación y la columna «Con qué se pagó» de la tabla de amortización. */ .lote-motivo { flex: 1 1 100%; font-size: calc(12.5 * var(--u)); color: var(--alerta-texto); background: var(--alerta-wash); border: 1px solid rgba(224, 165, 46, 0.45); border-radius: 8px; padding: calc(5 * var(--e)) calc(9 * var(--e)); } .conc-razon.grave { border-color: rgba(158, 43, 33, 0.35); color: var(--critico); background: var(--critico-wash); } #aplicar-credito .titulo-seccion { font-size: calc(12 * var(--u)); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); margin: calc(16 * var(--e)) 0 calc(6 * var(--e)); font-weight: 650; } #aplicar-credito td select { font-size: calc(12.5 * var(--u)); } .creditos-op { display: grid; gap: calc(6 * var(--e)); } .credito-op { display: flex; gap: 10px; align-items: flex-start; padding: calc(8 * var(--e)) calc(11 * var(--e)); border: 1px solid var(--linea); border-radius: 9px; cursor: pointer; font-size: calc(13 * var(--u)); } .credito-op input { margin-top: 3px; width: auto; } .credito-op.elegido { border-color: var(--marca-oscuro); background: var(--acento-wash); } .credito-op.apagado { cursor: not-allowed; color: var(--tinta-suave); } .credito-op .que { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } .credito-op .que small { color: var(--tinta-2); font-size: calc(12 * var(--u)); } .credito-op .grupo { font-size: calc(11 * var(--u)); text-transform: uppercase; letter-spacing: .05em; color: var(--marca-oscuro); font-weight: 650; } .resto-fecha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: calc(10 * var(--e)); font-size: calc(13 * var(--u)); } .resto-fecha input { width: auto; } .opciones-resto { display: grid; gap: 6px; margin-top: calc(10 * var(--e)); padding: calc(10 * var(--e)) calc(12 * var(--e)); border: 1px solid rgba(224, 165, 46, 0.45); background: var(--alerta-wash); border-radius: 9px; font-size: calc(13 * var(--u)); } .opciones-resto label.op { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; } .opciones-resto label.op input { margin-top: 3px; width: auto; } .conc-contra { margin-left: auto; } .conc-contra button { font-size: calc(12.5 * var(--u)); padding: 4px 10px; } .conc-grupo-credito td { background: var(--plano); font-size: calc(12.5 * var(--u)); } .pagos-renglon { font-size: calc(12 * var(--u)); min-width: 220px; } .pagos-renglon .subrenglon { display: block; } /* Pagos-aprobación (2026-10-21): de dónde viene cada pago en la aprobación de quien aprueba. Tres etiquetas que se distinguen de un vistazo: la factura que subió el proveedor (verde, como lo que ya pasó por su ciclo), la que se tomó de Facturas SAT (lima, como el SAT en el resto de la app) y lo capturado a mano (neutro: no trae factura detrás). */ .chip.origen-portal { background: var(--bien-wash); color: var(--bien-texto); border-color: rgba(65, 146, 87, 0.35); } .chip.origen-portal::before { background: var(--bien); } .chip.origen-sat { background: var(--acento-wash); color: var(--marca-oscuro); border-color: rgba(23, 50, 51, 0.2); } .chip.origen-sat::before { background: var(--marca-verde); } .chip.origen-capturado { background: var(--plano); color: var(--tinta-2); border-color: var(--eje); } .chip.origen-capturado::before { background: var(--tinta-suave); } .p-aprobar-seccion { margin: calc(18 * var(--e)) 0 calc(4 * var(--e)); } .p-aprobar-seccion .sub { margin: 2px 0 0; }