/* =====================================================================
   ABC · Tarjetas de Defecto — estilos
   ===================================================================== */
:root {
  --bg: #070B18;
  --bg-2: #0C1224;
  --panel: rgba(18, 26, 48, .72);
  --panel-solid: #111a31;
  --panel-2: rgba(var(--ink), .035);
  --border: rgba(var(--ink), .08);
  --border-2: rgba(var(--ink), .14);
  --text: #EAF0FB;
  --muted: #8E99B8;
  --dim: #5D6886;

  --red: #FF3B4E;
  --brand: #E11D2E;
  --orange: #FF9F43;
  --amber: #FBBF24;
  --green: #22C55E;
  --teal: #14B8A6;
  --cyan: #22D3EE;
  --blue: #3B82F6;
  --violet: #8B5CF6;
  --pink: #EC4899;

  --acc1: #FF3B4E;
  --acc2: #FF7A45;
  --grad-brand: linear-gradient(135deg, var(--acc1) 0%, var(--acc2) 100%);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, .65);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ink: 255, 255, 255;
  --input-bg: rgba(6, 10, 22, .5);
  --input-bg-focus: rgba(6, 10, 22, .8);
  --sidebar-bg: linear-gradient(180deg, rgba(13,19,38,.92), rgba(9,13,28,.92));
  --drawer-bg: linear-gradient(180deg, #0F1730, #0A1024);
  --drawer-head: linear-gradient(180deg, #0F1730 75%, rgba(15,23,48,0));
  --modal-bg: linear-gradient(180deg, #121B36, #0C1328);
  --toast-bg: rgba(17,26,49,.96);
  --h1-a: #ffffff; --h1-b: #C9D3EE;
  --picker-filter: invert(.8);
  --blob1: #E11D2E; --blob2: #3B2BD9; --blob3: #0EA5B7; --blob-op: 1;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  transition: background-color .5s, color .5s;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.ic { flex: none; display: block; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Fondo animado ---------- */
.bg-fx { position: fixed; inset: 0; z-index: 0; opacity: var(--blob-op); transition: opacity .6s; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; animation: float 22s ease-in-out infinite alternate; }
.b1 { width: 520px; height: 520px; background: var(--blob1); top: -180px; right: -120px; opacity: .28; }
.b2 { width: 600px; height: 600px; background: var(--blob2); bottom: -260px; left: 120px; opacity: .25; animation-duration: 28s; }
.b3 { width: 380px; height: 380px; background: var(--blob3); top: 40%; right: 25%; opacity: .14; animation-duration: 32s; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } 100% { transform: translate(-30px, 40px) scale(.95); } }
.grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(var(--ink), .025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink), .025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%);
}

/* ---------- Layout ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.main { padding: 32px 40px 60px; min-width: 0; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 26px;
  padding: 26px 18px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-brand); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--acc1) 70%, transparent);
  position: relative; overflow: hidden;
}
.brand-mark span { font-weight: 800; font-style: italic; font-size: 20px; letter-spacing: -1px; color: #fff; }
.brand-mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, #ffffff73 50%, transparent 70%); transform: translateX(-100%); animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.brand-title { font-weight: 800; font-size: 15px; }
.brand-sub { color: var(--muted); font-size: 11.5px; }

.menu { position: relative; display: flex; flex-direction: column; gap: 8px; }
.menu-indicator {
  position: absolute; left: 0; right: 0; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc1) 16%, transparent), color-mix(in srgb, var(--acc2) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--acc1) 30%, transparent);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--acc1) 55%, transparent), inset 0 1px 0 rgba(var(--ink), .06);
  transition: transform .5s var(--ease), background .4s, border-color .4s, box-shadow .4s;
}
.menu-indicator.cyan { background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(59,130,246,.06)); border-color: rgba(34,211,238,.3); box-shadow: 0 10px 30px -12px rgba(34,211,238,.5); }
.menu-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px;
  height: 64px; padding: 0 12px; border: 0; border-radius: 16px; background: transparent; text-align: left;
  color: var(--muted); transition: color .3s;
}
.menu-item:hover { color: var(--text); }
.menu-item.active { color: var(--text); }
.menu-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; transition: transform .4s var(--ease); }
.menu-item:hover .menu-icon { transform: rotate(-6deg) scale(1.06); }
.menu-text { display: flex; flex-direction: column; }
.menu-text b { font-size: 15px; font-weight: 700; }
.menu-text small { font-size: 11.5px; color: var(--muted); }

.side-card { margin-top: auto; border: 1px solid var(--border); background: var(--panel-2); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.side-card-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.side-card-row > span:first-child { color: var(--text); }
#clock { font-family: var(--mono); color: var(--text); font-size: 14px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(251,191,36,.6); animation: pulse 2s infinite; margin: 0 4px; }
.dot.ok { background: var(--green); box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
.dot.bad { background: var(--red); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
.side-foot { color: var(--dim); font-size: 11px; padding: 0 8px; }

/* ---------- Gradientes de iconos ---------- */
.grad-red { background: linear-gradient(135deg, #FF3B4E, #FF7A45); box-shadow: 0 8px 20px -8px rgba(255,59,78,.8); }
.grad-cyan { background: linear-gradient(135deg, #22D3EE, #3B82F6); box-shadow: 0 8px 20px -8px rgba(34,211,238,.8); }
.grad-violet { background: linear-gradient(135deg, #A78BFA, #7C3AED); box-shadow: 0 8px 20px -8px rgba(139,92,246,.8); }
.grad-amber { background: linear-gradient(135deg, #FCD34D, #F97316); box-shadow: 0 8px 20px -8px rgba(249,115,22,.8); }
.grad-green { background: linear-gradient(135deg, #4ADE80, #0D9488); box-shadow: 0 8px 20px -8px rgba(34,197,94,.8); }
.grad-blue { background: linear-gradient(135deg, #60A5FA, #4F46E5); box-shadow: 0 8px 20px -8px rgba(79,70,229,.8); }

/* ---------- Vistas y animación de entrada ---------- */
.view { display: none; }
.view.active { display: block; }
.view.active .reveal { animation: reveal .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(255,159,67,.1); border: 1px solid rgba(255,159,67,.25); }
.eyebrow .ic { width: 15px; height: 15px; }
h1 { font-size: 32px; line-height: 1.15; margin: 14px 0 6px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--h1-a) 0%, var(--h1-b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); margin: 0; max-width: 680px; font-size: 14.5px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(14px);
  position: relative;
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ink), .05), transparent 40%); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border-2);
  background: rgba(var(--ink), .04); color: var(--text); font-weight: 600;
  transition: transform .25s var(--ease), box-shadow .3s, background .3s, border-color .3s;
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn .ic { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); border-color: rgba(var(--ink), .25); background: rgba(var(--ink), .07); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--acc1) 75%, transparent); }
.btn.primary:hover { box-shadow: 0 16px 36px -10px color-mix(in srgb, var(--acc1) 95%, transparent); }
.btn.cyan { background: linear-gradient(135deg, #22D3EE, #3B82F6); border-color: transparent; box-shadow: 0 12px 28px -10px rgba(34,211,238,.7); }
.btn.green { background: linear-gradient(135deg, #22C55E, #0D9488); border-color: transparent; box-shadow: 0 12px 28px -10px rgba(34,197,94,.7); }
.btn.ghost { background: transparent; }
.btn.sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn.big { width: 100%; height: 54px; font-size: 16px; border-radius: 14px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn.loading .ic { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: #ffffff66; animation: ripple .6s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Formulario de captura ---------- */
.capture-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.form-col { display: grid; gap: 18px; }
.section { padding: 22px 24px 24px; transition: border-color .4s, box-shadow .4s; }
.section.done { border-color: rgba(34,197,94,.28); }
.section.has-error { border-color: rgba(255,59,78,.45); box-shadow: 0 0 0 1px rgba(255,59,78,.15), var(--shadow); }
.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sec-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.sec-head small { color: var(--muted); font-size: 12px; }
.sec-num { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 15px; flex: none; }
.sec-num .ic { width: 18px; height: 18px; }

.fields { display: grid; gap: 16px 18px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.span-2 { grid-column: span 2; }
.field label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.field label::after { content: "*"; color: var(--red); }
.field label em { font-style: normal; color: var(--dim); font-weight: 500; font-size: 11.5px; order: 2; }
.field label::after { order: 1; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > [data-icon] { position: absolute; left: 14px; color: var(--muted); pointer-events: none; transition: color .3s; }
.input-wrap > [data-icon] .ic { width: 18px; height: 18px; }
.input-wrap input[type] { padding-left: 42px; }
input[type=text], input[type=date], input[type=search], textarea, select {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 12px;
  background: var(--input-bg); border: 1px solid var(--border-2); outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
textarea { height: auto; padding: 14px; resize: vertical; min-height: 120px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, textarea:focus, select:focus { border-color: color-mix(in srgb, var(--acc2) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc1) 14%, transparent); background: var(--input-bg-focus); }
.input-wrap:focus-within > [data-icon] { color: var(--acc2); }
input[type=date]::-webkit-calendar-picker-indicator { filter: var(--picker-filter); cursor: pointer; }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E99B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
select option { background: var(--bg-2); color: var(--text); }

/* Segmentado y chips */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.seg button, .chips button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--input-bg); color: var(--muted); font-weight: 600;
  transition: all .3s var(--ease);
}
.seg button small { width: 100%; text-align: center; font-weight: 500; font-size: 11px; color: var(--dim); margin-top: -4px; }
.seg button .ic { width: 18px; height: 18px; }
.seg button:hover, .chips button:hover { color: var(--text); border-color: rgba(var(--ink), .28); transform: translateY(-1px); }
.seg button.on, .chips button.on {
  color: #fff; border-color: transparent; background: var(--grad-brand);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--acc1) 85%, transparent); animation: pop .35s var(--ease);
}
.seg button.on small { color: rgba(var(--ink), .85); }
.seg button .now { position: absolute; top: -8px; right: 8px; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--cyan); color: #04212a; font-weight: 800; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chips button { min-width: 64px; }
@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

.collapsible { overflow: hidden; transition: max-height .45s var(--ease), opacity .35s, margin .35s; max-height: 140px; opacity: 1; }
.collapsible.collapsed { max-height: 0; opacity: 0; margin-top: -16px; pointer-events: none; }

.prompt-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.prompt-pills > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: #A5F3FC; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.22); }
.prompt-pills .ic { width: 14px; height: 14px; }
.field-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.counter { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 6px; }

/* Tiles (tipo de defecto / evento) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tiles-4 { grid-template-columns: repeat(4, 1fr); }
.tile {
  --c: var(--red);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; min-height: 112px; border-radius: 14px; text-align: left;
  border: 1px solid var(--border-2); background: var(--input-bg); color: var(--text);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s;
  overflow: hidden;
}
.tile::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%); }
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tile:hover::after { opacity: .6; }
.tile .t-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; z-index: 1;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  transition: all .35s var(--ease); }
.tile b { font-size: 13.5px; z-index: 1; line-height: 1.25; }
.tile small { color: var(--dim); font-size: 11px; z-index: 1; margin-top: -6px; }
.tile .t-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; border: 1.5px solid var(--border-2); color: transparent; transition: all .3s var(--ease); }
.tile .t-check .ic { width: 13px; height: 13px; }
.tile.on { border-color: var(--c); box-shadow: 0 14px 30px -14px var(--c), inset 0 0 0 1px var(--c); }
.tile.on::after { opacity: 1; }
.tile.on .t-ic { color: #fff; background: var(--c); transform: rotate(-8deg) scale(1.06); box-shadow: 0 8px 18px -6px var(--c); }
.tile.on .t-check { background: var(--c); border-color: var(--c); color: #fff; animation: pop .35s var(--ease); }

/* Errores / alertas en campos */
.err { color: #FF8A95; font-size: 12px; font-weight: 600; min-height: 0; display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.err:empty { display: none; }
.err .ic { width: 14px; height: 14px; }
.field.invalid input, .field.invalid textarea { border-color: rgba(255,59,78,.8); box-shadow: 0 0 0 4px rgba(255,59,78,.12); }
.field.invalid .seg button:not(.on), .field.invalid .chips button:not(.on), .field.invalid .tile:not(.on) { border-color: rgba(255,59,78,.55); }
.field.invalid label { color: #FFB1B8; }
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 100% { box-shadow: var(--shadow); } 30% { box-shadow: 0 0 0 3px rgba(255,159,67,.6), var(--shadow); } }

/* Panel resumen */
.summary-col { position: sticky; top: 24px; }
.summary { padding: 24px; display: grid; gap: 18px; }
.ring-wrap { position: relative; width: 168px; height: 168px; margin: 4px auto 0; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(var(--ink), .07); stroke-width: 10; }
.ring-fg { fill: none; stroke: url(#ringGrad); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acc1) 55%, transparent)); }
.ring-wrap.complete .ring-fg { stroke: var(--green); filter: drop-shadow(0 0 10px rgba(34,197,94,.6)); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-label b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.ring-label small { color: var(--muted); font-size: 12px; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 13px; cursor: pointer; transition: background .25s, color .25s; }
.checklist li:hover { background: rgba(var(--ink), .04); color: var(--text); }
.checklist .ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-2); color: transparent; transition: all .35s var(--ease); flex: none; }
.checklist .ck .ic { width: 13px; height: 13px; }
.checklist li.ok { color: var(--text); }
.checklist li.ok .ck { background: var(--green); border-color: var(--green); color: #fff; transform: scale(1.05); }
.checklist li.bad .ck { border-color: var(--red); background: rgba(255,59,78,.15); }
.checklist .cnt { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.22); color: #FDE68A; font-size: 12.5px; }
.notice p { margin: 0; }
.notice .ic { width: 18px; height: 18px; margin-top: 1px; }

/* ---------- Histórico: KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 18px; }
.kpi { padding: 18px 18px 16px; overflow: hidden; transition: transform .35s var(--ease), border-color .35s; }
.kpi:hover { transform: translateY(-4px); border-color: var(--border-2); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; }
.kpi-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.kpi-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(var(--ink), .06); color: var(--muted); }
.kpi-val { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 14px; line-height: 1; }
.kpi-val small { font-size: 16px; color: var(--muted); font-weight: 700; margin-left: 2px; }
.kpi-lbl { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.kpi-bar { height: 4px; border-radius: 4px; background: rgba(var(--ink), .06); margin-top: 12px; overflow: hidden; }
.kpi-bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.2s var(--ease); }
.kpi-glow { position: absolute; width: 140px; height: 140px; border-radius: 50%; right: -50px; top: -60px; filter: blur(40px); opacity: .28; pointer-events: none; }

/* ---------- Histórico: gráficas ---------- */
.charts { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.chart { padding: 18px 20px; min-height: 290px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.chart-head h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
.chart-head h3 .ic { width: 17px; height: 17px; color: var(--orange); }
.legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-red { background: var(--grad-brand); } .lg-cyan { background: linear-gradient(135deg,#22D3EE,#3B82F6); }
.lg-amber { background: var(--amber); } .lg-green { background: var(--green); }
.svg-chart { width: 100%; height: 220px; overflow: visible; }
.svg-chart .bar { transform-box: fill-box; transform-origin: bottom; animation: grow .9s var(--ease) both; }
.svg-chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.svg-chart .val { fill: var(--text); font-weight: 700; font-size: 10.5px; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hbars { display: grid; gap: 11px; }
.hbar { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; }
.hbar .h-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.hbar .h-ic .ic { width: 15px; height: 15px; }
.hbar .h-lbl { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.hbar .h-track { height: 8px; border-radius: 8px; background: rgba(var(--ink), .06); overflow: hidden; display: flex; }
.hbar .h-fill { height: 100%; width: 0; border-radius: 8px; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); transition: width 1.1s var(--ease); }
.hbar .h-num { font-family: var(--mono); font-weight: 700; font-size: 13px; min-width: 24px; text-align: right; }
.hbar.line .h-ic { font-size: 10px; font-weight: 800; font-family: var(--mono); }
.h-fill.op { background: var(--amber); box-shadow: none; border-radius: 8px 0 0 8px; }
.h-fill.cl { background: var(--green); box-shadow: none; border-radius: 0 8px 8px 0; }
.od-badge { font-size: 10px; color: #FF8A95; font-weight: 700; margin-left: 6px; }

/* ---------- Tabla ---------- */
.table-card { padding: 18px 0 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 16px; align-items: center; border-bottom: 1px solid var(--border); }
.filters .search { flex: 1 1 260px; }
.filters select { width: auto; min-width: 140px; height: 40px; }
.filters input[type=search], .filters input[type=date] { height: 40px; }
.date-f { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.date-f input { width: 150px; }
.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch i { width: 38px; height: 22px; border-radius: 999px; background: rgba(var(--ink), .1); position: relative; transition: background .3s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease); }
.switch input:checked + i { background: var(--acc1); }
.switch input:checked + i::after { transform: translateX(16px); }

.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 1050px; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); font-weight: 700; padding: 14px 14px; white-space: nowrap; }
.tbl td { padding: 14px; white-space: normal; border-top: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
.tbl tbody tr { cursor: pointer; transition: background .25s; animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.tbl tbody tr:hover { background: rgba(var(--ink), .035); }
.tbl tbody tr:hover .go { transform: translateX(3px); color: var(--text); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.folio { white-space: nowrap; font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: #FFB4A2; }
.sub { color: var(--dim); font-size: 11.5px; }
.type-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.type-dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.type-dot .ic { width: 14px; height: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill .ic { width: 13px; height: 13px; }
.pill.open { color: #FCD34D; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); }
.pill.closed { color: #86EFAC; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); }
.pill.overdue { color: #FF9AA4; background: rgba(255,59,78,.12); border: 1px solid rgba(255,59,78,.35); }
.pill.ev { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.date-od { color: #FF8A95; font-weight: 700; }
.go { color: var(--dim); transition: transform .3s var(--ease), color .3s; }
.empty { text-align: center; padding: 50px 20px !important; color: var(--muted); cursor: default; }
.empty .ic { width: 42px; height: 42px; margin: 0 auto 10px; color: var(--dim); }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 6px; color: var(--muted); font-size: 12.5px; }
.pager > div { display: flex; gap: 8px; }
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--ink), .04), rgba(var(--ink), .1), rgba(var(--ink), .04)); background-size: 200% 100%; animation: skel 1.2s infinite; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---------- Drawer ---------- */
.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; background: rgba(3,6,14,.6); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 40; }
.drawer-backdrop.show, .modal-backdrop.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(620px, 100vw); z-index: 41; background: var(--drawer-bg); border-left: 1px solid var(--border-2);
  transform: translateX(105%); transition: transform .55s var(--ease); overflow-y: auto; box-shadow: -30px 0 60px -20px rgba(0,0,0,.6); }
.drawer.show { transform: none; }
.dr-head { position: sticky; top: 0; z-index: 2; padding: 22px 26px 18px; background: var(--drawer-head); }
.dr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dr-folio { font-family: var(--mono); font-size: 13px; color: #FFB4A2; font-weight: 700; }
.dr-title { font-size: 22px; font-weight: 800; margin: 4px 0 8px; }
.dr-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-btn { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--border-2); background: rgba(var(--ink), .04); transition: all .3s var(--ease); }
.icon-btn:hover { transform: rotate(90deg); background: rgba(255,59,78,.2); border-color: rgba(255,59,78,.5); }
.dr-body { padding: 0 26px 30px; display: grid; gap: 16px; }
.dr-sec { border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; background: rgba(var(--ink), .025); animation: reveal .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.dr-sec h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.dr-sec h4 .ic { width: 15px; height: 15px; color: var(--orange); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.kv div small { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.kv div b { font-weight: 600; font-size: 13.5px; }
.desc-box { white-space: pre-wrap; line-height: 1.6; color: #D5DCEE; }
.dr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.close-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.close-form .full { grid-column: span 2; display: flex; gap: 10px; justify-content: flex-end; }
.final-ok { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); }
.final-ok .ic { color: var(--green); width: 26px; height: 26px; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, rgba(var(--ink), .12), transparent); }
.timeline li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 0 0 16px; animation: reveal .5s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.tl-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; z-index: 1; }
.tl-ic .ic { width: 15px; height: 15px; }
.tl-title { font-weight: 600; font-size: 13px; }
.tl-meta { color: var(--dim); font-size: 11.5px; margin-top: 2px; }
.tl-change { margin-top: 6px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-change .old { color: #FF9AA4; text-decoration: line-through; opacity: .8; }
.tl-change .new { color: #86EFAC; }
.tl-change .ic { width: 14px; height: 14px; color: var(--dim); }

/* ---------- Modal ---------- */
.modal-backdrop { display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { width: min(520px, 100%); max-height: 90vh; overflow: auto; background: var(--modal-bg); border: 1px solid var(--border-2); border-radius: 22px; padding: 28px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
  transform: translateY(20px) scale(.94); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.modal-backdrop.show .modal { transform: none; opacity: 1; }
.m-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff; margin-bottom: 16px; }
.m-ic .ic { width: 30px; height: 30px; }
.m-ic.warn { background: linear-gradient(135deg, #FF3B4E, #F97316); box-shadow: 0 14px 30px -10px rgba(255,59,78,.8); animation: wobble 1s var(--ease); }
@keyframes wobble { 0% { transform: scale(.5) rotate(-20deg); } 50% { transform: scale(1.1) rotate(8deg); } 75% { transform: rotate(-4deg); } 100% { transform: none; } }
.modal h2 { margin: 0 0 6px; font-size: 21px; }
.modal p { color: var(--muted); margin: 0 0 16px; }
.miss-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.miss-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,59,78,.25); background: rgba(255,59,78,.06); cursor: pointer; transition: all .25s var(--ease); animation: reveal .45s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.miss-list li:hover { transform: translateX(4px); background: rgba(255,59,78,.12); }
.miss-list .mi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,59,78,.15); color: #FF8A95; flex: none; }
.miss-list .mi .ic { width: 16px; height: 16px; }
.miss-list b { display: block; font-size: 13.5px; }
.miss-list small { color: var(--muted); font-size: 12px; }
.miss-list .go { margin-left: auto; }
.m-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.success { text-align: center; }
.success .m-actions { justify-content: center; }
.check-anim { width: 96px; height: 96px; margin: 0 auto 14px; }
.check-anim circle { fill: none; stroke: var(--green); stroke-width: 4; stroke-dasharray: 290; stroke-dashoffset: 290; animation: draw .8s var(--ease) forwards; }
.check-anim path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .5s .55s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.big-folio { font-family: var(--mono); font-size: 28px; font-weight: 700; margin: 6px 0 18px; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.confetti { position: fixed; top: -10px; width: 8px; height: 14px; z-index: 60; border-radius: 2px; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 70; display: grid; gap: 10px; width: min(380px, calc(100vw - 40px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--toast-bg); border: 1px solid var(--border-2); box-shadow: var(--shadow); position: relative; overflow: hidden;
  animation: toastIn .5s var(--ease) both; }
.toast.out { animation: toastOut .4s var(--ease) forwards; }
.toast .t-i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.toast .t-i .ic { width: 17px; height: 17px; }
.toast b { display: block; font-size: 13.5px; }
.toast span { color: var(--muted); font-size: 12.5px; }
.toast .t-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: currentColor; animation: tbar linear forwards; }
.toast.ok { color: var(--green); } .toast.ok .t-i { background: var(--green); }
.toast.warn { color: var(--red); } .toast.warn .t-i { background: var(--grad-brand); }
.toast.info { color: var(--cyan); } .toast.info .t-i { background: linear-gradient(135deg,#22D3EE,#3B82F6); }
.toast b, .toast span { color: var(--text); } .toast span { color: var(--muted); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }
@keyframes tbar { from { width: 100%; } to { width: 0; } }

/* Banner de edición */
.edit-banner { display: inline-flex; gap: 8px; align-items: center; color: #FDE68A; }

/* ---------- Responsive ---------- */
@media (max-width: 1350px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .charts { grid-template-columns: 1fr 1fr; }
  .charts .chart:first-child { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .capture-grid { grid-template-columns: 1fr; }
  .summary-col { position: static; }
  .tiles-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .brand-title, .menu-text { display: none; }
  .menu-item { padding: 0 6px; }
  .sidebar { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; padding: 10px 14px; gap: 12px; }
  .brand-sub, .side-card, .side-foot, .menu-text small { display: none; }
  .brand-title { font-size: 13px; }
  .menu { flex-direction: row; margin-left: auto; }
  .menu-item { height: 50px; }
  .menu-indicator { height: 50px; width: 0; }
  .main { padding: 22px 16px 60px; }
  .cols-2 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts { grid-template-columns: minmax(0, 1fr); }
  .charts .chart:first-child { grid-column: auto; }
  .page-head { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   TEMAS  ·  light | dark | light-cool | light-warm | dark-cool | dark-warm
   ===================================================================== */
[data-theme="dark-cool"] {
  --bg: #050D1A; --bg-2: #081428; --panel: rgba(12, 26, 46, .72);
  --acc1: #22D3EE; --acc2: #6366F1; --muted: #8AA3BD;
  --blob1: #0EA5E9; --blob2: #4F46E5; --blob3: #14B8A6;
  --sidebar-bg: linear-gradient(180deg, rgba(8,20,40,.92), rgba(5,13,26,.92));
  --drawer-bg: linear-gradient(180deg, #0B1A33, #071226);
  --drawer-head: linear-gradient(180deg, #0B1A33 75%, rgba(11,26,51,0));
  --modal-bg: linear-gradient(180deg, #0E2040, #081630);
  --toast-bg: rgba(10, 24, 44, .96); --h1-b: #BFE3F5;
}
[data-theme="dark-warm"] {
  --bg: #110B09; --bg-2: #1A110D; --panel: rgba(40, 26, 20, .7);
  --text: #FBEFE6; --muted: #B39A8A; --dim: #7D6658;
  --acc1: #FF5A36; --acc2: #FBBF24;
  --blob1: #EA580C; --blob2: #9F1239; --blob3: #CA8A04;
  --input-bg: rgba(20, 12, 8, .55); --input-bg-focus: rgba(20, 12, 8, .85);
  --sidebar-bg: linear-gradient(180deg, rgba(30,19,14,.94), rgba(18,11,8,.94));
  --drawer-bg: linear-gradient(180deg, #22160F, #160E0A);
  --drawer-head: linear-gradient(180deg, #22160F 75%, rgba(34,22,15,0));
  --modal-bg: linear-gradient(180deg, #2A1B13, #1A110C);
  --toast-bg: rgba(36, 23, 16, .96); --h1-b: #F5D7BF;
}
[data-theme^="light"] {
  --ink: 15, 23, 42;
  --bg: #F3F5FA; --bg-2: #FFFFFF;
  --text: #0F172A; --muted: #5B6478; --dim: #8A93A6;
  --border: rgba(15, 23, 42, .09); --border-2: rgba(15, 23, 42, .16);
  --panel: rgba(255, 255, 255, .84); --panel-2: rgba(15, 23, 42, .03);
  --input-bg: #FFFFFF; --input-bg-focus: #FFFFFF;
  --sidebar-bg: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,249,253,.94));
  --drawer-bg: #FFFFFF; --drawer-head: linear-gradient(180deg, #fff 75%, rgba(255,255,255,0));
  --modal-bg: #FFFFFF; --toast-bg: rgba(255, 255, 255, .97);
  --h1-a: #0F172A; --h1-b: #475569;
  --picker-filter: none; --blob-op: .55;
  --shadow: 0 18px 40px -24px rgba(15, 23, 42, .35);
}
[data-theme="light-cool"] { --bg: #EDF4FA; --acc1: #0284C7; --acc2: #6366F1; --blob1: #38BDF8; --blob2: #818CF8; --blob3: #2DD4BF; --h1-b: #1E40AF; }
[data-theme="light-warm"] { --bg: #FBF4EC; --text: #1C1410; --muted: #6B5A4E; --acc1: #EA580C; --acc2: #E11D2E; --blob1: #FB923C; --blob2: #F43F5E; --blob3: #FBBF24; --panel: rgba(255, 252, 248, .86); --h1-b: #9A3412; }

/* Ajustes de contraste en temas claros */
[data-theme^="light"] .card::before { display: none; }
[data-theme^="light"] .folio, [data-theme^="light"] .dr-folio { color: var(--acc1); }
[data-theme^="light"] .eyebrow { color: #C2410C; background: rgba(249,115,22,.1); }
[data-theme^="light"] .err, [data-theme^="light"] .date-od, [data-theme^="light"] .od-badge,
[data-theme^="light"] .tl-change .old, [data-theme^="light"] .miss-list .mi { color: #DC2626; }
[data-theme^="light"] .field.invalid label { color: #B91C1C; }
[data-theme^="light"] .prompt-pills > span { color: #0E7490; background: rgba(6,182,212,.08); }
[data-theme^="light"] .notice { color: #92400E; background: rgba(251,191,36,.14); }
[data-theme^="light"] .pill.open { color: #B45309; }
[data-theme^="light"] .pill.closed, [data-theme^="light"] .tl-change .new { color: #15803D; }
[data-theme^="light"] .pill.overdue { color: #DC2626; }
[data-theme^="light"] .pill.ev, [data-theme^="light"] .hbar .h-ic, [data-theme^="light"] .type-dot { color: color-mix(in srgb, var(--c) 72%, #000); }
[data-theme^="light"] .desc-box { color: var(--text); }
[data-theme^="light"] .modal, [data-theme^="light"] .drawer { box-shadow: 0 30px 70px -25px rgba(15,23,42,.4); }
[data-theme^="light"] .b1 { opacity: .22; } [data-theme^="light"] .b2 { opacity: .16; }

/* ---------- Selector de tema ---------- */
.theme-picker { position: relative; }
.theme-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); text-align: left;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.theme-btn:hover { border-color: var(--border-2); transform: translateY(-1px); }
.theme-btn .tb-txt { display: flex; flex-direction: column; line-height: 1.2; }
.theme-btn .tb-txt small { color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.theme-btn .tb-txt b { font-size: 13.5px; }
.theme-btn .chev { margin-left: auto; color: var(--muted); transition: transform .35s var(--ease); }
.theme-picker.open .theme-btn .chev { transform: rotate(180deg); }
.theme-picker.open .theme-btn { border-color: color-mix(in srgb, var(--acc1) 45%, transparent); }

.theme-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 35;
  background: var(--modal-bg); border: 1px solid var(--border-2); border-radius: 16px; padding: 6px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top center; pointer-events: none;
  transition: opacity .25s, transform .35s var(--ease);
}
.theme-picker.open .theme-pop { opacity: 1; transform: none; pointer-events: auto; }
.theme-pop .tp-title { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 8px 10px 6px; display: flex; align-items: center; gap: 6px; }
.theme-pop .tp-title .ic { width: 13px; height: 13px; }
.theme-opt {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text); text-align: left; transition: background .2s, transform .25s var(--ease);
}
.theme-picker.open .theme-opt { animation: optIn .4s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes optIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.theme-opt:hover, .theme-opt:focus-visible { background: rgba(var(--ink), .06); outline: none; transform: translateX(2px); }
.theme-opt.on { background: color-mix(in srgb, var(--acc1) 13%, transparent); }
.theme-opt .o-txt { display: flex; flex-direction: column; line-height: 1.25; }
.theme-opt .o-txt b { font-size: 13.5px; font-weight: 600; }
.theme-opt .o-txt small { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.theme-opt .o-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--acc1); transform: scale(0); transition: transform .35s var(--ease); }
.theme-opt .o-check .ic { width: 12px; height: 12px; }
.theme-opt.on .o-check { transform: scale(1); }

/* Muestra visual de cada tema */
.sw {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sw-bg) 0 52%, var(--sw-a1) 52%, var(--sw-a2) 100%);
  border: 1px solid rgba(var(--ink), .16); color: var(--sw-fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .35s var(--ease);
}
.sw > .ic { width: 16px; height: 16px; transform: translate(-5px, -5px); }
.sw .mod { position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--sw-mod); box-shadow: 0 0 0 2px var(--bg-2); }
.sw .mod .ic { width: 11px; height: 11px; }
.theme-opt:hover .sw, .theme-btn:hover .sw { transform: rotate(-8deg) scale(1.06); }

/* Transición circular entre temas (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (max-width: 860px) {
  .theme-btn { padding: 6px; width: auto; }
  .theme-btn .tb-txt, .theme-btn .chev { display: none; }
  .theme-pop { position: fixed; left: auto; right: 12px; top: 66px; width: 250px; }
}

/* =====================================================================
   PLATAFORMA DE PLANTA
   ===================================================================== */
:root { --m-body-a: #1B2A4A; --m-body-b: #0B1326; --m-stroke: #5B6E99; --run: #22D3EE; }
[data-theme^="light"] { --m-body-a: #FFFFFF; --m-body-b: #E3E9F4; --m-stroke: #8C9BB8; --run: #0891B2; }

/* ---- Menú compacto con grupos ---- */
.sidebar { overflow-y: auto; gap: 18px; scrollbar-width: thin; }
.menu { gap: 4px; }
.menu-item { height: 46px; padding: 0 10px; gap: 12px; border-radius: 13px; }
.menu-item .menu-icon { width: 32px; height: 32px; border-radius: 10px; }
.menu-item .menu-icon .ic { width: 17px; height: 17px; }
.menu-text b { font-size: 13.5px; font-weight: 600; }
.menu-item.sub { padding-left: 18px; }
.menu-item.sub .menu-icon { width: 28px; height: 28px; }
.menu-indicator { border-radius: 13px; }
.menu-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 800; padding: 12px 12px 4px; }

/* ---- Barra superior ---- */
.topbar {
  position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; margin: -14px 0 24px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--border); backdrop-filter: blur(18px); box-shadow: var(--shadow);
}
.tb-cell { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-right: 1px solid var(--border); min-height: 44px; }
.tb-cell:last-of-type { border-right: 0; }
.tb-cell > [data-icon] { color: var(--acc2); }
.tb-cell small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 800; }
.tb-cell b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.tb-cell b .tb-sub, .tb-sub { color: var(--muted); font-weight: 600; font-size: 11.5px; }
#clock { font-family: var(--mono); font-size: 13.5px; }
.tb-machine select { height: 30px; min-width: 150px; padding: 0 30px 0 10px; font-weight: 700; font-size: 13px; border-radius: 9px; }
.tb-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c, #8E99B8); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #8E99B8) 22%, transparent), 0 0 14px var(--c, #8E99B8); animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c, #8E99B8) 10%, transparent), 0 0 20px var(--c, #8E99B8); } }
.tb-user { margin-left: auto; border-right: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; color: #fff; background: var(--grad-brand); box-shadow: 0 6px 16px -6px var(--acc1); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 9px; margin-left: 4px; }
.icon-btn.sm:hover { transform: none; }
.tb-api { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); padding: 0 8px; }

/* ---- Login ---- */
.login { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; padding: 40px 6vw; }
.login-art h2 { font-size: 44px; margin: 10px 0; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(90deg, var(--h1-a), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-art p { color: var(--muted); font-size: 16px; max-width: 460px; }
.login-gears { width: min(380px, 70%); }
.login-gears .lg circle { fill: none; stroke: var(--acc1); stroke-width: 3; }
.login-gears .lg circle.teeth { stroke-width: 12; stroke-dasharray: 9 9; opacity: .55; }
.login-gears .g2 circle { stroke: var(--acc2); }
.login-gears .g3 circle { stroke: var(--cyan); }
.login-gears .lg { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
.login-gears .g2 { animation-direction: reverse; animation-duration: 9.6s; }
.login-gears .g3 { animation-duration: 6.4s; }
.login-card { padding: 30px; display: grid; gap: 16px; max-width: 440px; width: 100%; justify-self: center; animation: reveal .7s var(--ease) both; }
.login-card .brand { padding: 0; margin-bottom: 4px; }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(var(--ink), .05); }
.login-tabs button { height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; transition: all .3s var(--ease); }
.login-tabs button.on { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 20px -10px var(--acc1); }
.login-hint { margin: 0; text-align: center; color: var(--dim); font-size: 12px; }
.login-hint code { font-family: var(--mono); }

/* ---- Bloques comunes ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mt { margin-top: 16px; }
.pad { padding: 18px 20px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.card-title h3 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.card-title h3 .ic { width: 17px; height: 17px; color: var(--acc2); }
.pill.st { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.seg-mini { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(var(--ink), .05); }
.seg-mini button { border: 0; background: transparent; color: var(--muted); height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 700; font-size: 12.5px; transition: all .25s var(--ease); }
.seg-mini button.on { background: var(--grad-brand); color: #fff; }
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.mk { padding: 14px 16px; }
.mk small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.mk small .ic { width: 15px; height: 15px; color: var(--c, var(--acc2)); }
.mk b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.mk b small { display: inline; font-size: 13px; color: var(--muted); }
.mk .mk-sub { font-size: 11.5px; color: var(--dim); }
.gauge { position: relative; display: grid; place-items: center; }
.gauge svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.gauge .g-bg { fill: none; stroke: rgba(var(--ink), .08); stroke-width: 7; }
.gauge .g-fg { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); filter: drop-shadow(0 0 5px var(--c)); }
.gauge > div { text-align: center; line-height: 1.1; }
.gauge b { font-size: 18px; font-weight: 800; }
.gauge b small { font-size: 11px; color: var(--muted); }
.gauge span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.line-chart .ln { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: drawln 1.6s var(--ease) forwards; }
@keyframes drawln { to { stroke-dashoffset: 0; } }
.ooc { animation: pulseDot 1.4s infinite; }
@keyframes pulseDot { 50% { r: 7; opacity: .6; } }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--ink), .03); border: 1px solid var(--border); font-size: 13px; animation: reveal .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.list li .grow { flex: 1; min-width: 0; }
.list li .grow b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .li-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); flex: none; }
.list .li-ic .ic { width: 15px; height: 15px; }
.mono { font-family: var(--mono); }
.progress { height: 8px; border-radius: 8px; background: rgba(var(--ink), .07); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--grad-brand)); transition: width .8s var(--ease); position: relative; overflow: hidden; }
.progress i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: sheen 1.8s linear infinite; }
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- Inicio ---- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.mcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mcard { padding: 18px; cursor: pointer; transition: transform .35s var(--ease), border-color .35s; overflow: hidden; }
.mcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.mcard::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 16px var(--c); }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-top h3 { margin: 0; font-size: 17px; }
.mc-gear { width: 40px; height: 40px; color: var(--c); }
.mc-gear.spin .ic { animation: spin 2.4s linear infinite; }
.mc-gear .ic { width: 40px; height: 40px; }
.mc-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.mc-row b { color: var(--text); font-weight: 700; }
.mc-fault { margin-top: 10px; font-size: 12px; color: #FF8A95; display: flex; gap: 6px; align-items: center; }
[data-theme^="light"] .mc-fault { color: #DC2626; }
.mc-fault .ic { width: 14px; height: 14px; }

/* ---- Panel principal ---- */
.panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.order-strip { display: grid; grid-template-columns: repeat(5, auto) 1fr; gap: 0; margin-bottom: 16px; padding: 0; overflow: hidden; }
.order-strip > div { padding: 12px 18px; border-right: 1px solid var(--border); }
.order-strip small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 800; }
.order-strip b { font-size: 14px; font-family: var(--mono); }
.order-strip .os-prog { border-right: 0; display: grid; gap: 6px; align-content: center; }
.mtabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mtab { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--border-2); background: rgba(var(--ink), .03); color: var(--text); font-weight: 700; font-size: 13px; transition: all .3s var(--ease); }
.mtab i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.mtab.on { border-color: var(--acc1); background: color-mix(in srgb, var(--acc1) 12%, transparent); }
.schematic-card { padding: 10px; }
.sch-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; gap: 10px; flex-wrap: wrap; }
.sch-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.sch-legend span { display: inline-flex; gap: 6px; align-items: center; }
.sch-legend i { width: 10px; height: 10px; border-radius: 50%; }
.scada { display: grid; gap: 16px; }
.scada .card { padding: 16px 18px; }
.scada h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.scada h4 .ic { width: 15px; height: 15px; color: var(--acc2); }
.speed-row { display: flex; align-items: center; gap: 16px; }
.speed-big { font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-family: var(--mono); }
.speed-big small { font-size: 12px; color: var(--muted); font-family: var(--font); }
.kv-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; font-size: 12.5px; }
.kv-mini small { display: block; color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.kv-mini b { font-family: var(--mono); font-size: 13.5px; }
.fault-box { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255,59,78,.1); border: 1px solid rgba(255,59,78,.35); }
@keyframes faultPulse { 50% { box-shadow: 0 0 0 4px rgba(255,59,78,.12); } }
.fault-box .ic { color: #FF5A6B; width: 22px; height: 22px; flex: none; }
.ok-box { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); font-size: 13px; }
.ok-box .ic { color: var(--green); }
.fifo li .pos { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 12px; font-family: var(--mono); background: rgba(var(--ink), .07); flex: none; }
.fifo li.head .pos { background: var(--grad-brand); color: #fff; }
.comp-pop { position: absolute; z-index: 5; width: 270px; padding: 14px; border-radius: 14px; background: var(--modal-bg); border: 1px solid var(--border-2); box-shadow: 0 20px 40px -14px rgba(0,0,0,.55); animation: reveal .3s var(--ease); }
.comp-pop h5 { margin: 0 0 6px; font-size: 14px; }

/* ---- Esquema SVG de la máquina ---- */
.machine-svg { width: 100%; height: auto; display: block; }
.machine-svg .m-frame { fill: rgba(var(--ink), .02); stroke: var(--border-2); stroke-dasharray: 2 6; }
.machine-svg .m-zone { fill: var(--dim); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.machine-svg .m-split { stroke: var(--border-2); stroke-dasharray: 4 6; }
.machine-svg .c-label { fill: var(--muted); font-size: 10.5px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.machine-svg .comp { cursor: pointer; }
.machine-svg .c-body { fill: url(#gBody); stroke: var(--m-stroke); stroke-width: 2; transition: stroke .4s, fill .4s; }
.machine-svg .c-glow { fill: var(--run); opacity: 0; filter: url(#gGlow); transition: opacity .4s; }
.machine-svg .c-teeth { fill: none; stroke: var(--m-stroke); stroke-width: 5; transition: stroke .4s; }
.machine-svg .c-spoke, .machine-svg .c-blade { stroke: var(--m-stroke); stroke-width: 3; stroke-linecap: round; fill: none; }
.machine-svg .c-blade { fill: rgba(var(--ink), .25); stroke-width: 1.5; }
.machine-svg .c-roll { fill: none; stroke: var(--m-stroke); stroke-width: 1.5; opacity: .7; }
.machine-svg .c-hole { fill: none; stroke: rgba(var(--ink), .12); stroke-width: 1; }
.machine-svg .c-hub { fill: var(--m-stroke); }
.machine-svg { --gear-t: 6s; }
.machine-svg .rot { transform-origin: 0 0; animation: spin var(--gear-t) linear infinite; animation-play-state: paused; }
.machine-svg .rot.ccw { animation-direction: reverse; }
.machine-svg .c-move { stroke: var(--m-stroke); stroke-width: 4; stroke-dasharray: 10 8; stroke-linecap: round; animation: dash 0.8s linear infinite; animation-play-state: paused; }
.machine-svg .c-move.rodline { stroke: var(--blend, #C8873A); stroke-width: 8; stroke-dasharray: 26 6; }
@keyframes dash { to { stroke-dashoffset: -36; } }
.machine-svg .flow { fill: none; stroke: var(--m-stroke); stroke-width: 3; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .55; animation: dash 1s linear infinite; animation-play-state: paused; }
.machine-svg .flow.tob { stroke: var(--blend, #C8873A); opacity: .9; stroke-width: 4; }
.machine-svg .flow.paper { stroke: #E5E7EB; }
[data-theme^="light"] .machine-svg .flow.paper { stroke: #94A3B8; }
.machine-svg .flow.filt { stroke: #F59E0B; }
.machine-svg .flow.rej { stroke: #FF3B4E; opacity: .35; }
.machine-svg .particle { fill: var(--blend, #C8873A); opacity: 0; animation: fallp 1.6s linear infinite; animation-play-state: paused; }
.machine-svg .particle.filt { fill: #F5D9A8; stroke: #F59E0B; stroke-width: 1; }
@keyframes fallp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }
.machine-svg .tray-box { fill: rgba(var(--ink), .05); stroke: var(--m-stroke); }
.machine-svg .cig { opacity: 0; animation: cigMove 1.8s linear infinite; animation-play-state: paused; }
.machine-svg .cig-paper { fill: #F8FAFC; stroke: #CBD5E1; stroke-width: .6; }
.machine-svg .cig-filter { fill: #F59E0B; }
@keyframes cigMove { 0% { transform: translate(-6px, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(60px, 0); opacity: 0; } }
.machine-svg .c-badge, .machine-svg .c-heat-num { opacity: 0; transition: opacity .3s; pointer-events: none; }
.machine-svg .c-badge circle { fill: #FF3B4E; }
.machine-svg .c-badge text, .machine-svg .c-heat-num text { fill: #fff; font-size: 12px; font-weight: 800; text-anchor: middle; }
/* en marcha */
.machine-svg.st-running .rot, .machine-svg.st-running .c-move, .machine-svg.st-running .flow,
.machine-svg.st-running .particle, .machine-svg.st-running .cig { animation-play-state: running; }
.machine-svg.st-running .comp.run .c-body, .machine-svg.st-running .comp.run .c-teeth { stroke: var(--run); }
.machine-svg.st-running .comp.run .c-glow { opacity: .18; }
.machine-svg.st-running .comp.run .c-hub { fill: var(--run); }
/* falla */
.machine-svg .comp.fault .c-body, .machine-svg .comp.fault .c-teeth, .machine-svg .comp.fault .c-spoke { stroke: #FF3B4E; }
.machine-svg .comp.fault .c-glow { fill: #FF3B4E; animation: glowP 1s ease-in-out infinite; }
.machine-svg .comp.fault .c-badge { opacity: 1; }
.machine-svg .comp.fault .c-badge circle { animation: badgeP 1s ease-in-out infinite; }
@keyframes glowP { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }
@keyframes badgeP { 50% { r: 13; } }
.machine-svg.st-changeover .comp .c-body { stroke: #FBBF24; }
.machine-svg .comp:hover .c-body { stroke-width: 3.5; }
/* modo heatmap */
.machine-svg.heat-mode .c-body { fill: var(--heat); fill-opacity: var(--heat-a); stroke: var(--heat); }
.machine-svg.heat-mode .c-glow { fill: var(--heat); opacity: calc(var(--heat-a) * .5); }
.machine-svg.heat-mode .c-heat-num { opacity: 1; }
.machine-svg.heat-mode .c-heat-num circle { fill: var(--heat); stroke: rgba(0,0,0,.25); }
.machine-svg.heat-mode .c-teeth, .machine-svg.heat-mode .c-spoke { stroke: rgba(var(--ink), .35); }

/* ---- Tablas genéricas ---- */
.tbl.compact td { padding: 10px 14px; }
.tbl.compact { min-width: 900px; }

/* ---- Heatmap ---- */
.hm-wrap { overflow-x: auto; }
.hm { border-collapse: separate; border-spacing: 3px; font-size: 11.5px; }
.hm th { color: var(--dim); font-weight: 700; padding: 2px 4px; white-space: nowrap; }
.hm th.rowh { text-align: right; color: var(--muted); padding-right: 8px; }
.hm td { width: 30px; height: 26px; border-radius: 6px; text-align: center; font-weight: 700; font-family: var(--mono); color: rgba(0,0,0,.65); animation: cellIn .5s var(--ease) both; }
.hm td.z { background: rgba(var(--ink), .04); color: transparent; }
@keyframes cellIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.hm-legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.hm-legend i { width: 160px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgb(34,211,238), rgb(251,191,36), rgb(249,115,22), rgb(239,68,68)); }

/* ---- SPC ---- */
.spc-tiles { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; margin-bottom: 16px; }
.spc-tiles .mk b { font-size: 22px; }
.sig-bar { display: flex; gap: 3px; margin-top: 8px; }
.sig-bar i { flex: 1; height: 6px; border-radius: 3px; background: rgba(var(--ink), .1); }
.sig-bar i.on { background: var(--c); box-shadow: 0 0 8px var(--c); }

/* ---- Bitácora ---- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { text-align: center; font-size: 11px; color: var(--dim); font-weight: 800; text-transform: uppercase; }
.cal button { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink), .02); color: var(--text); font-weight: 700; position: relative; transition: all .25s var(--ease); display: grid; place-items: center; }
.cal button:hover { transform: translateY(-2px); border-color: var(--border-2); }
.cal button.other { opacity: .3; }
.cal button.today { border-color: var(--acc2); }
.cal button.sel { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 10px 20px -10px var(--acc1); }
.cal button .cnt { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-family: var(--mono); padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--acc2) 22%, transparent); color: var(--text); }
.cal button.sel .cnt { background: rgba(255,255,255,.25); color: #fff; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-head b { font-size: 16px; text-transform: capitalize; }
.shift-block { margin-top: 14px; }
.shift-block h5 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.entry { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink), .025); margin-bottom: 8px; animation: reveal .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.entry-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.entry p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* ---- Responsive ---- */
@media (max-width: 1350px) {
  .mcards { grid-template-columns: 1fr 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
  .spc-tiles { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .topbar { top: 70px; }
  .tb-cell { border-right: 0; padding: 4px 8px; }
  .grid-2, .grid-3, .mcards { grid-template-columns: 1fr; }
  .spc-tiles { grid-template-columns: repeat(2, 1fr); }
  .order-strip { grid-template-columns: 1fr 1fr; }
  .menu-group { display: none; }
}

/* ---- VSM ---- */
.vsm-svg { width: 100%; height: auto; display: block; color: var(--m-stroke); }
.vsm-svg .v-zone { fill: var(--dim); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.vsm-svg .v-box { fill: var(--panel-solid); stroke: var(--c, var(--m-stroke)); stroke-width: 1.6; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
[data-theme^="light"] .vsm-svg .v-box { fill: #fff; filter: drop-shadow(0 8px 14px rgba(15,23,42,.08)); }
.vsm-svg .v-box.proc { stroke: var(--border-2); }
.vsm-svg .v-t { fill: #fff; font-weight: 800; font-size: 14px; }
.vsm-svg .v-t.dark { fill: var(--text); }
.vsm-svg .v-s { fill: var(--muted); font-size: 11.5px; }
.vsm-svg .v-s.strong { fill: var(--text); font-weight: 700; }
.vsm-svg .v-n { fill: var(--text); font-weight: 800; font-size: 13px; font-family: var(--mono); }
.vsm-svg .v-lbl { fill: var(--muted); font-size: 11px; font-weight: 600; }
.vsm-svg .v-info { fill: none; stroke: var(--m-stroke); stroke-width: 2.2; stroke-dasharray: 6 5; animation: dash 1.2s linear infinite; }
.vsm-svg .v-info.thin { stroke-width: 1.6; }
.vsm-svg .v-ship { fill: none; stroke: #3B82F6; stroke-width: 1.6; stroke-dasharray: 2 6; opacity: .6; }
.vsm-svg .v-dot { fill: var(--acc2); filter: drop-shadow(0 0 4px var(--acc2)); }
.vsm-svg .v-pulse { opacity: .25; transform-box: fill-box; transform-origin: center; }
.vsm-svg .v-pulse.on { opacity: 1; animation: vpulse 1.2s ease-in-out infinite; }
@keyframes vpulse { 50% { transform: scale(1.6); opacity: .4; } }
.vsm-svg .v-sys.busy .v-box { stroke-width: 3; }
.vsm-svg .v-mat { fill: color-mix(in srgb, var(--c) 14%, transparent); stroke: color-mix(in srgb, var(--c) 55%, transparent); }
.vsm-svg .v-mat-flow { fill: none; stroke: var(--m-stroke); stroke-width: 7; stroke-dasharray: 14 8; opacity: .55; animation: dash 1s linear infinite; }
.vsm-svg .v-tri { fill: #FBBF24; stroke: #B45309; stroke-width: 1.5; }
.vsm-svg .v-tri-i { fill: #111; font-weight: 900; font-size: 14px; }
.vsm-svg .v-data { fill: rgba(var(--ink), .04); stroke: var(--border-2); }
.vsm-svg .v-d { fill: var(--text); font-size: 11.5px; font-family: var(--mono); }
.vsm-svg .v-d.dim { fill: var(--muted); font-size: 10.5px; }
.vsm-svg .v-proc { cursor: pointer; }
.vsm-svg .v-proc:hover .v-box { stroke: var(--acc1); }
.vsm-svg .v-gear-rot { transform-origin: 0 0; }
.vsm-svg .v-gear-rot.on { animation: spin 2.6s linear infinite; }
.vsm-svg .v-truck { animation: truck 2.4s ease-in-out infinite; }
@keyframes truck { 50% { transform: translate(36px, 42px); } }
.vsm-svg .v-ladder { fill: none; stroke-width: 4; stroke: #FBBF24; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawln 1.2s var(--ease) forwards; }
.vsm-svg .v-ladder.va { stroke: #22C55E; }
.vsm-svg .v-ladder-v { stroke: var(--m-stroke); stroke-width: 2; }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tiles-3 .tile { min-height: 92px; }
.cig-wrap { margin: -4px 0 12px; padding: 6px 10px; border-radius: 14px; background: rgba(var(--ink), .03); border: 1px dashed var(--border-2); }
.cig-svg { width: 100%; height: auto; display: block; }
.cig-svg .cg-paper rect { fill: #F8FAFC; stroke: #CBD5E1; animation: wrap .9s var(--ease) both; transform-origin: 40px 60px; }
.cig-svg .cg-tob circle { fill: var(--blend); animation: fillIn .5s var(--ease) both; }
.cig-svg .cg-filter rect { fill: #F59E0B; animation: slideIn .7s var(--ease) both; }
.cig-svg .cg-filter circle { fill: #B45309; opacity: .5; }
.cig-svg .cg-l { fill: var(--muted); font-size: 13px; font-weight: 700; }
.cig-svg .cg-tick { stroke: var(--m-stroke); }
@keyframes wrap { from { transform: scaleX(0); } to { transform: none; } }
@keyframes fillIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.track { display: grid; gap: 10px; }
.trk { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(var(--ink), .025); animation: reveal .45s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.trk-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.trk-h .li-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.trk-h .li-ic .ic { width: 15px; height: 15px; }
.trk-h .grow { flex: 1; min-width: 200px; font-size: 13px; }
.stepper { display: flex; align-items: center; margin-top: 10px; }
.stepper .bar { flex: 1; height: 2px; background: rgba(var(--ink), .1); margin: 0 4px 16px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.step i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(var(--ink), .2); color: #fff; }
.step i .ic { width: 11px; height: 11px; }
.step span { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.step.done i { background: #22C55E; border-color: #22C55E; }
.step.done span { color: var(--muted); }
.step.cur i { border-color: var(--acc2); background: color-mix(in srgb, var(--acc2) 25%, transparent); animation: stepP 1.2s ease-in-out infinite; }
.step.cur span { color: var(--text); font-weight: 700; }
@keyframes stepP { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc2) 20%, transparent); } }
@media (max-width: 860px) {
  .sidebar .menu { overflow-x: auto; flex-wrap: nowrap; }
  .step { min-width: 44px; } .step span { display: none; }
}
.head-actions select { width: auto; min-width: 170px; height: 40px; }
input[type=password], input[type=number] { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--border-2); outline: none; transition: border-color .25s, box-shadow .25s; }
.input-wrap input[type=password] { padding-left: 42px; }
.machine-svg .c-label, .vsm-svg .v-lbl, .vsm-svg .v-s { paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; stroke-linejoin: round; }
.cal button { display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; }
.cal button .cnt { position: static; transform: none; }
.tb-api #apiStatus { display: none; }
.tb-api { padding: 0 4px; }
/* Contenido en vivo: sin repetir animaciones de entrada al actualizar */
.static .reveal, .static.reveal, .static li, .static tr, .static td, .static .trk, .static .entry, .static .ln, .static .bar, .static .v-ladder, .static .mk, .static .tw-c:not(.next) { animation: none !important; }
.static .v-ladder { stroke-dashoffset: 0; }

/* =====================================================================
   AGV · ALMACÉN
   ===================================================================== */
.agv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.agv-map { width: 100%; height: auto; display: block; }
.agv-map .floor { fill: rgba(var(--ink), .02); stroke: var(--border-2); stroke-dasharray: 2 6; }
.agv-map .aisle { stroke: rgba(var(--ink), .05); stroke-width: 26; stroke-linecap: round; }
.agv-map .aisle-c { stroke: rgba(var(--ink), .22); stroke-width: 1.5; stroke-dasharray: 8 8; }
.agv-map .zone { fill: var(--dim); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; }
.agv-map .mb-body { fill: var(--panel-solid); stroke: var(--c, var(--m-stroke)); stroke-width: 2; }
[data-theme^="light"] .agv-map .mb-body, [data-theme^="light"] .agv-map .tower { fill: #fff; }
.agv-map .mb-head { fill: var(--c, #8E99B8); }
.agv-map .mb-t { fill: #fff; font-weight: 800; font-size: 13px; text-anchor: middle; }
.agv-map .mb-s { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.agv-map .mb-gear { color: var(--c, #8E99B8); }
.agv-map .gear-rot { transform-origin: 16px 16px; }
.agv-map .mblock.run .gear-rot { animation: spin 3s linear infinite; }
.agv-map .term rect { fill: #FBBF24; stroke: #B45309; }
.agv-map .term > text { fill: #111; font-weight: 800; font-size: 11px; text-anchor: middle; }
.agv-map .term-badge { opacity: 0; transition: opacity .3s; }
.agv-map .term-badge.on { opacity: 1; }
.agv-map .term-badge circle { fill: #FF3B4E; }
.agv-map .term-badge text { fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle; }
.agv-map .tower { fill: var(--panel-solid); stroke: var(--border-2); stroke-width: 1.5; }
.agv-map .lvl { fill: var(--muted); font-size: 11px; font-weight: 800; text-anchor: end; }
.agv-map .cell { fill: rgba(var(--ink), .07); transition: fill .6s; }
.agv-map .cell-band, .agv-map .cell-tape { opacity: 0; transition: opacity .4s; }
.agv-map .cellg.used .cell { fill: #B98A55; stroke: rgba(0,0,0,.35); stroke-width: .8; }
.agv-map .cellg.used .cell-band { opacity: 1; fill: var(--blend); }
.agv-map .cellg.used .cell-tape { opacity: .8; stroke: #7A5530; stroke-width: 1.2; }
.agv-map .cell-pallet { fill: #6B4F33; opacity: 0; transition: opacity .4s; }
.agv-map .cellg.used .cell-pallet { opacity: 1; }
.agv-map .cellg.reserved { animation: blinkc 1s ease-in-out infinite; }
@keyframes blinkc { 50% { opacity: .15; } }
.agv-map .dock rect { fill: rgba(var(--ink), .04); stroke: var(--border-2); stroke-dasharray: 3 3; }
.agv-map .dock.charge { color: #A855F7; }
.agv-map .dock.park text { fill: var(--dim); font-size: 11px; font-weight: 800; text-anchor: middle; }
.agv-map .dock.bay rect { stroke: #64748B; }
.agv-map .agv { transition: transform 1s linear; }
.agv-map .agv-body { fill: var(--c, #22C55E); stroke: rgba(0,0,0,.35); stroke-width: 1.2; filter: drop-shadow(0 0 6px var(--c, #22C55E)); }
.agv-map .agv-load { fill: var(--load, transparent); opacity: 0; transition: opacity .3s; stroke: rgba(0,0,0,.3); }
.agv-map .agv.loaded .agv-load { opacity: 1; }
.agv-map .agv-t { fill: #fff; font-size: 10.5px; font-weight: 900; text-anchor: middle; font-family: var(--mono); }
.agv-map .agv.moving .agv-body { animation: agvPulse 1s ease-in-out infinite; }
@keyframes agvPulse { 50% { filter: drop-shadow(0 0 12px var(--c, #22C55E)); } }
.msgs { max-height: 520px; overflow-y: auto; padding-right: 4px; }
.msgs li { padding: 8px 10px; }
.msgs .sub { display: block; }
.agv-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.agv-card { position: relative; padding: 12px 14px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); overflow: hidden; }
.agv-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ac-mbar { height: 8px; border-radius: 6px; background: rgba(var(--ink), .08); overflow: hidden; margin-bottom: 10px; }
.ac-mbar i { display: block; height: 100%; border-radius: inherit; transition: width .8s var(--ease); }
.ac-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ac-top b { font-family: var(--mono); font-size: 15px; }
.ac-st { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--c); }
.ac-st .ic { width: 13px; height: 13px; }
.ac-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; gap: 6px; }
.ac-row > span:first-child { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); }
.ac-row .ic { width: 13px; height: 13px; }
.ac-row b { color: var(--text); font-family: var(--mono); }
.ac-bat { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; }
.bat { position: relative; width: 38px; height: 16px; border: 2px solid var(--b); border-radius: 4px; padding: 1px; }
.bat::after { content: ""; position: absolute; right: -5px; top: 4px; width: 3px; height: 5px; border-radius: 0 2px 2px 0; background: var(--b); }
.bat i { display: block; height: 100%; background: var(--b); border-radius: 2px; transition: width .8s var(--ease); }
.ac-bat b { font-family: var(--mono); }
/* time series */
.ts-grid { display: grid; gap: 6px; }
.ts-axis, .ts-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 150px; gap: 12px; align-items: center; }
.ts-ticks { position: relative; height: 18px; font-size: 10.5px; color: var(--dim); font-family: var(--mono); }
.ts-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ts-ticks span:first-child { transform: none; } .ts-ticks span:last-child { transform: translateX(-100%); }
.ts-uh { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.ts-row b { font-family: var(--mono); font-size: 13px; }
.ts-track { position: relative; height: 24px; border-radius: 7px; background: rgba(var(--ink), .05); overflow: hidden; }
.ts-track i { position: absolute; top: 0; bottom: 0; border-right: 1px solid rgba(0,0,0,.25); }
.ts-u { display: grid; grid-template-columns: 1fr 48px; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; }
/* procedimiento */
.pm-days { display: flex; gap: 6px; }
.pm-days span { flex: 1; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: rgba(var(--ink), .06); color: var(--dim); }
.pm-days span.done { background: #22C55E; color: #fff; }
.pm-days span.cur { background: #FBBF24; color: #111; box-shadow: 0 0 0 3px rgba(251,191,36,.25); }
.proc { display: grid; gap: 12px; }
.proc-day { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink), .025); }
.pd-n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-brand); }
.proc-day ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.proc-day li { display: flex; gap: 6px; align-items: center; }
.proc-day li .ic { width: 13px; height: 13px; color: #22C55E; }
.hbar .btn.sm { height: 30px; padding: 0 8px; }
.hbar:has(.btn) { grid-template-columns: 28px 1fr auto; }
/* torre */
.tower-big { display: grid; gap: 10px; }
.tw-row { display: grid; grid-template-columns: 28px 1fr 44px 70px; gap: 10px; align-items: center; }
.tw-row > b { font-family: var(--mono); color: var(--muted); }
.tw-cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.tw-c { aspect-ratio: 1 / 1.25; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-family: var(--mono); color: var(--dim); background: rgba(var(--ink), .06); border: 1px dashed rgba(var(--ink), .15); }
.tw-c.used { background: linear-gradient(180deg, var(--blend) 0 16%, transparent 16%), repeating-linear-gradient(180deg, #B98A55 0 calc(16.8% - 1px), #7A5530 calc(16.8% - 1px) 16.8%); color: rgba(40,25,10,.8); border: 1px solid rgba(0,0,0,.25); border-bottom: 4px solid #6B4F33; font-weight: 800; }
.tw-c.res { opacity: .5; }
.tw-c.next { outline: 3px solid #FBBF24; outline-offset: 1px; animation: nextP 1.4s ease-in-out infinite; }
@keyframes nextP { 50% { outline-color: rgba(251,191,36,.3); } }
.tw-pct { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
.pos-n { width: 24px; height: 24px; border-radius: 7px; display: inline-grid; place-items: center; font-family: var(--mono); font-size: 11.5px; font-weight: 800; background: rgba(var(--ink), .07); }
.pos-n.head { background: #FBBF24; color: #111; }
.pos-n .ic { width: 12px; height: 12px; }
@media (max-width: 1350px) { .agv-grid { grid-template-columns: 1fr; } .agv-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .agv-cards { grid-template-columns: 1fr 1fr; } .ts-axis, .ts-row { grid-template-columns: 54px 1fr 70px; } }

/* Aprobación de liberación anticipada (mantenimiento AGV) */
.pm-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 12px; }
.pm-actions .btn { justify-content: center; white-space: nowrap; gap: 6px; padding-left: 10px; padding-right: 10px; }
.appr { display: inline-flex; align-items: center; gap: 4px; color: #22C55E; font-weight: 700; }
.m-ic.ok { background: linear-gradient(135deg, #22C55E, #10B981); box-shadow: 0 14px 30px -10px rgba(34,197,94,.8); }
.m-actions .btn { gap: 6px; }
#apAll:disabled { opacity: .45; pointer-events: none; }

/* =====================================================================
   Menú lateral ocultable
   ===================================================================== */
.brand { position: relative; }
.nav-toggle, .nav-open {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border-2); background: rgba(var(--ink), .04); color: var(--muted); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.nav-toggle { margin-left: auto; }
.nav-toggle:hover, .nav-open:hover { color: var(--text); background: rgba(var(--ink), .09); border-color: rgba(var(--ink), .25); }
.nav-toggle .ic, .nav-open .ic { width: 18px; height: 18px; }
.nav-open { width: 0; margin: 0; padding: 0; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
body.nav-ready .app { transition: grid-template-columns .36s var(--ease), padding-right .36s var(--ease); }
body.nav-ready .sidebar { transition: transform .36s var(--ease), opacity .3s, visibility .36s; }
body.nav-ready .nav-open { transition: width .3s var(--ease), opacity .3s, margin .3s; }
body.nav-collapsed .app { grid-template-columns: 0 minmax(0, 1fr); }
body.nav-collapsed .sidebar { transform: translateX(-100%); opacity: 0; visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
body.nav-collapsed .nav-open { width: 38px; height: 38px; margin: 0 6px 0 2px; border-width: 1px; opacity: 1; pointer-events: auto; color: var(--text); }

/* =====================================================================
   Protos AI · panel del agente
   ===================================================================== */
:root { --ai-w: 440px; --ai-g1: #8B5CF6; --ai-g2: #22D3EE; --ai-grad: linear-gradient(135deg, #8B5CF6 0%, #6366F1 45%, #22D3EE 100%); }
body.ai-wide { --ai-w: 680px; }
@media (min-width: 1200px) { body.ai-open .app { padding-right: var(--ai-w); } }

.tb-ai {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; margin: 0 4px 0 6px;
  border-radius: 12px; border: 0; cursor: pointer; color: #fff; font-weight: 700; font-size: 13px; position: relative; overflow: hidden;
  background: var(--ai-grad); box-shadow: 0 10px 24px -10px var(--ai-g1);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.tb-ai::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: ai-shine 4.5s ease-in-out infinite; }
.tb-ai:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px var(--ai-g1); }
.tb-ai .ic { width: 17px; height: 17px; }
body.ai-open .tb-ai { box-shadow: 0 0 0 2px rgba(var(--ink), .2), 0 10px 24px -10px var(--ai-g1); }
@keyframes ai-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.ai-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 60; height: 58px; min-width: 58px; padding: 0 17px; border-radius: 29px;
  display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; color: #fff; background: var(--ai-grad);
  box-shadow: 0 18px 40px -12px var(--ai-g1), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .35s var(--ease), opacity .3s, box-shadow .3s;
}
.ai-fab .ic { width: 24px; height: 24px; animation: ai-twinkle 3.2s ease-in-out infinite; }
.ai-fab-lbl { font-weight: 800; font-size: 14px; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease); }
.ai-fab:hover .ai-fab-lbl { max-width: 80px; }
.ai-fab:hover { transform: translateY(-3px); }
.ai-fab-ring { position: absolute; inset: -5px; border-radius: inherit; border: 2px solid var(--ai-g1); opacity: 0; animation: ai-ring 2.8s ease-out infinite; pointer-events: none; }
body.ai-open .ai-fab { transform: scale(.4); opacity: 0; pointer-events: none; }
@keyframes ai-ring { 0% { opacity: .7; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes ai-twinkle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.12); } }

.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(var(--ai-w), 100vw);
  display: flex; flex-direction: column; background: var(--sidebar-bg); backdrop-filter: blur(22px);
  border-left: 1px solid var(--border-2); box-shadow: -30px 0 60px -30px rgba(0,0,0,.55);
  transform: translateX(105%); visibility: hidden; transition: transform .38s var(--ease), visibility .38s, width .36s var(--ease);
}
body.ai-open .ai-panel { transform: none; visibility: visible; }
.ai-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ai-grad); }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--border); }
.ai-avatar { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--ai-grad); box-shadow: 0 10px 22px -10px var(--ai-g1); flex: none; }
.ai-title { flex: 1; min-width: 0; }
.ai-title b { display: block; font-size: 15px; }
.ai-title small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: #8E99B8; flex: none; }
#aiStatus.on .ai-dot { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
#aiStatus.warn .ai-dot { background: #FBBF24; }
#aiStatus.off .ai-dot { background: #FF3B4E; }
.ai-hbtn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: all .2s; flex: none; }
.ai-hbtn:hover { color: var(--text); background: rgba(var(--ink), .07); border-color: var(--border-2); }

.ai-body { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; }
.ai-welcome { margin: auto 0; text-align: center; padding: 10px 6px 20px; animation: reveal .6s var(--ease) both; }
.ai-orb { width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: var(--ai-grad);
  box-shadow: 0 20px 44px -16px var(--ai-g1); animation: ai-float 4s ease-in-out infinite; }
@keyframes ai-float { 50% { transform: translateY(-6px) rotate(3deg); } }
.ai-welcome h3 { margin: 0 0 6px; font-size: 19px; }
.ai-welcome p { margin: 0 auto 12px; color: var(--muted); font-size: 13px; max-width: 330px; line-height: 1.5; }
.ai-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); padding: 5px 10px; border-radius: 99px; background: rgba(var(--ink), .05); margin-bottom: 16px; }
.ai-chips { display: grid; gap: 8px; text-align: left; }
.ai-chip { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 13px; border: 1px solid var(--border-2); background: rgba(var(--ink), .03);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: all .22s var(--ease); }
.ai-chip .ic { color: var(--ai-g1); flex: none; }
.ai-chip:hover { border-color: color-mix(in srgb, var(--ai-g1) 60%, transparent); background: color-mix(in srgb, var(--ai-g1) 10%, transparent); transform: translateX(3px); }

.ai-msg { display: flex; gap: 10px; }
.ai-msg.user { justify-content: flex-end; }
.ai-bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--grad-brand); color: #fff; font-size: 13.5px; line-height: 1.5; word-wrap: break-word; box-shadow: 0 10px 22px -14px var(--acc1); }
.ai-mini { width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; background: var(--ai-grad); margin-top: 2px; }
.ai-content { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.6; }
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0 0 10px; }
.ai-md h3, .ai-md h4, .ai-md h5, .ai-md h6 { margin: 14px 0 6px; font-size: 14px; }
.ai-md h3 { font-size: 15px; }
.ai-md ul, .ai-md ol { margin: 0 0 10px; padding-left: 20px; }
.ai-md li { margin: 3px 0; }
.ai-md li.sub { margin-left: 16px; }
.ai-md b { color: var(--text); font-weight: 750; }
.ai-md code { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 6px; background: rgba(var(--ink), .08); }
.ai-md a { color: var(--acc2); }
.ai-md hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.ai-md blockquote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--ai-g1); background: rgba(var(--ink), .04); border-radius: 0 10px 10px 0; color: var(--muted); }
.ai-code { margin: 0 0 10px; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.35); overflow-x: auto; font-size: 12px; }
.ai-code code { background: none; padding: 0; }
.ai-tbl { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 12px; }
.ai-tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ai-tbl th { background: rgba(var(--ink), .06); font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ai-tbl th, .ai-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ai-tbl tr:last-child td { border-bottom: 0; }
.ai-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--ai-g2); animation: ai-blink 1s steps(2) infinite; }
@keyframes ai-blink { 50% { opacity: 0; } }
.ai-typing { display: inline-flex; gap: 5px; padding: 10px 2px; }
.ai-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-g1); animation: ai-bounce 1.2s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; background: #6366F1; }
.ai-typing i:nth-child(3) { animation-delay: .3s; background: var(--ai-g2); }
@keyframes ai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-6px); opacity: 1; } }
.ai-tools { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(var(--ink), .03); font-size: 12px; }
.ai-tools summary { display: flex; align-items: center; gap: 7px; padding: 7px 11px; cursor: pointer; color: var(--muted); font-weight: 600; list-style: none; }
.ai-tools summary::-webkit-details-marker { display: none; }
.ai-tools summary .ic { color: var(--ai-g2); }
.ai-tools ul { list-style: none; margin: 0; padding: 0 11px 9px; display: grid; gap: 5px; }
.ai-tools li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ai-tools li.ok .ic { color: #22C55E; }
.ai-tools li.err .ic { color: #FF3B4E; }
.ai-tools li.run { color: var(--text); }
.ai-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(var(--ink), .2); border-top-color: var(--ai-g2); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-err { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,59,78,.1); border: 1px solid rgba(255,59,78,.35); color: var(--text); font-size: 13px; }
.ai-err .ic { color: #FF3B4E; flex: none; margin-top: 2px; }
.ai-actions { display: flex; gap: 6px; margin-top: 6px; }
.ai-actions button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 7px; cursor: pointer; }
.ai-actions button:hover { color: var(--text); background: rgba(var(--ink), .06); }

.ai-input { margin: 8px 14px 6px; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 16px; border: 1px solid var(--border-2); background: rgba(var(--ink), .05); transition: border-color .2s, box-shadow .2s; }
.ai-input:focus-within { border-color: color-mix(in srgb, var(--ai-g1) 65%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai-g1) 15%, transparent); }
.ai-input textarea { flex: 1; resize: none; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.45; padding: 7px 0 !important; min-height: 22px; max-height: 160px; }
.ai-send { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 0; cursor: pointer; color: #fff; background: var(--ai-grad); flex: none; transition: transform .2s; }
.ai-send:hover { transform: scale(1.06); }
.ai-send.stop { background: #FF3B4E; }
.ai-foot { text-align: center; font-size: 10.5px; color: var(--dim); padding: 0 14px 12px; }
@media (max-width: 860px) { .ai-fab { right: 16px; bottom: 16px; } .tb-ai b { display: none; } }
.ai-fab[hidden] { display: none; }

/* Barra superior compacta cuando el contenido se angosta (menú visible + panel de IA abierto) */
.main { container-type: inline-size; container-name: main; }
@container main (max-width: 1240px) {
  .topbar { flex-wrap: nowrap; }
  .tb-cell { padding: 6px 10px; }
  .tb-ai { padding: 0 10px; } .tb-ai b { display: none; }
  #apiStatus { display: none; }
  .tb-machine select { min-width: 128px; }
}
@container main (max-width: 1060px) {
  .tb-cell:has(#tbDate) { display: none; }
  .tb-user small { display: none; }
}
@container main (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
}
/* los avisos no tapan el botón de IA */
body:has(#aiFab:not([hidden])):not(.ai-open) .toasts { bottom: 98px; }
.tb-cell small { white-space: nowrap; }
@container main (max-width: 1240px) { .tb-machine select { min-width: 140px; } }

/* =====================================================================
   Embarque · paletizado, montacargas y andenes
   ===================================================================== */
.ship-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.ship-svg text { font-family: inherit; }
.sh-ground { fill: rgba(var(--ink), .22); }
.sh-route { stroke: rgba(var(--ink), .25); stroke-width: 2; stroke-dasharray: 8 7; fill: none; }
.sh-route-arrow { stroke: rgba(var(--ink), .35); stroke-width: 2; fill: none; }
.sh-leg { fill: rgba(var(--ink), .18); }
.sh-belt { fill: #26324D; stroke: #5B6E99; stroke-width: 1.5; }
.sh-belt-dash { stroke: #7C8DB5; stroke-width: 2; stroke-dasharray: 12 12; fill: none; }
.sh-roller { fill: #1B2A4A; stroke: #8EA0C8; stroke-width: 1.5; }
.sh-roller-spoke { stroke: #8EA0C8; stroke-width: 1.6; fill: none; }
.sh-motor { fill: #334155; stroke: #64748B; }
g.run .sh-motor { stroke: #22C55E; }
g.run .sh-belt { stroke: #22C55E; }
.sh-case rect { fill: #C8873A; stroke: #8A5A22; stroke-width: 1; }
.sh-tape { stroke: #F3D9A8; stroke-width: 2; fill: none; opacity: .8; }
.sh-pt { font-size: 8.5px; font-weight: 800; fill: #4A2E10; text-anchor: middle; }
.sh-wood { fill: #8B6B4A; stroke: #5E4630; stroke-width: .8; }
.sh-rbase { fill: #334155; }
.sh-rcol { fill: #F97316; stroke: #C2410C; }
.sh-arm { stroke: #FB923C; stroke-width: 15; stroke-linecap: round; }
.sh-arm.a2 { stroke: #FDBA74; stroke-width: 11; }
.sh-joint { fill: #1E293B; stroke: #FDBA74; stroke-width: 3; }
.sh-joint-sq { fill: #1E293B; }
.sh-finger { fill: #94A3B8; }
.sh-lbl { font-size: 11px; fill: var(--muted); font-weight: 600; }
.sh-lbl.sm { font-size: 10px; text-anchor: middle; }
.sh-lbl.strong { font-size: 12px; font-weight: 800; fill: var(--text); text-anchor: middle; letter-spacing: .04em; }
.sh-lbl.mono { font-family: var(--mono); font-size: 10.5px; text-anchor: middle; fill: var(--text); }
.sh-lbl.ok { fill: #22C55E; font-weight: 700; }
.sh-lbl.idle { fill: var(--dim); }
.sh-dockwall { fill: rgba(var(--ink), .1); stroke: rgba(var(--ink), .2); }
.sh-leveler { fill: rgba(var(--ink), .14); }
.sh-hatch path { stroke: rgba(var(--ink), .22); stroke-width: 1.4; }
.sh-dock-name { font-size: 13px; font-weight: 800; letter-spacing: .12em; fill: var(--acc2); }
.sh-trailer { fill: rgba(148, 163, 184, .08); stroke: #94A3B8; stroke-width: 2.2; }
.sh-rib { stroke: rgba(148, 163, 184, .25); stroke-width: 1.2; }
.sh-chassis { fill: #334155; }
.sh-cab { fill: #2563EB; stroke: #1D4ED8; stroke-width: 2; }
.sh-window { fill: #BFDBFE; opacity: .8; }
.sh-light { fill: #FDE68A; }
.sh-wheel { fill: #0F172A; stroke: #475569; stroke-width: 3; }
.sh-hubcap { fill: #94A3B8; }
.sh-door { fill: #94A3B8; transition: opacity .4s; }
.sh-door.open { opacity: .15; }
.sh-info { font-size: 13px; fill: var(--muted); }
.sh-info.strong { font-size: 14.5px; font-weight: 800; fill: var(--text); }
.sh-info.right { text-anchor: end; font-weight: 800; fill: #22C55E; font-size: 14px; }
.sh-waiting { font-size: 15px; font-weight: 700; fill: var(--dim); text-anchor: middle; }
.sh-fbody { fill: #FBBF24; stroke: #B45309; stroke-width: 1.5; }
.sh-fweight { fill: #92400E; }
.sh-fcage { stroke: #1F2937; stroke-width: 3; fill: none; }
[data-theme^="light"] .sh-fcage { stroke: #334155; }
.sh-fdriver { fill: #60A5FA; }
.sh-fmast { fill: #475569; }
.sh-ftine { fill: #64748B; }
.sh-forklift.busy .sh-fbody { filter: drop-shadow(0 0 6px rgba(251, 191, 36, .55)); }
[data-theme^="light"] .sh-belt { fill: #CBD5E1; stroke: #64748B; }
[data-theme^="light"] .sh-roller { fill: #E2E8F0; stroke: #64748B; }
[data-theme^="light"] .sh-roller-spoke { stroke: #475569; }
[data-theme^="light"] .sh-trailer { fill: rgba(148, 163, 184, .12); stroke: #64748B; }
.sh-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sh-card .pill { display: inline-flex; align-items: center; gap: 6px; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); }
.sh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); }
.sh-card .progress { margin: 2px 0 8px; }
.sh-card .mc-row b { text-align: right; }
.card-title.pad-x { padding: 16px 20px 6px; }
@media (max-width: 1100px) { .sh-cards { grid-template-columns: 1fr; } }
.sh-lbl.left { text-anchor: start; }
.sh-line-name { font-size: 13px; font-weight: 800; letter-spacing: .12em; fill: var(--acc2); }

/* =====================================================================
   Logística · mapa de rutas y finanzas
   ===================================================================== */
.lg-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: stretch; }
.lg-side { display: flex; flex-direction: column; min-height: 0; }
.lg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.lg-tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; border: 1px solid var(--border-2); background: rgba(var(--ink), .03); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; }
.lg-tabs button b { font-size: 19px; color: var(--text); }
.lg-tabs button.on { background: color-mix(in srgb, var(--acc2) 14%, transparent); border-color: color-mix(in srgb, var(--acc2) 50%, transparent); color: var(--text); }
.lg-list { display: grid; gap: 9px; overflow-y: auto; max-height: 600px; padding-right: 4px; align-content: start; scrollbar-width: thin; }
.lg-item { border: 1px solid var(--border); border-left: 3px solid var(--tc); border-radius: 12px; padding: 10px 12px; background: rgba(var(--ink), .025); cursor: pointer; transition: background .2s, border-color .2s; }
.lg-item:hover, .lg-item.sel { background: color-mix(in srgb, var(--tc) 10%, transparent); border-color: color-mix(in srgb, var(--tc) 55%, transparent); }
.lg-it-top { display: flex; align-items: center; gap: 9px; }
.lg-it-top > div { flex: 1; min-width: 0; }
.lg-it-top b { font-size: 13.5px; }
.lg-it-top small { display: block; font-size: 11px; color: var(--muted); }
.lg-tico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--tc); flex: none; }
.lg-pct { font-size: 15px; color: var(--tc); }
.lg-it-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-it-sub b { color: var(--text); }
.lg-it-bar { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.lg-it-bar .progress { flex: 1; }
.lg-late { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; color: #F97316; font-weight: 700; }
.pill.neutral { color: var(--muted); background: rgba(var(--ink), .06); border: 1px solid var(--border-2); }
.lg-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.lg-bg { fill: #0D1528; }
.lg-block.bld { fill: #16213A; }
.lg-block.park { fill: rgba(34, 197, 94, .14); }
.lg-block.water { fill: rgba(59, 130, 246, .18); }
.lg-roof { fill: rgba(var(--ink), .05); }
.lg-streets line { stroke: #26324D; stroke-width: 22; stroke-linecap: square; }
.lg-lanes line { stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; stroke-dasharray: 10 10; }
.lg-route { fill: none; stroke: #22D3EE; stroke-width: 2.5; stroke-dasharray: 3 7; stroke-linecap: round; stroke-linejoin: round; opacity: .18; transition: opacity .3s; }
.lg-route.active { opacity: .5; }
.lg-route.sel { stroke: var(--rc); stroke-width: 5; stroke-dasharray: none; opacity: .75; }
.lg-plant-b { fill: #7C2D12; stroke: #F97316; stroke-width: 2; }
.lg-stack { fill: #9A3412; stroke: #F97316; stroke-width: 1.5; }
.lg-plant-t { font-size: 14px; font-weight: 800; fill: #fff; letter-spacing: .06em; }
.lg-plant-s { font-size: 10px; fill: #FED7AA; }
.lg-dock { fill: #334155; stroke: #94A3B8; }
.lg-dock.loading { fill: #22C55E; } .lg-dock.arriving { fill: #22D3EE; } .lg-dock.departing { fill: #FBBF24; }
.lg-client { cursor: pointer; }
.lg-client-halo { fill: rgba(139, 92, 246, .18); stroke: rgba(139, 92, 246, .6); stroke-width: 2; transition: all .3s; }
.lg-client.sel .lg-client-halo { fill: rgba(139, 92, 246, .38); stroke: #A78BFA; stroke-width: 3; }
.lg-wh { fill: #8B5CF6; stroke: #EDE9FE; stroke-width: 1.5; }
.lg-wh-door { fill: #EDE9FE; }
.lg-client-pill { fill: rgba(13, 21, 40, .9); stroke: rgba(167, 139, 250, .6); }
.lg-client-t { font-size: 11px; font-weight: 700; fill: #EDE9FE; text-anchor: middle; }
.lg-badge { font-size: 11px; font-weight: 800; fill: #22D3EE; }
.lg-truck { cursor: pointer; }
.lg-trailer { fill: #E2E8F0; stroke: var(--tc); stroke-width: 2; }
.lg-cab { fill: var(--tc); }
.lg-tw { fill: #0F172A; }
.lg-truck.sel .lg-trailer { stroke-width: 3.5; filter: drop-shadow(0 0 6px var(--tc)); }
.lg-scale path { stroke: rgba(255,255,255,.5); stroke-width: 2; fill: none; }
.lg-scale text { font-size: 11px; fill: rgba(255,255,255,.6); text-anchor: middle; }
.lg-cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); margin-right: 7px; vertical-align: 0; }
.lg-cl-tbl { max-height: 360px; overflow-y: auto; margin-top: 12px; }
.mini-kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#lfK.mini-kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lf-filters { display: flex; gap: 10px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.lf-filters select { height: 34px; }
.neg { color: #FF5A5F; font-weight: 700; }
.ok-t { color: #22C55E; font-weight: 800; }
.mt-s { margin-top: 8px; }
@media (max-width: 1250px) { .lg-grid { grid-template-columns: 1fr; } .lg-list { max-height: 320px; } }
@media (max-width: 900px) { .mini-kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lg-list { grid-template-columns: minmax(0, 1fr); }
.lg-list > * { min-width: 0; }
.lg-badge.end { text-anchor: end; }
.grid-2 > * { min-width: 0; }
#view-logifin .tbl td, #view-logifin .tbl th { white-space: nowrap; }
#view-logifin .table-wrap { overflow-x: auto; }
#lfT { min-width: 1500px; }
#view-logifin .table-card:last-child .table-wrap { max-height: 560px; overflow-y: auto; }
.lg-cl-tbl .tbl td { white-space: nowrap; }

/* =====================================================================
   Materia prima · secos
   ===================================================================== */
.rd-svg, .rl-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.rd-yard { fill: #0D1528; }
.rd-floor { fill: #131D33; stroke: rgba(var(--ink), .12); }
.rd-aisle { stroke: #FBBF24; stroke-width: 3; stroke-dasharray: 14 10; fill: none; opacity: .35; }
.rd-title { font-size: 13px; font-weight: 800; letter-spacing: .14em; fill: var(--acc2); }
.rd-wh { fill: rgba(30, 41, 70, .55); stroke: rgba(148, 163, 184, .35); stroke-width: 1.5; }
.rd-wh-t { font-size: 13px; font-weight: 800; letter-spacing: .06em; fill: #E2E8F0; }
.rd-zone-b { fill: rgba(var(--ink), .03); stroke: rgba(148, 163, 184, .3); stroke-dasharray: 6 5; }
.rd-zone-t { font-size: 12px; font-weight: 800; fill: #E2E8F0; }
.rd-zone-s { font-size: 10px; fill: #94A3B8; }
.rd-zone-s.end { text-anchor: end; font-weight: 700; }
.rd-slot { fill: rgba(15, 23, 42, .6); stroke: rgba(148, 163, 184, .28); }
.rd-slot-n { font-size: 8.5px; fill: #64748B; font-weight: 700; }
.rd-wood { fill: #8B6B4A; stroke: #5E4630; }
.rd-box { stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.rd-fifo circle { fill: #334155; stroke: #94A3B8; }
.rd-fifo text { font-size: 9.5px; font-weight: 800; fill: #fff; text-anchor: middle; }
.rd-fifo.next circle { fill: #22C55E; stroke: #BBF7D0; }
g.reserved .rd-slot { stroke: #FBBF24; stroke-dasharray: 4 3; stroke-width: 2; }
g.dim { opacity: .25; }
.rd-door { fill: #FBBF24; }
.rd-dock-t { font-size: 12px; font-weight: 800; letter-spacing: .1em; fill: var(--acc2); }
.rd-trailer { fill: #CBD5E1; stroke: #64748B; stroke-width: 2; }
.rd-cab { fill: #2563EB; stroke: #1E3A8A; stroke-width: 2; }
.rd-window { fill: #BFDBFE; opacity: .85; }
.rd-lbl { font-size: 11px; fill: #94A3B8; }
.rd-lbl.strong { font-size: 12.5px; font-weight: 800; fill: #E2E8F0; }
.rd-empty { font-size: 14px; font-weight: 700; fill: #475569; text-anchor: middle; }
.rd-fbody { fill: var(--fc); stroke: rgba(0, 0, 0, .45); stroke-width: 1.5; }
.rd-fseat { fill: #1F2937; }
.rd-tines { stroke: #64748B; stroke-width: 3.5; stroke-linecap: round; }
.rd-flbl { font-size: 10px; font-weight: 800; fill: var(--fc); text-anchor: middle; }
.rd-lg-fifo { background: #22C55E !important; border-radius: 50% !important; }
.rd-stock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.rd-stock.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-pn { padding: 14px 16px; cursor: pointer; border-top: 3px solid var(--c); transition: transform .2s, box-shadow .2s; }
.rd-pn:hover, .rd-pn.sel { transform: translateY(-2px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent), var(--shadow); }
.rd-pn-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rd-pn-top > div { flex: 1; min-width: 0; }
.rd-pn-top b { font-size: 14px; }
.rd-pn-top small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-pn-sw { width: 26px; height: 26px; border-radius: 7px; background: var(--c); border: 1px solid rgba(0, 0, 0, .3); flex: none; }
.rd-pct { font-size: 20px; font-weight: 800; }
.rd-pn .progress { margin-bottom: 8px; }
.rd-st { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; color: var(--sc); background: color-mix(in srgb, var(--sc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); }
.rd-bottom { grid-template-columns: 2fr 1fr; }
.rd-tbl { max-height: 460px; overflow: auto; }
.rd-tbl td, .rd-tbl th, .rh-eq td, .rh-eq th { white-space: nowrap; }
.rd-msgs { display: grid; gap: 8px; }
.rd-msg { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; }
.rd-msg .mono { color: var(--acc2); flex: none; }
@media (max-width: 1300px) { .rd-stock { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rd-bottom { grid-template-columns: 1fr; } }

/* =====================================================================
   Materia prima · líquidos (DTI isométrico)
   ===================================================================== */
.rl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; }
.rl-side { display: grid; gap: 18px; align-content: start; }
@media (max-width: 1350px) { .rl-grid { grid-template-columns: 1fr; } }
.rl-svg { background: radial-gradient(ellipse at 50% 30%, #17223D, #0B1222); border-radius: 14px; }
.iso-floor .fl { fill: rgba(30, 41, 70, .55); }
.iso-floor .fl-l { stroke: rgba(148, 163, 184, .08); stroke-width: 1; }
.bund-f { fill: rgba(148, 163, 184, .07); stroke: rgba(251, 191, 36, .45); stroke-width: 2; stroke-dasharray: 8 6; }
.f-front { fill: #475569; } .f-side { fill: #334155; } .f-top { fill: #64748B; }
.tk-chassis .f-front, .tk-chassis .f-side, .tk-chassis .f-top { fill: #1F2937; }
.tk-cab .f-front { fill: #2563EB; } .tk-cab .f-side { fill: #1D4ED8; } .tk-cab .f-top { fill: #60A5FA; }
.tk-window { fill: #BFDBFE; opacity: .85; }
.tk-wheel { fill: #0F172A; stroke: #475569; stroke-width: 2; }
.tanker.stainless .tk-shell { fill: url(#gSteel); stroke: #94A3B8; stroke-width: .06; }
.tanker.insulated .tk-shell { fill: #F1F5F9; stroke: #CBD5E1; stroke-width: .06; }
.tanker.iso .tk-shell { fill: #FB923C; stroke: #C2410C; stroke-width: .06; }
.tk-rib { stroke: #94A3B8; stroke-width: .12; }
.tk-band { stroke: #2563EB; stroke-width: .28; }
.tk-hatch { stroke: #475569; stroke-width: .5; stroke-linecap: round; }
.tk-frame path { stroke: #F97316; stroke-width: 3; }
.tk-frame-l { stroke: #F97316; stroke-width: 2.5; }
.tk-cap { fill: #94A3B8; stroke: #475569; stroke-width: 1.5; }
.tanker.insulated .tk-cap { fill: #E2E8F0; }
.tanker.iso .tk-cap { fill: #FDBA74; }
.hose { fill: none; stroke: #7F1D1D; stroke-width: 7; stroke-linecap: round; }
.hose.on { stroke: #14532D; }
.hose-flow { fill: none; stroke: #FF3B4E; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.hose-flow.on { stroke: var(--fl); stroke-dasharray: 8 8; opacity: 1; animation: flow 0.7s linear infinite; }
.hose-badge rect { fill: #7F1D1D; stroke: #FF3B4E; stroke-width: 2; }
.hose-badge text { font-size: 11px; font-weight: 900; fill: #FECACA; text-anchor: middle; letter-spacing: .06em; }
.hose-badge.on rect { fill: #14532D; stroke: #22C55E; }
.hose-badge.on text { fill: #BBF7D0; }
.bay-lbl text { font-size: 11px; fill: #94A3B8; }
.bay-lbl text.strong { font-size: 12.5px; font-weight: 800; fill: #E2E8F0; }
.bay-name { font-size: 12px; font-weight: 800; letter-spacing: .12em; fill: var(--acc2); }
.t-leg { stroke: #475569; stroke-width: 4; }
.t-cone { fill: #64748B; stroke: #334155; stroke-width: 1.5; }
.t-body { fill: url(#gMetal); stroke: #334155; stroke-width: 1.5; opacity: .92; }
.t-liq { fill: var(--lc); opacity: .55; transition: y 1s linear, height 1s linear; }
.t-surf { fill: var(--lc); opacity: .9; stroke: rgba(255, 255, 255, .5); transition: cy 1s linear; }
.t-top { fill: #CBD5E1; stroke: #475569; stroke-width: 1.5; }
.t-shine { stroke: rgba(255, 255, 255, .45); stroke-width: 5; stroke-linecap: round; }
.t-gauge { stroke: rgba(148, 163, 184, .35); stroke-width: 5; stroke-linecap: round; }
.t-gauge-l { stroke: var(--lc); stroke-width: 5; stroke-linecap: round; transition: d 1s linear; }
.t-lbl { fill: rgba(11, 18, 34, .88); stroke: rgba(148, 163, 184, .45); }
.t-lbl-t { font-size: 11.5px; font-weight: 800; fill: #E2E8F0; text-anchor: middle; }
.t-lbl-v { font-size: 12px; font-weight: 800; fill: #22D3EE; text-anchor: middle; }
.pipe path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pipe .p-out { stroke: #0F172A; stroke-width: 11; }
.pipe .p-in { stroke: #64748B; stroke-width: 8; }
.pipe .p-hi { stroke: rgba(255, 255, 255, .25); stroke-width: 2.5; transform: translate(0, -2px); }
.pipe.small .p-out { stroke-width: 8; } .pipe.small .p-in { stroke-width: 5.5; }
.pipe .p-flow { stroke: var(--fl); stroke-width: 3.5; stroke-dasharray: 7 9; opacity: 0; }
.pipe.flowing .p-flow { opacity: 1; animation: flow .8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.valve .v-body { fill: #22C55E; stroke: #052E16; stroke-width: 1.5; }
.valve.closed .v-body { fill: #FF3B4E; stroke: #450A0A; }
.valve .v-stem { stroke: #CBD5E1; stroke-width: 2; fill: none; }
.valve .v-act { fill: #94A3B8; stroke: #334155; }
.v-tag { font-size: 10.5px; font-weight: 800; fill: #E2E8F0; text-anchor: middle; paint-order: stroke; stroke: #0B1222; stroke-width: 3px; }
.v-pct { font-size: 10px; font-weight: 800; fill: #22D3EE; text-anchor: middle; paint-order: stroke; stroke: #0B1222; stroke-width: 3px; }
.pump-skid .f-front, .pump-skid .f-side, .pump-skid .f-top { fill: #1F2937; }
.pump-motor .f-front { fill: #1D4ED8; } .pump-motor .f-side { fill: #1E3A8A; } .pump-motor .f-top { fill: #3B82F6; }
.pump-c { fill: #334155; stroke: #94A3B8; stroke-width: 3; }
.pump.run .pump-c { stroke: #22C55E; }
.pump.fault .pump-c { stroke: #FF3B4E; fill: #450A0A; }
.pump-imp path { stroke: #E2E8F0; stroke-width: 2.5; stroke-linecap: round; }
.pump-st { font-size: 9.5px; font-weight: 800; fill: #64748B; text-anchor: middle; letter-spacing: .06em; }
.pump.run .pump-st { fill: #22C55E; } .pump.fault .pump-st { fill: #FF3B4E; }
.sep-saddle .f-front, .sep-saddle .f-side, .sep-saddle .f-top { fill: #374151; }
.sep-cap { fill: #94A3B8; stroke: #334155; stroke-width: 1.5; }
.sep-body { fill: #1E293B; }
.sep-gas { fill: rgba(203, 213, 225, .12); }
.sep-light { fill: #F59E0B; opacity: .85; transition: y 1s linear, height 1s linear; }
.sep-water { fill: #38BDF8; opacity: .9; transition: height 1s linear; }
.sep-weir { fill: #CBD5E1; }
.sep-demister { fill: url(#gMetal); opacity: .6; stroke: #E2E8F0; stroke-width: .04; stroke-dasharray: .12 .08; }
.sep-diverter { stroke: #E2E8F0; stroke-width: .12; fill: none; }
.sep-vortex { stroke: #E2E8F0; stroke-width: .1; }
.sep-shell { fill: none; stroke: #CBD5E1; stroke-width: .09; }
.sep-t { font-size: 12px; font-weight: 800; letter-spacing: .1em; fill: var(--acc2); text-anchor: middle; }
.inst .i-c { fill: #0B1222; stroke: #22D3EE; stroke-width: 1.8; }
.inst .i-line { stroke: #22D3EE; stroke-width: 1.2; }
.inst .i-t { font-size: 10px; font-weight: 900; fill: #E2E8F0; text-anchor: middle; }
.inst .i-n { font-size: 9px; font-weight: 700; fill: #94A3B8; text-anchor: middle; }
.inst .i-v { font-size: 11.5px; font-weight: 800; fill: #22D3EE; paint-order: stroke; stroke: #0B1222; stroke-width: 4px; }
.inst.alarm .i-c { stroke: #FF3B4E; animation: blinkS 1s steps(2) infinite; }
.inst.alarm .i-v { fill: #FF5A5F; }
@keyframes blinkS { 50% { stroke: #FBBF24; } }
.i-tap { stroke: #22D3EE; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .7; }
.dest path { fill: #94A3B8; }
.dest text { font-size: 10.5px; fill: #94A3B8; }
.dest text.strong { font-size: 11.5px; font-weight: 800; fill: #E2E8F0; }
.rl-al { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; margin-bottom: 7px; font-size: 12.5px; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .35); }
.rl-al.alta { background: rgba(255, 59, 78, .1); border-color: rgba(255, 59, 78, .45); }
.rl-al .ic { color: #FBBF24; flex: none; margin-top: 2px; } .rl-al.alta .ic { color: #FF3B4E; }
.rl-al small { display: block; color: var(--muted); font-size: 11px; }
.rl-ok { display: flex; gap: 8px; align-items: center; color: #22C55E; font-weight: 700; font-size: 13px; }
.rh-plans div { font-size: 12px; } .rh-plans small { color: var(--muted); margin-left: 6px; }
.rh-plans div.od span { color: #FF5A5F; font-weight: 700; }
.rh-eq tr { cursor: pointer; } .rh-eq tr.sel td { background: rgba(var(--ink), .05); }
.v-tag.end, .pump-st.end { text-anchor: end; }
.bay-lbl text { text-anchor: end; }
.rl-side { min-width: 0; }
.rl-side .card { min-width: 0; overflow: hidden; }
#rlLoops { overflow-x: auto; }
#rlLoops .tbl td, #rlLoops .tbl th { padding: 8px 8px; font-size: 12px; white-space: nowrap; }
.rl-grid { grid-template-columns: minmax(0, 1fr) 400px; }
@media (max-width: 1450px) { .rl-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Líquidos 3D · v2 (pipas, silos, separador, eventos)
   ===================================================================== */
.bay-lane { fill: rgba(251, 191, 36, .05); stroke: rgba(251, 191, 36, .28); stroke-width: 1.2; stroke-dasharray: 10 8; }
/* silos */
.t-foot { fill: #1E293B; }
.t-inner { fill: rgba(15, 23, 42, .65); }
.t-liq { opacity: 1; transition: y 1.2s ease, height 1.2s ease; }
.t-surfg { transition: transform 1.2s ease; }
.t-surf { fill: var(--lc); stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; filter: brightness(1.25); }
.t-ripples ellipse { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tank.filling .t-ripples ellipse { animation: ripple 1.8s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.t-bubbles circle { fill: rgba(255, 255, 255, .7); opacity: 0; transform-box: fill-box; }
.tank.filling .t-bubbles circle { animation: tbub 2.4s ease-in infinite; }
@keyframes tbub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-110px); opacity: 0; } }
.t-stream { fill: none; stroke: var(--lc); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 6 5; animation: flow .5s linear infinite; filter: drop-shadow(0 0 4px var(--lc)); }
.t-shell { stroke: #334155; stroke-width: 1.5; }
.t-weld { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.t-roof { fill: #CBD5E1; stroke: #475569; stroke-width: 1.5; }
.t-manway { fill: #64748B; stroke: #1E293B; }
.t-nozzle { fill: none; stroke: #94A3B8; stroke-width: 4; stroke-linecap: round; }
.t-ladder { stroke: #FBBF24; stroke-width: 1.6; fill: none; opacity: .85; }
.t-sight { fill: rgba(15, 23, 42, .8); stroke: #64748B; }
.t-sight-l { fill: var(--lc); transition: y 1.2s ease, height 1.2s ease; }
.t-halo { fill: none; stroke: transparent; stroke-width: 5; }
.tank.alarm .t-halo { stroke: #FF3B4E; animation: halo 1s ease-in-out infinite; }
@keyframes halo { 50% { stroke-opacity: .2; } }
.tank.draining .t-cone { stroke: var(--lc); }
/* donas y manómetro */
.donut .dn-bg { fill: rgba(11, 18, 34, .9); stroke: rgba(148, 163, 184, .3); }
.donut .dn-track { fill: none; stroke: rgba(148, 163, 184, .2); stroke-width: 7; }
.donut .dn-arc { fill: none; stroke: var(--dc); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; filter: drop-shadow(0 0 4px var(--dc)); }
.donut.alarm .dn-arc { stroke: #FF3B4E; animation: halo 1s infinite; }
.donut.alarm .dn-bg { stroke: #FF3B4E; }
.dn-pct { font-size: 15px; font-weight: 900; fill: #F8FAFC; text-anchor: middle; }
.dn-pct.sm { font-size: 13px; }
.dn-pct.bad { fill: #FF5A5F; }
.dn-title { font-size: 11px; font-weight: 800; fill: #E2E8F0; text-anchor: middle; paint-order: stroke; stroke: #0B1222; stroke-width: 3px; }
.dn-sub { font-size: 10.5px; font-weight: 700; fill: #94A3B8; text-anchor: middle; paint-order: stroke; stroke: #0B1222; stroke-width: 3px; }
.tk-donut .donut { opacity: .96; }
.tk-donut .donut.pumping .dn-bg { stroke: #22C55E; animation: halo 1.4s infinite; }
.dial .dl-track { fill: none; stroke: rgba(148, 163, 184, .2); stroke-width: 6; }
.dial .dl-ok { fill: none; stroke: #22C55E; stroke-width: 6; }
.dial .dl-hi { fill: none; stroke: #FF3B4E; stroke-width: 6; }
.dial .dl-tick { stroke: #94A3B8; stroke-width: 1.5; }
.dial .dl-needle { transition: transform 1.2s cubic-bezier(.3, 1.5, .5, 1); }
.dial .dl-needle path, .dial > circle:last-of-type { fill: #F59E0B; }
.dash-bg { fill: rgba(11, 18, 34, .82); stroke: rgba(34, 211, 238, .35); }
.dash-t { font-size: 11px; font-weight: 900; letter-spacing: .14em; fill: #22D3EE; }
/* pipas */
.tk-shadow { fill: rgba(0, 0, 0, .35); }
.tk-tire { fill: #0B1222; stroke: #334155; stroke-width: .08; }
.tk-rim { fill: #94A3B8; }
.tk-spoke { stroke: #1E293B; stroke-width: .08; }
.tanker.moving .tk-spin { animation: spin .45s linear infinite; }
.tk-body { stroke: rgba(15, 23, 42, .7); stroke-width: 1.2; }
.tanker.iso .tk-body { stroke: #C2410C; }
.tk-cap { fill: rgba(255, 255, 255, .22); stroke: rgba(15, 23, 42, .6); stroke-width: 1.2; }
.tanker.insulated .tk-cap { fill: #F1F5F9; }
.tanker.iso .tk-cap { fill: #FED7AA; }
.tk-rib { fill: none; stroke: rgba(100, 116, 139, .6); stroke-width: 1.2; }
.tk-shine { stroke: rgba(255, 255, 255, .85); stroke-width: 3; stroke-linecap: round; }
.tk-walk { stroke: #FBBF24; stroke-width: 2; stroke-dasharray: 4 3; opacity: .8; }
.tk-dome { fill: #64748B; stroke: #1E293B; }
.tk-win { fill: rgba(15, 23, 42, .85); }
.tk-win-liq { fill: var(--lc); opacity: .9; transition: height 1s linear; }
.tk-win-tick { stroke: rgba(255, 255, 255, .5); stroke-width: .05; }
.tk-win-frame { fill: none; stroke: #E2E8F0; stroke-width: .07; }
.tk-fairing .f-front { fill: #1D4ED8; } .tk-fairing .f-side { fill: #1E40AF; } .tk-fairing .f-top { fill: #3B82F6; }
.tk-window.front { fill: #93C5FD; opacity: .9; }
.tk-grill { fill: #0F172A; stroke: #94A3B8; stroke-width: 1; }
.tk-light { fill: #FEF3C7; opacity: .5; }
.tk-light.on { fill: #FEF08A; opacity: 1; filter: url(#glow); }
.tk-stack { stroke: #94A3B8; stroke-width: 3.5; stroke-linecap: round; }
.tk-outlet { fill: #1E293B; stroke: #FBBF24; stroke-width: 2; }
.tk-frame path { stroke: #F97316; stroke-width: 3; fill: none; }
/* manguera */
.hose { stroke-width: 8; stroke: #7F1D1D; transition: stroke .4s; }
.hose.on { stroke: #166534; }
.hose-flow { stroke-width: 3.5; opacity: 0; }
.hose-flow.on { opacity: 1; stroke-dasharray: 9 7; animation: flow .5s linear infinite; filter: drop-shadow(0 0 5px var(--fl)); }
.coupler { fill: #1E293B; stroke: #FF3B4E; stroke-width: 2.5; }
.coupler.on { stroke: #22C55E; filter: url(#glow); }
.hose-badge .hb-dot { fill: #FF3B4E; }
.hose-badge.on .hb-dot { fill: #22C55E; animation: halo .9s infinite; }
/* separador */
.sep-shellbody { stroke: #0F172A; stroke-width: 1.5; }
.sep-band { fill: none; stroke: rgba(15, 23, 42, .45); stroke-width: 1.4; }
.sep-head { fill: #CBD5E1; stroke: #334155; stroke-width: 1.5; }
.sep-plate { fill: #1E293B; stroke: #F59E0B; }
.sep-plate-t { font-size: 10px; font-weight: 900; fill: #F59E0B; text-anchor: middle; }
.sep-noz { fill: #94A3B8; stroke: #334155; }
.sep-psv { fill: #FF3B4E; stroke: #7F1D1D; }
.sep-win { fill: rgba(203, 213, 225, .1); }
.sep-win-frame { fill: none; stroke: #E2E8F0; stroke-width: .07; }
.sep-light { fill: #F59E0B; opacity: .92; }
.sep-water { fill: #38BDF8; opacity: .95; }
.sep-lvl { transition: transform 1.2s ease; }
.sep-wave { animation: wave 2.6s linear infinite; }
.sep-wave.slow { animation-duration: 4s; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-1.3px); } }
.sep-wave.slow { animation-name: wave2; }
@keyframes wave2 { from { transform: translateX(0); } to { transform: translateX(-1.7px); } }
.sep-bub circle { fill: rgba(255, 255, 255, .8); opacity: 0; }
.sep.running .sep-bub circle { animation: sbub 2.6s ease-in infinite; }
@keyframes sbub { 0% { transform: translateY(-0.2px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(1.5px); opacity: 0; } }
.sep-mesh { stroke: rgba(226, 232, 240, .55); stroke-width: .03; }
.sep-mist circle { fill: #F8FAFC; opacity: 0; }
.sep.running .sep-mist circle { animation: smist 2.4s linear infinite; }
@keyframes smist { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-1.2px); opacity: 0; } }
.sep-halo { fill: none; stroke: transparent; stroke-width: 6; }
.sep.alarm .sep-halo { stroke: #FF3B4E; animation: halo 1s infinite; }
/* avisos flotantes y alarmas */
.chip .chip-in { animation: chipUp 4.2s ease forwards; }
.chip rect { fill: rgba(11, 18, 34, .95); stroke: #22D3EE; stroke-width: 1.5; }
.chip text { font-size: 11.5px; font-weight: 800; fill: #E2E8F0; }
.chip.ok rect { stroke: #22C55E; } .chip.ok text { fill: #BBF7D0; }
.chip.warn rect { stroke: #FBBF24; } .chip.warn text { fill: #FDE68A; }
.chip.alarm rect { stroke: #FF3B4E; fill: rgba(69, 10, 10, .95); } .chip.alarm text { fill: #FECACA; }
@keyframes chipUp { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateY(-16px); } 100% { opacity: 0; transform: translateY(-26px); } }
.alarm-bar .ab rect { fill: rgba(69, 10, 10, .92); stroke: #FF3B4E; }
.alarm-bar .ab.media rect, .alarm-bar .ab.baja rect { fill: rgba(66, 32, 6, .92); stroke: #FBBF24; }
.alarm-bar .ab text { font-size: 11.5px; font-weight: 800; fill: #FECACA; }
.alarm-bar .ab.media text, .alarm-bar .ab.baja text { fill: #FDE68A; }
.alarm-bar .ab-dot { fill: #FF3B4E; animation: halo .8s infinite; }
.alarm-bar .ab.media .ab-dot, .alarm-bar .ab.baja .ab-dot { fill: #FBBF24; }
.rd-msg.fault { color: #FF8A8F; } .rd-msg.ok { color: #86EFAC; }
.dn-sub.side { text-anchor: start; font-size: 11px; fill: #CBD5E1; }

/* =====================================================================
   CALIDAD Y MEJORA CONTINUA
   ===================================================================== */
.mini-kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mini-kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@container (max-width: 1100px) { .mini-kpis.k5, .mini-kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.green-t { color: #4ADE80; } .red-t { color: #FF6B7A; } .warn-t { color: #FBBF24; font-weight: 700; }
.ic-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: rgba(var(--ink), .03); color: var(--muted); cursor: pointer; transition: all .2s var(--ease); text-decoration: none; }
.ic-btn:hover { color: var(--text); border-color: var(--border-2); background: rgba(var(--ink), .08); transform: translateY(-1px); }
.ic-btn.del:hover { color: #FF6B7A; border-color: rgba(255,59,78,.4); }
.ic-btn .ic { width: 16px; height: 16px; }
.chips-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-mini button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-2); background: rgba(var(--ink), .03); color: var(--muted); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: all .2s var(--ease); }
.chips-mini button:hover { color: var(--text); transform: translateY(-1px); }
.chips-mini button.on { color: #fff; background: var(--grad-brand); border-color: transparent; }
.chips-mini button .ic { width: 13px; height: 13px; }
.input-wrap.sm input[type] { height: 36px; font-size: 13px; padding-left: 36px; min-width: 240px; }
.input-wrap.sm > [data-icon] { left: 11px; } .input-wrap.sm > [data-icon] .ic { width: 15px; height: 15px; }
.q-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
mark { background: rgba(251,191,36,.28); color: inherit; border-radius: 3px; padding: 0 2px; }

/* formularios */
.qf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qf label { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.qf label i, .tp-s h4 .req { color: var(--red); font-style: normal; }
.qf label em { font-style: normal; font-weight: 500; color: var(--dim); }
.qf input, .qf select, .qf textarea, .ll-ar input, .act-t input, .act-t select, .apv input, .why-s input, .m6 textarea, .dc-st input, .dc-st select, .fm-t.editing input, .fm-t.editing textarea, .fm-t.editing select {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border-2); color: var(--text); font: inherit; font-size: 13px; outline: none; transition: border-color .2s, box-shadow .2s; }
.qf textarea, .m6 textarea, .fm-t.editing textarea { height: auto; min-height: 0; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.qf input:focus, .qf select:focus, .qf textarea:focus, .ll-ar input:focus, .act-t input:focus, .why-s input:focus, .m6 textarea:focus, .fm-t.editing input:focus, .fm-t.editing textarea:focus { border-color: color-mix(in srgb, var(--acc2) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc1) 14%, transparent); }
.qf.invalid input, .qf.invalid textarea, .qf.invalid select { border-color: rgba(255,59,78,.85); box-shadow: 0 0 0 3px rgba(255,59,78,.14); }
.qf.invalid label { color: #FF9AA4; }
.qf-g { display: grid; gap: 12px 14px; }
.qf-g.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qf-g.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qf-g.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qf-g .span2 { grid-column: span 2; } .qf-g .span3 { grid-column: span 3; } .qf-g .span4 { grid-column: span 4; }
.qf-g.al-l { text-align: left; margin: 14px 0 18px; }

/* hoja lateral */
.q-sheet-bg { position: fixed; inset: 0; z-index: 45; background: rgba(3,6,14,.55); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.q-sheet-bg.show { opacity: 1; pointer-events: auto; }
.q-sheet { position: absolute; top: 0; right: 0; height: 100vh; width: min(1120px, 96vw); background: var(--drawer-bg); border-left: 1px solid var(--border-2); box-shadow: -30px 0 80px -20px rgba(0,0,0,.6);
  transform: translateX(40px); opacity: .4; transition: transform .45s var(--ease), opacity .3s; display: flex; flex-direction: column; }
.q-sheet-bg.show .q-sheet { transform: none; opacity: 1; }
.qs-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 22px 28px 16px; border-bottom: 1px solid var(--border); position: relative; }
.qs-head::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c, var(--acc1)); opacity: .8; }
.qs-t { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.qs-t small { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.qs-t h2 { margin: 2px 0 4px; font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
.qs-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 46px; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 10px 24px -10px var(--c); }
.qs-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.qs-body { flex: 1; overflow: auto; padding: 18px 28px 30px; }
.qs-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 28px; border-top: 1px solid var(--border); background: rgba(var(--ink), .02); }
.qs-t .ext-b { margin-top: 4px; }

/* plantilla (detalle y formularios) */
.tp-s { padding: 16px 0; border-bottom: 1px dashed var(--border-2); }
.tp-s:last-child { border-bottom: 0; }
.tp-s h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.tp-s h4 .ic { width: 16px; height: 16px; }
.tp-s p { margin: 0; line-height: 1.6; font-size: 14px; }
.tp-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tp-r { padding: 10px 12px; border-radius: 12px; background: rgba(var(--ink), .03); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-r.wide { margin-top: 10px; } .tp-r span { font-size: 11.5px; color: var(--dim); font-weight: 600; } .tp-r b { font-size: 13.5px; font-weight: 600; }
.tp-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-cats > * { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink), .02); color: var(--muted); font-weight: 600; font-size: 13px; font-family: inherit; }
.tp-cats > * .ic { width: 15px; height: 15px; color: var(--c); }
.tp-cats > .on { color: var(--text); border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.tp-cats.pick button { cursor: pointer; transition: all .2s var(--ease); } .tp-cats.pick button:hover { transform: translateY(-1px); color: var(--text); }
.tp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-neg, .tp-pos { padding: 12px 14px; border-radius: 12px; }
.tp-neg { background: rgba(255,59,78,.07); border: 1px solid rgba(255,59,78,.22); } .tp-pos { background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.22); }
.tp-neg b, .tp-pos b { display: flex; gap: 6px; align-items: center; font-size: 12.5px; margin-bottom: 6px; } .tp-neg b { color: #FF8A96; } .tp-pos b { color: #4ADE80; }
.tp-neg .ic, .tp-pos .ic { width: 15px; height: 15px; }
.tp-lesson { margin: 10px 0; padding: 16px 18px !important; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); }
.tp-lesson h4 { color: var(--c); } .tp-lesson p { font-size: 15.5px; font-weight: 600; }
.tp-sav { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,211,238,.05)); border: 1px solid rgba(34,197,94,.25); }
.tp-sav small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.tp-sav b { font-size: 26px; font-weight: 800; color: #4ADE80; letter-spacing: -.02em; } .tp-sav b.sm { font-size: 14px; color: var(--text); } .tp-sav span { font-size: 12px; color: var(--muted); }
.tp-acts { display: grid; gap: 8px; } .tp-acts > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(var(--ink), .03); font-size: 13px; }
.ll-ar { display: grid; grid-template-columns: 1fr 200px 160px 36px; gap: 8px; margin-bottom: 8px; }

/* matriz de riesgo */
.risk-matrix { overflow-x: auto; }
.risk-matrix table { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 11.5px; }
.risk-matrix th { font-weight: 700; color: var(--muted); padding: 6px; text-align: center; background: rgba(var(--ink), .04); border-radius: 6px; }
.risk-matrix th.rm-h { background: rgba(var(--ink), .08); color: var(--text); text-transform: uppercase; letter-spacing: .06em; }
.risk-matrix th.rm-h.pr { background: linear-gradient(90deg, rgba(59,130,246,.25), rgba(255,59,78,.25)); }
.risk-matrix th.pc { min-width: 58px; } .risk-matrix th.pc b { display: block; font-size: 14px; color: var(--text); } .risk-matrix th.pc small { display: block; font-weight: 600; } .risk-matrix th.pc em { display: block; font-style: normal; color: var(--dim); font-weight: 500; }
.risk-matrix td { padding: 6px 8px; border-radius: 6px; background: rgba(var(--ink), .025); vertical-align: middle; }
.risk-matrix td.sn { text-align: center; font-weight: 800; font-size: 14px; } .risk-matrix td.sc b { font-size: 12px; } .risk-matrix td.cx { color: var(--muted); max-width: 180px; line-height: 1.35; }
.risk-matrix.compact td.cx { display: none; }
.risk-matrix td.rc { min-width: 58px; height: 46px; text-align: center; position: relative; transition: transform .2s var(--ease), box-shadow .2s; }
.rc.blue, .rm-legend i.blue { background: #2563EB !important; } .rc.green, .rm-legend i.green { background: #16A34A !important; }
.rc.yellow, .rm-legend i.yellow { background: #EAB308 !important; } .rc.red, .rm-legend i.red { background: #DC2626 !important; }
.risk-matrix td.rc { opacity: .82; } .risk-matrix td.rc.pick { cursor: pointer; } .risk-matrix td.rc.pick:hover { transform: scale(1.06); opacity: 1; }
.risk-matrix td.rc.on { opacity: 1; box-shadow: 0 0 0 3px var(--text), 0 10px 24px -6px rgba(0,0,0,.6); transform: scale(1.05); z-index: 1; }
.risk-matrix td.rc i { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; font-style: normal; font-weight: 800; font-size: 13px; }
.risk-matrix td.rc i.dot { min-width: 14px; height: 14px; padding: 0; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.3); animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
.rm-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.rm-legend span { display: inline-flex; gap: 6px; align-items: center; } .rm-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.rf-risk { display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px; font-weight: 800; color: #fff; font-size: 13px; }
.rf-risk.blue { background: #2563EB; } .rf-risk.green { background: #16A34A; } .rf-risk.yellow { background: #CA8A04; } .rf-risk.red { background: #DC2626; }

/* gráficos */
.q-donut circle[stroke-dasharray] { animation: dnIn 1s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes dnIn { from { stroke-dasharray: 0 999; } }
.q-donut .dn-v { font-size: 22px; font-weight: 800; fill: var(--text); } .q-donut .dn-s { font-size: 11px; fill: var(--muted); }
.q-bars { display: flex; align-items: flex-end; gap: 6px; padding-top: 18px; }
.qb { flex: 1 1 var(--w); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.qb i { width: 72%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 35%, transparent)); transform-origin: bottom; animation: barUp .9s var(--ease) both; animation-delay: calc(var(--i) * 60ms); box-shadow: 0 8px 18px -10px var(--c); }
@keyframes barUp { from { transform: scaleY(0); } }
.qb small { font-size: 10.5px; color: var(--dim); } .qb-v { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ext-b { display: inline-grid; place-items: center; min-width: 42px; height: 26px; padding: 0 6px; border-radius: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.q-av { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 50%, #000)); box-shadow: 0 0 0 2px var(--panel-solid); }

/* ---------- escalamiento ---------- */
.esc-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.pyr-wrap { display: grid; place-items: center; }
.pyr-svg { width: 100%; max-width: 680px; height: auto; overflow: visible; }
.pyr-l { animation: reveal .6s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.pyr-s { stroke-width: 1.5; opacity: .7; }
.pyr-r { fill: var(--text); font-weight: 800; font-size: 14px; } .pyr-p { fill: var(--muted); font-size: 11.5px; font-weight: 600; }
.pyr-b { fill: rgba(var(--ink), .08); stroke: var(--c); stroke-width: 1.5; } .pyr-n { fill: var(--text); font-weight: 800; font-size: 13px; }
.pyr-ax { fill: var(--dim); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.pyr-l.hot .pyr-f { animation: pyrHot 1.6s ease-in-out infinite; } .pyr-l.hot .pyr-s { opacity: 1; stroke-width: 2.5; filter: drop-shadow(0 0 8px var(--c)); }
.pyr-l.hot .pyr-b { fill: var(--c); } .pyr-l.hot .pyr-n { fill: #fff; }
@keyframes pyrHot { 50% { opacity: .55; } }
.esc-roster { display: grid; gap: 6px; }
.er { display: grid; grid-template-columns: 38px 1fr auto 34px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(var(--ink), .03); border-left: 3px solid var(--c); }
.er-l { font-weight: 800; color: var(--c); font-family: var(--mono); } .er b { font-size: 13px; display: block; } .er small { color: var(--muted); font-size: 11.5px; }
.er-ch { font-size: 11px; color: var(--dim); text-align: right; } .er-n { display: grid; place-items: center; height: 26px; border-radius: 8px; background: rgba(var(--ink), .06); font-weight: 800; font-size: 13px; }
.er-n.hot { background: var(--c); color: #fff; box-shadow: 0 0 14px -2px var(--c); }
.er-shift { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--dim); margin-top: 4px; } .er-shift .ic { width: 13px; height: 13px; }
.esc-lvl { display: grid; gap: 7px; }
.elv { display: grid; grid-template-columns: 150px 1fr 40px; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.elv i { height: 9px; border-radius: 9px; background: rgba(var(--ink), .06); overflow: hidden; } .elv i b { display: block; height: 100%; border-radius: 9px; transition: width .8s var(--ease); }
.elv em { font-style: normal; font-weight: 800; color: var(--text); text-align: right; }
.esc-act { display: grid; gap: 12px; }
.esc-card { padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: var(--shadow), inset 4px 0 0 var(--c); animation: reveal .5s var(--ease) both; }
.esc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esc-lv { display: grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--c); color: #fff; font-weight: 800; font-size: 12.5px; box-shadow: 0 0 16px -4px var(--c); }
.esc-tag { color: var(--muted); font-weight: 700; } .esc-src { font-size: 11.5px; color: var(--dim); }
.esc-el { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; font-family: var(--mono); font-weight: 700; color: var(--muted); } .esc-el .ic { width: 13px; height: 13px; }
.esc-msg { margin: 8px 0 12px; font-size: 14px; font-weight: 600; }
.esc-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; margin-bottom: 12px; }
.es { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; position: relative; padding: 0 4px; }
.es::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px; background: rgba(var(--ink), .08); z-index: 0; }
.es:first-child::before { display: none; } .es.on::before { background: var(--c); }
.es-d { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--muted); background: var(--panel-solid); border: 2px solid rgba(var(--ink), .15); position: relative; z-index: 1; }
.es-d .ic { width: 13px; height: 13px; }
.es.on .es-d { background: var(--c); border-color: var(--c); color: #fff; }
.es.cur .es-d { animation: esPulse 1.4s infinite; } @keyframes esPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.es b { font-size: 11.5px; } .es small { font-size: 10.5px; color: var(--dim); line-height: 1.3; } .es:not(.on) b { color: var(--muted); }
.esc-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border-2); font-size: 12.5px; color: var(--muted); }
.esc-foot > span { display: inline-flex; gap: 6px; align-items: center; } .esc-foot .ic { width: 14px; height: 14px; } .esc-foot b { color: var(--text); } .esc-foot em { font-style: normal; color: var(--dim); }
.esc-next { margin-left: auto; } .esc-next.top { color: #FF8A96; }
.esc-ok { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px; border-radius: 18px; border: 1px dashed rgba(34,197,94,.4); background: rgba(34,197,94,.05); text-align: center; color: var(--muted); }
.esc-ok .ic { width: 40px; height: 40px; color: #4ADE80; } .esc-ok b { color: var(--text); font-size: 16px; } .esc-ok span { max-width: 560px; font-size: 13px; }
.esc-mx th { --c: var(--muted); } .esc-mx .mx-h { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: var(--c); color: #fff; font-size: 11px; }
.esc-mx { min-width: 760px; }
.esc-hs { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding-bottom: 8px; } .esc-hs b { color: var(--text); }
.lv-chip { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); white-space: nowrap; }
.lv-path { display: inline-flex; gap: 3px; } .lv-path i { width: 14px; height: 6px; border-radius: 3px; background: rgba(var(--ink), .08); } .lv-path i.on { background: var(--c); }

/* ---------- documentos ---------- */
.dc-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; border: 2px dashed var(--border-2); text-align: center; cursor: pointer; transition: all .25s var(--ease); }
.dc-drop:hover, .dc-drop.over { border-color: var(--acc2); background: color-mix(in srgb, var(--acc1) 7%, var(--panel)); transform: translateY(-2px); }
.dc-drop.over { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc1) 12%, transparent); }
.dc-drop-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--grad-brand); margin-bottom: 6px; box-shadow: 0 14px 30px -12px var(--acc1); }
.dc-drop-ic .ic { width: 28px; height: 28px; transform: rotate(180deg); }
.dc-drop.over .dc-drop-ic { animation: bob .8s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-6px); } }
.dc-types { display: flex; gap: 6px; margin-top: 8px; }
.dc-stage { margin-top: 14px; padding: 16px 18px; }
.dc-stage-h { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.dc-st { display: grid; grid-template-columns: 48px 1fr 170px 230px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(var(--ink), .03); margin-bottom: 8px; border: 1px solid var(--border); transition: border-color .3s, background .3s; }
.dc-st.done { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.06); } .dc-st.err { border-color: rgba(255,59,78,.45); background: rgba(255,59,78,.06); }
.dc-st-m { display: grid; gap: 4px; min-width: 0; } .dc-st-m input { height: 34px; font-weight: 600; } .dc-st-m small { color: var(--dim); font-size: 11.5px; }
.dc-pg { display: block; height: 4px; border-radius: 4px; background: rgba(var(--ink), .06); overflow: hidden; } .dc-pg b { display: block; height: 100%; width: 0; background: var(--grad-brand); transition: width .2s; }
.dc-st.done .dc-pg b { background: #22C55E; }
.dc-st select { height: 34px; }
.dc-st-s { display: flex; gap: 6px; align-items: center; justify-content: flex-end; font-size: 12px; font-weight: 700; color: var(--muted); } .dc-st.done .dc-st-s { color: #4ADE80; } .dc-st.err .dc-st-s { color: #FF8A96; } .dc-st-s .ic { width: 16px; height: 16px; flex: 0 0 16px; }
.dc-stage-f { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.dc-stage-b { display: flex; gap: 8px; }
.dc-t { display: flex; gap: 12px; align-items: center; } .dc-act { display: flex; gap: 6px; } #dcT tbody tr { cursor: pointer; }
#dcCats { margin-bottom: 8px; }
.pv-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; position: sticky; top: -18px; z-index: 1; padding: 6px 0; background: var(--drawer-bg); }
.pv-bar .input-wrap { flex: 1; max-width: 420px; } .pv-bar input { height: 40px; }
.pv-text { white-space: pre-wrap; word-break: break-word; font-family: var(--font); font-size: 13.5px; line-height: 1.65; padding: 18px 20px; border-radius: 14px; background: rgba(var(--ink), .03); border: 1px solid var(--border); margin: 0; }
.pv-text mark { background: rgba(251,191,36,.45); }

/* ---------- búsqueda ---------- */
.qs-box { padding: 20px; display: grid; gap: 12px; }
.qs-in { display: flex; gap: 12px; align-items: center; padding: 6px 6px 6px 18px; border-radius: 16px; background: var(--input-bg); border: 1px solid var(--border-2); transition: box-shadow .25s, border-color .25s; }
.qs-in:focus-within { border-color: color-mix(in srgb, var(--acc2) 70%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc1) 12%, transparent); }
.qs-in > .ic { width: 22px; height: 22px; color: var(--muted); flex: 0 0 22px; }
.qs-in input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; height: 50px; font-size: 16.5px; padding: 0; color: var(--text); outline: none; }
.qs-ex { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.qs-ex button { border: 0; background: rgba(var(--ink), .05); color: var(--muted); padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; font-family: inherit; } .qs-ex button:hover { color: var(--text); background: rgba(var(--ink), .1); }
.qs-list { display: grid; gap: 10px; }
.qs-r { display: grid; grid-template-columns: 42px 1fr 90px; gap: 14px; align-items: center; padding: 14px 16px; text-align: left; color: var(--text); font: inherit; cursor: pointer; border-left: 3px solid var(--c); transition: transform .2s var(--ease), border-color .2s; animation: reveal .45s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.qs-r:hover { transform: translateX(4px); border-color: var(--c); }
.qs-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.qs-m { min-width: 0; } .qs-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.qs-b { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c); }
.qs-sav { color: #4ADE80; font-weight: 800; }
.qs-tt { display: block; font-size: 14.5px; margin: 3px 0 4px; } .qs-m p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.qs-sc { height: 6px; border-radius: 6px; background: rgba(var(--ink), .06); overflow: hidden; } .qs-sc i { display: block; height: 100%; background: var(--c); border-radius: 6px; }

/* ---------- lecciones aprendidas ---------- */
.ll-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 26px 28px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, rgba(34,197,94,.18), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(34,211,238,.12), transparent 60%), var(--panel); }
.ll-hero-m small { display: flex; gap: 6px; align-items: center; color: #4ADE80; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } .ll-hero-m small .ic { width: 15px; height: 15px; }
.ll-total { display: block; font-size: clamp(42px, 5.2vw, 64px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 8px 0 6px; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #86EFAC, #22C55E 45%, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ll-hero-s { color: var(--muted); font-size: 13.5px; } .ll-hero-s b { color: var(--text); }
.ll-split { display: flex; height: 10px; border-radius: 10px; overflow: hidden; margin: 18px 0 10px; gap: 2px; background: rgba(var(--ink), .06); } .ll-split i { transition: width .8s var(--ease); }
.ll-types { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .ll-types span { display: inline-flex; gap: 6px; align-items: center; } .ll-types i { width: 10px; height: 10px; border-radius: 3px; } .ll-types b { color: var(--text); margin-left: 2px; }
.ll-hero-c { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; }
.ll-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 16px; }
.ll-catw { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; }
.ll-cl { display: grid; gap: 6px; }
.ll-ci { display: grid; grid-template-columns: 10px 1fr 30px 70px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(var(--ink), .03); color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: all .2s var(--ease); }
.ll-ci:hover { color: var(--text); transform: translateX(3px); } .ll-ci.on { border-color: var(--c); color: var(--text); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ll-ci i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .ll-ci em { font-style: normal; color: var(--dim); text-align: right; } .ll-ci b { text-align: right; color: var(--text); }
.ll-ta { display: grid; grid-template-columns: 22px 28px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; }
.ll-rk { font-weight: 800; color: var(--dim); text-align: center; } .ll-ta b { font-size: 13px; } .ll-ta i { display: block; height: 5px; border-radius: 5px; background: rgba(var(--ink), .06); margin-top: 4px; overflow: hidden; }
.ll-ta i em { display: block; height: 100%; background: linear-gradient(90deg, #22C55E, #22D3EE); border-radius: 5px; } .ll-ta > span:last-child { text-align: right; font-weight: 800; font-size: 13px; } .ll-ta small { display: block; font-weight: 500; color: var(--dim); font-size: 11px; }
.ll-imp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ll-imp > span { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(var(--ink), .05); font-size: 12px; color: var(--muted); }
.ll-imp .ic { width: 14px; height: 14px; } .ll-imp b { color: var(--text); } .ll-imp.in { margin: 0; }
.ll-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ll-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; text-align: left; color: var(--text); font: inherit; cursor: pointer; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; animation: reveal .5s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.ll-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.ll-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--c) 70%, transparent); }
.ll-c-top { display: flex; justify-content: space-between; align-items: center; }
.ll-c-cat { display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 800; color: var(--c); text-transform: uppercase; letter-spacing: .04em; } .ll-c-cat .ic { width: 13px; height: 13px; }
.ll-c-t { font-size: 15.5px; line-height: 1.3; }
.ll-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ll-c-meta { display: flex; gap: 14px; font-size: 11.5px; color: var(--dim); } .ll-c-meta span { display: inline-flex; gap: 5px; align-items: center; } .ll-c-meta .ic { width: 13px; height: 13px; }
.ll-c-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.ll-imps { display: flex; gap: 4px; color: var(--muted); } .ll-imps i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(var(--ink), .05); } .ll-imps .ic { width: 13px; height: 13px; }
.ll-sav { margin-left: auto; font-weight: 800; color: #4ADE80; font-size: 14px; } .ll-c-foot .pill { margin-left: 2px; } .ll-c-foot .ll-sav + .pill { margin-left: 0; }
.ll-c-foot > .pill:only-of-type { margin-left: auto; }
.ll-c-st { position: absolute; right: 16px; top: 38px; display: none; }

/* ---------- RCA ---------- */
.rc-list { display: grid; gap: 10px; }
.rc-row { display: grid; grid-template-columns: 44px 1fr 74px 190px; gap: 16px; align-items: center; padding: 14px 16px; text-align: left; color: var(--text); font: inherit; cursor: pointer; border-left: 3px solid var(--c); transition: transform .2s var(--ease); animation: reveal .45s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.rc-row:hover { transform: translateX(4px); }
.rc-k { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.rc-m { min-width: 0; } .rc-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; } .rc-kl { color: var(--c); font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.rc-t { display: block; font-size: 14.5px; margin: 3px 0; } .rc-m p { margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-risk { display: grid; place-items: center; height: 54px; border-radius: 12px; color: #fff; } .rc-risk b { font-size: 20px; line-height: 1; } .rc-risk small { font-size: 10px; opacity: .85; text-transform: uppercase; }
.rc-risk.blue { background: #2563EB; } .rc-risk.green { background: #16A34A; } .rc-risk.yellow { background: #CA8A04; } .rc-risk.red { background: #DC2626; }
.rc-st { display: grid; gap: 6px; justify-items: start; } .rc-flow { display: flex; gap: 3px; } .rc-flow i { width: 26px; height: 5px; border-radius: 3px; background: rgba(var(--ink), .08); } .rc-flow i.on { background: var(--c); }
.rf-flow { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.rf-flow button { display: inline-flex; gap: 6px; align-items: center; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--border-2); background: rgba(var(--ink), .03); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rf-flow button i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--ink), .08); font-style: normal; font-size: 11px; }
.rf-flow button.on { color: #fff; background: var(--c); border-color: transparent; } .rf-flow button.on i { background: rgba(0,0,0,.25); }
.m6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.m6-b label { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 5px; } .m6-b .ic { width: 14px; height: 14px; color: var(--acc2); }
.fb-wrap { border-radius: 16px; background: rgba(var(--ink), .025); border: 1px solid var(--border); padding: 10px; margin-bottom: 12px; overflow-x: auto; }
.fb-svg { width: 100%; min-width: 760px; height: auto; display: block; }
.fb-sp { stroke: var(--text); stroke-width: 4; stroke-linecap: round; opacity: .75; } .fb-ar { fill: none; stroke: var(--text); stroke-width: 3; opacity: .75; }
.fb-b { stroke: var(--muted); stroke-width: 2.5; opacity: .7; } .fb-b.hot { stroke: #FF3B4E; opacity: 1; }
.fb-lb { fill: var(--panel-solid); stroke: var(--border-2); } .fb-lb.hot { stroke: #FF3B4E; } .fb-lt { fill: var(--text); font-weight: 800; font-size: 13px; }
.fb-c { stroke: var(--dim); stroke-width: 1.2; } .fb-c.hot { stroke: #FF6B7A; stroke-width: 2; }
.fb-ct { fill: var(--muted); font-size: 11.5px; } .fb-ct.hot { fill: #FF8A96; font-weight: 800; }
.fb-hd { fill: color-mix(in srgb, #FF3B4E 18%, var(--panel-solid)); stroke: #FF3B4E; } .fb-hl { fill: #FF8A96; font-weight: 800; font-size: 10.5px; letter-spacing: .1em; } .fb-ht { fill: var(--text); font-size: 12px; font-weight: 600; }
.top-c button.on { background: linear-gradient(135deg, #FF3B4E, #F97316); }
.why-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.why-g > .empty { grid-column: 1 / -1; padding: 26px !important; }
.why-col { padding: 14px; border-radius: 16px; background: rgba(var(--ink), .03); border: 1px solid var(--border); }
.why-h { margin-bottom: 10px; } .why-h span { display: block; font-size: 11px; font-weight: 800; color: #FF8A96; text-transform: uppercase; letter-spacing: .06em; } .why-h b { font-size: 14px; }
.why-s { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 8px; position: relative; }
.why-s:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -8px; width: 2px; background: linear-gradient(180deg, var(--acc2), transparent); }
.why-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-weight: 800; font-size: 12px; }
.why-s > div { display: grid; gap: 4px; } .why-s input { height: 34px; } .why-s input[data-w=because] { border-style: dashed; }
.act-t { min-width: 860px; } .act-t td { padding: 6px 8px !important; } .act-t input, .act-t select { height: 36px; }
.apv-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.apv { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; border: 1px dashed var(--border-2); transition: all .3s var(--ease); }
.apv.on { border-style: solid; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.07); }
.apv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--ink), .05); color: var(--muted); } .apv.on .apv-ic { background: #22C55E; color: #fff; }
.apv small { font-size: 11px; font-weight: 800; color: var(--muted); } .apv > div { display: grid; gap: 4px; } .apv input { height: 32px; font-size: 12.5px; }

/* ---------- planes de acción ---------- */
.ac-top .card { padding-bottom: 12px; }
#acOw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 26px; }
.ac-ow { display: grid; grid-template-columns: 28px 150px 1fr 120px; gap: 10px; align-items: center; font-size: 12.5px; }
.ac-ow b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-ow > span { color: var(--muted); text-align: right; }
.ac-ow i { display: flex; height: 8px; border-radius: 8px; background: rgba(var(--ink), .05); overflow: hidden; } .ac-ow i em, .ac-lg i { display: block; height: 100%; }
.ac-ow .d, .ac-lg .d { background: #22C55E; } .ac-ow .o, .ac-lg .o { background: #F59E0B; } .ac-ow .x, .ac-lg .x { background: #FF3B4E; }
.ac-lg { display: inline-flex; gap: 6px; align-items: center; } .ac-lg i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.kb { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.kb-col { border-radius: 18px; background: rgba(var(--ink), .025); border: 1px solid var(--border); padding: 12px; min-height: 300px; transition: background .2s, border-color .2s; }
.kb-col.over { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.kb-h { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; padding: 2px 4px; } .kb-h i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.kb-h span { margin-left: auto; font-weight: 800; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(var(--ink), .07); }
.kb-l { display: grid; gap: 8px; max-height: 640px; overflow: auto; padding-right: 2px; }
.kb-card { padding: 12px; border-radius: 13px; background: var(--panel); border: 1px solid var(--border); cursor: grab; display: grid; gap: 6px; transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; box-shadow: 0 8px 20px -14px rgba(0,0,0,.6); }
.kb-card:hover { transform: translateY(-2px); border-color: var(--border-2); } .kb-card.drag { opacity: .4; }
.kb-card.late { border-color: rgba(255,59,78,.45); box-shadow: inset 3px 0 0 #FF3B4E; }
.kb-card > b { font-size: 13px; line-height: 1.35; } .kb-card > small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-t { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.kb-src { font-size: 10.5px; font-weight: 800; color: var(--c); padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--c) 13%, transparent); cursor: pointer; white-space: nowrap; }
.kb-f { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); } .kb-f .q-av { width: 22px; height: 22px; flex-basis: 22px; font-size: 9px; }
.kb-due { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; } .kb-due .ic { width: 12px; height: 12px; } .kb-due.late { color: #FF6B7A; font-weight: 800; } .kb-due.soon { color: #FBBF24; font-weight: 700; }
.kb-mv { display: none; gap: 4px; flex-wrap: wrap; } .kb-card:hover .kb-mv { display: flex; }
.kb-mv button { border: 1px solid var(--border-2); background: rgba(var(--ink), .04); color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px; cursor: pointer; } .kb-mv button:hover { color: var(--text); }
.kb-empty { padding: 28px 10px; text-align: center; color: var(--dim); font-size: 12px; border: 1px dashed var(--border-2); border-radius: 12px; }

/* ---------- FMEA ---------- */
.fm-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.fm-tab { display: grid; gap: 6px; padding: 14px 16px; text-align: left; color: var(--text); font: inherit; cursor: pointer; transition: transform .2s var(--ease), border-color .2s; animation: reveal .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.fm-tab:hover { transform: translateY(-2px); } .fm-tab.on { border-color: color-mix(in srgb, var(--acc1) 60%, transparent); box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--acc1) 40%, transparent); }
.fm-tab.add { place-items: center; align-content: center; border-style: dashed; color: var(--muted); text-align: center; min-height: 130px; } .fm-tab.add .ic { width: 26px; height: 26px; }
.fm-tab-h { display: flex; gap: 8px; align-items: center; } .fm-tab-h .pill { margin-left: auto; }
.fm-kind { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--grad-brand); color: #fff; }
.fm-tab-k { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; } .fm-tab-k span { display: grid; font-size: 10.5px; color: var(--dim); text-align: center; } .fm-tab-k b { font-size: 16px; color: var(--text); }
.r1 { color: #4ADE80 !important; } .r2 { color: #FBBF24 !important; } .r3 { color: #FB923C !important; } .r4 { color: #FF4D5E !important; }
.fm-info { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1fr auto; gap: 16px; align-items: center; margin-bottom: 16px; }
.fm-info small { display: block; font-size: 11px; color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .fm-info b { font-size: 13px; }
.fm-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.pa-svg { width: 100%; height: auto; } .pa-v { fill: var(--text); font-size: 11px; font-weight: 800; } .pa-l { fill: var(--dim); font-size: 10.5px; }
.pa-g rect { transform-origin: bottom; transform-box: fill-box; animation: barUp .8s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.fm-tw { max-height: 640px; overflow: auto; }
.fm-t { min-width: 2100px; font-size: 12.5px; } .fm-t td { vertical-align: top; } .fm-t thead th { position: sticky; top: 0; background: var(--panel-solid); z-index: 1; }
.fm-t tr.grp th { top: 0; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text); background: color-mix(in srgb, var(--acc1) 14%, var(--panel-solid)); }
.fm-t thead tr:nth-child(2) th { top: 33px; }
.fm-t.editing td { padding: 6px 5px !important; } .fm-t.editing textarea { min-width: 150px; font-size: 12px; } .fm-t.editing input.sc { width: 58px; text-align: center; font-weight: 800; padding: 0 4px; }
.fm-t.editing input[data-k=owner] { min-width: 130px; } .fm-t.editing input[type=date] { min-width: 140px; }
.fm-t tr.invalid td { background: rgba(255,59,78,.08); }
.scb { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-weight: 800; background: rgba(var(--ink), .06); }
.scb.r4 { background: rgba(255,59,78,.18); } .scb.r3 { background: rgba(251,146,60,.16); } .scb.r2 { background: rgba(251,191,36,.14); } .scb.r1 { background: rgba(34,197,94,.12); }
.rpn-c b { font-size: 15px; font-weight: 800; }
.ap-b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; box-shadow: 0 0 12px -2px var(--c); }

@media (max-width: 1200px) {
  .esc-grid, .ll-grid, .fm-grid, .ll-hero { grid-template-columns: 1fr; }
  .qf-g.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qf-g.g4 .span4 { grid-column: span 2; }
  .apv-g, .m6 { grid-template-columns: 1fr 1fr; } #acOw { grid-template-columns: 1fr; } .fm-info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .qf-g.g2, .qf-g.g3, .tp-g, .tp-cats, .tp-2, .why-g, .apv-g, .m6, .tp-sav { grid-template-columns: 1fr; }
  .qf-g .span2, .qf-g .span3 { grid-column: auto; } .rc-row { grid-template-columns: 40px 1fr; } .rc-risk, .rc-st { display: none; }
  .dc-st, .dc-stage-f { grid-template-columns: 1fr; } .ll-catw { grid-template-columns: 1fr; } .qs-r { grid-template-columns: 36px 1fr; } .qs-sc { display: none; }
}
.input-wrap.sm input, .pv-bar .input-wrap input { width: 100%; height: 36px; padding: 0 12px 0 36px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border-2); color: var(--text); font: inherit; font-size: 13px; outline: none; min-width: 240px; }
.pv-bar .input-wrap input { height: 40px; padding-left: 40px; }
.input-wrap.sm input:focus, .pv-bar .input-wrap input:focus { border-color: color-mix(in srgb, var(--acc2) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc1) 14%, transparent); }
body:has(.q-sheet-bg.show) #aiFab { opacity: 0; pointer-events: none; }
.act-t td:first-child { width: 36%; min-width: 280px; } .act-t td:nth-child(2) { width: 130px; } .act-t td:nth-child(6) { width: 130px; }
.ac-top > .card { width: 100%; display: block; } .ac-ow b { font-family: var(--font); } .ac-ow { grid-template-columns: 28px 160px minmax(80px, 1fr) 130px; }
.tbl.compact.fm-t { min-width: 2300px; } .fm-t td { white-space: normal; } .fm-t td:nth-child(5), .fm-t td:nth-child(7), .fm-t td:nth-child(14) { min-width: 170px; } .fm-t td:nth-child(16) { white-space: nowrap; }
.fm-top { display: grid; gap: 8px; margin-top: 16px; } .fm-top > div { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(var(--ink), .03); font-size: 12.5px; } .fm-top small { display: block; color: var(--dim); } .fm-top em { font-style: normal; font-weight: 800; }
#dcCats { padding: 0 20px; }
.tp-sav b + span { margin-left: 8px; }
.kb-f > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }

/* camiones del mapa: más grandes + radar "aquí estoy" */
.lg-truck { --ping: #FF2BD6; }
.lg-ribs { stroke: color-mix(in srgb, var(--tc) 45%, transparent); stroke-width: .8; fill: none; }
.lg-win { fill: rgba(186, 230, 253, .9); }
.lg-trailer { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.lg-ring { fill: color-mix(in srgb, var(--ping) 22%, transparent); stroke: var(--ping); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: lgPing 2.4s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
@keyframes lgPing { 0% { transform: scale(.4); opacity: .95; } 80% { opacity: .05; } 100% { transform: scale(3.1); opacity: 0; } }
.lg-pin-dot { fill: var(--ping); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px var(--ping)); }
.lg-pin-halo { fill: var(--ping); opacity: .35; transform-box: fill-box; transform-origin: center; animation: lgPin 1.2s ease-in-out infinite; }
@keyframes lgPin { 50% { transform: scale(1.6); opacity: .08; } }
.lg-pin-stem { stroke: var(--ping); stroke-width: 2; stroke-linecap: round; }
.lg-truck.sel { --ping: #FACC15; }
.lg-truck:hover .lg-pin-dot { r: 6.5; }

/* matriz de riesgo con transparencia (estilo pirámide) */
.rc.blue { --mc: #3B82F6; } .rc.green { --mc: #22C55E; } .rc.yellow { --mc: #FACC15; } .rc.red { --mc: #FF3B4E; }
.risk-matrix td.rc { opacity: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 42%, transparent), color-mix(in srgb, var(--mc) 14%, transparent)) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mc) 85%, transparent); }
.risk-matrix td.rc.pick:hover { box-shadow: inset 0 0 0 2px var(--mc), 0 0 18px -4px var(--mc); }
.risk-matrix td.rc.on { box-shadow: inset 0 0 0 2.5px var(--mc), 0 0 0 2px var(--text), 0 0 26px -4px var(--mc); }
.risk-matrix td.rc i { background: var(--mc); color: #0B1020; box-shadow: 0 0 14px -2px var(--mc); }
.risk-matrix td.rc:has(i:not(.dot)) { animation: rcHot 2s ease-in-out infinite; }
@keyframes rcHot { 50% { box-shadow: inset 0 0 0 1.5px var(--mc), 0 0 20px -6px var(--mc); } }
.risk-matrix td.rc i.dot { background: #fff; }
.rm-legend i.blue { background: linear-gradient(180deg, rgba(59,130,246,.55), rgba(59,130,246,.2)) !important; box-shadow: inset 0 0 0 1.5px #3B82F6; }
.rm-legend i.green { background: linear-gradient(180deg, rgba(34,197,94,.55), rgba(34,197,94,.2)) !important; box-shadow: inset 0 0 0 1.5px #22C55E; }
.rm-legend i.yellow { background: linear-gradient(180deg, rgba(250,204,21,.55), rgba(250,204,21,.2)) !important; box-shadow: inset 0 0 0 1.5px #FACC15; }
.rm-legend i.red { background: linear-gradient(180deg, rgba(255,59,78,.55), rgba(255,59,78,.2)) !important; box-shadow: inset 0 0 0 1.5px #FF3B4E; }
.rc-risk.blue, .rf-risk.blue { --mc: #3B82F6; } .rc-risk.green, .rf-risk.green { --mc: #22C55E; } .rc-risk.yellow, .rf-risk.yellow { --mc: #FACC15; } .rc-risk.red, .rf-risk.red { --mc: #FF3B4E; }
.rc-risk, .rf-risk { background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 42%, transparent), color-mix(in srgb, var(--mc) 14%, transparent)) !important; box-shadow: inset 0 0 0 1.5px var(--mc); color: var(--text) !important; }
.rc-risk b { color: var(--mc); }
.static .ln { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
.static .v-ladder { stroke-dashoffset: 0 !important; }

/* ---------- tablas: encabezados de color, transportistas, AM/PM, retrasos ---------- */
.tbl thead th { background: linear-gradient(180deg, color-mix(in srgb, var(--acc1) 16%, transparent), color-mix(in srgb, var(--acc1) 6%, transparent)) !important;
  color: color-mix(in srgb, var(--acc2) 75%, var(--text)) !important; border-bottom: 2px solid color-mix(in srgb, var(--acc1) 55%, transparent) !important; }
.tbl thead th:first-child { border-top-left-radius: 10px; } .tbl thead th:last-child { border-top-right-radius: 10px; }
.nowrap { white-space: nowrap; }
.car-tag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 600; }
.car-ic { width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); flex: 0 0 24px; }
.car-ic .ic { width: 13px; height: 13px; }
.tm { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.tm .ic { width: 12px; height: 12px; flex: 0 0 12px; }
.tm.am { background: rgba(251,191,36,.12); color: color-mix(in srgb, #F59E0B 70%, var(--text)); } .tm.am .ic { color: #F59E0B; }
.tm.pm { background: rgba(129,140,248,.14); color: color-mix(in srgb, #818CF8 70%, var(--text)); } .tm.pm .ic { color: #818CF8; }
tr.late-row td { background: rgba(255,59,78,.09); animation: lateBeat 1.8s ease-in-out infinite; }
tr.late-row td:first-child { box-shadow: inset 3px 0 0 #FF3B4E; }
@keyframes lateBeat { 0%, 100% { background: rgba(255,59,78,.06); } 50% { background: rgba(255,59,78,.2); } }
.late-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: #FF3B4E; animation: lateBadge 1.8s ease-in-out infinite; }
.late-badge .ic { width: 12px; height: 12px; }
@keyframes lateBadge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,78,.55); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(255,59,78,0); transform: scale(1.06); } }

/* waterfall */
.wf-svg { width: 100%; height: auto; display: block; }
.wf-grid { stroke: rgba(var(--ink), .07); } .wf-ax { fill: var(--dim); font-size: 11px; }
.wf-b rect { fill: color-mix(in srgb, var(--c) 30%, transparent); stroke: var(--c); stroke-width: 1.5; transform-box: fill-box; transform-origin: bottom; animation: barUp .8s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.wf-b.tot rect { fill: color-mix(in srgb, var(--c) 45%, transparent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)); }
.wf-b.ref rect { stroke-dasharray: 5 4; }
.wf-v { fill: var(--text); font-size: 12px; font-weight: 800; } .wf-l { fill: var(--muted); font-size: 11.5px; font-weight: 700; } .wf-s { fill: var(--dim); font-size: 10.5px; }
.wf-con { stroke: rgba(var(--ink), .35); stroke-dasharray: 3 3; }

/* ---------- embarque 3D ---------- */
.ship-svg.s3 { width: 100%; height: auto; display: block; border-radius: 18px; }
.s3-grid { stroke: rgba(148,163,184,.07); stroke-width: 1; }
.s3-safety { stroke: #FACC15; stroke-width: 3; stroke-dasharray: 14 8; opacity: .75; }
.s3-park { stroke: rgba(255,255,255,.35); stroke-width: 2; }
.s3-chev { stroke: #FACC15; stroke-width: 3; opacity: .8; }
.s3-stripe { stroke: rgba(148,163,184,.45); stroke-width: 2; fill: none; }
.s3-roll { fill: #CBD5E1; stroke: #475569; stroke-width: 1.5; } .s3-spoke { stroke: #475569; stroke-width: 2; } .s3-spoke.dark { stroke: #052e16; }
.s3-tape { stroke: #F3D9A6; stroke-width: 2.4; } .s3-pt { font-size: 9px; font-weight: 800; fill: #5B3A17; }
.s3-cf { stroke: rgba(60,35,10,.35); stroke-width: .6; }
.s3-tin { stroke: #94A3B8; stroke-width: .8; } .s3-rib { stroke: rgba(71,85,105,.45); stroke-width: 1.2; }
.s3-glass { stroke: rgba(255,255,255,.55); stroke-width: 1; } .s3-rail { stroke: #E2E8F0; stroke-width: 2.4; stroke-linecap: round; }
.s3-brand { font-size: 20px; font-weight: 800; fill: rgba(255,255,255,.9); letter-spacing: .02em; paint-order: stroke; stroke: rgba(15,23,42,.45); stroke-width: 3px; }
.s3-wheel circle { fill: #0B1220; stroke: #334155; stroke-width: 2; } .s3-wheel .hub { fill: #94A3B8; stroke: none; } .s3-wheel .sp { stroke: #0B1220; stroke-width: 2.5; }
.s3-arm { stroke: #F08A2B; stroke-linecap: round; } .s3-arm.d { stroke: #9A4A12; } .s3-arm.l2 { stroke: #F59E3B; } .s3-arm.hl { stroke: #FFD3A1; opacity: .7; transform: translate(-2px, -2px); }
.s3-joint { fill: #1F2937; stroke: #F08A2B; stroke-width: 2.5; } .s3-jcap { fill: #F08A2B; }
.s3-vac { stroke: #22D3EE; stroke-width: 2; stroke-dasharray: 2 3; opacity: .7; }
.s3-lane.run .s3-vac { animation: vac .4s linear infinite; } @keyframes vac { to { stroke-dashoffset: -10; } }
.s3-driver { fill: #F5C9A0; } .s3-helmet { fill: #FACC15; }
.s3-dockname { font-size: 15px; font-weight: 800; fill: #FACC15; letter-spacing: .12em; }
.s3-dlight { fill: #475569; } .s3-dlight.on { fill: #22C55E; filter: drop-shadow(0 0 6px #22C55E); animation: dl 1.4s ease-in-out infinite; } @keyframes dl { 50% { opacity: .5; } }
.s3-lname { font-size: 15px; font-weight: 800; fill: #FB923C; letter-spacing: .1em; } .s3-lsub { font-size: 12.5px; font-weight: 700; fill: #E2E8F0; }
.s3-lst { font-size: 12px; font-weight: 700; } .s3-lst.ok { fill: #4ADE80; } .s3-lst.idle { fill: #94A3B8; }
.s3-tag rect { fill: rgba(15,23,42,.85); stroke: #C8873A; stroke-width: 1.2; } .s3-tag text { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: #FCD9A8; }
.s3-info rect:first-child { fill: rgba(15,23,42,.86); stroke: var(--tc); stroke-width: 1.5; }
.s3-info text { font-size: 11.5px; fill: #CBD5E1; } .s3-info text.b { font-size: 12.5px; font-weight: 800; fill: #F8FAFC; }
.s3-info .trk { fill: rgba(148,163,184,.2); } .s3-info .bar { fill: var(--tc); transition: width .6s var(--ease); }
.s3-wait { font-size: 16px; font-weight: 800; fill: #94A3B8; letter-spacing: .04em; }
.s3-lead { stroke: #FB923C; stroke-width: 2; }

/* mini pirámide en el panel principal */
.em-grid { display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.4fr; gap: 18px; align-items: center; }
.em-pyr .pyr-svg { max-width: 520px; }
.em-list { display: grid; gap: 8px; }
.em-r { display: grid; grid-template-columns: 44px 1fr auto 170px; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(var(--ink), .03); border-left: 3px solid var(--c); }
.em-r.me { background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); animation: emMe 2s ease-in-out infinite; }
@keyframes emMe { 50% { box-shadow: inset 0 0 0 1px var(--c), 0 0 18px -6px var(--c); } }
.em-m { min-width: 0; } .em-m small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-t { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; } .em-t b { color: var(--text); }
.em-card .card-title .btn { margin-left: auto; }
@media (max-width: 1100px) { .em-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   INFRAESTRUCTURA · arquitectura animada y monitor de dispositivos
   ===================================================================== */
.ia-legend, .ia-vendors { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.ia-legend span, .ia-vendors span { display: inline-flex; align-items: center; gap: 6px; }
.ia-legend i { width: 18px; height: 3px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.ia-vendors { padding: 10px 18px 14px; }
.ia-vendors i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ia-vendors .sep { width: 1px; height: 14px; background: var(--border-2); }
.ia-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ia-k { padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); position: relative; overflow: hidden; }
.ia-k::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.ia-k small { color: var(--muted); font-size: 12px; } .ia-k b { display: block; font-size: 24px; font-weight: 800; color: var(--c); margin-top: 2px; }
.ia-card { padding: 10px; overflow: hidden; }
.ia-svg { width: 100%; height: auto; display: block; border-radius: 14px; cursor: default; background: radial-gradient(ellipse at 45% 35%, #132240, #080D19 80%); }
.ia-zone { stroke-width: 1.2; stroke-dasharray: 6 5; }
.ia-zone.plant { fill: rgba(56,189,248,.05); stroke: rgba(56,189,248,.35); }
.ia-zone.edge { fill: rgba(43,196,214,.07); stroke: rgba(43,196,214,.45); }
.ia-zone.ot { fill: rgba(148,163,184,.05); stroke: rgba(148,163,184,.35); }
.ia-zone.dmz { fill: rgba(245,158,11,.06); stroke: rgba(245,158,11,.45); }
.ia-zone.scada { fill: rgba(59,130,246,.08); stroke: rgba(96,165,250,.5); }
.ia-zone.biz { fill: rgba(34,197,94,.06); stroke: rgba(34,197,94,.4); }
.ia-zone-t { font: 800 11px var(--font, system-ui); letter-spacing: .1em; fill: rgba(226,232,240,.8); paint-order: stroke; stroke: rgba(8,13,25,.9); stroke-width: 3px; pointer-events: none; }
.ia-zone-t.plant { fill: #7DD3FC; } .ia-zone-t.edge { fill: #67E8F9; } .ia-zone-t.ot { fill: #CBD5E1; } .ia-zone-t.dmz { fill: #FCD34D; } .ia-zone-t.scada { fill: #93C5FD; } .ia-zone-t.biz { fill: #86EFAC; }
.ia-area { font: 700 11px var(--font, system-ui); fill: #94A3B8; }
.ia-lbl { font: 700 10.5px var(--font, system-ui); fill: #E2E8F0; paint-order: stroke; stroke: rgba(8,13,25,.85); stroke-width: 3px; pointer-events: none; }
.ia-lbl.sm { font-size: 8.5px; font-weight: 600; fill: #CBD5E1; }
.ia-disc { font: 800 11px var(--font, system-ui); fill: #fff; pointer-events: none; }
.ia-cloud ellipse { fill: #4B5B73; stroke: #64748B; stroke-width: 1; }
.ia-cloud ellipse:nth-child(2) { fill: #56677F; }
.ia-cloud-panel { fill: #0F172A; stroke: #2BC4D6; stroke-width: 1.4; }
.ia-cloud-t { font: 800 11px var(--font, system-ui); fill: #E2E8F0; }
.ia-edgeglyph { stroke: #2BC4D6; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.ia-brick { stroke: rgba(0,0,0,.35); stroke-width: 1.2; }
.ia-port { fill: #86EFAC; }
.ia-screen { fill: #0EA5E9; opacity: .85; }
.ia-node[data-id] { cursor: pointer; transition: filter .2s; }
.ia-node[data-id]:hover { filter: brightness(1.25) drop-shadow(0 0 8px var(--c)); }
.ia-dot { fill: var(--c); stroke: rgba(0,0,0,.5); stroke-width: 1; transition: fill .4s; }
.ia-halo { fill: var(--c); opacity: .35; transform-box: fill-box; transform-origin: center; animation: iaHalo 2.4s ease-out infinite; }
@keyframes iaHalo { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.8); opacity: 0; } }
.ia-node.st-disconnected .ia-dot, .ia-node.st-faulted .ia-dot { animation: iaBlink 1s steps(2) infinite; }
.ia-node.st-disconnected .ia-halo, .ia-node.st-faulted .ia-halo { animation-duration: 1s; }
.ia-node.st-disconnected polygon, .ia-node.st-faulted polygon { filter: saturate(.4) brightness(.8); }
.ia-node.st-connecting .ia-dot { animation: iaBlink .5s steps(2) infinite; }
@keyframes iaBlink { 50% { opacity: .25; } }
.ia-wire { fill: none; stroke: var(--c); stroke-width: 2; opacity: .35; stroke-linejoin: round; }
.ia-flow { fill: none; stroke: var(--c); stroke-width: 1.4; stroke-dasharray: 3 9; opacity: .7; animation: iaFlow 1.2s linear infinite; }
.ia-link.t-ot .ia-wire { stroke-width: 1.3; } .ia-link.t-ot .ia-flow { stroke-width: 1; }
.ia-link.dash .ia-wire { stroke-dasharray: 5 5; } .ia-link.dash .ia-flow { display: none; }
@keyframes iaFlow { to { stroke-dashoffset: -12; } }
.ia-packet { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); }
.ia-link.down .ia-wire { stroke: #EF4444; opacity: .75; stroke-dasharray: 4 5; }
.ia-link.down .ia-flow, .ia-link.down .ia-pk { display: none; }
.ia-down { display: grid; gap: 8px; max-height: 330px; overflow: auto; }
.ia-dn { display: grid; grid-template-columns: 12px 120px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.ia-dn i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: iaBlink 1s steps(2) infinite; }
.ia-dn span { color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ia-dn em { font-style: normal; color: var(--c); font-weight: 700; }
.ia-allok { display: flex; gap: 8px; align-items: center; color: #4ADE80; font-weight: 700; padding: 16px 4px; }
.ia-evl { display: grid; gap: 4px; max-height: 330px; overflow: auto; }
.ia-ev { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ia-ev small { display: block; color: var(--muted); } .ia-ev-r { text-align: right; } .ia-ev-r small { color: var(--dim); }
.ia-ev-d { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ia-ev.open { background: rgba(255,59,78,.08); border-radius: 8px; }
.ip-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); white-space: nowrap; }
.ip-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.mini-kpis.k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mk { --c: var(--acc2); }
.nm-vw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nm-v { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.nm-v b { color: var(--c); } .nm-v i { height: 8px; border-radius: 8px; background: rgba(var(--ink), .08); overflow: hidden; } .nm-v em { display: block; height: 100%; background: var(--c); border-radius: 8px; transition: width .6s; } .nm-v span { color: var(--muted); font-size: 12px; }
.nm-tw { max-height: 620px; overflow: auto; }
.nm-t th[data-s] { cursor: pointer; } .nm-t th[data-s]:hover { text-decoration: underline; }
.nm-t tbody tr { cursor: pointer; }
.nm-t th { white-space: nowrap; } .nm-t td { white-space: normal; } .nm-t td:first-child, .nm-t td:nth-last-child(-n+3) { white-space: nowrap; } .nm-t .sub.mono { white-space: nowrap; }
.nm-n { display: flex; gap: 10px; align-items: center; } .nm-n small { display: block; color: var(--dim); font-size: 11px; }
.nm-led { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; transition: background .4s; }
.late-row .nm-led { animation: iaBlink 1s steps(2) infinite; }
.nm-vd { font-weight: 700; color: var(--c); }
.nm-st { color: var(--muted); max-width: 200px; font-size: 12px; } .nm-st.bad { color: #FF6B7A; font-style: italic; }
.nm-up { display: flex; gap: 8px; align-items: center; } .nm-up i { width: 48px; height: 6px; border-radius: 6px; background: rgba(var(--ink), .08); overflow: hidden; } .nm-up em { display: block; height: 100%; background: var(--c); }
.nm-up span { font-variant-numeric: tabular-nums; font-size: 12px; }
.sel-sm { height: 36px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border-2); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; }
.nm-tops { display: grid; gap: 7px; }
.nm-top { display: grid; grid-template-columns: 120px 1fr 130px; gap: 10px; align-items: center; background: none; border: 0; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; padding: 3px 0; }
.nm-top i { height: 9px; border-radius: 9px; background: rgba(var(--ink), .07); overflow: hidden; } .nm-top em { display: block; height: 100%; background: linear-gradient(90deg, #F59E0B, #EF4444); border-radius: 9px; }
.nm-top span { color: var(--muted); text-align: right; }
.nd-k { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.nd-k div { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.nd-k small { color: var(--muted); font-size: 11.5px; } .nd-k b { display: block; color: var(--c); font-size: 18px; }
.nd-h { margin: 16px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nd-g { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 22px; }
.nd-ev td { white-space: nowrap; }
.nd-ev { max-height: 340px; overflow: auto; }
.nd-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.nd-path span { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); font-family: var(--mono); }
.nd-path i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tl { position: relative; padding-bottom: 18px; }
.tl-b { position: relative; height: 22px; border-radius: 6px; background: rgba(34,197,94,.35); overflow: hidden; }
.tl-b i { position: absolute; top: 0; bottom: 0; background: var(--c); min-width: 2px; }
.tl-t span { white-space: nowrap; position: absolute; bottom: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--dim); }
.tl-t span:first-child { transform: none; } .tl-t span:last-child { transform: translateX(-100%); }
.tg { font-family: var(--mono); font-size: 12.5px; background: #fff; color: #1E293B; border-radius: 10px; border: 1px solid var(--border); padding: 8px 0; }
:root[data-theme="dark"] .tg, :root:not([data-theme]) .tg { background: #0F172A; color: #E2E8F0; }
.tg-r { display: flex; gap: 6px; align-items: center; padding: 3px 10px 3px calc(24px + var(--l) * 18px); position: relative; white-space: nowrap; }
.tg-r .tg-n { width: calc(210px - var(--l) * 18px); flex: none; overflow: hidden; text-overflow: ellipsis; }
.tg-r .tg-ar { position: absolute; left: calc(10px + var(--l) * 18px); }
.tg-r:hover { background: rgba(59,130,246,.1); }
.tg-ar { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; opacity: .6; }
.tg-ic { width: 14px; height: 12px; border-radius: 2px; flex: none; }
.tg-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-ic.fold, .tg-ic.open { background: #F59E0B; } .tg-ic.tag { background: #3B82F6; border-radius: 3px; width: 12px; }
.tg-v { color: inherit; opacity: .9; } .tg-v.bad { color: #EF4444; font-style: italic; }
.tg-chk { display: inline-block; width: 13px; height: 13px; border: 1.5px solid #94A3B8; border-radius: 3px; vertical-align: middle; }
.tg-chk.on { background: #3B82F6; border-color: #3B82F6; box-shadow: inset 0 0 0 2px #fff; }
.tg-q { margin-left: 8px; font-size: 10.5px; color: #F59E0B; }
@media (max-width: 1200px) { .ia-kpis, .mini-kpis.k7 { grid-template-columns: repeat(3, 1fr); } .nd-g { grid-template-columns: 1fr; } .nd-k { grid-template-columns: repeat(3, 1fr); } .nm-vw { grid-template-columns: 1fr; } }
#view-netmon .card-title.pad-x { flex-wrap: wrap; gap: 10px; }
#view-netmon .q-filters { justify-content: flex-end; flex: 1; }
#view-netmon .sel-sm { flex: none; width: auto; }
#view-netmon .input-wrap.sm { flex: none; }
.nm-t td, .nm-t th { padding-left: 10px; padding-right: 10px; }

/* --- PLC en riel, robots, variadores y alarmas con palpitación --- */
.mini-kpis.k8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ia-pl { fill: #475569; }
.ia-pl.run, .ia-pl.io0 { fill: #4ADE80; } .ia-pl.io1 { fill: #22C55E; opacity: .7; } .ia-pl.io2 { fill: #FBBF24; animation: iaIo 1.4s steps(2) infinite; }
.ia-pl.mt { fill: #FBBF24; opacity: .35; } .ia-pl.err { fill: #7F1D1D; }
@keyframes iaIo { 50% { opacity: .25; } }
.ia-node.st-faulted .ia-pl.err, .ia-node.st-disconnected .ia-pl.err { fill: #FF3B4E; animation: iaBlink .6s steps(2) infinite; }
.ia-node.st-faulted .ia-pl.run, .ia-node.st-disconnected .ia-pl.run { fill: #475569; }
.ia-node.st-faulted .ia-pl.io0, .ia-node.st-faulted .ia-pl.io1, .ia-node.st-faulted .ia-pl.io2,
.ia-node.st-disconnected .ia-pl.io0, .ia-node.st-disconnected .ia-pl.io1, .ia-node.st-disconnected .ia-pl.io2 { fill: #64748B; animation: none; }
.ia-brand { font: 900 8px var(--font, system-ui); letter-spacing: .04em; pointer-events: none; }
.ia-brand.abb { fill: #FF000F; } .ia-brand.fanuc { fill: #FACC15; }
.ia-arm { animation: iaArm 4.2s ease-in-out infinite; }
.ia-fore { animation: iaFore 4.2s ease-in-out infinite; }
@keyframes iaArm { 0%, 100% { transform: rotate(-10deg); } 45% { transform: rotate(14deg); } 60% { transform: rotate(14deg); } }
@keyframes iaFore { 0%, 100% { transform: rotate(8deg); } 45% { transform: rotate(-12deg); } 60% { transform: rotate(-6deg); } }
.ia-node[data-id^="ROB-ABB-02"] .ia-arm, .ia-node[data-id^="ROB-FANUC-02"] .ia-arm, .ia-node[data-id^="ROB-ABB-02"] .ia-fore, .ia-node[data-id^="ROB-FANUC-02"] .ia-fore { animation-delay: -1.7s; animation-duration: 3.6s; }
.ia-node[data-id^="ROB-FANUC-01"] .ia-arm, .ia-node[data-id^="ROB-FANUC-01"] .ia-fore { animation-delay: -2.6s; }
.ia-belt { stroke: #64748B; stroke-width: 1.2; stroke-dasharray: 4 6; fill: none; animation: iaFlow .6s linear infinite; }
.ia-hmi { animation: iaIo 2.2s steps(2) infinite; }
.ia-node:is(.st-faulted, .st-disconnected, .st-stale, .st-connecting) :is(.ia-arm, .ia-fore, .ia-belt, .ia-hmi) { animation-play-state: paused; }
.ia-node:is(.st-faulted, .st-disconnected, .st-stale) .ia-mov { visibility: hidden; }
.ia-node:is(.st-faulted, .st-disconnected) .ia-hmi { fill: #EF4444; }
/* palpitación de alarma: doble latido, anillos en el piso y globo "!" */
.ia-ring { fill: none; stroke: #FF3B4E; stroke-width: 2.2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.ia-node:is(.st-faulted, .st-disconnected) .ia-ring { animation: iaRing 1.8s ease-out infinite; }
.ia-node:is(.st-faulted, .st-disconnected) .ia-ring.r2 { animation-delay: .9s; }
.ia-node.st-stale .ia-ring { stroke: #F59E0B; animation: iaRing 2.8s ease-out infinite; }
@keyframes iaRing { 0% { opacity: .95; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.9); } }
.ia-node:is(.st-faulted, .st-disconnected) .ia-body { animation: iaBeat 1.8s ease-in-out infinite; }
.ia-node.st-stale .ia-body { filter: saturate(.55) brightness(.85); }
@keyframes iaBeat { 0%, 40%, 100% { filter: drop-shadow(0 0 0 rgba(255,59,78,0)) saturate(.5) brightness(.8); }
  10% { filter: drop-shadow(0 0 9px rgba(255,59,78,.95)) saturate(1) brightness(1.1); } 18% { filter: drop-shadow(0 0 3px rgba(255,59,78,.5)) saturate(.6) brightness(.9); }
  26% { filter: drop-shadow(0 0 12px rgba(255,59,78,1)) saturate(1) brightness(1.15); } }
.ia-node.st-disconnected polygon, .ia-node.st-faulted polygon { filter: none; }
.ia-bang { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.ia-bang circle { fill: #FF3B4E; stroke: #fff; stroke-width: 1.5; } .ia-bang text { font: 900 11px var(--font, system-ui); fill: #fff; }
.ia-node:is(.st-faulted, .st-disconnected) .ia-bang { opacity: 1; animation: iaBang 1.8s ease-in-out infinite; }
.ia-node.st-stale .ia-bang { opacity: 1; } .ia-node.st-stale .ia-bang circle { fill: #F59E0B; }
@keyframes iaBang { 0%, 40%, 100% { transform: scale(1) translateY(0); } 10% { transform: scale(1.25) translateY(-2px); } 18% { transform: scale(1); } 26% { transform: scale(1.3) translateY(-3px); } }
.ia-dn { animation: iaDnBeat 1.8s ease-in-out infinite; }
@keyframes iaDnBeat { 0%, 40%, 100% { background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: none; }
  10% { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 0 1px var(--c), 0 0 18px -4px var(--c); }
  26% { background: color-mix(in srgb, var(--c) 26%, transparent); box-shadow: 0 0 0 1px var(--c), 0 0 22px -4px var(--c); } }
@media (max-width: 1200px) { .mini-kpis.k8 { grid-template-columns: repeat(4, 1fr); } }

.ia-iglogo { fill: #F7931E; }
.ia-sv { font: 900 9px var(--font, system-ui); fill: #fff; letter-spacing: .06em; pointer-events: none; } .ia-sv.sm { font-size: 7px; fill: #93C5FD; }
.ia-dbring { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 1.6; }

/* ---- Menú acordeón por clusters ---- */
.menu-cl { display: flex; flex-direction: column; }
.menu-cl-h { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: color .3s, background .3s; font: inherit; }
.menu-cl-h:hover { color: var(--text); background: rgba(var(--ink), .03); }
.menu-cl-h .menu-icon { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.menu-cl-h .menu-icon .ic { width: 17px; height: 17px; }
.menu-cl-h:hover .menu-icon { transform: rotate(-6deg) scale(1.06); }
.menu-cl-h .menu-text { flex: 1; min-width: 0; }
.menu-cl-h .menu-text b { font-size: 13.5px; line-height: 1.15; }
.menu-cl.open .menu-cl-h, .menu-cl.has-active .menu-cl-h { color: var(--text); }
.menu-cl-n { display: none; font-size: 10.5px; font-weight: 800; color: var(--dim); background: rgba(var(--ink), .06); border-radius: 99px; padding: 2px 7px; }
.menu-cl-chev { display: grid; place-items: center; color: var(--dim); transition: transform .35s var(--ease); }
.menu-cl-chev .ic { width: 15px; height: 15px; }
.menu-cl.open .menu-cl-chev { transform: rotate(180deg); color: var(--text); }
.menu-cl-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.menu-cl.open .menu-cl-b { grid-template-rows: 1fr; }
.menu-cl-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 2px; margin-left: 20px; padding-left: 8px; border-left: 1px dashed rgba(var(--ink), .14); }
.menu-cl-in .menu-item.sub { height: 40px; padding-left: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--ease), color .3s; flex: none; }
.menu-cl.open .menu-cl-in .menu-item.sub { opacity: 1; transform: none; }
.menu-cl.open .menu-cl-in .menu-item.sub:nth-child(2) { transition-delay: .03s; } .menu-cl.open .menu-cl-in .menu-item.sub:nth-child(3) { transition-delay: .06s; }
.menu-cl.open .menu-cl-in .menu-item.sub:nth-child(4) { transition-delay: .09s; } .menu-cl.open .menu-cl-in .menu-item.sub:nth-child(n+5) { transition-delay: .12s; }
.menu-cl-in .menu-item.sub .menu-icon { width: 26px; height: 26px; border-radius: 8px; }
.menu-cl-in .menu-item.sub .menu-text b { font-size: 13px; }
.menu-cl.has-active:not(.open) .menu-cl-h::after { content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--acc1); box-shadow: 0 0 8px var(--acc1); }
@media (max-width: 860px) { .menu-cl-n, .menu-cl-chev { display: none; } .menu-cl { flex-direction: row; } .menu-cl-in { margin-left: 0; border-left: 0; flex-direction: row; } .menu-cl-h { height: 50px; padding: 0 6px; } }

/* ---- mini barra de porcentaje en tablas ---- */
td.pb-td { white-space: nowrap; }
.pbar { display: inline-block; vertical-align: middle; width: 64px; height: 7px; border-radius: 7px; background: rgba(var(--ink), .09); overflow: hidden; margin-right: 8px; }
.pbar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #3B82F6, #60A5FA); box-shadow: 0 0 8px rgba(96,165,250,.5); }
.pbar-v { font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* ---- SPC: tarjetas de característica con ilustración animada ---- */
.spc-chars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.spc-ch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 14px 14px; cursor: pointer; text-align: center; color: var(--muted); border: 1px solid var(--border); transition: border-color .3s, box-shadow .3s, transform .3s, color .3s; font: inherit; }
.spc-ch:hover { transform: translateY(-2px); color: var(--text); }
.spc-ch.on { color: var(--text); border-color: color-mix(in srgb, var(--acc1) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc1) 40%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--acc1) 70%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--acc1) 14%, transparent), transparent 60%), var(--card); }
.spc-ch b { font-size: 14.5px; } .spc-ch small { font-size: 11.5px; color: var(--dim); }
.spc-ch-art { width: 100%; max-width: 230px; height: 92px; }
.spa { width: 100%; height: 100%; overflow: visible; }
.spa-t { font: 800 5px var(--font, system-ui); fill: #0F172A; } .spa-p .spa-t { fill: #94A3B8; }
.spa-lcd { font: 700 7.5px var(--mono, monospace); fill: #22D3EE; }
.spa-beam { transform-origin: 60px 28px; animation: spaTilt 3.2s ease-in-out infinite; }
.spa-pan.l { transform-origin: 24px 28px; animation: spaTiltR 3.2s ease-in-out infinite; }
.spa-pan.r { transform-origin: 96px 28px; animation: spaTiltR 3.2s ease-in-out infinite; }
@keyframes spaTilt { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } }
@keyframes spaTiltR { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-5deg); } }
.spa-read { animation: spaBlink 3.2s ease-in-out infinite; }
@keyframes spaBlink { 0%, 40% { opacity: .55; } 55%, 100% { opacity: 1; } }
.spa-tape { fill: none; stroke: #FACC15; stroke-width: 3; stroke-dasharray: 2 3; transform-origin: 86px 36px; animation: spaSpin 6s linear infinite; }
.spa-tape2 { fill: none; stroke: #FACC15; stroke-width: 3; stroke-dasharray: 60 200; stroke-linecap: round; opacity: .55; transform-origin: 86px 36px; animation: spaSpin 2.4s linear infinite; }
.spa-lsr { transform-origin: 86px 36px; animation: spaSpin 2.4s linear infinite; }
@keyframes spaSpin { to { transform: rotate(360deg); } }
.spa-air circle { fill: #38BDF8; animation: spaAir 2s linear infinite; }
@keyframes spaAir { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(92px); opacity: 0; } }
.spa-out { animation: iaFlow .6s linear infinite; }
.spa-needle { animation: spaNeedle 2.6s ease-in-out infinite; }
@keyframes spaNeedle { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(18deg); } 70% { transform: rotate(4deg); } }

/* ---- campana de Gauss ---- */
.bl-svg { width: 100%; height: auto; display: block; }
.bl-grid { stroke: rgba(var(--ink), .08); }
.bl-ax { font-size: 10.5px; fill: var(--dim); }
.bl-base, .bl-tick { stroke: rgba(148,163,184,.5); }
.bl-a { animation: blIn .8s var(--ease) both; }
.bl-a.a1 { opacity: .95; } .bl-a.a2 { fill: #3B78B8; opacity: .9; animation-delay: .1s; } .bl-a.a3 { fill: #2B4F7E; opacity: .9; animation-delay: .2s; } .bl-a.a4 { fill: #1E2E48; opacity: .9; animation-delay: .3s; }
@keyframes blIn { from { opacity: 0; transform: translateY(8px); } }
.bl-curve { fill: none; stroke: #7CC4FA; stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(124,196,250,.6)); }
.bl-dot { fill: #4ADE80; opacity: .65; } .bl-dot.out { fill: #F87171; opacity: 1; }
.bl-sg { font: 800 13px var(--font, system-ui); fill: #fff; paint-order: stroke; stroke: rgba(8,13,25,.6); stroke-width: 3px; } .bl-sg.mu { font-size: 15px; }
.bl-cov { font: 800 12px var(--font, system-ui); fill: rgba(255,255,255,.85); }
.bl-lim { stroke-width: 1.6; stroke-dasharray: 5 4; } .bl-lim.spec { stroke: #F43F5E; } .bl-lim.tgt { stroke: #FBBF24; }
.bl-limt { font: 800 10.5px var(--font, system-ui); } .bl-limt.spec { fill: #FB7185; } .bl-limt.tgt { fill: #FBBF24; }
.bl-leg, .sc-leg, .hb-leg { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 12px; color: var(--muted); margin-top: 6px; }
.bl-leg span, .hb-leg span, .sc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.bl-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bl-leg .a1 i { background: #60A5FA; } .bl-leg .a2 i { background: #3B78B8; } .bl-leg .a3 i { background: #2B4F7E; } .bl-leg .pt i { background: #4ADE80; border-radius: 50%; width: 8px; height: 8px; } .bl-leg .sp i { background: #F43F5E; height: 3px; }

/* ---- barras horizontales por máquina ---- */
.hb-leg { justify-content: flex-end; margin: -4px 0 10px; } .hb-leg i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.hb { position: relative; padding-bottom: 22px; }
.hb-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.hb-l b { display: block; font-size: 13.5px; } .hb-l small { color: var(--dim); font-size: 11px; }
.hb-bars { display: grid; gap: 5px; position: relative; padding-right: 90px; }
.hb-b { display: flex; align-items: center; gap: 8px; height: 15px; }
.hb-b i { height: 15px; border-radius: 0 9px 9px 0; background: var(--c); box-shadow: 0 0 12px -2px var(--c); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); flex: none; max-width: 100%; }
.hb-b i.go { transform: none; }
.hb-b span { font-weight: 800; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hb-ax { position: absolute; left: 124px; right: 90px; bottom: 0; height: 16px; }
.hb-ax span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--dim); }
.sc-pt { animation: scIn .5s var(--ease) both; transform-box: fill-box; transform-origin: center; } .sc-pt:hover { filter: brightness(1.3) drop-shadow(0 0 5px currentColor); }
@keyframes scIn { from { transform: scale(0); opacity: 0; } }

/* ---- gráfico mariposa ---- */
.bf-pick { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.bf-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 8px; }
.bf-head b { color: var(--c); font-size: 14px; } .bf-head b:last-child { text-align: right; }
.bf-vs { font-size: 11.5px; color: var(--muted); background: rgba(var(--ink), .06); padding: 3px 10px; border-radius: 99px; }
.bf { display: grid; gap: 6px; }
.bf-r { display: grid; grid-template-columns: 1fr 112px 1fr; align-items: center; gap: 8px; }
.bf-c { text-align: center; font-size: 12px; font-weight: 700; line-height: 1.1; } .bf-c small { display: block; font-size: 9.5px; color: var(--dim); font-weight: 500; }
.bf-s { display: flex; align-items: center; gap: 6px; height: 17px; }
.bf-s.l { justify-content: flex-end; }
.bf-s i { height: 15px; flex: none; max-width: calc(100% - 64px); transform: scaleX(0); transition: transform .9s var(--ease); opacity: .55; }
.bf-s.l i { background: var(--ca); border-radius: 9px 0 0 9px; transform-origin: right; }
.bf-s.r i { background: var(--cb); border-radius: 0 9px 9px 0; transform-origin: left; }
.bf-s i.go { transform: none; }
.bf-s.win i { opacity: 1; box-shadow: 0 0 12px -2px currentColor; }
.bf-s span { font-size: 11.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.bf-s.win span { color: var(--text); }
.bf-s.l.win span::before { content: "▲ "; color: #4ADE80; font-size: 9px; } .bf-s.r.win span::after { content: " ▲"; color: #4ADE80; font-size: 9px; }
.spk { display: block; }
.spx-t td { vertical-align: middle; } .spx-t td:first-child { white-space: nowrap; } .spx-t .nm-n small { display: block; } .spx-t th, .spx-t td { padding-left: 10px; padding-right: 10px; }
@media (max-width: 1100px) { .spc-chars { grid-template-columns: 1fr; } }

/* ---- Ejecutivo ---- */
.ex-ks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ex-ks.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-k { padding: 14px 16px 10px; position: relative; overflow: hidden; }
.ex-k::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.ex-k small { color: var(--muted); font-size: 12px; } .ex-k > b { display: block; font-size: 24px; font-weight: 800; color: var(--c); margin: 4px 0 6px; letter-spacing: -.01em; }
.ex-k-f { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; } .ex-k-f em { color: var(--dim); font-style: normal; }
.ex-k-s { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 6px; gap: 6px; }
.ex-st { padding: 2px 8px; border-radius: 99px; font-weight: 700; }
.ex-st.ok { color: #4ADE80; background: rgba(34,197,94,.14); } .ex-st.warn { color: #FBBF24; background: rgba(245,158,11,.14); } .ex-st.bad { color: #F87171; background: rgba(239,68,68,.14); animation: lateBeat 1.8s infinite; } .ex-st.na { color: var(--dim); background: rgba(var(--ink), .06); }
.ex-d { font-size: 11px; font-weight: 800; white-space: nowrap; } .ex-d.up { color: #4ADE80; } .ex-d.dn { color: #F87171; }
.ex-dir { --c: var(--acc1); border-top: 3px solid var(--c); }
.ex-dir-h { display: flex; gap: 18px; align-items: center; margin-bottom: 6px; }
.ex-dir-h small { color: var(--c); font-weight: 800; letter-spacing: .08em; } .ex-dir-h h3 { margin: 2px 0; font-size: 20px; }
.ex-cnt { display: flex; gap: 8px; margin: 8px 0 10px; font-size: 11.5px; font-weight: 700; flex-wrap: wrap; }
.ex-cnt span { padding: 2px 9px; border-radius: 99px; } .ex-cnt .ok { color: #4ADE80; background: rgba(34,197,94,.12); } .ex-cnt .warn { color: #FBBF24; background: rgba(245,158,11,.12); } .ex-cnt .bad { color: #F87171; background: rgba(239,68,68,.12); }
.ex-sc { min-width: 0 !important; } .ex-sc td { vertical-align: middle; } .ex-sc .sub { font-size: 11px; max-width: 280px; }
.ex-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.ex-prog { display: inline-block; width: 90px; height: 7px; border-radius: 7px; background: rgba(var(--ink), .09); overflow: hidden; vertical-align: middle; }
.ex-prog i { display: block; height: 100%; background: var(--c); border-radius: 7px; }
.ex-cx { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 12.5px; } .ex-cx .ex-prog { width: 120px; }
.ex-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ex-link { display: flex; gap: 12px; padding: 14px; align-items: flex-start; border-left: 3px solid var(--c); }
.ex-link .qs-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; }
.ex-link small { color: var(--muted); font-size: 12px; } .ex-link b { display: block; font-size: 20px; color: var(--c); } .ex-link .sub { font-size: 11.5px; }
.ex-col { animation: exCol .7s var(--ease) both; transform-box: fill-box; transform-origin: bottom; }
@keyframes exCol { from { transform: scaleY(0); } }
.ex-form .ex-fh { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.ex-form .ex-fg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ex-form .span-2 { grid-column: span 2; }
.ex-u { color: var(--dim); font-weight: 500; font-size: 10.5px; margin-left: 4px; }
.ex-calc { margin: 16px 0 6px; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--acc2) 45%, transparent); background: color-mix(in srgb, var(--acc2) 6%, transparent); }
.ex-calc > b { display: flex; gap: 6px; align-items: center; font-size: 12.5px; margin-bottom: 8px; }
.ex-calc > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ex-calc small { display: block; color: var(--dim); font-size: 10.5px; } .ex-calc em { font-style: normal; font-weight: 800; font-family: var(--mono); }
@media (max-width: 1200px) { .ex-links, .ex-ks.k4 { grid-template-columns: repeat(2, 1fr); } }

.ex-sc td:nth-child(3), .ex-sc td:nth-child(4) { white-space: nowrap; } .ex-sc td:nth-child(2) { min-width: 210px; }
.ia-link.t-wifi .ia-wire { stroke-dasharray: 3 4; stroke-width: 1.2; }
.ia-link.t-wifi .ia-flow { display: none; }
.ia-wifi { fill: none; stroke: #FBBF24; stroke-width: 1.3; stroke-linecap: round; animation: iaIo 1.6s steps(2) infinite; }
.ia-node:is(.st-faulted, .st-disconnected, .st-stale) .ia-wifi { stroke: #64748B; animation: none; }

/* ---- SPC: botones con ícono pequeño, KPIs protagonistas, interpretación ---- */
.spc-seg button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; padding-bottom: 6px; }
.spc-mini { display: block; width: 52px; height: 30px; opacity: .55; transition: opacity .3s; }
.spc-seg button.on .spc-mini, .spc-seg button:hover .spc-mini { opacity: .9; }
.spa-static, .spa-static * { animation: none !important; }
.spc-mini .spa-read, .spc-mini text { display: none; }
.spc-tiles { gap: 14px; }
.spc-tiles .mk { padding: 18px 18px 16px; border-top: 3px solid var(--c); background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--card); box-shadow: 0 14px 34px -22px var(--c); }
.spc-tiles .mk small { font-size: 12.5px; font-weight: 600; }
.spc-tiles .mk b { font-size: 34px; letter-spacing: -.02em; margin-top: 8px; text-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); }
.spc-tiles .mk b small { font-size: 14px; }
.spi { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 4px; }
.spi-r { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(var(--ink), .08); }
.spi-r:last-child { border-bottom: 0; }
.spi-i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.spi-r b { font-size: 13px; color: var(--text); } .spi-r p { margin: 2px 0 0; font-size: 12.3px; color: var(--muted); line-height: 1.45; }
.seg-mini.spc-seg button { height: auto !important; min-height: 52px; line-height: 1.15; padding: 6px 12px; white-space: nowrap; }
.spc-tiles .mk b { font-size: 30px; white-space: nowrap; }
#view-spc .page-head .actions, #view-spc .head-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---- KPIs agrupados por indicador, mariposa por máquina, dispersión de calidad ---- */
.hb.grp .hb-row { grid-template-columns: 130px 1fr; padding: 12px 0; }
.hb.grp .hb-bars { gap: 6px; padding-right: 120px; }
.hb.grp .hb-b { height: 17px; }
.hb-m { flex: 0 0 34px; font-size: 11px; font-weight: 800; color: var(--c); }
.hb.grp .hb-b i { height: 15px; opacity: .78; }
.hb.grp .hb-b.win i { opacity: 1; box-shadow: 0 0 16px -1px var(--c); }
.hb-best { font-style: normal; color: #4ADE80; font-size: 10.5px; margin-left: 6px; font-weight: 800; }
.hb-worst { font-style: normal; color: #F87171; font-size: 10px; margin-left: 6px; }
.hb.grp .hb-ax { display: none; }
.bf-m .bf-r { grid-template-columns: 1fr 120px 1fr; padding: 4px 0; }
.bf-m .bf-s { height: 22px; } .bf-m .bf-s i { height: 20px; }
.bf-m .bf-c { display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.bf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cm); box-shadow: 0 0 8px var(--cm); margin-bottom: 3px; }
.bf-head b small { font-size: 10px; color: var(--dim); font-weight: 500; }
.qs-spec { fill: rgba(34,197,94,.06); stroke: rgba(34,197,94,.55); stroke-dasharray: 5 4; }
.qs-spt { font-size: 10px; fill: #4ADE80; font-weight: 700; }
.qs-reg { stroke: #F8FAFC; stroke-width: 2; stroke-dasharray: 7 5; opacity: .8; }
.qs-r i { display: inline-block; width: 18px; border-top: 2px dashed #F8FAFC; vertical-align: middle; margin-right: 4px; }
.sc-leg b { color: var(--text); font-weight: 800; margin-left: 2px; }
.qs-msg { margin: 10px 4px 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; border-left: 3px solid var(--acc2); padding-left: 10px; }

/* ---- VSM · análisis ---- */
.vs-an { display: grid; grid-template-columns: 1.1fr .9fr 1.2fr; gap: 16px; }
.vs-cap { display: grid; gap: 12px; }
.vs-cr { display: grid; grid-template-columns: 80px 1fr 60px; gap: 6px 10px; align-items: center; font-size: 12.5px; }
.vs-cr small { grid-column: 2 / 4; color: var(--dim); font-size: 11px; margin-top: -4px; }
.vs-cr b { text-align: right; font-variant-numeric: tabular-nums; }
.vs-tr { position: relative; height: 14px; border-radius: 8px; background: rgba(var(--ink), .07); }
.vs-tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #22C55E, #22D3EE); box-shadow: 0 0 12px -2px #22D3EE; transition: width .8s var(--ease); }
.vs-tr s { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: #F59E0B; box-shadow: 0 0 8px #F59E0B; }
.vs-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.vs-legend i { display: inline-block; width: 14px; height: 8px; border-radius: 4px; margin-right: 6px; vertical-align: middle; } .vs-legend .cap { background: #22C55E; } .vs-legend .dem { width: 3px; height: 12px; background: #F59E0B; }
.vs-stack { display: flex; height: 22px; border-radius: 11px; overflow: hidden; gap: 2px; margin-bottom: 14px; }
.vs-stack i { background: var(--c); min-width: 4px; }
.vs-lt { display: grid; gap: 8px; }
.vs-lt div { display: grid; grid-template-columns: 1fr auto 40px; gap: 10px; align-items: center; font-size: 12.5px; }
.vs-lt span { display: flex; align-items: center; gap: 8px; color: var(--muted); } .vs-lt span i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.vs-lt em { font-style: normal; font-size: 10px; font-weight: 800; color: #22C55E; border: 1px solid #22C55E; border-radius: 6px; padding: 0 4px; }
.vs-lt b { font-variant-numeric: tabular-nums; } .vs-lt small { color: var(--dim); text-align: right; }
@media (max-width: 1300px) { .vs-an { grid-template-columns: 1fr 1fr; } .vs-an > :last-child { grid-column: span 2; } }

/* ---- Exploración de datos: matriz de correlación y modelo lineal ---- */
.cm { display: grid; grid-template-columns: 110px repeat(3, 1fr); gap: 6px; }
.cm-h { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; align-self: end; padding-bottom: 4px; } .cm-h.l { text-align: right; align-self: center; padding: 0 8px 0 0; }
.cm-c { border-radius: 10px; padding: 16px 6px; text-align: center; animation: blIn .6s var(--ease) both; }
.cm-c b { display: block; font-size: 22px; font-weight: 800; color: #fff; } .cm-c small { font-size: 11px; color: rgba(255,255,255,.85); }
.cm-c.d { background: rgba(148,163,184,.12) !important; } .cm-c.d b { color: var(--dim); font-size: 16px; }
.cm-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--muted); } .cm-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.lm-pick { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.lm-eq { font-family: var(--mono); font-size: 13px; background: rgba(var(--ink), .04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; line-height: 1.6; }
.lm-eq b { color: var(--acc2); }
.lm-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.lm-k div { --c: var(--acc2); padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.lm-k small { color: var(--muted); font-size: 11.5px; } .lm-k b { display: block; font-size: 22px; color: var(--c); } .lm-k span { font-size: 11px; color: var(--dim); }
.lm-try { display: grid; gap: 12px; }
.lm-try label { display: grid; grid-template-columns: 1fr 70px; gap: 4px 10px; font-size: 12.5px; font-weight: 700; }
.lm-try label .sub { font-weight: 500; } .lm-try input[type=range] { grid-column: 1; accent-color: var(--acc1); } .lm-try label b { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font-family: var(--mono); }
.lm-out { padding: 12px 14px; border-radius: 12px; background: rgba(var(--ink), .05); border: 1px dashed var(--border-2); }
.lm-out small { color: var(--muted); font-size: 11.5px; display: block; } .lm-out b { font-size: 26px; display: block; } .lm-out span { font-size: 11.5px; color: var(--dim); display: block; } .lm-out em { font-style: normal; font-weight: 700; font-size: 12px; }
/* mariposa estilo "desde el centro" */
.bf2-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 10px; }
.bf2-head b { font-size: 15px; } .bf2-head b small { display: block; font-size: 11px; color: var(--dim); font-weight: 600; } .bf2-head b:last-child { text-align: right; }
.bf2 { display: grid; gap: 7px; }
.bf2-r { display: grid; grid-template-columns: 1fr 104px 1fr; align-items: center; gap: 6px; }
.bf2-c { text-align: center; font-size: 12.5px; font-weight: 800; line-height: 1.1; } .bf2-c small { display: block; font-size: 9.5px; color: var(--dim); font-weight: 500; }
.bf2-s { display: flex; height: 24px; } .bf2-s.l { justify-content: flex-end; }
.bf2-s i { position: relative; height: 24px; display: flex; align-items: center; transform: scaleX(0); transition: transform .9s var(--ease); opacity: .62; }
.bf2-s.l i { background: var(--ca); border-radius: 6px 0 0 6px; transform-origin: right; justify-content: flex-end; }
.bf2-s.r i { background: var(--cb); border-radius: 0 6px 6px 0; transform-origin: left; justify-content: flex-start; }
.bf2-s i.go { transform: none; }
.bf2-s.win i { opacity: 1; box-shadow: 0 0 14px -3px currentColor; }
.bf2-s span { font-size: 11.5px; font-weight: 800; color: #0B1220; padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf2-s.win.l span::before { content: "▲ "; } .bf2-s.win.r span::after { content: " ▲"; }
.bf2-leg { display: flex; gap: 16px; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--muted); } .bf2-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: middle; }

/* ---- Live floor map: AGVs con rumbo, luces, lidar, batería, carga y estado ---- */
.agv-map .aisle-c { animation: aisleFlow 1.6s linear infinite; }
@keyframes aisleFlow { to { stroke-dashoffset: -32; } }
.agv-map .agv-rot { transition: transform .5s var(--ease); }
.agv-map .agv-in { animation: none; }
.agv-map .agv-body { fill: var(--c, #22C55E); stroke: rgba(0,0,0,.4); stroke-width: 1.2; filter: drop-shadow(0 0 7px var(--c, #22C55E)); }
.agv-map .agv.moving .agv-body { animation: none; }
.agv-map .agv-wheel { fill: #0B1220; }
.agv-map .agv-light { fill: #FEF3C7; opacity: .35; transition: opacity .3s; }
.agv-map .agv.moving .agv-light { opacity: 1; filter: drop-shadow(0 0 4px #FDE68A); }
.agv-map .agv-lidar { fill: #0F172A; stroke: #38BDF8; stroke-width: 1; }
.agv-map .agv.moving .agv-lidar { animation: lidarBlink .5s steps(2) infinite; }
@keyframes lidarBlink { 50% { stroke: #0F172A; } }
.agv-map .agv-scan { fill: #38BDF8; opacity: 0; transform-origin: 6px 0; transform-box: view-box; }
.agv-map .agv.moving .agv-scan { opacity: .16; animation: lidarSweep 1.4s ease-in-out infinite alternate; }
@keyframes lidarSweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.agv-map .agv-load { opacity: 0; transform: scale(.4); transform-origin: 0 0; transform-box: view-box; transition: opacity .35s, transform .45s var(--ease); }
.agv-map .agv.loaded .agv-load { opacity: 1; transform: scale(1); }
.agv-map .ld-p { fill: #6B4F33; } .agv-map .ld-c { fill: #C8955F; stroke: var(--load, #7A5530); stroke-width: 1.2; }
.agv-map .agv-bat-bg { fill: rgba(0,0,0,.45); } .agv-map .agv-bat { transition: width .8s, fill .4s; }
.agv-map .agv-tag rect { fill: rgba(11,18,32,.85); stroke: var(--c, #22C55E); stroke-width: 1; }
.agv-map .agv-tag .agv-t { fill: #fff; font-size: 9.5px; }
.agv-map .agv-trail { stroke: var(--c, #22C55E); stroke-width: 6; stroke-linecap: round; opacity: .35; }
.agv-map .agv-trail.fade { opacity: 0; transition: opacity 1.4s ease-out; }
.agv-map .agv-halo { fill: none; stroke: var(--c, #22C55E); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.agv-map .agv.s-parado .agv-halo, .agv-map .agv.s-cargando .agv-halo { animation: iaRing 1.8s ease-out infinite; }
.agv-map .agv.s-parado .agv-halo.h2, .agv-map .agv.s-cargando .agv-halo.h2 { animation-delay: .9s; }
.agv-map .agv.s-parado .agv-body { animation: iaBeat 1.8s ease-in-out infinite; }
.agv-map .agv.s-mantenimiento .agv-body { filter: none; opacity: .75; }
.agv-map .agv-ic { opacity: 0; transition: opacity .3s; }
.agv-map .agv-ic circle { stroke: #fff; stroke-width: 1.2; }
.agv-map .agv-ic.chg circle { fill: #8B5CF6; } .agv-map .agv-ic.chg path { fill: #FDE68A; }
.agv-map .agv-ic.stp circle { fill: #FF3B4E; } .agv-map .agv-ic.stp text { fill: #fff; font-size: 10px; font-weight: 900; text-anchor: middle; }
.agv-map .agv-ic.mnt circle { fill: #64748B; } .agv-map .agv-ic.mnt path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.agv-map .agv.s-cargando .agv-ic.chg, .agv-map .agv.s-parado .agv-ic.stp, .agv-map .agv.s-mantenimiento .agv-ic.mnt { opacity: 1; }
.agv-map .agv.s-cargando .agv-ic.chg { animation: iaBang 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.agv-map .agv.s-cargando .agv-bat { animation: batFill 1.6s ease-in-out infinite; }
@keyframes batFill { 50% { opacity: .45; } }
.agv-map .term-badge.on { animation: iaBang 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.agv-map .dock.charge g { color: #A78BFA; animation: iaIo 2s steps(2) infinite; }
.agv-map .mblock.run .mb-body { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 45%, transparent)); }
.agv-map .agv-scan { transform-box: fill-box; transform-origin: 0% 50%; }
.agv-map .agv-load { transform-box: fill-box; transform-origin: 50% 50%; }
.agv-map .agv-ic { transform-box: fill-box; transform-origin: center; }
.pyr-tm { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pyr-tm .s0, .pyr-tl .s0 { fill: #FF6B7A; } .pyr-tm .s1, .pyr-tl .s1 { fill: #FBBF24; } .pyr-tm .s2, .pyr-tl .s2 { fill: #94A3B8; }
.pyr-tm .sep { fill: var(--dim); font-weight: 500; } .pyr-tm .t0 { fill: #4ADE80; }
.pyr-tl { font-size: 10.5px; fill: var(--dim); font-weight: 700; letter-spacing: .03em; }
/* mariposa con colores translúcidos */
.bf2-s i { opacity: 1 !important; background: color-mix(in srgb, var(--cc) 26%, transparent) !important; border: 1px solid color-mix(in srgb, var(--cc) 70%, transparent); }
.bf2-s.l i { --cc: var(--ca); } .bf2-s.r i { --cc: var(--cb); }
.bf2-s.win i { background: color-mix(in srgb, var(--cc) 50%, transparent) !important; border-color: var(--cc); box-shadow: 0 0 16px -4px var(--cc), inset 0 0 12px -6px #fff; }
.bf2-s span { color: var(--text) !important; }
.bf2-s.win span { color: #fff !important; }
.bf2-s.win.l span::before, .bf2-s.win.r span::after { color: #4ADE80; }

/* ---- ejecutivo: barras translúcidas, tarjetas con el mismo estilo ---- */
.ex-col { fill-opacity: .34; stroke-width: 1.4; stroke-opacity: .95; transition: fill-opacity .25s; }
.ex-col:hover { fill-opacity: .6; }
.ex-k, .ex-link { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), var(--panel); }
.ex-k::before, .ex-link::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); border-radius: 3px 0 0 3px; box-shadow: 0 0 12px var(--c); }
.ex-link { border-left: 1px solid var(--border); position: relative; overflow: hidden; padding: 16px 18px; }
.ex-link b { font-size: 24px; font-weight: 800; text-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.ex-k > b { text-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.ex-link .qs-ico { background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); box-shadow: 0 8px 22px -10px var(--c); }

/* ---- matriz de dispersión y comparación de modelos ---- */
.sp-svg { max-width: 760px; margin: 0 auto; }
.sp-cell { fill: rgba(var(--ink), .03); stroke: var(--border); }
.sp-bar { fill: rgba(167,139,250,.35); stroke: #A78BFA; stroke-width: 1; }
.sp-lbl { font-size: 12px; font-weight: 800; fill: var(--text); } .sp-r { font-size: 11px; font-weight: 800; }
.mb { margin-bottom: 16px; }
.ml-wait { display: flex; align-items: center; gap: 12px; padding: 30px; color: var(--muted); justify-content: center; }
.ml-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(var(--ink), .1); border-top-color: var(--acc1); animation: spin .8s linear infinite; }
.ml-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ml-k div { --c: var(--acc2); padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.ml-k small { color: var(--muted); font-size: 11.5px; } .ml-k b { display: block; font-size: 18px; color: var(--c); }
.ml-bars, .ml-pca { display: grid; gap: 8px; }
.ml-b { display: grid; grid-template-columns: 190px 1fr 110px 60px; gap: 10px; align-items: center; font-size: 12.5px; }
.ml-pca .ml-b { grid-template-columns: 110px 1fr; }
.ml-b > span { color: var(--muted); font-weight: 700; }
.ml-b i { position: relative; height: 22px; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--c) 28%, transparent); border: 1px solid color-mix(in srgb, var(--c) 75%, transparent); display: flex; align-items: center; justify-content: flex-end; min-width: 44px; animation: mlGrow .9s var(--ease) both; transform-origin: left; }
.ml-b.win i { background: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 0 18px -4px var(--c); }
.ml-b.win > span { color: var(--text); } .ml-b.win > span::after { content: "  ▲ best"; color: #4ADE80; font-size: 10.5px; }
.ml-b em { font-style: normal; font-weight: 800; font-size: 11.5px; padding: 0 8px; color: #fff; }
.ml-b > b { font-family: var(--mono); font-size: 12px; text-align: right; } .ml-b > small { color: var(--dim); text-align: right; }
@keyframes mlGrow { from { transform: scaleX(0); } }
.ml-g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.ml-g > div { padding: 8px; border-radius: 12px; background: rgba(var(--ink), .03); border: 1px solid var(--border); } .ml-g b { font-size: 12px; }
.ml-ld { min-width: 0 !important; margin-top: 10px; } .ml-ld td, .ml-ld th { text-align: center; font-family: var(--mono); }
.ml-reco { display: flex; gap: 14px; margin-top: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--acc1) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--acc1) 12%, transparent), transparent 70%); }
.ml-reco > span { color: var(--acc1); } .ml-reco p { margin: 4px 0 8px; font-size: 13px; color: var(--muted); line-height: 1.5; } .ml-reco p b { color: var(--text); }
.ml-reco ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .ml-reco li b { color: var(--text); }
@media (max-width: 1200px) { .ml-g { grid-template-columns: repeat(2, 1fr); } .ml-b { grid-template-columns: 140px 1fr 90px; } .ml-b > small { display: none; } }

/* ---- cambio de vista sin parpadeos ni saltos ---- */
.view.loading { visibility: hidden; }
.view.active.loading .reveal { animation: none !important; }
body.vloading::after { content: ""; position: fixed; left: 0; top: 0; height: 3px; width: 40%; z-index: 999; background: linear-gradient(90deg, transparent, var(--acc1), var(--acc2), transparent); animation: vload 1s ease-in-out infinite; }
@keyframes vload { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
html { scroll-behavior: auto !important; }
.kx-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.kx-k { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink), .03); display: flex; flex-direction: column; gap: 4px; }
.kx-k small { color: var(--muted); font-size: 11.5px; } .kx-k b { font-size: 18px; } .kx-k span { font-size: 11.5px; color: var(--dim); }
.kx-cm { display: grid; gap: 3px; }
.kx-cm .cm-h { font-size: 10px; writing-mode: horizontal-tb; } .kx-cm > .cm-h:not(.l) { transform: rotate(-35deg); transform-origin: left bottom; white-space: nowrap; height: 44px; text-align: left; padding-left: 8px; }
.kx-cm .cm-h.l { font-size: 11px; }
.kx-c { border-radius: 6px; padding: 9px 2px; text-align: center; font-size: 11px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; animation: blIn .5s var(--ease) both; }
.kx-c.d { background: rgba(148,163,184,.1) !important; }
.kx-bars .ml-b { grid-template-columns: 160px 1fr 96px 50px; }
.kx-g { grid-template-columns: repeat(2, 1fr); }
.kx-cm { margin-top: 34px; }

/* AGVs: sin aparecer desde la esquina, más compactos estacionados en los muelles */
.agv-map .agv.init { transition: none !important; }
.agv-map .agv.init .agv-trail { opacity: 0; }
.agv-map .agv-sc { transition: transform .4s var(--ease); }
.agv-map .agv.docked .agv-sc { transform: scale(.72); }
.agv-map .agv.docked .agv-tag { transform: translate(0, 9px); }
.agv-map .agv.docked .agv-ic { transform: translate(-3px, 9px) scale(.85); }
.agv-map .agv.s-cargando .agv-halo { animation: none !important; opacity: 0; }
.agv-map .agv.s-cargando .agv-body { filter: drop-shadow(0 0 5px #8B5CF6); }
.agv-map .agv.docked .agv-bat-bg, .agv-map .agv.docked .agv-bat { transform: translate(0, -2px); }
/* camión: estado con color */
.lg-ph { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; white-space: nowrap; --c: #94A3B8; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.lg-ph.arriving { --c: #22D3EE; } .lg-ph.loading { --c: #22C55E; animation: iaIo 1.6s steps(2) infinite; } .lg-ph.departing { --c: #FBBF24; }
.lg-ph.loading { animation: none; box-shadow: 0 0 12px -3px #22C55E; }
/* almacén de cliente más grande */
.lg-wh { stroke-width: 1.2; filter: drop-shadow(0 0 6px rgba(139,92,246,.7)); }
.lg-wh-ln { stroke: rgba(237,233,254,.6); stroke-width: .9; }
/* área bajo las líneas */
.ln-area { animation: blIn 1s var(--ease) both; }
/* pirámide más grande, panel derecho más angosto */
.esc-grid { grid-template-columns: 2.2fr 1fr; }
.esc-grid .esc-roster .sub, .esc-grid .esc-roster small { font-size: 11px; }
.esc-grid .pyr-svg { max-width: 100%; display: block; margin: 0 auto; }
.kx-two { display: grid; gap: 3px; } .kx-two i { height: 15px !important; } .kx-two i.b0 { background: rgba(148,163,184,.18) !important; border-color: rgba(148,163,184,.5) !important; box-shadow: none !important; }
.kx-two i.b0 em { color: var(--muted); }
.kx-up { grid-template-columns: 160px 1fr 70px 56px !important; } .kx-up > b { color: #4ADE80; }
.kx-l0 { color: #94A3B8; } .kx-l1 { color: var(--acc2); }
.kx-reco { margin: 12px 0; padding: 12px 14px; } .kx-reco p { margin: 0; }
.kx-efs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kx-ef { padding: 12px; border-radius: 12px; background: rgba(var(--ink), .03); border: 1px solid var(--border); }
.kx-ef h5 { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.kx-eb { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 7px; font-size: 11.5px; }
.kx-eb span { color: var(--muted); } .kx-eb small { display: none; }
.kx-eb i { height: 18px; border-radius: 0 8px 8px 0; background: rgba(96,165,250,.25); border: 1px solid rgba(96,165,250,.65); display: flex; align-items: center; justify-content: flex-end; animation: mlGrow .8s var(--ease) both; transform-origin: left; }
.kx-eb.best i { background: rgba(34,197,94,.35); border-color: #22C55E; box-shadow: 0 0 12px -4px #22C55E; } .kx-eb.worst i { background: rgba(239,68,68,.3); border-color: #EF4444; }
.kx-eb em { font-style: normal; font-weight: 800; padding: 0 6px; color: #fff; font-size: 11px; }
@media (max-width: 1200px) { .kx-efs { grid-template-columns: repeat(2, 1fr); } }
html, body, .main, .view { overflow-anchor: none; } .seg-mini button { -webkit-user-select: none; user-select: none; }

/* ---- estudio de tiempos y movimientos ---- */
.tm-k { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 6px; }
.tm-k div { padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%); }
.tm-k small { color: var(--muted); font-size: 11.5px; } .tm-k b { display: block; font-size: 22px; color: var(--c); } .tm-k span { font-size: 11px; color: var(--dim); }
.tm-stack { display: flex; height: 34px; border-radius: 10px; overflow: hidden; gap: 2px; }
.tm-stack i { background: color-mix(in srgb, var(--c) 55%, transparent); border-top: 2px solid var(--c); display: flex; align-items: center; justify-content: center; min-width: 3px; animation: mlGrow .9s var(--ease) both; transform-origin: left; }
.tm-stack em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; }
.tm-stack.sm { height: 18px; border-radius: 6px; }
.tm-cls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.tm-cls div { border-left: 3px solid var(--c); padding: 4px 10px; } .tm-cls small { color: var(--muted); font-size: 11.5px; display: block; } .tm-cls b { font-size: 17px; color: var(--c); } .tm-cls span { font-size: 11px; color: var(--dim); margin-left: 6px; }
.tm-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.tm-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: middle; }
.tm-pc { min-width: 0 !important; } .tm-pc td { white-space: nowrap; } .tm-tot td { border-top: 2px solid var(--border-2); }
.tm-sym { vertical-align: middle; } .tm-sym * { fill: color-mix(in srgb, var(--c) 35%, transparent); stroke: var(--c); stroke-width: 1.6; }
.tm-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.tm-bar { display: inline-block; width: 90px; height: 8px; border-radius: 8px; background: rgba(var(--ink), .08); overflow: hidden; vertical-align: middle; } .tm-bar i { display: block; height: 100%; background: var(--c); }
.tm-wh { fill: rgba(var(--ink), .03); stroke: var(--border-2); stroke-dasharray: 5 4; } .tm-wht { font-size: 10.5px; font-weight: 800; fill: var(--dim); letter-spacing: .1em; }
.tm-flow { stroke-linecap: round; animation: blIn .8s var(--ease) both; } .tm-flow:hover { stroke-opacity: .9; }
.tm-zone { fill: rgba(167,139,250,.25); stroke: #A78BFA; stroke-width: 1.5; } .tm-zt { font-size: 11px; font-weight: 800; fill: #fff; } .tm-zs { font-size: 9.5px; fill: var(--muted); }
.tm-dk { display: grid; grid-template-columns: 150px 1fr 70px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.tm-dk small { display: block; color: var(--dim); font-size: 10.5px; } .tm-dk b { text-align: right; font-family: var(--mono); }
.tm-rs { margin-top: 4px; font-family: var(--mono); font-size: 11px; line-height: 1.6; }
@media (max-width: 1300px) { .tm-k { grid-template-columns: repeat(3, 1fr); } .tm-cls { grid-template-columns: repeat(3, 1fr); } }
.tm-g2 > div { min-width: 0; } .tm-pc { width: 100%; }

/* ---- AGV: carriles, semáforos y frenos ---- */
.agv-map .lane { stroke-width: 1.6; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .55; animation: aisleFlow 1.4s linear infinite; }
.agv-map .lane.out { stroke: #38BDF8; } .agv-map .lane.ret { stroke: #4ADE80; animation-direction: reverse; }
.agv-map .lane-t { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; opacity: .75; } .agv-map .lane-t.out { fill: #38BDF8; } .agv-map .lane-t.ret { fill: #4ADE80; }
.agv-map .aisle-c { opacity: .25; }
.agv-map .stopbar { stroke-width: 4; stroke-linecap: round; stroke: #64748B; transition: stroke .3s; }
.agv-map .stopbar[data-s=green] { stroke: #22C55E; filter: drop-shadow(0 0 4px #22C55E); }
.agv-map .stopbar[data-s=amber] { stroke: #F59E0B; filter: drop-shadow(0 0 4px #F59E0B); }
.agv-map .stopbar[data-s=red] { stroke: #EF4444; filter: drop-shadow(0 0 5px #EF4444); }
.agv-map .tl-pod { fill: #0B1220; stroke: #334155; stroke-width: 1.4; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.agv-map .tl-arm { stroke: #475569; stroke-width: 2.5; stroke-linecap: round; }
.agv-map .tl-id { font-size: 8.5px; font-weight: 800; fill: var(--dim); text-anchor: middle; }
.agv-map .tl-ax { font-size: 9px; fill: #94A3B8; font-weight: 800; }
.agv-map .tl-l { fill: #1E293B; transition: fill .25s; }
.agv-map .tl-row[data-s=red] .tl-l.r { fill: #EF4444; filter: drop-shadow(0 0 4px #EF4444); }
.agv-map .tl-row[data-s=amber] .tl-l.a { fill: #F59E0B; filter: drop-shadow(0 0 4px #F59E0B); animation: iaIo .5s steps(2) infinite; }
.agv-map .tl-row[data-s=green] .tl-l.g { fill: #22C55E; filter: drop-shadow(0 0 4px #22C55E); }
.agv-map .tl-ring-bg { fill: none; stroke: #1E293B; stroke-width: 2.6; }
.agv-map .tl-ring { fill: none; stroke: #22C55E; stroke-width: 2.6; stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.agv-map .tlight[data-ns=amber] .tl-ring, .agv-map .tlight[data-ew=amber] .tl-ring { stroke: #F59E0B; }
.agv-map .tl-cd { font-size: 8.5px; font-weight: 900; fill: #E2E8F0; text-anchor: middle; font-family: var(--mono); }
.agv-map .tl-q { opacity: 0; transition: opacity .3s; } .agv-map .tl-q.on { opacity: 1; }
.agv-map .tl-q rect { fill: #EF4444; } .agv-map .tl-q text { font-size: 9px; font-weight: 900; fill: #fff; text-anchor: middle; }
.agv-map .agv-brake { fill: #3F1D1D; transition: fill .2s; }
.agv-map .agv.hold .agv-brake { fill: #FF2D3D; filter: drop-shadow(0 0 4px #FF2D3D); }
.agv-map .agv.hold .agv-light { opacity: .35; filter: none; }
.agv-map .agv.red .agv-tag rect { stroke: #EF4444; }
/* semáforo de andén (materia prima) */
.rd-sig-pod { fill: #0B1220; stroke: #334155; stroke-width: 1.5; }
.rd-sig-l { fill: #1E293B; transition: fill .3s; }
.rd-sig[data-s=red] .rd-sig-l.r { fill: #EF4444; filter: drop-shadow(0 0 6px #EF4444); }
.rd-sig[data-s=amber] .rd-sig-l.a { fill: #F59E0B; filter: drop-shadow(0 0 6px #F59E0B); animation: iaIo .6s steps(2) infinite; }
.rd-sig[data-s=green] .rd-sig-l.g { fill: #22C55E; filter: drop-shadow(0 0 6px #22C55E); }
.rd-sig[data-s=greenflash] .rd-sig-l.g { fill: #22C55E; filter: drop-shadow(0 0 6px #22C55E); animation: iaIo .6s steps(2) infinite; }
.rd-sig-t { font-size: 10px; font-weight: 800; fill: var(--muted); }
.rd-sig[data-s=red] .rd-sig-t { fill: #FCA5A5; } .rd-sig[data-s=green] .rd-sig-t, .rd-sig[data-s=greenflash] .rd-sig-t { fill: #86EFAC; } .rd-sig[data-s=amber] .rd-sig-t { fill: #FCD34D; }
.agv-map .tr-panel rect { fill: rgba(var(--ink), .04); stroke: var(--border-2); }
.agv-map .tr-panel .lane { animation: aisleFlow 1.4s linear infinite; opacity: .9; stroke-width: 2.4; }
.agv-map .tr-panel .lane-t { font-size: 10.5px; opacity: 1; }
.agv-map .tr-t { font-size: 10.5px; font-weight: 700; fill: var(--muted); } .agv-map .tr-n { font-weight: 900; fill: var(--text); }
.agv-map .tr-dot.red { fill: #EF4444; filter: drop-shadow(0 0 4px #EF4444); } .agv-map .tr-dot.amb { fill: #F59E0B; }
/* peatón con EPP */
.agv-map .xwalk rect { fill: rgba(226,232,240,.18); transition: fill .3s; } .agv-map .xwalk.on rect { fill: rgba(250,204,21,.75); }
.agv-map .pedbtn rect { fill: #1F2937; stroke: #FACC15; stroke-width: 1.2; } .agv-map .pedbtn .pb-l { fill: #475569; }
.agv-map .pedbtn.on .pb-l { fill: #FACC15; filter: drop-shadow(0 0 5px #FACC15); animation: iaIo .5s steps(2) infinite; }
.agv-map .ped-fig { transition: transform 1s linear; }
.agv-map .ped-sh { fill: rgba(0,0,0,.45); }
.agv-map .ped-vest { fill: #F97316; stroke: #7C2D12; stroke-width: .6; } .agv-map .ped-stripe { stroke: #E5E7EB; stroke-width: 1.1; }
.agv-map .ped-face { fill: #E8B48A; } .agv-map .ped-hat { fill: #FACC15; stroke: #A16207; stroke-width: .4; }
.agv-map .ped-leg { stroke: #1E3A8A; stroke-width: 2.4; stroke-linecap: round; }
.agv-map .ped-fig.walk .ped-leg.l { animation: pedL .5s ease-in-out infinite alternate; transform-origin: -2px 2px; transform-box: view-box; }
.agv-map .ped-fig.walk .ped-leg.r { animation: pedL .5s ease-in-out infinite alternate-reverse; transform-origin: 2px 2px; transform-box: view-box; }
@keyframes pedL { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.agv-map .ped-fig.walk .ped-body { animation: pedB .25s ease-in-out infinite alternate; } @keyframes pedB { to { transform: translateY(-1px); } }
.agv-map .ped-tag rect { fill: #FACC15; stroke: #111; stroke-width: 1; } .agv-map .ped-t { font-size: 8px; font-weight: 900; fill: #111; text-anchor: middle; letter-spacing: .04em; }
.agv-map .ped-tag { animation: iaIo .8s steps(2) infinite; }
.agv-map .tlight.ped .tl-pod { stroke: #FACC15; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(250,204,21,.7)); }
.agv-map .tr-dot.ped { fill: #FACC15; }
.pyr-r { font-size: 15.5px; } .pyr-p { font-size: 12.5px; } .pyr-tm { font-size: 12.5px; } .pyr-tl { font-size: 12.5px; }
.ac-top + .card-title { margin-top: 24px !important; margin-bottom: 14px; }

/* ================= Recursos humanos ================= */
.hr-ks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-k > b { font-size: 26px; }
.hr-g2 > .card { min-width: 0; }
.hr-b { grid-template-columns: 170px 1fr 70px; }
.hr-tbl td, .hr-tbl th { white-space: nowrap; }
.hr-tbl td.num { font-family: var(--mono); text-align: right; }
.hr-scroll { max-height: 320px; overflow: auto; } .hr-scroll.big { max-height: 520px; }
.hr-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hr-hd .nd-h { margin: 0; }
.hr-sel { height: 36px; padding: 0 10px; border-radius: 10px; max-width: 320px; }
.hr-flt { display: flex; gap: 10px; align-items: center; } .hr-flt .input-wrap { min-width: 260px; }
.hr-due { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(96,165,250,.15); color: #93C5FD; }
.hr-due.warn { background: rgba(245,158,11,.16); color: #FBBF24; } .hr-due.bad { background: rgba(239,68,68,.16); color: #F87171; }
.hr-360 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: center; }
.hr-radar { width: 100%; max-height: 300px; }
.hr-rg { fill: none; stroke: rgba(148,163,184,.18); stroke-width: 1; }
.hr-rt { fill: var(--muted); font-size: 11px; font-weight: 700; }
.hr-ft { fill: var(--text); font-size: 13px; }
.hr-360s small { color: var(--muted); font-size: 12px; } .hr-360s > b { display: block; font-size: 34px; font-weight: 800; color: #A78BFA; text-shadow: 0 0 18px rgba(167,139,250,.4); }
.hr-360s > b span { font-size: 15px; color: var(--dim); }
.hr-gap { display: inline-block; margin: 4px 0 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.hr-gap.ok { background: rgba(34,197,94,.15); color: #4ADE80; } .hr-gap.warn { background: rgba(245,158,11,.16); color: #FBBF24; } .hr-gap.bad { background: rgba(239,68,68,.16); color: #F87171; }
.hr-360t td { padding: 4px 8px !important; }
.hr-9 { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 1fr auto; gap: 6px; }
.hr-9y { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; }
.hr-9x { grid-column: 2; text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; }
.hr-9g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hr-9c { padding: 8px 10px; border-radius: 10px; min-height: 76px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.hr-9c small { display: block; font-size: 10.5px; color: var(--c); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.hr-9c b { font-size: 22px; font-weight: 800; } .hr-9c span { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.hr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); }
.hr-chip b { color: #F87171; }
.hr-mf { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.hr-mf i { position: relative; width: 22px; height: var(--h); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--c) 40%, transparent); border: 1px solid var(--c); }
.hr-mf em { position: absolute; top: -13px; left: 0; right: 0; text-align: center; font-size: 9.5px; font-style: normal; color: var(--muted); }
.hr-pr { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.hr-pr.high { background: rgba(239,68,68,.16); color: #F87171; } .hr-pr.medium { background: rgba(245,158,11,.16); color: #FBBF24; } .hr-pr.normal { background: rgba(96,165,250,.15); color: #93C5FD; }
.hr-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hr-pl { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink), .03); display: grid; gap: 6px; font-size: 12.5px; }
.hr-pl > b { font-size: 13px; line-height: 1.35; } .hr-pl small { display: block; color: var(--dim); font-size: 10.5px; text-transform: uppercase; }
.hr-pls { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.hr-pls.done { background: rgba(34,197,94,.16); color: #4ADE80; } .hr-pls.inprogress { background: rgba(96,165,250,.16); color: #93C5FD; } .hr-pls.planned { background: rgba(148,163,184,.16); color: var(--muted); }
.hr-own-h { display: flex; gap: 14px; align-items: flex-start; } .hr-own-h h3 { margin: 2px 0 4px; font-size: 18px; } .hr-own-h small { color: var(--muted); }
.hr-flow { display: flex; align-items: stretch; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.hr-fs { flex: 1; min-width: 150px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); display: grid; gap: 2px; color: var(--c); }
.hr-fs b { color: var(--text); font-size: 13px; } .hr-fs small { color: var(--muted); font-size: 11.5px; }
.hr-arr { display: flex; align-items: center; color: var(--dim); } .hr-arr.dot { color: #22C55E; border-left: 2px dashed rgba(34,197,94,.6); padding-left: 4px; }
.hr-stk { display: grid; gap: 7px; margin-top: 8px; }
.hr-sr { display: grid; grid-template-columns: 170px 1fr 70px; gap: 10px; align-items: center; font-size: 12.5px; }
.hr-sr > span { color: var(--muted); font-weight: 700; } .hr-sr > span small { margin-left: 6px; color: var(--dim); font-weight: 600; }
.hr-sr > div { display: flex; height: 20px; border-radius: 0 7px 7px 0; overflow: hidden; animation: mlGrow .9s var(--ease) both; transform-origin: left; }
.hr-sr > div i { background: color-mix(in srgb, var(--c) 45%, transparent); border-right: 1px solid color-mix(in srgb, var(--c) 90%, transparent); }
.hr-sr > b { font-family: var(--mono); font-size: 12px; text-align: right; }
.hr-efs { grid-template-columns: repeat(4, 1fr); }
.hr-fair { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.hr-fair input { accent-color: #22C55E; width: 16px; height: 16px; }
.hr-coef { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-coef span { display: grid; padding: 6px 10px; border-radius: 10px; font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); }
.hr-coef span b { font-size: 14px; } .hr-coef span.up b { color: #F87171; } .hr-coef span.dn b { color: #4ADE80; } .hr-coef small { font-size: 10px; color: var(--dim); }
.hr-wi { display: grid; gap: 14px; }
.hr-wf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.hr-sl { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.hr-sl > span { display: flex; justify-content: space-between; } .hr-sl > span b { color: var(--text); font-family: var(--mono); }
.hr-sl input[type=range] { accent-color: #A78BFA; width: 100%; } .hr-sl select { height: 32px; padding: 0 8px; border-radius: 8px; }
.hr-wr { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; }
.hr-wbig { padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.hr-wbig small { color: var(--muted); font-size: 11.5px; } .hr-wbig b { display: block; font-size: 28px; color: var(--c); font-weight: 800; } .hr-wbig span { font-size: 12px; color: var(--muted); }
.hr-wr .ml-b { grid-template-columns: 120px 1fr 0; }
.hr-why { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(239,68,68,.1); color: #FCA5A5; }
@media (max-width: 1200px) { .hr-ks, .hr-efs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hr-360, .hr-wr { grid-template-columns: 1fr; } .hr-wf { grid-template-columns: repeat(2, 1fr); } }
.hr-bt { fill: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.hr-own .hr-rt, .hr-flow + * { }
.hr-tbl td:first-child { white-space: normal; min-width: 220px; }
.hr-scroll .tbl td { white-space: normal; }
.hr-360 { grid-template-columns: minmax(300px, 1.15fr) minmax(0, 1fr); }
.hr-360 > div:first-child { min-width: 300px; }
.hr-radar { display: block; width: 100%; height: auto; min-height: 260px; }
.hr-360s { min-width: 0; } .hr-360t { width: 100%; table-layout: fixed; } .hr-360t td:first-child { width: 52%; min-width: 0; } .hr-360t td { white-space: nowrap; }
.svg-chart.hr-bands { width: 100%; height: auto; max-height: none; }
.hr-360t { display: grid; gap: 0; width: 100%; table-layout: auto; }
.hr-360t > div { display: grid; grid-template-columns: 1fr 52px 56px; gap: 8px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--border); font-size: 13px; }
.hr-360t > div b { font-family: var(--mono); text-align: right; } .hr-360t > div small { color: var(--dim); text-align: right; font-size: 11.5px; }

/* ================= Segmentación: VLANs y mGuard ================= */
.ia-vband { fill: color-mix(in srgb, var(--c) 7%, transparent); stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 1.2; stroke-dasharray: 6 5; }
.ia-vband.prot { fill: color-mix(in srgb, var(--c) 10%, transparent); stroke-width: 1.8; stroke-dasharray: none; }
.ia-vtag { font-size: 10.5px; font-weight: 800; fill: var(--c); letter-spacing: .04em; opacity: .9; }
.ia-lock path { fill: none; stroke: #4ADE80; stroke-width: 1.8; } .ia-lock rect { fill: #00A651; stroke: #052e16; stroke-width: .8; }
.ia-node.st-disconnected .ia-lock rect, .ia-node.st-faulted .ia-lock rect { fill: #EF4444; }
.ia-vt td { vertical-align: middle; } .ia-allow { color: var(--muted); font-size: 12px; white-space: normal; max-width: 460px; }
.ia-vid { display: inline-block; min-width: 42px; text-align: center; padding: 2px 8px; border-radius: 8px; font-family: var(--mono); font-weight: 800; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.ia-guard { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #4ADE80; background: rgba(0,166,81,.12); border: 1px solid rgba(0,166,81,.45); }
.ia-guard.fw { color: #FDBA74; background: rgba(180,83,9,.15); border-color: rgba(251,146,60,.45); }
.ia-guard i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.ia-mx { display: grid; gap: 3px; font-size: 11px; }
.ia-mx-c { padding: 7px 4px; border-radius: 6px; text-align: center; font-weight: 800; }
.ia-mx-c.h { color: var(--muted); background: transparent; font-weight: 700; } .ia-mx-c.h small { display: block; font-size: 9.5px; color: var(--dim); font-weight: 600; } .ia-mx-c.h.l { text-align: right; padding-right: 8px; }
.ia-mx-c.ok, .ia-mx-c.cip { background: rgba(34,197,94,.16); color: #4ADE80; } .ia-mx-c.no { background: rgba(239,68,68,.1); color: #F87171; }
.ia-mx-c.vpn { background: rgba(0,166,81,.2); color: #86EFAC; outline: 1px dashed rgba(134,239,172,.6); } .ia-mx-c.self { background: rgba(var(--ink), .04); }
.ia-mgs { display: grid; gap: 10px; }
.ia-mg { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,166,81,.35); background: linear-gradient(90deg, rgba(0,166,81,.1), transparent 60%); cursor: pointer; transition: border-color .2s; }
.ia-mg:hover { border-color: #00A651; }
.ia-mg-h { display: flex; align-items: center; gap: 8px; } .ia-mg-h i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); } .ia-mg-h span { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.ia-mg > small { display: block; color: var(--muted); font-size: 11.5px; margin: 3px 0 6px; }
.ia-mg-k { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .ia-mg-k span { font-size: 10.5px; color: var(--dim); } .ia-mg-k b { display: block; font-size: 13px; color: var(--text); }
.ia-mg-l { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ia-mg-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.ia-mc { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 900; color: #fff; background: #DC2626; letter-spacing: .05em; vertical-align: 1px; }
.ia-vg { grid-template-columns: 1fr !important; }
.ia-vg > div { min-width: 0; }
.ia-mx { overflow-x: auto; }
.ia-mgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ia-mg-k { grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
@media (max-width: 1300px) { .ia-mgs { grid-template-columns: 1fr; } }
.ia-guard { white-space: nowrap; }

/* ---- RH: íconos, estrellas y coronas ---- */
.hr-k { position: relative; }
.hr-kic { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 0 18px -6px var(--c); }
.hr-gi { display: inline-block; vertical-align: -3px; flex: none; }
.hr-ci { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; margin-right: 9px; vertical-align: middle;
  background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.hr-stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; line-height: 1; color: rgba(148,163,184,.22); white-space: nowrap; }
.hr-stars i { position: absolute; left: 0; top: 0; overflow: hidden; font-style: normal; color: #FBBF24; text-shadow: 0 0 6px rgba(251,191,36,.55); }
.hr-360t > div { grid-template-columns: 1fr 78px 48px 54px !important; }
.hr-360t > div > span:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.hr-360t > div.top { background: linear-gradient(90deg, rgba(251,191,36,.09), transparent 70%); }
.hr-360t > div.low { background: linear-gradient(90deg, rgba(239,68,68,.08), transparent 70%); }
.hr-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.hr-badge.gold { color: #FBBF24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45); }
.hr-badge.red { color: #F87171; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.4); }
.hr-cav { display: grid; gap: 7px; }
.hr-cr { display: grid; grid-template-columns: 28px auto 1fr 82px minmax(60px, 1.2fr) 44px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 12.5px;
  border: 1px solid transparent; animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.hr-cr .hr-ci { margin-right: 0; }
.hr-cr.top { border-color: rgba(251,191,36,.45); background: linear-gradient(90deg, rgba(251,191,36,.12), transparent 75%); box-shadow: 0 0 22px -10px #FBBF24; }
.hr-cr.low { border-color: rgba(239,68,68,.35); background: linear-gradient(90deg, rgba(239,68,68,.08), transparent 75%); }
.hr-rank { display: grid; place-items: center; color: var(--dim); font-size: 12px; }
.hr-cr.top .hr-rank svg { filter: drop-shadow(0 0 6px #FBBF24); animation: hrCrown 2.4s ease-in-out infinite; }
@keyframes hrCrown { 50% { transform: translateY(-2px) rotate(-6deg); } }
.hr-cn { color: var(--text); font-weight: 700; }
.hr-cb { height: 8px; border-radius: 99px; background: rgba(var(--ink), .06); overflow: hidden; }
.hr-cb i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c)); box-shadow: 0 0 10px -2px var(--c); animation: mlGrow .9s var(--ease) both; transform-origin: left; }
.hr-cr > b { font-family: var(--mono); text-align: right; }
.hr-360 { grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.25fr) !important; }
.hr-360 > div:first-child { min-width: 250px !important; }
.hr-360t > div { grid-template-columns: minmax(0, 1fr) 72px 40px 44px !important; gap: 6px !important; font-size: 12.5px !important; }
.hr-360t > div > span:first-child { flex-wrap: nowrap !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-360t .hr-ci { width: 24px; height: 24px; margin-right: 7px; }
.hr-360t .hr-stars { font-size: 12px; letter-spacing: 0; }
.hr-360t .hr-badge { margin-left: 6px; padding: 1px 5px; }
.svg-chart.line-chart { height: var(--h, 220px); }

/* ---- Finanzas: combo, pastel, PCA ---- */
.fx-g { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: center; }
.fx-g2 { align-items: start; }
.svg-chart.fx-svg { height: auto; }
.fx-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.fx-slice { transition: transform .25s var(--ease), fill-opacity .25s; transform-origin: 120px 120px; } .fx-slice:hover { transform: scale(1.04); fill-opacity: .95; }
.fx-c { fill: var(--text); font-size: 20px; font-weight: 800; }
.fx-pl { display: grid; gap: 8px; min-width: 170px; } .fx-pl div { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
.fx-pl i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: 0 0 8px var(--c); } .fx-pl b { font-family: var(--mono); } .fx-pl small { grid-column: 2 / 4; color: var(--dim); margin-top: -6px; }
.fx-ld { fill: var(--muted); font-size: 10.5px; font-weight: 700; } .fx-m { fill: var(--text); font-size: 10px; font-weight: 700; }
.fx-cm { margin-top: 44px !important; }
.fx-prs { display: grid; gap: 7px; }
.fx-pr { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: rgba(var(--ink), .03); border: 1px solid var(--border); }
.fx-pr small { display: block; color: var(--dim); font-size: 11px; } .fx-pr b { font-size: 12.5px; }
.fx-r { font-family: var(--mono); font-weight: 800; color: var(--c); text-align: center; padding: 4px 0; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.fx-scree { margin-top: 10px; } .fx-scree .ml-b { grid-template-columns: 60px 1fr; }
@media (max-width: 1200px) { .fx-g { grid-template-columns: 1fr; } }
/* ---- RH: ranking de factores y guía ---- */
.hr-imp { padding: 12px; border-radius: 12px; background: rgba(var(--ink), .03); border: 1px solid var(--border); }
.hr-ir { display: grid; grid-template-columns: 150px 1fr 56px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin-bottom: 9px; font-size: 12.5px; }
.hr-ir > span { font-weight: 700; color: var(--text); } .hr-ir > b { font-size: 11px; color: var(--c); text-align: right; text-transform: uppercase; }
.hr-ir > div { height: 18px; } .hr-ir i { display: flex; justify-content: flex-end; align-items: center; height: 100%; min-width: 40px; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--c) 30%, transparent); border: 1px solid var(--c); animation: mlGrow .9s var(--ease) both; transform-origin: left; }
.hr-ir em { font-style: normal; font-weight: 800; font-size: 11px; padding: 0 6px; color: #fff; } .hr-ir > small { grid-column: 2 / 4; color: var(--dim); font-size: 11px; }
.hr-how { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(167,139,250,.35); background: linear-gradient(135deg, rgba(167,139,250,.1), transparent 70%); font-size: 13px; }
.hr-how ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 7px; color: var(--muted); } .hr-how b { color: var(--text); }
.hr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; } .hr-dot.g { background: #22C55E; } .hr-dot.r { background: #EF4444; }
.fx-g2 { grid-template-columns: 1.25fr 1fr !important; }
.fx-g2 > div { min-width: 0; }
.fx-ldg { display: grid; gap: 4px; margin-bottom: 12px; } .fx-ldg > b { font-size: 12.5px; margin-bottom: 4px; color: #C4B5FD; }
.fx-lr { display: grid; grid-template-columns: 130px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; } .fx-lr span { color: var(--muted); } .fx-lr em { font-style: normal; font-family: var(--mono); font-weight: 800; text-align: right; }
.fx-lb { position: relative; height: 12px; border-radius: 6px; background: rgba(var(--ink), .05); } .fx-lb::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--dim); }
.fx-lb i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: color-mix(in srgb, var(--c) 55%, transparent); border: 1px solid var(--c); }
@media (max-width: 1300px) { .fx-g2 { grid-template-columns: 1fr !important; } }
.fx-cm { overflow-x: auto; }
.fx-cm { overflow: visible !important; margin-top: 8px !important; }
.fx-cm > .cm-h:not(.l) { transform: none !important; height: auto !important; white-space: normal !important; text-align: center !important; padding: 0 2px 6px !important; font-size: 10.5px !important; line-height: 1.2; align-self: end; }
/* ---- Pronóstico ---- */
.fc-ks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-zone { fill: rgba(167,139,250,.06); stroke: rgba(167,139,250,.3); stroke-dasharray: 4 4; } .fc-zt { fill: #C4B5FD; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
.fc-bt { display: grid; gap: 10px; margin: 10px 0; }
.fc-br { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: center; font-size: 12.5px; } .fc-br > span { color: var(--muted); font-weight: 700; }
.fc-br.me > span { color: var(--text); } .fc-br.me > span::before { content: "★ "; color: #FBBF24; }
.fc-br > div { display: grid; gap: 3px; }
.fc-br i { display: flex; justify-content: flex-end; align-items: center; height: 16px; min-width: 44px; border-radius: 0 7px 7px 0; animation: mlGrow .9s var(--ease) both; transform-origin: left; }
.fc-br i.s { background: rgba(96,165,250,.3); border: 1px solid #60A5FA; } .fc-br i.c { background: rgba(245,158,11,.28); border: 1px solid #F59E0B; }
.fc-br em { font-style: normal; font-weight: 800; font-size: 10.5px; padding: 0 6px; color: #fff; }
.fc-se { display: grid; gap: 5px; } .fc-sr { display: grid; grid-template-columns: 40px 1fr 70px; gap: 8px; align-items: center; font-size: 12px; } .fc-sr span { color: var(--muted); } .fc-sr em { font-style: normal; font-family: var(--mono); font-weight: 700; text-align: right; font-size: 11.5px; }
@media (max-width: 1200px) { .fc-ks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hr-ef { display: flex; flex-direction: column; }
.hr-eb > span { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.hr-vs { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--dim); } .hr-vs.up { color: #F87171; } .hr-vs.dn { color: #4ADE80; }
.hr-trk { position: relative; height: 18px; }
.hr-trk::after { content: ""; position: absolute; left: var(--avg); top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.75); box-shadow: 0 0 6px rgba(255,255,255,.5); }
.hr-trk i { height: 100%; }
.hr-take { margin: auto 0 0; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--muted); line-height: 1.4; } .hr-take b { color: var(--text); }
.hr-eb > span small { display: inline !important; }
/* ---- Ausentismo: solo el modelo óptimo ---- */
.hr-mh { display: flex; gap: 14px; align-items: flex-start; } .hr-mh h3 { margin: 2px 0 4px; font-size: 20px; } .hr-mh small { color: var(--muted); }
.hr-mbadge { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 20px -6px var(--c); }
.hr-mk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.hr-mk > div { padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.hr-mk small { color: var(--muted); font-size: 11.5px; } .hr-mk b { display: block; font-size: 28px; font-weight: 800; color: var(--c); margin: 2px 0; } .hr-mk span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.hr-qt { font-size: 10.5px; font-weight: 800; } .hr-qt.r { fill: #F87171; } .hr-qt.g { fill: #4ADE80; }
.hr-cm { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 6px; margin-top: 8px; }
.hr-cm > div { padding: 14px 8px; border-radius: 10px; text-align: center; font-size: 26px; font-weight: 800; }
.hr-cm > div small { display: block; font-size: 11px; font-weight: 700; opacity: .85; }
.hr-cm .h { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px; align-self: end; } .hr-cm .h.l { text-align: right; align-self: center; }
.hr-cm .ok { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.45); color: #4ADE80; } .hr-cm .bad { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.4); color: #F87171; }
.hr-det { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; } .hr-det summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.hr-wr.one { grid-template-columns: 1fr; }
.hr-rk { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; background: var(--c); }
.hr-gauge { margin-top: 4px; } .hr-gtrack { position: relative; height: 12px; border-radius: 99px; overflow: visible; background: linear-gradient(90deg, #22C55E 0%, #F59E0B 45%, #EF4444 56%, #EF4444 100%); opacity: .85; }
.hr-gtrack i { display: none; } .hr-gtrack b { position: absolute; top: -6px; width: 6px; height: 24px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px #fff; transition: left .3s var(--ease); }
.hr-glab { position: relative; height: 18px; margin-top: 6px; font-size: 10.5px; color: var(--dim); } .hr-glab span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .hr-glab span:first-child { transform: none; left: 0; }
@media (max-width: 1200px) { .hr-mk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hr-rk { margin-left: 8px; }
/* ---- Probabilidad de ausentismo ---- */
.hr-prob { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: radial-gradient(120% 120% at 0% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 65%); transition: border-color .3s, background .3s; }
.hr-pr-ring { position: relative; width: 150px; height: 150px; } .hr-ring { width: 150px; height: 150px; transform: rotate(-90deg); }
.hr-ring circle { fill: none; stroke-width: 12; } .hr-ring .bg { stroke: rgba(148,163,184,.15); } .hr-ring .fg { stroke-linecap: round; transition: stroke-dashoffset .35s var(--ease), stroke .3s; filter: drop-shadow(0 0 8px var(--c)); }
.hr-pr-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .hr-pr-ring b { font-size: 36px; font-weight: 800; color: var(--c); line-height: 1; } .hr-pr-ring small { color: var(--muted); font-size: 11.5px; }
.hr-pr-t small { color: var(--muted); font-size: 11.5px; } .hr-pr-t h3 { margin: 4px 0 6px; font-size: 19px; line-height: 1.3; } .hr-pr-t .sub { display: block; font-size: 12.5px; color: var(--muted); }
.hr-pr-g { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.hr-pr-g > div { padding: 10px 12px; border-radius: 12px; background: rgba(var(--ink), .03); border: 1px solid var(--border); } .hr-pr-g small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.hr-pr-g b { font-size: 22px; font-weight: 800; } .hr-pr-g span:not(.hr-why) { display: block; font-size: 11.5px; color: var(--muted); }
.hr-why.ok { background: rgba(34,197,94,.12); color: #86EFAC; }
.hr-lg { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(244,114,182,.35); background: rgba(244,114,182,.07); font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; } .hr-lg b { color: var(--text); }
@media (max-width: 1300px) { .hr-pr-g { grid-template-columns: 1fr; } .hr-prob { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.hr-wcard { grid-column: 1 / -1; order: -1; }
.hr-wcard .hr-wi { grid-template-columns: 1fr 1.25fr; align-items: start; gap: 22px; }
.hr-wcard .hr-wf { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1200px) { .hr-wcard .hr-wi { grid-template-columns: 1fr; } }
/* ---- Roster de riesgo ---- */
.hr-rq { min-width: 260px; }
.hr-rtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.hr-rtabs button { display: grid; gap: 1px; text-align: left; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(var(--ink), .03); color: var(--muted); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: all .2s; }
.hr-rtabs button small { font-size: 10.5px; font-weight: 600; color: var(--dim); } .hr-rtabs button small b { color: #F87171; }
.hr-rtabs button.on { background: var(--grad-brand); color: #fff; border-color: transparent; } .hr-rtabs button.on small, .hr-rtabs button.on small b { color: rgba(255,255,255,.9); }
.hr-rsum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .hr-rsum span { padding: 5px 11px; border-radius: 999px; font-size: 12px; color: var(--muted); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); } .hr-rsum b { color: var(--c); font-size: 13px; }
.hr-rt tbody tr { cursor: pointer; } .hr-rt td .sub { font-size: 11px; }
.hr-rp { position: relative; width: 120px; height: 20px; border-radius: 99px; background: rgba(var(--ink), .06); overflow: hidden; }
.hr-rp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), var(--c)); border-radius: 99px; }
.hr-rp b { position: relative; display: block; text-align: center; font-size: 11.5px; line-height: 20px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hr-dlt { font-family: var(--mono); font-size: 11.5px; font-weight: 800; color: var(--dim); font-style: normal; } .hr-dlt.up { color: #F87171; } .hr-dlt.dn { color: #4ADE80; }
.hr-lc { white-space: normal !important; min-width: 170px; font-size: 12px; } .hr-lc small { display: block; color: var(--dim); font-size: 10.5px; }
.hr-rt td:last-child { white-space: normal !important; min-width: 200px; } .hr-rt td:last-child small { display: block; margin-top: 2px; }
.hr-ev { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 6px; background: rgba(var(--ink), .03); }
.hr-ev small { display: block; color: var(--muted); font-size: 11.5px; } .hr-ev .hr-dlt { font-size: 14px; }
.hr-evn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: var(--c); }
/* ---- Factores con unidades ---- */
.hr-q0 { margin-top: 0; }
.hr-drv { display: grid; gap: 9px; }
.hr-dr { display: grid; grid-template-columns: 150px 1fr 150px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; font-size: 12.5px; }
.hr-dr > span { color: var(--text); font-weight: 700; }
.hr-db i { display: flex; justify-content: flex-end; align-items: center; height: 18px; min-width: 30px; border-radius: 0 8px 8px 0; background: rgba(74,222,128,.25); border: 1px solid #4ADE80; animation: mlGrow .9s var(--ease) both; transform-origin: left; }
.hr-db em { font-style: normal; font-weight: 800; font-size: 11px; padding: 0 6px; color: #fff; }
.hr-dr > b { font-family: var(--mono); text-align: right; font-size: 13px; } .hr-dr > b small { font-family: var(--font); font-size: 10.5px; color: var(--dim); font-weight: 600; }
.hr-dr b.up, .hr-dx b.up { color: #F87171; } .hr-dr b.dn, .hr-dx b.dn { color: #4ADE80; }
.hr-dx { grid-column: 2 / 4; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
/* ---- Process history: donas OEE / uptime ---- */
.pr-donuts { display: grid; grid-template-columns: repeat(4, 1fr) 150px; gap: 8px; align-items: center; margin-bottom: 6px; }
.pr-dn { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; border: 1px solid transparent; }
.pr-dn.top { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.pr-dn svg { width: 84px; height: 84px; transform: rotate(-90deg); } .pr-dn circle { fill: none; stroke-width: 8; }
.pr-rbg { stroke: rgba(148,163,184,.14); } .pr-rfg { stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.pr-dv { position: absolute; top: 6px; height: 84px; display: grid; place-content: center; text-align: center; line-height: 1.05; } .pr-dv b { font-size: 14px; } .pr-dv small { font-size: 10.5px; color: #22D3EE; font-weight: 700; }
.pr-dn > span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pr-dl { display: grid; gap: 4px; font-size: 11px; color: var(--muted); } .pr-dl i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* ---- Historia de datos SPC ---- */
.st-wrap { display: grid; gap: 10px; }
.st-ch { display: grid; grid-template-columns: 52px 1fr; gap: 12px; animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.st-n { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 18px -6px var(--c); }
.st-n i { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.st-b { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink), .03); }
.st-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .st-h b { font-size: 14px; } .st-h em { font-style: normal; font-family: var(--mono); font-weight: 800; font-size: 16px; color: var(--c); }
.st-th { margin: 4px 0 6px; font-size: 11.5px; color: #C4B5FD; } .st-b > p:last-child { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .st-b b { color: var(--text); }
.st-do { padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.06); font-size: 13px; } .st-do b { color: #4ADE80; } .st-do ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 5px; color: var(--muted); } .st-do ol b { color: var(--text); }
/* ---- Absentismo: factores sin encimarse ---- */
.hr-dr { grid-template-columns: minmax(110px, 150px) minmax(60px, 1fr) auto !important; }
.hr-dr > b { white-space: nowrap; padding-left: 8px; }
.hr-dx { grid-column: 1 / 4 !important; padding-left: 0; margin-bottom: 2px; }
@media (max-width: 1400px) { .pr-donuts { grid-template-columns: repeat(4, 1fr); } .pr-dl { grid-column: 1 / -1; display: flex; gap: 12px; } }
.st-th svg, .st-do svg { display: inline-block !important; vertical-align: -2px; margin-right: 4px; }
.pr-dn svg { width: 96px; height: 96px; } .pr-dn circle { stroke-width: 6; }
.pr-dv { top: 6px; height: 96px; } .pr-dv b { font-size: 13px; letter-spacing: -.02em; } .pr-dv small { font-size: 9.5px; color: var(--dim); font-weight: 700; letter-spacing: .06em; }
.pr-dn > em { font-style: normal; font-size: 11px; color: #22D3EE; font-weight: 700; display: flex; align-items: center; gap: 4px; } .pr-dn > em i { width: 7px; height: 7px; border-radius: 50%; background: #22D3EE; }
.pr-donuts { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 130px); } .pr-dl { font-size: 10.5px; min-width: 0; } .pr-dl span { white-space: normal; }