/*
 * BANEVIM Zacatecas — institutional overrides on top of Bootstrap 5.
 * Keep this file small: prefer Bootstrap utility classes in templates over
 * new custom CSS.
 */

:root {
  --banevim-primary: #8E2C2D; /* institutional maroon (color base elegido por el cliente) */
  --banevim-primary-dark: #5c1d1e;
  --banevim-primary-hover: #742425;

  /* Retheme Bootstrap's own "primary" so every component that already
     uses it (buttons, .bg-primary/.text-primary utilities, badges, form
     focus rings) turns institutional maroon without per-component CSS. */
  --bs-primary: var(--banevim-primary);
  --bs-primary-rgb: 142, 44, 45;
  --bs-primary-text-emphasis: var(--banevim-primary-dark);
  --bs-primary-bg-subtle: #f4eaea;
  --bs-primary-border-subtle: #d9b3b3;
  --bs-link-color: var(--banevim-primary);
  --bs-link-color-rgb: 142, 44, 45;
  --bs-link-hover-color: var(--banevim-primary-dark);
  --bs-link-hover-color-rgb: 92, 29, 30;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--banevim-primary);
  --bs-btn-border-color: var(--banevim-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--banevim-primary-hover);
  --bs-btn-hover-border-color: var(--banevim-primary-hover);
  --bs-btn-focus-shadow-rgb: 142, 44, 45;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--banevim-primary-dark);
  --bs-btn-active-border-color: var(--banevim-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--banevim-primary);
  --bs-btn-disabled-border-color: var(--banevim-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--banevim-primary);
  --bs-btn-border-color: var(--banevim-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--banevim-primary);
  --bs-btn-hover-border-color: var(--banevim-primary);
  --bs-btn-focus-shadow-rgb: 142, 44, 45;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--banevim-primary);
  --bs-btn-active-border-color: var(--banevim-primary);
  --bs-btn-disabled-color: var(--banevim-primary);
  --bs-btn-disabled-border-color: var(--banevim-primary);
}

.navbar-nav .nav-link.active {
  font-weight: 600;
  color: var(--banevim-primary);
}

/* Bootstrap's compiled .table-primary hardcodes its own blue hex values in
   --bs-table-* (same gotcha as .btn-primary/.page-link below — the root
   --bs-primary variable alone doesn't reach it), so it needs its own
   override to actually turn maroon. */
.table-primary {
  --bs-table-bg: var(--bs-primary-bg-subtle);
  --bs-table-border-color: var(--bs-primary-border-subtle);
  --bs-table-striped-bg: var(--bs-primary-bg-subtle);
  --bs-table-active-bg: var(--bs-primary-border-subtle);
  --bs-table-hover-bg: var(--bs-primary-border-subtle);
}

.page-link {
  color: var(--banevim-primary);
}

.page-link:hover {
  color: var(--banevim-primary-dark);
}

.page-item.active .page-link {
  background-color: var(--banevim-primary);
  border-color: var(--banevim-primary);
}

/* Keyboard focus must always be visible (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--banevim-primary);
  outline-offset: 2px;
}

/* "Saltar al contenido principal" skip link: hidden until focused. */
.visually-hidden-focusable {
  position: absolute;
  z-index: 1050;
  top: -3rem;
  left: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 2px solid var(--banevim-primary);
  border-radius: 0.25rem;
  transition: top 0.15s ease-in-out;
}

.visually-hidden-focusable:focus {
  top: 0.5rem;
}

/*
 * Nested dropdown submenus — Bootstrap 5 has no built-in multi-level
 * dropdown. Below the lg breakpoint the collapsed navbar already stacks
 * .dropdown-menu as static, indented blocks (Bootstrap's own behaviour),
 * which is the accessible fallback on mobile; this only adds a flyout for
 * pointer users on wider screens.
 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-toggle::after {
  transform: rotate(-90deg);
}

.dropdown-menu .dropdown-menu {
  margin-left: 0.5rem;
}

@media (min-width: 992px) {
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
  }

  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}

/* Home page hero: soft tinted band instead of a flat white block. Stays
   inside base.html's .container (no full-bleed) to avoid changing the
   shared page layout for a single page type. */
