/* CHK Diag — estilos del portal del taller, el panel admin y las páginas
 * públicas (órdenes). Mismos colores y letra que la app: Grafito (oscuro) y
 * Acero (claro). Por defecto sigue al sistema; el botón del menú lo cambia
 * (data-tema en <html>, guardado en el navegador).
 *
 * Las vistas viejas usan variables --color-… del diseño anterior: más abajo
 * se mapean a estos tokens para no tener que tocarlas una por una. */

@font-face { font-family: Inter; src: url(/fonts/Inter-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/JetBrainsMono-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }

/* --- Tokens: Grafito (oscuro, por defecto) --------------------------------- */
:root {
  color-scheme: dark;
  --bg: #111316;
  --surface: #1a1d21;
  --sunken: #23272d;
  --border: #2d3238;
  --text: #e9ebee;
  --muted: #a9b0ba;
  --faint: #7d8692;
  --accent: #f2a05b;
  --accent-on: #1a1206;
  --accent-tint: #3a2a1b;
  --accent-deep: #f7c291;
  --ok: #5cc08a;
  --ok-tint: #1c3127;
  --ok-deep: #a2e0bd;
  --warn: #e3b341;
  --warn-tint: #3a3018;
  --danger: #ff6b5e;
  --danger-tint: #3b1d1b;
  --danger-on: #1a0b09;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .45);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

/* --- Acero (claro) --------------------------------------------------------- */
:root[data-tema='acero'] {
  color-scheme: light;
  --bg: #f2f3f5;
  --surface: #ffffff;
  --sunken: #edeff2;
  --border: #dce0e5;
  --text: #1a1e23;
  --muted: #545f6d;
  --faint: #7a8594;
  --accent: #b45a17;
  --accent-on: #ffffff;
  --accent-tint: #fcebdd;
  --accent-deep: #8c430f;
  --ok: #2e8b57;
  --ok-tint: #e2f3e9;
  --ok-deep: #1f6340;
  --warn: #9a6a00;
  --warn-tint: #fdf3d8;
  --danger: #c62828;
  --danger-tint: #fde8e7;
  --danger-on: #ffffff;
  --shadow: 0 1px 2px rgba(26, 30, 35, .08);
  --shadow-lg: 0 8px 28px rgba(26, 30, 35, .14);
}

/* Nombres del diseño anterior → tokens nuevos (vistas sin migrar). */
:root, :root[data-tema='acero'] {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-divider: var(--border);
  --color-accent: var(--accent);
  --color-accent-100: var(--accent-tint);
  --color-accent-200: var(--accent-tint);
  --color-accent-300: var(--accent-tint);
  --color-accent-400: var(--accent);
  --color-accent-500: var(--accent);
  --color-accent-600: var(--accent-deep);
  --color-accent-700: var(--accent-deep);
  --color-accent-800: var(--accent-deep);
  --color-accent-2-100: var(--ok-tint);
  --color-accent-2-500: var(--ok);
  --color-accent-2-800: var(--ok-deep);
  --color-neutral-100: var(--sunken);
  --color-neutral-200: var(--border);
  --color-neutral-300: var(--border);
  --color-neutral-400: var(--faint);
  --color-neutral-500: var(--faint);
  --color-neutral-600: var(--muted);
  --color-neutral-700: var(--muted);
  --color-neutral-800: var(--text);
  --color-neutral-900: var(--text);
  --color-danger: var(--danger);
  --color-danger-bg: var(--danger-tint);
  --font-heading: var(--font);
  --font-body: var(--font);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow-lg);
}

/* --- Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
h3 { font-size: 15px; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0 0 8px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--sunken); border: 1px solid var(--border); padding: 1px 6px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.muted { color: var(--muted); }
small, .small { font-size: 12.5px; }
details > summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Estructura: menú lateral (escritorio) / barra con menú (celular) ------- */
.layout { display: flex; min-height: 100vh; }
aside.sb-panel {
  width: 244px; flex: none; background: var(--surface); border-right: 1px solid var(--border);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex: none; }
.brand-name { font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.brand-sub { font-size: 11.5px; color: var(--faint); }
nav.sb { display: flex; flex-direction: column; gap: 2px; }
.sb-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 12px 12px 4px; }
.sb-item, .adm-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 14px; color: var(--muted);
}
.sb-item:hover, .adm-item:hover { background: var(--sunken); color: var(--text); text-decoration: none; }
.sb-item.active, .adm-item.active { background: var(--accent-tint); color: var(--accent-deep); }
.sb-item svg, .adm-item svg { width: 18px; height: 18px; flex: none; }
.sb-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.plan-card { padding: 12px 14px; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-md); }
.plan-card .k { font-size: 13px; font-weight: 700; }
.plan-card .v { font-size: 12px; color: var(--muted); }
.account-row, .sb-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
.account-row .name, .sb-user .name { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.account-row .name strong, .sb-user .name strong { color: var(--text); display: block; font-size: 13px; }
.tema-btn { display: inline-flex; align-items: center; gap: 6px; }
main { flex: 1; min-width: 0; padding: 28px 36px 48px; max-width: 1280px; }
.topbar { display: none; }
#menu-toggle { display: none; }

@media (max-width: 900px) {
  .layout { display: block; }
  .topbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 14px;
  }
  .topbar .brand { padding: 0; }
  .topbar .brand img { width: 30px; height: 30px; }
  .topbar .titulo { font-weight: 700; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar label.hamb { display: inline-flex; padding: 6px; border-radius: 8px; cursor: pointer; color: var(--text); }
  .topbar label.hamb svg { width: 24px; height: 24px; }
  aside.sb-panel {
    position: fixed; z-index: 40; top: 0; left: 0; height: 100vh; width: 270px; max-width: 86vw;
    transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow-lg);
  }
  #menu-toggle:checked ~ aside.sb-panel { transform: none; }
  .velo { display: none; }
  #menu-toggle:checked ~ .velo { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .45); }
  main { padding: 18px 14px 40px; }
  h1 { font-size: 22px; }
}

