:root {
  /* Fuente Roboto Flex y Material Symbols */
  --md-sys-typescale-body-large-font: 'Roboto Flex', system-ui, -apple-system, sans-serif;
  
  /* Shapes */
  --md-sys-shape-corner-none: 0px;
  --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;

  /* Easing y Animaciones M3 */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-long1: 500ms;

  /* PALETA DARK MODE (Default) */
  --md-sys-color-primary: #78dc96;
  --md-sys-color-on-primary: #00391b;
  --md-sys-color-primary-container: #00522a;
  --md-sys-color-on-primary-container: #95f7b0;
  --md-sys-color-secondary: #b6ccb9;
  --md-sys-color-on-secondary: #213527;
  --md-sys-color-secondary-container: #374b3c;
  --md-sys-color-on-secondary-container: #d2e8d4;
  --md-sys-color-tertiary: #a2cedd;
  --md-sys-color-on-tertiary: #013542;
  --md-sys-color-tertiary-container: #204d5a;
  --md-sys-color-on-tertiary-container: #beeaf9;
  --md-sys-color-surface: #0f1511;
  --md-sys-color-on-surface: #e2e3dd;
  --md-sys-color-surface-variant: #434943;
  --md-sys-color-on-surface-variant: #c3c8c1;
  --md-sys-color-surface-container: #1b211d;
  --md-sys-color-surface-container-low: #171d19;
  --md-sys-color-surface-container-high: #252b27;
  --md-sys-color-surface-container-highest: #303631;
  --md-sys-color-outline: #8d938b;
  --md-sys-color-outline-variant: #434943;
  --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-inverse-surface: #e2e3dd;
  --md-sys-color-inverse-on-surface: #1b211d;
}

/* PALETA LIGHT MODE (Explícita) */
:root[data-theme="light"] {
  --md-sys-color-primary: #006d3a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #95f7b0;
  --md-sys-color-on-primary-container: #00210c;
  --md-sys-color-secondary: #4f6353;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d2e8d4;
  --md-sys-color-on-secondary-container: #0d1f13;
  --md-sys-color-tertiary: #3a6572;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #beeaf9;
  --md-sys-color-on-tertiary-container: #001f26;
  --md-sys-color-surface: #f7fbf3;
  --md-sys-color-on-surface: #191c19;
  --md-sys-color-surface-variant: #e0e5dd;
  --md-sys-color-on-surface-variant: #434943;
  --md-sys-color-surface-container: #ecf2ea;
  --md-sys-color-surface-container-low: #f1f7f0;
  --md-sys-color-surface-container-high: #e7ece5;
  --md-sys-color-surface-container-highest: #e1e7e0;
  --md-sys-color-outline: #737972;
  --md-sys-color-outline-variant: #c3c8c1;
  --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-inverse-surface: #2f312d;
  --md-sys-color-inverse-on-surface: #f1f1eb;
}

/* PALETA DARK MODE (Explícita) */
:root[data-theme="dark"] {
  --md-sys-color-primary: #78dc96;
  --md-sys-color-on-primary: #00391b;
  --md-sys-color-primary-container: #00522a;
  --md-sys-color-on-primary-container: #95f7b0;
  --md-sys-color-secondary: #b6ccb9;
  --md-sys-color-on-secondary: #213527;
  --md-sys-color-secondary-container: #374b3c;
  --md-sys-color-on-secondary-container: #d2e8d4;
  --md-sys-color-tertiary: #a2cedd;
  --md-sys-color-on-tertiary: #013542;
  --md-sys-color-tertiary-container: #204d5a;
  --md-sys-color-on-tertiary-container: #beeaf9;
  --md-sys-color-surface: #0f1511;
  --md-sys-color-on-surface: #e2e3dd;
  --md-sys-color-surface-variant: #434943;
  --md-sys-color-on-surface-variant: #c3c8c1;
  --md-sys-color-surface-container: #1b211d;
  --md-sys-color-surface-container-low: #171d19;
  --md-sys-color-surface-container-high: #252b27;
  --md-sys-color-surface-container-highest: #303631;
  --md-sys-color-outline: #8d938b;
  --md-sys-color-outline-variant: #434943;
  --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-inverse-surface: #e2e3dd;
  --md-sys-color-inverse-on-surface: #1b211d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--md-sys-typescale-body-large-font);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}