/* ═══════════════════════════════════════════════════════════════════════════════════════════ INTEGRIS — LA CAPA COMUN. «Una sola linea.» DE DONDE SALE ESTO La mesa de un jefe de operaciones a las siete de la manana, con luz de ventana. Una hoja de porcelana fria llena de renglones: quien entra, que se cotizo, que salio del almacen, quien firmo. Y un solo sello de tinta carmin en lo unico que hay que firmar hoy. De ahi salen las tres cosas de esta paleta: la porcelana (fondo, fria, azulada), la tinta de pizarra (texto) y el carmin (el acento, uno solo). LAS TRES REGLAS QUE GOBIERNAN TODO LO DEMAS 1) EL ACENTO ES LA ACCION. El boton principal va carmin macizo, y hay UNO por pantalla. Todo lo demas es contorno o tinta. Esto es deliberadamente lo contrario de lo que regia antes aqui: no se orienta con color, se orienta con la posicion y el peso, y el carmin queda libre para significar «esto es lo que se hace hoy». 2) NO HAY TARJETAS. La pantalla se compone de BANDAS separadas por reglas de 1px, no de cajas flotando sobre un fondo. La elevacion se reserva para lo que flota de verdad: un modal, un menu, un aviso. Un panel que no flota no lleva sombra. 3) DOS VOCES. Manrope dice las palabras; DM Mono dice los datos. Todo lo que se coteja a ojo o se compara en columna (DNI, RUC, correlativos, importes, horas, fechas) y todo rotulo de seccion van en la monoespaciada. En un sistema donde media pantalla son cifras, la mono no es un adorno: es la mitad de la voz. COMO SE LEE ESTE FICHERO · Aqui arriba, SOLO tokens. Ningun componente. · Los colores se declaran ENTEROS en `:root`. Los dos bloques oscuros de mas abajo solo cambian el VALOR de esa misma lista: ningun color nace dentro de un `@media` ni dentro de un `[data-theme]`. Si naciera ahi, el otro tema se quedaria sin el y aparece el texto invisible. · Los nombres viejos (`--azul-oscuro`, `--gris-medio`, `--navy`, `--g1`…) SIGUEN EXISTIENDO y apuntan a la paleta nueva. Hay cientos de usos repartidos por hojas, plantillas y JavaScript: se cambia lo que valen, no como se llaman. La paleta se calculo en OKLCH —donde un mismo paso de luminosidad vale igual en cualquier tono— y se publica en hex, porque esto se abre tambien desde telefonos de campo viejos. Cada color de texto esta medido contra los tres planos en los dos temas: ninguno baja de 4.5:1, y el minimo legible es la parada 600 de cada rampa. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ─── LAS CARAS ────────────────────────────────────────────────────────────────────────────── Manrope para el texto: humanista de eje geometrico, con la x alta, que es lo que sostiene la lectura a 13 px en una tabla de cien filas. DM Mono para el dato y para el rotulo. Las dos se sirven desde el propio proyecto y no desde Google: en obra no siempre hay red, y `font-src 'self'` ya lo permite sin tocar la CSP. Manrope es VARIABLE: un solo fichero por subconjunto cubre de 200 a 800. Por eso hay dos `@font-face` y no diez; el rango va declarado en `font-weight` para que el navegador interpole en vez de fingir la negrita. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/static/fonts/manrope-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/static/fonts/manrope-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/dmmono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/dmmono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/dmmono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/dmmono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: light; /* ── LOS PLANOS ────────────────────────────────────────────────────────────────────── Porcelana fria, sesgada a azul (tono 250 en OKLCH). No es papel: los cinco sistemas vecinos de esta casa usan un blanco roto CALIDO, y esto se distingue de todos ellos en el primer vistazo justamente por la temperatura. */ --lienzo: #EDF0F4; /* el fondo de la hoja */ --panel: #FBFDFE; /* la superficie donde se escribe */ --hueco: #E2E7EC; /* lo hundido: campos, celdas de cabecera */ --acero: #EDF0F4; /* nombre viejo del lienzo, vivo por compatibilidad */ --acero-hueco: #E2E7EC; /* nombre viejo del hueco */ /* ── LA TINTA ──────────────────────────────────────────────────────────────────────── Pizarra fria. Rampa por distancia al fondo. La parada 500 NO es color de texto (2.9:1 contra el hueco): es la de los bordes y los iconos. El minimo legible es 600. */ --n100: #F5F7F9; --n200: #E4E8ED; --n300: #D0D7DE; --n400: #AAB2BB; --n500: #7E8792; --n600: #5B6672; --n700: #414B5A; --n800: #26303E; --n900: #101827; /* ── EL CARMIN ─────────────────────────────────────────────────────────────────────── El unico acento, y aqui SI tine el boton principal: es la accion. Un solo boton carmin macizo por pantalla; en cuanto hay dos, ninguno significa nada. */ --a100: #FDEFF7; --a200: #F8D3E9; --a300: #F0A9D5; --a400: #D061AB; --a500: #B3318D; --a600: #951F74; --a700: #77165C; --a800: #551041; --a900: #390A2B; /* ── ESTADO ────────────────────────────────────────────────────────────────────────── Tonos elegidos LEJOS del carmin en el circulo (28, 152 y 72 contra 342) para que un error nunca se confunda con la accion del dia. Los nombres son los del criterio comun de la casa, en `~/apps/CRITERIO-DE-INTERFAZ.md`. */ --peligro: #A91D1A; --peligro-alto: #860A0B; --peligro-piso: #FFEDEA; --peligro-linea: #FCCCC5; --exito: #216B3C; --exito-alto: #10542B; --exito-piso: #E9F6EC; --exito-linea: #C6E4CC; --aviso: #8C5700; --aviso-alto: #724400; --aviso-piso: #FFEFDC; --aviso-linea: #F8D4A8; --sobre-tinta: #FBFDFE; --sobre-acento: #FBFDFE; --sobre-peligro: #FBFDFE; --sobre-exito: #FBFDFE; --sobre-aviso: #FBFDFE; /* ── LA SERIE DE DATOS ─────────────────────────────────────────────────────────────── Un dato no orienta: informa. El carmin dice «esto es lo que se hace»; si ademas tine la barra de un indicador o la ficha de un modulo, deja de decirlo. Por eso los quince modulos del portal, los estados del expediente y las series de las graficas tienen su propia lista, repartida por el circulo a luminosidad constante. Cada uno mide >=4.5:1 contra `--sobre-serie` en los dos temas (el peor, 5.5:1). */ --serie-1: #2454B3; --serie-2: #006D92; --serie-3: #00746F; --serie-4: #00714C; --serie-5: #1C6D26; --serie-6: #556300; --serie-7: #725800; --serie-8: #864B00; --serie-9: #9E3000; --serie-10: #A12628; --serie-11: #9E244F; --serie-12: #922A73; --serie-13: #7E3593; --serie-14: #6441A9; --serie-15: #4A4AB2; --serie-16: #0061AA; --sobre-serie: #FBFDFE; /* Los siete papeles con nombre de la serie: lo que significan, no que numero son. */ --dato-hito: var(--serie-1); --dato-proceso: var(--serie-16); --dato-alta: var(--serie-13); --dato-mal: var(--serie-10); --dato-bien: var(--serie-5); --dato-espera: var(--serie-8); --dato-dinero: var(--serie-7); --dato-neutro: var(--n600); --dato-apagado: var(--n400); /* ── EL VELO Y EL VIDRIO ─────────────────────────────────────────────────────────── */ --velo: rgba(16, 24, 39, 0.42); --velo-denso: rgba(16, 24, 39, 0.88); --vidrio-1: rgba(16, 24, 39, 0.035); --vidrio-2: rgba(16, 24, 39, 0.06); --vidrio-3: rgba(16, 24, 39, 0.10); --vidrio-4: rgba(16, 24, 39, 0.16); --vidrio-alto: rgba(251, 253, 254, 0.72); /* ── EL INDICE LATERAL ─────────────────────────────────────────────────────────────── Aqui esta el cambio estructural mas visible: el menu lateral DEJA DE SER una chapa oscura. Es la misma porcelana que el resto, separada solo por una regla de 1px, y lo que marca donde estas es el peso de la letra y un filo carmin, no un relleno. En oscuro si baja a tinta, porque ahi el contraste lo pide. */ --chapa: #FBFDFE; --chapa-alta: #E4E8ED; --sobre-chapa: #101827; --sobre-chapa-tenue: #5B6672; /* ── RELIEVE ───────────────────────────────────────────────────────────────────────── Casi nada. Lo que separa una banda de la siguiente es una regla, no una sombra. La sombra solo aparece en lo que flota de verdad. */ --sombra: 0 1px 0 rgba(16, 24, 39, 0.05); --sombra-alta: 0 2px 4px rgba(16, 24, 39, 0.06), 0 8px 20px rgba(16, 24, 39, 0.09); --sombra-hover: var(--sombra-alta); --sombra-modal: 0 24px 60px rgba(16, 24, 39, 0.24); --sombra-hundida: inset 0 1px 2px rgba(16, 24, 39, 0.07); --foco: 0 0 0 3px rgba(149, 31, 116, 0.30); --foco-peligro: 0 0 0 3px rgba(169, 29, 26, 0.28); --borde: 1px solid var(--n300); /* Papel y tinta de la zona de firma: no cambian con el tema, una firma es una firma. */ --papel-firma: #FFFFFF; --tinta-firma: #101827; /* Marcas ajenas, con su color de verdad. */ --marca-whatsapp: #1EA362; --marca-peru-rojo: #C8102E; --marca-peru-blanco: #FFFFFF; /* ── LAS FORMAS ────────────────────────────────────────────────────────────────────── Sistema de radios propio: la pastilla completa para lo que se PULSA, el filo casi recto para lo que se LEE, y solo lo que flota de verdad se redondea de verdad. Un boton con forma de pastilla junto a un campo casi rectangular no es un descuido: es como se distingue, de un vistazo y sin color, lo que es accion de lo que es dato. */ --radio-sm: 4px; /* etiquetas pequenas, celdas */ --radio: 6px; /* campos, paneles, bandas */ --radio-lg: 12px; /* lo que flota: modal, menu, aviso */ --radio-pastilla: 999px; /* botones, chips, contadores */ /* ── LA ESCALA TIPOGRAFICA ─────────────────────────────────────────────────────────── Razon ~1.22. El cuerpo baja a 14.5 px y las tablas a 12.5: es un sistema de inventario y planilla, no un articulo, y la densidad es una prestacion. La jerarquia la hace el PESO (500/600/700/800), no el tamano. */ --t-xs: 0.72rem; /* 10.8px — rotulo mono en versalitas */ --t-sm: 0.833rem; /* 12.5px — tabla, pie, ayuda */ --t-base: 0.967rem; /* 14.5px — cuerpo */ --t-md: 1.067rem; /* 16px — h3 */ --t-lg: 1.267rem; /* 19px — h2 */ --t-xl: 1.6rem; /* 24px — h1 */ --t-2xl: 2rem; /* 30px — la cifra que manda en la pantalla */ --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; --mono: "DM Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; --font: var(--sans); /* ── EL RITMO ──────────────────────────────────────────────────────────────────────── Base 4. La banda respira (24-32) aunque la fila apriete (6-10): esa diferencia entre el aire de fuera y el de dentro es lo que hace legible una pantalla densa. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --sal: var(--e4); --transition: 160ms cubic-bezier(0.23, 1, 0.32, 1); --t-rapida: 110ms cubic-bezier(0.23, 1, 0.32, 1); /* ── LOS NOMBRES DE SIEMPRE ────────────────────────────────────────────────────────── Cientos de usos repartidos por hojas, plantillas y JavaScript siguen pidiendo estos nombres. Se les cambia lo que valen, no como se llaman. */ --azul-oscuro: var(--n900); --azul-medio: var(--a600); --azul-claro: var(--a200); --azul-hover: var(--a700); --verde: var(--exito); --verde-claro: var(--exito-piso); --rojo: var(--peligro); --rojo-claro: var(--peligro-piso); --naranja: var(--aviso); --naranja-claro: var(--aviso-piso); --gris-oscuro: var(--n800); --gris-medio: var(--n600); --gris-claro: var(--lienzo); --gris-borde: var(--n300); --blanco: var(--panel); --navy: var(--n900); --azul: var(--a600); --azul2: var(--a500); --blue: var(--serie-1); --green: var(--exito); --red: var(--peligro); --amber: var(--aviso); --gris: var(--n600); --g1: var(--n100); --g2: var(--n200); --g3: var(--n300); --scale-factor: 1; } /* ─── EL TEMA OSCURO, EN SUS DOS ESTADOS ───────────────────────────────────────────────────── 1) El de abajo: lo que el sistema operativo pide, salvo que el usuario haya elegido claro a mano (de ahi el `:not([data-theme="light"])`). 2) Mas abajo: la eleccion explicita, que gana en las dos direcciones. Los dos cuerpos son IDENTICOS y salen del mismo sitio. No es el claro dado la vuelta. Es la misma mesa a las once de la noche: la porcelana se apaga hasta pizarra, la tinta se vuelve luz, y el carmin sube de luminosidad (de #951F74 a #E98FC8) porque en su tono de dia sobre negro no se lee. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --lienzo: #13171E; --panel: #1F242B; --hueco: #0C1015; --acero: #13171E; --acero-hueco: #0C1015; --n100: #1A1E25; --n200: #292E36; --n300: #393F48; --n400: #545B66; --n500: #78818E; --n600: #9BA4B0; --n700: #B7BEC8; --n800: #D4D9E1; --n900: #EEF2F7; --a100: #2D1D27; --a200: #47263B; --a300: #74315E; --a400: #AE498E; --a500: #D56FB2; --a600: #E98FC8; --a700: #F6B2DC; --a800: #FDD1EB; --a900: #FFE9F6; --peligro: #F0736A; --peligro-alto: #FA958C; --peligro-piso: #331714; --peligro-linea: #5E2621; --exito: #66BC7E; --exito-alto: #8BD09B; --exito-piso: #11291A; --exito-linea: #1D482C; --aviso: #E2A94F; --aviso-alto: #F2C179; --aviso-piso: #2E2210; --aviso-linea: #543C11; --sobre-tinta: #0C1015; --sobre-acento: #0C1015; --sobre-peligro: #0C1015; --sobre-exito: #0C1015; --sobre-aviso: #0C1015; --serie-1: #74A7FF; --serie-2: #00BFE4; --serie-3: #00C6BE; --serie-4: #3EC399; --serie-5: #72BF75; --serie-6: #A2B44D; --serie-7: #C3A839; --serie-8: #DB9B40; --serie-9: #F58753; --serie-10: #F98078; --serie-11: #F67D9C; --serie-12: #E880C4; --serie-13: #D089E6; --serie-14: #B194FD; --serie-15: #949EFF; --serie-16: #37B4FD; --sobre-serie: #0C1015; --velo: rgba(4, 6, 10, 0.66); --velo-denso: rgba(4, 6, 10, 0.93); --vidrio-1: rgba(238, 242, 247, 0.04); --vidrio-2: rgba(238, 242, 247, 0.07); --vidrio-3: rgba(238, 242, 247, 0.11); --vidrio-4: rgba(238, 242, 247, 0.17); --vidrio-alto: rgba(31, 36, 43, 0.78); --chapa: #0C1015; --chapa-alta: #292E36; --sobre-chapa: #EEF2F7; --sobre-chapa-tenue: #9BA4B0; --sombra: 0 1px 0 rgba(0, 0, 0, 0.45); --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.42), 0 8px 20px rgba(0, 0, 0, 0.44); --sombra-hover: var(--sombra-alta); --sombra-modal: 0 24px 60px rgba(0, 0, 0, 0.62); --sombra-hundida: inset 0 1px 2px rgba(0, 0, 0, 0.5); --foco: 0 0 0 3px rgba(233, 143, 200, 0.34); --foco-peligro: 0 0 0 3px rgba(240, 115, 106, 0.30); --gris-claro: var(--lienzo); --blanco: var(--panel); } } :root[data-theme="dark"] { color-scheme: dark; --lienzo: #13171E; --panel: #1F242B; --hueco: #0C1015; --acero: #13171E; --acero-hueco: #0C1015; --n100: #1A1E25; --n200: #292E36; --n300: #393F48; --n400: #545B66; --n500: #78818E; --n600: #9BA4B0; --n700: #B7BEC8; --n800: #D4D9E1; --n900: #EEF2F7; --a100: #2D1D27; --a200: #47263B; --a300: #74315E; --a400: #AE498E; --a500: #D56FB2; --a600: #E98FC8; --a700: #F6B2DC; --a800: #FDD1EB; --a900: #FFE9F6; --peligro: #F0736A; --peligro-alto: #FA958C; --peligro-piso: #331714; --peligro-linea: #5E2621; --exito: #66BC7E; --exito-alto: #8BD09B; --exito-piso: #11291A; --exito-linea: #1D482C; --aviso: #E2A94F; --aviso-alto: #F2C179; --aviso-piso: #2E2210; --aviso-linea: #543C11; --sobre-tinta: #0C1015; --sobre-acento: #0C1015; --sobre-peligro: #0C1015; --sobre-exito: #0C1015; --sobre-aviso: #0C1015; --serie-1: #74A7FF; --serie-2: #00BFE4; --serie-3: #00C6BE; --serie-4: #3EC399; --serie-5: #72BF75; --serie-6: #A2B44D; --serie-7: #C3A839; --serie-8: #DB9B40; --serie-9: #F58753; --serie-10: #F98078; --serie-11: #F67D9C; --serie-12: #E880C4; --serie-13: #D089E6; --serie-14: #B194FD; --serie-15: #949EFF; --serie-16: #37B4FD; --sobre-serie: #0C1015; --velo: rgba(4, 6, 10, 0.66); --velo-denso: rgba(4, 6, 10, 0.93); --vidrio-1: rgba(238, 242, 247, 0.04); --vidrio-2: rgba(238, 242, 247, 0.07); --vidrio-3: rgba(238, 242, 247, 0.11); --vidrio-4: rgba(238, 242, 247, 0.17); --vidrio-alto: rgba(31, 36, 43, 0.78); --chapa: #0C1015; --chapa-alta: #292E36; --sobre-chapa: #EEF2F7; --sobre-chapa-tenue: #9BA4B0; --sombra: 0 1px 0 rgba(0, 0, 0, 0.45); --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.42), 0 8px 20px rgba(0, 0, 0, 0.44); --sombra-hover: var(--sombra-alta); --sombra-modal: 0 24px 60px rgba(0, 0, 0, 0.62); --sombra-hundida: inset 0 1px 2px rgba(0, 0, 0, 0.5); --foco: 0 0 0 3px rgba(233, 143, 200, 0.34); --foco-peligro: 0 0 0 3px rgba(240, 115, 106, 0.30); --gris-claro: var(--lienzo); --blanco: var(--panel); } :root[data-theme="light"] { color-scheme: light; } /* ─── EL SUELO ─────────────────────────────────────────────────────────────────────────────── Nada de aqui coloca nada: solo fija como se comporta el texto y la superficie. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* 15px, no 16. Es la palanca que sostiene las mas de mil medidas heredadas en rem: cambiarla reescala el sistema entero, asi que la densidad se ajusta en los tokens de tamano y de ritmo, no aqui. */ font-size: 15px; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: var(--t-base); color: var(--n800); background: var(--lienzo); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Manrope trae cifras proporcionales de serie y en una tabla eso baila. Aqui van tabulares para TODO el sistema: importes, DNI, horas y cantidades quedan en columna. */ font-variant-numeric: tabular-nums; } /* ─── TIPOGRAFIA ───────────────────────────────────────────────────────────────────────────── La jerarquia se hace con PESO antes que con tamano: 800 para el titulo de pantalla, 700 para el de banda, 600 para lo que solo destaca. Los titulos van apretados de interlinea (1.15) y de letra (-0.02em); el cuerpo, suelto. */ h1, h2, h3, h4, h5 { color: var(--n900); line-height: 1.15; text-wrap: balance; } h1 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.025em; } h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.019em; } h3 { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.014em; } h4, h5 { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.008em; } p { text-wrap: pretty; } a { color: var(--a600); text-decoration: none; } a:hover { color: var(--a700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* La segunda voz. Todo lo que se COTEJA a ojo (un DNI, un RUC, un correlativo, una placa, un importe) va aqui. Es donde un cero y una o se confunden. */ .mono, .dni, .ruc, .codigo, code, kbd, samp { font-family: var(--mono); font-size: 0.92em; /* DM Mono pinta grande al lado de Manrope */ font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* El rotulo: la pieza que mas se repite en el sistema y la que mas lo identifica. Mono, versalitas, muy separada, en tinta media. Sustituye al titulillo en negrita. */ .rotulo, .titulo-seccion { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--n600); } /* ─── EL FOCO, UNA SOLA VEZ Y PARA TODO ────────────────────────────────────────────────────── Quien navega con teclado NUNCA ve el `:hover`. El anillo es el mismo en todo el sistema. */ :focus-visible { outline: 2px solid var(--a600); outline-offset: 2px; border-radius: var(--radio-sm); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--a200); color: var(--n900); } /* La barra de scroll, del color de la hoja y no del sistema operativo: en oscuro una barra blanca de fabrica es lo primero que delata un tema a medias. */ * { scrollbar-color: var(--n400) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--n400); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--n500); background-clip: content-box; } /* ─── QUIEN PIDE MENOS MOVIMIENTO, RECIBE MENOS ────────────────────────────────────────────── No se apaga del todo: una transicion de color ayuda a entender que algo cambio. Lo que se apaga es lo que se DESPLAZA, que es lo que marea. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─── LA MARCA EN LOS DOS TEMAS ────────────────────────────────────────────────────────────── El logotipo es un PNG con fondo TRANSPARENTE, no una teja: en oscuro, una teja de porcelana se ve como una pegatina pegada encima. Y como la tinta de las letras no puede seguir a la rampa (es un mapa de bits), hay dos ficheros y el tema elige. El `.jpg` se queda intacto para el PDF y el correo, donde no hay tema que valga. */ .sidebar-logo, .header-logo, .logo-img { background: transparent; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar-logo, :root:not([data-theme="light"]) .header-logo, :root:not([data-theme="light"]) .logo-img { content: url("/static/img/logo_integris_oscuro.png"); } } :root[data-theme="dark"] .sidebar-logo, :root[data-theme="dark"] .header-logo, :root[data-theme="dark"] .logo-img { content: url("/static/img/logo_integris_oscuro.png"); } /* ─── LAYOUT APP ─────────────────────────────────────────────── */ .app-body { display: flex; min-height: 100vh; } /* ─── SIDEBAR ────────────────────────────────────────────────── */ .sidebar { /* Mas estrecha que antes (240 -> 216): el indice es una lista de lectura, no un panel. El sitio que se le quita se lo queda la tabla, que es donde esta el trabajo. */ width: 216px; min-height: 100vh; background: var(--chapa); color: var(--sobre-chapa); border-right: 1px solid var(--n300); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 200; transition: width var(--transition), transform var(--transition); } .sidebar.collapsed { width: 60px; } .sidebar.collapsed .sidebar-header span, .sidebar.collapsed .nav-item span, .sidebar.collapsed .sidebar-sistema { display: none; } .sidebar-header { display: flex; align-items: center; gap: 10px; padding: var(--e5) var(--e5) var(--e4); border-bottom: 1px solid var(--n200); } .sidebar-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; background: var(--panel); } /* el respaldo del logotipo: es un JPG con fondo blanco, asi que la cama tiene que ser blanca tambien en oscuro o se ve el recorte. */ .sidebar-sistema { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--n600); white-space: nowrap; overflow: hidden; } .sidebar-nav { flex: 1; padding: var(--e4) 0; overflow-y: auto; } .nav-item { /* El indice es TIPOGRAFICO: lo que dice donde estas es el peso de la letra y un filo carmin de 2px, no una pastilla de color ni un relleno. El filo va de 2px a proposito; una barra gruesa de color al costado de una lista es decoracion, no informacion. */ display: flex; align-items: center; gap: 11px; padding: 7px 16px 7px 18px; font-size: var(--t-sm); font-weight: 500; color: var(--n600); cursor: pointer; transition: color var(--t-rapida), border-color var(--t-rapida); text-decoration: none; white-space: nowrap; overflow: hidden; border-left: 2px solid transparent; /* Y01-D — `overflow:hidden` + `nowrap` cortaba la etiqueta larga SIN AVISO: en Logística › «Requerimientos por cotizar» el ítem ACTIVO (que además pasa a font-weight:700 y gana ancho) perdía los últimos 6 px y no había forma de leer el texto completo. Con los puntos suspensivos el usuario ve que hay más, y el `min-width:0` deja que la etiqueta encoja de verdad dentro del flex. */ text-overflow: ellipsis; } .nav-item > span, .nav-item .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-item:hover { color: var(--n900); border-left-color: var(--n300); } .nav-item.active { color: var(--a600); font-weight: 700; border-left-color: var(--a600); } .nav-item i { width: 15px; text-align: center; flex-shrink: 0; font-size: 0.86em; color: var(--n500); } .nav-item.active i { color: var(--a600); } .nav-item:hover i { color: var(--n700); } /* El bloque que forzaba TODO el texto del indice a blanco con `!important` se retira: existia porque la barra era una chapa oscura en los dos temas. Ahora la barra es la misma porcelana que la hoja, asi que el texto hereda la tinta y el tema oscuro se encarga solo. Dejar aquel `color: ... !important` habria pintado el indice de blanco sobre blanco. */ .sidebar .nav-item svg { fill: currentColor; } /* El rotulo que agrupa el indice: mono, versalitas, y una regla por encima. Sustituye a la division por color de fondo, que es lo que hacia que esto pareciera un menu y no un indice. */ .sidebar .nav-grupo { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--n500); padding: var(--e5) 18px var(--e2); margin-top: var(--e2); border-top: 1px solid var(--n200); } .sidebar .nav-grupo:first-child { border-top: none; margin-top: 0; padding-top: var(--e1); } .sidebar-footer { border-top: 1px solid var(--n200); padding: var(--e3) 0; } /* ─── MAIN ────────────────────────────────────────────────────── */ .app-main { flex: 1; min-width: 0; /* A07 (corrida S) — permite que el flex item ENCOJA bajo el min-content de su contenido (los flex items son min-width:auto por defecto); sin esto, un elemento ancho —p. ej. una grilla en Logística— empujaba .app-main más allá del viewport y causaba scroll horizontal de PÁGINA a 1280px. Las tablas ya scrollean DENTRO de su .table-responsive, así que esto no las afecta. */ margin-left: 216px; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--transition); } .app-main.expanded { margin-left: 60px; } /* ─── TOPBAR ─────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; /* V6: título a la izq, grupo derecho al extremo */ gap: var(--e4); padding: 0 var(--e6); height: 52px; background: var(--panel); border-bottom: 1px solid var(--n300); position: sticky; top: 0; z-index: 100; pointer-events: auto; } .btn-sidebar-toggle { background: none; border: none; font-size: 1.2rem; color: var(--n700); cursor: pointer; padding: 4px 8px; border-radius: var(--radio-sm); } .btn-sidebar-toggle:hover { background: var(--n200); } .topbar-title { font-weight: 700; color: var(--n900); font-size: var(--t-md); letter-spacing: -0.016em; flex: 1; } /* V6 (P1): el grupo derecho (usuario + rol + campana) SIEMPRE pegado a la derecha */ .topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; } .btn-notif, .notif-btn, .campana, button.bell, .topbar-right [id*="otif"] { flex-shrink: 0; } /* V8 FIX 1: la campana SIEMPRE es el último elemento del topbar (orden flex) */ .btn-notif, .notif-btn, .notif-wrapper, .bell-btn, button.campana { order: 999 !important; flex-shrink: 0 !important; } /* V95 — íconos de la barra superior: "← volver al portal" y "⎋ salir". Clase compartida por todos los módulos; visibles también en móvil (van fuera de .user-info-desktop); target táctil ≥40px. */ .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border: none; background: none; border-radius: 8px; color: var(--n700); cursor: pointer; text-decoration: none; font-size: 1.15rem; line-height: 1; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .topbar-icon-btn:hover { background: var(--n200); } .topbar-icon-btn:active { background: var(--n300); } .topbar-icon-btn.salir { color: var(--peligro); } .topbar-icon-btn.salir:hover { background: var(--peligro-piso); } /* A-2.1 — chip de identidad (Nombre Apellido · Cargo) en el topbar de todas las pantallas */ .topbar-ident { display: inline-flex; flex-direction: column; line-height: 1.15; min-width: 0; max-width: 46vw; overflow: hidden; } .topbar-ident .tb-nom { font-size: var(--t-sm); font-weight: 700; color: var(--n900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-ident .tb-car { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--n600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px){ .topbar-ident { max-width: 40vw; } .topbar-ident .tb-car { font-size: .66rem; } } .user-info { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--gris-medio); } /* ─── CONTENT AREA ───────────────────────────────────────────── */ .content-area { flex: 1; padding: var(--e6); } .content-section { display: none; } .content-section.active { display: block; } /* ─── CARDS ──────────────────────────────────────────────────── */ /* La BANDA. Ya no es una tarjeta flotando sobre un fondo: es una franja de hoja con una regla arriba y otra abajo. Sin sombra a proposito (un panel que no flota no proyecta) y con mas aire alrededor, porque lo que separa una banda de la siguiente es el hueco y la regla, no el relieve. La sombra queda reservada para lo que si flota: modal, menu, aviso. */ .card { background: var(--panel); border: 1px solid var(--n300); border-radius: var(--radio); box-shadow: none; margin-bottom: var(--e6); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--e4) var(--e5) var(--e3); background: transparent; color: var(--n900); border-bottom: 1px solid var(--n200); font-weight: 700; font-size: var(--t-base); letter-spacing: -0.014em; gap: var(--e3); } /* El rotulo de la tarjeta ya no es una banda oscura, asi que lo que va dentro tampoco puede seguir pintandose de blanco «porque el fondo era oscuro». */ .card-header h1, .card-header h2, .card-header h3, .card-header h4 { color: inherit; } .card-header .btn-icon { color: var(--n600); } .card-body { padding: var(--e5); } /* El icono que a veces acompana a un titulo de banda o de pantalla: separado de la palabra y en tinta de borde, para que se lea como una marca al margen y no como parte del texto. Iba pegado a la primera letra. */ .section-title > i:first-child, .subsection-title > i:first-child, .card-header > i:first-child { margin-right: 0.5em; color: var(--n500); font-size: 0.82em; } /* ─── LA BANDA DE CIFRAS ───────────────────────────────────────────────────────────────────── Es la pieza que abre casi todas las pantallas del sistema, y era el mosaico de cuatro tarjetas con un filo de color de 4 px arriba: cuatro cajas iguales, cada una con su sombra y su barra de color, que competian entre si y con el titulo. Aqui es UNA sola banda partida por reglas verticales de 1 px. La cifra manda (peso 800, tabular), el rotulo va debajo en mono, y el color de estado tine LA CIFRA -que es lo que significa algo- y nunca un filo decorativo. Sin sombra: no flota. Cualquier modulo puede usarla:
12Personal activo
… Y las clases viejas por modulo (.kpi-card, .pendiente-card…) se le enganchan encima. */ .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--panel); border: 1px solid var(--n300); border-radius: var(--radio); margin-bottom: var(--e6); overflow: hidden; } .cifra-celda { padding: var(--e4) var(--e5); border-left: 1px solid var(--n200); display: flex; flex-direction: column; gap: var(--e1); min-width: 0; } .cifra-celda:first-child { border-left: none; } .cifra-num { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--n900); font-variant-numeric: tabular-nums; } .cifra-lbl { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--n600); } .cifra-pie { font-size: var(--t-xs); color: var(--n600); } /* El estado tine la CIFRA, no un filo. */ .cifra-celda.mal .cifra-num { color: var(--peligro); } .cifra-celda.aviso .cifra-num { color: var(--aviso); } .cifra-celda.bien .cifra-num { color: var(--exito); } .cifra-celda.dinero .cifra-num { color: var(--n900); } @media (max-width: 700px) { .cifras { grid-template-columns: 1fr 1fr; } .cifra-celda:nth-child(odd) { border-left: none; } .cifra-celda:nth-child(n+3) { border-top: 1px solid var(--n200); } } /* ─── EL PARRAFO DE ENTRADA ────────────────────────────────────────────────────────────────── La frase que explica de que va la pantalla. No es un aviso: no lleva caja ni color. Se distingue por medida corta y por la tinta, como en cualquier documento bien puesto. */ .entradilla { max-width: 68ch; color: var(--n700); font-size: var(--t-base); line-height: 1.55; margin-bottom: var(--e6); text-wrap: pretty; } /* ─── SECTION HEADERS ────────────────────────────────────────── */ /* El titulo de pantalla lleva una REGLA DOBLE debajo: gruesa en tinta, fina en gris. Es la marca de cabecera de documento del sistema, y lo unico que se repite en las quince pantallas para decir «aqui empieza». */ .section-title { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.025em; margin-bottom: var(--e5); padding-bottom: var(--e3); border-bottom: 2px solid var(--n900); box-shadow: 0 3px 0 -2px var(--n300); } .section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e6); flex-wrap: wrap; } .subsection-title { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin: var(--e8) 0 var(--e3); padding-bottom: var(--e2); border-bottom: 1px solid var(--n200); color: var(--n600); } /* ─── TABLAS ─────────────────────────────────────────────────── */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; width: 100%; } /* Suelo para CUALQUIER tabla del sistema, tenga clase o no. `.tabla` lo refina más abajo. */ table th, table td { padding: 10px 14px; } /* excepción: las tablas que se usan para MAQUETAR (celdas de una sola línea dentro de un aviso o de una ficha) no quieren ese aire; se marcan y se respetan. */ table.sin-aire th, table.sin-aire td, .sin-aire table th, .sin-aire table td { padding: 2px 4px; } .tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 500px; } /* ══ EL AIRE DE LA CELDA — 24-ago ═══════════════════════════════════════════════════════════ el auditor: «el texto de las celdas empieza justo en el borde, sin aire», visto en Administrador › SharePoint, «y es el mismo problema de los botones aplicado a las tablas». Estaba en 9/12; se sube a 11/16, que es el mismo aire lateral que tiene un botón (16). Una tabla densa se lee mejor con margen que con filas pegadas. ⚠️ Y LA REGLA BASE DE MÁS ABAJO cubre las tablas que NO usan `.tabla` —`sk-table`, `rq-table`, `items-table`, `inf-t`, `cx-tabla`, `cfg-table` y la que va sin clase—: 24 tablas del sistema que se pintaban con el relleno POR DEFECTO DEL NAVEGADOR, que es 1 px. Ese es el «texto contra el borde» de verdad. */ .tabla th { /* La cabecera ya no es una banda de color: es un rotulo mono en versalitas colgado de una regla en tinta. Es la misma pieza que titula las bandas y los campos, y es lo que hace que una tabla de este sistema se reconozca a distancia. */ background: transparent; color: var(--n600); padding: var(--e2) var(--e4) 7px; text-align: left; font-family: var(--mono); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1.5px solid var(--n800); cursor: pointer; user-select: none; white-space: nowrap; position: sticky; /* la cabecera se queda al desplazar una tabla larga */ top: 0; z-index: 1; } .tabla th:hover { color: var(--n900); } .tabla td { padding: 8px var(--e4); border-bottom: 1px solid var(--n200); vertical-align: middle; color: var(--n800); } /* Se retira el rayado de cebra: con el aire de celda que ya tiene la tabla, la banda alterna solo mete ruido, y en oscuro se convierte en un damero. La fila se distingue por su linea y, cuando importa, por el paso del raton. */ .tabla tr:hover td { background: var(--a100); transition: background var(--t-rapida); } /* La primera columna es casi siempre el identificador. Va en mono y en tinta plena: es lo que el usuario busca con el dedo cuando recorre cien filas. Una tabla que no empiece por un identificador se marca con `.sin-clave` y vuelve a la sans. */ .tabla td:first-child { font-family: var(--mono); font-size: 0.94em; color: var(--n900); letter-spacing: -0.02em; } /* …salvo la fila que ocupa toda la tabla, que NO es un identificador sino una frase: «Sin cotizaciones registradas» salia en monoespaciada, como si fuera un codigo. */ .tabla td[colspan]:first-child { font-family: var(--sans); font-size: inherit; letter-spacing: normal; color: var(--n600); } .tabla.sin-clave td:first-child { font-family: var(--sans); font-size: inherit; letter-spacing: 0; } .tabla tr:last-child td { border-bottom: none; } .table-toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; } /* ─── ESTÁNDAR VISUAL P01 — contenedor de tabla con bordes redondeados ────────── */ /* Envuelve una para que la cabecera navy respete el radio. */ .tabla-card { border: 1px solid var(--n300); border-radius: var(--radio); overflow: hidden; /* recorta las esquinas de la cabecera */ background: var(--panel); box-shadow: none; padding: 0 var(--e2) var(--e2); } .tabla-card > .table-responsive, .tabla-card > .tabla { border-radius: inherit; } .tabla-card .tabla { min-width: 0; } .tabla-card .tabla th { border-bottom: none; } /* Celdas numéricas: a la derecha con cifras tabulares (nada de números pegados). */ .tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tabla td.center, .tabla th.center { text-align: center; } /* Celda vacía: guion medio gris y centrado (nunca vacío ni "null"). */ .celda-vacia { color: var(--n500); } .tabla td .celda-vacia { display: inline-block; } /* Nombre largo truncado con tooltip (usar junto a title="…"). */ .txt-trunc { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Lista vertical de personas dentro de una celda (nunca muro de texto corrido). */ .lista-personas { margin: 0; padding-left: 16px; } .lista-personas li { line-height: 1.4; } /* Estado vacío de tabla: mensaje centrado, no cabecera sola. */ .tabla-vacia { text-align: center; color: var(--n600); padding: var(--e8) var(--e3); } /* ── PUNTO 8 · EX TRABAJADOR (personal.activo=FALSE) ──────────────────────────── El nombre se muestra IGUAL que el de un activo; sólo se le añade este chip GRIS (neutro: no es un error ni una alerta). Lo emite window.integrisNombrePersona(). */ .chip-baja { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px; background: var(--n200); color: var(--n700); border: 1px solid var(--n300); font-size: 0.70rem; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; } /* La fila de un ex trabajador se atenúa un punto, sin perder legibilidad. */ .tabla tr.fila-baja td { color: var(--n600); } /* ─── FORMULARIOS ────────────────────────────────────────────── */ .form-group { margin-bottom: var(--e5); } /* La etiqueta del campo es la MISMA pieza que el rotulo de la tabla y el de la banda: mono, versalitas, tinta media. Un sistema se reconoce por repetir una pieza, no por tener muchas. */ .form-group label { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; color: var(--n600); } .form-control { width: 100%; padding: 8px 11px; border: 1px solid var(--n400); border-radius: var(--radio); font-family: var(--sans); font-size: var(--t-base); color: var(--n900); background: var(--panel); transition: border-color var(--t-rapida), box-shadow var(--t-rapida); } /* 16px de fuente en el movil: por debajo de eso Safari hace zoom al enfocar el campo y descoloca la pantalla entera. En escritorio se queda en el cuerpo normal. */ @media (max-width: 768px) { .form-control { font-size: 16px; } } .form-control:focus { outline: none; border-color: var(--a600); box-shadow: var(--foco); } /* El marcador de posicion tambien tiene que llegar a 4.5:1. El `var(--n600)` de antes daba 2.3:1 sobre blanco: se leia como un campo deshabilitado, no como una pista. */ .form-control::placeholder { color: var(--n600); opacity: 1; } .form-control:disabled, .form-control[readonly] { background: var(--acero-hueco); color: var(--n600); cursor: not-allowed; } /* Un campo en error se marca por BORDE, no tinendo el texto de rojo: el rojo del texto se confunde con el propio dato cuando el dato es una cifra. */ .form-control.error, .form-control[aria-invalid="true"] { border-color: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-linea); } select.form-control { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--n600) 50%), linear-gradient(135deg, var(--n600) 50%, transparent 50%); background-position: calc(100% - 16px) 51%, calc(100% - 11px) 51%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group-check { display: flex; align-items: center; } .req { color: var(--rojo); } .input-row { display: flex; gap: 10px; align-items: center; } .input-group { display: flex; } .input-group .form-control { border-radius: var(--radio-sm) 0 0 var(--radio-sm); } .input-group .btn-toggle-pin { padding: 9px 12px; border: 1px solid var(--gris-borde); border-left: none; border-radius: 0 var(--radio-sm) var(--radio-sm) 0; background: var(--n200); cursor: pointer; color: var(--n600); } /* ─── EL OJO DEL PIN, DENTRO DEL CAMPO ──────────────────────────────────────────────────────── Se caía a una línea nueva y era lo PRIMERO que veía todo el mundo al entrar. La causa, medida en el navegador: `.form-group > .input-group` lleva `flex-wrap: wrap` (línea ~508). El campo es `width:100%`, ocupa el ancho entero de la fila, y el botón de 40 px no cabe detrás: al haber `wrap`, salta abajo. El CSS de arriba (botón PEGADO al lado, estilo «grupo de entrada») nunca podía funcionar dentro de un contenedor que envuelve. Se resuelve sacando el botón del flujo: el ojo va DENTRO del campo, en absoluta. ⚠️ Clase propia (.input-clave) a propósito: `.input-group` es genérica y la usan otras pantallas: cambiar su comportamiento aquí las movería a todas sin querer. */ .input-group.input-clave { position: relative; /* el marco contra el que se posiciona el ojo */ display: block; /* fuera del flex: ya no hay nada que envolver */ } .input-group.input-clave .form-control { width: 100%; padding-right: 42px; /* el hueco del ojo: el PIN no se le monta encima */ border-radius: var(--radio-sm); /* vuelve a ser un campo entero, no medio grupo */ } .input-group.input-clave .btn-toggle-pin { position: absolute; top: 50%; right: 1px; /* 1px = respeta el borde del campo */ transform: translateY(-50%); /* centrado vertical REAL, sea cual sea el alto */ height: calc(100% - 2px); width: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; /* dentro del campo no pinta un segundo marco */ border-radius: 0 var(--radio-sm) var(--radio-sm) 0; background: transparent; color: var(--gris-medio); cursor: pointer; z-index: 2; /* por encima del campo, para que reciba el clic */ } .input-group.input-clave .btn-toggle-pin:hover { color: var(--azul-medio); } .input-group.input-clave .btn-toggle-pin:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: -2px; } /* ─── CHECKBOXES ─────────────────────────────────────────────── */ .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9rem; } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--a600); } input[type="radio"], input[type="range"] { accent-color: var(--a600); } /* ─── BOTONES ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: none; /* LOTE M · 8 — 8 px, no 4. El estándar de los botones estaba en `--radio-sm`, que es el radio de los CAMPOS DE TEXTO: 4 px se lee como una esquina recta, y eso es lo que el auditor venía viendo. Se cambia AQUÍ, en la definición del botón, y no con una regla al final del fichero: intentarlo por abajo obliga a pelear con la especificidad de admin.css y responsive.css, que cargan después. Se cambia donde se declara y se acabó la discusión. */ /* PASTILLA COMPLETA. Es la decision de forma que mas distingue a este sistema: lo que se PULSA es redondo del todo, lo que se LEE es casi recto (6 px). Puesto uno al lado del otro, un boton y un campo ya no se parecen, y eso se nota antes que el color. */ border-radius: var(--radio-pastilla); font-family: var(--font); font-size: var(--t-sm); font-weight: 700; cursor: pointer; transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida), transform var(--t-rapida); text-decoration: none; white-space: nowrap; letter-spacing: 0; } /* Un boton apagado se apaga con COLOR, no con opacidad. Con `opacity` el grafito quedaba en 3.62:1 contra su propia letra —y el primero que ve cualquiera es el «Ingresar» del acceso, apagado hasta que se teclea el DNI— y ademas se difuminaba el anillo de foco, que es justo lo que nunca debe perderse. */ .btn:disabled, .cd-btn:disabled { background: var(--n200); color: var(--n700); border-color: var(--n300); box-shadow: none; cursor: not-allowed; } .btn:disabled:active, .cd-btn:disabled:active { transform: none; } /* EL ACENTO ES LA ACCION. El boton principal va carmin macizo. La regla que lo acompana no esta escrita en CSS y hay que sostenerla al montar cada pantalla: UN solo `.btn-primary` por pantalla. En cuanto hay dos, ninguno de los dos significa nada. */ .btn-primary { background: var(--a600); color: var(--sobre-acento); } .btn-primary:hover:not(:disabled) { background: var(--a700); } .btn-secondary { background: transparent; color: var(--n800); border: 1px solid var(--n400); } .btn-secondary:hover:not(:disabled) { background: var(--n100); border-color: var(--n600); color: var(--n900); } .btn-danger { background: var(--peligro); color: var(--sobre-peligro); } .btn-danger:hover:not(:disabled) { background: var(--peligro-alto); } /* `.btn-success` NO es un segundo boton principal. Decia «Guardar» en verde mientras `.btn-primary` decia «Guardar» en grafito: dos primarios en la misma pantalla y ninguno de los dos significando nada. El de guardar es el grafito. La clase se queda viva —la nombran 24 sitios— apuntando a la misma receta. */ .btn-success { background: var(--a600); color: var(--sobre-acento); } .btn-success:hover:not(:disabled) { background: var(--a700); } .btn-outline { background: transparent; color: var(--a600); border: 1px solid var(--a400); } .btn-outline:hover:not(:disabled) { background: var(--a100); border-color: var(--a600); } .btn-text { background: none; border: none; color: var(--a600); cursor: pointer; font-size: var(--t-sm); } .btn-text:hover { text-decoration: underline; text-underline-offset: 2px; } .btn-icon { background: none; border: none; cursor: pointer; color: var(--n600); font-size: 1rem; padding: 6px; border-radius: var(--radio-pastilla); } .btn-icon:hover { color: var(--n900); background: var(--n200); } /* Un boton que se pulsa tiene que ACUSAR el golpe. 0.97 es suficiente: se nota con el dedo y no llama la atencion a la quincuagesima vez. Solo transform, que no repinta nada. */ .btn:active:not(:disabled), .cd-btn:active:not(:disabled) { transform: scale(0.97); } .btn-block { width: 100%; justify-content: center; } /* ══ LA RECETA DEL BOTÓN PEQUEÑO — 24-ago-2026 ═══════════════════════════════════════════════ ⚠️ AQUÍ ESTABA EL BOTÓN APRETADO DE TODO EL SISTEMA. Medido con el navegador, no leído: de los 1.106 botones visibles del sistema, **635 llevaban `.btn-sm`** y todos salían con `padding: 5px 10px`. el auditor: «el texto está pegado al borde, el botón le aprieta al texto y se ve minúsculo y descuidado», y «en la misma pantalla hay botones que están bien» — los que usan `.btn` a secas, que es 9px 16px. O sea: el sistema ya sabía hacerlo bien, y esta línea era la que lo hacía mal, en un solo sitio, 635 veces. EL CRITERIO, que es el que pidió: no que todos midan igual, sino que **la proporción sea la misma**. `.btn` es 9/16 (ratio 1:1,8). El pequeño mantiene ese ratio a escala 0,8: **7/14**. Es un 40 % más de aire que antes y sigue leyéndose como el hermano pequeño de `.btn`, no como otro botón de otro sistema. Y `min-height`: había botones de 21 px de alto. Con 30 el dedo lo encuentra y el ojo lo lee. */ .btn-sm { padding: 7px 14px; font-size: 0.8rem; min-height: 30px; gap: 5px; } /* El botón NORMAL tiene su suelo también: un `.btn` con solo un icono dentro se quedaba en 28 px. No cambia el aire —9/16 es el que el auditor dio por bueno—, solo pone el mínimo. */ .btn { min-height: 36px; } /* ⚠️ Y LAS EXCEPCIONES QUE PISABAN LA RECETA, TRAÍDAS AQUÍ. Cada pantalla que quería sus botones de acciones más compactos se escribía su propio `padding` en su `