/* --- Tarjetas, etiquetas, botones, formularios (portal) ------------------- */
.card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px; margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.elev-sm { box-shadow: var(--shadow); } .elev-md { box-shadow: var(--shadow-lg); }
a .card:hover { border-color: var(--accent); }
.card-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.card-title { font-weight: 700; font-size: 17px; line-height: 1.25; }
.card-body { margin: 0; font-size: 13.5px; }
.card-meta { font-size: 12px; color: var(--faint); }
.stat-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; flex: none; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tag, .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tag-accent, .pill.info { background: var(--accent-tint); color: var(--accent-deep); }
.tag-accent-2, .pill.on { background: var(--ok-tint); color: var(--ok-deep); }
.tag-neutral { background: var(--sunken); color: var(--muted); border: 1px solid var(--border); }
.tag-danger, .pill.off { background: var(--danger-tint); color: var(--danger); }
.pill.warn { background: var(--warn-tint); color: var(--warn); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  text-decoration: none; font: 600 14px/1.2 var(--font); color: var(--text);
  background: transparent; border: 1px solid transparent; padding: 9px 16px; border-radius: var(--r-sm);
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-secondary { border-color: var(--border); background: var(--sunken); }
.btn-secondary:hover { border-color: var(--accent); }
.btn-ghost { color: var(--accent); padding: 4px 6px; border: none; }
.btn-ghost:hover { background: var(--sunken); }
.btn-danger { color: var(--danger); }
.btn-block { width: 100%; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 600; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; min-height: 38px; padding: 8px 12px; font: 14px var(--font);
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
}
textarea.input { border-radius: var(--r-sm) !important; resize: vertical; }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.seg { display: inline-flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.seg a, .seg span.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg a + a, .seg a + span, .seg span + a { border-left: 1px solid var(--border); }
.seg a.active { background: var(--accent-tint); color: var(--accent-deep); }
.seg a:not(.active):hover { background: var(--sunken); text-decoration: none; }
.flash { padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.flash.ok { background: var(--ok-tint); color: var(--ok-deep); }
.flash.err { background: var(--danger-tint); color: var(--danger); }
.flash.aviso { background: var(--accent-tint); color: var(--accent-deep); }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); }
form.inline { display: inline; }
.radio, .checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
label.checkbox input { width: auto; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecera h1 { margin: 0 0 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* Tablas: con scroll horizontal propio cuando no entran (celular). */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
table.table { font-size: 14px; }

/* --- Panel admin: los formularios y botones van sin clases ---------------- */
body.admin input:not([type=checkbox]):not([type=radio]):not([type=file]), body.admin select, body.admin textarea {
  width: 100%; padding: 8px 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); font: 13.5px var(--font);
}
body.admin main label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 8px 0 4px; }
body.admin .row { display: flex; gap: 12px; flex-wrap: wrap; }
body.admin .row > div { flex: 1; min-width: 140px; }
body.admin button {
  padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-on); font: 600 13.5px var(--font); cursor: pointer;
}
body.admin button:hover { filter: brightness(1.07); }
body.admin button.ghost { background: transparent; color: var(--muted); border-color: var(--border); }
body.admin button.ghost:hover { background: var(--sunken); color: var(--text); filter: none; }
body.admin button.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
body.admin button.danger:hover { background: var(--danger-tint); filter: none; }
body.admin button.sm { padding: 4px 10px; font-size: 12.5px; min-height: 0; }
body.admin .card { display: block; margin: 10px 0; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important; }
.danger-zone .kicker { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--danger); display: flex; align-items: center; gap: 6px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi-grid .card { margin: 0; }
.kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kpi-value { font-size: 28px; font-weight: 700; }
.kpi-sub { font-size: 11.5px; margin-top: 4px; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select { width: auto !important; }
.filter-bar .search { max-width: 280px; flex: 1; min-width: 200px; }
.filter-bar label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; margin: 0; }
.filter-bar label.check input { width: auto; }
.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px; position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg); }
.subnav a { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); background: var(--surface); }
.subnav a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
@media (max-width: 900px) { .subnav { top: 52px; } }

