/* ============================================================
   H. Ayuntamiento de Huautla de Jiménez — Capa de Rediseño
   Identidad institucional derivada del escudo municipal.
   Se carga DESPUÉS de main.css: redefine tokens y estiliza
   los componentes firma sin tocar el HTML ni el JS.

   Tipografía:  Bitter (slab serif, títulos) + Public Sans (cuerpo)
   Paleta:      Verde campo · Oro maíz/laurel · Rojo banda · Azul cielo
   Firma:       "Sello" dorado en los títulos de sección (greca + rombo)
   ============================================================ */

/* ---------- 1. Tokens de marca ------------------------------ */
:root {
  /* Tipografía institucional */
  --default-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Bitter", "Georgia", "Times New Roman", serif;
  --nav-font: "Public Sans", system-ui, sans-serif;

  /* Paleta del escudo */
  --green:        #0E5A34;  /* verde campo — color primario/institucional */
  --green-deep:   #0A3A22;  /* verde profundo — hero, footer, franjas */
  --green-soft:   #E7F0EA;  /* verde muy claro — superficies suaves */
  --gold:         #C6941B;  /* oro maíz/laurel — acento y grecas */
  --gold-dark:    #9A7113;  /* oro oscuro — texto sobre claro */
  --civic-red:    #A8202F;  /* rojo de la banda del escudo */
  --civic-blue:   #1B4F72;  /* azul cielo — enlaces externos/info */
  --paper:        #F6F5F1;  /* papel institucional */
  --line:         #E1DED4;  /* líneas/hairlines */
  --ink:          #232A25;  /* tinta — texto principal */

  /* Reasignación de tokens globales del template */
  --background-color: #ffffff;
  --default-color:    #2A322C;
  --heading-color:    var(--green-deep);
  --accent-color:     var(--green);
  --surface-color:    #ffffff;
  --contrast-color:   #ffffff;
}

/* Menú de navegación */
:root {
  --nav-color:                    var(--green-deep);
  --nav-hover-color:              var(--gold-dark);
  --nav-mobile-background-color:  #ffffff;
  --nav-dropdown-background-color:#ffffff;
  --nav-dropdown-color:           var(--green-deep);
  --nav-dropdown-hover-color:     var(--gold-dark);
}

/* Preajustes de fondo del template, retintados */
.light-background {
  --background-color: var(--paper);
  --surface-color: #ffffff;
}
.dark-background {
  --background-color: var(--green-deep);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #10462A;
  --contrast-color: #ffffff;
}

/* ---------- 2. Base tipográfica ----------------------------- */
body {
  font-family: var(--default-font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  letter-spacing: -0.01em;
}

p { line-height: 1.7; }

a { color: var(--green); }
a:hover { color: var(--gold-dark); }

::selection { background: var(--gold); color: #fff; }

/* ---------- 3. Encabezado / navegación ---------------------- */
.header {
  padding: 14px 0;
}

/* Contenedor: de "píldora" a plaqueta institucional con greca dorada */
.header .header-container {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  border-radius: 8px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  box-shadow: 0 6px 24px rgba(10, 58, 34, 0.12);
  padding: 6px 22px;
}

.header .logo img { max-height: 68px; }

.header .logo h1.sitename {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--green-deep);
  line-height: 1.05;
}

/* Enlaces del menú */
.navmenu a,
.navmenu a:focus {
  font-family: var(--nav-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--green-deep);
}
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: var(--gold-dark);
}

/* Subrayado activo tipo signáctica oficial (solo escritorio) */
@media (min-width: 1200px) {
  .navmenu > ul > li > a { position: relative; }
  .navmenu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 6px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .navmenu > ul > li > a:hover::after,
  .navmenu > ul > li > a.active::after { transform: scaleX(1); }
}

/* Botón "Noticias" del header */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: var(--green);
  color: #fff;
  font-family: var(--nav-font);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  background: var(--gold-dark);
  color: #fff;
}

/* ---------- 4. Hero ----------------------------------------- */
.hero .hero-image::after {
  /* Lavado verde institucional sobre la fotografía */
  background: linear-gradient(105deg,
              rgba(10, 58, 34, 0.92) 0%,
              rgba(10, 58, 34, 0.72) 45%,
              rgba(14, 90, 52, 0.35) 100%);
}

.hero .hero-content .content-box h1 {
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

/* Antetítulo dorado sobre el H1 del hero */
.hero .hero-content .content-box h1::before {
  content: "Gobierno Municipal · Sierra Mazateca";
  display: block;
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  text-shadow: none;
}

.hero .hero-content .content-box p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
}

.hero .hero-content .content-box .cta-group .btn.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
}
.hero .hero-content .content-box .cta-group .btn.btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--green-deep);
}

/* Panel contenedor de rasgos: vidrio verde institucional */
.hero .features-wrapper {
  background-color: rgba(10, 58, 34, 0.55) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(198, 148, 27, 0.35);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(10, 58, 34, 0.30);
}

/* Tarjetas de rasgos del hero: plaquetas limpias */
.hero .features-wrapper .feature-item {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(10, 58, 34, 0.18);
}
.hero .features-wrapper .feature-item .feature-icon {
  color: var(--green);
}
.hero .features-wrapper .feature-item .feature-icon i { color: var(--green); }
.hero .features-wrapper .feature-item .feature-text h3 {
  color: var(--green-deep);
  font-weight: 700;
}
.hero .features-wrapper .feature-item .feature-text p {
  color: #4b524c !important;
}

/* ---------- 5. Títulos de sección — ELEMENTO FIRMA ---------- */
/* Antetítulo institucional + regla dorada con rombo (sello) */
.section-title { position: relative; }

.section-title h2 {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;
  color: var(--green-deep) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  padding-bottom: 22px !important;
  margin-bottom: 14px !important;
}

/* Greca dorada centrada con rombo al medio */
.section-title h2::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 74px !important;
  height: 2px !important;
  background: var(--gold) !important;
  left: 0; right: 0; bottom: 0;
  margin: auto !important;
}
.section-title h2::before {
  content: "" !important;
  position: absolute !important;
  width: 9px; height: 9px;
  background: var(--gold);
  left: 0; right: 0; bottom: -3.5px;
  margin: auto;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow: 0 0 0 4px var(--background-color, #fff);
}

.section-title p {
  color: #5a615a;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Encabezados internos de secciones tipo "gobierno2" (Gaceta, Marco…) */
.gobierno2 .section-title h2,
.tram_serv .section-title h2 { color: var(--green-deep) !important; }

/* ---------- 6. Botones y pestañas --------------------------- */
.btn-primary,
.btn-primary:focus {
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: var(--green-deep);
  --bs-btn-hover-border-color: var(--green-deep);
  --bs-btn-active-bg: var(--green-deep);
  --bs-btn-active-border-color: var(--green-deep);
  font-weight: 600;
}

/* Pestañas Bootstrap (Marco Jurídico / Obra Pública) */
.nav-tabs {
  border-bottom: 2px solid var(--line);
  gap: 4px;
}
.nav-tabs .nav-link {
  font-family: var(--nav-font);
  font-weight: 600;
  color: var(--green-deep) !important;
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
}
.nav-tabs .nav-link:hover { color: var(--gold-dark) !important; }
.nav-tabs .nav-link.active {
  color: var(--green-deep) !important;
  background: var(--green-soft);
  border-color: var(--line) var(--line) var(--green-soft);
  border-bottom: 3px solid var(--gold);
}
.nav-tabs .nav-link:disabled,
.nav-tabs .nav-link[disabled] { opacity: 0.45; }

/* ---------- 7. Contador de cifras (counts) ------------------ */
.counts { padding: 70px 0 60px; }
.counts .count-box {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(10, 58, 34, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.counts .count-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(10, 58, 34, 0.12);
}
/* Badge del ícono: círculo verde institucional con aro dorado.
   Sobrescribe el círculo café heredado y ajusta el tamaño del glifo
   para que no desborde. Conserva la posición flotante superior. */
.counts .count-box i {
  background: var(--green) !important;
  color: #fff !important;
  width: 58px !important;
  height: 58px !important;
  top: -29px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--gold), 0 8px 18px rgba(10, 58, 34, 0.28);
  margin-bottom: 0;
}
/* Deja espacio bajo el badge flotante para que no encime la cifra */
.counts .count-box { padding-top: 56px; }
.counts .count-box span {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 40px;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
  display: block;
}
.counts .count-box p {
  font-family: var(--nav-font);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5a615a;
  margin: 4px 0 0;
}

/* ---------- 8. "Nosotros" — imagen + placa 2025-2027 -------- */
.home-about .about-image .experience-badge {
  background: var(--green-deep);
  color: #fff;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(10, 58, 34, 0.28);
}
.home-about .about-image .experience-badge .years {
  font-family: var(--heading-font);
  font-weight: 800;
  color: var(--gold);
}
.home-about .about-image .experience-badge .text { color: rgba(255,255,255,0.92); }

.home-about .about-content h2 { color: var(--green-deep); }
.home-about .about-content .feature-item .icon,
.home-about .about-content .feature-item .icon i { color: var(--green); }
.home-about .about-content .feature-item h4 { color: var(--green-deep); }

/* ---------- 9. Presidente municipal ------------------------- */
#cabildo .col-lg-4[style] {
  background: var(--green-soft) !important;
  border-radius: 12px;
  border-top: 4px solid var(--gold);
}
#cabildo .member2 .pic img {
  border-radius: 10px;
  border: 3px solid #fff;
  box-shadow: 0 10px 26px rgba(10, 58, 34, 0.18);
}
#cabildo .member2 h4 { color: var(--green-deep); font-weight: 700; }
#cabildo .member2 p[style] { color: var(--gold-dark) !important; font-weight: 600; }

/* ---------- 10. Organigrama (doctor-card) ------------------- */
.doctor-card {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--gold);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(10, 58, 34, 0.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.doctor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(10, 58, 34, 0.14);
}
.doctor-card .doctor-info { padding: 16px 18px; }
.doctor-card .doctor-info h5 {
  color: var(--green-deep);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
}
.doctor-card .doctor-info .specialty { color: var(--gold-dark); }

/* ---------- 11. Tarjetas de noticias ------------------------ */
.department-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(10, 58, 34, 0.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.department-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(10, 58, 34, 0.14);
}
.department-card .department-content h4 {
  color: var(--green-deep);
  font-weight: 700;
  font-size: 1.15rem;
}
/* La primera línea de fecha de cada noticia, en oro */
.department-card .department-content p:first-of-type {
  color: var(--gold-dark);
  font-family: var(--nav-font);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

/* ---------- 12. Registros documentales (list-group) -------- */
/* Gaceta, Marco Jurídico, Antecedentes, Obra Pública */
.gobierno2 .card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(10, 58, 34, 0.06);
}
.gobierno2 .card > .card-body:first-child { background: var(--green-soft); }
.gobierno2 .card-title {
  color: var(--green-deep);
  font-family: var(--heading-font);
  font-weight: 700;
}
.gobierno2 .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  transition: background .2s ease;
}
.gobierno2 .list-group-item:hover { background: var(--paper); }
/* Número de folio del documento */
.gobierno2 .list-group-item .col-1 {
  font-family: var(--heading-font);
  font-weight: 800;
  color: var(--gold-dark);
  font-variant-numeric: tabular-nums;
}
.gobierno2 .list-group-item small { color: #7a807a; }

/* Ícono/miniatura de descarga */
.testimonial-img {
  border-radius: 6px;
  border: 1px solid var(--line);
  transition: transform .2s ease;
}
a:hover > .testimonial-img { transform: scale(1.08); }

/* Franja "PROGRAMA ANUAL DE OBRAS" */
.gobierno2 .bg-light {
  background: var(--green-deep) !important;
  border-radius: 8px;
  padding: 12px 18px;
  margin: 8px 0 18px;
}
.gobierno2 .bg-light p {
  color: #fff !important;
  font-family: var(--nav-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

/* Trámites y servicios */
.tram_serv .fst-italic strong { color: var(--green-deep); }
.tram_serv .fst-italic i { color: var(--gold); margin-right: 6px; }
.tram_serv ul li span { color: var(--ink); }
.tram_serv ul li::marker { color: var(--gold); }

/* ---------- 13. Preguntas frecuentes ------------------------ */
.faq .faq-list li {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(10, 58, 34, 0.05);
}
.emergency-tips h4,
.emergency-info h4 {
  color: var(--green-deep);
  font-family: var(--heading-font);
  font-weight: 700;
}
.faq .faq-list a { color: var(--green-deep); font-weight: 600; }
.faq .faq-list a.collapsed { color: var(--ink); }
.faq .faq-list i.bi-check-circle { color: var(--green); }
.faq .faq-list li a[aria-expanded="true"] { color: var(--gold-dark); }

/* ---------- 14. Ubicación / contacto ------------------------ */
#ubicacion .info i {
  color: var(--green);
  background: var(--green-soft);
  border-radius: 8px;
}
#ubicacion .info h4 { color: var(--green-deep); }
#ubicacion iframe {
  border-top: 3px solid var(--gold) !important;
}

/* ---------- 15. Pie de página ------------------------------- */
.footer {
  --background-color: var(--green-deep);
  background: var(--green-deep) !important;
  color: rgba(255, 255, 255, 0.85);
  border-top: 4px solid var(--gold);
}
.footer .footer-about .sitename,
.footer .footer-links h4 {
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 700;
}
.footer .footer-links h4 { position: relative; padding-bottom: 10px; }
.footer .footer-links h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: var(--gold);
}
.footer a,
.footer .footer-links ul a,
.footer .footer-about a { color: rgba(255, 255, 255, 0.82); }
.footer a:hover,
.footer .footer-links ul a:hover { color: var(--gold); padding-left: 4px; }
.footer .footer-contact p,
.footer .copyright p { color: rgba(255, 255, 255, 0.78); }
.footer .social-links a {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}
.footer .social-links a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
}
.footer .copyright .sitename { color: var(--gold); }

