/* ===== ServiceFlex TI · Temas estilo Fluent (M365 Admin) ===== */

/* ---------- Modo oscuro (default) ---------- */
:root, [data-theme="dark"] {
  --bg: #141414;
  --panel: #1F1F1F;
  --panel-2: #292929;
  --border: #3D3D3D;
  --text: #F5F5F5;
  --muted: #ADADAD;

  --primary: #479EF5;
  --primary-strong: #62ABF5;
  --primary-contrast: #0B0B0B;
  --primary-soft: rgba(71, 158, 245, .14);

  --blue: #479EF5;
  --purple: #9373C0;
  --success: #6CCB5F;
  --warning: #EAA300;
  --danger: #F1707B;

  --sidebar-bg: #1B1B1B;
  --topbar-bg: rgba(31, 31, 31, .85);
  --hover: rgba(255, 255, 255, .06);
  --shadow: 0 2px 10px rgba(0, 0, 0, .45);
  --glow: 0 0 0 2px rgba(71, 158, 245, .35);

  /* Badges: fondo / texto */
  --b-cyan-bg: rgba(71, 158, 245, .16);    --b-cyan-tx: #79B8F7;
  --b-blue-bg: rgba(71, 158, 245, .16);    --b-blue-tx: #92C5F9;
  --b-purple-bg: rgba(147, 115, 192, .22); --b-purple-tx: #C6B3E2;
  --b-success-bg: rgba(108, 203, 95, .16); --b-success-tx: #8CD681;
  --b-warning-bg: rgba(234, 163, 0, .16);  --b-warning-tx: #F2C661;
  --b-danger-bg: rgba(241, 112, 123, .16); --b-danger-tx: #F5949C;
  --b-muted-bg: rgba(173, 173, 173, .14);  --b-muted-tx: #ADADAD;

  --table-head: #ADADAD;
  --input-bg: #292929;
  --scroll: #3D3D3D;
}

/* ---------- Modo claro ---------- */
[data-theme="light"] {
  --bg: #F5F5F5;
  --panel: #FFFFFF;
  --panel-2: #FAFAFA;
  --border: #E0E0E0;
  --text: #242424;
  --muted: #616161;

  --primary: #0F6CBD;
  --primary-strong: #115EA3;
  --primary-contrast: #FFFFFF;
  --primary-soft: #EBF3FC;

  --blue: #0F6CBD;
  --purple: #8764B8;
  --success: #107C10;
  --warning: #9D5D00;
  --danger: #C50F1F;

  --sidebar-bg: #FFFFFF;
  --topbar-bg: rgba(255, 255, 255, .85);
  --hover: rgba(0, 0, 0, .045);
  --shadow: 0 1.6px 3.6px rgba(0, 0, 0, .1), 0 0.3px 0.9px rgba(0, 0, 0, .07);
  --glow: 0 0 0 2px rgba(15, 108, 189, .25);

  --b-cyan-bg: #E0F0FA;    --b-cyan-tx: #0F548C;
  --b-blue-bg: #EBF3FC;    --b-blue-tx: #0F6CBD;
  --b-purple-bg: #F0EBF7;  --b-purple-tx: #6A4FA0;
  --b-success-bg: #E7F2E7; --b-success-tx: #0E700E;
  --b-warning-bg: #FBF0DC; --b-warning-tx: #8A5300;
  --b-danger-bg: #FBE7E9;  --b-danger-tx: #B10E1C;
  --b-muted-bg: #EFEFEF;   --b-muted-tx: #616161;

  --table-head: #616161;
  --input-bg: #FFFFFF;
  --scroll: #C8C8C8;
}

/* ---------- Base ---------- */
:root {
  --radius: 8px;
  --radius-sm: 4px;
  --font: 'Segoe UI', 'Segoe UI Web', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  transition: background .2s, color .2s;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 10px; font-weight: 600; }
h1 { font-size: 1.5rem; }
h3 { font-size: 1rem; color: var(--text); }
.muted { color: var(--muted); }
.link { color: var(--primary); }
.link:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }