/* ==========================================================================
   BASE: normalización y TIPOGRAFÍA
   --------------------------------------------------------------------------
   Cómo se ven los textos en todo el sistema. Estas clases se reutilizan en
   cada módulo; no hace falta redefinir tamaños ni colores en otro lado.
   ========================================================================== */

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

/* `hidden` esconde de verdad.
   El atributo trae de fábrica `display: none`, pero cualquier regla propia que
   fije el display —y en este sistema son casi todas: los botones son
   `inline-flex` y las casillas `flex`— le gana por especificidad. El elemento
   queda con el atributo puesto y a la vista, que es la peor de las dos cosas:
   el lector de pantalla lo saltea y el ojo lo ve. Ya había un parche para un
   caso suelto; esto vale para todos. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-base);
  font-size: var(--texto-base);
  line-height: var(--interlineado-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Las cifras tabulares van acá, en toda la página, y no sólo en las tablas.
     Segoe UI tiene dos juegos de dígitos: los proporcionales del texto corrido
     y los tabulares, que son más anchos y todos del mismo ancho. Aplicados
     sólo a los datos, un importe dentro de una tabla y el mismo importe dentro
     de una frase se veían distintos —parecían de otra tipografía— y de eso se
     trataba la queja. Un dígito es igual en todo el sistema. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
   Títulos
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--peso-semi);
  line-height: var(--interlineado-ajustado);
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--color-texto);
}

.titulo-pagina  { font-size: var(--texto-xl); letter-spacing: -0.02em; }
.titulo-seccion { font-size: var(--texto-lg); }
.titulo-panel   { font-size: var(--texto-md); }
.titulo-menor   { font-size: var(--texto-base); }

/* --------------------------------------------------------------------------
   Texto
   -------------------------------------------------------------------------- */
p { margin: 0 0 var(--esp-3); }
p:last-child { margin-bottom: 0; }

.texto-suave { color: var(--color-texto-suave); }
.texto-tenue { color: var(--color-texto-tenue); }
.texto-sm    { font-size: var(--texto-sm); }
.texto-xs    { font-size: var(--texto-xs); }
.texto-medio { font-weight: var(--peso-medio); }
.texto-semi  { font-weight: var(--peso-semi); }

/* --------------------------------------------------------------------------
   DATOS FISCALES
   CUIT, fechas, períodos e importes. Van en la misma familia que todo el
   resto; lo único que cambia es que usan cifras tabulares, para que los
   dígitos queden alineados en columna y un error de tipeo se note.
   `font-feature-settings` es el respaldo para navegadores viejos.
   -------------------------------------------------------------------------- */
.dato-fiscal,
.texto-numero {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.dato-fiscal--destacado {
  font-size: var(--texto-3xl);
  font-weight: var(--peso-semi);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Etiqueta corta en mayúsculas que encabeza bloques de datos */
.etiqueta {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

.truncar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Enlaces
   -------------------------------------------------------------------------- */
a {
  color: var(--color-primario-texto);
  text-decoration: none;
  transition: color var(--transicion);
}
a:hover { text-decoration: underline; }

.enlace-discreto { color: inherit; text-decoration: none; }
.enlace-discreto:hover { color: var(--color-primario-texto); text-decoration: none; }

/* --------------------------------------------------------------------------
   Foco visible (uso con teclado)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* --------------------------------------------------------------------------
   Iconos
   -------------------------------------------------------------------------- */
.icono {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icono--grande { width: 1.25em; height: 1.25em; }
.icono--vacio  { width: 2rem; height: 2rem; stroke-width: 1.25; }

/* --------------------------------------------------------------------------
   Separadores
   -------------------------------------------------------------------------- */
hr,
.separador {
  border: none;
  border-top: 1px solid var(--color-borde);
  margin: var(--esp-4) 0;
}

/* --------------------------------------------------------------------------
   Utilidades de disposición
   -------------------------------------------------------------------------- */
.fila { display: flex; align-items: center; gap: var(--esp-2); }
.fila--separada { justify-content: space-between; }
.fila--fin { justify-content: flex-end; }
.fila--ajustable { flex-wrap: wrap; }

.columna { display: flex; flex-direction: column; gap: var(--esp-2); }

.rejilla { display: grid; gap: var(--esp-4); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Cada celda con su propio alto. Por omisión la rejilla estira todas a la más
   alta, y un panel que es hijo directo queda con un hueco en blanco abajo: la
   agenda del resumen tomaba el alto de la deuda con sus planes. */
.rejilla--arriba { align-items: start; }
/* Paneles uno debajo del otro dentro de una celda de la rejilla, con su mismo
   espacio: sin esto se tocan y se leen como un solo recuadro. */
.pila { display: grid; gap: var(--esp-4); align-content: start; }

@media (max-width: 1400px) {
  .rejilla--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .rejilla--4,
  .rejilla--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rejilla--2,
  .rejilla--3,
  .rejilla--4,
  .rejilla--5 { grid-template-columns: minmax(0, 1fr); }
}

.sin-margen { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lo que se lee sólo con un lector de pantalla: el encabezado de columnas
   que la vista ya dice de otra forma. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}