/* ---------- 16. Botón "subir" y misceláneos ----------------- */
.scroll-top {
  background: var(--green) !important;
  border-radius: 8px;
}
.scroll-top:hover { background: var(--gold-dark) !important; }
.scroll-top i { color: #fff; }

#preloader:before {
  border-color: var(--green) transparent var(--green) transparent !important;
}

/* Enlaces externos con dominio .gob.mx en azul cívico */
a[href*="finanzasoaxaca"],
a[href*=".gob.mx"] { color: var(--civic-blue); }

/* ---------- 17. Accesibilidad ------------------------------- */
a:focus-visible,
.btn:focus-visible,
.navmenu a:focus-visible,
.nav-tabs .nav-link:focus-visible,
button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .counts .count-box:hover,
  .doctor-card:hover,
  .department-card:hover { transform: none; }
}

/* ==========================================================
   SECCIÓN ORGANIGRAMA HUAUTLA - CUSTOM NAMESPACE (hm-)
   ========================================================== */

/* Contenedor principal de la sección */
#organigrama-section.hm-organigrama-section {
  --hm-primary: #1e3c72;
  --hm-secondary: #2a5298;
  --hm-accent-blue: #0d6efd;
  --hm-accent-cyan: #0dcaf0;
  --hm-accent-green: #198754;
  --hm-accent-pink: #d63384;
  --hm-accent-yellow: #f59e0b;
  --hm-bg-card: #ffffff;
  --hm-text-dark: #2b2d42;
  --hm-text-muted: #6c757d;
  --hm-radius: 12px;

  background-color: #f8f9fa;
  padding-bottom: 3rem;
}

/* Banner / Encabezado dentro de la sección */
.hm-organigrama-section .hm-header-banner {
  background: linear-gradient(135deg, var(--hm-primary) 0%, var(--hm-secondary) 100%);
  color: #ffffff;
  /*padding: 2.5rem 1rem;*/
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  margin-bottom: 3rem;
}

.hm-organigrama-section .hm-header-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hm-organigrama-section .hm-header-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  font-weight: 300;
}

/* Separadores de subsecciones */
.hm-organigrama-section .hm-section-divider {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.hm-organigrama-section .hm-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hm-text-dark);
  margin-bottom: 0;
  white-space: nowrap;
}

.hm-organigrama-section .hm-section-line {
  flex-grow: 1;
  height: 2px;
  background-color: #e9ecef;
  margin-left: 1rem;
}

/* Tarjetas */
.hm-organigrama-section .hm-card {
  background-color: var(--hm-bg-card);
  border: 1px solid #e2e8f0;
  border-radius: var(--hm-radius);
  padding: 1.25rem;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.hm-organigrama-section .hm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

/* Variantes de Tarjeta por Rol/Jerarquía */
.hm-organigrama-section .hm-card-presidencia {
  border-top: 5px solid var(--hm-accent-blue);
  text-align: center;
}

.hm-organigrama-section .hm-card-despacho {
  border-left: 4px solid var(--hm-text-muted);
  background-color: #fafbfc;
}

.hm-organigrama-section .hm-card-regiduria {
  border-top: 4px solid var(--hm-accent-cyan);
}

.hm-organigrama-section .hm-card-direccion {
  border-top: 4px solid var(--hm-accent-green);
}

.hm-organigrama-section .hm-card-dif {
  border-top: 4px solid var(--hm-accent-pink);
}

.hm-organigrama-section .hm-card-agencias {
  border-top: 4px solid var(--hm-accent-yellow);
}

/* Elementos tipográficos e internos */
.hm-organigrama-section .hm-badge-role {
  display: inline-block;
  background-color: #e7f1ff;
  color: var(--hm-accent-blue);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  margin-bottom: 0.75rem;
  letter-spacing: 0.5px;
}

.hm-organigrama-section .hm-person-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hm-text-dark);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.hm-organigrama-section .hm-position-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}

.hm-organigrama-section .hm-card-regiduria .hm-position-title {
  color: #0891b2;
}

.hm-organigrama-section .hm-card-direccion .hm-position-title {
  color: var(--hm-accent-green);
  font-size: 1rem;
}

/* Listas de subáreas */
.hm-organigrama-section .hm-subarea-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
  padding-top: 0.75rem;
}

.hm-organigrama-section .hm-subarea-item {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: #475569;
}

.hm-organigrama-section .hm-subarea-item::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--hm-accent-green);
}

/* Etiquetas (Badges) */
.hm-organigrama-section .hm-tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-weight: 500;
}

.hm-organigrama-section .hm-tag-dif {
  background-color: #fce7f3;
  color: #9d174d;
  border: 1px solid #fbcfe8;
}

.hm-organigrama-section .hm-tag-agencia {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}