/* ═══════════════════════════════════════════════════════════════════ SEGUIMIENTO RH — sistema visual ═══════════════════════════════════════════════════════════════════ Sin librerías de estilos: son cientos de KB para lo que aquí se resuelve en un archivo, y cada una es algo más que puede romperse en una actualización que nadie está vigilando. La paleta no es la de siempre a propósito. Todo el software de RH mexicano usa el mismo azul marino con cian —Worky, Factorial, Runa— y parecerse a ellos no distingue a nadie. Aquí el color viene del producto: azul petróleo profundo, que es serio sin ser corporativo genérico, y ámbar para lo que reclama atención. El ámbar no es decorativo: este sistema mide TIEMPO, y el ámbar es el color con el que un reloj avisa. Tres familias, cada una con su trabajo: Familjen Grotesk títulos — geométrica, con carácter, poco vista Public Sans texto — cívica, hecha para formularios oficiales IBM Plex Mono horas, folios y cifras que se alinean en columna ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* Fondo cálido, no clínico: el blanco puro cansa en pantallas que se miran ocho horas seguidas. */ --papel: #FAF7F2; --papel2: #F4EFE6; --tarjeta: #FFFFFF; --tarjeta2: #F5F1E9; --linea: #ECE5D9; --linea2: #DCD2C0; --tinta: #241F3D; --tinta2: #4A4270; --tinta3: #8B84A3; /* El azul del logotipo. `--marca` es el color EXACTO del logotipo y no se toca; `--primario` es medio tono más oscuro y es el que va en botones, enlaces y texto, porque el de la marca sobre blanco da 4.7 de contraste —pasa raspando— y éste da 5.9, que se lee cómodo a tamaño de botón. */ --marca: #241F3D; --primario: #4A4270; --primario2: #241F3D; --primario-f: #ECE9F3; /* Lo que va ENCIMA del primario y del acento. No es siempre blanco: en modo oscuro esos dos fondos se aclaran, y el blanco encima desaparece. Lo probé y el botón «Guardar como PDF» quedaba ilegible. */ --sobre-primario: #FFFFFF; --sobre-acento: #FFFFFF; /* Ámbar: atención, tiempo, lo que hay que mirar hoy. */ /* El oro es el UNICO acento. Va en el boton primario, en el filtro activo, en la raya de las tarjetas de cifra y en el borde de «hoy». `--acento` es el tono de fondo; `--acento-t` es el mismo oro llevado a oscuro, que es el que se puede LEER sobre crema. */ --acento: #C9A15C; --acento2: #B58C46; --acento-t: #8A6A2E; --acento-f: #F6EEDF; /* Los estados: fondo al 12-15% y letra en la version oscura del MISMO color, nunca letra negra sobre color. */ --verde: #4F6B4B; --verde-f: #E9EFE7; --ambar: #8A6A2E; --ambar-f: #F6EEDF; --rojo: #8F4832; --rojo-f: #F6E8E2; --morado: #4A4270; --morado-f: #ECE9F3; /* Los tonos vivos, para graficas y rayas: los mismos de la paleta. */ --verde-vivo: #6F8F6A; --rojo-vivo: #B5654A; /* Las sombras van TEÑIDAS de indigo, nunca negras: una sombra negra sobre crema se ve sucia y despega la tarjeta del fondo. */ --sombra: 0 1px 2px rgba(36,31,61,.05), 0 8px 24px rgba(36,31,61,.06); --sombra-alta:0 2px 8px rgba(36,31,61,.08), 0 24px 56px rgba(36,31,61,.14); --sombra-oro: 0 2px 6px rgba(138,106,46,.22), 0 8px 20px rgba(138,106,46,.18); --radio: 18px; --radio-s: 10px; --serif: Lora, "Iowan Old Style", Georgia, "Times New Roman", serif; /* La barra lateral es la única zona oscura, y sus tonos no dependen del modo claro/oscuro: en los dos es índigo. Por eso van aparte. */ --indigo: #241F3D; --indigo-hover: #322B54; --indigo-activo: #3B3363; --indigo-linea: #3A3360; --sobre-indigo: #F6F2EA; --sobre-indigo-2:#A9A2C4; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --papel:#1A1730; --papel2:#241F3D; --tarjeta:#241F3D; --tarjeta2:#2E2850; --linea:#39325C; --linea2:#4A4270; --tinta:#FAF7F2; --tinta2:#C9C3DC; --tinta3:#948DAE; --marca:#C9A15C; --primario:#C3B7E8; --primario2:#D8CFF3; --primario-f:#2E2850; --sobre-primario:#1A1730; --sobre-acento:#241F3D; --acento:#C9A15C; --acento2:#DDB877; --acento-t:#E3C48D; --acento-f:#3A2F1C; --verde:#9CC095; --verde-f:#22301F; --verde-vivo:#8FB489; --ambar:#DDB877; --ambar-f:#3A2F1C; --rojo:#DE9B84; --rojo-f:#3A241C; --rojo-vivo:#C87A5E; --morado:#C3B7E8; --morado-f:#2E2850; --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32); --sombra-alta:0 2px 8px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45); --sombra-oro: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(201,161,92,.16); } } :root[data-theme="dark"] { --papel:#1A1730; --papel2:#241F3D; --tarjeta:#241F3D; --tarjeta2:#2E2850; --linea:#39325C; --linea2:#4A4270; --tinta:#FAF7F2; --tinta2:#C9C3DC; --tinta3:#948DAE; --marca:#C9A15C; --primario:#C3B7E8; --primario2:#D8CFF3; --primario-f:#2E2850; --sobre-primario:#1A1730; --sobre-acento:#241F3D; --acento:#C9A15C; --acento2:#DDB877; --acento-t:#E3C48D; --acento-f:#3A2F1C; --verde:#9CC095; --verde-f:#22301F; --verde-vivo:#8FB489; --ambar:#DDB877; --ambar-f:#3A2F1C; --rojo:#DE9B84; --rojo-f:#3A241C; --rojo-vivo:#C87A5E; --morado:#C3B7E8; --morado-f:#2E2850; --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32); --sombra-alta:0 2px 8px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45); --sombra-oro: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(201,161,92,.16); } * { box-sizing: border-box; } body { margin: 0; /* Degradado vertical muy corto entre dos cremas, y dos manchas de color difuminadas en las esquinas. No se ven como manchas: se sienten como que la hoja tiene aire. Van fijas para que no viajen al hacer scroll. */ background: radial-gradient(60rem 40rem at 100% 0%, color-mix(in srgb, var(--acento) 11%, transparent), transparent 62%), radial-gradient(52rem 38rem at 0% 100%, color-mix(in srgb, var(--primario) 9%, transparent), transparent 60%), linear-gradient(180deg, var(--papel) 0%, var(--papel2) 100%); background-attachment: fixed; color: var(--tinta); font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .titular { font-family: "Familjen Grotesk", "Public Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; margin: 0; } /* La serif se reserva para tres cosas: el nombre de la marca, los títulos grandes de sección y los NÚMEROS protagonistas. En los botones, las tablas y los formularios manda la sans, que es la que se lee de un vistazo. */ .caja > h2, .titulo-vista h1, .cifra .val, .agenda-mes-cabeza b, .agenda-num, .agenda-mini-dia { font-family: var(--serif); } .caja > h2 { font-weight: 600; letter-spacing: -.005em; } /* El encabezado de cada pantalla, donde antes no había ninguno: sólo empezaban los filtros y no se sabía en dónde estaba uno cuando la barra está contraída. */ .titulo-vista { margin: 0 0 1.25rem; } .titulo-vista .eyebrow { margin-bottom: .3rem; } .titulo-vista h1 { font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; } /* El tope de ancho es para que un párrafo largo no se lea de pared a pared. Estaba en 56ch —482 px— y partía en dos renglones una descripción de una sola frase que cabía de sobra en los 919 px del contenedor. Se sube a lo que necesita la más larga, y se conserva el tope: sin él, en una pantalla ancha el renglón se estira tanto que el ojo pierde el principio. */ .titulo-vista p { margin: .3rem 0 0; color: var(--tinta2); font-size: .88rem; max-width: 84ch; } a { color: var(--primario); text-decoration-color: color-mix(in srgb, var(--primario) 35%, transparent); } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; } /* Etiqueta pequeña en versalitas que encabeza una sección. */ .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--primario); font-weight: 500; } /* ── Entrar ───────────────────────────────────────────────────────── */ .entrar-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(60rem 32rem at 12% -10%, color-mix(in srgb, var(--primario) 13%, transparent), transparent 62%), radial-gradient(46rem 28rem at 92% 108%, color-mix(in srgb, var(--acento) 13%, transparent), transparent 62%), var(--papel); } .entrar-caja { width: 100%; max-width: 24rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-alta); padding: 2.2rem 2rem; } .entrar-caja h1 { font-size: 1.5rem; margin-bottom: .25rem; } .entrar-caja .sub { color: var(--tinta3); font-size: .87rem; margin: 0 0 1.7rem; } /* ── Campos ───────────────────────────────────────────────────────── */ label.campo { display: block; margin-bottom: 1rem; } label.campo span { display: block; font-size: .78rem; color: var(--tinta2); margin-bottom: .35rem; font-weight: 600; letter-spacing: .01em; } input, select, button, textarea { font: inherit; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea { width: 100%; padding: .58rem .75rem; border: 1px solid var(--linea2); border-radius: var(--radio-s); background: var(--tarjeta); color: var(--tinta); transition: border-color .12s, box-shadow .12s; } input:hover, select:hover, textarea:hover { border-color: var(--tinta3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 16%, transparent); } input::placeholder, textarea::placeholder { color: var(--tinta3); } input[type=date], input[type=time] { font-variant-numeric: tabular-nums; } /* ── Botones ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .52rem .95rem; border: 1px solid var(--linea2); border-radius: 99px; background: var(--tarjeta); color: var(--tinta); cursor: pointer; font-weight: 600; font-size: .855rem; white-space: nowrap; transition: background .12s, border-color .12s, transform .06s, box-shadow .12s; } .btn:hover { background: var(--tarjeta2); border-color: var(--tinta3); } .btn:active { transform: translateY(1px); } /* El primario lleva un degradado de DOS tonos del mismo oro —nunca de dos colores distintos— y su sombra teñida de ese oro. */ .btn.primario { background: linear-gradient(180deg, var(--acento) 0%, var(--acento2) 100%); border-color: var(--acento2); color: var(--indigo); font-weight: 600; box-shadow: var(--sombra-oro); } .btn.primario:hover { background: linear-gradient(180deg, var(--acento2) 0%, var(--acento2) 100%); border-color: var(--acento2); } .btn.acento { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); box-shadow: 0 1px 2px rgba(199,125,25,.3); } .btn.acento:hover { background: var(--acento2); border-color: var(--acento2); } .btn.peligro { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, var(--linea2)); } .btn.peligro:hover { background: var(--rojo-f); } .btn.ancho { width: 100%; padding: .72rem; font-size: .95rem; border-radius: var(--radio-s); } .btn.chico { padding: .3rem .62rem; font-size: .78rem; } .btn:disabled { opacity: .5; cursor: default; transform: none; } .aviso { border-radius: var(--radio-s); padding: .7rem .9rem; font-size: .86rem; margin-bottom: 1rem; } .aviso.malo { background: var(--rojo-f); color: var(--rojo); font-weight: 600; } .aviso.bueno { background: var(--verde-f); color: var(--verde); font-weight: 600; } .aviso.ojo { background: var(--ambar-f); color: var(--ambar); font-weight: 600; } /* ═══ ARMAZÓN: barra lateral + columna de contenido ══════════ La navegación era una fila de pestañas arriba. Con nueve secciones ya no cabía y había que arrastrarla de lado para llegar a «Usuarios». Ahora es una columna que se contrae a 68px y deja el ancho para el contenido. La barra es la ÚNICA zona oscura de la aplicación: índigo profundo con la letra en crema. Todo lo demás vive sobre el crema. */ .armazon { display: flex; min-height: 100vh; align-items: stretch; } .lateral { position: sticky; top: 0; z-index: 30; flex: none; /* min-width:0 no es adorno. El minimo de un elemento flexible es el ancho de su contenido, y con eso la barra se negaba a bajar de 248px por mas que la regla de abajo pidiera 68. */ width: 248px; min-width: 0; height: 100vh; display: flex; flex-direction: column; background: var(--indigo); color: var(--sobre-indigo); padding: 1.15rem 14px 1rem; /* En modo claro la barra se separa sola por el contraste. En oscuro el fondo de la página también es índigo y se fundía con ella. */ border-right: 1px solid var(--indigo-linea); transition: width .28s cubic-bezier(.4, 0, .2, 1); } /* El ancho es lo ÚNICO que se anima. El texto se desvanece aparte, para que no se vea aplastarse mientras la columna encoge. */ .lateral.plegada { width: 68px; } /* ── La marca ── */ .lateral .marca-logo { display: flex; align-items: center; gap: .65rem; padding: .1rem 3px 1.15rem; margin-bottom: .5rem; border-bottom: 1px solid var(--indigo-linea); text-decoration: none; color: inherit; min-width: 0; /* Es un letrero, no un boton: ni cursor de mano ni texto que se seleccione al tocarlo dos veces en el telefono. */ cursor: default; user-select: none; -webkit-user-select: none; } .lateral .marca-icono { width: 34px; height: 34px; flex: none; border-radius: 10px; background-color: color-mix(in srgb, var(--acento) 20%, transparent); background-size: contain; background-position: center; background-repeat: no-repeat; } .lateral .marca-texto { min-width: 0; } .lateral .marca-logo b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; } .lateral .marca-logo .empresa { display: block; font-style: normal; font-size: .72rem; color: var(--sobre-indigo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── El círculo dorado que contrae ── */ .lateral-tirador { position: absolute; top: 3rem; right: -13px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; background: var(--acento); color: var(--indigo); box-shadow: var(--sombra-oro); transition: transform .28s cubic-bezier(.4, 0, .2, 1), background .15s; } .lateral-tirador svg { width: 15px; height: 15px; } .lateral-tirador:hover { background: var(--acento2); } .lateral.plegada .lateral-tirador { transform: rotate(180deg); } /* ── Los renglones de navegación ── */ .pestanas { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .35rem 0; margin: 0; } /* El atributo hidden manda. Sin esto, el display de abajo lo pisaría y «Usuarios» y «Clientes» se verían aunque el usuario no tenga permiso. */ .pestanas button[hidden] { display: none !important; } .pestanas button { position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; border: 0; background: none; cursor: pointer; color: var(--sobre-indigo-2); font-family: inherit; font-weight: 500; font-size: .875rem; text-align: left; padding: .62rem 10px; border-radius: 10px; white-space: nowrap; overflow: hidden; transition: background .14s, color .14s; } .pest-icono { width: 20px; height: 20px; flex: none; } .pest-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s ease; } .pestanas button:hover { background: var(--indigo-hover); color: var(--sobre-indigo); } /* La sección activa: fondo suave y la raya de oro pegada a la izquierda. La raya se queda puesta también con la barra contraída, que es cuando más falta hace saber en dónde está uno. */ .pestanas button.activa { background: var(--indigo-activo); color: var(--sobre-indigo); font-weight: 600; } .pestanas button.activa::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 62%; border-radius: 0 3px 3px 0; background: var(--acento); } .pestanas button.activa .pest-icono { color: var(--acento); } /* ── Contraída ── */ /* El icono NO se mueve de sitio: el botón pasa a centrar y el relleno se iguala, así que queda en la misma columna en los dos estados. */ .lateral.plegada .pestanas button { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } .lateral.plegada .pest-txt, .lateral.plegada .marca-texto, .lateral.plegada .quien, .lateral.plegada .lateral-acciones { opacity: 0; } /* `oculto` lo pone barra.js DESPUÉS de que la opacidad llegó a cero. Si se escondiera de golpe, el texto se vería encogerse con la columna. */ .lateral.plegada .pest-txt.oculto, .lateral.plegada .marca-texto.oculto, .lateral.plegada .lateral-acciones.oculto, .lateral.plegada .quien.oculto { display: none; } .lateral.plegada .marca-logo { justify-content: center; padding-left: 0; padding-right: 0; } .lateral.plegada .lateral-acciones { align-items: center; } /* ── El pie: quién entró y sus botones ── */ .lateral .quien { padding: .8rem 3px .55rem; border-top: 1px solid var(--indigo-linea); line-height: 1.3; min-width: 0; transition: opacity .15s ease; } .lateral .quien b { display: block; font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lateral .quien .empresa { display: block; font-style: normal; font-size: .72rem; color: var(--sobre-indigo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lateral-acciones { display: flex; flex-direction: column; gap: .3rem; padding: 0; } .lateral-acciones .btn { width: 100%; justify-content: center; text-align: center; background: transparent; border-color: var(--indigo-linea); color: var(--sobre-indigo-2); transition: opacity .15s ease, background .14s, color .14s, border-color .14s; } .lateral-acciones .btn:hover { background: var(--indigo-hover); color: var(--sobre-indigo); border-color: var(--indigo-hover); } .lateral-acciones .btn.acento { background: var(--acento); border-color: var(--acento); color: var(--indigo); font-weight: 600; } /* ── La columna de contenido ── */ .principal { flex: 1; min-width: 0; } .contenido { padding: 1.6rem 1.8rem 4rem; max-width: 1500px; margin: 0 auto; } .filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; padding: .8rem .9rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); } .filtros .etiqueta { font-size: .8rem; color: var(--tinta2); font-weight: 600; } .filtros input[type=date] { width: 9.6rem; } .filtros select { width: auto; min-width: 10.5rem; } .filtros input.buscador { width: 19rem; } .filtros .sep { width: 1px; align-self: stretch; background: var(--linea); margin: 0 .2rem; } /* ── Cifras ───────────────────────────────────────────────────────── */ .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; margin-bottom: 1.2rem; } .cifra { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.05rem; box-shadow: var(--sombra); position: relative; overflow: hidden; /* Centrado. La reja estira todas las tarjetas a la altura de la más alta, y sin esto el número quedaba pegado arriba con un hueco debajo: se veía desacomodado, que es exactamente lo que se notaba al ponerle el anillo a dos de ellas. */ display: flex; flex-direction: column; justify-content: center; min-height: 5.6rem; } .cifra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acento); } .cifra.v::before { background: var(--verde); } .cifra.a::before { background: var(--ambar); } .cifra.r::before { background: var(--rojo); } .cifra.m::before { background: var(--morado); } .cifra.p::before { background: var(--primario); } /* Un poco mas grande: la tarjeta es alta porque a su lado hay anillos, y un numero chico en una tarjeta alta se ve perdido. */ .cifra .val { font-size: 2.2rem; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; } .cifra .lab { font-size: .74rem; color: var(--tinta3); margin-top: .25rem; font-weight: 500; letter-spacing: .01em; } .caja { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.35rem 1.45rem; margin-bottom: 1.35rem; } .caja > h2 { font-size: 1.12rem; margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem; } /* ── Tablas ───────────────────────────────────────────────────────── */ .tabla-envoltura { overflow-x: auto; margin: 0 -.35rem; padding: 0 .35rem; } table.datos { width: 100%; border-collapse: collapse; font-size: .855rem; } table.datos th { text-align: left; font-size: .69rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta3); font-weight: 600; padding: .4rem .6rem .5rem; border-bottom: 1px solid var(--linea2); white-space: nowrap; position: sticky; top: 0; background: var(--tarjeta); z-index: 1; } table.datos td { padding: .52rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: middle; } table.datos tbody tr:hover { background: var(--tarjeta2); } table.datos tfoot td { font-weight: 700; background: var(--tarjeta2); border-top: 2px solid var(--linea2); } table.datos .num { text-align: right; font-variant-numeric: tabular-nums; font-family: "IBM Plex Mono", monospace; font-size: .82rem; } .der { text-align: right; } .cen { text-align: center; } .apagado { opacity: .55; } .mono { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } /* ── Una tabla que se vuelve tarjetas cuando ya no cabe ─────────────── El problema que resuelve: la tabla de Personal mide 1,100 px. En un teléfono de 390 eso es TRES pantallas de ancho — para leer un renglón hay que arrastrar de lado tres veces y ya se te olvidó de quién era. La envoltura con `overflow-x:auto` evitaba que se rompiera la página, pero no hacía legible nada. Aquí, por debajo de 62rem, cada renglón se vuelve una tarjeta: el nombre de cabeza y debajo cada dato con su rótulo. El rótulo sale del atributo `data-rotulo` de la celda, así que la tabla sigue siendo una tabla —el mismo HTML sirve para la pantalla grande, para la chica y para el PDF— y no hay una segunda versión que se quede atrás. SE MIDE EL ESPACIO DE LA TABLA, NO EL DE LA VENTANA. Una consulta por ancho de ventana se equivoca en los dos sentidos: en una pantalla de 1280 con la barra lateral abierta a la tabla le quedan 920 y no cabe, y en esa misma de 1280 con la barra plegada le quedan 1180 y cabía de sobra. El ancho de la ventana no sabe nada de la barra; el del contenedor sí. VA EN `screen and` A PROPÓSITO: en impresión, `max-width` se mide contra la hoja, y una carta son 51rem. Sin `screen` los reportes en papel saldrían convertidos en tarjetas. */ @media screen { .tabla-envoltura:has(> table.apilable) { container-type: inline-size; } } /* Los botones del renglón, en una sola línea mientras sea una tabla: apilados uno sobre otro subían el renglón de 79 a 109 px, y con sesenta y siete personas eso son dos pantallas más de rueda. Cuando se vuelve tarjeta, la regla de más abajo los suelta otra vez. */ table.datos td.ap-acciones { white-space: nowrap; } /* 66rem y no 64: con los botones en un renglón la tabla de Personal no baja de 1,046 px, y a 64rem (1,024) quedaba una franja de veintidós píxeles en la que ni se apilaba ni cabía. El número sale de medir, no de redondear. */ @container (max-width: 66rem) { table.datos.apilable { display: block; font-size: .875rem; } table.datos.apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* En tableta caben dos tarjetas; en teléfono, una. Lo decide el ancho disponible, no un salto más. */ table.datos.apilable tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem; } table.datos.apilable tbody tr { display: block; background: var(--tarjeta2); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: .7rem .85rem; } table.datos.apilable tbody tr:hover { background: var(--tarjeta2); } table.datos.apilable td { display: grid; grid-template-columns: 7.5rem 1fr; gap: .2rem .7rem; align-items: baseline; border: 0; padding: .2rem 0; text-align: left; } table.datos.apilable td::before { content: attr(data-rotulo); font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta3); font-weight: 600; padding-top: .18rem; } /* Cada hijo de la celda es un cuadro de la rejilla por su cuenta, así que el SEGUNDO se acomodaba solo en el renglón de abajo… y en la columna del rótulo. El centro de trabajo aparecía alineado con «PUESTO Y CENTRO», como si fuera otro rótulo, y el «3 de 20 día(s)» debajo de «ASISTENCIA». Con esto todo lo que no es el rótulo se queda en la columna del dato. El texto suelto que va primero —el puesto, el horario— se acomoda solo en su lugar, que es el que le toca. */ /* `justify-self` para que una etiqueta siga siendo una pastilla del tamaño de su texto: como cuadro de la rejilla se estiraba a toda la columna y «sin CURP» salía como una barra amarilla de lado a lado. */ table.datos.apilable td > * { grid-column: 2; justify-self: start; } /* La celda del nombre es el encabezado de la tarjeta: sin rótulo, a todo lo ancho y separada por una línea, como el título de una ficha. */ table.datos.apilable td.ap-titulo { display: block; font-size: 1rem; padding: 0 0 .5rem; margin-bottom: .45rem; border-bottom: 1px solid var(--linea); } table.datos.apilable td.ap-titulo::before { content: none; } /* Los botones, hasta abajo y a todo lo ancho: en un teléfono se tocan con el pulgar, y un botón de 60 px de ancho se falla. */ table.datos.apilable td.ap-acciones { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .6rem; margin-top: .45rem; border-top: 1px solid var(--linea); white-space: normal; } table.datos.apilable td.ap-acciones::before { content: none; } table.datos.apilable td.ap-acciones .btn { flex: 1 1 auto; justify-content: center; } /* Una celda vacía no merece un renglón con su rótulo y un guión al lado. */ table.datos.apilable td.ap-vacia { display: none; } table.datos.apilable tfoot { display: block; margin-top: .7rem; } table.datos.apilable tfoot tr { display: block; background: var(--tarjeta2); border: 1px solid var(--linea2); border-radius: var(--radio-s); padding: .7rem .85rem; } table.datos.apilable tfoot td { background: none; border: 0; } } /* Sin `:has` —navegadores viejos— la envoltura sigue con su barra de lado y no se rompe nada: sólo se pierde el que la tarjeta use todo el ancho. */ /* ── Resumen de lo que falta, por tipo ───────────────────────────────── No es una lista de personas: es una lista de PROBLEMAS con su cuenta, para poder atacar uno completo en vez de ir abriendo expediente por expediente. */ .faltantes { display: flex; flex-wrap: wrap; gap: .5rem; } .faltantes button { display: inline-flex; align-items: baseline; gap: .45rem; cursor: pointer; font: inherit; font-size: .81rem; font-weight: 600; color: var(--tinta2); background: var(--tarjeta2); border: 1px solid var(--linea2); border-left: 3px solid var(--tinta3); border-radius: var(--radio-s); /* `margin: 0` NO es de relleno. El tono de cada grupo se usa como clase del botón, y `aviso` ya existe arriba como la caja de aviso de toda la aplicación, con `margin-bottom: 1rem`. Sin esta línea, los botones ámbar heredaban ese margen y los rojos no: en una fila flexible eso estiraba a los rojos 16 px de más, con el texto pegado arriba y una franja de color vacía debajo. */ margin: 0; padding: .4rem .7rem; text-align: left; } .faltantes button:hover { background: var(--tarjeta); color: var(--tinta); } .faltantes button.grave { border-left-color: var(--rojo); background: var(--rojo-f); color: var(--rojo); } .faltantes button.aviso { border-left-color: var(--ambar); background: var(--ambar-f); color: var(--ambar); } .faltantes button.activa { outline: 2px solid var(--primario); outline-offset: 1px; } .faltantes .cuenta { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; } .etiq { display: inline-block; padding: .12rem .5rem; border-radius: 99px; font-size: .73rem; font-weight: 600; white-space: nowrap; } .etiq.verde { background: var(--verde-f); color: var(--verde); } .etiq.ambar { background: var(--ambar-f); color: var(--ambar); } .etiq.rojo { background: var(--rojo-f); color: var(--rojo); } .etiq.morado{ background: var(--morado-f);color: var(--morado); } .etiq.gris { background: var(--tarjeta2);color: var(--tinta3); } .etiq.azul { background: var(--primario-f); color: var(--primario); } /* ── Avisos accionables ───────────────────────────────────────────── */ .atender { display: flex; flex-direction: column; gap: .5rem; } .atender .fila { display: flex; align-items: center; gap: .85rem; background: var(--tarjeta2); border-left: 3px solid var(--tinta3); border-radius: var(--radio-s); padding: .65rem .85rem; } .atender .fila.grave { border-left-color: var(--rojo); background: var(--rojo-f); } .atender .fila.aviso { border-left-color: var(--ambar); background: var(--ambar-f); } .atender .fila .tit { font-weight: 700; font-size: .855rem; } .atender .fila.grave .tit { color: var(--rojo); } .atender .fila.aviso .tit { color: var(--ambar); } .atender .fila .det { font-size: .81rem; color: var(--tinta2); } /* ── Ley ──────────────────────────────────────────────────────────── */ .ley .fila { background: var(--ambar-f); border-left: 3px solid var(--ambar); border-radius: var(--radio-s); padding: .7rem .9rem; margin-bottom: .5rem; } .ley .fila.grave { border-left-color: var(--rojo); background: var(--rojo-f); } .ley .cabeza { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; flex-wrap: wrap; } .ley .quien { font-weight: 700; font-size: .87rem; } /* EL ARTÍCULO SE PARTE CUANDO NO CABE. Antes llevaba `white-space: nowrap` para que «Art. 61» no se rompiera a la mitad en pantalla grande, pero las citas de verdad miden setenta y siete caracteres —«Art. 132 fracc. XXXIV, adicionada por el decreto del DOF del 1 de mayo de 2026»— y en un teléfono se salían de la tarjeta. `balance` reparte los renglones en vez de dejar uno suelto, y `anywhere` es el seguro: ninguna cadena larga puede volver a reventar una caja. */ .ley .art { font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600; color: var(--tinta2); overflow-wrap: anywhere; text-wrap: balance; min-width: 0; } .ley .cabeza .quien { min-width: 0; overflow-wrap: anywhere; } .ley .det { font-size: .81rem; color: var(--tinta2); margin-top: .15rem; } .ley .fundamento { font-size: .78rem; color: var(--tinta3); font-style: italic; margin-top: .25rem; } /* ── Gráficas ─────────────────────────────────────────────────────── */ .grafica { background: var(--tarjeta2); border-radius: var(--radio-s); padding: .85rem .9rem .35rem; } .leyenda { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--tinta2); margin-top: .4rem; } .leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; } .barras .renglon { margin-bottom: .5rem; } .barras .arriba { display: flex; justify-content: space-between; gap: .6rem; font-size: .82rem; } .barras .riel { height: 6px; background: var(--linea); border-radius: 99px; overflow: hidden; margin-top: .2rem; } .barras .relleno { height: 100%; border-radius: 99px; } .columnas { display: flex; gap: 1.6rem; flex-wrap: wrap; } .columnas > div { flex: 1; min-width: 16rem; } /* ── Ventanas ─────────────────────────────────────────────────────── */ .velo { position: fixed; inset: 0; background: rgba(10,17,22,.5); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 2.2rem 1rem; z-index: 60; overflow: auto; } /* Un display propio le gana al atributo hidden, y la ventana aparecía abierta al cargar. Se dice explícito para que hidden vuelva a mandar. */ .velo[hidden], [hidden] { display: none !important; } .ventana { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-alta); width: 100%; max-width: 62rem; padding: 1.3rem 1.4rem; } .ventana .cabeza { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .ventana h2 { margin: 0; font-size: 1.1rem; flex: 1; } .cerrar { border: 0; background: none; font-size: 1.25rem; cursor: pointer; color: var(--tinta3); line-height: 1; padding: .2rem .4rem; border-radius: 6px; } .cerrar:hover { background: var(--tarjeta2); color: var(--tinta); } .vacio { text-align: center; color: var(--tinta3); padding: 2.8rem 1rem; font-size: .9rem; } .nota { font-size: .78rem; color: var(--tinta3); margin-top: .6rem; line-height: 1.5; } .cargando { color: var(--tinta3); font-size: .85rem; padding: 1.8rem; text-align: center; } /* Rejilla de formulario, para las fichas de captura. */ .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 0 1rem; } .rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ═══════════════════════════════════════════════════════════════════ PANTALLAS ANGOSTAS ═══════════════════════════════════════════════════════════════════ Esto no existía, y se notaba: en un teléfono el encabezado se partía en tres renglones, el nombre de la empresa se encimaba con el del usuario y los filtros salían uno por línea. Una pantalla que se usa de pie en un pasillo tiene que caber en una mano. */ /* Lo que sólo aparece cuando la pantalla es angosta. */ .solo-angosto { display: none; } @media (max-width: 46rem) { .contenido { padding: .9rem .8rem 3rem; } /* El encabezado: arriba la marca y los botones; abajo, en chiquito, empresa · usuario · papel. El nombre de la empresa se quita de junto al de la marca porque juntos no caben y partían el renglón en tres. */ /* Arriba sólo la marca y los botones; abajo, en un renglón propio y completo, quién es la empresa y quién entró. Apretados en el mismo renglón se partían en tres: «Colegio / de / Prueba». */ .barra { padding: .45rem .8rem .35rem; gap: .4rem .5rem; flex-wrap: wrap; } .marca-logo { gap: .45rem; } .marca-logo b { white-space: nowrap; font-size: .92rem; } .marca-logo em.empresa { display: none; } .marca-icono { width: 28px; height: 28px; } .barra .crece { display: none; } .barra .btn.chico { padding: .26rem .55rem; font-size: .73rem; margin-left: auto; } .barra .btn.chico + .btn.chico { margin-left: 0; } .barra .quien { order: 10; flex-basis: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; font-size: .7rem; line-height: 1.35; min-width: 0; padding-top: .1rem; border-top: 1px solid var(--linea); } .barra .quien b { font-size: .7rem; font-weight: 600; color: var(--tinta2); } .barra .quien em { display: inline; font-size: .7rem; } .barra .quien .solo-angosto { display: inline; color: var(--tinta); font-weight: 600; } /* Un punto medio separa los datos sin necesidad de más elementos. */ .barra .quien > * + *::before { content: "· "; color: var(--tinta3); } /* Las pestañas dejan de ir pegadas arriba: su distancia al techo estaba calculada para una barra de un solo renglón, y en el teléfono la barra es más alta, así que se encimaban con el contenido. */ /* En el teléfono no hay ancho para una columna de 248px. La barra pasa a ser una tira arriba: la marca y el usuario en un renglón, y los iconos con su texto en otro que se desliza de lado. */ .armazon { flex-direction: column; } .lateral { width: auto !important; height: auto; position: sticky; top: 0; padding: .55rem .8rem .35rem; gap: .4rem; } .lateral .marca-logo { padding: 0 0 .5rem; margin: 0; } .lateral .marca-logo b { font-size: .95rem; } .lateral-tirador { display: none; } .pestanas { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: .2rem; padding: .1rem 0 .35rem; margin: 0; scrollbar-width: none; } .pestanas::-webkit-scrollbar { display: none; } .pestanas button { width: auto; flex: none; padding: .45rem .7rem; gap: .45rem; } .pestanas button.activa::before { top: auto; bottom: 0; transform: none; width: 60%; height: 2.5px; left: 20%; border-radius: 3px 3px 0 0; } .lateral .quien { border-top: 0; border-bottom: 0; padding: 0 0 .35rem; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; } .lateral .quien b, .lateral .quien .empresa { display: inline; } .lateral-acciones { flex-direction: row; padding: 0 0 .3rem; gap: .35rem; } .lateral-acciones .btn { width: auto; } .contenido { padding: 1.1rem .85rem 3rem; } .titulo-vista h1 { font-size: 1.5rem; } /* Los filtros: las fechas de dos en dos, y lo demás a todo lo ancho. */ .filtros { padding: .6rem .65rem; gap: .4rem; border-radius: 11px; } .filtros .sep { display: none; } .filtros input[type=date] { width: calc(50% - .55rem); min-width: 8rem; } .filtros select, .filtros input.buscador { width: 100%; min-width: 0; } .filtros .btn { padding: .3rem .62rem; font-size: .76rem; } .filtros .crece { display: none; } .cifras { grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); gap: .5rem; } .cifra { padding: .7rem .75rem; } .cifra .val { font-size: 1.35rem; } .caja { padding: .9rem .8rem; border-radius: 11px; } .columnas { gap: 1.1rem; } /* Las ventanas ocupan casi toda la pantalla: en un teléfono, una ventana con margen alrededor deja el formulario en una rendija. */ .velo { padding: .5rem .45rem; } .ventana { padding: .9rem .85rem; border-radius: 12px; } #velo-ficha .ventana .cabeza { top: -.9rem; margin: -.9rem -.85rem .8rem; padding: .8rem .85rem .6rem; } .ventana .cabeza h2 { font-size: .98rem; } .rejilla, .rejilla.dos { grid-template-columns: 1fr; } .sub-pestanas { gap: .15rem; } .sub-pestanas button { padding: .3rem .6rem; font-size: .78rem; } .pie-ventana { position: sticky; bottom: -.9rem; background: var(--tarjeta); margin: 1rem -.85rem -.9rem; padding: .8rem .85rem; } .mapa { height: 15rem; } .plantel { gap: .6rem; } .plantel .acciones { width: 100%; } .plantel .acciones .btn { flex: 1; } /* Que se note que la tabla se desliza, en vez de parecer cortada. */ .tabla-envoltura { margin: 0 -.8rem; padding: 0 .8rem; } } @media (max-width: 30rem) { .filtros input[type=date] { width: 100%; } .cifras { grid-template-columns: 1fr 1fr; } .linea-agregar { flex-direction: column; align-items: stretch; } .linea-agregar .btn { width: 100%; } /* LOS CAMPOS DE CAPTURA, A TODO LO ANCHO. Un `