/* =============================================================
PRECISION ORCHESTRATOR — Design System
Termogel FSM · DESIGN-STICH v1.0
Fonts: Manrope (Display/Headline) · Inter (Body/Labels)
============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* ─── 1. TOKENS ────────────────────────────────────────────── */
:root {
/* Palette */
--color-primary: #00236f;
--color-primary-hover: #001a55;
--color-secondary: #1E3A8A;
--color-teal: #004848;
--color-teal-light: #006b6b;
--color-error: #b3261e;
--color-error-container: #f9dedc;
--color-on-error: #ffffff;
/* Surfaces */
--surface: #f6fafe;
--surface-low: #f0f4f8;
--surface-lowest: #ffffff;
--surface-variant: #e8edf5;
--surface-bright: #ffffff;
/* Text */
--on-surface: #0e1c3a;
--on-surface-variant: #3a4a6a;
--on-surface-muted: #6b7a99;
--on-primary: #ffffff;
/* Accent/Status */
--pulse-teal: #004848;
--badge-primary-bg: #dce8ff;
--badge-primary-text: #00236f;
--badge-teal-bg: #d0f0f0;
--badge-teal-text: #004848;
--badge-error-bg: #f9dedc;
--badge-error-text: #b3261e;
--badge-neutral-bg: #e8edf5;
--badge-neutral-text: #3a4a6a;
/* Shadows (ambient — #171c1f @ 6%) */
--shadow-sm: 0 2px 8px rgba(23,28,31,.06);
--shadow-md: 0 8px 24px rgba(23,28,31,.08);
--shadow-lg: 0 12px 40px rgba(23,28,31,.10);
/* Spacing (8px scale) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* Radii */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 999px;
/* Layout */
--sidebar-w: 220px;
--topbar-h: 60px;
--transition: 200ms cubic-bezier(.4,0,.2,1);
}
/* ─── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.875rem;
line-height: 1.6;
color: var(--on-surface);
background: var(--surface);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
a { color: var(--color-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ─── 3. TYPOGRAPHY SCALE ──────────────────────────────────── */
.display-lg {
font-family: 'Manrope', sans-serif;
font-size: 3.5rem; font-weight: 700;
letter-spacing: -0.02em; line-height: 1.1;
}
.headline-md {
font-family: 'Manrope', sans-serif;
font-size: 1.75rem; font-weight: 500; line-height: 1.3;
}
.title-md {
font-family: 'Inter', sans-serif;
font-size: 1.125rem; font-weight: 600; line-height: 1.4;
}
.body-md { font-size: 0.875rem; font-weight: 400; }
.label-sm {
font-family: 'Inter', sans-serif;
font-size: 0.6875rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
}
/* ─── 4. LAYOUT ────────────────────────────────────────────── */
/* Sidebar V3 — clean card-style sidebar, mimético con KPI cards
(--surface-lowest bg, --shadow-sm, --radius-lg). Tres modos via
data-mode: "collapsed" (default 64px), "expanded" (240px),
"hover" (64px → 240px on hover). */
.sidebar {
position: fixed;
top: var(--space-3);
left: var(--space-3);
bottom: var(--space-6);
width: 64px;
background: var(--surface-lowest);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
z-index: 100;
overflow: hidden;
transition: width 240ms cubic-bezier(.22, 1, .36, 1),
box-shadow 240ms ease;
}
/* Modo Expanded: siempre 240px */
.sidebar[data-mode="expanded"] {
width: 240px;
}
/* Modo Hover: 64px default, 240px al pasar el mouse */
.sidebar[data-mode="hover"]:hover {
width: 240px;
box-shadow: var(--shadow-md);
}
/* Main wrapper: ajusta margen según el modo del sidebar */
.main-wrapper {
margin-left: calc(64px + var(--space-3) * 2);
min-height: 100vh;
display: flex; flex-direction: column;
transition: margin-left 240ms cubic-bezier(.22, 1, .36, 1);
}
.sidebar[data-mode="expanded"] ~ .main-wrapper {
margin-left: calc(240px + var(--space-3) * 2);
}
/* En hover mode el sidebar es overlay → main-wrapper queda fijo en 64 */
.topbar {
height: var(--topbar-h);
background: var(--surface-lowest);
display: flex; align-items: center; gap: var(--space-4);
padding: 0 var(--space-6);
margin: var(--space-3) var(--space-3) 0 var(--space-3);
box-shadow: var(--shadow-sm);
border-radius: var(--radius-lg);
}
.content {
flex: 1;
padding: var(--space-5) var(--space-6) var(--space-8);
background: var(--surface);
}
/* ─── 5. SIDEBAR INTERNO ───────────────────────────────────── */
/* Cada row (brand, link, footer, control) usa CSS Grid con la
PRIMERA COLUMNA FIJA en 64px. Eso garantiza que los íconos
queden SIEMPRE centrados en la misma vertical, no importa el
modo del sidebar. */
/* ─ Brand ─ */
.s-brand {
display: grid;
grid-template-columns: 64px 1fr;
align-items: center;
height: 52px;
flex-shrink: 0;
border-bottom: 1px solid var(--surface-low);
text-decoration: none;
color: var(--on-surface);
overflow: hidden;
}
.s-brand:hover { text-decoration: none; color: var(--on-surface); }
.s-brand-mark {
width: 32px; height: 32px;
background: transparent;
display: flex; align-items: center; justify-content: center;
margin: 0 auto;
overflow: hidden;
}
.s-brand-mark img,
.s-brand-mark svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.s-brand-text {
display: none;
flex-direction: column;
padding-right: var(--space-3);
min-width: 0;
line-height: 1.1;
}
.s-brand-name {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 0.9375rem;
color: var(--on-surface);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s-brand-sub {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--on-surface-muted);
white-space: nowrap;
margin-top: 2px;
}
/* ─ Nav ─ */
.s-nav {
flex: 1;
list-style: none;
margin: 0;
padding: var(--space-2) 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none; /* Oculta scrollbar en Firefox */
}
.s-nav::-webkit-scrollbar { display: none; } /* Oculta scrollbar en Chrome/Safari */
.s-nav li { list-style: none; }
/* Section header (Suite de Gestión, Planificación, ...) */
.s-section {
display: none;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--on-surface-muted);
padding: 10px var(--space-4) var(--space-2);
line-height: 1;
}
.s-section:first-child { padding-top: var(--space-1); }
/* Nav link: Grid 48px (icon column) + 1fr (text) */
.s-link {
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
min-height: 36px;
margin: 1px var(--space-2);
border-radius: var(--radius-md);
color: var(--on-surface-variant);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 500;
transition: background 150ms ease, color 150ms ease;
}
.s-link:hover {
background: var(--surface-low);
color: var(--color-primary);
text-decoration: none;
}
.s-link.is-active {
background: var(--badge-primary-bg);
color: var(--color-primary);
font-weight: 600;
}
.s-link.is-active:hover {
background: var(--badge-primary-bg);
color: var(--color-primary);
}
.s-icon {
width: 16px; height: 16px; /* Reducido de 18px a 16px */
margin: 0 auto; /* Centrado preciso en columna 48px */
flex-shrink: 0;
}
.s-text {
display: none;
padding-right: var(--space-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─ Footer (user + logout) ─ */
.s-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
border-top: 1px solid var(--surface-low);
padding: 6px 0;
}
.sidebar[data-mode="expanded"] .s-footer,
.sidebar[data-mode="hover"]:hover .s-footer {
/* Expandido: cuadrícula horizontal */
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 0;
}
.s-avatar {
width: 32px; height: 32px;
background: var(--badge-primary-bg);
color: var(--color-primary);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 0.78rem;
margin: 0 auto;
}
.s-user-info {
display: none;
flex-direction: column;
min-width: 0;
}
.s-user-name {
font-weight: 600;
font-size: 0.8125rem;
color: var(--on-surface);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s-user-role {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-muted);
}
.s-logout-form { margin: 0; display: flex; }
.s-logout {
display: flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
margin: 0;
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--on-surface-muted);
cursor: pointer;
transition: background 150ms, color 150ms;
}
.sidebar[data-mode="expanded"] .s-logout,
.sidebar[data-mode="hover"]:hover .s-logout {
margin-right: var(--space-3); /* Margen derecho en modo expandido */
}
.s-logout:hover { background: var(--surface-low); color: var(--color-error); }
/* ─ Control (toggle button + popover) ─ */
.s-control {
display: grid;
grid-template-columns: 64px 1fr;
align-items: center;
border-top: 1px solid var(--surface-low);
padding: var(--space-2) 0 var(--space-3) 0;
margin-bottom: var(--space-1);
flex-shrink: 0;
}
.s-control-btn {
width: 28px; height: 28px;
margin: 0 auto;
background: transparent;
border: 1px solid var(--surface-variant);
border-radius: var(--radius-md);
color: var(--on-surface-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 150ms, color 150ms, border-color 150ms;
}
.s-control-btn:hover,
.s-control-btn[aria-expanded="true"] {
background: var(--surface-low);
color: var(--color-primary);
border-color: rgba(0, 35, 111, .18);
}
/* ─ Modos: cuando el sidebar está expandido (manual o hover),
muestran los textos ─ */
.sidebar[data-mode="expanded"] .s-brand-text,
.sidebar[data-mode="hover"]:hover .s-brand-text,
.sidebar[data-mode="expanded"] .s-user-info,
.sidebar[data-mode="hover"]:hover .s-user-info { display: flex; }
.sidebar[data-mode="expanded"] .s-section,
.sidebar[data-mode="hover"]:hover .s-section,
.sidebar[data-mode="expanded"] .s-text,
.sidebar[data-mode="hover"]:hover .s-text { display: block; }
/* ─── 5b. POPOVER (control de modo) ──────────────────────── */
/* Vive FUERA del sidebar, position:fixed posicionado por JS. */
.s-popover {
position: fixed;
width: 240px;
background: var(--surface-lowest);
border: 1px solid var(--surface-variant);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--space-2) 0;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 160ms ease,
transform 160ms cubic-bezier(.22, 1, .36, 1),
visibility 160ms;
z-index: 1000;
}
.s-popover.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.s-popover-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-muted);
padding: var(--space-2) var(--space-4) var(--space-3);
border-bottom: 1px solid var(--surface-low);
margin-bottom: var(--space-2);
}
.s-popover-list {
list-style: none;
margin: 0; padding: 0;
}
.s-popover-item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: 8px var(--space-4);
background: transparent;
border: none;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 500;
color: var(--on-surface-variant);
text-align: left;
transition: background 150ms, color 150ms;
}
.s-popover-item:hover {
background: var(--surface-low);
color: var(--color-primary);
}
.s-popover-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: transparent;
flex-shrink: 0;
}
.s-popover-item.is-active .s-popover-dot { background: var(--color-primary); }
.s-popover-item.is-active {
color: var(--on-surface);
font-weight: 600;
}
/* ─── 5c. GRUPOS COLAPSABLES Y JERARQUÍA VISUAL ─────────────────────────
Patrón Accordion con Árbol Jerárquico Visual:
· El elemento padre (.s-group-btn) tiene mayor peso visual (font-weight: 600).
· La lista de sub-elementos (.s-group-list) tiene sangría (margin-left: 24px)
y una línea guía vertical (border-left) que indica claramente la subordinación.
· Las sub-opciones (.s-link--sub) son compactas con icono de 14px. */
.s-group {
list-style: none;
margin-bottom: 2px;
}
/* Botón padre / categoría principal */
.s-group-btn {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
min-height: 36px;
margin: 1px var(--space-2);
width: calc(100% - var(--space-2) * 2);
border-radius: var(--radius-md);
color: var(--on-surface);
background: transparent;
border: none;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 600;
text-align: left;
transition: background 150ms ease, color 150ms ease;
}
.s-group-btn:hover {
background: var(--surface-low);
color: var(--color-primary);
}
.s-group.has-active > .s-group-btn {
color: var(--color-primary);
}
/* Flecha rotatoria del grupo */
.s-group-arrow {
display: none;
flex-shrink: 0;
margin-right: var(--space-3);
color: var(--on-surface-muted);
transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.s-group.is-open > .s-group-btn .s-group-arrow {
transform: rotate(90deg);
color: var(--color-primary);
}
/* Contenedor de sub-elementos: con sangría clara y línea guía vertical */
.s-group-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 240ms cubic-bezier(.22, 1, .36, 1);
}
.sidebar[data-mode="expanded"] .s-group.is-open > .s-group-list,
.sidebar[data-mode="hover"]:hover .s-group.is-open > .s-group-list {
max-height: 250px;
margin: 2px 0 4px 24px;
padding-left: 6px;
border-left: 2px solid rgba(0, 35, 111, 0.12);
}
/* Sub-opciones hijas (.s-link--sub): visualmente anidadas */
.sidebar[data-mode="expanded"] .s-link--sub,
.sidebar[data-mode="hover"]:hover .s-link--sub {
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
min-height: 32px;
margin: 2px 4px 2px 2px;
padding-right: var(--space-2);
border-radius: var(--radius-sm);
color: var(--on-surface-variant);
font-size: 0.785rem;
font-weight: 500;
transition: background 140ms ease, color 140ms ease;
}
.sidebar[data-mode="expanded"] .s-link--sub:hover,
.sidebar[data-mode="hover"]:hover .s-link--sub:hover {
background: var(--surface-low);
color: var(--color-primary);
}
.sidebar[data-mode="expanded"] .s-link--sub.is-active,
.sidebar[data-mode="hover"]:hover .s-link--sub.is-active {
background: var(--badge-primary-bg);
color: var(--color-primary);
font-weight: 600;
}
/* Iconos de las sub-opciones: más compactos y alineados */
.sidebar[data-mode="expanded"] .s-link--sub .s-icon,
.sidebar[data-mode="hover"]:hover .s-link--sub .s-icon {
width: 14px;
height: 14px;
margin: 0 auto;
opacity: 0.75;
}
.sidebar[data-mode="expanded"] .s-link--sub.is-active .s-icon,
.sidebar[data-mode="hover"]:hover .s-link--sub.is-active .s-icon {
opacity: 1;
}
/* En modo colapsado: la sublista interna se mantiene oculta */
.sidebar[data-mode="collapsed"] .s-group-list,
.sidebar[data-mode="hover"]:not(:hover) .s-group-list {
max-height: 0 !important;
border-left: none !important;
margin: 0 !important;
}
.sidebar[data-mode="expanded"] .s-group-arrow,
.sidebar[data-mode="hover"]:hover .s-group-arrow {
display: block;
}
/* ─── 5d. SUBMENÚS FLOTANTES (FLYOUT POPOVERS EN MODO COLAPSADO) ───── */
.s-group-flyout {
width: 220px;
z-index: 1050;
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
border: 1px solid var(--surface-variant);
border-radius: var(--radius-md);
background: var(--surface-lowest);
padding: var(--space-2) 0;
}
.s-group-flyout .s-popover-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--on-surface-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: var(--space-2) var(--space-4) var(--space-2);
border-bottom: 1px solid var(--surface-low);
margin-bottom: var(--space-2);
}
.s-group-flyout .s-popover-item {
text-decoration: none;
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--on-surface-variant);
transition: background 150ms ease, color 150ms ease;
border-radius: var(--radius-sm);
margin: 2px var(--space-2);
padding: 8px var(--space-3);
width: calc(100% - var(--space-2) * 2);
box-sizing: border-box;
font-size: 0.8125rem;
font-weight: 500;
}
.s-group-flyout .s-popover-item:hover {
background: var(--surface-low);
color: var(--color-primary);
text-decoration: none;
}
.s-group-flyout .s-popover-item.is-active {
background: var(--badge-primary-bg);
color: var(--color-primary);
font-weight: 600;
}
.s-group-flyout .s-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ─── 5e. RESPONSIVE HEIGHT OPTIMIZATION (pantallas de baja altura) ── */
@media (max-height: 820px) {
.s-brand { height: 46px; }
.s-brand-mark { width: 28px; height: 28px; }
.s-link, .s-group-btn { min-height: 32px; margin: 1px var(--space-1); }
.s-icon { width: 15px; height: 15px; }
.s-footer { padding: 4px 0; gap: 3px; }
.s-avatar { width: 28px; height: 28px; font-size: 0.72rem; }
.s-logout { width: 26px; height: 26px; }
.s-control { padding: 3px 0; }
.s-control-btn { width: 26px; height: 26px; }
}
/* ─── 6. TOPBAR ──────────────────────────────────────────── */
.topbar-title {
flex: 0 0 auto; /* NO crece — deja espacio para los chips */
font-family: 'Manrope', sans-serif;
font-size: 1.25rem; font-weight: 700;
color: var(--on-surface);
white-space: nowrap;
}
/* Meta block (al lado del título): chips de filtros activos.
Toma el espacio restante con flex:1 + scroll horizontal si no entran. */
.topbar-meta {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-2);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.topbar-meta::-webkit-scrollbar { display: none; }
.topbar-chips {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-2);
border-left: 1px solid var(--surface-low);
margin-left: var(--space-2);
padding-left: var(--space-4);
}
/* Wordmark "TERMOGEL" al final de los chips. Renderizado como texto con
Manrope 800 — escala perfecto sin imagen. Color --on-surface (charcoal
oscuro como el logo real). Separador sutil para distinguir del último
chip. */
.topbar-logo {
height: 48px;
width: auto;
margin-left: var(--space-3);
padding-left: var(--space-4);
border-left: 1px solid var(--surface-low);
flex-shrink: 0;
object-fit: contain;
user-select: none;
}
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
/* Botón de acción en la topbar (Optimizar rango) — discreto, no el navy
primary chunky. Estilo: surface-low bg + hover badge-blue, igual look
que los chips del filter summary. */
.topbar-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px var(--space-3);
background: var(--surface-low);
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--on-surface-variant);
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.topbar-action-btn:hover {
background: var(--badge-primary-bg);
color: var(--color-primary);
}
.topbar-action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.topbar-action-btn svg { flex-shrink: 0; }
.topbar-replan-msg {
font-size: 0.75rem;
color: var(--on-surface-muted);
font-weight: 500;
white-space: nowrap;
}
/* En mobile, ocultar los chips de topbar (espacio limitado) */
@media (max-width: 900px) {
.topbar-meta { display: none; }
}
/* ─── Responsive: mobile sidebar bottom-bar ───────────────── */
@media (max-width: 768px) {
.sidebar {
top: auto; bottom: 0; left: 0; right: 0;
width: 100% !important;
height: auto;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: 0 -4px 12px rgba(23,28,31,.08);
flex-direction: row;
overflow-x: auto;
}
.s-brand, .s-footer, .s-control, .s-section { display: none; }
.s-nav { display: flex; padding: var(--space-2); flex-direction: row; flex: 1; }
.s-link { grid-template-columns: 40px; min-height: 40px; }
.s-text { display: none !important; }
.main-wrapper, .sidebar[data-mode="expanded"] ~ .main-wrapper {
margin-left: 0;
padding-bottom: 72px;
}
.topbar { margin: var(--space-3); }
}
/* ─── 7. BUTTONS ───────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2);
padding: 10px var(--space-6);
border-radius: var(--radius-md);
font-family: 'Inter', sans-serif;
font-size: 0.875rem; font-weight: 600;
border: none; cursor: pointer;
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
text-decoration: none; white-space: nowrap;
letter-spacing: 0.01em;
}
.btn-primary {
background: var(--color-primary);
color: var(--on-primary);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-sm);
}
.btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-md);
transform: translateY(-1px);
text-decoration: none; color: var(--on-primary);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-teal {
background: var(--color-teal);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), var(--shadow-sm);
}
.btn-teal:hover { background: var(--color-teal-light); transform: translateY(-1px); color: #fff; text-decoration: none; }
.btn-outline {
background: var(--surface-lowest);
color: var(--color-primary);
border: 1px solid rgba(0,35,111,.18);
box-shadow: var(--shadow-sm);
}
.btn-outline:hover {
background: var(--surface-low);
box-shadow: var(--shadow-md);
text-decoration: none; color: var(--color-primary);
}
.btn-danger {
background: var(--color-error-container);
color: var(--color-error);
border: none;
}
.btn-danger:hover { background: var(--color-error); color: #fff; text-decoration: none; }
.btn-sm { padding: 6px var(--space-4); font-size: 0.8125rem; }
.btn-xs { padding: 4px var(--space-3); font-size: 0.75rem; }
.btn-block { width: 100%; }
/* ─── 8. CARDS ─────────────────────────────────────────────── */
.card {
background: var(--surface-lowest);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--transition), background var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
/* card-pulse: sin border lateral (a pedido del usuario — la línea
teal se leía como rayón oscuro y no encajaba). */
.card-pulse { /* sin border */ }
.card-header {
padding: var(--space-5) var(--space-6);
display: flex; align-items: center; justify-content: space-between;
}
.card-title {
font-family: 'Inter', sans-serif;
font-size: 0.9375rem; font-weight: 600;
color: var(--on-surface);
}
.card-body { padding: var(--space-6); }
/* ─── 9. KPI CARDS ─────────────────────────────────────────── */
.kpi-grid {
display: grid;
/* auto-fit colapsa columnas vacías; auto-fill las mantiene. Para esta vista
queremos que las tarjetas se ensanchen cuando hay pocas, no que queden huecos. */
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-8);
}
/* Tablet / mobile: forzar 2 columnas para que las tarjetas no se aplasten */
@media (max-width: 768px) {
.kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
}
@media (max-width: 480px) {
.kpi-grid {
grid-template-columns: 1fr;
}
}
/* Intervenciones es el KPI principal: ocupa 2 columnas de la grilla para
darle más aire al estado (Planificando / Faltan X de Y / ETA). En mobile
de 1 columna vuelve a ancho normal. */
#planning-kpi-card { grid-column: span 2; }
@media (max-width: 480px) {
#planning-kpi-card { grid-column: auto; }
}
/* Tarjeta "Horas imputadas por zona × tipo": ancho completo, separada de la
sección siguiente. La tabla interna reutiliza la clase .table del sistema. */
.kisat-hours-card { margin-bottom: var(--space-8); }
.kisat-hours-card.is-loading { opacity: 0.55; pointer-events: none; }
.kisat-hours-empty {
color: var(--on-surface-muted);
font-size: 0.8125rem;
padding: var(--space-2) 0;
}
/* Barra de herramientas de la tarjeta: navegación de mes + export. */
.hours-matrix-tools { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hours-month-nav { display: inline-flex; align-items: center; gap: var(--space-2); }
.hours-month-nav .btn { min-width: 34px; padding-left: 8px; padding-right: 8px; }
.hours-month-nav .btn:disabled { opacity: 0.4; cursor: default; }
.hours-month-label {
min-width: 116px; text-align: center;
font-size: 0.8125rem; font-weight: 600; color: var(--on-surface);
}
/* Tabla "Capacidad vs carga por zona": scroll horizontal si no entra, saldo
coloreado (verde superávit / rojo déficit) y nota al pie. */
.table-scroll { overflow-x: auto; }
.capload-table thead th { vertical-align: middle; }
.capload-table th small { display: block; font-weight: 600; opacity: 0.7; text-transform: none; letter-spacing: 0; }
.capload-saldo.is-neg { color: #b91c1c; }
.capload-saldo.is-pos { color: #047857; }
/* Desplazamiento entre zonas: la capacidad sigue al técnico (mismos colores
que el saldo, pero sin negrita: es un ajuste, no el resultado). */
/* Confianza de la previsión: alta = teal, media = ámbar, baja = rojo suave. */
.capload-conf { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
vertical-align: middle; cursor: help; }
.capload-conf.is-alta { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
.capload-conf.is-media { background: #fef3c7; color: #92400e; }
.capload-conf.is-baja { background: var(--badge-error-bg); color: var(--badge-error-text); }
/* Mes cerrado: no hay confianza que medir, es un dato. Azul = dato real. */
.capload-conf.is-real { background: #dbeafe; color: #1e40af; }
.capload-desp { font-variant-numeric: tabular-nums; cursor: help; }
/* % de MTO agendado que se ejecuta de verdad (media histórica). */
.capload-mtopct { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
font-size: 0.68rem; font-weight: 700; vertical-align: middle; }
.capload-mtopct.is-ok { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
.capload-mtopct.is-warn { background: #fef3c7; color: #92400e; }
.capload-mtopct.is-low { background: var(--badge-error-bg); color: var(--badge-error-text); }
/* Mes cerrado: % ejecutado sobre lo agendado. Azul = es un DATO, no una calibración. */
.capload-mtopct.is-real { background: #dbeafe; color: #1e40af; cursor: help; }
/* Aviso de que la tarjeta está en el método de cálculo anterior. */
.capload-cmp { margin-left: 10px; vertical-align: middle; }
.capload-closed { margin: 0 0 var(--space-3); padding: 8px 14px; border-radius: var(--radius-md);
background: var(--badge-teal-bg); color: var(--badge-teal-text); font-size: 0.82rem; }
.capload-legacy { margin: 0 0 var(--space-3); padding: 8px 14px; border-radius: var(--radius-md);
background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: 0.82rem; }
.capload-desp.is-neg { color: #b91c1c; }
.capload-desp.is-pos { color: #047857; }
.capload-saldo.is-eq { color: #1e40af; }
.capload-falta { color: #b91c1c; }
.capload-sobra { color: #047857; }
.capload-tipcell { cursor: help; }
/* Tooltip de composición del reactivo. position:fixed (posicionado por JS)
para que NO lo recorte el overflow del .table-scroll. */
.capload-tip {
display: none;
position: fixed;
z-index: 60;
padding: 10px 12px;
background: var(--surface-lowest);
color: var(--on-surface);
border: 1px solid var(--surface-variant);
border-radius: 10px;
box-shadow: var(--shadow-md);
font-size: 0.78rem;
font-weight: 400;
line-height: 1.3;
text-align: left;
white-space: nowrap;
pointer-events: none;
}
.capload-tip.is-visible { display: block; }
.capload-tip-head {
font-weight: 700;
color: var(--color-teal);
margin-bottom: 7px;
padding-bottom: 5px;
border-bottom: 1px solid var(--surface-variant);
}
.capload-tip-grid {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 4px 16px;
font-variant-numeric: tabular-nums;
}
.capload-tip-grid > span { text-align: right; }
.capload-tip-grid > span:nth-child(4n+1) { text-align: left; padding-right: 8px; }
.capload-tip-th { font-size: 0.68rem; font-weight: 600; color: var(--on-surface-muted); }
.capload-tip-tot {
font-weight: 700;
border-top: 1px solid var(--surface-variant);
padding-top: 5px;
margin-top: 3px;
}
.capload-tip-cap { color: var(--on-surface-muted); }
.capload-intro {
color: var(--on-surface-muted);
font-size: 0.8125rem;
margin: 0 0 var(--space-4);
line-height: 1.5;
}
.capload-note {
color: var(--on-surface-muted);
font-size: 0.75rem;
margin: var(--space-3) 0 0;
line-height: 1.5;
}
/* ── Estado clickeable + modal "Desviación teóricas vs reales" ── */
/* El badge de estado sigue idéntico; solo cursor de mano + leve brillo (sin borde). */
.deviation-open { cursor: pointer; }
.deviation-open:hover { filter: brightness(0.93); }
.deviation-open:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 1px; }
body.deviation-lock { overflow: hidden; }
.deviation-overlay {
position: fixed; inset: 0; z-index: 3000; display: none;
align-items: flex-start; justify-content: center;
padding: 4vh 16px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px);
transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.deviation-overlay.is-open { display: flex; }
.deviation-modal {
width: 100%; max-width: 1240px; max-height: 92vh;
display: flex; flex-direction: column; overflow: hidden;
background: var(--surface-lowest); color: var(--on-surface);
border-radius: 14px; box-shadow: var(--shadow-md);
transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Pantalla completa (animado) */
.deviation-overlay.is-full { padding: 0; }
.deviation-overlay.is-full .deviation-modal { max-width: 100vw; max-height: 100vh; border-radius: 0; }
.deviation-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.deviation-full {
border: 0; background: transparent; color: var(--on-surface-muted);
cursor: pointer; padding: 5px 7px; border-radius: 8px; line-height: 0;
}
.deviation-full:hover { background: var(--surface-low); color: var(--color-teal); }
.devfull-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.devfull-ic-min { display: none; }
.deviation-overlay.is-full .devfull-ic-expand { display: none; }
.deviation-overlay.is-full .devfull-ic-min { display: inline; }
/* Animación de apertura / cierre del modal */
.deviation-overlay.is-open { animation: devOverlayFade 0.22s ease both; }
.deviation-modal.is-in { animation: devModalIn 0.3s cubic-bezier(0.34, 1.28, 0.5, 1) both; }
.deviation-overlay.is-closing { animation: devOverlayFadeOut 0.18s ease both; }
.deviation-overlay.is-closing .deviation-modal { animation: devModalOut 0.18s ease both; }
@keyframes devOverlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes devModalIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes devOverlayFadeOut { to { opacity: 0; } }
@keyframes devModalOut { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
.deviation-overlay.is-open, .deviation-modal.is-in, .deviation-overlay.is-closing, .deviation-overlay.is-closing .deviation-modal { animation: none; }
}
.deviation-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: 16px 20px; border-bottom: 1px solid var(--surface-variant);
}
.deviation-title { margin: 0; font-size: 1.05rem; color: var(--color-teal); }
.deviation-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--on-surface-muted); }
.deviation-close {
border: 0; background: transparent; color: var(--on-surface-muted);
font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.deviation-close:hover { background: var(--surface-low); color: var(--on-surface); }
.deviation-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.deviation-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 20px 0; }
.deviation-tab {
border: 0; background: transparent; cursor: pointer; padding: 7px 14px;
font-size: 0.82rem; font-weight: 600; color: var(--on-surface-muted);
border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent;
}
.deviation-tab:hover { color: var(--on-surface); background: var(--surface-low); }
.deviation-tab.is-active { color: var(--color-teal); border-bottom-color: var(--color-teal); }
.deviation-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; background: var(--surface); }
.deviation-pane { display: none; }
.deviation-pane.is-active { display: block; }
.deviation-row { cursor: pointer; }
.deviation-row:hover { background: var(--surface); }
.deviation-row.is-static { cursor: default; }
/* Barra de totales = tarjeta blanca separada (mismo patrón que el panel de
filtros / previsualizador del dashboard). */
.deviation-summary {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px;
margin: 0 0 16px; padding: 14px 18px;
background: var(--surface-lowest); border: 1px solid var(--surface-variant);
border-radius: 12px; box-shadow: var(--shadow-sm);
}
/* La tabla va en su propia tarjeta blanca, separada de la barra por el gris del cuerpo. */
.deviation-tablecard {
background: var(--surface-lowest); border: 1px solid var(--surface-variant);
border-radius: 12px; box-shadow: var(--shadow-sm); padding: 12px 16px;
}
.deviation-stat { display: flex; flex-direction: column; gap: 2px; }
.deviation-stat em { font-style: normal; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-surface-muted); }
.deviation-stat strong { color: var(--on-surface); font-size: 0.98rem; font-weight: 700; }
.deviation-stat .is-over { color: #b91c1c; }
.deviation-stat .is-under { color: #047857; }
.deviation-diff.is-over { color: #b91c1c; font-weight: 600; }
.deviation-diff.is-under { color: #047857; font-weight: 600; }
.deviation-flag { text-align: center; font-weight: 700; }
.deviation-flag.is-ok { color: #047857; }
.deviation-flag.is-no { color: var(--on-surface-muted); }
.deviation-hint { margin: 0 0 10px; font-size: 0.78rem; color: var(--on-surface-muted); }
.deviation-note {
margin: 10px 0 0; font-size: 0.8rem; color: var(--on-surface-variant);
background: var(--surface-low); border-radius: 8px; padding: 8px 12px;
}
.deviation-empty, .deviation-loading { padding: 24px 20px; text-align: center; color: var(--on-surface-muted); }
.deviation-drill { flex: 1; min-height: 0; overflow-y: auto; display: none; padding: 16px 20px; background: var(--surface); }
.deviation-modal.is-drilled .deviation-main { display: none; }
.deviation-modal.is-drilled .deviation-drill { display: block; }
.deviation-drill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.deviation-drill-title { font-weight: 700; color: var(--on-surface); }
/* Buscador + orden tipo Excel en la tabla de sedes. */
.deviation-toolbar { margin: 0 0 10px; }
.deviation-search { max-width: 280px; }
.deviation-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.deviation-table th.sortable:hover { color: var(--color-teal); }
.deviation-table th.sortable .sort-ind::after { content: '↕'; font-size: 0.7em; opacity: 0.35; margin-left: 3px; }
.deviation-table th.sortable.is-asc .sort-ind::after { content: '▲'; opacity: 0.9; }
.deviation-table th.sortable.is-desc .sort-ind::after { content: '▼'; opacity: 0.9; }
/* Intervenciones expandibles (técnicos anidados). */
.deviation-int-row { cursor: pointer; }
.deviation-int-row.is-static { cursor: default; }
.deviation-int-row:hover:not(.is-static) { background: var(--surface); }
.deviation-chev-col { width: 28px; text-align: center; }
.deviation-chev { display: inline-block; transition: transform 0.15s ease; color: var(--on-surface-muted); }
.deviation-int-row.is-open { background: var(--surface); }
.deviation-int-row.is-open .deviation-chev { transform: rotate(180deg); color: var(--color-teal); }
.deviation-int-row { transition: background 0.12s ease; }
.deviation-int-techs { display: none; }
.deviation-int-techs.is-open { display: table-row; }
.deviation-int-techs.is-open .deviation-subtable { animation: devTechFade 0.28s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top; }
@keyframes devTechFade { from { opacity: 0; transform: translateY(-10px) scaleY(0.96); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
.deviation-int-techs > td { padding: 0; background: var(--surface); border-top: 0; }
.deviation-subtable { margin: 2px 0 10px; width: 100%; font-size: 0.82rem; border-left: 3px solid var(--color-teal); }
.deviation-subtable th { color: var(--on-surface-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.deviation-subtable th:first-child, .deviation-subtable td:first-child { padding-left: 16px; }
.deviation-kisat-link { color: var(--color-teal); text-decoration: none; font-weight: 600; white-space: nowrap; }
.deviation-kisat-link:hover { text-decoration: underline; }
/* Histórico: barras (teóricas vs reales) + barras divergentes (desvío diff%). */
.deviation-hist-chart { margin: 6px 0 14px; }
.deviation-hist-bars { width: 100%; height: auto; display: block; }
.deviation-hist-bar-teo { fill: #94a3b8; }
.deviation-hist-bar-real { fill: var(--color-teal); }
.deviation-hist-cur { fill: var(--surface); }
.deviation-hist-lbl { fill: var(--on-surface-muted); font-size: 11px; }
.deviation-hist-lbl.is-current { fill: var(--on-surface); font-weight: 700; }
.deviation-hist-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 0.74rem; color: var(--on-surface-muted); margin-top: 6px; }
.deviation-hist-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.deviation-hist-swatch.is-teo { background: #94a3b8; }
.deviation-hist-swatch.is-real { background: var(--color-teal); }
.deviation-hist-bar-teo.is-pending { fill: var(--surface-lowest); stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 2; }
.deviation-hist-lbl-pend { fill: #b45309; font-size: 9px; font-weight: 600; }
.deviation-hist-swatch.is-pend { background: var(--surface-lowest); border: 1.5px dashed #94a3b8; }
/* Barras divergentes del desvío: subestimó (rojo, arriba) / sobrestimó (verde, abajo). */
.deviation-hist-diverge { margin: 4px 0 16px; padding: 10px 14px 8px; background: var(--surface); border-radius: 10px; }
.deviation-hist-diverge-cap { display: block; font-size: 0.74rem; font-weight: 600; color: var(--on-surface-muted); margin-bottom: 2px; }
.deviation-hist-dvg { width: 100%; height: auto; display: block; }
/* Animación al cargar: barras teóricas/reales crecen desde la base (suben). */
.deviation-hist-bar-teo, .deviation-hist-bar-real {
transform-box: fill-box; transform-origin: center bottom;
animation: devBarGrow 0.6s cubic-bezier(0.34, 1.25, 0.64, 1) both;
}
@keyframes devBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Divergente: se revela de izquierda a derecha. */
.deviation-hist-dvg { animation: devRevealLR 0.75s ease both; }
@keyframes devRevealLR { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
.deviation-hist-bar-teo, .deviation-hist-bar-real, .deviation-hist-dvg { animation: none; }
}
.deviation-dvg-zero { stroke: var(--on-surface-muted); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.45; }
.deviation-dvg-bar.is-over { fill: #dba7a1; }
.deviation-dvg-bar.is-under { fill: #8cc3b1; }
.deviation-dvg-bar.is-current { stroke: #c99a55; stroke-width: 2; }
.deviation-dvg-bar.is-review { stroke: #c99a55; stroke-width: 2; }
.deviation-dvg-bar.is-critica { stroke: #b3261e; stroke-width: 2.5; }
.deviation-dvg-val { font-size: 11px; font-weight: 700; fill: var(--on-surface-variant); }
.deviation-dvg-val-pct { font-size: 9.5px; font-weight: 500; fill: var(--on-surface-muted); }
.dev-dvg-band { fill: var(--color-teal); fill-opacity: 0.05; }
.dev-dvg-limit { stroke-width: 1; stroke-dasharray: 5 3; fill: none; }
.dev-dvg-limit.is-rev { stroke: #c99a55; opacity: 0.7; }
.dev-dvg-limit.is-crit { stroke: #b3261e; opacity: 0.55; }
.dev-dvg-limitlbl { font-size: 8.5px; font-weight: 600; letter-spacing: 0.03em; }
.dev-dvg-limitlbl.is-rev { fill: #c99a55; }
.dev-dvg-limitlbl.is-crit { fill: #b3261e; }
.dev-dvg-curband { fill: #c99a55; fill-opacity: 0.08; }
.dev-dvg-curlbl { font-size: 8px; font-weight: 700; fill: #c99a55; letter-spacing: 0.05em; }
.dev-saldo { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 10px 0 2px; padding: 10px 14px; border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface-container-low); }
.dev-saldo-item { display: flex; flex-direction: column; gap: 1px; }
.dev-saldo-lbl { font-size: 10.5px; color: var(--on-surface-muted); }
.dev-saldo-val { font-size: 15px; font-weight: 700; color: var(--on-surface); }
.dev-saldo-val.is-pos { color: #b3261e; }
.dev-saldo-val.is-neg { color: #2e7d5b; }
.dev-saldo-val.is-quiet { color: var(--on-surface-variant); font-weight: 600; }
.deviation-hist-swatch.is-over { background: #dba7a1; }
.deviation-hist-swatch.is-under { background: #8cc3b1; }
.deviation-hist-swatch.is-cur { background: var(--surface-lowest); border: 2px solid #b45309; }
.deviation-hist-rowcur { background: var(--surface); font-weight: 600; }
.deviation-hist-rowpend td { color: var(--on-surface-muted); }
/* ── Pestaña / diagnóstico Informes (motor decisional) ── */
.deviation-tab-informes.is-active { color: var(--color-teal); border-bottom-color: var(--color-teal); }
/* Sub-tabs del drill de sede (Desviación | Informes). */
.deviation-subtabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--surface-variant); }
.deviation-subtab { border: 0; background: transparent; cursor: pointer; padding: 7px 16px; font-size: 0.82rem; font-weight: 600; color: var(--on-surface-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.deviation-subtab:hover { color: var(--on-surface); }
.deviation-subtab.is-active { color: var(--color-teal); border-bottom-color: var(--color-teal); }
.deviation-subpane { display: none; }
.deviation-subpane.is-active { display: block; }
/* Tarjeta de diagnóstico. */
.deviation-diag { background: var(--surface-lowest); border: 1px solid var(--surface-variant); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px 18px; margin: 0 0 16px; }
.deviation-diag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.deviation-diag-title { margin: 0; font-size: 1rem; color: var(--color-teal); }
.deviation-diag-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--on-surface-muted); }
.deviation-diag-verdict { font-size: 0.82rem; align-self: center; }
.deviation-diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 14px; }
.deviation-diag-stat { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.deviation-diag-stat em { font-style: normal; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-surface-muted); }
.deviation-diag-stat strong { font-size: 1.15rem; font-weight: 700; color: var(--on-surface); }
.deviation-diag-stat span { font-size: 0.72rem; color: var(--on-surface-muted); }
.deviation-diag-stat .is-over { color: #b45309; }
.deviation-diag-stat .is-under { color: #047857; }
.deviation-diag-reco { color: var(--color-teal) !important; }
.deviation-diag-patron { font-size: 0.84rem; color: var(--on-surface-variant); }
.deviation-diag-patron p { margin: 0 0 6px; }
.deviation-diag-acciones { margin-top: 12px; }
.deviation-diag-acciones em { font-style: normal; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-surface-muted); }
.deviation-diag-acciones ol { margin: 6px 0 0; padding-left: 20px; font-size: 0.84rem; color: var(--on-surface); }
.deviation-diag-acciones li { margin-bottom: 3px; }
.deviation-diag-calidad { margin: 12px 0 0; font-size: 0.8rem; color: var(--on-surface-variant); background: var(--surface); border-radius: 8px; padding: 8px 12px; }
.deviation-diag-calidad.is-warn { background: #faece7; color: #993c1d; }
.deviation-diag-tecnicos { margin: 12px 0 0; font-size: 0.8rem; color: var(--on-surface-variant); border-left: 3px solid #94a3b8; padding: 4px 0 4px 12px; }
.deviation-noeval { color: var(--on-surface-muted); font-size: 0.78rem; font-style: italic; }
.deviation-informe-accion { font-size: 0.8rem; color: var(--on-surface-variant); }
.deviation-informe-tecs { font-size: 0.8rem; color: var(--on-surface-variant); min-width: 180px; }
.deviation-informe-tecs em { font-style: normal; color: var(--on-surface-muted); }
.deviation-informe-tecs em.is-over { color: #b45309; font-weight: 700; }
.deviation-diag-sedes { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.84rem; }
.deviation-diag-sedes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--surface-variant); }
.deviation-diag-sedes li:last-child { border-bottom: 0; }
.deviation-diag-sedelink { color: var(--color-teal); font-weight: 600; text-decoration: none; cursor: pointer; }
.deviation-diag-sedelink:hover { text-decoration: underline; }
.deviation-diag-sede2 { font-weight: 600; color: var(--on-surface); }
.deviation-diag-reco2 { font-weight: 700; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.deviation-diag-hint2 { color: var(--on-surface-muted); font-size: 0.78rem; }
/* Informe redactado (prosa). */
.deviation-report { background: var(--surface-lowest); border: 1px solid var(--surface-variant); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 18px 22px; margin: 0 0 16px; }
.deviation-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.deviation-report-title { margin: 0; font-size: 1rem; color: var(--color-teal); }
.deviation-report-badge { font-size: 0.8rem; }
.deviation-report-p { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.7; color: var(--on-surface); }
.deviation-report-p:last-of-type { margin-bottom: 0; }
.deviation-report-hint { margin: 16px 0 4px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-surface-muted); }
.deviation-report-acc { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.65; color: var(--on-surface); }
.deviation-report-detail { margin: 0 0 16px; }
.deviation-report-detail > summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--color-teal); padding: 8px 0; }
.deviation-report-detail[open] > summary { margin-bottom: 8px; }
.deviation-report-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.deviation-report-kpi { flex: 1 1 120px; background: var(--surface); border-radius: 10px; padding: 10px 13px; display: flex; flex-direction: column; gap: 1px; }
.deviation-report-kpi em { font-style: normal; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-surface-muted); }
.deviation-report-kpi strong { font-size: 1.2rem; font-weight: 700; color: var(--on-surface); }
.deviation-report-kpi i { font-style: normal; font-size: 0.7rem; color: var(--on-surface-muted); }
.deviation-report-sec { margin: 0 0 18px; }
.deviation-report-sec:last-child { margin-bottom: 0; }
.deviation-report-sec h5 { margin: 0 0 7px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal); }
.deviation-report-secnote { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--on-surface-muted); }
.deviation-report-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 0 0 7px; }
.deviation-report-fold > summary::-webkit-details-marker { display: none; }
.deviation-report-fold > summary::before { content: '▸'; color: var(--color-teal); font-size: 0.7rem; transition: transform 0.15s ease; }
.deviation-report-fold[open] > summary::before { transform: rotate(90deg); }
.deviation-report-foldtitle { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal); }
.deviation-report-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-variant); color: var(--on-surface); font-size: 0.72rem; font-weight: 700; }
.deviation-count-warn { background: #fef3c7; color: #b45309; }
.deviation-count-alert { background: #f9dedc; color: #b3261e; }
/* Informe: usa el .kpi-card REAL del dashboard tal cual (sin reinterpretar tamaños);
sólo se ajusta el margen del grid al contexto del informe. */
.deviation-kpi-grid { margin: 4px 0 var(--space-5); }
/* Informe: barra de composición (mismo patrón que .os-statusbar) */
.deviation-compbar { height: 20px; margin: 2px 0; }
.deviation-compbar > span { transition: width 0.5s ease-out; }
.dcomp-sub { background: #dba7a1; }
.dcomp-baj { background: #8cc3b1; }
.dcomp-ok { background: var(--color-teal); }
.dcomp-rev { background: #c99a55; }
.dcomp-nd { background: #cbd5e1; }
/* Informe: secciones como TARJETAS PLEGABLES (mismo patrón que .issues-card) */
.deviation-foldcard { background: var(--surface-lowest); border: 1px solid var(--surface-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 0 0 var(--space-3); overflow: hidden; }
.deviation-foldcard > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); transition: background 0.15s ease; }
.deviation-foldcard > summary::-webkit-details-marker { display: none; }
.deviation-foldcard > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--on-surface-muted); border-bottom: 2px solid var(--on-surface-muted); transform: rotate(45deg); transition: transform 0.18s ease; flex-shrink: 0; }
.deviation-foldcard[open] > summary::after { transform: rotate(225deg); }
.deviation-foldcard > summary:hover { background: var(--surface-low); }
.deviation-foldcard[open] > summary { border-bottom: 1px solid var(--surface-low); }
.deviation-foldicon { font-size: 1rem; opacity: 0.7; line-height: 1; }
.deviation-foldtitle2 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal); }
.deviation-foldsub { font-size: 0.75rem; color: var(--on-surface-muted); font-weight: 500; }
.deviation-foldbody { padding: var(--space-4) var(--space-5); }
.deviation-foldbody > :first-child { margin-top: 0; }
.deviation-foldbody > :last-child { margin-bottom: 0; }
/* Informe: tarjeta estática (acciones) con la misma chapa que las plegables */
.deviation-report-card { background: var(--surface-lowest); border: 1px solid var(--surface-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-5); }
.deviation-report-card > h5 { margin: 0 0 var(--space-3); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal); }
/* Sede: resultado ejecutivo (grid label/valor) + seguimiento + recomendación */
.deviation-exec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 var(--space-6); }
.deviation-exec-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 7px 0; border-bottom: 1px solid var(--surface-low); font-size: 0.86rem; }
.deviation-exec-lbl { color: var(--on-surface-muted); }
.deviation-exec-val { font-weight: 700; color: var(--on-surface); text-align: right; font-variant-numeric: tabular-nums; }
.deviation-follow { margin: 0; padding-left: 18px; }
.deviation-follow li { margin: 0 0 7px; line-height: 1.6; font-size: 0.9rem; color: var(--on-surface); }
.deviation-follow li:last-child { margin-bottom: 0; }
.deviation-reco-card { border-left: 3px solid var(--color-teal); }
/* Informe: secciones con relieve (acento teal antes del título + viñetas teal) */
.deviation-report-card > h5 { display: flex; align-items: center; gap: var(--space-2); }
.deviation-report-card > h5::before { content: ''; width: 4px; height: 13px; border-radius: 2px; background: var(--color-teal); flex-shrink: 0; }
.deviation-follow { list-style: none; padding-left: 0; }
.deviation-follow li { position: relative; padding-left: 20px; }
.deviation-follow li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-teal); opacity: 0.55; }
.deviation-report-acc li::marker { color: var(--color-teal); font-weight: 700; }
.deviation-report-summary { background: linear-gradient(180deg, rgba(0,72,72,0.03), transparent 60%); }
/* Informe: gráficos SVG (mismo lenguaje que los charts .viz-* del dashboard) */
.deviation-chart-svg { width: 100%; height: auto; max-height: 320px; overflow: visible; display: block; }
/* Ejes de los gráficos del informe (fuera de .viz-canvas): mismo estilo que los charts del dashboard */
.deviation-chart-svg .viz-grid-line { stroke: var(--surface-low); stroke-width: 1; }
.deviation-chart-svg .viz-axis-tick { font-size: 10.5px; fill: var(--on-surface-muted); font-weight: 500; }
/* Burbuja impacto × recurrencia */
.dev-qzone { fill: var(--color-teal); opacity: 0.06; }
.dev-qline { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.65; }
.dev-qlbl { font-size: 9px; fill: #94a3b8; opacity: 0.6; letter-spacing: 0.04em; text-transform: uppercase; }
.dev-bub { fill-opacity: 0.55; stroke: #fff; stroke-width: 1.25; transition: fill-opacity 0.15s ease; }
.dev-bub:hover { fill-opacity: 0.82; }
.dev-bub-sub { fill: #dba7a1; } /* real > teórica → faltan horas (subir) */
.dev-bub-sobre { fill: #8cc3b1; } /* real < teórica → sobran horas (bajar) */
.dev-bub-mix { fill: #c99a55; } /* direcciones opuestas → contradictorio (investigar) */
.dev-bub-audit { fill: none; stroke: #b3261e; stroke-width: 2; }
.dev-bubble-lbl { font-size: 9.5px; fill: var(--on-surface-muted); font-weight: 600; }
.dev-bubble-lbl-audit { fill: #b3261e; font-weight: 700; }
/* Heatmap mensual */
.dev-heatmap-cell { stroke: #fff; stroke-width: 2; transition: opacity 0.15s ease; }
.dev-heatmap-cell:hover { opacity: 0.8; cursor: pointer; }
.dev-hm-ok { fill: #004848; }
.dev-hm-sub { fill: #dba7a1; }
.dev-hm-sobre { fill: #8cc3b1; }
.dev-hm-rev { fill: #c99a55; }
.dev-hm-nd { fill: #eef2f7; }
/* Sede: serie temporal (teórica/esperada/real + banda) */
.dev-serie-band { fill: var(--color-teal); fill-opacity: 0.10; }
.dev-serie-expected { stroke: #7a9e9e; stroke-width: 1.5; }
.dev-serie-teo { fill: none; stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 5 3; }
.dev-serie-real { fill: none; stroke: var(--color-teal); stroke-width: 2.5; stroke-linejoin: round; }
.dev-serie-teodot { fill: #94a3b8; }
.dev-serie-dot { fill: var(--color-teal); }
.dev-serie-cur { fill: var(--color-teal); stroke: #c99a55; stroke-width: 2.5; }
/* Sede: control robusto (mediana ± MAD) */
.dev-ctrl-band { fill: #8cc3b1; fill-opacity: 0.15; }
.dev-ctrl-rev { stroke: #c99a55; stroke-width: 1.3; stroke-dasharray: 5 3; }
.dev-ctrl-median { stroke: var(--color-teal); stroke-width: 1.5; }
.dev-ctrl-lbl { fill: var(--on-surface-muted); font-size: 9.5px; }
.dev-ctrl-link { fill: none; stroke: #cbd5e1; stroke-width: 1.5; }
.dev-ctrl-ring { fill: none; stroke: #c99a55; stroke-width: 2.5; }
.dev-ctrl-pt { stroke: #fff; stroke-width: 1.2; }
.dev-ctrl-pt-normal { fill: var(--color-teal); }
.dev-ctrl-pt-revision { fill: #c99a55; }
.dev-ctrl-pt-anomala { fill: #dba7a1; }
.dev-ctrl-curband { fill: #64748b; fill-opacity: 0.10; }
.dev-ctrl-curlbl { fill: #64748b; font-size: 8px; font-weight: 700; letter-spacing: 0.05em; }
.os-dot-ring { background: transparent !important; border-width: 2px; border-style: solid; box-sizing: border-box; }
/* Sede: factor corrector (real/teórica) */
.dev-fac-area { stroke: none; }
.dev-fac-up { fill: #dba7a1; fill-opacity: 0.12; }
.dev-fac-down { fill: #8cc3b1; fill-opacity: 0.12; }
.dev-fac-ref { stroke: #94a3b8; stroke-width: 1.5; }
.dev-fac-line { fill: none; stroke: #cbd5e1; stroke-width: 1.75; stroke-linejoin: round; }
.dev-fac-dot { stroke: #fff; stroke-width: 1.2; fill: var(--color-teal); }
.dev-fac-dot-ok { fill: #8cc3b1; }
.dev-fac-dot-sobre { fill: #dba7a1; }
.dev-fac-dot-sub { fill: #c99a55; }
.dev-fac-tol { fill: #8cc3b1; fill-opacity: 0.14; }
.dev-fac-median { stroke: var(--color-teal); stroke-width: 1.4; stroke-dasharray: 5 3; }
.dev-fac-medlbl { fill: var(--color-teal); font-weight: 600; }
.deviation-chart-bar { fill: var(--color-teal); transition: opacity 0.15s ease; }
.deviation-chart-bar:hover { opacity: 0.78; }
.deviation-chart-bar.dev-par-sobre { fill: #8cc3b1; }
.deviation-chart-bar.dev-par-sub { fill: #dba7a1; }
.deviation-chart-line { fill: none; stroke: #c99a55; stroke-width: 2; stroke-linejoin: round; }
.deviation-chart-dot { fill: #c99a55; }
.deviation-chart-diag { stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 5 4; }
.deviation-chart-xlbl { font-size: 9.5px; fill: var(--on-surface-muted); }
.dscatter { stroke: #fff; stroke-width: 1.5; opacity: 0.9; }
.dscatter-sub { fill: #dba7a1; }
.dscatter-baj { fill: #8cc3b1; }
.dscatter-ok { fill: var(--color-teal); }
.dscatter-rev { fill: #c99a55; }
.dscatter-band { fill: var(--color-teal); fill-opacity: 0.07; }
.dscatter-crit { fill: none; stroke: #b3261e; stroke-width: 2; }
.dscatter-critlbl { fill: #b3261e; font-weight: 700; }
/* Informe: barra apilada de ejecución (patrón os-statusbar) */
.deviation-exebar { height: 26px; margin: 6px 0; }
.dexe-ej { background: var(--color-teal); }
.dexe-pe { background: #cbd5e1; }
.dexe-st { background: #c99a55; }
.dexe-mes-teo { fill: #cbd5e1; }
.dexe-mes-ej { fill: var(--color-teal); }
.deviation-exe-mescap { margin-top: 16px; }
.os-legend-total { margin-left: auto; }
/* Informe: CARRUSEL de gráficos (una tarjeta, un gráfico visible) */
.deviation-carousel { background: var(--surface-lowest); border: 1px solid var(--surface-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); }
.deviation-carousel-viewport { overflow: hidden; height: 500px; }
.deviation-carousel-track { display: flex; align-items: stretch; transition: transform 0.3s ease; height: 500px; }
.deviation-carousel-slide { min-width: 100%; box-sizing: border-box; padding: 1px; height: 500px; overflow-y: auto; overflow-x: hidden; }
.deviation-chart-h { margin: 0 0 var(--space-1); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal); }
.deviation-carousel-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--surface-low); }
.deviation-carousel-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--surface-variant); background: var(--surface-lowest); color: var(--on-surface); font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.deviation-carousel-btn:hover { background: var(--surface-low); border-color: var(--color-teal); color: var(--color-teal); }
.deviation-carousel-dots { display: flex; gap: 7px; }
.deviation-carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--surface-variant); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.deviation-carousel-dot.is-active { background: var(--color-teal); transform: scale(1.3); }
/* Barras de progreso auto-avance (estilo Factorial) */
.deviation-carousel-bars { display: flex; gap: 6px; align-items: center; }
.deviation-carousel-bar { width: 30px; height: 4px; border-radius: 999px; border: 0; padding: 0; background: var(--surface-variant); overflow: hidden; cursor: pointer; }
.deviation-carousel-barfill { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--color-teal); transform-origin: left center; transform: scaleX(0); }
/* Informe: animaciones (entrada de tarjetas, typewriter, llenado de barras) */
@keyframes devFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dev-card.dev-fadeup { animation: devFadeUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; }
.dev-typing::after { content: '▋'; color: var(--color-teal); margin-left: 1px; animation: devBlink 0.8s step-end infinite; }
@keyframes devBlink { 50% { opacity: 0; } }
.dev-fill { transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .dev-card.dev-fadeup { animation: none; } .dev-fill { transition: none; } .dev-typing::after { display: none; } }
/* Informe: análisis automático debajo de cada gráfico (callout) */
.deviation-chart-analisis { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--surface); border-left: 3px solid var(--color-teal); border-radius: 0 8px 8px 0; font-size: 0.86rem; line-height: 1.65; color: var(--on-surface); }
/* Informe: párrafos dentro de tarjetas con aire entre sí */
.deviation-report-card .deviation-report-p { margin: 0 0 var(--space-3); line-height: 1.7; }
.deviation-report-card .deviation-report-p:last-child { margin-bottom: 0; }
/* Informe: tarjeta de resumen ejecutivo, con aire por encima y por debajo */
.deviation-report-summary { margin: var(--space-5) 0; padding: var(--space-5) var(--space-6); }
.deviation-report-note { margin: 0 0 18px; font-size: 0.82rem; color: #993c1d; background: #faece7; border-radius: 8px; padding: 9px 13px; }
.deviation-diag-reco2.is-up { color: #b45309; }
.deviation-diag-reco2.is-down { color: #047857; }
.deviation-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.deviation-chip { font-size: 0.76rem; background: var(--surface); border: 1px solid var(--surface-variant); border-radius: 999px; padding: 3px 11px; color: var(--on-surface-variant); }
.deviation-chip em { font-style: normal; color: var(--on-surface-muted); font-size: 0.7rem; }
@media (max-width: 640px) {
.deviation-head, .deviation-tabs, .deviation-body, .deviation-drill { padding-left: 12px; padding-right: 12px; }
.deviation-title { font-size: 0.98rem; }
}
/* Backlog de presupuestos: barra de horas por zona (ancho = dato). */
/* Estado del backlog: etiquetas por zona (badges del sistema), sin barras.
Cada estado sale de la fecha de asignación; se leen como una frase. */
.backlog-estado { line-height: 2; }
.backlog-estado .badge { margin-right: 5px; }
.backlog-nada { color: var(--on-surface-muted); }
.backlog-hval { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; }
.backlog-hval.is-zero { color: var(--on-surface-muted); font-weight: 500; }
.backlog-note-tip { cursor: help; border-bottom: 1px dotted var(--on-surface-muted); }
/* Desplegable del backlog: fila de zona clickeable + detalle de presupuestos. */
.backlog-zrow.is-clickable { cursor: pointer; }
.backlog-zrow.is-clickable:hover td { background: var(--surface); }
.backlog-zrow.is-open td { background: var(--surface); }
.backlog-chev { display: inline-block; margin-right: 6px; color: var(--on-surface-muted);
font-size: 0.8em; vertical-align: middle; transition: transform 0.15s ease, color 0.15s ease; }
.backlog-zrow.is-open .backlog-chev { transform: rotate(180deg); color: var(--color-teal); }
/* Detalle desplegado: mismo patrón que .deviation-subtable (borde teal a la
izquierda + sangría), para que se lea como hijo de la zona y no compita
con la tabla principal. */
.backlog-detail > td { padding: 0; background: var(--surface); border-top: 0; }
.backlog-detail-in { background: var(--surface-lowest);
border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant);
animation: backlogFade 0.24s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top; }
@keyframes backlogFade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* Sub-tabla del detalle: UNA línea por fila. Los nombres largos de cliente y
sede se cortan con "…" (el completo va en el title), así todas las filas
miden igual y la lista se escanea de un vistazo. */
.backlog-subtable { margin: 0; font-size: 0.82rem; background: transparent; table-layout: fixed; width: 100%; }
.backlog-subtable th { color: var(--on-surface-muted); font-size: 0.7rem;
text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; white-space: nowrap; }
.backlog-subtable td, .backlog-subtable th { padding: var(--space-2) var(--space-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.backlog-subtable th:first-child, .backlog-subtable td:first-child { padding-left: var(--space-4); }
.backlog-subtable th:last-child, .backlog-subtable td:last-child { padding-right: var(--space-4); }
.backlog-subtable tbody tr:last-child td { border-bottom: 0; }
.backlog-subtable tbody tr:hover td { background: var(--surface); }
/* anchos: el espacio sobrante va a cliente y sede, que son los textos largos */
.backlog-subtable th:nth-child(1), .backlog-subtable td:nth-child(1) { width: 108px; }
.backlog-subtable th:nth-child(2), .backlog-subtable td:nth-child(2) { width: 24%; }
.backlog-subtable th:nth-child(3), .backlog-subtable td:nth-child(3) { width: 24%; }
.backlog-subtable th:nth-child(4), .backlog-subtable td:nth-child(4) { width: 92px; }
.backlog-subtable th:nth-child(5), .backlog-subtable td:nth-child(5) { width: 104px; }
.backlog-subtable th:nth-child(6), .backlog-subtable td:nth-child(6) { width: 104px; }
.backlog-subtable th:nth-child(7), .backlog-subtable td:nth-child(7) { width: 104px; }
.backlog-subtable th:nth-child(8), .backlog-subtable td:nth-child(8) { width: 168px; }
.backlog-teo { font-variant-numeric: tabular-nums; }
.backlog-teo.is-none { color: var(--on-surface-muted); font-style: italic; }
/* "sin horas teóricas" no es un estado de fecha: se separa del resto. */
.backlog-badge-teo { margin-left: 4px; border-left: 2px solid var(--border-color); padding-left: 8px; cursor: help; }
/* Compromisos con técnicos de baja: línea secundaria (cod / sede). */
.orphan-sub { color: var(--on-surface-muted); }
/* Vida del backlog: mismos estilos que "Análisis de imputación de horas". */
.backlog-count { display: inline-block; min-width: 22px; padding: 1px 9px; border-radius: 999px;
background: var(--badge-neutral-bg); color: var(--badge-neutral-text);
font-weight: 700; font-size: 0.82rem; text-align: center; }
.backlog-total td { background: color-mix(in srgb, var(--badge-teal-bg) 45%, transparent); }
.backlog-total .backlog-hval { color: var(--badge-teal-text); font-weight: 700; }
.backlog-total .backlog-count { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
/* Alineado numérico a la derecha en tablas (sin CSS inline por celda). */
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Cabecera de la tarjeta principal: número a la izquierda, burbuja de
estado (Planificando/Todas/Faltan) arriba a la derecha. */
.kpi-head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.kpi-card {
background: var(--surface-lowest);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow-sm);
position: relative; overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition);
container-type: inline-size;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* kpi-card sin accent vertical (a pedido del usuario). Las clases
kpi-blue/teal/etc. quedan vacías por compatibilidad. */
.kpi-blue, .kpi-teal, .kpi-indigo, .kpi-cyan, .kpi-green, .kpi-slate {}
.kpi-icon {
font-size: 1.25rem; margin-bottom: var(--space-3);
opacity: .75;
}
.kpi-value {
font-family: 'Manrope', sans-serif;
font-size: 1.875rem; /* fallback */
font-size: clamp(0.95rem, 9cqw, 1.5rem); font-weight: 700;
color: var(--on-surface); line-height: 1.1;
letter-spacing: -0.01em;
word-break: break-word;
overflow-wrap: anywhere;
}
.kpi-label {
font-size: 0.75rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--on-surface-muted);
margin-top: var(--space-1);
}
/* ─── 10. GRIDS ─────────────────────────────────────────────── */
.charts-grid, .tables-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-bottom: var(--space-6);
}
@media (max-width: 900px) {
.charts-grid, .tables-grid { grid-template-columns: 1fr; }
}
/* ─── 11. TABLES ────────────────────────────────────────────── */
.table {
width: 100%; border-collapse: collapse;
font-size: 0.8125rem;
}
.table thead tr {
background: var(--surface-low);
}
.table th {
padding: var(--space-3) var(--space-5);
font-size: 0.6875rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--on-surface-muted);
text-align: left;
}
.table td {
padding: var(--space-3) var(--space-5);
color: var(--on-surface);
border-bottom: 1px solid var(--surface-low);
}
/* ─── Análisis de imputaciones: toggle desglose ⇄ análisis en 2 fases.
El ancho lo anima el JS midiendo el ancho real de cada celda y llevándolo
a 0 (o al revés), así la transición interpola en todo el rango y no pega el
tirón. Fase 1 (.is-collapsing): las columnas de tipo se colapsan subiendo y
fundiéndose hacia "Total Horas Imputadas", que queda 2ª. Fase 2 (.is-analysis):
entran las 6 columnas de análisis desde la derecha. */
#hours-matrix-card .card-body { overflow-x: auto; }
.hmat-cw { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: middle;
max-width: none; width: auto;
transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.17s ease, transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
.hmat-type, .hmat-anl { transition: padding-left 0.26s cubic-bezier(0.4, 0, 0.2, 1), padding-right 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
/* análisis oculto en desglose */
.hmat-anl { padding-left: 0 !important; padding-right: 0 !important; }
.hmat-anl .hmat-cw { width: 0; opacity: 0; transform: translateX(24px); }
/* fase 1: colapso convergente de los tipos hacia Total */
.hmat-table.is-collapsing .hmat-type { padding-left: 0 !important; padding-right: 0 !important; }
.hmat-table.is-collapsing .hmat-type .hmat-cw { opacity: 0; transform: translate(16px, -12px) scale(0.78); }
/* fase 2: análisis visible, entra desde la derecha */
.hmat-table.is-analysis .hmat-anl { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.hmat-table.is-analysis .hmat-anl .hmat-cw { width: auto; opacity: 1; transform: translateX(0); }
.hmat-ok { color: #2e7d5b; font-weight: 700; }
.hmat-no { color: #b3261e; font-weight: 700; }
/* ── Adornos "con alegría": chip de zona, tint del Total, puntos por tipo,
pill semáforo de cumplimiento, flechas de brecha y mini-barra de imputación.
Todo con la paleta pastel del panel (badge-*), sin navy ni CSS inline. */
.hmat-zchip { display: inline-block; padding: 2px 7px; border-radius: 6px; margin-right: 6px;
font-weight: 700; font-size: 0.76rem; letter-spacing: 0.02em;
background: var(--badge-teal-bg); color: var(--badge-teal-text); }
.hmat-zchip-total { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.hmat-zname { color: var(--on-surface-muted); }
.hmat-total { background: color-mix(in srgb, var(--badge-teal-bg) 55%, transparent); }
.hmat-total .hmat-cw, .hmat-total .hmat-cw strong { color: var(--badge-teal-text); }
.hmat-tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.hmat-tdot-0 { background: #009e9e; }
.hmat-tdot-1 { background: #3b82c4; }
.hmat-tdot-2 { background: #e0a300; }
.hmat-tdot-3 { background: #2e7d5b; }
.hmat-tdot-4 { background: #7a8aa6; }
.hmat-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
font-weight: 700; font-size: 0.8rem; line-height: 1.5; }
/* Salud del dato del mes (completitud de la imputación). */
.hmat-health { margin: 0 0 var(--space-4); padding: 10px 14px; border-radius: var(--radius-md);
font-size: 0.82rem; line-height: 1.5; cursor: help; }
.hmat-health.is-warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.hmat-health.is-alert { background: var(--badge-error-bg); color: var(--badge-error-text);
border: 1px solid color-mix(in srgb, var(--badge-error-text) 25%, transparent); }
/* % que representa el objetivo sobre las Horas Teóricas Factorial */
.hmat-objpct { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
background: var(--badge-neutral-bg); color: var(--badge-neutral-text);
font-size: 0.7rem; font-weight: 700; vertical-align: middle; cursor: help; }
.hmat-pill-good { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
.hmat-pill-warn { background: #fef3c7; color: #92400e; }
.hmat-pill-bad { background: var(--badge-error-bg); color: var(--badge-error-text); }
.hmat-delta.is-good { color: #2e7d5b; }
.hmat-delta.is-bad { color: #b3261e; }
.hmat-muted { color: var(--on-surface-muted); }
.hmat-bar { display: inline-block; width: 40px; height: 6px; border-radius: 4px; overflow: hidden;
background: var(--badge-neutral-bg); vertical-align: middle; margin-right: 7px; }
.hmat-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--color-teal-light); }
/* misma identidad que el pill de Cumplimiento: teal (bueno) / amarillo / rojo */
.hmat-bar > i.is-good { background: var(--color-teal-light); } /* teal ≥100 cumplimiento */
.hmat-bar > i.is-warn { background: #e0a300; } /* amarillo 85–99 */
.hmat-bar > i.is-bad { background: #d92d20; } /* rojo <85 */
.hmat-w-0 { width: 0; } .hmat-w-10 { width: 10%; } .hmat-w-20 { width: 20%; } .hmat-w-30 { width: 30%; }
.hmat-w-40 { width: 40%; } .hmat-w-50 { width: 50%; } .hmat-w-60 { width: 60%; } .hmat-w-70 { width: 70%; }
.hmat-w-80 { width: 80%; } .hmat-w-90 { width: 90%; } .hmat-w-100 { width: 100%; }
.hmtoggle-b { display: none; }
[data-hmtoggle][aria-pressed="true"] .hmtoggle-a { display: none; }
[data-hmtoggle][aria-pressed="true"] .hmtoggle-b { display: inline; }
@media (prefers-reduced-motion: reduce) { .hmat-cw, .hmat-type, .hmat-anl { transition: none; } }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface); }
.table .actions { display: flex; gap: var(--space-2); }
.text-center { text-align: center; }
/* ─── 12. FORMS ─────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label {
font-size: 0.6875rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--on-surface-muted);
}
.form-input, .form-select {
width: 100%;
padding: 8px var(--space-3);
background: var(--surface-lowest);
border: 1px solid var(--surface-variant);
border-radius: var(--radius-md);
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 500;
color: var(--on-surface);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-input:hover, .form-select:hover {
border-color: rgba(0, 35, 111, .25);
}
.form-input:focus, .form-select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0, 35, 111, .12);
}
.form-input::placeholder { color: var(--on-surface-muted); }
/* Select custom: chevron SVG inline, sin la flecha default del browser.
El selector "select.form-select" evita aplicar el chevron a los
que también usan la clase form-select. */
select.form-select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
/* Date inputs: estilo más limpio, calendar icon opaco hasta hover */
input[type="date"].form-select,
input[type="date"].form-input {
cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.45;
transition: opacity var(--transition);
filter: invert(40%) sepia(20%) saturate(800%) hue-rotate(180deg);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator {
opacity: 0.85;
}
.form-actions {
display: flex; gap: var(--space-4);
justify-content: flex-end;
margin-top: var(--space-6);
}
/* Toolbar / run-selector area */
.toolbar {
display: flex; align-items: center;
gap: var(--space-4); flex-wrap: wrap;
margin-bottom: var(--space-6);
padding: var(--space-4) var(--space-5);
background: var(--surface-lowest);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.toolbar .form-label { margin: 0; }
.toolbar .form-select { width: auto; min-width: 200px; }
/* ─── 13. BADGES ────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center;
padding: 2px var(--space-3);
border-radius: var(--radius-full);
font-size: 0.6875rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
white-space: nowrap;
}
.badge-blue { background: var(--badge-primary-bg); color: var(--badge-primary-text); }
.badge-green { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
.badge-red { background: var(--badge-error-bg); color: var(--badge-error-text); }
.badge-grey { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-orange { background: #fef3c7; color: #92400e; }
.badge-indigo { background: rgba(30, 58, 138, 0.10); color: var(--color-secondary); }
.badge-eq { background: #dbeafe; color: #1e40af; } /* Equilibrio: azul (no navy) */
/* ─── Órdenes de servicio (universo Kisat): barra de estados + lista ─── */
.os-statusbar { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.os-statusbar > span { display: block; height: 100%; }
.os-seg-preasig { background: #f59e0b; }
.os-seg-asig { background: #5b8def; }
.os-seg-sin { background: #dc2626; }
.os-seg-fin { background: #14b8a6; }
.os-seg-otro { background: #94a3b8; }
.os-status-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.os-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.os-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; flex-shrink: 0; }
.os-legend-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; color: var(--on-surface-muted); text-decoration: none; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition); }
a.os-legend-item:hover { background: rgba(15, 23, 42, 0.04); border-color: var(--border-color); }
.os-legend-item.is-active { background: var(--badge-primary-bg); color: var(--badge-primary-text); }
.os-legend-item strong { color: var(--on-surface); font-weight: 700; }
.os-legend-item.is-active strong { color: var(--badge-primary-text); }
.os-leg-pct { color: var(--on-surface-muted); font-size: 0.72rem; }
.os-legend-item.is-active .os-leg-pct { color: var(--badge-primary-text); }
.os-list-head {
display: grid;
grid-template-columns: 180px minmax(0, 1fr) 280px 170px;
gap: var(--space-4);
align-items: center;
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--border-color);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-muted);
background: var(--surface-low, #f8fafc);
}
.os-row {
display: grid;
grid-template-columns: 180px minmax(0, 1fr) 280px 170px;
gap: var(--space-4);
align-items: center;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-color);
transition: background var(--transition);
}
.os-row > div {
min-width: 0;
}
.os-row:last-child { border-bottom: 0; }
.os-row:hover { background: rgba(15, 23, 42, 0.025); }
.os-num { font-family: 'Manrope', ui-monospace, monospace; font-weight: 700; font-size: 0.9rem; color: var(--color-primary); text-decoration: none; display: inline-block; }
.os-num:hover { text-decoration: underline; }
.os-type { font-size: 0.6875rem; color: var(--on-surface-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.os-cli { font-weight: 700; color: var(--on-surface); font-size: 0.92rem; }
.os-meta { font-size: 0.78rem; color: var(--on-surface-muted); }
.os-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.os-plan { font-size: 0.68rem; font-weight: 600; }
.os-plan-yes { color: #0f766e; }
.os-plan-no { color: var(--on-surface-muted); }
.os-av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--badge-primary-bg); color: var(--badge-primary-text); font-size: 0.625rem; font-weight: 700; vertical-align: middle; flex-shrink: 0; }
@media (max-width: 992px) {
.os-list-head { display: none; }
.os-row {
grid-template-columns: 1fr auto;
gap: var(--space-3);
}
}
/* ── Badges de estado de técnico (columna Estado en Config > Técnicos) ── */
/* 🟢 ACTIVO — verde esmeralda: técnico disponible hoy */
.badge-status-active {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 6px;
background: #dcfce7;
color: #166534;
border: 1px solid rgba(22, 101, 52, 0.20);
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
cursor: default;
}
.badge-status-active::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #16a34a;
flex-shrink: 0;
}
/* 🔵 VACACIONES — azul índigo: ausencia temporal activa hoy */
.badge-status-leave {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 6px;
background: #e0e7ff;
color: #3730a3;
border: 1px solid rgba(55, 48, 163, 0.20);
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
cursor: default;
}
/* Punto pulsante animado: indica estado temporal vs permanente */
.badge-status-leave::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #4f46e5;
flex-shrink: 0;
animation: badge-pulse 2s ease-in-out infinite;
}
/* 🔴 INACTIVO — granate: técnico dado de baja en Kisat */
.badge-status-inactive {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 6px;
background: #ffe4e6;
color: #9f1239;
border: 1px solid rgba(159, 18, 57, 0.20);
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
cursor: default;
}
.badge-status-inactive::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #be123c;
flex-shrink: 0;
opacity: 0.90;
}
@keyframes badge-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.40; transform: scale(0.65); }
}
/* ─── Modal de confirmación premium (reemplaza confirm() nativo) ─── */
/* Overlay: cubre toda la pantalla con blur sutil */
.confirm-modal-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.50);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: var(--space-4);
/* Estado oculto por defecto */
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
.confirm-modal-overlay.is-open {
opacity: 1;
pointer-events: all;
}
/* Card del modal */
.confirm-modal {
background: var(--surface-lowest);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25), 0 4px 16px rgba(15, 23, 42, 0.10);
width: 100%;
max-width: 420px;
overflow: hidden;
/* Animación de entrada */
transform: scale(0.92) translateY(8px);
transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confirm-modal-overlay.is-open .confirm-modal {
transform: scale(1) translateY(0);
}
/* Franja superior de color (accent bar) */
.confirm-modal-accent {
height: 4px;
background: linear-gradient(90deg, #be123c 0%, #e11d48 100%);
}
/* Cuerpo del modal */
.confirm-modal-body {
padding: var(--space-6) var(--space-6) var(--space-5);
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
/* Icono de advertencia */
.confirm-modal-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: #ffe4e6;
display: flex;
align-items: center;
justify-content: center;
}
.confirm-modal-icon svg {
color: #be123c;
}
/* Texto */
.confirm-modal-content {}
.confirm-modal-title {
font-family: 'Inter', sans-serif;
font-size: 0.9375rem;
font-weight: 700;
color: var(--on-surface);
margin: 0 0 var(--space-2);
line-height: 1.3;
}
.confirm-modal-desc {
font-size: 0.8125rem;
color: var(--on-surface-variant);
margin: 0;
line-height: 1.5;
}
.confirm-modal-desc strong {
color: var(--on-surface);
font-weight: 600;
}
/* Footer con botones */
.confirm-modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--surface-low);
background: var(--surface);
}
/* ─── Órdenes de servicio (universo Kisat): barra de estados + lista ─── */
.os-statusbar { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.os-statusbar > span { display: block; height: 100%; }
.os-seg-preasig { background: #f59e0b; }
.os-seg-asig { background: #5b8def; }
.os-seg-sin { background: #dc2626; }
.os-seg-fin { background: #14b8a6; }
.os-seg-otro { background: #94a3b8; }
.os-status-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.os-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.os-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; flex-shrink: 0; }
.os-legend-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; color: var(--on-surface-muted); text-decoration: none; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition); }
a.os-legend-item:hover { background: rgba(15, 23, 42, 0.04); border-color: var(--border-color); }
.os-legend-item.is-active { background: var(--badge-primary-bg); color: var(--badge-primary-text); }
.os-legend-item strong { color: var(--on-surface); font-weight: 700; }
.os-legend-item.is-active strong { color: var(--badge-primary-text); }
.os-leg-pct { color: var(--on-surface-muted); font-size: 0.72rem; }
.os-legend-item.is-active .os-leg-pct { color: var(--badge-primary-text); }
/* ─── 14. ALERTS ────────────────────────────────────────────── */
.alert {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
font-size: 0.875rem; font-weight: 500;
margin: var(--space-4) var(--space-8) 0;
}
.alert-success { background: var(--badge-teal-bg); color: var(--badge-teal-text); }
.alert-danger { background: var(--badge-error-bg); color: var(--badge-error-text); }
.alert-warning { background: #fef9c3; color: #713f12; }
.alert-info { background: var(--badge-primary-bg); color: var(--badge-primary-text); }
.alert-close {
background: none; border: none; cursor: pointer;
font-size: 1.1rem; line-height: 1;
color: inherit; opacity: .6;
}
.alert-close:hover { opacity: 1; }
/* ─── 15. MÓDULO DE CONFIGURACIÓN ───────────────────────────── */
/* Tabs del módulo Configuración. Estilo discreto: línea inferior
coloreada en el tab activo, sin pills ni shadows. Reutiliza tokens
del design system existente (--on-surface, --surface-low, --md-sys-color-primary).
Disabled tabs (F2/F3 not yet implemented) se muestran muted. */
.config-tabs {
display: flex;
gap: var(--space-1);
border-bottom: 1px solid var(--surface-low, #e5e7eb);
margin-bottom: var(--space-5);
overflow: visible;
position: relative;
scrollbar-width: thin;
}
.config-tab {
display: inline-block;
padding: 10px 18px;
font-size: 0.875rem;
font-weight: 600;
color: var(--on-surface-muted, #64748b);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
cursor: pointer;
}
.config-tab:hover:not(.config-tab-disabled) {
color: var(--on-surface, #0f172a);
text-decoration: none;
}
.config-tab.is-active {
color: var(--md-sys-color-primary, #1d4ed8);
border-bottom-color: var(--md-sys-color-primary, #1d4ed8);
}
.config-tab-disabled {
color: #cbd5e1;
cursor: not-allowed;
pointer-events: none;
}
/* ── Submenú desplegable para tabs de configuración (ej. SLA) ── */
.config-tab-dropdown {
position: relative;
display: inline-flex;
align-items: stretch;
}
.config-tab-trigger {
background: transparent;
border-top: none;
border-left: none;
border-right: none;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.config-tab-chevron {
transition: transform 0.2s ease;
}
.config-tab-dropdown.is-open .config-tab-chevron,
.config-tab-dropdown:hover .config-tab-chevron {
transform: rotate(180deg);
}
.config-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
background: #ffffff;
min-width: 270px;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--surface-low, #e5e7eb);
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
padding: 6px;
display: none;
flex-direction: column;
gap: 2px;
z-index: 150;
}
/* Apertura por hover (mouse) o por clase .is-open (click/teclado) */
.config-tab-dropdown.is-open .config-dropdown-menu,
.config-tab-dropdown:hover .config-dropdown-menu {
display: flex;
}
.config-dropdown-item {
display: block;
padding: 8px 12px;
border-radius: var(--radius-sm, 6px);
text-decoration: none;
color: var(--on-surface, #0f172a);
transition: background-color 0.15s ease, color 0.15s ease;
}
.config-dropdown-item:hover:not(.config-dropdown-item--disabled) {
background-color: var(--surface-low, #f8fafc);
text-decoration: none;
color: var(--on-surface, #0f172a);
}
.config-dropdown-item.is-active {
background-color: #eff6ff; /* primary light */
}
.config-dropdown-item.is-active .config-dropdown-item-title {
color: var(--md-sys-color-primary, #1d4ed8);
font-weight: 700;
}
.config-dropdown-item-title {
font-size: 0.8125rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1.3;
}
.config-dropdown-item-desc {
font-size: 0.75rem;
color: var(--on-surface-muted, #64748b);
margin-top: 2px;
line-height: 1.25;
}
.config-dropdown-item--disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.config-badge-soon {
font-size: 0.6875rem;
font-weight: 500;
padding: 2px 6px;
border-radius: 9999px;
background: var(--surface-low, #f1f5f9);
color: var(--on-surface-muted, #64748b);
border: 1px solid #e2e8f0;
}
/* Intro text del tab Optimizer */
.config-intro {
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--surface-low, #f8fafc);
border-radius: var(--radius-md);
border-left: 3px solid var(--md-sys-color-primary, #1d4ed8);
}
.config-intro-text {
margin: 0;
font-size: 0.8125rem;
color: var(--on-surface-variant, #475569);
line-height: 1.5;
}
/* Grupo colapsable (un por group_name de optimizer_config) */
.config-group {
margin-bottom: var(--space-3);
background: white;
border: 1px solid var(--surface-low, #e5e7eb);
border-radius: var(--radius-md);
overflow: hidden;
}
.config-group-summary {
list-style: none;
cursor: pointer;
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
background: var(--surface-low, #f8fafc);
transition: background 0.15s ease;
}
.config-group-summary::-webkit-details-marker { display: none; }
.config-group-summary:hover { background: #f1f5f9; }
.config-group[open] > .config-group-summary {
border-bottom: 1px solid var(--surface-low, #e5e7eb);
}
.config-group-summary::before {
content: '▶';
font-size: 0.7rem;
color: var(--on-surface-muted);
transition: transform 0.15s ease;
}
.config-group[open] > .config-group-summary::before {
transform: rotate(90deg);
}
.config-group-name {
flex: 1;
font-weight: 700;
font-size: 0.875rem;
color: var(--on-surface, #0f172a);
text-transform: capitalize;
letter-spacing: 0.01em;
}
.config-group-count {
font-size: 0.75rem;
color: var(--on-surface-muted);
font-weight: 500;
}
.config-group-body { padding: 0; }
/* Tabla de parámetros — más compacta que la de usuarios */
.config-params-table { width: 100%; border-collapse: collapse; }
.config-params-table th,
.config-params-table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--surface-low, #f1f5f9);
}
.config-params-table tbody tr:last-child td { border-bottom: none; }
.config-params-table tbody tr:hover { background: var(--surface-low, #f8fafc); }
.config-params-table th {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-muted);
}
.config-key {
font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
font-size: 0.75rem;
background: var(--surface-low, #f1f5f9);
padding: 2px 6px;
border-radius: 4px;
color: var(--on-surface, #0f172a);
}
.config-value-cell {
font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--on-surface, #0f172a);
}
.config-type-badge {
font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
font-size: 0.6875rem;
text-transform: lowercase;
}
.config-description-cell {
font-size: 0.75rem;
color: var(--on-surface-variant, #475569);
line-height: 1.4;
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.config-profile-hint {
margin-top: var(--space-3);
text-align: right;
color: var(--on-surface-muted);
}
/* ─── Edit form del Optimizer ─── */
.config-edit-header {
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--surface-low, #e5e7eb);
}
.config-edit-key {
margin: 0 0 var(--space-2);
font-size: 1rem;
font-weight: 700;
}
.config-edit-key code {
font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
background: transparent;
padding: 0;
}
.config-edit-meta {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.config-edit-current {
margin: var(--space-3) 0 var(--space-4);
font-size: 0.8125rem;
color: var(--on-surface-variant, #475569);
}
.config-edit-warning {
margin-top: var(--space-5);
padding: var(--space-3) var(--space-4);
background: #fef9c3;
border-radius: var(--radius-md);
font-size: 0.75rem;
color: #713f12;
border-left: 3px solid #ca8a04;
line-height: 1.5;
}
.config-edit-warning code {
background: rgba(255,255,255,0.6);
padding: 1px 4px;
border-radius: 3px;
font-size: 0.7rem;
}
/* Hint text en form-group */
.form-hint {
display: block;
margin-top: 4px;
font-size: 0.7rem;
color: var(--on-surface-muted);
line-height: 1.4;
}
/* ─── Multi-select de ids (form_multi_ids.html.twig) ─────────────
Editor de las whitelists plannable_status_ids / plannable_type_ids
del tab Optimizer del módulo Configuración. Lista vertical de
checkboxes con id + code_internal + name. */
.multi-ids-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: 0 0 var(--space-2);
border-bottom: 1px solid var(--surface-line, #e2e8f0);
margin-bottom: var(--space-3);
}
.multi-ids-toolbar-actions {
display: flex;
gap: var(--space-2);
}
.multi-ids-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
max-height: 460px;
overflow-y: auto;
border: 1px solid var(--surface-line, #e2e8f0);
border-radius: var(--radius-md);
background: #fff;
}
.multi-ids-item {
border-bottom: 1px solid #f1f5f9;
}
.multi-ids-item:last-child { border-bottom: none; }
.multi-ids-label {
display: grid;
grid-template-columns: 22px 56px 90px 1fr;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
user-select: none;
transition: background var(--transition, 150ms);
}
.multi-ids-label:hover { background: #f8fafc; }
.multi-ids-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--md-sys-color-primary, #1d4ed8);
cursor: pointer;
}
.multi-ids-id {
font-family: monospace;
font-size: 0.7rem;
font-weight: 700;
color: var(--md-sys-color-primary, #1d4ed8);
background: #dbeafe;
padding: 2px 6px;
border-radius: 4px;
text-align: center;
}
.multi-ids-code {
font-family: monospace;
font-size: 0.75rem;
color: var(--on-surface-muted);
}
.multi-ids-name {
font-size: 0.85rem;
color: var(--on-surface);
}
/* Cuando está marcado, resalta toda la fila levemente */
.multi-ids-label:has(input:checked) {
background: #f0f9ff;
}
.multi-ids-label:has(input:checked) .multi-ids-name {
font-weight: 600;
}
/* Celda "Valor actual" cuando muestra nombres resueltos en vez del CSV.
Para plannable_status_ids/type_ids — más narrativo que el monoespaciado. */
.config-value-names {
font-family: inherit !important;
font-size: 0.78rem !important;
color: var(--on-surface) !important;
background: none !important;
font-weight: 500;
line-height: 1.4;
white-space: normal;
}
.form-hint code {
background: var(--surface-low, #f1f5f9);
padding: 1px 4px;
border-radius: 3px;
font-size: 0.65rem;
font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
}
/* ─── F2: filtros, paginación, días-chips ─────────────────────── */
.config-filter-bar {
background: white;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--surface-low, #e5e7eb);
margin-bottom: var(--space-4);
}
.config-filter-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
gap: var(--space-3);
align-items: end;
}
.config-filter-field-grow { grid-column: span 1; }
.config-filter-field .form-label {
font-size: 0.7rem;
font-weight: 600;
margin-bottom: 4px;
display: block;
color: var(--on-surface-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.config-filter-actions { display: flex; gap: 6px; }
@media (max-width: 720px) {
.config-filter-row { grid-template-columns: 1fr; }
}
/* Summary bar al tope de tabla: total + página */
.config-table-summary {
display: flex;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--surface-low, #e5e7eb);
font-size: 0.8125rem;
color: var(--on-surface-variant, #475569);
}
/* Tabla de sedes — más densa que la de parámetros */
.config-sedes-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.config-sedes-table th,
.config-sedes-table td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid var(--surface-low, #f1f5f9);
vertical-align: middle;
}
.config-sedes-table tbody tr:last-child td { border-bottom: none; }
.config-sedes-table tbody tr:hover { background: var(--surface-low, #f8fafc); }
.config-sedes-table th {
font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--on-surface-muted);
background: var(--surface-low, #fafbfc);
}
/* Chips de días (L M X J V S D) en cell de tabla */
.config-days-chips {
display: inline-flex; gap: 3px;
}
.config-day-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 4px;
font-size: 0.65rem; font-weight: 700;
background: var(--surface-low, #e5e7eb);
color: #94a3b8;
}
.config-day-chip.is-on {
background: var(--md-sys-color-primary, #1d4ed8);
color: white;
}
/* Badge naranja para required_technicians > 1 */
.badge-orange {
color: #b45309;
background: #fef3c7;
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
}
/* Paginación */
.config-pagination {
display: flex;
justify-content: center;
gap: 4px;
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--surface-low, #e5e7eb);
flex-wrap: wrap;
}
.config-page {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 10px;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--on-surface-variant, #475569);
text-decoration: none;
background: var(--surface-low, #f8fafc);
border: 1px solid transparent;
transition: background 0.15s ease;
}
.config-page:hover {
background: #e2e8f0;
text-decoration: none;
}
.config-page-current {
background: var(--md-sys-color-primary, #1d4ed8);
color: white;
cursor: default;
}
.config-page-current:hover { background: var(--md-sys-color-primary, #1d4ed8); }
.config-page-disabled {
color: #cbd5e1;
cursor: not-allowed;
background: transparent;
}
.config-page-ellipsis {
display: inline-flex; align-items: center;
padding: 0 4px;
color: #94a3b8;
}
/* Form de edición de sede — secciones visuales */
.config-form-section {
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--surface-low, #f1f5f9);
}
.config-form-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
.config-form-section-title {
margin: 0 0 4px;
font-size: 0.875rem;
font-weight: 700;
color: var(--on-surface, #0f172a);
}
.config-form-section-hint {
margin: 0 0 var(--space-4);
font-size: 0.75rem;
color: var(--on-surface-variant, #475569);
line-height: 1.5;
}
.config-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 600px) {
.config-form-row { grid-template-columns: 1fr; }
}
/* Días picker (checkbox expanded) en form de sedes */
.config-days-picker {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 6px 0;
}
.config-days-picker > div,
.config-days-picker label {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--surface-low, #f1f5f9);
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
transition: background 0.15s ease, border-color 0.15s ease;
}
.config-days-picker input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
.config-days-picker label:has(input:checked) {
background: #dbeafe;
border-color: var(--md-sys-color-primary, #1d4ed8);
color: var(--md-sys-color-primary, #1d4ed8);
font-weight: 600;
}
/* Tabla de prioridades */
.config-prioridades-table { width: 100%; }
.config-prioridades-table th,
.config-prioridades-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--surface-low, #f1f5f9);
vertical-align: middle;
}
.config-rank-input {
text-align: center;
font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
font-weight: 700;
font-size: 1rem;
width: 100%;
max-width: 120px;
}
/* ─── F3: Zonas + horarios ──────────────────────────────────── */
.config-zone-card {
margin-bottom: var(--space-4);
overflow: hidden;
}
.config-zone-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background: var(--surface-low, #f8fafc);
border-bottom: 1px solid var(--surface-low, #e5e7eb);
gap: var(--space-3);
flex-wrap: wrap;
}
.config-zone-name {
font-size: 1rem;
margin-left: var(--space-3);
color: var(--on-surface, #0f172a);
}
.config-zone-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.config-zone-body {
padding: 0;
}
.config-schedule-table { width: 100%; }
.config-schedule-table th,
.config-schedule-table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--surface-low, #f1f5f9);
}
.config-schedule-table tbody tr:last-child td { border-bottom: none; }
.config-schedule-table tbody tr:hover { background: var(--surface-low, #f8fafc); }
.config-schedule-table th {
font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--on-surface-muted);
background: white;
}
.config-schedule-table .actions {
display: flex;
gap: 4px;
}
/* ─── Comparador de capacidad entre zonas (widget Capacidad) ────── */
.cap-compare > summary.cap-compare-summary {
cursor: pointer;
user-select: none;
list-style: none;
display: flex;
align-items: baseline;
gap: 4px;
padding: 6px 0;
font-size: 0.875rem;
color: var(--on-surface);
transition: color 0.15s ease;
}
.cap-compare > summary.cap-compare-summary::-webkit-details-marker { display: none; }
.cap-compare > summary.cap-compare-summary::before {
content: '▶';
font-size: 0.65rem;
color: var(--on-surface-muted);
margin-right: 6px;
transition: transform 0.15s ease;
}
.cap-compare[open] > summary.cap-compare-summary::before {
transform: rotate(90deg);
}
.cap-compare > summary.cap-compare-summary:hover {
color: var(--md-sys-color-primary, #1d4ed8);
}
.cap-compare-controls {
display: grid;
grid-template-columns: 1fr auto auto;
gap: var(--space-3);
align-items: start;
}
@media (max-width: 800px) {
.cap-compare-controls { grid-template-columns: 1fr; }
}
.cap-compare-actions {
display: flex;
gap: 6px;
align-self: end;
padding-top: 16px; /* alinea con labels */
}
.cap-zones-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 0;
}
.cap-zone-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--surface-low, #f1f5f9);
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cap-zone-pill input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
.cap-zone-pill:has(input:checked) {
background: #dbeafe;
border-color: var(--md-sys-color-primary, #1d4ed8);
color: var(--md-sys-color-primary, #1d4ed8);
font-weight: 600;
}
/* ─── Indicador "datos en vivo" del widget Capacidad ──────────────
Dos estados:
- running: amarillo + dot pulsante (planner activo, datos cambian)
- stable: verde + dot estático (datos consistentes, hace cuánto) */
.cap-live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.cap-live-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
}
.cap-live-running {
background: #fef3c7;
color: #b45309;
}
.cap-live-running .cap-live-dot {
background: #d97706;
animation: capLivePulse 1.4s ease-in-out infinite;
}
.cap-live-stable {
background: #d1fae5;
color: #065f46;
}
.cap-live-stable .cap-live-dot {
background: #10b981;
}
@keyframes capLivePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
.cap-live-running .cap-live-dot { animation: none; }
}
/* ─── 15. MAP ───────────────────────────────────────────────── */
/* Layout 3 columnas: panel-izq | mapa | panel-der */
.map-page {
display: grid;
grid-template-columns: 260px 1fr 280px;
gap: var(--space-5);
height: calc(100vh - var(--topbar-h) - var(--space-8) * 2);
min-height: 500px;
}
@media (max-width: 1100px) {
.map-page { grid-template-columns: 220px 1fr; }
.map-page .map-right-panel { display: none; }
}
@media (max-width: 780px) {
.map-page { grid-template-columns: 1fr; grid-template-rows: 340px auto; }
.map-page .map-left-panel { display: none; }
}
.map-left-panel,
.map-right-panel {
display: flex; flex-direction: column; gap: var(--space-4);
overflow-y: auto;
}
.map-center {
display: flex; flex-direction: column; gap: var(--space-3);
}
/* Run selector strip within map pages */
.map-run-strip {
display: flex; align-items: center; gap: var(--space-3);
flex-wrap: wrap;
}
.map-run-strip .form-label { margin: 0; }
.map-run-strip .form-select { width: auto; min-width: 180px; }
.leaflet-map {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
flex: 1;
min-height: 300px;
}
/* Chip de etiqueta en mitad de segmento de ruta (km · min · €).
Leaflet aplica por defecto background/border al .leaflet-div-icon;
limpiamos el wrapper y le damos estilo solo al .rsl-pill interno. */
.leaflet-div-icon.route-segment-label,
.route-segment-label {
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
}
.rsl-pill {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
background: #FFFFFF;
border: 1px solid rgba(15,23,42,0.08);
border-top: 2px solid var(--c, #64748B);
padding: 4px 8px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.06);
font-family: 'Inter', system-ui, sans-serif;
color: #0F172A;
white-space: nowrap;
transform: translate(-50%, -50%);
pointer-events: none;
letter-spacing: 0.01em;
}
.rsl-pill .rsl-tech {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
color: var(--c, #0F172A);
padding: 0 2px 3px 2px;
border-bottom: 1px dashed rgba(15,23,42,0.1);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.rsl-pill .rsl-dot {
width: 6px; height: 6px; border-radius: 50%;
flex-shrink: 0;
}
.rsl-pill .rsl-metrics {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 700;
}
.rsl-pill .rsl-cell {
display: inline-flex;
align-items: baseline;
gap: 3px;
padding: 0 6px;
}
.rsl-pill .rsl-cell:first-child { padding-left: 2px; }
.rsl-pill .rsl-cell:last-child { padding-right: 2px; }
.rsl-pill .rsl-ico {
font-size: 9px;
opacity: 0.55;
margin-right: 1px;
font-weight: 600;
}
.rsl-pill .rsl-unit {
font-size: 9px;
font-weight: 600;
color: #94A3B8;
margin-left: 1px;
}
.rsl-pill .rsl-sep {
width: 1px;
height: 12px;
background: rgba(15,23,42,0.1);
}
.rsl-pill .rsl-cost {
color: var(--c, #0F172A);
}
/* Legacy two-column map (kept as fallback) */
.map-container {
position: relative;
height: calc(100vh - var(--topbar-h) - 120px);
min-height: 400px;
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--space-5);
}
.map-legend, .map-sidebar {
height: 100%; overflow-y: auto;
}
.legend-list, .stops-list {
list-style: none;
padding: 0 var(--space-4) var(--space-4);
display: flex; flex-direction: column; gap: var(--space-2);
}
.stops-list { list-style: none; }
.legend-list li, .stops-list li {
padding: var(--space-3) var(--space-4);
background: var(--surface-low);
border-radius: var(--radius-md);
font-size: 0.8125rem;
color: var(--on-surface);
}
/* Map info cards */
.map-stat {
display: flex; flex-direction: column; gap: 2px;
padding: var(--space-4) var(--space-5);
background: var(--surface-low);
border-radius: var(--radius-md);
}
.map-stat-value {
font-family: 'Manrope', sans-serif;
font-size: 1.5rem; font-weight: 700;
color: var(--on-surface); line-height: 1.1;
letter-spacing: -0.01em;
}
.map-stat-label {
font-size: 0.6875rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--on-surface-muted);
}
.map-stat-delta {
font-size: 0.8125rem; font-weight: 600;
color: var(--color-teal);
}
/* Tech capacity rows (right panel) */
.tech-row {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) 0;
}
.tech-avatar {
width: 34px; height: 34px; border-radius: var(--radius-full);
background: var(--badge-primary-bg);
color: var(--color-primary);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.75rem;
flex-shrink: 0;
}
.tech-info { flex: 1; min-width: 0; }
.tech-name { font-weight: 600; font-size: 0.8125rem; color: var(--on-surface); }
.tech-sub { font-size: 0.6875rem; color: var(--on-surface-muted); }
.tech-pct { font-weight: 700; font-size: 0.9375rem; color: var(--on-surface); }
.progress-bar {
height: 3px; border-radius: var(--radius-full);
background: var(--surface-low);
margin-top: var(--space-1);
overflow: hidden;
}
.progress-fill {
height: 100%; border-radius: var(--radius-full);
background: var(--color-secondary);
transition: width .4s ease;
}
.progress-fill.high { background: var(--color-error); }
.progress-fill.low { background: var(--color-teal); }
/* ─── 16. LOGIN PAGE ────────────────────────────────────────── */
.login-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f8fafc;
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
background-size: 24px 24px;
padding: var(--space-8);
}
.login-card {
background: var(--surface-lowest);
border-radius: 24px;
box-shadow: 0 20px 50px rgba(14, 28, 58, 0.08);
padding: var(--space-12) var(--space-10);
width: 100%;
max-width: 480px;
text-align: center;
}
.login-header { margin-bottom: var(--space-10); }
.login-logo {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 1.5rem;
color: var(--color-primary);
margin-bottom: var(--space-8);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
.login-title {
font-family: 'Manrope', sans-serif;
font-size: 1.75rem;
font-weight: 700;
color: var(--on-surface);
margin-bottom: var(--space-3);
letter-spacing: -0.02em;
}
.login-subtitle {
font-size: 0.9375rem;
color: var(--on-surface-muted);
line-height: 1.5;
max-width: 320px;
margin: 0 auto;
}
/* Form refinement */
.login-form {
display: flex;
flex-direction: column;
gap: var(--space-6);
text-align: left;
}
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-icon {
position: absolute;
left: 16px;
color: var(--on-surface-muted);
font-size: 1.1rem;
pointer-events: none;
}
.input-toggle {
position: absolute;
right: 16px;
color: var(--on-surface-muted);
cursor: pointer;
padding: 4px;
transition: color 0.2s;
}
.input-toggle:hover { color: var(--color-primary); }
.login-form .form-input {
padding-left: 48px;
background: #f1f5f9;
height: 52px;
font-size: 0.9375rem;
}
.login-form .form-label {
font-size: 0.625rem;
margin-bottom: 6px;
}
/* Custom Toggle Switch */
.switch-group {
display: flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
margin: var(--space-2) 0;
}
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #e2e8f0;
transition: .3s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: "";
height: 14px; width: 14px;
left: 3px; bottom: 3px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider { background-color: #cbd5e1; }
input:checked + .slider:before { transform: translateX(20px); }
.switch-label {
font-size: 0.875rem;
color: var(--on-surface-variant);
}
.login-footer-links {
display: flex;
justify-content: center;
gap: var(--space-8);
margin-top: var(--space-8);
}
.login-footer-link {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
color: var(--on-surface-muted);
letter-spacing: 0.05em;
transition: color 0.2s;
}
.login-footer-link:hover { color: var(--color-primary); text-decoration: none; }
/* ─── 17. EMPTY STATE ───────────────────────────────────────── */
.empty-state {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--space-4);
padding: var(--space-12) var(--space-8);
text-align: center;
color: var(--on-surface-muted);
}
.empty-icon { font-size: 3.5rem; }
.empty-state h2 {
font-family: 'Manrope', sans-serif;
font-size: 1.375rem; font-weight: 700;
color: var(--on-surface);
}
.empty-state p { font-size: 0.9375rem; max-width: 400px; }
/* ─── 18. UTILITIES ─────────────────────────────────────────── */
.flex-row { display: flex; align-items: center; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-3); }
.gap-md { gap: var(--space-4); }
.text-muted { color: var(--on-surface-muted); }
.mt-6 { margin-top: var(--space-6); }
/* Atajos de rango de fecha (Hoy / Mañana / Esta semana / etc.)
Compartido entre dashboard (date-range-shortcut) y assignments
(as-shortcut), mismo comportamiento. */
.date-range-shortcut,
.as-shortcut {
font-size: 0.75rem !important;
padding: 4px var(--space-3) !important;
}
.date-range-shortcut.is-active,
.as-shortcut.is-active {
background: var(--badge-primary-bg) !important;
color: var(--color-primary) !important;
border-color: rgba(0, 35, 111, .18) !important;
font-weight: 700;
}
/* ─── KPI sub-info: status pills, meta, footer, chips, value mods ─
Bloque aprobado por el usuario. Restaurado tras revert accidental. */
.kpi-status {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-3);
padding: 4px 10px;
font-size: 0.75rem; font-weight: 600;
border-radius: var(--radius-full);
white-space: nowrap;
}
.kpi-status strong { font-weight: 700; }
.kpi-status-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.kpi-status-complete { color: #047857; background: #d1fae5; }
.kpi-status-progress { color: #1d4ed8; background: #dbeafe; }
.kpi-status-missing { color: #b91c1c; background: #fee2e2; }
/* Error: optimizer fallando — destacado en rojo intenso para que no pase
desapercibido. Ícono ! para diferenciar visualmente de "missing" (que
también es rojo pero más muted). */
.kpi-status-error {
color: #fff;
background: #b91c1c;
font-weight: 700;
animation: kpiErrorPulse 2s ease-in-out infinite;
}
.kpi-status-error .kpi-status-dot { background: #fff; }
@keyframes kpiErrorPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,0.4); }
50% { box-shadow: 0 0 0 4px rgba(185,28,28,0); }
}
.kpi-status-dot.pulse { animation: kpiPulse 1.6s ease-in-out infinite; }
@keyframes kpiPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.4); }
}
.kpi-meta {
margin-top: 6px;
font-size: 0.6rem; font-weight: 500;
color: var(--on-surface-muted);
letter-spacing: 0.01em;
}
.kpi-meta-positive { color: #047857; font-weight: 700; }
.kpi-meta-warn { color: #b45309; font-weight: 700; }
.kpi-value-unstable { opacity: 0.72; }
/* ── Barra de progreso del KPI de Intervenciones ──────────────────────
Diseño alineado con los kpi-status-* (mismos tonos pastel, no neon).
La idea es que la barra "sume" información sin pelearle visualmente
al número grande ni al chip de estado.
- in_progress → shimmer suave azul (luz que pasa de izq a der)
- missing → ámbar muted (estable pero incompleto)
- complete → verde muted (todo OK)
Track: gris muy claro (igual que separadores). Alto: 5px (mínimo necesario
para leerse, sin convertirse en elemento dominante). Radius coherente
con el resto de chips (--radius-sm o pill chico). */
/* Wrapper barra + label %: alinea horizontalmente con gap chico. */
.kpi-progress-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.kpi-progress-wrap .kpi-progress { margin-top: 0; flex: 1 1 auto; }
.kpi-progress-label {
flex: 0 0 auto;
font-size: 0.6875rem;
font-weight: 700;
font-variant-numeric: tabular-nums; /* evita que cambien de ancho 70%→100% */
color: var(--on-surface-muted);
min-width: 32px;
text-align: right;
letter-spacing: 0.01em;
}
.kpi-progress {
width: 100%;
height: 5px;
background: var(--surface-low, #eef0f3);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.kpi-progress-fill {
height: 100%;
border-radius: 4px;
/* Transición suave para no "saltar" cuando el % cambia entre ciclos. */
transition: width 0.6s ease-out, background-color 0.3s ease;
min-width: 2px;
}
/* Colores en sintonía con los chips kpi-status-*:
complete → mismo verde del chip (#047857) pero un tono medio.
missing → mismo ámbar/rojo del chip (#b91c1c) pero más muted.
progress → azul navy del brand, no celeste flúo.
Opacidad de 0.85 para que no compitan con el número grande. */
.kpi-progress-complete { background: #10b981; opacity: 0.85; }
.kpi-progress-missing { background: #d97706; opacity: 0.85; }
.kpi-progress-error { background: #b91c1c; opacity: 0.9; }
.kpi-progress-in_progress {
/* Shimmer suave: gradiente horizontal con luz blanquecina pasando de
izquierda a derecha. Sin stripes diagonales — esa estética "installer"
no encaja con el resto del dashboard. El gradient base es del azul del
chip kpi-status-progress (#1d4ed8) con una banda más clara que se
desplaza continuamente. */
background: linear-gradient(
90deg,
#1d4ed8 0%,
#60a5fa 50%,
#1d4ed8 100%
);
background-size: 200% 100%;
animation: kpiProgressShimmer 2.2s ease-in-out infinite;
opacity: 0.85;
}
@keyframes kpiProgressShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Reduce-motion: pausa el shimmer pero deja el color base visible. */
@media (prefers-reduced-motion: reduce) {
.kpi-progress-in_progress { animation: none; }
}
.kpi-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
flex-wrap: wrap; /* el chip salta a 2da línea si no entra */
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--surface-low);
min-height: 28px;
}
.kpi-stat {
display: flex; align-items: baseline; gap: 4px;
min-width: 0;
overflow: visible; /* nada se solapa con el chip */
}
.kpi-stat-value,
.kpi-stat-unit {
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-stat-value {
font-family: 'Manrope', sans-serif;
font-size: 0.875rem; font-weight: 700;
color: var(--on-surface);
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
}
.kpi-stat-unit {
font-size: 0.6rem; font-weight: 500;
color: var(--on-surface-muted);
white-space: nowrap;
}
.kpi-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
font-size: 0.6875rem; font-weight: 700;
border-radius: var(--radius-full);
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.01em;
}
.kpi-chip-positive { color: #047857; background: #d1fae5; }
/* Tarjeta KPI "Ahorro vs Kisat" — € protagonista, % como chip teal.
Reemplaza la barra "Ahorro del sistema" (movida a la fila de KPIs). */
.kpi-savings-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.kpi-savings-hd .kpi-icon { margin-bottom: 0; color: var(--color-teal); opacity: 1; }
.kpi-savings-chip {
background: var(--badge-teal-bg);
color: var(--color-teal);
font-size: 0.6875rem;
font-weight: 700;
padding: 3px 9px;
border-radius: var(--radius-full);
white-space: nowrap;
}
.kpi-chip-warn { color: #b45309; background: #fef3c7; }
.kpi-chip-neutral { color: var(--on-surface-variant); background: var(--surface-low); }
/* ── Widget: Problemas detectados ────────────────────────────────────
Lista de causas por las que paradas quedaron fuera del plan. Cada
item muestra: severidad (borde lateral), título, count, ejemplos
concretos y la acción correctiva (en Kisat). Diseño alineado al
resto de cards: sin sombras agresivas, tipografía consistente. */
.issues-card { overflow: hidden; }
.issues-card .card-body { padding: var(--space-3) var(--space-4); }
/* Header colapsable de la card — funciona como un card-header normal pero
es clickeable. Al expandirse, muestra el contenido del card-body con
las causas detalladas. Sin JS, usa / nativos. */
.issues-collapsible > summary.issues-summary {
list-style: none;
cursor: pointer;
user-select: none;
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
transition: background 0.15s ease;
}
.issues-collapsible > summary.issues-summary::-webkit-details-marker { display: none; }
.issues-collapsible > summary.issues-summary:hover {
background: var(--surface-low);
}
.issues-collapsible[open] > summary.issues-summary {
border-bottom: 1px solid var(--surface-low);
}
.issues-summary-count {
font-size: 0.7rem;
font-weight: 500;
color: var(--on-surface-muted);
margin-left: 8px;
}
.issues-summary-cats {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-left: auto;
}
.issues-cat-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.issues-cat-high { background: #fee2e2; color: #b91c1c; }
.issues-cat-medium { background: #fef3c7; color: #b45309; }
.issues-cat-low { background: var(--surface-low); color: var(--on-surface-muted); }
.issues-summary-toggle {
font-size: 0.6875rem;
color: var(--on-surface-muted);
font-style: italic;
white-space: nowrap;
margin-left: 8px;
}
.issues-collapsible[open] > summary > .issues-summary-toggle::before {
content: '▼ ';
font-style: normal;
}
.issues-collapsible:not([open]) > summary > .issues-summary-toggle::before {
content: '▶ ';
font-style: normal;
}
.issues-collapsible[open] > summary > .issues-summary-toggle::after {
content: ' · click para colapsar';
}
.issues-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.issue-item {
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--surface-low);
border-left: 3px solid var(--surface-variant);
}
.issue-high { border-left-color: #b91c1c; background: #fef2f2; }
.issue-medium { border-left-color: #b45309; background: #fffbeb; }
.issue-low { border-left-color: #6b7280; background: var(--surface-low); }
.issue-head {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 0.875rem;
margin-bottom: 4px;
}
.issue-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 999px;
background: rgba(255,255,255,0.7);
font-size: 0.875rem;
}
.issue-high .issue-icon { color: #b91c1c; }
.issue-medium .issue-icon { color: #b45309; }
.issue-low .issue-icon { color: var(--on-surface-muted); }
.issue-title { flex: 1; color: var(--on-surface); }
.issue-count {
font-weight: 700; font-size: 0.875rem;
background: rgba(0,0,0,0.06);
padding: 2px 8px; border-radius: 999px;
font-variant-numeric: tabular-nums;
color: var(--on-surface);
}
.issue-desc {
font-size: 0.75rem; color: var(--on-surface-variant);
margin-bottom: 6px; line-height: 1.4;
}
.issue-examples {
list-style: none; margin: 0 0 6px 30px; padding: 0;
font-size: 0.75rem;
}
.issue-examples li { padding: 2px 0; }
.issue-more {
font-style: italic;
color: var(--on-surface-variant);
padding-left: 4px;
}
/* Expandible para las paradas que sobran de las primeras 5.
es el toggle clickeable, dentro de es la
lista escondida. Scroll vertical si supera 320px para no romper
la altura de la card cuando hay decenas/centenas de paradas. */
.issue-more-details {
margin: 6px 0 0 30px;
}
.issue-more-details > summary {
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
color: var(--md-sys-color-primary, #1d4ed8);
padding: 4px 6px;
border-radius: 4px;
list-style: none; /* oculta el triángulo por defecto del browser */
user-select: none;
display: inline-block;
}
.issue-more-details > summary::-webkit-details-marker { display: none; } /* Safari */
.issue-more-details > summary:hover {
background: rgba(0,0,0,0.04);
}
.issue-more-details[open] > summary {
margin-bottom: 4px;
}
.issue-more-details[open] > summary::after {
content: ' (click para colapsar)';
font-weight: 400;
color: var(--on-surface-muted);
font-size: 0.6875rem;
}
.issue-examples-extra {
margin: 0 !important; /* el wrapper details ya tiene su margin */
max-height: 320px;
overflow-y: auto;
padding-right: 4px;
/* scrollbar discreto para no distraer */
scrollbar-width: thin;
scrollbar-color: var(--surface-variant) transparent;
}
.issue-examples-extra::-webkit-scrollbar { width: 6px; }
.issue-examples-extra::-webkit-scrollbar-track { background: transparent; }
.issue-examples-extra::-webkit-scrollbar-thumb {
background: var(--surface-variant);
border-radius: 3px;
}
/* Link rico al detalle de la intervención en Kisat.
Layout: [#code] [cliente · sede] [fecha] [info extra] [↗]
El hover muestra background sutil + subraya la flecha. */
.issue-ex-link {
display: flex; align-items: baseline; gap: 8px;
padding: 3px 6px;
border-radius: 4px;
text-decoration: none;
color: var(--on-surface);
transition: background 0.15s ease;
}
.issue-ex-link:hover {
background: rgba(0,0,0,0.04);
text-decoration: none;
}
.issue-ex-code {
font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
font-size: 0.6875rem;
font-weight: 700;
color: var(--on-surface-variant);
flex-shrink: 0;
min-width: 48px;
}
.issue-ex-cliente {
flex: 1;
font-weight: 500;
color: var(--on-surface);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.issue-ex-fecha {
font-size: 0.6875rem;
color: var(--on-surface-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.issue-ex-extra {
font-size: 0.6875rem;
color: var(--on-surface-muted);
font-style: italic;
flex-shrink: 0;
}
.issue-ex-arrow {
font-size: 0.75rem;
color: var(--on-surface-muted);
opacity: 0.5;
flex-shrink: 0;
transition: opacity 0.15s ease;
}
.issue-ex-link:hover .issue-ex-arrow {
opacity: 1;
color: var(--md-sys-color-primary, #1d4ed8);
}
.issue-fix {
font-size: 0.75rem;
margin-top: 4px; padding-top: 6px;
border-top: 1px dashed rgba(0,0,0,0.08);
color: var(--on-surface);
}
.issue-fix-label {
font-weight: 700;
color: var(--on-surface);
}
/* ════ Widget "Excepciones operativas" (dashboard) — rediseño limpio ════════
Scopeado bajo .issues-card para pisar las reglas flat de arriba (.issue-item,
indentado 30px, hover azul). Sin rellenos rojo/ámbar: la severidad la dice el
íconito tintado. Botones = chips .issue-act (mismo look que los atajos de la
barra de filtros, .date-range-shortcut). Movido del