/* =============================================================================
ist.css — IDENTIDAD DE MARCA DEL ECOSISTEMA IST (ambiente de pruebas)
=============================================================================
QUÉ ES: las variables de marca, la tipografía, los tres modos responsivos y los
componentes que usan TODAS las pantallas (portal y módulos). Es la única hoja que
se edita; `topbar-ist.css` es copia literal del ecosistema y NO se toca.
⚠ ORDEN DE CARGA OBLIGATORIO — primero el topbar, después esta hoja:
POR QUÉ ese orden: la copia de `topbar-ist.css` que vive aquí describe el patrón
ANTERIOR del ecosistema (menú lateral FIJO, logo centrado en la franja de 244 px,
título a `50% + sidebar/2`) y sus cortes responsivos miran solo el ancho. El patrón
VIGENTE es el cajón ☰ y los modos miran ancho O alto. Como esa copia no se puede
editar, esta hoja la corrige por encima: si se cargan al revés, el topbar se ve
como el patrón viejo y el logo brinca al navegar.
⚠ PRECARGA DE LA TIPOGRAFÍA — va en el de cada pantalla, antes del CSS.
Aquí no hay build que le ponga hash al nombre del archivo, así que se escriben a
mano (son cuatro líneas, los pesos del primer pintado). Sin esto el texto alcanza
a pintarse con la letra del sistema y brinca cuando llega Poppins:
`precargarFuentes()` de `/compartido/js/ist.js` hace lo mismo desde JS, como red de
seguridad para una pantalla que arme su sola; los estáticos son
mejores porque el navegador los descubre antes de procesar el CSS.
REGLA DE TEXTO: nada de letra chica explicativa. Esta hoja NO define `.hint`,
`.desc` ni `.sub` a propósito: si un rótulo necesita un párrafo chiquito para
entenderse, se arregla el rótulo. Lo que sí es contenido —estado vacío, errores,
avisos de permiso, unidades— tiene su propio componente (`.vacio`, `.aviso`).
============================================================================= */
/* ─── Tipografía autoalojada ──────────────────────────────────────────────────
Nunca el CDN de Google: en obra, con señal pobre, la letra llega tarde o no
llega, y cada carga mandaría la IP del empleado a un tercero. Son ~39 KB en
total servidos del mismo dominio. */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/compartido/fuentes/poppins-400.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/compartido/fuentes/poppins-500.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/compartido/fuentes/poppins-600.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/compartido/fuentes/poppins-700.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/compartido/fuentes/poppins-800.woff2') format('woff2');
}
/* ─── Variables de marca ────────────────────────────────────────────────────── */
:root {
/* El verde es ACENTO: botones, activos, progreso, foco. Nunca fondo de pantalla. */
--verde: #61a730;
--verde-oscuro: #124922; /* títulos y textos de marca sobre blanco */
--verde-sobre-tinte: #3f6a17; /* texto/icono cuando el fondo es el tinte verde */
--verde-profundo: #123f1c; /* fondo del avatar del usuario */
--tinte: #edf6e0; /* fondo de hover */
--carbon: #373a36;
--fondo: #f6f8f2; /* fondo de la aplicación */
--tarjeta: #ffffff;
--hover: #fafcf7; /* hover de filas y tarjetas */
--texto: #1d211a; /* el dato */
--texto2: #5a6152; /* rótulos */
--texto3: #8a927e; /* apagado */
--linea: #e7ebe0; /* bordes */
--linea-suave: #eef2e8; /* separador suave */
--linea-filas: #f0f3ec; /* separador entre filas de tabla */
--linea-hover: #dbe6c9; /* borde cuando algo está en hover */
/* Los 5 estados son SEMÁNTICOS y van aparte del verde: jamás se usan para
decorar. En un chip el texto y el punto son colores DISTINTOS a propósito:
el amarillo del punto (#e2b500) como color de texto da 1.9:1 — ilegible. */
--ok-texto: #356011; --ok-fondo: #e7f3d5; --ok-punto: #4f8b23;
--porvencer-texto: #a07c00; --porvencer-fondo: #fbf0c2; --porvencer-punto: #e2b500;
--vencido-texto: #8c2a1f; --vencido-fondo: #f8dcd6; --vencido-punto: #b23a2c;
--revision-texto: #25537f; --revision-fondo: #e2edf9; --revision-punto: #2f6bb2;
--naaplica-texto: #8a927e; --naaplica-fondo: #eef1ea; --naaplica-punto: #a7ad9c;
/* El cajón ☰ mide 244 px en TODOS los módulos. Se declara una sola vez: nunca
se escribe el número a mano en dos lugares. */
--sidebar-w: 244px;
/* Área segura del teléfono (notch / barra de estado). Con `viewport-fit=cover`
la app se dibuja hasta el borde físico; sin reservar esta franja, la hora del
sistema se encima con el logo. Sin notch env() vale 0 y nada cambia. */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
/* --topbar-visual es el alto que se VE de la barra (58 en compacto, 62 en
escritorio). --topbar-h es el alto TOTAL, lo que de verdad ocupa en pantalla:
todo lo que se ancla debajo (cajón, migas) usa el total. */
--topbar-visual: 58px;
--topbar-h: calc(var(--topbar-visual) + var(--safe-top));
/* La cinta del ambiente va pegada bajo la barra, en TODAS las pantallas (la dibuja
`topbar()`). Su alto se declara aquí porque el cajón ☰ cuelga de abajo de las dos:
`--bajo-barras` es donde de verdad empieza el contenido. */
--cinta-h: 30px;
--bajo-barras: calc(var(--topbar-h) + var(--cinta-h));
--radio: 14px;
--radio-chico: 12px;
--sombra: 0 1px 3px rgba(20, 50, 20, .06);
/* Alias que consume `topbar-ist.css`. Se redefinen aquí para que exista UNA sola
fuente de verdad del color: si mañana cambia el verde, cambia en un lugar. */
--card: var(--tarjeta);
--sh-ink: var(--texto);
--sh-ink2: var(--texto2);
--sh-ink3: var(--texto3);
--sh-line: var(--linea);
--sh-line2: var(--linea-hover);
--sh-tint: var(--tinte);
--sh-brandink: var(--verde-sobre-tinte);
--sh-deep: var(--verde-profundo);
--sh-ondeep: #c6e6a8;
--line: var(--linea);
}
/* ─── Base ──────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--fondo);
color: var(--texto);
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 15.5px;
line-height: 1.45;
}
/* El foco SIEMPRE se ve: se navega con teclado y con lector de pantalla. */
:focus-visible {
outline: 2px solid var(--verde);
outline-offset: 2px;
border-radius: 6px;
}
h1, h2, h3 { margin: 0 0 12px; color: var(--verde-oscuro); line-height: 1.25; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
a { color: var(--verde-sobre-tinte); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
/* ─── Esqueleto de pantalla ─────────────────────────────────────────────────── */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app__body { flex: 1; display: block; position: relative; }
/* `.contenido` es el nombre en español; `.content` se acepta porque así lo escribe
el markup de referencia de `topbar-ist.css`. Las dos pintan igual. */
.contenido,
.content {
padding: 20px;
padding-bottom: calc(20px + var(--safe-bottom));
max-width: 1320px;
margin: 0 auto;
}
/* ─── Topbar: correcciones del patrón VIGENTE (cajón ☰) ─────────────────────── */
/* `topbar-ist.css` calcula el alto como `--topbar-h + --safe-top` porque allá
`--topbar-h` era el alto visual. Aquí `--topbar-h` YA incluye el área segura,
así que se corrige o la barra crecería el doble del notch. */
.topbar { height: var(--topbar-h); padding-top: var(--safe-top); }
/* El logo y el título se miden con el alto VISUAL, no con el total: si no, en un
teléfono con notch el contenido de la barra queda descentrado hacia abajo. */
.topbar__logoimg { max-height: calc(var(--topbar-visual) - 16px); }
.topbar__modtitle {
top: calc(var(--safe-top) + var(--topbar-visual) / 2);
left: 50%; /* centrado sobre la VENTANA: con cajón ☰ el
título ya no se corre media franja de sidebar */
transform: translate(-50%, -50%);
}
/* Botón de TRES LÍNEAS HORIZONTALES (ninguna vertical), antes del logo. */
.topbar__burger {
width: 42px; height: 42px;
flex-shrink: 0;
display: inline-grid; place-items: center;
background: var(--tarjeta);
color: var(--texto2);
border: 1px solid var(--linea);
border-radius: 12px;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.topbar__burger:hover {
background: var(--tinte);
color: var(--verde-sobre-tinte);
border-color: var(--linea-hover);
}
.topbar__menuicon {
width: 20px; height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2; /* trazo fino: es la especificación, no un gusto */
stroke-linecap: round;
}
/* Pantalla SIN menú (login, selector de entrada): no se dibuja el botón pero se
RESERVA su hueco, para que el logo quede en el mismo píxel que en una pantalla
con menú y no brinque al navegar. */
.topbar__hueco { width: 42px; flex-shrink: 0; }
/* El nombre y el avatar son el ENLACE al perfil: en el ecosistema el perfil del
usuario vive en el portal y se abre desde aquí. En compacto el nombre se esconde y
queda solo el avatar de 32 px, así que el área tocable se declara aparte: 44 px. */
.pt__perfil {
display: flex; align-items: center; gap: 9px;
min-height: 44px;
padding: 0 6px;
border-radius: var(--radio-chico);
color: inherit; font-weight: inherit; text-decoration: none;
}
.pt__perfil:hover { background: var(--tinte); text-decoration: none; }
.pt__perfil:hover .pt__uname, .pt__perfil:hover .pt__urol { color: var(--verde-sobre-tinte); }
.pt__perfil[aria-current="page"] { background: var(--tinte); }
/* ─── Cinta del ambiente ───────────────────────────────────────────────────────
Dice en qué ambiente está parado el usuario, en todas las pantallas. NO es letra
chica explicativa: es el estado del sistema, va a 15 px / peso 700 y ocupa un
renglón pegado a la barra, sin tapar nada. Se queda a la vista al desplazar
(`sticky`) porque es la advertencia de que ningún dato de aquí es real. */
.cinta-pruebas {
position: sticky; top: var(--topbar-h); z-index: 19;
height: var(--cinta-h); flex-shrink: 0;
line-height: calc(var(--cinta-h) - 1px); /* el 1px es su borde de abajo */
padding: 0 12px;
background: var(--tinte);
color: var(--verde-sobre-tinte);
border-bottom: 1px solid var(--linea);
text-align: center;
font-size: 15px; font-weight: 700; letter-spacing: .3px;
/* En un teléfono muy angosto se recorta antes que partirse en dos renglones: si
creciera de alto, el cajón ☰ quedaría descuadrado. */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ─── El cajón (menú) ───────────────────────────────────────────────────────── */
.cajon {
position: fixed; left: 0; top: var(--bajo-barras);
width: var(--sidebar-w); max-width: 86vw;
height: calc(100dvh - var(--bajo-barras));
overflow-y: auto;
z-index: 30;
background: var(--tarjeta);
border-right: 1px solid var(--linea);
box-shadow: 2px 0 12px rgba(20, 50, 20, .08);
padding: 12px 10px calc(14px + var(--safe-bottom));
transform: translateX(-100%); /* fuera de pantalla hasta que se abre */
transition: transform .18s ease;
}
.cajon--abierto { transform: translateX(0); }
/* Fondo oscuro: además de atenuar lo de atrás, es lo que se toca para cerrar. */
.cajon-fondo {
position: fixed; inset: var(--bajo-barras) 0 0 0;
z-index: 25;
background: rgba(20, 40, 20, .42);
opacity: 0; pointer-events: none;
transition: opacity .18s ease;
}
.cajon-fondo--visible { opacity: 1; pointer-events: auto; }
.cajon__item {
display: flex; align-items: center; gap: 10px;
width: 100%;
min-height: 44px; /* mínimo para tocar con el dedo */
padding: 10px 12px;
margin-bottom: 4px;
border: 0; border-radius: var(--radio-chico);
background: transparent;
color: var(--texto2);
font: inherit; font-weight: 600; font-size: 15px;
text-align: left; text-decoration: none;
cursor: pointer;
}
.cajon__item:hover { background: var(--tinte); color: var(--verde-sobre-tinte); text-decoration: none; }
.cajon__item--activo {
background: var(--tinte);
color: var(--verde-sobre-tinte);
box-shadow: inset 3px 0 0 var(--verde); /* el verde, de acento */
}
/* El cajón se acepta también con la clase del ecosistema (`.sidebar`). */
.sidebar { border-right: 1px solid var(--linea); }
/* ─── Tarjeta ───────────────────────────────────────────────────────────────── */
.tarjeta {
background: var(--tarjeta);
border: 1px solid var(--linea);
border-radius: var(--radio);
box-shadow: var(--sombra);
padding: 16px 18px;
}
.tarjeta + .tarjeta { margin-top: 14px; }
.tarjeta__titulo {
margin: 0 0 12px;
font-size: 17px; font-weight: 700;
color: var(--verde-oscuro);
}
/* ─── Botones ───────────────────────────────────────────────────────────────── */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; /* se toca con el dedo en obra */
padding: 10px 16px;
border: 1px solid var(--linea);
border-radius: var(--radio-chico);
background: var(--tarjeta);
color: var(--texto2);
font: inherit; font-weight: 700; font-size: 15px;
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.boton:hover { background: var(--tinte); color: var(--verde-sobre-tinte); border-color: var(--linea-hover); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton svg { width: 18px; height: 18px; }
/* El fondo del botón principal es el verde OSCURO, no el #61a730 de marca:
#61a730 con texto blanco da 2.96:1 de contraste (ilegible), #3f6a17 da 6.4:1.
El #61a730 se queda donde sí se lee: bordes, estado activo, progreso y foco. */
.boton--primario {
background: var(--verde-sobre-tinte);
border-color: var(--verde-sobre-tinte);
color: #ffffff;
}
.boton--primario:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #ffffff; }
.boton--suave { background: var(--tarjeta); color: var(--texto2); }
.boton--peligro {
background: var(--vencido-punto);
border-color: var(--vencido-punto);
color: #ffffff;
}
.boton--peligro:hover { background: var(--vencido-texto); border-color: var(--vencido-texto); color: #ffffff; }
/* ─── Campos de captura ─────────────────────────────────────────────────────
Lo que se LLENA va GRANDE: 17 px y 46 px de alto. Se lee con sol y se toca con
el dedo. El rótulo dice todo lo que hay que saber: aquí no hay ayuda chiquita
debajo del campo. */
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo > label {
font-size: 14.5px; font-weight: 700;
color: var(--texto2);
}
.campo input,
.campo select,
.campo textarea {
width: 100%;
min-height: 46px;
padding: 10px 12px;
border: 1px solid var(--linea);
border-radius: var(--radio-chico);
background: var(--tarjeta);
color: var(--texto);
font: inherit; font-size: 17px; font-weight: 600;
}
.campo textarea { min-height: 96px; resize: vertical; font-weight: 500; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
outline: none;
border-color: var(--verde);
box-shadow: 0 0 0 3px var(--tinte);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto3); font-weight: 500; }
/* ─── Tabla ─────────────────────────────────────────────────────────────────── */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
text-align: left;
padding: 10px 12px;
background: var(--hover);
border-bottom: 1px solid var(--linea);
font-size: 13.5px; font-weight: 700;
color: var(--texto2);
white-space: nowrap;
}
.tabla td {
padding: 12px;
border-bottom: 1px solid var(--linea-filas);
font-size: 15.5px;
color: var(--texto);
vertical-align: middle;
}
.tabla tbody tr:hover { background: var(--hover); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Si una tabla NO se vuelve tarjetas, se desplaza dentro de su contenedor —nunca
la página entera— y nunca se comprime hasta partir las palabras letra por letra. */
.tabla-desliza { overflow-x: auto; }
.tabla-desliza .tabla { min-width: 680px; }
/* ─── Chips de estado ───────────────────────────────────────────────────────── */
.chip-estado {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px;
border-radius: 999px;
font-size: 13.5px; font-weight: 700;
white-space: nowrap;
color: var(--chip-texto);
background: var(--chip-fondo);
}
.chip-estado::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--chip-punto); /* el punto es de otro color que el texto */
flex-shrink: 0;
}
.chip-estado--ok { --chip-texto: var(--ok-texto); --chip-fondo: var(--ok-fondo); --chip-punto: var(--ok-punto); }
.chip-estado--porvencer { --chip-texto: var(--porvencer-texto); --chip-fondo: var(--porvencer-fondo); --chip-punto: var(--porvencer-punto); }
.chip-estado--vencido { --chip-texto: var(--vencido-texto); --chip-fondo: var(--vencido-fondo); --chip-punto: var(--vencido-punto); }
.chip-estado--revision { --chip-texto: var(--revision-texto); --chip-fondo: var(--revision-fondo); --chip-punto: var(--revision-punto); }
.chip-estado--naaplica { --chip-texto: var(--naaplica-texto); --chip-fondo: var(--naaplica-fondo); --chip-punto: var(--naaplica-punto); }
/* ─── Estado vacío ─────────────────────────────────────────────────────────────
NO es letra chica explicativa: le dice al usuario qué pasa y qué hacer, y es lo
único que hay en pantalla cuando no hay datos. Por eso va grande. */
.vacio {
padding: 34px 20px;
border: 1px dashed var(--linea);
border-radius: var(--radio);
background: var(--tarjeta);
text-align: center;
color: var(--texto2);
font-size: 17px; font-weight: 600;
}
.vacio .boton { margin-top: 14px; }
/* ─── Aviso (errores, validación, permiso que falta) ─────────────────────────── */
.aviso {
padding: 12px 14px;
margin-bottom: 14px;
border-radius: var(--radio-chico);
border-left: 4px solid var(--aviso-punto, var(--revision-punto));
background: var(--aviso-fondo, var(--revision-fondo));
color: var(--aviso-texto, var(--revision-texto));
font-size: 15px; font-weight: 600;
}
.aviso--error { --aviso-texto: var(--vencido-texto); --aviso-fondo: var(--vencido-fondo); --aviso-punto: var(--vencido-punto); }
.aviso--ok { --aviso-texto: var(--ok-texto); --aviso-fondo: var(--ok-fondo); --aviso-punto: var(--ok-punto); }
.aviso--atento { --aviso-texto: var(--porvencer-texto); --aviso-fondo: var(--porvencer-fondo); --aviso-punto: var(--porvencer-punto); }
/* ─── Rejilla de módulos (Inicio del portal) ────────────────────────────────── */
.rejilla-modulos {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.rejilla-modulos a,
.rejilla-modulos .tarjeta {
display: block;
text-decoration: none;
color: inherit;
font-weight: inherit;
}
.rejilla-modulos .tarjeta { margin-top: 0; transition: border-color .12s, background .12s; }
.rejilla-modulos .tarjeta:hover { background: var(--hover); border-color: var(--linea-hover); text-decoration: none; }
/* Franja de color del módulo: viene de `modulo.json` (`color`), se inyecta inline
como `--color-modulo`; si falta, el verde de marca. */
.rejilla-modulos .tarjeta { border-top: 3px solid var(--color-modulo, var(--verde)); }
.rejilla-modulos .tarjeta h3 { margin-bottom: 6px; }
/* =============================================================================
LOS TRES MODOS RESPONSIVOS — valores exactos del manual del ecosistema.
El COMPACTO entra por ancho O por alto; el ESCRITORIO exige las DOS cosas.
Por qué el alto: un teléfono ACOSTADO mide 844, 915 o 932 px de ancho, así que
mirando solo el ancho la app creería que es una computadora y sacaría el menú de
244 px y el título de 24 px sobre una pantalla de 390 px de alto. Todo encimado.
De paso se cierra el hueco de 641 a 899 px, donde antes no aplicaba ningún modo.
============================================================================= */
/* ─── COMPACTO ─────────────────────────────────────────────────────────────── */
@media (max-width: 899px), (max-height: 520px) {
:root { --topbar-visual: 58px; --cinta-h: 28px; }
/* Un renglón menos alto y sin espaciado entre letras: el texto completo cabe en un
teléfono de pie sin recortarse. */
.cinta-pruebas { font-size: 14px; letter-spacing: 0; padding: 0 10px; }
/* Deshace lo que `topbar-ist.css` aplica en su `min-width: 900px`: en una ventana
de 900×400 (teléfono acostado) ese bloque entra y esto tiene que ganarle. */
.topbar { padding-left: 10px; padding-right: 10px; gap: 6px; }
.topbar__logobtn { width: auto; }
.topbar__modtitle { left: 50%; font-size: 16px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.pt__uname, .pt__urol { display: none; } /* queda solo el avatar */
/* Con el nombre escondido, el enlace al perfil sería un cuadro de 32 px: se le dan
sus 44 px para que se pueda tocar con el dedo. */
.pt__perfil { min-width: 44px; justify-content: center; padding: 0; }
.topbar__lbl { display: none; } /* los botones quedan con icono */
.topbar__btn--volver { margin-left: 0; }
.contenido, .content { padding: 14px; padding-bottom: calc(14px + var(--safe-bottom)); }
h1 { font-size: 21px; }
h2 { font-size: 18px; }
/* En celular la rejilla de módulos va a DOS columnas, no a una. */
.rejilla-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tarjeta { padding: 14px; }
/* ── Tabla a TARJETAS ──────────────────────────────────────────────────────
Se usa cuando cada renglón es una cosa que se lee y se atiende por separado
(un movimiento, un proveedor, una tarea). Cada
necesita su rótulo:
Residencial Los Encinos
Si la tabla en cambio se compara ENTRE columnas (programa contra avance), no
se parte en tarjetas: se usa `.tabla-desliza`. */
.tbl-cards thead { display: none; }
.tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
.tbl-cards tr {
background: var(--tarjeta);
border: 1px solid var(--linea);
border-radius: var(--radio);
box-shadow: var(--sombra);
padding: 6px 12px;
margin-bottom: 10px;
}
.tbl-cards tbody tr:hover { background: var(--tarjeta); }
.tbl-cards td {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 44px; /* alto para tocar lo que haya dentro */
padding: 6px 0;
border-bottom: 1px solid var(--linea-suave);
text-align: right;
}
.tbl-cards tr td:last-child { border-bottom: 0; }
.tbl-cards td::before {
content: attr(data-rotulo); /* el rótulo de la columna: es dato */
font-size: 13.5px; font-weight: 700;
color: var(--texto2);
text-align: left;
flex-shrink: 0;
}
.tbl-cards td.num { text-align: right; }
}
/* ─── ESCRITORIO ───────────────────────────────────────────────────────────── */
@media (min-width: 900px) and (min-height: 521px) {
:root { --topbar-visual: 62px; }
/* Con el cajón ☰ el logo YA NO se ancla a la franja de 244 px: va pegado al
botón del menú, con el relleno normal de la barra. */
.topbar { padding-left: 14px; padding-right: 24px; gap: 10px; }
.topbar__logobtn { width: auto; justify-content: flex-start; }
.topbar__modtitle { left: 50%; font-size: 24px; font-weight: 800; max-width: none; }
.topbar__logoimg { height: 38px; }
.pt__uname { display: block; }
.pt__urol { display: block; }
.topbar__lbl { display: inline; }
.topbar__btn--volver { margin-left: 0; }
/* En escritorio la tabla es tabla: `.tbl-cards` solo cambia de forma en compacto. */
.tbl-cards thead { display: table-header-group; }
.tbl-cards td::before { content: none; }
}
/* ─── MÓVIL CHICO ──────────────────────────────────────────────────────────── */
@media (max-width: 480px), (max-height: 430px) {
.topbar { gap: 4px; padding-left: 8px; padding-right: 8px; }
.topbar__logoimg { height: 32px; }
.topbar__modtitle { font-size: 14.5px; max-width: 40vw; }
.topbar__btn { padding: 7px 8px; }
.contenido, .content { padding: 10px; padding-bottom: calc(10px + var(--safe-bottom)); }
.rejilla-modulos { gap: 8px; }
.boton { padding: 10px 12px; }
}
/* ─── Overlay a pantalla completa (modales, gráfica ampliada) ─────────────────
Suma el área segura arriba y abajo, o su cabecera queda bajo la barra de estado
del teléfono y su pie bajo el indicador de inicio. */
.overlay {
position: fixed; inset: 0; z-index: 60;
display: grid; place-items: center;
padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
background: rgba(20, 40, 20, .42);
}
.overlay__caja {
width: 100%; max-width: 560px;
max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
overflow-y: auto;
background: var(--tarjeta);
border-radius: var(--radio);
box-shadow: 0 12px 40px rgba(20, 50, 20, .22);
padding: 18px;
}
/* Utilidades mínimas (ninguna es texto explicativo: son de colocación). */
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila--derecha { justify-content: flex-end; }
.empuja { flex: 1; }
.oculto { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}