/* =====================================================================
   PC Solutions — sistema de diseño compartido (sitio, panel y portal)
   Concepto: "la placa". Fondo color máscara de soldadura (la misma
   familia del turquesa del logo), texto blanco serigrafía, dorado para
   pads/indicadores y turquesa brillante solo para acciones.
   ===================================================================== */

/* ---------- Fuentes (servidas desde el propio sitio, sin Google) ---------- */
@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/chakra-petch-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* ---- Color ---- */
  --mask-deep:   #041A17;  /* lo más hundido: barra lateral, pie, fondo de inputs */
  --mask:        #072622;  /* fondo base */
  --mask-raised: #0B302B;  /* paneles y tarjetas */
  --mask-high:   #103A34;  /* hover / paneles flotantes */
  --line:        #174842;  /* divisores (decorativo) */
  --line-strong: #3A8277;  /* bordes de controles (contraste >= 3:1) */

  --silk:        #EEF2E8;  /* texto principal, "serigrafía" */
  --muted:       #93B5AC;  /* texto secundario */
  --dim:         #7DA096;  /* texto terciario / placeholders */

  --teal:        #2FD3C0;  /* acciones (marca) */
  --teal-press:  #22B8A7;
  --teal-wash:   rgba(47, 211, 192, 0.10);
  --on-teal:     #03201C;
  --gold:        #E3B34C;  /* pads, indicadores, foco */
  --gold-wash:   rgba(227, 179, 76, 0.12);
  --danger:      #F08A7A;
  --danger-wash: rgba(240, 138, 122, 0.12);
  --info:        #8FC8F0;

  /* ---- Tipografía ---- */
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  /* Escala ~1.25 sobre 16px */
  --fs-xs: 0.8125rem;  /* 13 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5625rem;  /* 25 */
  --fs-2xl: 1.953rem;  /* 31 */
  --fs-3xl: 2.441rem;  /* 39 */

  /* ---- Forma: el radio sigue la jerarquía (control < panel < hoja) ---- */
  --r-control: 6px;
  --r-panel: 10px;
  --r-sheet: 16px;
  --r-pill: 999px;

  /* ---- Espacio (base 4px) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* ---- Elevación: sombras teñidas del fondo, no grises ---- */
  --shadow-float: 0 18px 40px -18px rgba(1, 12, 10, 0.85);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base común ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--line-strong) var(--mask-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mask-deep); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); border: 2px solid var(--mask-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
::selection { background: var(--gold); color: var(--on-teal); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
img, svg { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* LED de estado: el color + el texto juntos dicen el estado (nunca solo el color) */
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.led.on { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.led.warn { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.led.err { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }