` (se arman
en JS), por eso los selectores van sobre `.lista th`/`td`, no `thead th`. */
table.lista { border-collapse: collapse; width: 100%; font-size: 12.5px; }
/* Contenedor redondeado: solo cuando la .lista va dentro de un .scroll (las
listas de gestión). border-radius + overflow del .scroll recortan el header
a las esquinas. Los dashboards (datos-contables/metricas) envuelven en
`` a propósito y quedan sin marco, ya viven
dentro de un .panel. */
.scroll:has(> table.lista) {
border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.lista th {
position: sticky; top: 0; z-index: 1;
background: var(--bg-2); color: var(--txt-dim);
font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--line);
white-space: nowrap; cursor: default;
}
.lista td {
padding: 9px 13px; border-bottom: 1px solid var(--line-soft);
vertical-align: middle; line-height: 1.45;
}
.lista tr:last-child td { border-bottom: none; }
/* Hover: tiñe la fila. Solo el td se tiñe, así el header (que trae th) queda
quieto. Las filas clicables suman barra de acento a la izquierda. */
.lista tr:hover td { background: var(--bg-2); }
.lista tr.click { cursor: pointer; }
.lista tr.click:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lista th.num { text-align: right; }
.lista td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista td.dim { color: var(--txt-dim); }
.lista td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lista td.center { text-align: center; }
.lista tr.anulada { opacity: .4; text-decoration: line-through; }
/* Pill de estado: forma (punto) + color, no solo color — cumple la regla
anti-daltonismo (ver nota de los semánticos arriba). Variantes semánticas;
los alias mapean los nombres históricos de cada vista. */
.est-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600; line-height: 1.4;
padding: 2px 9px 2px 8px; border-radius: var(--radius-pill, 999px); white-space: nowrap;
}
.est-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.est-pill.ok { color: var(--ok); background: rgba(34, 197, 94, .12); }
.est-pill.warn { color: var(--warn); background: rgba(234, 179, 8, .12); }
.est-pill.danger { color: var(--danger); background: rgba(248, 113, 113, .12); }
.est-pill.neutral { color: var(--txt-faint); background: rgba(148, 166, 184, .1); }
/* Nombre "sin ficha en Colaboradores" (unificación de nombres, 2026-08-25): se
muestra el login crudo atenuado + ⚠ para detectar quién del PERSONAL falta cargar.
Los externos/tercerizados NO llevan esta marca (el backend nunca setea sinFicha en
ellos). Lo pinta window.fmtNombre() de portal-secciones.js. */
.nombre-sinficha { color: var(--txt-dim); }
.nombre-sinficha .nombre-warn { color: var(--warn); font-size: .9em; }
/* ============================================================================
Listas de acción — celda de botones por fila (.acciones)
----------------------------------------------------------------------------
Contraparte de las tablas de lectura: las mismas .lista pero con acciones por
fila (planos, admin, mantenimiento, horarios). Antes cada vista repetía el
`style="text-align:right;white-space:nowrap"` en la celda y amontonaba
.btn.mini con caja, separados por espacios sueltos. Acá viven el contenedor
(gap y alineado consistentes) y la jerarquía.
Idea: en una .lista los botones quedan QUIETOS (sin caja) mientras leés la
fila, y arman el marco al pasar el mouse — así mandan los datos, no la
botonera. Cada variante conserva su color, para que la jerarquía se lea
siempre sin necesidad de hover: primaria .acc (acento), destructiva .danger
(rojo), el resto texto normal. En touch (sin hover) los botones quedan con su
caja de siempre, bien visibles. */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* OJO: un
con display:flex deja de generar caja de celda real — el
navegador lo envuelve en una celda anónima que sí estira a la fila, pero la
caja flex (la que pintamos) queda del alto de su contenido nomás. Con una
fila más alta que una línea (nombre largo que envuelve, como en Planos) la
botonera queda chica y pegada arriba. height:100% NO lo arregla (confirmado
a mano: la celda no hereda una altura resoluble a través de la anónima).
Por eso acá se pisa a table-cell de vuelta y el alineado/espaciado se
resuelve con text-align + margin, no con justify-content/gap. */
.lista td.acciones {
display: table-cell;
text-align: right;
white-space: nowrap;
}
.lista td.acciones .btn + .btn { margin-left: 6px; }
@media (hover: hover) {
/* Quieto: sin caja, para que la fila respire. El borde sigue ocupando su 1px
(transparente), así aparecer/desaparecer no mueve el layout. */
.lista td.acciones .btn { background: transparent; border-color: transparent; }
/* Los secundarios (sin color propio) se atenúan en reposo para no competir con
los datos, y recuperan tinta plena cuando te acercás. Los .acc/.danger/.primary
conservan su color siempre: así la jerarquía se lee sin necesidad de hover. */
.lista td.acciones .btn:not(.acc):not(.danger):not(.primary) { color: var(--txt-dim); }
.lista tr:hover td.acciones .btn:not(.acc):not(.danger):not(.primary),
.lista tr:focus-within td.acciones .btn:not(.acc):not(.danger):not(.primary) { color: var(--txt); }
/* Al pasar por la fila —o cuando estás editándola (un input/select con foco,
patrón ✎ → Guardar/✕)— se insinúa el marco de toda la botonera. */
.lista tr:hover td.acciones .btn,
.lista tr:focus-within td.acciones .btn { border-color: var(--line-soft); }
/* Al ir a tocar un botón puntual, se arma del todo con su color. */
.lista td.acciones .btn:hover { background: var(--panel-2); border-color: var(--line); }
.lista td.acciones .btn.acc:hover { border-color: var(--accent); }
.lista td.acciones .btn.danger:hover { border-color: var(--danger); }
}
/* ============================================================================
Utilidades
========================================================================== */
.mono { font-family: var(--mono); }
/* overscroll-behavior-x: sin esto el swipe horizontal sobre una tabla
dispara el "volver atrás" del navegador en móvil */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.faint { color: var(--txt-faint); }
.mt { margin-top: 10px; }
.self-end { align-self: end; } /* campo alineado al piso de una .fila */
.w-auto { width: auto; } /* select/input que no debe estirarse */
/* .hide vive en Layout; .ok/.err/.warn en Paneles y avisos */
/* ============================================================================
Mobile
----------------------------------------------------------------------------
Primera media query del portal. Nace por Horarios (ahí el celular es el
dispositivo principal, reemplaza la hoja de papel de la oficina), pero el
chrome es compartido, así que aplica a todas las vistas.
NO se oculta header .sub: relevo-tecnico y proximamente no tienen y
se quedarían sin título; en menu y login el .sub dice algo distinto.
========================================================================== */
@media (max-width: 640px) {
.wrap { padding: 16px 14px 48px; }
h1 { font-size: 17px; }
header { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
header .who { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel { padding: 12px; }
/* --- formulario en tarjeta ---
Menos aire en cabecera/cuerpo/pie, y las acciones del pie a ancho completo
con target cómodo. `.ancho` pasa a fila entera: con una sola columna, un
`span 2` crearía una segunda columna implícita y desbordaría. */
.fc-head { padding: 12px 14px; gap: 10px; }
.fc-body { padding: 14px; }
.fc-foot { padding: 11px 14px; flex-wrap: wrap; }
.fc-foot .msg { flex-basis: 100%; margin: 0 0 4px; }
.fc-foot .btn { flex: 1 1 45%; min-height: 44px; justify-content: center; }
.campo.ancho { grid-column: 1 / -1; }
.opt-card { flex-basis: 100%; }
.dropzone { padding: 22px 14px; }
/* --- ventana y lanzadores ---
La ventana ocupa la pantalla de punta a punta y se pega arriba; el pie no
scrollea con el cuerpo, así que Guardar siempre está donde el pulgar. */
.modal-bg { padding: 10px; }
.modal, .modal.ancho, .modal.xl { max-width: 100%; max-height: calc(100vh - 20px); }
/* La regla scopeada por id de arriba (más específica) forzaría 480px en móvil;
acá la neutralizamos para que el Detalle también ocupe la pantalla. */
#slotDetalleBg .modal { max-width: 100%; }
.modal .mhead, .modal .mbody, .modal .mfoot { padding-left: 14px; padding-right: 14px; }
.modal .mfoot { flex-wrap: wrap; }
.modal .mfoot .msg { flex-basis: 100%; margin: 0 0 4px; }
.modal .mfoot .btn { flex: 1 1 45%; min-height: 44px; justify-content: center; }
.lanzador { padding: 12px 13px; }
/* Las pestañas no se apilan: una sola fila que se arrastra con el dedo.
Horarios tiene 9 y en 375px ocuparían cuatro renglones. */
.tabs {
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; scroll-snap-align: start; }
/* El Detalle de máquina tiene solo 4 solapas: en vez de arrastrarse (y quedar
"sangradas" contra el borde derecho, como si estuvieran cortadas) se reparten
a lo ancho de la fila en partes iguales — una sola línea, sin scroll. */
#slotTabs { gap: 6px; }
#slotTabs .tab {
flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
padding: 8px 4px;
}
/* Etiquetas largas → corta en móvil: "Configuración"→"Config", "Mantenimiento"→"Mant." */
#slotTabs .tab .lbl-full { display: none; }
#slotTabs .tab .lbl-mini { display: inline; }
/* El header hace flex-wrap acá arriba, así que un popover de 360px anclado al
botón se sale de la pantalla (y si la campanita cayó al segundo renglón,
encima aparece a mitad de página). Pasa a ocupar el ancho, fijo bajo el header. */
.notif-pop {
position: fixed; left: 8px; right: 8px; top: 58px;
width: auto; max-width: none;
}
.notif-list { max-height: 65vh; }
}
/* -- Componentes compartidos (hoisted en Fase 2b desde los CSS de página; ver
docs/REDUCCION-EMBEBIDO.md). Eran reglas IDENTICAS duplicadas en varias vistas;
movidas acá sin cambios. Selectores únicos: no colisionan con nada previo. ---- */
/* Breadcrumb (herramientas, maestro, métricas, optimización, próximamente) */
.crumb { font-size: 12px; color: var(--txt-faint); margin: 0 0 10px; }
.crumb a { color: var(--txt-dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
/* Grilla de tarjetas-herramienta (herramientas, optimización) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tool { display: block; text-decoration: none; color: inherit; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: .12s; }
.tool:hover { border-color: var(--accent); transform: translateY(-2px); }
.tool.soon { opacity: .5; pointer-events: none; }
.tool .t { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.tool .d { font-size: 12.5px; color: var(--txt-dim); }
.tool .tag { display: inline-block; margin-top: 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 1px 6px; }
.tool.soon .tag { color: var(--txt-faint); border-color: var(--txt-faint); }
/* Modal "Detalle de máquina" -- filas del detalle (menu, relevo). Las clases de la
ventana (.modal-bg/.modal/.mhead/.tabs) ya son globales más arriba en este archivo. */
.maq-num.link { cursor: pointer; color: var(--accent); text-decoration: none; }
.maq-num.link:hover { text-decoration: underline; }
.mhint { font-size: 12.5px; color: var(--txt-dim); margin-bottom: 12px; }
.slot-cab { font-size: 14px; margin-bottom: 14px; }
.slot-grupo { margin-bottom: 14px; }
.slot-grupo h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-dim); }
.slot-campo { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.slot-campo .lbl { color: var(--txt-dim); }
.slot-campo .val { font-weight: 600; text-align: right; }
/* Tab "Historial" del modal "Detalle de máquina" -- timeline calcado del "Historial de
slot" de SlotAdmin (notas/tareas/fuera de servicio de /api/maestro/historial/:slotId,
normalizado por public/portal-charts.js). Un solo carril (no alternado como el
original): más robusto en el ancho acotado del modal y en mobile. --tipo-color lo fija
cada item inline según su tipo (nota=--warn, tarea=--cat-2, etc.) */
.historial-list { position: relative; padding-left: 30px; }
.historial-list::before {
content: ''; position: absolute; left: 13px; top: 4px; bottom: 4px; width: 2px; background: var(--line-soft);
}
.historial-it { position: relative; margin-bottom: 14px; }
.historial-it:last-child { margin-bottom: 0; }
.historial-ico {
position: absolute; left: -30px; top: 0; width: 27px; height: 27px; border-radius: 50%;
display: grid; place-items: center; font-size: 12.5px; line-height: 1;
background: var(--bg-2); box-shadow: 0 0 0 2px var(--tipo-color, var(--line-soft));
}
.historial-card {
background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--tipo-color, var(--accent));
border-radius: 10px; padding: 10px 14px;
}
.historial-cab { display: flex; align-items: baseline; gap: 8px; }
.historial-cab .num { color: var(--accent); font-weight: 700; font-size: 12.5px; }
.historial-cab .fecha { margin-left: auto; font-size: 11px; color: var(--txt-faint); white-space: nowrap; }
.historial-sitio { font-size: 11.5px; color: var(--txt-dim); margin-top: 2px; }
.historial-desc { font-size: 13px; margin: 6px 0; }
.historial-ref { font-size: 11.5px; color: var(--txt-faint); font-style: italic; margin: -2px 0 6px; }
.historial-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.historial-estado { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.historial-estado.aprobado { color: var(--ok); border: 1px solid var(--ok); background: rgba(34, 197, 94, .1); }
.historial-estado.requiere { color: var(--warn); border: 1px solid var(--warn); background: rgba(234, 179, 8, .1); }
.historial-estado.rechazada { color: var(--danger); border: 1px solid var(--danger); background: rgba(248, 113, 113, .1); }
/* Tab "Mantenimiento" del modal "Detalle de máquina" -- registros PROPIOS del Portal
(no SlotAdmin): estado de vencimiento por categoría (tarjetas con medidor) + timeline
de últimos registros (reusa las clases .historial-* del tab Historial, coloreadas por
categoría). Alimentado por /mantenimiento/api/ficha/:num desde portal-charts.js. */
.mant-sec { margin-bottom: 18px; }
.mant-sec:last-child { margin-bottom: 0; }
.mant-sec h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-dim); }
.mant-est { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.mant-est.ok { color: var(--ok); border: 1px solid var(--ok); background: rgba(34, 197, 94, .1); }
.mant-est.pronto { color: var(--warn); border: 1px solid var(--warn); background: rgba(234, 179, 8, .1); }
.mant-est.vencida { color: var(--danger); border: 1px solid var(--danger); background: rgba(248, 113, 113, .1); }
.mant-est.nunca { color: var(--txt-faint); border: 1px solid var(--line); }
/* Estado por categoría: grilla de tarjetas. Punto = color de la categoría; borde
izquierdo + medidor = color del estado de vencimiento (día/cadaDías). */
/* Una columna: el modal es angosto (480px) e igual en las 4 solapas, así que dos cards
por fila apretaban el nombre contra el pill de estado y lo desbordaban. minmax(240px)
mantiene una sola columna a este ancho y solo abriría a dos si hubiera mucho más aire. */
.mant-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.mant-cat { border: 1px solid var(--line); border-left: 3px solid var(--est-color, var(--line)); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.mant-cat-top { display: flex; align-items: center; gap: 8px; }
.mant-cat-top .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat-color, var(--accent)); flex: none; }
.mant-cat-top .nom { font-weight: 600; font-size: 13px; }
.mant-cat-top .mant-est { margin-left: auto; }
.mant-cat-meter { height: 5px; border-radius: 3px; background: var(--line-soft); margin: 9px 0 6px; overflow: hidden; }
.mant-cat-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--est-color, var(--accent)); }
.mant-cat-sub { font-size: 11px; color: var(--txt-faint); }
/* ── Sitios: pestañas seleccionables (Maestro, Movimientos) ─────────────────
Fila horizontal de sitios de la sala. El activo (con catálogo) resaltado; los
demás inertes con badge "próx." hasta integrarse desde la API. Fuente única:
la usan varias vistas, no copiar a los CSS de vista. */
.sitios-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.sitios-tabs .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-faint); margin-right: 2px; }
.sitio {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: var(--radius-pill);
font: inherit; font-size: 12.5px; color: var(--txt-dim);
background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.sitio .pin { flex: 0 0 auto; color: var(--txt-faint); }
.sitio.activo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sitio.activo .pin { color: var(--accent); }
.sitio.inerte { color: var(--txt-faint); cursor: default; opacity: .8; }
.sitio.inerte::after {
content: "próx."; font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
padding: 1px 5px; border-radius: var(--radius-pill); background: var(--bg-2); color: var(--txt-faint);
}
/* ============================================================================
Reportes — piezas COMPARTIDAS (docs/REPORTES.md)
----------------------------------------------------------------------------
El modal "Reportar" (public/portal-reportar.js) se inyecta en TODAS las vistas,
así que su estilo tiene que vivir acá (portal-ui.css es lo único que cargan
todas). El tablero (public/reportes.css) reusa estas mismas clases — pills de
estado/prioridad, chips de tipo — para no duplicar y evitar drift.
========================================================================== */
/* Chips de elección (tipo del reporte). Botón toggle, uno activo. */
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: var(--radius-pill); cursor: pointer;
font: inherit; font-size: 13px; color: var(--txt-dim);
background: var(--panel); border: 1px solid var(--line);
}
.rep-chip:hover { border-color: var(--accent); }
.rep-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* Pill de estado / prioridad. El color lo pone cada modificador vía --c. */
.rep-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 1px 8px; border-radius: var(--radius-pill);
font-size: 11px; font-weight: 700; line-height: 1.7; letter-spacing: .02em;
color: var(--c, var(--txt-dim)); border: 1px solid var(--c, var(--line));
background: color-mix(in srgb, var(--c, var(--txt-faint)) 12%, transparent);
}
.rep-pill.st-nuevo { --c: var(--txt-faint); }
.rep-pill.st-planificado { --c: var(--accent); }
.rep-pill.st-en-curso { --c: var(--warn); }
.rep-pill.st-hecho { --c: var(--ok); }
.rep-pill.st-descartado { --c: var(--txt-faint); opacity: .75; }
.rep-pill.pr-alta { --c: var(--danger); }
.rep-pill.pr-media { --c: var(--warn); }
.rep-pill.pr-baja { --c: var(--txt-dim); }
/* Botón de voto 👍 "me sirve" (compartido modal + tablero). */
.rep-voto {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: var(--radius-pill); cursor: pointer;
font: inherit; font-size: 12px; color: var(--txt-dim);
background: var(--panel); border: 1px solid var(--line);
}
.rep-voto:hover { border-color: var(--accent); }
.rep-voto.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* "Mis reportes" dentro del modal del top bar. */
.rep-mis { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.rep-mi {
display: flex; align-items: center; gap: 8px; justify-content: space-between;
padding: 8px 10px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line-soft);
}
.rep-mi .tt { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-mi .meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|