/* ══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · BASE
   Normalizacion y tipografia. Nada de componentes: eso va en componentes.css.
   ══════════════════════════════════════════════════════════════════════════ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Quien pidio menos movimiento en su sistema no deberia recibir animaciones
   ni desplazamiento suave. Es accesibilidad, no una preferencia estetica. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;

    /* El retraso tambien, y no es un detalle: una animacion de entrada con
       `fill-mode: backwards` mantiene el estado inicial —opacidad cero—
       durante todo el retraso. Sin anularlo, quien pidio menos movimiento no
       veia la animacion pero SI veia medio segundo de pantalla en blanco,
       que es peor. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
}

body {
  min-height: 100svh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-md);
  line-height: var(--linea-texto);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tipografia ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-negro);
  line-height: var(--linea-titulo);
  letter-spacing: var(--letra-titulo);
  text-wrap: balance;          /* evita la ultima linea con una sola palabra */
  color: var(--texto);
}

h1 { font-size: var(--t-4xl); line-height: var(--linea-apretada); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); font-weight: var(--peso-fuerte); }
h6 { font-size: var(--t-md); font-weight: var(--peso-fuerte); }

p {
  text-wrap: pretty;
}

p, li {
  max-width: var(--ancho-texto);
}

small {
  font-size: var(--t-sm);
}

strong, b {
  font-weight: var(--peso-fuerte);
}

code, kbd, samp, pre {
  font-family: var(--fuente-mono);
  font-size: 0.9em;
}

/* ── Enlaces ────────────────────────────────────────────────────────────── */

a {
  color: var(--marca-fuerte);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transicion-rapida);
}

a:hover {
  color: var(--azul-800);
}

/* ── Foco ───────────────────────────────────────────────────────────────────
   :focus-visible y no :focus, para que el anillo aparezca al navegar con
   teclado pero no al hacer clic con el mouse.                               */

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Multimedia ─────────────────────────────────────────────────────────── */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* OJO: aqui NO se declara `svg { fill: currentColor }`.
   Los atributos de presentacion del SVG (fill="none" stroke="currentColor")
   pierden frente a cualquier regla CSS, asi que esa linea rellenaba todos
   los iconos de trazo y los convertia en manchas solidas.
   Cada icono decide su propio relleno. */

/* ── Formularios ────────────────────────────────────────────────────────── */

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

button:disabled {
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */

table {
  border-collapse: collapse;
  width: 100%;
}

/* ── Listas sin viñeta cuando son navegacion ────────────────────────────── */

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--borde);
  margin: var(--e-8) 0;
}

::selection {
  background: var(--azul-200);
  color: var(--azul-900);
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */

/* Visible solo para lectores de pantalla. */
.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;
}

/* Salto al contenido: aparece al tabular desde el inicio de la pagina. */
.saltar-contenido {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: var(--z-aviso);
  padding: var(--e-3) var(--e-5);
  background: var(--marca);
  color: var(--marca-contraste);
  border-radius: var(--radio-sm);
  font-weight: var(--peso-fuerte);
  transform: translateY(-150%);
  transition: transform var(--transicion);
}

.saltar-contenido:focus {
  transform: translateY(0);
}

.oculto {
  display: none !important;
}

[hidden] {
  display: none !important;
}