/* Generado por El Michi desde Ajustes → Apariencia. No editar a mano:
   se reescribe cada vez que Maxi guarda. */
:root {
  --rojo-100: #FEE6E7;
  --rojo-200: #FDAEB3;
  --rojo-400: #FA5762;
  --rojo-500: #F80111;
  --rojo-600: #D5010F;
  --rojo-700: #90010A;

  --oro-100: #FFF9E6;
  --oro-200: #FEECAE;
  --oro-400: #FED957;
  --oro-500: #FDC501;
  --oro-600: #8D6E01;
  --oro-700: #937201;

  --fondo: #C3121B;
  --sutil: #B51119;
  --hundida: #890D13;
  --linea: #D35056;
  --linea-suave: #CB333B;

  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --e1: 3px; --e2: 7px;  --e3: 10px; --e4: 13px;
  --e5: 17px; --e6: 20px; --e7: 27px; --e8: 34px; --e9: 47px;

  --nav-h: 58px;
  --fuente: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { font-size: 14.5px; }
.btn { min-height: 42px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --rojo-500: #F80111;
    --oro-500: #FDC501;
    --fondo: #16100D; --sutil: #251B16; --hundida: #100B09;
    --linea: #3A2B23; --linea-suave: #2D211B;
  }
}
:root[data-tema="oscuro"] {
  --rojo-500: #F80111;
  --oro-500: #FDC501;
  --fondo: #16100D; --sutil: #251B16; --hundida: #100B09;
  --linea: #3A2B23; --linea-suave: #2D211B;
}

/* fondo intenso: superficies y textos derivados del mismo color */
:root {
  --superficie: #A40F17;
  --sutil: #B51119;
  --hundida: #890D13;
  --linea: #D35056;
  --linea-suave: #CB333B;
  --texto: #FDF8F8;
  --texto-suave: #F4D4D6;
  --texto-tenue: #EBAEB1;
  --rojo-500: #FDAFB4;
  --rojo-400: #FDAFB4;
  --oro-500: #FDC501;
  --rojo-100: #790B11;
  --rojo-200: #940E15;
  --rojo-600: #FDAFB4;
  --rojo-700: #FDAFB4;
  --oro-100: #790B11;
  --oro-200: #940E15;
  --oro-400: #FDC501;
  --oro-600: #FDC501;
  --oro-700: #FDC501;
  --sombra-1: 0 1px 2px rgba(0,0,0,.24);
  --sombra-2: 0 2px 8px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.18);
  --sombra-3: 0 10px 26px rgba(0,0,0,.26);
  --sombra-4: 0 24px 60px rgba(0,0,0,.34);
}
/* sobre fondo intenso, el botón principal va en oro: el rojo se perdería */
.btn-primario { background: var(--oro-500); color: #2A1C00; }
.btn-primario:hover { background: var(--oro-400); }