/* --- Gráficas chicas (hover/touch) ----------------------------------------- */
.chart-wrap { position: relative; }
svg.hover-chart { cursor: crosshair; touch-action: pan-y; }
.chart-crosshair { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3, 3; opacity: 0; pointer-events: none; }
.chart-crosshair.active { opacity: .7; }
.chart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; opacity: 0; pointer-events: none; }
.chart-dot.active { opacity: 1; }
.chart-tooltip {
  position: absolute; top: 2px; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 11px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity .1s; box-shadow: var(--shadow);
}
.chart-tooltip.active { opacity: 1; }
.chart-range { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); margin-top: 2px; }
@keyframes newRowFlash { from { background: var(--accent-tint); } to { background: transparent; } }
.new-scan-row td, .new-scan-row .card { animation: newRowFlash 2.5s ease-out; }

/* --- En vivo (/admin/live, /portal/live) ----------------------------------- */
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--danger); animation: livePulse 1.4s ease-in-out infinite; }
.live-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.live-sensor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.live-sensor { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px 6px; }
.live-sensor .n { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-sensor .v { font-size: 22px; font-weight: 700; margin-top: 3px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.live-sparkline { color: var(--accent); margin-top: 6px; display: block; }
.live-sensor-range { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); margin-top: 2px; }
.grid-cards.focused .live-card { display: none; }
.grid-cards.focused .live-card.is-focused { display: block; grid-column: 1 / -1; }
.live-card.is-focused { padding: 22px; }
.live-card.is-focused .live-sensor-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.live-card.is-focused .live-sensor { padding: 14px 16px 8px; }
.live-card.is-focused .live-sensor .n { font-size: 13px; }
.live-card.is-focused .live-sensor .v { font-size: 30px; }
.live-card.is-focused .live-sparkline { height: 92px; }
.live-card.is-focused .live-act-row, .live-card.is-focused .live-act-spn { font-size: 13px; }
.live-card.is-focused .live-act-row { padding: 8px 10px; }
.live-act { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.live-act-head { font-size: 12px; margin-bottom: 6px; }
.live-act-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12px; }
.live-act-row:hover { background: var(--sunken); }
.live-act-caret { color: var(--faint); width: 10px; }
.live-act-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-act-meta { font-size: 11px; white-space: nowrap; }
.live-act-sub { padding: 4px 8px 8px 26px; font-size: 11px; }
.live-act-spn { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px 5px 26px; font-size: 11px; cursor: pointer; border-radius: 6px; }
.live-act-spn:hover { background: var(--sunken); color: var(--accent); }
.live-identity { margin-top: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
.live-identity-head { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.live-identity-row { display: flex; gap: 10px; font-size: 12px; padding: 3px 0; border-top: 1px solid var(--border); }
.live-identity-row:first-of-type { border-top: 0; }
.live-identity-row .k { color: var(--muted); flex: none; min-width: 150px; }
.live-identity-row .v { font-weight: 600; word-break: break-word; }

/* --- Fallas: activas (DM1, rojo) y previas (DM2, ámbar y en cursiva) ------- */
.live-faults { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.live-fault { display: block; font-size: 12px; padding: 7px 9px; border-radius: 6px; margin-bottom: 4px; }
.live-fault .code { font-weight: 700; font-size: 13px; }
.live-fault .desc { opacity: .95; margin-top: 1px; }
.live-fault-meta { font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.live-fault-group, .fault-group { border-radius: var(--r-md); padding: 8px; border: 1px solid var(--border); }
.live-fault-head, .fault-group-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; margin-bottom: 6px; padding: 2px; }
.live-fault-badge, .fault-badge { font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 2px 6px; border-radius: 4px; }
.live-fault-count { margin-left: auto; font-size: 11px; }
.live-fault-group.dm1, .fault-group.dm1 { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.live-fault-group.dm1 .live-fault-head, .fault-group.dm1 .fault-group-head { color: var(--danger); }
.live-fault-group.dm1 .live-fault-badge, .fault-group.dm1 .fault-badge { background: var(--danger); color: var(--danger-on); }
.live-fault-group.dm1 .live-fault { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.live-fault-group.dm2, .fault-group.dm2 { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.live-fault-group.dm2 .live-fault-head, .fault-group.dm2 .fault-group-head { color: var(--warn); }
.live-fault-group.dm2 .live-fault-badge, .fault-group.dm2 .fault-badge { background: var(--warn); color: var(--bg); }
.live-fault-group.dm2 .live-fault { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); color: var(--warn); font-style: italic; }
.fault-group.dm2 tbody td { color: var(--warn); font-style: italic; }

/* --- Página pública de la orden (/o/…): cómoda en el celular -------------- */
.hoja { max-width: 760px; margin: 0 auto; padding: 20px 16px 60px; }
.fila { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
canvas#firma { width: 100%; height: 180px; background: #fff; border: 1px dashed var(--faint); border-radius: var(--r-md); touch-action: none; }

@media print {
  aside.sb-panel, .topbar, .subnav, .no-imprimir { display: none !important; }
  main { padding: 0; }
  body { background: #fff; color: #000; }
}

/* --- Celular: lo que las vistas arman en columnas con estilo propio -------- */
@media (max-width: 900px) {
  main section[style*="grid-template-columns"],
  main form[style*="grid-template-columns"],
  main div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  main [style*="grid-column:span 2"] { grid-column: auto !important; }
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main .grid-cards[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* --- Tableros (máquina y taller) ------------------------------------------------ */
.seg button { border: 0; background: transparent; color: var(--muted); font: 600 13px var(--font); padding: 7px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.active { background: var(--accent-tint); color: var(--accent-deep); }
.seg button:not(.active):hover { background: var(--sunken); }

.tb-ficha { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 8px 0 16px; }
.tb-foto { position: relative; width: 220px; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--sunken), var(--surface)); border: 1px solid var(--border); display: grid; place-items: center; }
.tb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-foto .sil { width: 66%; color: var(--muted); opacity: .45; }
.tb-foto .btn { position: absolute; right: 8px; bottom: 8px; font-size: 12px; padding: 4px 10px; min-height: 0; }
.tb-ficha h1 { margin: 2px 0 4px; font-size: 24px; overflow-wrap: anywhere; }
.tb-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tb-horo { text-align: right; }
.tb-horo .v { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1.1; }
.tb-horo .k { font-size: 12px; color: var(--muted); }

.tb-barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 14px; }
.tb-barra label { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.tb-barra select.input { min-height: 34px; padding: 2px 8px; max-width: 320px; }
.tb-vivo { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--faint); margin-left: auto; }
.tb-vivo i { width: 9px; height: 9px; border-radius: 99px; background: var(--faint); }
.tb-vivo.on { color: var(--ok); cursor: pointer; }
.tb-vivo.on i { background: var(--ok); animation: tb-latido 1.4s infinite; }
@keyframes tb-latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

.tb-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.tb-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; min-width: 0; position: relative; }
.tb-panel > h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-panel > h3 .muted { font-weight: 500; }
.tb-panel > h3 .der { margin-left: auto; font-weight: 500; font-size: 12px; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }

.tb-stat .k { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-stat .v { font-family: var(--mono); font-size: 25px; font-weight: 700; line-height: 1.2; }
.tb-stat .v small { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.tb-stat svg { width: 100%; height: 32px; display: block; margin-top: 4px; }
.tb-stat .r { font-size: 11px; color: var(--faint); }
.tb-stat.ok .v { color: var(--ok); } .tb-stat.aviso .v { color: var(--warn); } .tb-stat.alarma .v { color: var(--danger); }
.tb-stat.alarma { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }

.tb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tb-chip { border: 1px solid var(--border); background: var(--sunken); color: var(--muted); border-radius: 999px; padding: 3px 10px 3px 8px; font: 500 12px var(--font); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tb-chip i { width: 10px; height: 3px; border-radius: 2px; }
.tb-chip.on { color: var(--text); border-color: var(--accent); }
.tb-graf { position: relative; }
.tb-graf .uno { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; border-top: 1px solid var(--border); padding: 4px 0; }
.tb-graf .uno:first-child { border-top: 0; }
.tb-graf .nom { font-size: 12px; line-height: 1.3; }
.tb-graf .nom b { display: block; font-family: var(--mono); font-size: 15px; }
.tb-graf .nom .r { color: var(--faint); font-size: 11px; }
.tb-graf svg { width: 100%; height: 74px; display: block; overflow: visible; }
.tb-graf .eje { font: 10px var(--mono); fill: var(--faint); }
.tb-graf .banda { fill: var(--ok); opacity: .08; }
.tb-graf .cursor { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.tb-tip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; font-size: 11.5px; box-shadow: var(--shadow-md); display: none; z-index: 5; white-space: nowrap; }
.tb-tip b { font-family: var(--mono); }

.tb-gauge { text-align: center; }
.tb-gauge svg { width: 100%; max-width: 210px; display: block; margin: 0 auto; }
.tb-gauge .v { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.tb-gauge .k { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

.tb-mapa { height: 280px; border-radius: var(--r-md); overflow: hidden; background: var(--sunken); z-index: 0; }
.tb-linea { position: relative; height: 56px; margin: 6px 0 2px; border-bottom: 1px solid var(--border); }
.tb-linea a { position: absolute; bottom: 0; width: 8px; margin-left: -4px; border-radius: 3px 3px 0 0; background: var(--ok); min-height: 4px; }
.tb-linea a.dm2 { background: var(--warn); } .tb-linea a.dm1 { background: var(--danger); }
.tb-fechas { display: flex; justify-content: space-between; font: 10.5px var(--mono); color: var(--faint); }
.tb-mini { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.tb-mini td { padding: 6px 4px; border-top: 1px solid var(--border); vertical-align: top; }
.tb-mini td:first-child { white-space: nowrap; }
.tb-barra-h { height: 6px; border-radius: 9px; background: var(--sunken); overflow: hidden; }
.tb-barra-h b { display: block; height: 100%; background: var(--accent); }
.tb-vacio { color: var(--faint); font-size: 13px; padding: 18px 0; text-align: center; }

.tb-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tb-fotos figure { margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--sunken); }
.tb-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; }
.tb-fotos figcaption { padding: 6px 8px; font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tb-fotos figcaption form { margin: 0; }
.tb-fotos figcaption button { font-size: 11.5px; padding: 2px 6px; }
.tb-visor { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: none; place-items: center; z-index: 50; cursor: zoom-out; }
.tb-visor.on { display: grid; }
.tb-visor img { max-width: 94vw; max-height: 90vh; border-radius: var(--r-md); }

.tb-flota { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tb-maq { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; color: inherit; display: block; transition: border-color .15s; }
.tb-maq:hover { border-color: var(--accent); text-decoration: none; }
.tb-maq .img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--sunken), var(--surface)); display: grid; place-items: center; position: relative; overflow: hidden; }
.tb-maq .img img { width: 100%; height: 100%; object-fit: cover; }
.tb-maq .img svg { width: 44%; opacity: .45; color: var(--muted); }
.tb-maq .img .tag { position: absolute; left: 10px; top: 10px; }
.tb-maq .cuerpo { padding: 12px 14px; }
.tb-maq .nombre { font-weight: 700; overflow-wrap: anywhere; }
.tb-maq .fila { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.tb-maq .fila b { color: var(--text); font-family: var(--mono); font-weight: 600; text-align: right; }
.tb-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 12px; }
.tb-filtros .input { max-width: 320px; }

@media (max-width: 1100px) {
  .c2 { grid-column: span 4; } .c3, .c4, .c5 { grid-column: span 6; } .c6, .c7, .c8 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .tb-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .c2, .c3 { grid-column: span 1; } .c4, .c5, .c6, .c7, .c8, .c12 { grid-column: span 2; }
  .tb-ficha { grid-template-columns: minmax(0, 1fr); } .tb-foto { width: 100%; aspect-ratio: 16 / 9; } .tb-horo { text-align: left; }
  .tb-stat .v { font-size: 20px; }
  .tb-vivo { margin-left: 0; }
  .tb-graf .uno { grid-template-columns: minmax(0, 1fr); }
  main table.tb-mini { display: table; }
}
/* El mapa de OpenStreetMap es muy claro: en el tema oscuro se apaga un poco. */
:root:not([data-tema='acero']) .tb-mapa .leaflet-tile { filter: brightness(.72) contrast(1.15) saturate(.75); }
.tb-mapa .leaflet-control-attribution { font-size: 10px; }

/* --- En vivo (panel y portal) ---------------------------------------------------- */
.vv { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.vv-lado { position: sticky; top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; }
.vv-tit { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px 8px; display: flex; justify-content: space-between; }
.vv-maq { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); padding: 6px; cursor: pointer; color: var(--text); font: inherit; margin-bottom: 4px; }
.vv-maq:hover { background: var(--sunken); }
.vv-maq.sel { background: var(--accent-tint); border-color: var(--accent); }
.vv-maq .img { position: relative; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--sunken); display: grid; place-items: center; }
.vv-maq .img img { width: 100%; height: 100%; object-fit: cover; }
.vv-maq .img svg { width: 80%; height: 70%; color: var(--muted); opacity: .5; }
.vv-maq .pulso { position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 9px; background: var(--ok); animation: tb-latido 1.4s infinite; }
.vv-maq .txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vv-maq b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-maq small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-maq .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.vv-maq .tag { font-size: 10.5px; padding: 1px 7px; }
.vv-cabeza { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 14px; }
.vv-cabeza h2 { margin: 2px 0; font-size: 21px; overflow-wrap: anywhere; }
.vv-foto { width: 120px; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--sunken); display: grid; place-items: center; }
.vv-foto img { width: 100%; height: 100%; object-fit: cover; }
.vv-foto svg { width: 76%; height: 70%; color: var(--muted); opacity: .45; }
.vv-acc { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.vv-bot { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.vv-bot .btn { font-size: 12.5px; }
.vv-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 4px; }
.vv-fila label { font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 120px; }
.vv-fila .input { max-width: 220px; min-height: 34px; padding: 2px 10px; }
.vv-sub { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.vv-chips { display: flex; gap: 6px; flex-wrap: wrap; max-height: 260px; overflow-y: auto; }
#vv-resultado { font-size: 12.5px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; min-height: 20px; }
.vv-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.vv-modos > div { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; background: var(--sunken); font-size: 13px; }
.vv-modos b { display: block; margin-bottom: 4px; }
/* En el panel admin, los botones generales son naranjas: los de clase del portal (chips,
   secundarios, fantasma) se ven como en el portal. */
body.admin .vv button.vv-maq { background: transparent; border: 1px solid transparent; color: var(--text); padding: 6px; font: inherit; border-radius: var(--r-md); }
body.admin .vv button.vv-maq:hover { background: var(--sunken); filter: none; }
body.admin .vv button.vv-maq.sel { background: var(--accent-tint); border-color: var(--accent); }
body.admin button.tb-chip { padding: 3px 10px 3px 8px; border: 1px solid var(--border); background: var(--sunken); color: var(--muted); font: 500 12px var(--font); border-radius: 999px; }
body.admin button.tb-chip.on { color: var(--text); border-color: var(--accent); }
body.admin button.btn-secondary { background: var(--sunken); color: var(--text); border-color: var(--border); }
body.admin button.btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
body.admin button.btn-danger { color: var(--danger); }
body.admin .vv label { margin: 0; display: inline; }
@media (max-width: 900px) {
  .vv { grid-template-columns: minmax(0, 1fr); }
  .vv-lado { position: static; }
  .vv-cabeza { grid-template-columns: 90px minmax(0, 1fr); }
  .vv-foto { width: 90px; }
  .vv-acc { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --- Escaneos del portal: lista + detalle (el detalle usa los paneles del tablero) --- */
.es-portal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.es-portal.con-detalle { grid-template-columns: 290px minmax(0, 1fr); }
@media (max-width: 1200px) {
  .es-portal.con-detalle { grid-template-columns: minmax(0, 1fr); }
  .es-portal.con-detalle > :first-child { order: 2; }
}
.es-portal .tb-ficha { grid-template-columns: 150px minmax(0, 1fr); }
.es-portal .tb-foto { width: 150px; }
.es-portal .tb-horo { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; text-align: left; }
.es-portal .tb-horo > div:last-child { margin-top: 0 !important; }
.tb-mini td code { white-space: normal; overflow-wrap: anywhere; }

/* --- Gráfica grande (toque en una tarjeta de sensor) ---------------------------------- */
.tb-abrible { cursor: pointer; }
.tb-stat.tb-abrible:hover { border-color: var(--accent); }
.tb-graf .nom.tb-abrible:hover { color: var(--accent); }
.tb-modal { position: fixed; inset: 0; background: rgba(8, 10, 14, .6); display: none; place-items: center; z-index: 60; padding: 16px; }
.tb-modal.on { display: grid; }
.tb-modal-caja { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: min(1100px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; }
.tb-modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tb-modal-cab h2 { margin: 2px 0 0; font-size: 20px; }
.tb-modal-cerrar { font-size: 18px; line-height: 1; padding: 4px 10px; }
.tb-modal-num { display: flex; gap: 22px; flex-wrap: wrap; margin: 12px 0 8px; }
.tb-modal-num > div { display: flex; flex-direction: column; }
.tb-modal-num .k { font-size: 11.5px; color: var(--muted); }
.tb-modal-num b { font-family: var(--mono); font-size: 20px; }
.tb-modal-num small { font-size: 12px; color: var(--muted); font-weight: 500; }
.tb-modal-graf { position: relative; }
.tb-modal-graf svg { width: 100%; height: auto; aspect-ratio: 900 / 360; display: block; touch-action: none; user-select: none; cursor: crosshair; }
.tb-modal-graf .eje { font: 10px var(--mono); fill: var(--faint); }
.tb-modal-graf .cursor { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.tb-modal-pie { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12.5px; }
body.admin button.tb-modal-cerrar { background: transparent; border-color: transparent; color: var(--muted); }

/* --- Guías de reparación ------------------------------------------------------ */
.gu-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.gu-pasos li { counter-increment: paso; position: relative; padding: 6px 0 6px 36px; line-height: 1.5; border-top: 1px solid var(--border); }
.gu-pasos li:first-child { border-top: 0; }
.gu-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-deep); font: 700 12px/24px var(--font); text-align: center; }
.gu-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.gu-fotos a { display: block; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--sunken); color: var(--muted); font-size: 12px; }
.gu-fotos img { display: block; width: 100%; height: 140px; object-fit: cover; }
.gu-fotos span { display: block; padding: 6px 8px; }
.gu-link { font-size: 12px; font-weight: 600; white-space: nowrap; }
.vv [data-sensor] { cursor: pointer; }
.vv [data-sensor]:hover { border-color: var(--accent); }

/* --- Manuales por máquina y sección -------------------------------------------- */
.mn-maquinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mn-maq { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--sunken); color: var(--text); }
.mn-maq:hover { border-color: var(--accent); text-decoration: none; }
.mn-maq-cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.mn-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mn-chip { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--border); color: var(--faint); }
.mn-chip.on { border-style: solid; border-color: transparent; background: var(--accent-tint); color: var(--accent-deep); }
.mn-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; }
.mn-sec { border-style: dashed; }
.mn-sec.llena { border-style: solid; border-left: 3px solid var(--accent); }
.mn-subir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.mn-subir input[type=file] { flex: 1 1 100%; font-size: 12.5px; }
.mn-subir input[name=titulo] { flex: 1; min-width: 140px; }
.mn-editar { display: inline-block; text-align: left; }
.mn-editar > summary { list-style: none; display: inline-flex; }
.mn-editar[open] form { position: absolute; right: 16px; z-index: 5; width: 280px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.mn-pdfs { display: flex; flex-direction: column; }
.mn-pdf { position: relative; padding: 8px 0; border-top: 1px solid var(--border); }
.mn-pdf:first-child { border-top: 0; padding-top: 0; }
.mn-acc { display: flex; gap: 6px; align-items: center; margin-top: 4px; }

/* --- Gráficas (public/js/graficas.js, uPlot) --------------------------------- */
.gr { position: relative; }
.gr-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.gr-btn { font-size: 12.5px !important; padding: 4px 10px !important; min-height: 0 !important; }
.gr-btn.on { border-color: var(--accent) !important; color: var(--accent-deep) !important; background: var(--accent-tint) !important; }
.gr-zoom, .gr-bajar { display: inline-flex; gap: 4px; }
.gr-zoom .gr-btn { width: 30px; justify-content: center; padding: 4px 0 !important; }
.gr-tramo { font-size: 12px; margin-left: auto; text-align: right; }
.gr-chips { margin-bottom: 6px; }
.gr-una { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
.gr-una:first-child { border-top: 0; margin-top: 0; }
.gr-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12.5px; padding: 0 2px 2px; }
.gr-cab b { font-family: var(--mono); font-size: 14px; }
.gr-cab b small { font-family: var(--font); font-weight: 500; color: var(--muted); font-size: 11px; }
.gr-cab b.aviso { color: var(--warn); } .gr-cab b.alarma { color: var(--danger); } .gr-cab b.ok { color: var(--ok); }
.gr-nom { border: 0; background: none; padding: 0; font: 600 12.5px var(--font); color: var(--text); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.gr-nom:hover { color: var(--accent); }
.gr-nom i, .gr-tip i, .gr-punto { display: inline-block; width: 9px; height: 9px; border-radius: 9px; }
.gr-tip i { margin-right: 4px; }
.gr-niveles { display: inline-flex; width: 90px; height: 6px; border-radius: 6px; overflow: hidden; background: var(--sunken); align-self: center; }
.gr-niveles i { display: block; height: 100%; }
.gr-niveles .ok { background: var(--ok); } .gr-niveles .aviso { background: var(--warn); } .gr-niveles .alarma { background: var(--danger); }
.gr-pc { font-size: 11.5px; }
.gr-lienzo { position: relative; }
.gr-lienzo .u-select { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.gr-lienzo .u-cursor-x { border-right: 1px dashed var(--accent) !important; }
.gr-lienzo .u-cursor-y { display: none; }
.gr-tip { position: absolute; pointer-events: none; z-index: 5; display: none; max-width: 320px; }
.gr-ev { font-size: 12px; margin-top: 2px; }
.gr-resumen { margin-top: 10px; }
.gr-tabla td.ok { color: var(--ok); } .gr-tabla td.aviso { color: var(--warn); } .gr-tabla td.alarma { color: var(--danger); }
.gr-tabla .gr-punto { margin-right: 6px; }
.gr-sub { font-weight: 700; font-size: 12.5px; margin: 12px 0 4px; }
.gr-dias { overflow-x: auto; }
.gr-modal .tb-modal-caja { width: min(1100px, calc(100vw - 24px)); }
.gr-ayuda { font-size: 12px; margin-top: 8px; }
@media (max-width: 700px) {
  .gr-tramo { margin-left: 0; text-align: left; width: 100%; }
}
/* En el panel los botones son naranjas por defecto: los de las gráficas van como en el portal. */
body.admin .gr button.gr-nom { background: none; border: 0; padding: 0; color: var(--text); font: 600 12.5px var(--font); }
body.admin .gr button.gr-nom:hover { color: var(--accent); filter: none; }
body.admin .gr button.btn-secondary, body.admin .gr-modal button.btn-secondary { background: var(--sunken); color: var(--text); border: 1px solid var(--border); }
body.admin .gr button.btn-ghost, body.admin .gr-modal button.btn-ghost { background: transparent; color: var(--accent); border: 0; }
body.admin .gr button.btn-secondary:hover, body.admin .gr button.btn-ghost:hover { filter: none; border-color: var(--accent); }
body.admin .gr .seg button { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 7px 12px; font: 600 13px var(--font); }
body.admin .gr .seg button + button { border-left: 1px solid var(--border); }
body.admin .gr .seg button.active { background: var(--accent-tint); color: var(--accent-deep); }
body.admin .gr .seg button:hover { filter: none; }

/* --- En vivo: lo que hay en el bus y tramas propias ------------------------------- */
.vv-bus { font-size: 12.5px; }
.vv-bus-fila { cursor: pointer; }
.vv-bus-fila:hover td, .vv-bus-fila.on td { background: var(--sunken); }
.vv-bytes { font-size: 11.5px; white-space: nowrap; }
.vv-bus-spns td { background: var(--sunken); padding: 6px 10px 10px !important; }
.vv-spn { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 4px 0; border-top: 1px solid var(--border); }
.vv-spn:first-child { border-top: 0; }
.vv-spn b { font-family: var(--mono); }
.vv-tramas { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 8px; }
.vv-tramas label:nth-child(1) { flex: 1 1 130px; } .vv-tramas label:nth-child(3) { flex: 2 1 230px; }
.vv-tramas label:nth-child(4), .vv-tramas label:nth-child(5) { flex: 0 0 96px; }
.vv-tramas label { font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; margin: 0; }
.vv-tramas .vv-ext { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.vv-tramas .input { font-family: var(--mono); font-size: 13px; }
body.admin .vv-bus .tb-chip, body.admin .vv-bus button.btn-secondary { background: var(--sunken); color: var(--text); border: 1px solid var(--border); padding: 3px 10px; font-size: 12px; }
body.admin .vv-bus .tb-chip.on { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }
.vv-lec-lista { max-height: 180px; overflow: auto; margin-bottom: 6px; }
.vv-simfila { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 8px; background: var(--sunken); }
.vv-simcab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.vv-simspns { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.vv-simspns label { display: grid; grid-template-columns: 1fr 110px 40px; gap: 6px; align-items: center; font-size: 12px; margin: 0; }
.vv-simspns .input { font-family: var(--mono); font-size: 12.5px; padding: 4px 8px; }
.vv-simprev { font-size: 12px; margin-top: 4px; }
.vv-simprev.mal { color: var(--danger); }
body.admin .vv-simfila button.btn-ghost, body.admin #vv-lec .tb-chip, body.admin #vv-sim .tb-chip { background: transparent; color: var(--accent); border: 1px solid var(--border); }
body.admin #vv-lec .tb-chip.on { background: var(--accent-tint); color: var(--accent-deep); }
body.admin #vv-lec button.btn-secondary, body.admin #vv-sim button.btn-secondary { background: var(--sunken); color: var(--text); border: 1px solid var(--border); }