/* ============================================================
   COMANDO JM 2026 — Plataforma de campaña
   Sistema visual: Azul Marino (dominante) + Fucsia (acento quirúrgico)
   Tipografía: IBM Plex Sans + IBM Plex Mono
   ============================================================ */

:root {
  /* Navy ramp — anchored to brand navy #233d87 (hue ~265) */
  --navy-950: #080F2A;
  --navy-925: #0A1333;
  --navy-900: #0D1840;
  --navy-850: #111F50;
  --navy-800: #172863;
  --navy-750: #1D3176;
  --navy-700: #233d87;   /* BRAND NAVY */
  --navy-600: #2F4DA1;
  --navy-500: #4A66BE;

  /* Steel / blue text on dark */
  --steel-100: #EAF0FB;
  --steel-200: #C7D5F0;
  --steel-300: #97ABD8;
  --steel-400: #6F84B6;
  --steel-500: #4F6494;

  /* Magenta / Fucsia — brand #e90689 (surgical accent, tweakable via --accent-h) */
  --accent-h: 354;
  --mag-700: oklch(0.49 0.21 var(--accent-h));
  --mag-600: oklch(0.56 0.245 var(--accent-h));
  --mag-500: oklch(0.605 0.255 var(--accent-h));  /* ≈ #e90689 */
  --mag-400: oklch(0.69 0.24 var(--accent-h));
  --mag-glow: oklch(0.605 0.255 var(--accent-h) / 0.34);
  --mag-soft: oklch(0.605 0.255 var(--accent-h) / 0.15);
  --mag-line: oklch(0.605 0.255 var(--accent-h) / 0.48);

  /* Status — muted so magenta stays loud */
  --ok: #1FA971;
  --ok-soft: rgba(31, 169, 113, 0.16);
  --warn: #E0A11B;
  --warn-soft: rgba(224, 161, 27, 0.16);
  --danger: #E5484D;
  --danger-soft: rgba(229, 72, 77, 0.16);

  /* Light surfaces — brand white, for street form (sun legibility) */
  --paper: #FCFDFF;
  --paper-2: #F0F3FA;
  --paper-3: #E4EAF6;
  --ink: #0D1840;
  --ink-soft: #45568A;
  --ink-faint: #8090B6;
  --paper-line: #D9E1F1;

  /* Hairlines on dark */
  --line: rgba(151, 171, 216, 0.14);
  --line-strong: rgba(151, 171, 216, 0.26);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  --font-scale: 1;
  --shadow-1: 0 1px 2px rgba(0,0,0,.18);
  --shadow-2: 0 8px 30px rgba(3, 9, 24, 0.45);
  --shadow-pop: 0 18px 60px rgba(3, 9, 24, 0.6);

  --ff-sans: "IBM Plex Sans", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  background: var(--navy-950);
  color: var(--steel-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--mag-glow); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(146,170,214,.22); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ===== Typography helpers ===== */
.mono { font-family: var(--ff-mono); font-feature-settings: "tnum" 1; }
.eyebrow {
  font-family: var(--ff-mono);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel-400);
  font-weight: 500;
}
.eyebrow.mag { color: var(--mag-400); }

/* ============================================================
   APP SHELL
   ============================================================ */
#root { min-height: 100vh; }
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(41,75,133,0.35), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, var(--mag-soft), transparent 55%),
    var(--navy-950);
}

/* Top command bar */
.topbar {
  height: 60px;
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: linear-gradient(180deg, var(--navy-850), var(--navy-900));
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  flex: 0 0 auto;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font-size: 14px; letter-spacing: .02em; }
.brand-name small { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--steel-400); text-transform: uppercase; margin-top: 3px; }

.topbar-spacer { flex: 1; }

/* secure session pill */
.secure-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px;
  border-radius: 30px;
  background: var(--ok-soft);
  border: 1px solid rgba(43,168,111,.4);
  color: #7CE3B4;
  font-size: 11.5px; font-weight: 600;
}
.secure-pill svg { width: 13px; height: 13px; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(43,168,111,.5);} 70%{ box-shadow: 0 0 0 7px rgba(43,168,111,0);} 100%{ box-shadow:0 0 0 0 rgba(43,168,111,0);} }

.clock { font-family: var(--ff-mono); font-size: 12.5px; color: var(--steel-300); letter-spacing: .02em; }

