/* Electro — 01-variables.css */
:root {
    --bg: #f5f4f0;
    --surface: #ffffff;
    --border: rgba(28,24,16,0.09);
    --border-md: rgba(28,24,16,0.15);
    --text: #1a1a18;
    --muted: #6b6b66;
    --hint: #a8a8a2;
    --blue: #185FA5;
    --blue-light: #E6F1FB;
    --blue-dark: #0C447C;
    --blue-text: #0C447C;
    --green: #3B6D11;
    --green-light: #EAF3DE;
    --amber: #854F0B;
    --amber-light: #FAEEDA;
    --red: #A32D2D;
    --red-light: #FCEBEB;
    --teal-light: #9FE1CB;
    --teal-dark: #085041;
    --amber-av: #FAC775;
    --amber-av-dark: #633806;
    --coral-light: #F5C4B3;
    --coral-dark: #712B13;
    --purple-light: #E4DAF7;
    --purple-dark: #4A2E7C;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow: 0 1px 2px rgba(20,18,12,0.04), 0 4px 16px rgba(20,18,12,0.05);
  }
  [data-theme="dark"] {
    --bg: #111110;
    --surface: #1c1c1a;
    --border: rgba(255,255,255,0.10);
    --border-md: rgba(255,255,255,0.16);
    --text: #e8e8e4;
    --muted: #888882;
    --hint: #55554f;
    --blue: #4A9FE0;
    --blue-light: #1a2e42;
    --blue-dark: #6ab8f7;
    --blue-text: #7dc3f7;
    --green: #6dbf45;
    --green-light: #1a2e10;
    --amber: #e8a030;
    --amber-light: #2e2010;
    --red: #e06060;
    --red-light: #2e1010;
    --teal-light: #1a3530;
    --teal-dark: #7fd4bc;
    --amber-av: #3a2810;
    --amber-av-dark: #e8b060;
    --coral-light: #3a1e14;
    --coral-dark: #e89070;
    --purple-light: #241a3a;
    --purple-dark: #b79ce8;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.4);
  }

  /* ── MODO COLORIDO: paleta de fondos ── */
  /* claro */
  [data-colorful="on"]                          { --bg: #d8f3e8; } /* menta (default) */
  [data-colorful="on"][data-color-key="menta"]  { --bg: #d8f3e8; }
  [data-colorful="on"][data-color-key="cielo"]  { --bg: #d6eaff; }
  [data-colorful="on"][data-color-key="lavanda"]{ --bg: #e8d9ff; }
  [data-colorful="on"][data-color-key="melocoton"]{ --bg: #ffe4d6; }
  [data-colorful="on"][data-color-key="limon"]  { --bg: #fdf6c3; }
  [data-colorful="on"][data-color-key="rosa"]   { --bg: #ffd6e7; }
  [data-colorful="on"][data-color-key="arena"]  { --bg: #f5edda; }
  [data-colorful="on"][data-color-key="hielo"]  { --bg: #daf4f7; }
  /* oscuro */
  [data-colorful="on"][data-theme="dark"]                           { --bg: #0d2118; }
  [data-colorful="on"][data-theme="dark"][data-color-key="menta"]   { --bg: #0d2118; }
  [data-colorful="on"][data-theme="dark"][data-color-key="cielo"]   { --bg: #0d1a2e; }
  [data-colorful="on"][data-theme="dark"][data-color-key="lavanda"] { --bg: #1a1028; }
  [data-colorful="on"][data-theme="dark"][data-color-key="melocoton"]{ --bg: #2a120a; }
  [data-colorful="on"][data-theme="dark"][data-color-key="limon"]   { --bg: #201e05; }
  [data-colorful="on"][data-theme="dark"][data-color-key="rosa"]    { --bg: #280d18; }
  [data-colorful="on"][data-theme="dark"][data-color-key="arena"]   { --bg: #221c0e; }
  [data-colorful="on"][data-theme="dark"][data-color-key="hielo"]   { --bg: #081f22; }

  [data-colorful="on"] body { background: var(--bg); }
  [data-colorful="on"] .role-tabs { background: var(--surface); }

  /* picker de colores — se muestra solo con colorido activo */
  .color-picker-row { display: none; padding: 12px 14px; background: var(--bg); border-radius: var(--radius); border: 0.5px solid var(--border); flex-direction: column; gap: 10px; }
  [data-colorful="on"] .color-picker-row { display: flex; }
  .color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
  .color-swatch {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 2px;
    transition: transform .15s, outline-color .15s;
    flex-shrink: 0;
  }
  .color-swatch:hover { transform: scale(1.15); }
  .color-swatch.active { outline-color: var(--text); }
  :root {
    --zoom: 1;
  }
  #app-root {
    /* sin zoom: los modales (position:fixed) viven aquí y no deben
       quedar atrapados por el zoom */
  }
  /* El zoom del tamaño de texto se aplica a una capa que envuelve solo
     el contenido (barra superior + vistas), NO a los modales/overlays,
     que quedan fuera y se posicionan bien respecto a la pantalla. */
  #zoom-layer { zoom: var(--zoom); }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); font-size: 1em; min-height: 100vh; transition: background .2s, color .2s; }
  .card, .modal, .sidebar, .topbar, .content-head, select, input, textarea { transition: background .2s, color .2s, border-color .2s; }