` (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); }
/* ============================================================================
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; }
/* height:100% — un
con display:flex deja de generar caja de celda; el
navegador lo envuelve en una celda anónima que sí estira a la altura de la
fila, pero la caja flex real (la que pintamos) queda del alto de su
contenido. Con una fila más alta que una línea (nombre largo que envuelve)
la botonera queda chica dentro de un contenedor más grande. Forzar 100% la
estira a la altura real de la celda anónima. */
.lista td.acciones { justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; height: 100%; }
@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); }
.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 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; }
|