/* ==========================================================================
   AAR OS — Design Tokens Material Design 3 (Claro / Oscuro)
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Paleta M3 Light (Seed #1B6EF3 / Personal OS) */
  --md-sys-color-primary: #1b5e9e;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e4ff;
  --md-sys-color-on-primary-container: #001c38;

  --md-sys-color-secondary: #535f70;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d7e3f8;
  --md-sys-color-on-secondary-container: #101c2b;

  --md-sys-color-tertiary: #6b5778;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f3daff;
  --md-sys-color-on-tertiary-container: #251432;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-success: #1b6d3b;
  --md-sys-color-success-container: #c5f0d1;
  --md-sys-color-on-success-container: #00210d;

  --md-sys-color-warning: #8a5300;
  --md-sys-color-warning-container: #ffddb3;
  --md-sys-color-on-warning-container: #2b1700;

  --md-sys-color-surface: #f8f9fc;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f4f8;
  --md-sys-color-surface-container: #eceef3;
  --md-sys-color-surface-container-high: #e6e8ed;
  --md-sys-color-surface-container-highest: #e0e2e8;

  --md-sys-color-outline: #73777f;
  --md-sys-color-outline-variant: #c3c6cf;
  --md-sys-color-inverse-surface: #2e3035;
  --md-sys-color-inverse-on-surface: #eff0f7;
  --md-sys-color-inverse-primary: #a2c9ff;

  /* Tipografía M3 */
  --md-sys-typescale-font: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Formas M3 */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Movimiento M3 */
  --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration: 250ms;

  /* Espaciado base 8dp */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --md-sys-color-primary: #a2c9ff;
    --md-sys-color-on-primary: #00315b;
    --md-sys-color-primary-container: #004780;
    --md-sys-color-on-primary-container: #d3e4ff;

    --md-sys-color-secondary: #bbc7db;
    --md-sys-color-on-secondary: #253140;
    --md-sys-color-secondary-container: #3c4858;
    --md-sys-color-on-secondary-container: #d7e3f8;

    --md-sys-color-tertiary: #d7bee4;
    --md-sys-color-on-tertiary: #3b2948;
    --md-sys-color-tertiary-container: #533f5f;
    --md-sys-color-on-tertiary-container: #f3daff;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    --md-sys-color-success: #8ad6a0;
    --md-sys-color-success-container: #00522a;
    --md-sys-color-on-success-container: #c5f0d1;

    --md-sys-color-warning: #ffb960;
    --md-sys-color-warning-container: #693c00;
    --md-sys-color-on-warning-container: #ffddb3;

    --md-sys-color-surface: #111318;
    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-on-surface-variant: #c3c6cf;
    --md-sys-color-surface-container-lowest: #0c0e13;
    --md-sys-color-surface-container-low: #191c20;
    --md-sys-color-surface-container: #1d2024;
    --md-sys-color-surface-container-high: #282a2f;
    --md-sys-color-surface-container-highest: #33353a;

    --md-sys-color-outline: #8d9199;
    --md-sys-color-outline-variant: #43474e;
    --md-sys-color-inverse-surface: #e2e2e9;
    --md-sys-color-inverse-on-surface: #2e3035;
    --md-sys-color-inverse-primary: #1b5e9e;
  }
}

:root[data-tema="oscuro"] {
  --md-sys-color-primary: #a2c9ff;
  --md-sys-color-on-primary: #00315b;
  --md-sys-color-primary-container: #004780;
  --md-sys-color-on-primary-container: #d3e4ff;

  --md-sys-color-secondary: #bbc7db;
  --md-sys-color-on-secondary: #253140;
  --md-sys-color-secondary-container: #3c4858;
  --md-sys-color-on-secondary-container: #d7e3f8;

  --md-sys-color-tertiary: #d7bee4;
  --md-sys-color-on-tertiary: #3b2948;
  --md-sys-color-tertiary-container: #533f5f;
  --md-sys-color-on-tertiary-container: #f3daff;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-success: #8ad6a0;
  --md-sys-color-success-container: #00522a;
  --md-sys-color-on-success-container: #c5f0d1;

  --md-sys-color-warning: #ffb960;
  --md-sys-color-warning-container: #693c00;
  --md-sys-color-on-warning-container: #ffddb3;

  --md-sys-color-surface: #111318;
  --md-sys-color-on-surface: #e2e2e9;
  --md-sys-color-on-surface-variant: #c3c6cf;
  --md-sys-color-surface-container-lowest: #0c0e13;
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1d2024;
  --md-sys-color-surface-container-high: #282a2f;
  --md-sys-color-surface-container-highest: #33353a;

  --md-sys-color-outline: #8d9199;
  --md-sys-color-outline-variant: #43474e;
  --md-sys-color-inverse-surface: #e2e2e9;
  --md-sys-color-inverse-on-surface: #2e3035;
  --md-sys-color-inverse-primary: #1b5e9e;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  user-select: none;
}

.icono-activo {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.oculto {
  display: none !important;
}

.texto-secundario {
  color: var(--md-sys-color-on-surface-variant);
}

.texto-positivo {
  color: var(--md-sys-color-success);
  font-weight: 600;
}

.texto-negativo {
  color: var(--md-sys-color-error);
  font-weight: 600;
}