/* Control de Vacaciones — hoja de estilo propia. Escrita a mano: no hay framework, no hay npm y no hay paso de build. Lo que se ve aquí es lo que se sirve. OJO: el CSP lleva «style-src 'self'», que también gobierna style-src-attr, así que un atributo style="…" en el markup queda bloqueado. Todo va en clases. --------------------------------------------------------------------------- LA PALETA ES LA DEL GRUPO TÉCNICA DIELÉCTRICA --------------------------------------------------------------------------- Tomada de `SistemaGTD.Web`, que es de la misma empresa, y de su `docs/brand/brand-guidelines.md`, que es la guía de la empresa y la autoridad. Azul marino la estructura, naranja el acento — nunca al revés: esta aplicación se mira ocho horas al día. **Los dos naranjas no son dos tonos, son dos contratos.** Es lo único de esta hoja que se rompe callado: --marca #fc5000 la marca. Superficies que NO llevan texto encima. Blanco sobre este color da 3.15:1 y REPRUEBA WCAG AA. --marca-tinta #a33f0f el que sí lleva etiqueta. 6.41:1 sobre blanco y 5.88:1 sobre el fondo de página. No se «arregla» un control deslavado igualando el color del logo. Esa es la equivocación que esta nota existe para evitar, y viene copiada del encabezado de la hoja de la otra aplicación junto con los colores. **Son dos y no tres, y ahí nos separamos de la otra aplicación a propósito.** Ella guarda un naranja intermedio (#c74e14, 4.64:1) para lo que lleva etiqueta, y le funciona porque sus superficies son blanco puro. Aquí el fondo de página es #f4f5f7, donde ese mismo color da 4.25:1 y no pasa. Un token cuyo contrato es «depende de qué haya debajo» es el que se va a usar mal, así que no existe. Las razones están medidas, no juzgadas: `HojaDeEstiloTests` calcula cada par que lleva texto en los dos temas y falla si alguno baja de 4.5:1. --------------------------------------------------------------------------- EL TEMA SON TRES ESTADOS, NO DOS --------------------------------------------------------------------------- «Automático» no es lo mismo que «claro»: sigue a prefers-color-scheme. Por eso los colores no se pueden declarar «claro en :root, oscuro en la media query» a secas — haría falta que la clase .tema-claro volviera a escribir toda la paleta para poder ganarle a la media query. El orden que sí funciona, y es el de abajo: 1. :root la paleta clara, y el valor por omisión 2. @media (prefers-color-scheme:dark) la oscura, pero solo si NO hay .tema-claro 3. :root.tema-oscuro la oscura, gane lo que gane el sistema Así «automático» no lleva clase ninguna, y cada una de las otras dos escribe la paleta una sola vez. La clase la pone el servidor en , antes de que se escriba la respuesta: ver Presentacion/Tema.cs, y por qué no es un script que lee localStorage después de pintar. **Un color escrito una vez en lugar de tres no falla: convierte «automático» en «claro» para todo el que nunca tocó el interruptor**, que son casi todos. `HojaDeEstiloTests` lo custodia. */ :root { color-scheme: light; /* Neutros */ --fondo: #f4f5f7; --fondo-elevado: #ffffff; --fondo-hundido: #eef0f3; --texto: #1b2430; --texto-tenue: #5c6673; --borde: #d6dce4; /* Dónde se escribe. NO es --fondo, y esa era la falla: en /contactos/editar el formulario va directo sobre el fondo de la página, así que la caja y la página eran exactamente el mismo #f4f5f7 y solo un borde de #d6dce4 decía dónde empezaba una. Un solo color de relleno no alcanza, porque un campo aparece sobre DOS superficies —la página y lo elevado, que son la tarjeta y la barra— y un relleno que contraste con las dos tendría que salirse del rango de ambas. Así que se reparten el trabajo: sobre la página lo dice el relleno (blanco sobre #f4f5f7), y sobre lo elevado lo dice el borde, que por eso vale 3.04:1 contra el blanco. Es el mínimo de la 1.4.11 para el contorno de un control, medido. No es el borde decorativo --borde; es el que hace que el campo exista. */ --campo: #ffffff; --campo-borde: #8a95a3; /* Lo interactivo: enlaces, foco, la entrada activa del riel, el botón principal. Azul marino, que es la estructura de la marca. NO naranja: el naranja es el acento y esta aplicación se mira ocho horas al día. */ --acento: #1e2d3b; --acento-tenue: #e6eaf0; --sobre-acento: #ffffff; /* El armazón: el riel y el encabezado. */ --estructura: #1e2d3b; --estructura-honda: #1b2430; --sobre-marca: #ffffff; --sobre-marca-tenue: #b8c4d4; /* Los tres naranjas, y sus contratos. Ver el encabezado. */ --marca: #fc5000; --marca-tinta: #a33f0f; --destacado: #edcd1f; --alerta: #b3261e; /* La sombra que dice «aquí sigue la tabla». Translúcida y no un gris fijo, para que sirva encima de --fondo y de --fondo-elevado igual. */ --sombra-scroll: rgba(27, 36, 48, 0.28); --tipo-titular: "Poppins", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --radio-chico: 3px; --radio: 5px; --espacio: 1rem; --riel: 15rem; --riel-angosto: 3.5rem; } @media (prefers-color-scheme: dark) { :root:not(.tema-claro) { color-scheme: dark; /* Derivada del azul marino de la marca, no de grises: #1e2d3b es la superficie elevada tal cual, así que el riel es literalmente el mismo color en los dos temas. */ --fondo: #151c25; --fondo-elevado: #1e2d3b; --fondo-hundido: #10161d; --texto: #e8ecf2; --texto-tenue: #a2b1c2; --borde: #33455a; /* En oscuro sube en vez de bajar: #26374a es más claro que la página (#151c25) y que la tarjeta (#1e2d3b), así que el relleno se distingue de las dos. El borde vale 4.4:1 contra la página y 3.6:1 contra la tarjeta. */ --campo: #26374a; --campo-borde: #6b83a0; /* El marino no se ve sobre el marino: lo interactivo sube a un azul claro. */ --acento: #8ab4e0; --acento-tenue: #223247; --sobre-acento: #10161d; --estructura: #1b2430; --estructura-honda: #10161d; --sobre-marca: #ffffff; --sobre-marca-tenue: #b8c4d4; /* El naranja de superficie es el mismo; los dos que llevan etiqueta suben en vez de bajar, que es la trampa al revés. */ --marca: #fc5000; --marca-tinta: #ff8a52; --destacado: #edcd1f; --sombra-scroll: rgba(0, 0, 0, 0.55); --alerta: #f08a80; } } :root.tema-oscuro { color-scheme: dark; /* Derivada del azul marino de la marca, no de grises: #1e2d3b es la superficie elevada tal cual, así que el riel es literalmente el mismo color en los dos temas. */ --fondo: #151c25; --fondo-elevado: #1e2d3b; --fondo-hundido: #10161d; --texto: #e8ecf2; --texto-tenue: #a2b1c2; --borde: #33455a; --campo: #26374a; --campo-borde: #6b83a0; /* El marino no se ve sobre el marino: lo interactivo sube a un azul claro. */ --acento: #8ab4e0; --acento-tenue: #223247; --sobre-acento: #10161d; --estructura: #1b2430; --estructura-honda: #10161d; --sobre-marca: #ffffff; --sobre-marca-tenue: #b8c4d4; /* El naranja de superficie es el mismo; los dos que llevan etiqueta suben en vez de bajar, que es la trampa al revés. */ --marca: #fc5000; --marca-tinta: #ff8a52; --destacado: #edcd1f; --sombra-scroll: rgba(0, 0, 0, 0.55); --alerta: #f08a80; } /* --- La tipografía: DOS pilas, y la división es a propósito ----------------- Poppins es la tipografía de la empresa y va vendida, no traída de un CDN: tres woff2 de 24 KB en total bajo licencia SIL OFL, en wwwroot/lib/poppins/ con su VERSION.txt. El CSP lleva «font-src 'self'» y esto no le pide ninguna excepción -- si algo pidiera una, sería la señal de que se bajó de un CDN por error. --tipo-titular lo que se OJEA: títulos, la marca, el riel. (la del body) lo que se MIRA FIJO: datos de tabla, controles, etiquetas. Se queda en la pila del sistema, porque esta aplicación es una tabla que se lee ocho horas al día y Segoe UI es la cara que Windows afinó justo para eso. La guía de la empresa pide la misma división con las mismas palabras. Solo pesos de titular: no hay 400 ni cursiva. Pedirle a CSS un peso que no está aquí hace que el navegador lo finja, que se ve peor que no tenerlo. */ @font-face { font-family: "Poppins"; src: url("../lib/poppins/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../lib/poppins/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../lib/poppins/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; } h1, h2, h3 { font-family: var(--tipo-titular); } a { color: var(--acento); } /* Marino y texto son casi el mismo color -- 14:1 los dos contra el fondo --, así que en una tabla de 312 nombres el enlace se distingue por el subrayado y por esto. Es el naranja de la marca, y es lo mismo que hace SistemaGTD. */ a:hover, a:focus-visible { color: var(--marca-tinta); } /* Primer elemento enfocable del documento. Claudia va a capturar con el teclado durante horas; llegar al contenido sin tabular por trece entradas del riel es la diferencia entre un atajo y una molestia. */ .salto { position: absolute; left: -9999px; } /* Visible solo para un lector de pantalla. La etiqueta del buscador vive aquí: la caja lleva un placeholder, que no es una etiqueta. */ .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .salto:focus { position: static; display: inline-block; margin: 0.5rem; padding: 0.5rem 0.75rem; background: var(--acento-tenue); border-radius: var(--radio); } /* --- El armazón: riel a la izquierda, todo lo demás a la derecha ------------ */ .armazon { display: grid; grid-template-columns: var(--riel) minmax(0, 1fr); min-height: 100vh; } /* El riel encogido a una tira de iconos, guardado por usuario como el tema. Recupera 184px de los 240 que el riel se lleva de cada pantalla -- que en la hoja anual son casi dos meses de columnas más. Ver Presentacion/Riel.cs para por qué son dos estados y no tres, y por qué la clase la pone el servidor. */ /* ⚠ SOLO EN DOS COLUMNAS, Y ESO NO ES ORDEN. Encoger el riel es una idea de la disposición de dos columnas. Por debajo de 56rem el riel ya se acostó solo, y ahí estas reglas hacían dos cosas malas a la vez: `.armazon.riel-angosto` gana por especificidad a `.armazon` de la media query -- una @media no agrega especificidad --, así que el armazón se quedaba en DOS COLUMNAS con un riel de 3.5rem, y dentro de esa tira de 56px iban las trece áreas puestas en fila. El menú desaparecía. Lo reportó el usuario con estas palabras: «solo esconde el menú y no puedo ver nada». `not all and (max-width: 56rem)` es el complemento exacto de la media query de abajo -- sin hueco en el límite, que es lo que dejaría un `min-width: 56.01rem`. La preferencia se sigue guardando: al volver a una ventana ancha, vuelve. */ @media not all and (max-width: 56rem) { .armazon.riel-angosto { grid-template-columns: var(--riel-angosto) minmax(0, 1fr); } /* Lo único que se esconde es la palabra. El icono, el enlace y su area de clic se quedan; el nombre lo lleva el aria-label, porque display:none saca al del arbol de accesibilidad y el enlace se quedaría sin nombre. */ .riel-angosto .areas-etiqueta, .riel-angosto .marca-texto { display: none; } .riel-angosto .riel { padding-inline: 0.5rem; } .riel-angosto .areas a, .riel-angosto .riel-encoger button { justify-content: center; gap: 0; } .riel-angosto .marca { align-items: center; } } /* --- Las pantallas que se atan a la ventana -------------------------------- Una pantalla larga —empleados, contactos, un reporte, la hoja anual— deja de desplazarse: el cromo de arriba se queda quieto y la caja de la tabla ocupa exactamente lo que sobra, con sus dos barras de desplazamiento pegadas al borde de la ventana. ES OPT-IN Y LO PIDE LA PÁGINA: `PaginaBase.AltoFijo`. Todo lo demás del sitio se desplaza como siempre. POR QUÉ `tabla-alta` SOLA NO ALCANZABA. Recortar a 70vh dice cuánto mide la caja y no dice DÓNDE EMPIEZA. Medido en la pantalla, a 1366×768: /empleados la caja va de 264 a 802 · el borde está en 768 /contactos de 252 a 790 /reportes/anual de 258 a 796 Las tres terminan abajo del doblez, así que su barra horizontal —la que dice que «Saldo» y «Estado» siguen a la derecha— queda fuera de la pantalla. Existe, funciona, y nadie la ve nunca. Eso es R1, R3 y R4 del inventario de la tarea 01, los tres el mismo defecto. La tarea 04d ya había diagnosticado esta forma de error —«lo que hay arriba y lo que mide el panel son PÍXELES, no una fracción de la ventana»— y la resolvió restando una constante medida a mano. Aquí se deja de adivinar el número: un contenedor flex lo mide solo, que es exactamente para lo que existe. `min-height: 0` EN CADA ESLABÓN NO ES ADORNO. Sin él un hijo flex no baja de su min-content, y el min-content de una tabla de 312 renglones es la tabla entera: la cadena se rompe en silencio y la página vuelve a desplazarse. */ .armazon.alto-fijo { height: 100vh; height: 100dvh; } /* Trece entradas y un pie de riel. A 768 ya no le sobra tanto. */ .alto-fijo .riel { overflow-y: auto; } .alto-fijo .columna { min-height: 0; } .alto-fijo .contenido { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; } /* Lo único que crece es la caja de la tabla; lo de arriba mide lo que mide. Las 8rem son el piso: con el desglose abierto la tabla cede, pero no hasta desaparecer. */ .alto-fijo .contenido > .tabla-alta { flex: 1 1 auto; min-height: 8rem; max-height: none; } /* La hoja anual mete su caja dentro de una
—ahí van el encabezado que se imprime y el enlace de «Saltar la hoja»—, así que la sección es un eslabón más de la cadena y necesita las mismas tres declaraciones. */ .alto-fijo .hoja-marco { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .alto-fijo .hoja-marco > .tabla-alta { flex: 1 1 auto; min-height: 8rem; max-height: none; } /* El desglose es hermano de la tabla, no vive dentro de ella, y EL QUE CEDE ES LA HOJA. Eso es `flex-shrink: 0` aquí y `1` allá, y no es un detalle: el reparto de flex pesa el encogimiento por el tamaño base, y la hoja mide miles de píxeles contra los ciento y pico del panel, así que con las dos encogiendo la hoja se queda casi entera y el panel se aplasta a diecisiete píxeles. Medido, así salió. Y el panel es justo lo que se acaba de pedir. El tope es una fracción de la CAJA, no de la ventana, que es la diferencia con el número que la tarea 04d tuvo que corregir: lo que hay arriba ya está descontado cuando esto se resuelve. Un desglose más largo que eso se desplaza por dentro. */ .alto-fijo .desglose-envuelto { flex: 0 0 auto; max-height: 55%; overflow-y: auto; } /* Azul marino, que es la estructura de la marca. En los dos temas es el mismo color: en oscuro --fondo-elevado ya ES #1e2d3b, así que el riel no cambia de tono al cambiar de tema y la aplicación se reconoce igual en los dos. */ .riel { display: flex; flex-direction: column; gap: 0.75rem; padding: var(--espacio) 0.75rem; background: var(--estructura); border-right: 1px solid var(--estructura-honda); font-family: var(--tipo-titular); } /* La marca del encabezado suelto -- acceso, cambiar contraseña, la página de error --, que no lleva riel. */ .marca { padding: 0 0.5rem; color: var(--texto); font-family: var(--tipo-titular); font-weight: 600; text-decoration: none; } /* La del riel: la teja arriba y dos renglones de texto debajo. En fila no cabe, y se midió en vez de suponerlo: el riel son 240px, de los cuales la teja se lleva 40 y los rellenos otros 47, y en los 153 que quedan «Control de Vacaciones» en Poppins 600 se corta -- salía «Control de Vacaci…». Apilado, el texto dispone de los 192px completos y los dos renglones entran. Y el espacio vertical lo hay de sobra: el riel tiene trece entradas y termina a media pantalla (hallazgo D10). */ .riel .marca { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.25rem 0.4rem 0.5rem; color: var(--sobre-marca); } /* ⚠ Ni padding ni background aquí, y es un arreglo y no un olvido: la teja blanca y su margen de 2px viven DENTRO del PNG, definidos de una vez en el build-assets.ps1 de SistemaGTD, donde el resultado se puede mirar. Esta regla pone tamaño y esquina y no debe poner nada más -- con box-sizing: border-box, un padding aquí encogería el dibujo entero dentro de la caja. */ .marca-teja { flex: none; width: 40px; height: 40px; border-radius: var(--radio); } .marca-texto { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; } /* El nombre de la empresa arriba y el del producto abajo. Es el orden que usa la otra aplicación, y el que contesta «¿de quién es esto?» antes que «¿qué es?». */ .marca-empresa { overflow: hidden; color: var(--sobre-marca-tenue); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; } .marca-producto { overflow: hidden; font-size: 0.95rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .areas { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0; list-style: none; } .areas a { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-left: 3px solid transparent; border-radius: var(--radio); color: var(--sobre-marca); text-decoration: none; white-space: nowrap; } /* Decorativo mientras la etiqueta esté al lado -- lleva aria-hidden en el markup. Cuando la tarea 04 colapse el riel, la etiqueta se esconde y el ícono se queda solo: ahí deja de ser decoración, y lo que lo nombra es el título del enlace. */ .areas a .bi { flex: none; width: 1.15rem; font-size: 1.05rem; text-align: center; } .areas-etiqueta { overflow: hidden; text-overflow: ellipsis; } /* Un lavado translúcido y no un color mezclado, para que siga funcionando si el fondo del riel cambia alguna vez. */ .areas a:hover { background: rgba(255, 255, 255, 0.08); } /* El amarillo de la marca marca la sección activa. Es una regla, no texto: el texto encima sigue siendo blanco sobre el marino. */ .areas a.actual { background: rgba(255, 255, 255, 0.10); border-left-color: var(--destacado); color: var(--sobre-marca); font-weight: 600; } /* El botón de encoger. `margin-top: auto` lo pega abajo: el riel es una columna flex y el hueco vacío de su mitad inferior (hallazgo D10) es justo lo que lo empuja hasta el pie. */ .riel-encoger { margin-top: auto; padding-top: var(--espacio); } .riel-encoger button { display: flex; width: 100%; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border: 0; border-radius: var(--radio); background: none; color: var(--sobre-marca-tenue); font: inherit; cursor: pointer; } .riel-encoger button:hover { background: rgba(255, 255, 255, 0.08); color: var(--sobre-marca); } /* Las áreas que todavía no existen. Se listan a propósito —un riel de dos entradas parece una aplicación rota, no una a medio construir— y se ven apagadas para que nadie las confunda con las que sí llevan a algo. */ .areas a.pendiente { color: var(--sobre-marca-tenue); } .columna { display: flex; flex-direction: column; min-width: 0; } .barra { display: flex; align-items: center; gap: var(--espacio); padding: 0.6rem var(--espacio); background: var(--fondo-elevado); border-bottom: 1px solid var(--borde); } .contenido { padding: 0.75rem var(--espacio) calc(var(--espacio) * 1.25); } /* El título de la pantalla, y lo que va en su renglón. El h1 traía las medidas del navegador —2em de cuerpo y dos márgenes de 0.67em— encima de una miga que ya dice dónde está uno. En /contactos eso eran 40px de nada arriba del título y 20 abajo, en una pantalla cuyo trabajo es enseñar 307 renglones. Es lo primero que la clienta señaló al ver la aplicación corriendo. `.encabezado-pagina` es el renglón: el título a la izquierda y a la derecha lo que se hace desde aquí —«Nuevo usuario», anterior/siguiente—. Antes eso era un bloque debajo del título y costaba otros ~50px en cada pantalla que lo tuviera. */ .contenido h1 { margin: 0 0 0.5rem; font-size: 1.45rem; line-height: 1.25; } .encabezado-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem var(--espacio); margin-bottom: 0.5rem; } /* Adentro del renglón el que separa es el renglón. Va después de `.contenido h1` a propósito: misma especificidad, y aquí gana la de abajo. */ .encabezado-pagina > h1 { margin: 0; } /* Adentro del renglón dejan de ser bloques con su propio margen: el renglón ya separa. */ .encabezado-pagina > .acciones, .encabezado-pagina > .recorrido { margin: 0; } /* Una pantalla sin shell: entrar, cambiar contraseña. */ .contenido-suelto { max-width: 70rem; margin: 0 auto; padding: calc(var(--espacio) * 1.5) var(--espacio); } .encabezado { display: flex; align-items: center; gap: var(--espacio); padding: 0.75rem var(--espacio); background: var(--fondo-elevado); border-bottom: 1px solid var(--borde); } /* --- Migas ---------------------------------------------------------------- */ .migas { padding: 0.45rem var(--espacio) 0; color: var(--texto-tenue); font-size: 0.92em; } .migas ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .migas li::after { content: "›"; margin-left: 0.4rem; color: var(--borde); } .migas li:last-child::after { content: ""; } .migas li:last-child { color: var(--texto); font-weight: 600; } /* --- Buscador global ------------------------------------------------------ */ .buscador { position: relative; flex: 1 1 auto; max-width: 26rem; margin: 0; } .buscador input { width: 100%; box-sizing: border-box; padding: 0.4rem 0.6rem; border: 1px solid var(--campo-borde); border-radius: var(--radio); background: var(--campo); color: var(--texto); font: inherit; } .buscador input:focus { border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 1px; } .resultados:not(:empty) { position: absolute; z-index: 20; right: 0; left: 0; margin-top: 0.25rem; padding: 0.25rem; background: var(--fondo-elevado); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 6px 20px rgb(0 0 0 / 18%); } .resultados ul { margin: 0; padding: 0; list-style: none; } .resultados a { display: block; padding: 0.35rem 0.5rem; border-radius: var(--radio); color: var(--texto); text-decoration: none; } .resultados a:hover, .resultados a:focus { background: var(--acento-tenue); outline: none; } .resultados .detalle, .resultados .vacio { display: block; color: var(--texto-tenue); font-size: 0.88em; } .resultados .vacio { padding: 0.35rem 0.5rem; } .atajo { color: var(--texto-tenue); font-size: 0.85em; white-space: nowrap; } /* --- Tema y sesión -------------------------------------------------------- */ .sesion { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } .quien { color: var(--texto-tenue); white-space: nowrap; } .salida { margin: 0; } .tema { display: flex; gap: 0.15rem; margin: 0; padding: 0.15rem; background: var(--fondo-hundido); border-radius: var(--radio); } /* El icono viaja en el markup y no se ve: la palabra es lo que se lee mientras quepa. Lo cambia el bloque del teléfono, y solo ahí. */ .tema-icono { display: none; } .tema button { padding: 0.2rem 0.5rem; border: none; border-radius: var(--radio); background: none; color: var(--texto-tenue); font: inherit; font-size: 0.85em; cursor: pointer; } .tema button:hover { color: var(--acento); } .tema button.actual { background: var(--fondo-elevado); color: var(--texto); font-weight: 600; } /* --- Paneles del menú principal ------------------------------------------- */ .paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--espacio); margin-top: var(--espacio); } .panel { padding: var(--espacio); background: var(--fondo-elevado); border: 1px solid var(--borde); border-radius: var(--radio); } .panel h2 { margin: 0 0 0.5rem; font-size: 1.05rem; } .panel .cuenta { color: var(--texto-tenue); font-weight: 400; } .panel ul { margin: 0; padding: 0; list-style: none; } .panel li { padding: 0.25rem 0; border-top: 1px solid var(--borde); } .panel li:first-child { border-top: none; } .panel .detalle { display: block; color: var(--texto-tenue); font-size: 0.88em; } /* --- Tablas y listas ------------------------------------------------------ */ /* Que la tabla se desplaza tiene que VERSE. Hallazgos R1 a R4. Aquí se intentó primero el truco de los cuatro degradados —dos anclados al contenido que tapan y dos anclados al marco que asoman— y NO sirve en esta aplicación: se pintan en el fondo del contenedor y la tabla va encima con celdas opacas, así que la sombra queda debajo y no se ve nunca. Queda anotado para que nadie lo vuelva a intentar. Lo que sí sirve es `.tabla-alta`, que la tarea 12 ya había escrito para las constancias: acota la caja a 70vh y le pega el encabezado. La diferencia no es el alto, es DÓNDE QUEDA EL SCROLLBAR — en un contenedor de 12,000px de alto la barra horizontal está al pie de la página y nadie la ve nunca; en una caja de 70vh está al pie de lo que se está mirando. Las tablas largas lo llevan ahora en su markup. */ .tabla-envuelta { overflow-x: auto; } .tabla { width: 100%; border-collapse: collapse; } .tabla th, .tabla td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; } .tabla th { color: var(--texto-tenue); font-size: 0.88em; } /* D6 — el sobrante se junta al final en vez de repartirse entre las columnas. `.tabla` mide el 100% del contenedor, y cuando el contenido no llega a tanto el navegador reparte la diferencia entre TODAS las columnas. A 1920 en /empleados eso daba ~110px de hueco entre «Nombre» y «División», ~300px entre «Puesto» e «Ingreso», y «Saldo» y «Estado» apretados contra el borde. Datos que se leen juntos quedan lejos, y el ojo tiene que cruzar el hueco para saber de quién es la cifra. `width: 100%` en UNA columna se lleva todo el sobrante, y como las demás celdas ya son `nowrap`, se ajustan a su contenido. **Y esa columna es la última**, que es la parte que hay que decir: se probó primero con «Nombre» y sale peor —la columna mide 634px para nombres de 260 y el hueco se muda enterito entre el nombre y su división—. Al final, el hueco queda DESPUÉS del último dato, que es donde no separa nada. Va por `:last-child` y no por una clase en el porque en /contactos la última columna es «Acciones» y solo existe si quien mira tiene permiso de editar, emplear o borrar. Una clase escrita a mano se quedaría en la columna equivocada para quien solo consulta. */ .tabla-holgada th:last-child { width: 100%; } .tabla tbody tr:hover { background: var(--fondo-hundido); } /* --- Ordenar por el encabezado ------------------------------------------- El botón lo fabrica wwwroot/js/orden.js, no el markup: sin JavaScript el encabezado se queda como está y la tabla sale en el orden del servidor, que es el orden con el que se leía antes. Un botón que no hiciera nada sería peor. Hereda todo del —color, tamaño, peso— para que el encabezado siga siendo un encabezado y no un control de más. Lo único que se ve de más es la flecha, y solo cuando el puntero está encima o cuando esa es la columna ordenada. */ .tabla th:has(> .orden) { padding: 0; } .orden { display: flex; align-items: center; gap: 0.3rem; width: 100%; padding: 0.4rem 0.6rem; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; } /* La columna de números lleva su encabezado a la derecha, y el botón tiene que seguirlo o el título se despega de su columna. */ .tabla th.numero .orden { justify-content: flex-end; } .orden:hover, .orden:focus-visible { color: var(--texto); } .orden:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; } /* En reposo la flecha doble no se ve: doce encabezados con una flecha cada uno son doce cosas pidiendo atención en una tabla que se lee, no se opera. Aparece al pasar el puntero —«aquí se puede»— y se queda fija en la columna ordenada. */ .orden-flecha { opacity: 0; font-size: 0.9em; } .orden:hover .orden-flecha, .orden:focus-visible .orden-flecha, .tabla th[aria-sort="ascending"] .orden-flecha, .tabla th[aria-sort="descending"] .orden-flecha { opacity: 1; } .tabla th[aria-sort="ascending"], .tabla th[aria-sort="descending"] { color: var(--texto); } .filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin: var(--espacio) 0; } /* La etiqueta al lado del control y no encima. Encima cuesta un renglón de 18px por filtro y estas barras traen hasta cinco; al lado, la barra entera mide un renglón. Lo pidió la clienta por el buscador de contactos y aplica a todas. */ .filtros label { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; color: var(--texto-tenue); font-size: 0.88em; } .filtros select, .filtros input { padding: 0.35rem 0.5rem; border: 1px solid var(--campo-borde); border-radius: var(--radio); background: var(--campo); color: var(--texto); font: inherit; } /* Una caja de búsqueda del ancho de un nombre. Los de esta empresa son de cuatro palabras —«Aceviz Parra Petra Eleuteria»— y la caja medía lo que el navegador quisiera darle, que son unas veinte letras. */ .filtros input[type="search"] { width: 20rem; max-width: 100%; } .baja { color: var(--texto-tenue); } /* --- Anterior / siguiente ------------------------------------------------- */ .recorrido { display: flex; align-items: center; gap: 0.6rem; margin: var(--espacio) 0; } .recorrido .posicion { color: var(--texto-tenue); font-size: 0.9em; } .recorrido .apagado { color: var(--texto-tenue); opacity: 0.5; } /* --- Piezas compartidas --------------------------------------------------- */ .boton { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-elevado); color: var(--texto); font: inherit; text-decoration: none; cursor: pointer; } .boton:hover { border-color: var(--acento); color: var(--acento); } /* Relleno, no solo con borde de color. Antes solo cambiaba borde, color y peso -- que es literalmente lo que hace .boton:hover --, así que la acción principal de cada pantalla pesaba lo mismo que las demás y no había un solo botón relleno en todo el sistema. Hallazgo R6/I2 de la tarea 01. */ .boton-principal { border-color: var(--acento); background: var(--acento); color: var(--sobre-acento); font-weight: 600; } .boton-principal:hover { border-color: var(--estructura-honda); background: var(--estructura-honda); color: var(--sobre-acento); } .tarjeta { padding: calc(var(--espacio) * 1.25); background: var(--fondo-elevado); border: 1px solid var(--borde); border-radius: var(--radio); } .tarjeta-angosta { max-width: 24rem; margin: 0 auto; } /* La pantalla de acceso es la única que alguien mira ANTES de decidir si confía en esto. La tarjeta es blanca, así que el logo va sin la teja del riel. */ .marca-acceso { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-bottom: var(--espacio); text-align: center; } .marca-acceso img { width: 96px; height: 96px; } .marca-acceso .empresa { color: var(--texto); font-family: var(--tipo-titular); font-size: 1rem; font-weight: 600; } .tarjeta h1 { margin-top: 0; font-size: 1.3rem; } .formulario { display: grid; gap: 0.35rem; } .formulario label { margin-top: 0.5rem; font-weight: 600; } .formulario input { padding: 0.45rem 0.6rem; border: 1px solid var(--campo-borde); border-radius: var(--radio); background: var(--campo); color: var(--texto); font: inherit; } .formulario input:focus { border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 1px; } .formulario .boton { margin-top: var(--espacio); } /* Turnstile. El recuadro lo dibuja Cloudflare dentro de un