/* 07-utilidades.css
   UTILIDADES POCO VISTOSAS PERO CLASICAS. Cada una resuelve un problema
   concreto que, sin ellas, obliga a inventar una clase nueva cada vez.

   No son un framework: son el punado de reglas que de verdad se repiten.

   NORMALIZADO: el velo y el enlace de salto usan tokens del tema en vez de
   negro/blanco fijos, para que tambien funcionen en temas oscuros.
   ========================================================== */

/* 1. RECORTAR TEXTO A N LINEAS
   Las tres declaraciones van juntas y en este orden: si falta una, el
   navegador ignora el recorte en silencio y el texto se ve completo. */
.truncar-1,
.truncar-2,
.truncar-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncar-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.truncar-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.truncar-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* 2. RELACION DE ASPECTO. Reemplaza al viejo truco del padding-top */
.aspecto-16 { aspect-ratio: 16 / 9; }
.aspecto-4  { aspect-ratio: 4 / 3; }
.aspecto-1  { aspect-ratio: 1 / 1; }
.aspecto-5  { aspect-ratio: 5 / 4; }

/* 3. IMAGEN QUE CUBRE SU CAJA SIN DEFORMARSE */
.cubrir { width: 100%; height: 100%; object-fit: cover; }

/* 4. FONDO CON VELO, para poner texto encima de una foto */
.velo { position: relative; }
.velo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65));
}
.velo > * { position: relative; z-index: 1; }

/* 5. LAS QUE SUELEN OLVIDARSE, y se notan cuando faltan */

/* El scroll horizontal en movil casi siempre se debe a algo mas ancho que la pantalla */
html { overflow-x: hidden; }

/* Pegajoso, con el hueco ya resuelto */
.pegajoso { position: sticky; top: 84px; }

/* Cuando un texto largo no debe partirse feo */
.no-cortar { white-space: nowrap; }
.equilibrado { text-wrap: balance; }   /* equilibra las lineas de un titular */

/* La lista sin vinetas, cuando el reset no esta cargado */
.sin-vinetas { list-style: none; padding: 0; }

/* Accesible: el enlace que solo aparece al tabular */
.saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-acento);
  color: var(--c-acento-texto);
  padding: 12px 18px;
  z-index: 999;
}
.saltar-contenido:focus { left: 0; }

/* 6. SOLO EN PAPEL. En pantalla no se ve; al imprimir, si.
   La pareja va junta y en el mismo archivo a proposito: asi funciona aunque
   la pagina no enlace 10-imprimir.css. Si el @media print viviera solo en ese
   archivo y no se enlazara, el elemento quedaria oculto tambien en papel: un
   error silencioso que no falla, simplemente no sale. */
.solo-impresion { display: none; }
@media print {
  .solo-impresion { display: revert; }
}

/* 7. TEXTO SECUNDARIO. El parrafo de apoyo: mas chico y con el color suave
   del tema. Faltaba en el kit aunque el diccionario ya hablaba de el. */
.texto-suave { color: var(--c-texto-suave); }

/* 8. PINTAR DE UN COLOR. Faltaban en el kit y hacen falta porque el diccionario
   DOCUMENTA el uso (`<span class="c-error">` para pintar un icono) y las paginas
   ya las usaban: cada una las definia a mano, y por eso no eran la misma clase.
   Se ponen en una utilidad y no en cada componente: asi pintar de acento es el
   MISMO nombre en la tarjeta, en la tabla y en el icono. El color sale del tema,
   igual que todo lo demas.
   Aviso: el color es la UNICA senal de estas clases. Para un estado que hay que
   entender sin ver el color (un error, un exito) va ADEMAS un texto o un icono. */
/* LOS ENLACES EN BLOQUE SI SON OBJETIVO. Un enlace en linea dentro de una frase
   esta exento (WCAG 2.5.8), pero el de un nav, una lista o un pie no: se le da
   area tactil propia, de 44px de alto (el objetivo de la casa). */
.nav__enlaces a, .lista-enlaces a, .pie a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;   /* una palabra corta ('Pie') tambien es un objetivo */
}

.c-acento { color: var(--c-acento); }

/* 9. UN HUECO ARRIBA. Nacio de un defecto real: el mismo hueco se escribia a mano
   en el HTML de cada pagina (`style="margin-top: var(--hueco)"`, en la demo y en
   el ejemplo). Eso es un valor del kit escrito en la pagina, y la regla 1 lo
   prohibe. Como nombre, queda en un solo lugar y sin style en linea. */
.separado-arriba { margin-top: var(--hueco); }
.c-suave  { color: var(--c-texto-suave); }
.c-error  { color: var(--c-error); }
.c-exito  { color: var(--c-exito); }