/* ============================================================================
   Sistema OSECAC — Base
   Elementos HTML y reglas transversales. Depende de tokens.css.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

/* ── El velo celeste del toque (T117) ───────────────────────────────────────
   Hasta acá sólo `.pestana` y `.accion` lo apagaban, cada una por su lado en
   `componentes.css`. Todo lo demás que se toca y no tiene la excepción puesta
   a mano —enlaces de `.barras`/`.barra--elegible`, las pestañas del legajo
   (`.conmutador--legajo a`), las filas de `.grilla--seleccion`, `.casilla`, los
   botones y enlaces de `.acciones--barra`— podía mostrar el resaltado táctil
   nativo de Chrome/Android. La regla va **una vez, global**, acá y no
   componente por componente: las dos declaraciones locales de
   `.pestana`/`.accion` quedan redundantes (no se retiran: no está de más que un
   componente nuevo la copie por las dudas) y todo lo que se toque de acá en
   adelante la hereda sin que nadie tenga que acordarse. */
html{-webkit-tap-highlight-color:transparent}

html{background:var(--cielo-piso)}

body{
  margin:0;
  /* 🔀 El fondo se mudó al `<html>` y al cielo (gesto 10, 06/09/2026).
     Antes la aurora entera se pintaba acá. Ahora el `<body>` es transparente
     para dejar ver las dos capas fijas del cielo, que son las que giran y se
     cruzan al cambiar de tema. El piso queda en el `<html>` —y no acá— por dos
     razones: es lo que pinta el lienzo del navegador, así que no hay destello
     blanco antes del primer cuadro; y una pantalla que se olvide de poner el
     cielo se ve con el fondo liso del tema, nunca en blanco. */
  background:transparent;
  color:var(--texto);
  font-family:var(--f-texto);
  font-size:var(--fs-base);
  line-height:var(--alto-linea);
  -webkit-font-smoothing:antialiased;
}

/* ── Foco ───────────────────────────────────────────────────────────────────
   Siempre visible. Un teclado tiene que poder recorrer toda la aplicación. */
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--radio-1);
}
:focus:not(:focus-visible){outline:none}

/* ── Tipografía ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--f-titulo);
  font-weight:var(--peso-negro);
  letter-spacing:var(--track-titulo);
  margin:0;
  text-wrap:balance;
}
p{margin:0}

/* Etiqueta: el rótulo en versalitas que encabeza un dato */
.etiqueta{
  font-family:var(--f-dato);
  font-size:var(--fs-etiqueta);
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  color:var(--texto-2);
}

/* ── Dinero y números ───────────────────────────────────────────────────────
   Regla innegociable: los importes van a la derecha, con cifras de ancho fijo
   y formato DD/MM/YYYY para fechas. El formateo lo hace el backend
   (es-AR: $ 1.234.567,89); la UI sólo garantiza que las columnas alineen. */
.cifra{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  text-align:right;
  white-space:nowrap;
  letter-spacing:-.01em;
}
.cifra--fuerte{font-weight:var(--peso-fuerte)}
.cifra--total{
  font-family:var(--f-titulo);
  font-size:var(--fs-cifra);
  font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra);
}
.dato{
  font-family:var(--f-dato);
  font-size:var(--fs-menor);
  letter-spacing:-.02em;
  color:var(--texto-2);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────────
   Ojo al implementar: al fijar scrollbar-color, Chromium DESCARTA las reglas
   ::-webkit-scrollbar. No conviven. Van primero las propiedades estándar,
   que son las únicas que reestilan las barras superpuestas de macOS y Android;
   los pseudoelementos quedan de reserva tras un @supports. */
html{scrollbar-width:thin;scrollbar-color:var(--barra) transparent}
*{scrollbar-width:thin;scrollbar-color:var(--barra) transparent}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{
    background-color:var(--barra);
    background-clip:padding-box;
    border:3px solid transparent;
    border-radius:var(--radio-pastilla);
    transition:background-color var(--dur-corta) var(--curva-salida);
  }
  ::-webkit-scrollbar-thumb:hover{background-color:var(--barra-hover)}
  ::-webkit-scrollbar-thumb:active{background-color:var(--acento)}
  ::-webkit-scrollbar-corner{background:transparent}
}
/* Carrusel: sin barra. El anclaje ya avisa que hay más. */
.sin-barra{scrollbar-width:none}
.sin-barra::-webkit-scrollbar{display:none}

/* ── Contenedor de consulta ─────────────────────────────────────────────────
   Todo el responsive del sistema mira el ancho del CONTENEDOR, no el del
   viewport, para que un componente embebido se reacomode igual. */
.app{container-type:inline-size;container-name:app}

/* ── Utilidades mínimas ─────────────────────────────────────────────────── */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.desplazable{overflow-x:auto}