/* Carta de diseño — docs/DISENO.md hecho CSS. Lo comparten las pantallas que
   ya la adoptaron (UI·10: el inicio primero). Solo define: no le cambia nada
   a una página que la cargue sin usar sus variables ni sus clases.

   Las fuentes son OFL y se sirven desde el propio dominio (sin Google Fonts).
   Solo el subconjunto latino: cubre el español entero (á, ñ, ¿, ¡…). El ✦ cae
   a la fuente del sistema, como hoy. Los .woff2 llevan versión en el nombre
   y van en INMUTABLES (server/app.py): si cambian, cambia el nombre. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fuentes/geist-latin.v1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fuentes/bricolage-latin.v1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* color: el papel de cada uno está en docs/DISENO.md §3 */
  --c-fondo: #0b1626;
  --c-hundido: #08111e;
  --c-superficie: #111f33;
  --c-elevada: #18293f;
  --c-activa: #1b3049;
  --c-linea: #22354f;
  --c-campo: #55708f;
  --c-texto: #ece8e1;
  --c-secundario: #93a3b8;
  --c-ambar: #da8c28;
  --c-ambar-claro: #f0a94a;
  --c-tinta: #14100a;
  --c-enlace: #a9c6ee;
  --c-exito: #3dd68c;
  --c-error: #ff8080;
  --c-aviso-fondo: #2e2110;
  --c-aviso-borde: #a96716;

  /* letra: seis tamaños y ninguno más (§2) */
  --f-texto: 'Geist', system-ui, sans-serif;
  --f-titulo: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-titulo-sm: 20px;
  --t-titulo-md: 24px;
  --t-titulo-lg: 32px;

  /* forma y movimiento (§4) */
  --r-chico: 6px;
  --r-medio: 10px;
  --r-boton: 12px;
  --r-grande: 16px;
  --m-rapido: 120ms;
  --m-normal: 200ms;
}

/* --- botones: tres niveles, cinco estados (§5) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-boton);
  font: 500 var(--t-sm)/1.2 var(--f-texto); text-decoration: none; cursor: pointer;
  transition: background-color var(--m-rapido) ease-out, border-color var(--m-rapido) ease-out,
    color var(--m-rapido) ease-out, transform var(--m-rapido) ease-out;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
/* el inline-flex de arriba le gana al atributo hidden: un botón oculto por JS
   seguía a la vista (UI·14 lo vio en agenda, métricas, shorts y MIX) */
.btn[hidden] { display: none; }
.btn:disabled { cursor: default; }

/* principal: UNO por pantalla, el que hace (y casi siempre cobra) */
.btn-pri { border: 0; background: var(--c-ambar); color: var(--c-tinta); font-weight: 600; }
.btn-pri:hover:not(:disabled) { background: var(--c-ambar-claro); }
/* al apretar se queda en #da8c28: el ámbar hondo con la tinta da 4.19:1 */
.btn-pri:disabled { border: 1px dashed var(--c-campo); background: var(--c-superficie);
  color: var(--c-secundario); }

.btn-sec { border: 1px solid var(--c-campo); background: transparent; color: var(--c-texto); }
.btn-sec:hover:not(:disabled) { background: var(--c-elevada); border-color: var(--c-secundario); }
.btn-sec:active:not(:disabled) { background: var(--c-activa); }
.btn-sec:disabled { color: var(--c-secundario); }

.btn-enlace { border: 0; background: none; padding: 0; min-height: 0; color: var(--c-enlace);
  font-family: var(--f-texto); font-size: inherit; font-weight: 500; cursor: pointer; }
.btn-enlace:hover { color: var(--c-texto); text-decoration: underline;
  text-underline-offset: 4px; }

.btn-peligro { border: 1px solid #8f4a4a; background: #2e1b1b; color: #ffb4b4; font-weight: 600; }
.btn-peligro:hover:not(:disabled) { border-color: var(--c-error); }
.btn-peligro:active:not(:disabled) { background: #8f4a4a; color: var(--c-texto); }

/* el botón nativo de «elegir archivo» con el aspecto del secundario */
input[type=file]::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 16px;
  cursor: pointer; border: 1px solid var(--c-campo); border-radius: var(--r-boton);
  background: transparent; color: var(--c-texto); font: 500 var(--t-sm)/1.2 var(--f-texto); }
input[type=file]::file-selector-button:hover { background: var(--c-elevada); border-color: var(--c-secundario); }

/* --- aviso (§3): informa algo que conviene notar; no es acción ni error.
   Caja apagada en ámbar hondo para que no se confunda con el botón principal,
   que es ámbar sólido (dueño, 25-sep). --- */
.aviso-caja { display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%;
  padding: 8px 12px; border-radius: var(--r-medio); background: var(--c-aviso-fondo);
  border: 1px solid var(--c-aviso-borde); color: var(--c-texto); }
.aviso-caja .ico { color: var(--c-ambar-claro); margin-top: 0.1em; }
/* igual que .btn: el display: flex le ganaba al atributo hidden (lo vio /entrar) */
.aviso-caja[hidden] { display: none; }

/* --- iconos de trazo (§6): los dibuja static/iconos.js --- */
.ico { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }

/* --- el mismo foco en todas partes (§4) --- */
:focus-visible { outline: 2px solid var(--c-ambar-claro); outline-offset: 3px; }

/* --- «reducir movimiento» del sistema: todo quieto --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* --- UI·18: entre pantallas, un fundido en vez del parpadeo en blanco ---
   Lo mismo que web/src/estilos/tokens.css, para que mientras dure la
   migración también se funda al ir y venir entre una pantalla vieja y una
   nueva. La píldora del saldo (monedero.js) lleva el mismo nombre en todas,
   así que se queda quieta. Con «reducir movimiento» no se pide; donde el
   navegador no lo sabe hacer, se navega como siempre. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }