/* Utilidades que Tailwind no trae. Todo lo demás se hace con clases de Tailwind
   (configurado en base.html con la paleta de marca de Crescita). */

[x-cloak] { display: none !important; }
body { -webkit-font-smoothing: antialiased; }

/* Alturas seguras en móvil (barra del navegador). */
@supports (height: 100svh) {
  .h-screen-safe { height: 100svh; }
  .min-h-screen-safe { min-height: 100svh; }
}
@supports not (height: 100svh) {
  .h-screen-safe { height: 100vh; }
  .min-h-screen-safe { min-height: 100vh; }
}
@media (min-width: 768px) {
  @supports (height: 100svh) {
    .md\:h-screen-safe { height: 100svh; }
    .md\:min-h-screen-safe { min-height: 100svh; }
  }
  @supports not (height: 100svh) {
    .md\:h-screen-safe { height: 100vh; }
    .md\:min-h-screen-safe { min-height: 100vh; }
  }
}

/* Estados de HTMX: el botón que dispara una petición se atenúa. */
.hx-loading { display: none; }
.htmx-request .hx-loading { display: inline-flex; }
.htmx-request.hx-hide-while-loading { opacity: .4; pointer-events: none; }

/* Colores del mapa. Los mismos que pinta el PNG del escáner, para que la
   leyenda de la web y la imagen digan lo mismo. */
:root { --rank-top3: #2e7d32; --rank-top10: #f9a825; --rank-fuera: #c62828; }
.punto-top3  { background: var(--rank-top3); }
.punto-top10 { background: var(--rank-top10); }
.punto-fuera { background: var(--rank-fuera); }

/* Objetivos táctiles cómodos. */
@media (hover: none) { button, a { touch-action: manipulation; } }

/* Impresión: sin menú ni botones, el informe cabe en un folio. */
@media print {
  aside, header, nav, .no-print { display: none !important; }
  main { box-shadow: none !important; padding: 0 !important; }
}