/* base.css — Sistema de diseño de METME: tokens, tipografía y reset.
   La identidad actual (azul y superficies neutras), las preferencias de tema
   y los ajustes finales están en experiencia.css, cargado al final.
   ---------------------------------------------------------------------------
   METME comparte identidad con sus mini-apps (SportMatch y Cuenta Clara):
   lienzo claro que tira a crema, tarjetas blancas, verde bosque como color de
   marca, lima como acento de acción, esquinas redondeadas y botones píldora.
   Titulares en Manrope, texto en DM Sans (las mismas fuentes que SportMatch).

   Todo el color sale de aquí. Los demás archivos usan SOLO estos tokens; el
   tema oscuro es este mismo bloque reinterpretado (prefers-color-scheme).

   Nota de compatibilidad: --azul es un nombre histórico que muchos estilos
   en línea del JavaScript usan como "color primario". Ahora es el verde de
   marca; --verde es verde de tinta (legible sobre blanco) para éxito/precios.
   --------------------------------------------------------------------------- */
:root {
  /* Marca */
  --azul: #1b704b;            /* primario: botones, enlaces, activo */
  --azul-h: #145a3c;          /* primario al pasar el ratón */
  --marca-suave: #e6f2e8;     /* fondos de chips y elementos activos */
  --lima: #d5f587;            /* acento de acción (botón verde, "Crear") */
  --lima-txt: #173d20;        /* texto sobre lima */
  --verde: #15803d;           /* tinta de éxito / precios / "en línea" */
  --violeta: #7c5cc4;
  --naranja: #c2570c;

  /* Superficies */
  --bg: #f6f8f4;              /* lienzo */
  --fondo: #f6f8f4;           /* fondo del panel lateral */
  --panel: #ffffff;           /* tarjetas flotantes, menús, popovers */
  --panel-2: #ffffff;         /* tarjetas dentro de paneles */
  --campo: #f1f5ef;           /* campos de formulario y rellenos suaves */
  --vidrio: rgba(255, 255, 255, .88);
  --tinte: rgba(24, 51, 43, .045);
  --tinte-2: rgba(24, 51, 43, .085);
  --tinte-3: rgba(24, 51, 43, .14);

  /* Líneas y texto */
  --line: #e6ebe4;
  --line-2: #d8e0d5;
  --txt: #18332b;
  --txt-2: #40564a;
  --mut: #6f7d74;

  /* Semánticos */
  --peligro: #c11f2a;
  --peligro-suave: #fdeced;
  --aviso: #a65707;
  --aviso-suave: #fdf1df;
  --exito-suave: #e7f6ee;
  --info: #0b6998;

  /* Sombras suaves con matiz verde (nada de negro puro sobre crema) */
  --sh-sm: 0 1px 2px rgba(22, 48, 36, .06);
  --sh-md: 0 6px 20px rgba(22, 48, 36, .08);
  --sh-lg: 0 18px 50px rgba(22, 48, 36, .14);
  --sh-glow: 0 0 0 1px var(--line), 0 10px 30px rgba(22, 48, 36, .10);

  /* Radios y movimiento */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --f-titulo: 'Manrope', 'DM Sans', system-ui, sans-serif;
  --f-texto: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

/* Tema oscuro: misma identidad sobre un casi negro con matiz verde */
@media (prefers-color-scheme: dark) {
  :root {
    --azul: #3fae74; --azul-h: #55c287; --marca-suave: rgba(63, 174, 116, .16);
    --lima: #c8ec73; --lima-txt: #112a17; --verde: #4ade80; --violeta: #a78bfa; --naranja: #fb923c;
    --bg: #0c1310; --fondo: #0f1814; --panel: #141f1a; --panel-2: #17231d; --campo: #1c2923;
    --vidrio: rgba(20, 31, 26, .88);
    --tinte: rgba(255, 255, 255, .045); --tinte-2: rgba(255, 255, 255, .08); --tinte-3: rgba(255, 255, 255, .14);
    --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
    --txt: #eef4f0; --txt-2: #c6d2cb; --mut: #8e9c94;
    --peligro: #f87171; --peligro-suave: rgba(248, 113, 113, .12);
    --aviso: #fbbf24; --aviso-suave: rgba(251, 191, 36, .12); --exito-suave: rgba(74, 222, 128, .12); --info: #7dd3fc;
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .3); --sh-md: 0 6px 20px rgba(0, 0, 0, .35); --sh-lg: 0 18px 50px rgba(0, 0, 0, .5);
    --sh-glow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--f-texto); color: var(--txt); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .ph-name, .name { font-family: var(--f-titulo); letter-spacing: -0.02em; }
#map { position: absolute; inset: 0; background: var(--bg); }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
::selection { background: var(--lima); color: var(--lima-txt); }

/* Iconos de línea (src/ui/iconos.js) */
.ico { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.2em; flex: 0 0 auto; }
.ico svg { width: 100%; height: 100%; display: block; }