/* INSTITUCIONAL · lo que producción tiene y la demo del diseñador no (04/10/2026).
   Armado con los tokens y las piezas de marca.css, según el "Diseño propuesto para lo que falta" de
   nuevo-frontend/cobertura-demo.md (sección Institucional). marca.css, landing.css y paginas.css son copias del
   diseñador y no se tocan: todo lo propio va acá. */

/* ---------- los saltos a una sección (#a-medida, #probar...) no quedan tapados por la barra fija (68 px) ---------- */
html { scroll-padding-top: 80px; }

/* ---------- si el JS no corre, el contenido se ve igual (el aparecer depende de JS) ---------- */
html:not(.js) .revela { opacity: 1; transform: none; }
html:not(.js) .bandeja .fila-b { opacity: 1; transform: none; }

/* ---------- probá con tu matrícula: sin resultados (ámbar) y errores con Reintentar (rojo), bajo el campo.
   Misma pieza que el error del asistente de la app (tarjeta suave con el botón a la derecha) ---------- */
.nota-mat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 640px;
  padding: 10px 12px; border-radius: 12px; font-size: var(--t-13);
  animation: aparece var(--d-media) var(--ease-salida);
}
.nota-mat > span { display: flex; align-items: center; gap: 8px; }
.nota-mat > span svg { width: 16px; height: 16px; flex: none; }
.nota-mat.alto { background: var(--alto-100); color: var(--alto-texto); }
.nota-mat.medio { background: var(--medio-100); color: var(--medio-texto); }

/* Barra superior en celulares muy angostos (≤360 px): entra en 320 sin desplazamiento lateral. Pedido del diseñador
   (04/10/2026): logo a 16 px, "Ingresar" oculto (está en el menú), botón primario compacto y menos separación */
@media (max-width: 360px) {
  .barra .contenedor { gap: 8px; }
  .barra .acciones { gap: 8px; }
  .barra .logo b { font-size: 16px; }
  .barra .acciones a.btn-secundario { display: none; }
  .barra .acciones .btn-primario { padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 360px) {
  /* en 320-360 px: la etiqueta larga de la bandeja parte renglón y las tarjetas de casos se dejan angostar */
  .bandeja .fila-b .insignia { white-space: normal; text-align: right; }
  .caso-i .par { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
  /* el logo inventado del caso ilustrativo: el círculo un poco más chico para que la palabra entre entera */
  .caso-i .logo-ola { gap: 5px; }
  .caso-i .logo-ola .circ { width: 28px; height: 28px; }
  .caso-i .logo-ola .circ svg { width: 18px; height: 18px; }
  .caso-i .signo { padding: 6px; }
}
@media (max-width: 340px) {
  .barra .acciones .btn-primario { padding: 0 8px; font-size: 12px; }
}
@media (max-width: 360px) {
  .casos-inst { grid-template-columns: minmax(0, 1fr); }
  .caso-i .top { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .caso-i .insignia { white-space: normal; }
}

/* Barra: donde el logo completo y el botón no entran juntos (se tapaban), queda solo el ícono; el link conserva
   su nombre accesible ("MarcaCheck, inicio") */
@media (max-width: 389px) { .barra .logo b { display: none; } }