/* PhotoSision · Tokens Oficiales de Diseño y Sistema de Modos · Portal Web de Familias
   Conforme a la guía de estilo D y la memoria del proyecto PhotoSision (SPRINT-037 / SPRINT-042D) */

:root,
:root[data-mode="azul"] {
  --s-none: #97A1B6;
  --s-part: #F59A4B;
  --s-paid: #2DA862;
  --s-deliv: #5CC8F2;
  --chip-tx: #F59A4B;
  --chip-bg: color-mix(in srgb, var(--ac) 16%, var(--bg));
  --chip-ln: color-mix(in srgb, var(--ac) 46%, var(--bg));

  --stage: #05070D;
  --frame: #1F2638;
  --bg: #0D121F;
  --sf: #131928;
  --el: #1A2133;
  --ln: #283046;

  --tx: #EEF1F6;
  --t2: #A4AEC3;
  --ac: #F37F21;
  --accent-t: #F59A4B;
  --ink: #1C0F05;

  --ok: #5DBE92;
  --warn: #E3A93A;
  --err: #F0867A;
  --scrim: rgba(3, 5, 10, 0.65);
}

:root[data-mode="grafito"] {
  --s-none: #9A9187;
  --s-part: #F59A4B;
  --s-paid: #2DA862;
  --s-deliv: #5CC8F2;
  --chip-tx: #F59A4B;
  --chip-bg: color-mix(in srgb, var(--ac) 16%, var(--bg));
  --chip-ln: color-mix(in srgb, var(--ac) 46%, var(--bg));

  --stage: #050403;
  --frame: #2A2622;
  --bg: #12100E;
  --sf: #1A1815;
  --el: #221F1B;
  --ln: #2E2A25;

  --tx: #F4EFE8;
  --t2: #A59D92;
  --ac: #F37F21;
  --accent-t: #F59A4B;
  --ink: #1C0F05;

  --ok: #5DBE92;
  --warn: #E3A93A;
  --err: #F0867A;
  --scrim: rgba(0, 0, 0, 0.65);
}

:root[data-mode="dia"] {
  --s-none: #6F6A62;
  --s-part: #B34E00;
  --s-paid: #0F6B3A;
  --s-deliv: #0A72A8;
  --chip-tx: #8A3C00;
  --chip-bg: color-mix(in srgb, var(--ac) 14%, var(--bg));
  --chip-ln: color-mix(in srgb, var(--ac) 52%, var(--bg));

  --stage: #D9D3C8;
  --frame: #D2CABC;
  --bg: #F6F1EA;
  --sf: #FFFCF8;
  --el: #FFFFFF;
  --ln: #E4DCD0;

  --tx: #1B1713;
  --t2: #6A6156;
  --ac: #E06A0B;
  --accent-t: #B34E00;
  --ink: #1C0F05;

  --ok: #2E7A57;
  --warn: #946300;
  --err: #B3382B;
  --scrim: rgba(0, 0, 0, 0.52);
}

/* Semáforos dinámicos */
.sem[data-s="none"] { --sc: var(--s-none); }
.sem[data-s="part"] { --sc: var(--s-part); }
.sem[data-s="paid"] { --sc: var(--s-paid); }
.sem[data-s="deliv"] { --sc: var(--s-deliv); }

/* Reset básico */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  background: var(--stage);
  color-scheme: dark;
}

html[data-mode="dia"] {
  color-scheme: light;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

svg.i {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}