evita partirse entre dos páginas. */
/* 17-ago-2026 (pedido del usuario: "revisa como se está cuadrando la
impresión, quedan mal las columnas") — en modo wide (pantalla) esta
tabla NO usa table-layout:fixed (ver comentario largo junto a
preventiveGenChecklistTableHTML() en app.js): "Campo adicional" y
"Observaciones" no tienen width declarado, así que se expanden según su
contenido. En pantalla eso da igual (hay scroll si hace falta), pero en
la hoja impresa el ancho es fijo y esas dos columnas empujaban a
"Estado" fuera del margen — se veía cortado, tal como se reportó.
table-layout:fixed + un % por columna (identificada por data-col, no por
posición — ver ese mismo comentario en app.js) fuerza que las 6 (o 5,
sin "Catálogo") columnas siempre sumen dentro del 100% del ancho de la
hoja, sin importar cuánto texto tenga cada celda. */
html.cmms-printing .cmms-prevgen-checklist-table { display: table !important; width: 100% !important; table-layout: fixed !important; }
html.cmms-printing .cmms-prevgen-checklist-table th[data-col="num"] { width: 4% !important; }
html.cmms-printing .cmms-prevgen-checklist-table th[data-col="catalog"] { width: 8% !important; }
html.cmms-printing .cmms-prevgen-checklist-table th[data-col="tarea"] { width: 22% !important; }
html.cmms-printing .cmms-prevgen-checklist-table th[data-col="extra"] { width: 16% !important; }
html.cmms-printing .cmms-prevgen-checklist-table th[data-col="obs"] { width: 32% !important; }
html.cmms-printing .cmms-prevgen-checklist-table th[data-col="estado"] { width: 18% !important; }
html.cmms-printing .cmms-prevgen-checklist-table td { word-break: break-word; overflow-wrap: break-word; }
html.cmms-printing .cmms-prevgen-checklist-table thead { display: table-header-group !important; }
html.cmms-printing .cmms-prevgen-checklist-table tbody { display: table-row-group !important; }
html.cmms-printing .cmms-prevgen-checklist-table tr {
display: table-row !important; margin-bottom: 0 !important; border: none !important; padding: 0 !important;
background: none !important; box-shadow: none !important;
break-inside: avoid !important; page-break-inside: avoid !important;
}
html.cmms-printing .cmms-prevgen-checklist-table td {
display: table-cell !important; border: none !important; border-bottom: 1.25px solid #64748b !important;
padding: 5px 6px !important; font-size: 11px !important; font-weight: 500 !important; vertical-align: top;
}
html.cmms-printing .cmms-prevgen-checklist-table td[data-label]::before { display: none !important; content: none !important; }
html.cmms-printing .cmms-prevgen-checklist-table thead th { font-size: 10.5px !important; padding: 4px 6px !important; font-weight: 700 !important; border-bottom: 1.5px solid #475569 !important; }
/* v69 — filas de subtítulo dentro del checklist ("Título"/"Texto libre",
ver preventiveGenChecklistTableHTML(), con fondo
var(--c-surface-2) inline): ese fondo depende del tema activo y en
impresión quedaba invisible — se reemplaza por un borde grueso arriba
y abajo (sin usar color de fondo) para que la sub-sección se distinga
claramente de las tareas normales. */
html.cmms-printing .cmms-prevgen-checklist-table td[colspan] {
background: none !important; border-top: 1.5px solid #475569 !important;
border-bottom: 1.5px solid #475569 !important; font-weight: 700 !important;
padding: 6px 6px !important; text-transform: uppercase; font-size: 10.5px !important; letter-spacing: .3px;
}
/* v71 — "en el campo adicional, solo imprime el resultado, no las
opciones": el tipo "Sí/No" (ver preventiveGenChecklistTableHTML(),
extra.type==='checkbox') pinta DOS radios uno al lado del otro (Sí/No)
para marcar en pantalla — en el PDF solo interesa la respuesta, no las
dos opciones. Se oculta el completo de la opción NO marcada, y
al de la opción SÍ marcada se le oculta solo el círculo del
radio (input), dejando nada más el texto ("Sí" o "No") como resultado
final. Si ninguna quedó marcada (informe sin completar), ambas
desaparecen y el cuadro queda en blanco — correcto, no hay respuesta
que mostrar. */
html.cmms-printing label:has(> input[type="radio"]:not(:checked)) { display: none !important; }
html.cmms-printing label:has(> input[type="radio"]:checked) input[type="radio"] { display: none !important; }
}
/* Fila de gráficos del Dashboard ("OTs por mes" + "Proyección de MP") uno al
lado del otro: las tarjetas NO se estiran a repartirse el ancho disponible,
cada una respeta su propio max-width (.cmms-card-chart-otsmes/
.cmms-card-chart-mpproj) y quedan pegadas a la izquierda. */
.cmms-charts-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
/* v88b — FIX: este bloque era CSS legado de un donut viejo que ya no se usa
en ninguna vista (grep confirma que ningún template arma `class="cmms-donut"`
salvo el nuevo assetStatusHTML(), ver más abajo) — pero como reutilizaba
el MISMO nombre de clase, su ::after (un círculo SÓLIDO, opaco, pensado
para un donut de 84px) quedaba pintado ENCIMA del texto del centro del
donut nuevo (148px) y lo tapaba por completo — de ahí el hueco en blanco
sin el total. Se borra ese ::after; el donut real se define más abajo,
junto a .cmms-donut-ring/.cmms-donut-center (v88). */
.cmms-legend { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.cmms-legend-item { display: flex; align-items: center; gap: 7px; color: var(--c-text); }
.cmms-legend-item b { margin-left: auto; padding-left: 10px; color: var(--c-muted); font-weight: 500; }
.cmms-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* OTs por mes — barras verticales apiladas (correctiva/roja + preventiva/amarillo),
con el desglose numérico chico arriba de cada barra. Columnas casi pegadas
(gap mínimo) y barra ancha (85% de la columna) para que se lean como un
bloque continuo, con solo un hilo de separación entre meses. El ANCHO de
la tarjeta se limita en .cmms-card-chart-otsmes (más abajo) — acá adentro
ya no hace falta max-width, el contenido llena la tarjeta angosta. */
.cmms-monthbar-wrap { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 190px; padding-top: 26px; overflow-x: auto; }
.cmms-monthbar-col { flex: 1; min-width: 26px; display: flex; flex-direction: column; align-items: center; height: 100%; }
/* Total de la barra (OT abiertas del mes: CM real + PM proyectada) — mismo
formato que .cmms-vbarchart-value ("Cumplimiento de mantenimiento
preventivo", ver más abajo) para que ambas tarjetas se lean como un
mismo sistema. El desglose CM/PM ya no va acá arriba — se muestra
DENTRO de cada segmento de color (.cmms-monthbar-seg-num, ver abajo). */
.cmms-monthbar-total { font-size: 12px; color: var(--c-muted); margin-bottom: 4px; }
.cmms-monthbar-track { flex: 1; width: 85%; display: flex; flex-direction: column-reverse; background: var(--c-donut-inner, rgba(148,163,184,.15)); border-radius: 4px; overflow: hidden; }
.cmms-monthbar-seg { width: 100%; transition: height .3s; display: flex; align-items: center; justify-content: center; overflow: visible; }
.cmms-monthbar-seg-cm { background: #ef4444; }
.cmms-monthbar-seg-pm { background: #eab308; }
/* Número CM/PM dentro de su propio segmento de color (pedido del usuario:
antes iban arriba de la barra, separados de su color correspondiente).
text-shadow en vez de un color fijo — se lee bien tanto sobre el rojo
como sobre el amarillo. position:relative + z-index (reportado: "no cae
el número 1" — un segmento muy angosto, ej. 1 OT sobre un máximo de 24,
mide unos pocos px de alto; el número desborda hacia arriba gracias a
overflow:visible en .cmms-monthbar-seg, pero sin esto quedaba TAPADO
por el segmento de al lado, que se pinta después en el orden normal del
documento — position:relative lo saca de ese orden y lo deja siempre
arriba, sin importar cuál segmento sea más angosto). */
.cmms-monthbar-seg-num { position: relative; z-index: 2; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); line-height: 1; }
.cmms-monthbar-label { font-size: 11px; color: var(--c-muted); margin-top: 6px; }
/* Tarjeta de "OTs por mes" — v87: vuelve a compartir fila con las OTRAS 3
tarjetas (Cumplimiento MP / Estado de los activos / Activos críticos en
falla — pedido del usuario: "las 4 en una sola fila"), así que baja de
50% (pensado para compartir fila con una sola tarjeta más) a ~28%. El
gráfico ya trae su propio scroll horizontal de respaldo
(.cmms-monthbar-wrap/.cmms-vbarchart overflow-x:auto) para cuando 12
meses no entran cómodos en ese ancho. */
/* v89 — "Activos críticos en falla" bajó de 5 a 3 columnas (OT/TAG/Apertura,
pedido del usuario), así que necesita mucho menos ancho; ese espacio
ganado se reparte EQUITATIVAMENTE entre esta tarjeta y
.cmms-card-chart-mpproj (pedido explícito) — de 28% sube a 36% cada una. */
.cmms-card-chart-otsmes { flex: 1 1 300px; max-width: 36%; min-width: 0; }
/* Barra apilada — legado, ya no se usa (ver .cmms-donut-* más abajo,
"Estado de los activos" pasó a donut v88), se deja sin borrar por si
alguna vista vieja la sigue referenciando. */
.cmms-stackbar-wrap { display: flex; flex-direction: column; gap: 14px; }
.cmms-stackbar-track { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--c-donut-inner, rgba(148,163,184,.15)); }
.cmms-stackbar-seg { height: 100%; transition: width .3s; }
/* v88 — "Estado de los activos" en donut (pedido del usuario: menos ancho,
más alto, para acercarse a la altura de "Cumplimiento de mantenimiento
preventivo" en la misma fila). El anillo es un conic-gradient recortado
con `mask` (radial-gradient transparente en el centro) en vez de tapar el
hueco con un círculo sólido del color de fondo de la tarjeta — así no
hace falta adivinar ese color (degradé, cambia con el tema día/noche) y
el hueco queda perfecto en cualquier fondo. drop-shadow le da el relieve
"3D" pedido. */
/* v90 — pedido del usuario: la leyenda pasa de ir AL LADO del donut a ir
DEBAJO, en una fila horizontal (no una lista vertical) — así la tarjeta
completa se puede angostar (ver .cmms-card-chart-status más abajo), ese
ancho liberado es justamente lo que gana "Activos críticos en falla" en
la misma fila. */
.cmms-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.cmms-donut { position: relative; width: 148px; height: 148px; flex-shrink: 0; }
.cmms-donut-ring {
width: 100%; height: 100%; border-radius: 50%;
-webkit-mask: radial-gradient(circle at center, transparent 0 61%, #000 62% 100%);
mask: radial-gradient(circle at center, transparent 0 61%, #000 62% 100%);
filter: drop-shadow(0 10px 16px rgba(15,23,42,.22));
}
.cmms-donut-center {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.cmms-donut-center-label { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--c-muted); }
.cmms-donut-center-value { font-size: 28px; font-weight: 800; color: var(--c-nav-hover-text, var(--c-text)); line-height: 1.15; white-space: nowrap; }
/* Leyenda EN FILA (no columna) para ir debajo del donut sin ocupar alto de
más — envuelve a 2 líneas sola si el ancho angosto de la tarjeta no
alcanza para las 3 juntas. */
.cmms-legend-row { flex-direction: row !important; flex-wrap: wrap; justify-content: center; font-size: 13px; gap: 6px 16px !important; }
.cmms-legend-row .cmms-legend-item { gap: 6px; }
.cmms-legend-row .cmms-legend-item b { margin-left: 4px; padding-left: 0; }
/* Proyección de MP — barras verticales por mes, columnas casi pegadas
(mismo criterio de compactado que OTs por mes, ver .cmms-monthbar-wrap).
El ANCHO de la tarjeta se limita en .cmms-card-chart-mpproj más abajo.
overflow-x/min-width (v43, pasó de 6 a 12 meses): con el doble de columnas
hace falta el mismo scroll horizontal de respaldo que ya tenía
.cmms-monthbar-wrap, para pantallas angostas. */
/* height:190px — igualada a .cmms-monthbar-wrap (pedido del usuario, para
que "Cumplimiento de mantenimiento preventivo" quede a la misma altura
que "OTs por mes" en vez de verse más bajo/desalineado en la misma
fila, ver .cmms-charts-row). */
.cmms-vbarchart { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 190px; padding-top: 10px; overflow-x: auto; }
.cmms-vbarchart-col { flex: 1; min-width: 24px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.cmms-vbarchart-value { font-size: 12px; color: var(--c-muted); margin-bottom: 4px; }
.cmms-vbarchart-track { flex: 1; width: 85%; display: flex; align-items: flex-end; background: var(--c-donut-inner, rgba(148,163,184,.15)); border-radius: 4px; overflow: hidden; }
.cmms-vbarchart-fill { width: 100%; border-radius: 4px 4px 0 0; min-height: 3px; overflow: hidden; display: flex; flex-direction: column; }
/* v44: la barra de "Cumplimiento de MP" (mpProjectionHTML) pasó de un solo
color a 2 segmentos apilados dentro de .cmms-vbarchart-fill — verde
(ya generadas) abajo, amarillo (programadas, aún sin generar) arriba; si
un mes está 100% al día el segmento amarillo mide 0 y la barra queda de
un solo color verde. */
.cmms-vbarchart-fill-generated { width: 100%; background: #22c55e; }
.cmms-vbarchart-fill-pending { width: 100%; background: #eab308; }
.cmms-vbarchart-label { font-size: 11px; color: var(--c-muted); margin-top: 6px; }
/* Tarjeta de "Proyección de MP" — v89: sube a 36% (mismo criterio y misma
proporción que .cmms-card-chart-otsmes de arriba — ver ese comentario). */
.cmms-card-chart-mpproj { flex: 1 1 300px; max-width: 36%; min-width: 0; }
/* Tarjeta de "Estado de los activos" (pedido del usuario: moverla al costado
derecho de "Cumplimiento de mantenimiento preventivo" en la misma fila —
ahí sobraba espacio porque esas dos tarjetas de arriba no se estiran a
llenar el ancho disponible, ver comentario junto a .cmms-charts-row). Se
agranda (v49, pedido del usuario: "sobra mucho espacio y las leyendas no
se leen") — la leyenda pasó de una fila horizontal a la lista vertical
por defecto de .cmms-legend (cada estado en su propia línea, cantidad
alineada a la derecha vía .cmms-legend-item b), así que ya no se corta
aunque la tarjeta crezca. */
/* v88b — FIX: flex-grow:1 la estiraba a repartirse el ancho de la fila en
partes iguales con sus vecinas, pero su contenido (donut + leyenda) es
angosto — sobraba un colchón de espacio en blanco a la derecha adentro de
la tarjeta (pedido del usuario: "ese espacio podría ganarse para la tabla
de la derecha"). flex-grow:0 la deja del ancho de su flex-basis (no se
estira de más); el espacio que antes desperdiciaba pasa a repartirse
entre las otras tarjetas de la fila, sobre todo "Activos críticos en
falla" (ver flex-grow:2 más abajo). min-width:0 sigue siendo necesario
(v86): sin eso no se puede encoger por debajo del ancho de su contenido. */
/* v90 — más angosta (240px, antes 320px): con la leyenda debajo del donut
(ver .cmms-donut-wrap más arriba) ya no necesita tanto ancho — ese
espacio liberado pasa DIRECTO a "Activos críticos en falla" (pedido del
usuario, ver .cmms-card-chart-critical más abajo). */
.cmms-card-chart-status { flex: 0 1 240px; max-width: 240px; min-width: 0; }
/* "Activos críticos en falla" — v90: sube de 280px a 380px (el ancho que
"Estado de los activos" dejó libre al angostarse), pensado para que el
TAG quepa cómodo hasta con 12 caracteres SIN scroll horizontal (fuente
un poco más chica que el resto de la app — 11.5px — y celdas más
compactas). El scroll (.cmms-table-scroll) se deja solo como red de
seguridad para un caso extremo, no debería activarse en el uso normal. */
.cmms-card-chart-critical { flex: 0 1 380px; max-width: 380px; min-width: 0; }
.cmms-card-chart-critical .cmms-table-scroll { overflow-x: auto; }
.cmms-card-chart-critical .cmms-table { font-size: 11.5px; table-layout: auto; }
.cmms-card-chart-critical .cmms-table th,
.cmms-card-chart-critical .cmms-table td { white-space: nowrap; padding: 8px 10px; }
/* Fila final "Más activos en falla" (v90, pedido del usuario: cuando hay
más de 6 OT críticas abiertas, en vez de una 7ª fila normal) — texto
centrado, look de "ver más" en vez de una fila de datos más. */
.cmms-critical-more-row td {
text-align: center; color: var(--c-accent, #3b82f6); font-weight: 600;
background: var(--c-topbar-btn-hover-bg, rgba(148,163,184,.08));
}
/* Línea de tendencia sobre "OTs por mes"/"Proyección de MP" — removida a
pedido del usuario (ver comentario junto a drawDashboardTrendLines en
app.js). Reglas .cmms-trendline* eliminadas por no usarse. */
/* ── Responsive del Dashboard ──────────────────────────────────────────
Las tarjetas de .cmms-charts-row usan max-width en PORCENTAJE de esa fila
(25/30/50%), pensado para pantallas de escritorio anchas. Al angostar la
ventana esas mismas tarjetas se van reduciendo en proporción (25% de una
fila angosta es un cuadradito minúsculo) en vez de apilarse — mientras que
.cmms-kpi-grid (que usa auto-fit/minmax) sí se reacomoda solo. Acá
forzamos que, por debajo de cierto ancho, la fila de gráficos pase a
apilarse una debajo de otra a 100% de ancho, como cualquier tarjeta
normal. */
@media (max-width: 1000px) {
.cmms-charts-row { flex-direction: column; }
.cmms-charts-row > .cmms-card,
.cmms-card-chart-otsmes,
.cmms-card-chart-mpproj,
.cmms-card-chart-critical {
max-width: 100% !important;
flex: 1 1 100% !important;
width: 100%;
}
}
/* ── v42 — Menú lateral en celular/tablet angosta (≤760px): panel deslizable
(drawer) en vez de la fila envuelta que había antes (esa fila, con ~10-12
opciones, terminaba ocupando 3-4 líneas de alto ARRIBA del contenido en un
celular real, empujando todo hacia abajo). Ahora el nav queda oculto fuera
de pantalla (transform) y se abre con el botón ☰ del topbar (ver
.cmms-menu-toggle-btn arriba y #btn-menu-toggle en app.js), superpuesto
sobre el contenido con un fondo oscuro detrás (.cmms-nav-backdrop) que lo
cierra al tocarlo — mismo patrón que cualquier drawer de menú estándar.
Arriba de 760px (tablet en horizontal / desktop) no cambia nada: sigue la
columna fija de siempre (.cmms-sidebar de la regla base, más arriba). ── */
@media (max-width: 760px) {
.cmms-menu-toggle-btn { display: flex; }
.cmms-sidebar {
position: fixed; top: 0; left: 0; z-index: 900; height: 100vh;
width: 82vw; max-width: 300px; min-width: 0;
flex-direction: column; flex-wrap: nowrap; overflow-y: auto;
border-right: 1px solid var(--c-border); border-bottom: none;
transform: translateX(-100%); transition: transform .25s ease;
box-shadow: 10px 0 28px -12px rgba(0,0,0,.5);
}
.cmms-sidebar.is-open { transform: translateX(0); }
.cmms-nav-item { flex: none; }
.cmms-nav-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 890;
}
.cmms-body--nav-open .cmms-nav-backdrop { display: block; }
}
/* ── v42 (Fase 0) — objetivos táctiles mínimos en celular/tablet angosta:
los botones de acción de tabla (Editar/Ver/Eliminar/Historial, hoy
`.cmms-btn-sm`, pensados para mouse) quedan más chicos que el mínimo
recomendado para tocar con el dedo (~44px). Este ajuste solo aplica
≤600px — en desktop/tablet ancha se mantienen como estaban. ── */
@media (max-width: 600px) {
.cmms-btn-sm { padding: 9px 14px; font-size: 12.5px; min-height: 40px; }
.cmms-actions { gap: 8px; row-gap: 10px; }
.cmms-nav-item { padding: 13px 14px; }
}
/* ── v42 (Fase 4/5) — Barra de acciones de formulario (Cancelar/Anterior/
Siguiente/Guardar — .cmms-form-actions, usada en TODOS los formularios de
la app: wizard de OT, informe de ejecución de checklist, Activos,
Inventario, Compras, Usuarios, etc.) pegada abajo de la pantalla en
celular/tablet: antes había que scrollear hasta el final del formulario
(a veces varias pantallas de largo, ej. el wizard de OT o un checklist
largo) para encontrar el botón "Guardar"/"Siguiente" — ahora queda
siempre visible mientras se completa el formulario.
Nota: se usa position:FIXED, no sticky — .cmms-main tiene
"overflow-x:auto" (ver arriba), y por spec CSS eso fuerza también
"overflow-y:auto" calculado (no se puede tener un eje "auto" y el otro
"visible" a la vez): eso convierte a .cmms-main en su propio contenedor
de scroll para position:sticky, pero como su alto NO está acotado a la
pantalla (crece con el contenido, no hay scroll interno real), el
"stick" nunca se activa — el botón quedaba flotando en su posición
normal del documento en vez de pegado abajo. position:fixed no tiene ese
problema (se posiciona respecto del viewport real). Como el formulario
pierde el espacio que ocupaba esta barra al sacarla del flujo normal, se
compensa con padding-bottom en .cmms-form (ver regla de abajo) para que
el fixed no tape el último campo. Corte en 900px (no 760px) a propósito
— igual que el resto de los ajustes de "pantalla chica" (tablas → tarjetas,
panel de Tareas/Vista previa del Plan Preventivo): una tablet en vertical
también se usa con el dedo en terreno, así que conviene que la barra
de acciones se quede siempre visible ahí también, no solo en celular. ── */
@media (max-width: 900px) {
.cmms-form-actions {
/* left:230px (no 0) entre 761-900px: en ese rango el menú lateral
TODAVÍA es la columna fija de siempre (el drawer recién reemplaza el
menú por debajo de 760px, ver @media max-width:760px más abajo) — si
la barra usara left:0 acá, quedaría superpuesta encima del menú en
vez de ocupar solo el ancho del contenido. */
position: fixed; left: 230px; right: 0; bottom: 0; z-index: 200; flex-wrap: wrap;
background: var(--c-surface); border-top: 1px solid var(--c-border);
padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
box-shadow: 0 -8px 16px -10px rgba(0,0,0,.45);
}
/* Los popups (Anular/Suspender/Reabrir OT, catálogos, etc.) son cortos y
ya se ven enteros sin scrollear — ahí la barra de acciones NO debe
"escaparse" del popup y pegarse al fondo de toda la pantalla, así que
se excluye del tratamiento fixed de arriba (vuelve a su posición
normal, dentro de la tarjeta del modal). */
.cmms-modal-overlay .cmms-form-actions {
position: static; box-shadow: none; border-top: none; background: none; padding: 4px 0 16px;
}
/* Compensa el espacio que .cmms-form-actions deja de ocupar en el flujo
normal al pasar a fixed, para que no tape el último campo del
formulario — aplica a cualquier