/* AuriaPet — paleta y tokens, únicos para las cuatro superficies
 *
 * Antes cada archivo llevaba su propia copia: la app la tenía tres veces
 * (`:root`, el media query y los dos bloques `[data-theme]`), `live.html` una,
 * la landing otra —y la landing encima estaba clavada en claro—. Con la paleta
 * repetida, tocar un color y olvidarse de una copia hacía que la app cambiara
 * de identidad apenas se tocaba el tema.
 *
 * Los tres bloques que siguen tienen que declarar EXACTAMENTE los mismos
 * nombres. El orden importa:
 *   1. `:root`                       → claro, y es el que vale si no hay nada más
 *   2. `@media (prefers-color-scheme:dark)` → oscuro automático, salvo que el
 *      usuario haya fijado claro a mano
 *   3. `[data-theme="…"]`            → lo que fijó el usuario, gana siempre
 *
 * Quién pone `data-theme`: /js/tema.js, que cargan las cuatro superficies.
 */

:root {
  color-scheme: light dark;

  --bg:#F1F6FB; --surface:#FFFFFF; --surface-2:#F7FAFD;
  --ink:#0F2338; --ink-soft:#5B6E82; --line:#DCE7F2;

  /* Derivados del logo: celeste #3EC3F7 y azul marino #02409A. El fondo es un
     neutro frío — el beige de la primera versión peleaba con los azules. */
  --brand:#3EC3F7; --brand-deep:#0A5FBF; --brand-soft:rgba(62,195,247,.14);
  --brand-navy:#02409A;
  --on-brand:#FFFFFF;

  --coral:#F2825B; --coral-soft:rgba(242,130,91,.14);
  --ok:#20A97B; --ok-soft:rgba(32,169,123,.14);
  --warn:#D98C0C; --warn-soft:rgba(217,140,12,.09);
  --crit:#E14B3C; --crit-soft:rgba(225,75,60,.13);

  --shadow:0 6px 22px rgba(15,35,56,.08);
  --shadow-lg:0 14px 40px rgba(15,35,56,.14);
  --r:18px; --r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  accent-color: var(--brand-deep);
}

@media (prefers-color-scheme: dark) {
  /* :not([data-theme="light"]) para que quien eligió claro a mano no reciba el
     tema oscuro por tener el sistema en oscuro. */
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0B1622; --surface:#132234; --surface-2:#1A2C42;
    --ink:#E7EFF7; --ink-soft:#95A9BD; --line:rgba(255,255,255,.10);
    --brand:#5CCDF9; --brand-deep:#3EC3F7; --brand-soft:rgba(92,205,249,.16);
    --brand-navy:#2C6FD1; --on-brand:#06263F;
    --coral:#F2916E; --coral-soft:rgba(242,145,110,.16);
    --ok:#2FC492; --ok-soft:rgba(47,196,146,.16);
    --warn:#F0A62A; --warn-soft:rgba(240,166,42,.11);
    --crit:#FF6A5A; --crit-soft:rgba(255,106,90,.16);
    --shadow:0 6px 22px rgba(0,0,0,.4);
    --shadow-lg:0 16px 44px rgba(0,0,0,.55);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:#F1F6FB; --surface:#FFFFFF; --surface-2:#F7FAFD;
  --ink:#0F2338; --ink-soft:#5B6E82; --line:#DCE7F2;
  --brand:#3EC3F7; --brand-deep:#0A5FBF; --brand-soft:rgba(62,195,247,.14);
  --brand-navy:#02409A; --on-brand:#FFFFFF;
  --coral:#F2825B; --coral-soft:rgba(242,130,91,.14);
  --ok:#20A97B; --ok-soft:rgba(32,169,123,.14);
  --warn:#D98C0C; --warn-soft:rgba(217,140,12,.09);
  --crit:#E14B3C; --crit-soft:rgba(225,75,60,.13);
  --shadow:0 6px 22px rgba(15,35,56,.08);
  --shadow-lg:0 14px 40px rgba(15,35,56,.14);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0B1622; --surface:#132234; --surface-2:#1A2C42;
  --ink:#E7EFF7; --ink-soft:#95A9BD; --line:rgba(255,255,255,.10);
  --brand:#5CCDF9; --brand-deep:#3EC3F7; --brand-soft:rgba(92,205,249,.16);
  --brand-navy:#2C6FD1; --on-brand:#06263F;
  --coral:#F2916E; --coral-soft:rgba(242,145,110,.16);
  --ok:#2FC492; --ok-soft:rgba(47,196,146,.16);
  --warn:#F0A62A; --warn-soft:rgba(240,166,42,.11);
  --crit:#FF6A5A; --crit-soft:rgba(255,106,90,.16);
  --shadow:0 6px 22px rgba(0,0,0,.4);
  --shadow-lg:0 16px 44px rgba(0,0,0,.55);
}

/* ───── Mapa en oscuro ─────
 * Los tiles de OpenStreetMap no tienen variante oscura: en modo oscuro quedaban
 * como un rectángulo blanco encendido en medio de la pantalla. El filtro va SOLO
 * sobre .leaflet-tile-pane — los marcadores, la traza y el círculo de la
 * geocerca viven en otros panes, y si se invirtieran saldría el perro en
 * negativo. */
:root[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.88) saturate(.7);
}
:root[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(19,34,52,.85) !important; color: var(--ink-soft) !important;
}
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--brand) !important; }
:root[data-theme="dark"] .leaflet-bar a {
  background: var(--surface); color: var(--ink); border-bottom-color: var(--line);
}
:root[data-theme="dark"] .leaflet-bar a:hover { background: var(--surface-2); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.88) saturate(.7);
  }
  :root:not([data-theme="light"]) .leaflet-control-attribution {
    background: rgba(19,34,52,.85) !important; color: var(--ink-soft) !important;
  }
  :root:not([data-theme="light"]) .leaflet-control-attribution a { color: var(--brand) !important; }
  :root:not([data-theme="light"]) .leaflet-bar a {
    background: var(--surface); color: var(--ink); border-bottom-color: var(--line);
  }
}

/* ───── Iconos ─────
 * Trazo único para las cuatro superficies (ver /js/iconos.js). El color se
 * hereda con currentColor: nunca fijar `stroke` en el SVG. */
.ico-svg {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}