.hero-section {
  background: linear-gradient(135deg, var(--bs-primary-bg-subtle) 0%, #fff 70%);
}

/* Clickable info cards (accesos rápidos, etc.) — lift on hover/focus so
   the whole card reads as one control, not just its title text. */
.banevim-card {
  border: 0;
  border-top: 3px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.banevim-card:hover,
a.banevim-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  border-top-color: var(--banevim-primary);
}

.banevim-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--banevim-primary);
}

/* Municipios map (templates/home/includes/mapa_municipios.html) — real
   INEGI boundaries, hoverable per-municipio. Values shown are placeholders
   until apps.estadisticas (FASE 7) supplies real figures. */
.mapa-municipios {
  width: 100%;
  height: auto;
  max-height: min(70vh, 560px);
}

.municipio-shape {
  fill: var(--bs-primary-bg-subtle);
  stroke: #fff;
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.15s ease;
}

.municipio-shape:hover,
.municipio-shape:focus-visible,
.municipio-shape.is-selected {
  fill: var(--banevim-primary);
  outline: none;
}

/* Violencia Municipios (apps.municipios.ViolenciaMunicipiosPage) — clic abre
   el PDF del municipio en vez de mostrar una cifra. Los municipios sin PDF
   cargado todavía se ven apagados para no prometer un documento que no
   existe; siguen siendo clicables (avisan que aún no hay documento). */
.municipio-shape--sin-documento {
  fill: #ced4da;
}

.municipio-shape--sin-documento:hover,
.municipio-shape--sin-documento:focus-visible {
  fill: #adb5bd;
}

/* Columna de lectura para el título y los bloques de texto largo de
   InstitucionalPage (p. ej. Subsidio AVGM) — envuelve el <h1> y cada
   bloque rich_text (ver institucional_page.html) para que ambos compartan
   el mismo ancho angosto y centrado, en vez de que el título quede pegado
   a la izquierda y el texto flote centrado por su cuenta, descuadrado.
   Las listas de documentos/tarjetas/tabla NO se envuelven aquí: siguen a
   todo el ancho del .container, como ya estaba. */
.columna-lectura {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.block-rich_text {
  font-size: 1.05rem;
  line-height: 1.7;
}

.block-rich_text p {
  margin-bottom: 1.25rem;
}

.block-rich_text h2,
.block-rich_text h3,
.block-rich_text h4 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--banevim-primary);
}

.block-rich_text > :first-child {
  margin-top: 0;
}

/* apps.core.blocks.DataTableBlock — envuelve el TableBlock nativo de
   Wagtail (tabla.html en wagtail.contrib.table_block), que no trae clases
   propias. Estilo mínimo tipo Bootstrap .table sin depender de esa clase,
   ya que el HTML del bloque no se puede tocar sin sobreescribir su
   plantilla dentro del paquete de Wagtail. */
.tabla-datos table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tabla-datos th,
.tabla-datos td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  vertical-align: middle;
}

.tabla-datos thead th {
  background-color: var(--bs-primary-bg-subtle);
  text-align: left;
}

.tabla-datos tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Respeta la preferencia del sistema operativo de reducir el movimiento
   (WCAG 2.3.3): las transiciones del sitio ya son sutiles (color/posición,
   150-250ms, sin parallax ni autoplay), pero deben poder desactivarse por
   completo para quien las configuró así. No afecta Chart.js (sus propias
   animaciones de entrada se controlan por separado, no vía CSS). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Footer: franja de logos ---------- */
