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

:root {
  --color-fondo: #faf6f1;
  --color-superficie: #ffffff;
  --color-superficie-alt: #f5ede3;
  --color-texto: #2d1b0e;
  --color-texto-suave: #7a5832;
  --color-primario: #3a855c;
  --color-primario-hover: #2e6e4a;
  --color-borde: #a6825e21;
  --color-exito: #3a855c;
  --color-alerta: #b84848;
  --color-advertencia: #b07e24;
  --color-toast: #2d1b0e;
  --badge-alerta-bg: #fae5e5;
  --badge-advertencia-bg: #f8edcf;
  --badge-exito-bg: #e4f2ea;
  --color-peligro: #b84848;
  --color-peligro-hover: #a33d3d;
  --color-peligro-bg: #fae5e5;

  --radio: 10px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  --sombra: 0 1px 3px rgba(45, 27, 14, 0.09), 0 1px 2px rgba(45, 27, 14, 0.06);
  --sombra-md: 0 4px 12px rgba(45, 27, 14, 0.1), 0 2px 4px rgba(45, 27, 14, 0.06);
  --sombra-lg: 0 8px 24px rgba(45, 27, 14, 0.14), 0 4px 8px rgba(45, 27, 14, 0.06);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --fs-h1: 1.7rem;
  --fs-h2: 1.2rem;
  --fs-h3: 1.02rem;
  --fs-body: 0.95rem;
  --fs-small: 0.82rem;

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a5832'%3E%3Cpath d='M6 8l4 4 4-4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #1c1a17;
    --color-superficie: #272420;
    --color-superficie-alt: #1f1d19;
    --color-texto: #e8e4e0;
    --color-texto-suave: #a09688;
    --color-primario: #4ca06e;
    --color-primario-hover: #3d8a5c;
    --color-borde: #ffffff14;
    --color-exito: #4ca06e;
    --color-alerta: #d06060;
    --color-advertencia: #c89830;
    --color-toast: #2e2b26;
    --badge-alerta-bg: #d060601f;
    --badge-advertencia-bg: #c898301f;
    --badge-exito-bg: #4ca06e1f;
    --color-peligro: #d06060;
    --color-peligro-hover: #c04e4e;
    --color-peligro-bg: #d060601f;
    --sombra: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
    --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a09688'%3E%3Cpath d='M6 8l4 4 4-4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  --color-fondo: #1c1a17;
  --color-superficie: #272420;
  --color-superficie-alt: #1f1d19;
  --color-texto: #e8e4e0;
  --color-texto-suave: #a09688;
  --color-primario: #4ca06e;
  --color-primario-hover: #3d8a5c;
  --color-borde: #ffffff14;
  --color-exito: #4ca06e;
  --color-alerta: #d06060;
  --color-advertencia: #c89830;
  --color-toast: #2e2b26;
  --badge-alerta-bg: #d060601f;
  --badge-advertencia-bg: #c898301f;
  --badge-exito-bg: #4ca06e1f;
  --color-peligro: #d06060;
  --color-peligro-hover: #c04e4e;
  --color-peligro-bg: #d060601f;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
  --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a09688'%3E%3Cpath d='M6 8l4 4 4-4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  --color-fondo: #faf6f1;
  --color-superficie: #ffffff;
  --color-superficie-alt: #f5ede3;
  --color-texto: #2d1b0e;
  --color-texto-suave: #7a5832;
  --color-primario: #3a855c;
  --color-primario-hover: #2e6e4a;
  --color-borde: #a6825e21;
  --color-exito: #3a855c;
  --color-alerta: #b84848;
  --color-advertencia: #b07e24;
  --color-toast: #2d1b0e;
  --badge-alerta-bg: #fae5e5;
  --badge-advertencia-bg: #f8edcf;
  --badge-exito-bg: #e4f2ea;
  --color-peligro: #b84848;
  --color-peligro-hover: #a33d3d;
  --color-peligro-bg: #fae5e5;
  --sombra: 0 1px 3px rgba(45, 27, 14, 0.09), 0 1px 2px rgba(45, 27, 14, 0.06);
  --sombra-md: 0 4px 12px rgba(45, 27, 14, 0.1), 0 2px 4px rgba(45, 27, 14, 0.06);
  --sombra-lg: 0 8px 24px rgba(45, 27, 14, 0.14), 0 4px 8px rgba(45, 27, 14, 0.06);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a5832'%3E%3Cpath d='M6 8l4 4 4-4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html, body {
  height: 100%;
  font-family: "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: var(--fs-body);
}

h1, h2, h3 { line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-1); }
h2 { font-size: var(--fs-h2); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-h3); }
p { font-size: var(--fs-body); }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 1em; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}