/* Superficies del navegador y movimiento. CSS plano (sin @apply) para que funcione
   igual con Tailwind compilado y con el CDN de desarrollo. */
:root {
  color-scheme: light;
  accent-color: #245a7e;
  --sel: #d6e4ef;
  --foco: #245a7e;
  --barra: #cdd1cf;
}
:root.dark {
  color-scheme: dark;
  accent-color: #7fa7c7;
  --sel: #173c55;
  --foco: #7fa7c7;
  --barra: #3f3f46;
}

::selection { background: var(--sel); }
html { scrollbar-color: var(--barra) transparent; -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; }

/* Cifras alineadas en todo lo que se compara o se actualiza */
table, dl, output, .cifra { font-variant-numeric: tabular-nums; }

/* Foco visible por defecto para todo lo que no define el suyo */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Esqueleto de carga: barra gris plana, sin brillo */
.esqueleto { display: inline-block; height: .75em; border-radius: 3px; background: #e7e9e8; vertical-align: middle; }
:root.dark .esqueleto { background: #27272a; }

/* Diálogos y avisos: entran con opacidad y un desplazamiento corto */
dialog[open] { animation: sga-entra 180ms cubic-bezier(.16, 1, .3, 1); }
dialog::backdrop { background: rgb(9 9 11 / .45); animation: sga-fundido 180ms ease-out; }
.sga-toast { animation: sga-sube 200ms cubic-bezier(.16, 1, .3, 1); }
.sga-toast.saliendo { opacity: 0; transform: translateY(4px); transition: opacity 160ms ease-in, transform 160ms ease-in; }

@keyframes sga-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sga-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sga-fundido { from { opacity: 0; } to { opacity: 1; } }

/* Menú móvil: un <dialog> pegado a la izquierda que entra deslizándose */
dialog.cajon-dialogo[open] { animation: sga-desliza 240ms cubic-bezier(.16, 1, .3, 1); }
@keyframes sga-desliza { from { transform: translateX(-100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog.cajon-dialogo[open], dialog::backdrop, .sga-toast { animation: sga-fundido 120ms ease-out; }
  .sga-toast.saliendo { transform: none; }
}