/* role switcher */
.role-switch { position: relative; }
.role-btn {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 8px 0 12px;
  border-radius: 10px;
  background: var(--navy-800);
  border: 1px solid var(--line-strong);
  color: var(--steel-100);
}
.role-btn:hover { border-color: var(--mag-line); }
.role-ava {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-family: var(--ff-mono); color: #fff;
}
.role-meta { text-align: left; line-height: 1.15; }
.role-meta b { font-size: 12.5px; display: block; }
.role-meta small { font-size: 10px; color: var(--steel-400); }
.role-menu {
  position: absolute; top: 48px; right: 0; width: 270px;
  background: var(--navy-850); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--shadow-pop); padding: 8px; z-index: 60;
}
.role-menu-h { padding: 8px 10px 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-500); font-family: var(--ff-mono); }
.role-opt { display: flex; gap: 11px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.role-opt:hover { background: var(--navy-800); }
.role-opt.active { background: var(--mag-soft); }
.role-opt b { font-size: 13px; }
.role-opt small { font-size: 11px; color: var(--steel-400); display: block; }
.role-opt .role-ava { width: 30px; height: 30px; border-radius: 8px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: var(--steel-300);
}
.icon-btn:hover { background: var(--navy-800); border-color: var(--line); color: var(--steel-100); }

/* ===== Main canvas area ===== */
.canvas { flex: 1; min-height: 0; position: relative; overflow: auto; }

/* watermark for operative roles */
.watermark {
  position: fixed; inset: 60px 0 0 0; pointer-events: none; z-index: 30; overflow: hidden;
  opacity: .05;
}
.watermark .wm-row { white-space: nowrap; font-family: var(--ff-mono); font-size: 13px; color: #fff; transform: rotate(-22deg); line-height: 3.6; letter-spacing: .1em; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding: 0 18px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; border: 1px solid transparent;
  transition: transform .08s, background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: linear-gradient(180deg, var(--mag-500), var(--mag-600));
  color: #fff; box-shadow: 0 6px 20px var(--mag-glow);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--mag-400), var(--mag-500)); }
.btn-primary:disabled { background: var(--navy-700); color: var(--steel-500); box-shadow: none; cursor: not-allowed; }
.btn-navy { background: var(--navy-700); color: var(--steel-100); border-color: var(--line-strong); }
.btn-navy:hover { background: var(--navy-600); }
.btn-ghost { background: transparent; color: var(--steel-200); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--navy-800); }
.btn-danger { background: transparent; color: #FF9A9D; border-color: rgba(229,72,77,.5); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { height: 52px; font-size: 15px; padding: 0 24px; }
.btn-block { width: 100%; }

/* ============================================================
   CARDS / PANELS (dark)
   ============================================================ */
.card {
  background: linear-gradient(180deg, rgba(20,38,76,.55), rgba(10,23,48,.55));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
.card-pad { padding: 18px; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-h h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.panel-h .eyebrow { margin: 0; }

/* ===== Badges / chips ===== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 6px;
  font-size: 11px; font-weight: 600; font-family: var(--ff-mono);
  letter-spacing: .02em;
}
.badge-mag { background: var(--mag-soft); color: var(--mag-400); border: 1px solid var(--mag-line); }
.badge-ok { background: var(--ok-soft); color: #7CE3B4; border: 1px solid rgba(43,168,111,.4); }
.badge-warn { background: var(--warn-soft); color: #F1C667; border: 1px solid rgba(224,161,27,.4); }
.badge-danger { background: var(--danger-soft); color: #FF9A9D; border: 1px solid rgba(229,72,77,.4); }
.badge-navy { background: var(--navy-800); color: var(--steel-300); border: 1px solid var(--line-strong); }

/* table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-500); font-family: var(--ff-mono); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--steel-200); }
.tbl tr:hover td { background: rgba(146,170,214,.04); }

/* ===== Switch ===== */
.switch { position: relative; width: 40px; height: 23px; border-radius: 20px; background: var(--navy-700); border: 1px solid var(--line-strong); transition: background .18s; flex: 0 0 auto; }
.switch::after { content:""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--steel-300); transition: transform .18s, background .18s; }
.switch.on { background: var(--mag-500); border-color: var(--mag-400); }
.switch.on::after { transform: translateX(17px); background: #fff; }
.switch.danger.on { background: var(--danger); border-color: var(--danger); }

/* segmented control */
.seg { display: inline-flex; background: var(--navy-850); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { height: 32px; padding: 0 14px; border: none; background: transparent; color: var(--steel-300); font-size: 12.5px; font-weight: 600; border-radius: 7px; }
.seg button.active { background: var(--navy-700); color: #fff; }
.seg button.active.mag { background: var(--mag-500); }

/* KPI tile */
.kpi { padding: 16px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(20,38,76,.5), rgba(10,23,48,.5)); border: 1px solid var(--line); }
.kpi .k-label { font-size: 11px; color: var(--steel-400); font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; }
.kpi .k-val { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; line-height: 1; }
.kpi .k-val.mag { color: var(--mag-400); }
.kpi .k-sub { font-size: 11.5px; color: var(--steel-400); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.trend-up { color: #7CE3B4; }
.trend-dn { color: #FF9A9D; }

/* progress bar */
.bar { height: 7px; border-radius: 10px; background: var(--navy-800); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--navy-500), var(--mag-500)); }

@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 0 12px; }
  .clock, .brand-name small { display: none; }
}