.footer-logos .container {
  gap: 1.5rem;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.footer-logo img {
  width: auto;
  max-width: 100%;
}
/* Alturas ópticas distintas: BANEVIM es horizontal y el escudo es casi
   cuadrado; a la misma altura el escudo se vería diminuto. */
.footer-logo--banevim img { height: 56px; }
.footer-logo--gobierno img { height: 88px; }
.footer-logos__divider {
  width: 1px;
  height: 72px;
  background: var(--bs-primary-border-subtle);
}
@media (max-width: 575.98px) {
  .footer-logos__divider { width: 72px; height: 1px; }
  .footer-logo--banevim img { height: 48px; }
  .footer-logo--gobierno img { height: 80px; }
}
@media (min-width: 992px) {
  .footer-logos .container { gap: 2.5rem; }
  .footer-logo--banevim img { height: 64px; }
  .footer-logo--gobierno img { height: 96px; }
}

/* ---------- Encabezado ---------- */
.site-header__logo img {
  height: 56px;
  width: auto;
}
.site-search {
  flex: 1 1 100%;
}
.site-header__help {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .site-search { flex: 0 1 22rem; }
}
@media (min-width: 992px) {
  .site-header__logo img { height: 64px; }
}

/* ---------- Mega menú ---------- */
.site-nav .nav-link {
  font-weight: 500;
  color: #343a40;
  padding: 0.9rem 0.9rem !important;
  border-bottom: 3px solid transparent;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.show,
.site-nav .nav-link.active {
  color: var(--banevim-primary);
  border-bottom-color: var(--banevim-primary);
}
.site-nav .navbar-nav .nav-item:last-child {
  margin-left: auto;
}
.mega-menu {
  margin-top: 0 !important;
  border-radius: 0 0 0.75rem 0.75rem;
}
.mega-menu__heading {
  display: block;
  font-weight: 700;
  color: var(--banevim-primary);
  text-decoration: none;
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--bs-primary-border-subtle);
}
.mega-menu__heading:hover { text-decoration: underline; }
.mega-menu__link {
  display: block;
  padding: 0.3rem 0;
  color: #343a40;
  text-decoration: none;
  font-size: 0.93rem;
}
.mega-menu__link:hover { color: var(--banevim-primary); text-decoration: underline; }
.mega-menu__sub {
  margin: 0 0 0.35rem 0.75rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--bs-primary-bg-subtle);
}
.mega-menu__link--sub {
  font-size: 0.85rem;
  color: #6c757d;
  padding: 0.15rem 0;
}
@media (max-width: 991.98px) {
  .site-nav .navbar-nav .nav-item:last-child { margin-left: 0; }
  .site-nav .nav-link { border-bottom: 0; border-left: 3px solid transparent; }
  .site-nav .nav-link.show,
  .site-nav .nav-link.active { border-left-color: var(--banevim-primary); }
  .mega-menu { box-shadow: none !important; background: #fafafa; }
  .mega-menu__sub { display: none; } /* en móvil basta el segundo nivel */
}
@media (min-width: 992px) {
  .mega-menu { max-height: 75vh; overflow-y: auto; }
}

/* ---------- Portada ---------- */
.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c757d;
}
.hero-intro {
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 40rem;
  color: #343a40;
}
.hero-intro p:last-child { margin-bottom: 0; }
.help-card {
  background: #fff;
  border: 1px solid var(--bs-primary-border-subtle);
  border-left: 6px solid var(--banevim-primary);
  box-shadow: 0 6px 20px rgba(142, 44, 45, 0.08);
}
.help-card__phone {
  text-decoration: none;
  color: var(--banevim-primary);
}
.help-card__num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.acceso-card .banevim-card-icon { width: 44px; height: 44px; }
.municipio-panel {
  border: 1px solid var(--bs-border-color);
  min-height: 9rem;
}

/* ---------- Migas de pan y búsqueda ---------- */
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.search-result {
  padding: 1rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.search-result__title { color: var(--banevim-primary); text-decoration: none; }
.search-result__title:hover { text-decoration: underline; }
.search-doc {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  text-decoration: none;
}
.search-doc__ext {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--banevim-primary);
}