/* ── RED DE SEGURIDAD (sin dependencia del CDN de Tailwind) ─────────────
 * El sitio usa el CDN de Tailwind, que genera sus clases EN TIEMPO DE
 * EJECUCIÓN con JavaScript. Si ese script tarda o falla (típico en móvil:
 * conexión lenta, ahorro de datos, bloqueadores), las clases críticas de
 * layout no existen y la página desborda. Estas reglas replican en CSS
 * plano — que carga siempre y al instante — lo mínimo para que nada se
 * rompa: contención horizontal del documento, la marquesina contenida,
 * el modal oculto y los utilitarios de los que depende el markup
 * guardado del header/footer (nuevo y legacy).
 */
html { overflow-x: hidden; overflow-x: clip; }
.overflow-hidden { overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; }
.hidden { display: none; }
#modal-notificacion {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(41, 44, 51, .6);
}
#modal-notificacion.hidden { display: none; }

.paper-texture {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23292c33' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.dotted-grid {
  background-image: radial-gradient(#c9c1b4 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: inline-block;
  animation: marquee 35s linear infinite;
}

/* Quita el resaltado táctil por defecto (azul/gris) del navegador en móvil,
   que no corresponde a la paleta Krofberg, y define estados hover/active
   consistentes con la marca en enlaces, botones y el menú hamburguesa. */
a, button, .tap-highlight-none {
  -webkit-tap-highlight-color: transparent;
}
#mobile-menu a {
  -webkit-tap-highlight-color: transparent;
}
#mobile-menu a:active {
  color: #487265; /* krof-pine */
}

/* ── MODO LIVIANO (v1.16.1): el sitio ya no depende de Tailwind CDN ni de
 * Font Awesome en instalaciones sin versiones legacy guardadas. Estas
 * reglas cubren TODO lo que antes pintaban esos frameworks: las clases
 * del body (que inyecta HeaderFooterCompat) y el modal de notificaciones.
 */

/* Clases del body (antes las generaba el CDN de Tailwind en runtime) */
.bg-krof-cream { background-color: #f3f1ef; }
.text-krof-carbon { color: #292c33; }
.font-sans { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Modal de notificaciones (rl-nm-*), sin frameworks */
#modal-notificacion { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rl-nm-card {
  background: #ffffff;
  border: 1px solid #e4e0dd;
  border-radius: 24px;
  padding: 2rem;
  max-width: 28rem;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(41, 44, 51, .25);
  text-align: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rl-nm-card > * + * { margin-top: 1.5rem; }
.rl-nm-icono {
  height: 4rem; width: 4rem;
  background: #deecc7; color: #3a5d52;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  margin-left: auto; margin-right: auto;
}
.rl-nm-textos > * + * { margin-top: .5rem; }
.rl-nm-titulo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700; font-size: 1.25rem; line-height: 1.3;
  color: #292c33; margin: 0;
}
.rl-nm-mensaje { font-size: .875rem; line-height: 1.6; color: #6a6675; margin: 0; }
.rl-nm-recurso {
  background: #fafaf8;
  border: 1px solid #dcd5c9;
  border-radius: 16px;
  padding: 1rem;
  text-align: left;
  display: flex; align-items: center; gap: .75rem;
}
.rl-nm-recurso.hidden { display: none; }
.rl-nm-recurso-icono-caja {
  height: 2.5rem; width: 2.5rem; border-radius: .5rem;
  background: rgba(72, 114, 101, .1); color: #487265;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rl-nm-recurso-textos { flex: 1; min-width: 0; }
.rl-nm-recurso-titulo { font-size: .75rem; font-weight: 700; color: #292c33; margin: 0; }
.rl-nm-recurso-link { font-size: .75rem; font-weight: 700; color: #5e6b48; text-decoration: none; }
.rl-nm-recurso-link:hover { text-decoration: underline; }
.rl-nm-boton {
  width: 100%; display: block;
  background: #487265; color: #ffffff;
  font-size: .875rem; font-weight: 700;
  font-family: inherit;
  padding: .75rem 1rem;
  border: 0; border-radius: 9999px;
  cursor: pointer;
  transition: background .2s ease;
}
.rl-nm-boton:hover { background: #3a5d52; }

/* Icono del recurso sin Font Awesome: el JS sigue poniendo las clases
 * fa-file-arrow-down / fa-image y aquí se dibujan con máscaras SVG que
 * heredan el color (currentColor) — cero dependencia del CDN. */
#modal-recurso-icono {
  display: inline-block; width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E") no-repeat center / contain;
}
#modal-recurso-icono.fa-image {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");
}

/* ── v1.16.2: utilidades que el menú generado usaba de Tailwind (colores
 * y padding de los ítems) + área táctil del link del modal. Sin esto, al
 * retirar el CDN los ítems del menú móvil perdían su color y su padding. */
.text-krof-muted { color: #6a6675; }
.text-krof-brand-ink { color: #5e6b48; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.rl-hf-panel .border-b { border-bottom: 1px solid rgba(228, 224, 221, .4); }
.rl-nm-recurso-link { display: inline-block; padding: 10px 0; }