@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root{
  --snp-blue:#0a64b0;
  --snp-blue-hover:#1b75bb;
  --snp-orange:#f07b0c;
  --snp-text:#7a7a7a;
  --snp-dd:#f6f6f6;
  --snp-sub:#efefef;
  --snp-dd-shadow:rgba(0,0,0,.28) 4px 3px 2px 0px;
  --snp-font:"Roboto","Helvetica Neue",Arial,sans-serif;
}

.site-header, .site-header *, .snp-m, .snp-m *{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ============================================================
   1. HEADER — full-width fijo al top
   ============================================================ */
.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  max-width:100% !important;
  z-index:9999 !important;
  background:#fff !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.08) !important;
  height:51px !important;
  box-sizing:border-box !important;
}

/* ============================================================
   2. NAVBAR — contenedor interno centrado 1280px
   ============================================================ */
.site-header .navbar{
  max-width:1280px !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  min-height:51px !important;
  height:51px !important;
  box-sizing:border-box !important;
  font-family:var(--snp-font);
  position:relative !important;
}

/* Hamburguesa nativa oculta en escritorio */
@media (min-width:1025px){ .site-header .hamburger{ display:none !important; } }

/* ============================================================
   3. LOGO — pegado al tope exacto
   ============================================================ */
.site-header .nav-left{
  flex:0 0 109px !important;
  width:109px !important;
  min-width:0 !important;
  max-width:109px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:flex-start !important;
  padding:0 !important;
  margin:0 !important;
}
.site-header .nav-logo,
.site-header .nav-logo a{
  display:flex !important;
  align-items:flex-start !important;
  padding:0 !important;
  margin:0 !important;
}
.site-header .nav-logo img{
  height:40px !important;
  width:auto !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
}

/* ============================================================
   4. MENÚ — compacto, métricas reales
   ============================================================ */
.site-header .nav-menu{
  display:flex !important;
  flex:0 1 auto !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:16px !important;
  margin-left:160px !important;
  margin-right:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 !important;
  list-style:none !important;
  box-sizing:border-box !important;
}
.site-header .nav-menu > .nav-item{
  display:flex !important;
  align-items:flex-start !important;
  position:relative !important;
}
.site-header .nav-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:14px 12px !important;
  height:48px !important;
  box-sizing:border-box !important;
  font-family:var(--snp-font) !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:20px !important;
  letter-spacing:normal !important;
  color:var(--snp-text) !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  transition:color .12s, background .12s !important;
}
/* Padre: solo cambia color de texto, sin background */
.site-header .nav-menu > .nav-item:hover > .nav-link{
  color:var(--snp-blue) !important;
  background:transparent !important;
}
/* Sub-padre (ej. "Preparación Ciudadana"): fondo azul al estar activo */
.site-header .sub-menu > .nav-item:hover > .nav-link{
  background:var(--snp-blue) !important;
  color:#fff !important;
}

/* Caret ▼ — fijo, sin rotación en ningún estado */
.site-header .submenu-indicator{ display:inline-flex !important; align-items:center !important; line-height:0 !important; }
.site-header .submenu-indicator svg{ display:none !important; }
.site-header .submenu-indicator,
.site-header .submenu-indicator *{ transform:none !important; transition:none !important; }
.site-header .submenu-indicator::before{
  content:"" !important;
  display:inline-block !important;
  width:0 !important; height:0 !important;
  border-left:5px solid transparent !important;
  border-right:5px solid transparent !important;
  border-top:7px solid currentColor !important;
}
/* Sub-menú: flecha pegada al texto */
.site-header .sub-menu .nav-link .submenu-indicator{
  margin-left:6px !important;
  flex-shrink:0 !important;
}
.site-header .sub-menu .submenu-indicator::before{
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  border-left:7px solid currentColor !important;
  border-right:none !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
.site-header .sub-menu{
  background:var(--snp-dd) !important;
  box-shadow:var(--snp-dd-shadow) !important;
  min-width:240px !important;
  padding:0 !important;
  border:none !important;
}
.site-header .sub-menu .nav-item{ display:block !important; }
.site-header .sub-menu .nav-link{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:18px 26px !important;
  line-height:20px !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--snp-text) !important;
  border-bottom:1px solid rgba(0,0,0,.05) !important;
}
.site-header .sub-menu > .nav-item:last-child > .nav-link{ border-bottom:none !important; }
.site-header .sub-menu .nav-link:hover{ background:var(--snp-blue) !important; color:#fff !important; }
.site-header .sub-menu .sub-menu{ background:var(--snp-sub) !important; }

/* ============================================================
   5. BOTÓN ALERTAS — al extremo derecho del 1280px
   ============================================================ */
.site-header .nav-right-spacer{ display:none !important; }

.snp-right{
  display:flex !important;
  align-items:flex-start !important;
  margin-left:282px !important;
  padding:0 !important;
  flex-shrink:0 !important;
}
.snp-right .snp-alert{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  background:#f07b0c !important;
  color:#fff !important;
  padding:0 23px !important;
  height:51px !important;
  font-family:var(--snp-font) !important;
  font-size:15px !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  transition:background .12s !important;
}
.snp-right .snp-alert:hover{ background:var(--snp-blue-hover) !important; }
.snp-right .snp-icn{ display:block !important; }
/* Fuerza fill del icono SVG con máscara */
.snp-icn rect:last-child{ fill:#fff !important; }
.snp-alert img{ background:transparent !important; }

/* Hamburguesa drawer — oculta en escritorio */
.snp-mburger{ display:none !important; }

/* Drawer — oculto en escritorio */
.snp-m{ display:none !important; }

/* ============================================================
   6. COMPENSACIÓN BODY para header fixed
   ============================================================ */
html, body{ margin:0 !important; padding:0 !important; }
body{ padding-top:51px !important; }
body > #root{ margin:0 !important; padding:0 !important; }

/* ============================================================
   MÓVIL (≤1024px)
   ============================================================ */
@media (max-width:1024px){
  .site-header{ height:50px !important; }
  .site-header .navbar{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    flex-wrap:nowrap !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }
  body{ padding-top:50px !important; }

  .site-header .nav-left,
  .snp-m__logo{
    display:flex !important; align-items:flex-start !important;
    padding:0 0 0 12px !important; margin:0 !important;
    height:50px !important; flex:0 0 auto !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
  }
  .site-header .nav-logo img,
  .snp-m__logo img{
    height:36px !important; width:auto !important; display:block !important;
    margin-top:0 !important; padding-top:0 !important;
  }
  .site-header .hamburger{ display:none !important; }
  .site-header .nav-menu{ display:none !important; }

  .snp-right{
    display:flex !important; align-items:center !important;
    height:50px !important; margin-left:auto !important;
    padding:0 !important; gap:33px !important;
  }
  .snp-right .snp-alert span{ display:none !important; }
  .snp-right .snp-alert,
  .snp-m__alert{
    width:52px !important; height:50px !important;
    display:inline-flex !important; align-items:center !important;
    justify-content:center !important; padding:0 !important;
    background:#f07b0c !important; border-radius:0 !important;
    box-sizing:border-box !important;
  }
  .snp-right .snp-alert svg,
  .snp-m__alert svg{ width:24px !important; height:22px !important; }

  .snp-mburger{
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    gap:5px !important;
    width:44px !important; height:44px !important;
    border:none !important; background:rgba(0,0,0,.05) !important;
    cursor:pointer !important; padding:0 !important; flex-shrink:0 !important;
    box-sizing:border-box !important; border-radius:4px !important;
    margin-right:8px !important; margin-left:0 !important;
  }
  .snp-mburger span{
    width:22px !important; height:2.8px !important;
    background:#333 !important; border-radius:1px !important; display:block !important;
    transition:transform .2s, opacity .2s !important;
    transform-origin:center !important;
  }
  /* Animación a X — gap 5 + height 2.8 → centro a centro = 7.8px */
  .snp-mburger.is-exp span:nth-child(1){ transform:translateY(7.8px) rotate(45deg) !important; }
  .snp-mburger.is-exp span:nth-child(2){ opacity:0 !important; transform:scaleX(0) !important; }
  .snp-mburger.is-exp span:nth-child(3){ transform:translateY(-7.8px) rotate(-45deg) !important; }

  .snp-m__close{
    width:52px !important; height:50px !important;
    display:inline-flex !important; align-items:center !important;
    justify-content:center !important;
    background:rgba(0,0,0,.05) !important; border:none !important;
  }
  .snp-m__close svg{ width:20px !important; height:20px !important; }

  .snp-m{
    display:none !important; position:absolute !important;
    top:50px !important; left:0 !important; right:0 !important; bottom:auto !important;
    max-height:calc(100vh - 50px) !important;
    overflow-y:auto !important;
    background:#fff !important; z-index:9998 !important;
    box-shadow:0 8px 20px rgba(0,0,0,.15) !important;
  }
  .snp-m.is-open{ display:block !important; }
  .snp-m__bar{
    height:50px !important; display:flex !important;
    align-items:center !important; justify-content:space-between !important;
    padding-left:12px !important; border-bottom:3px solid var(--snp-blue);
  }
  .snp-m__logo img{ height:30px; width:auto; display:block; }
  .snp-m__actions{ display:flex; align-items:stretch; height:100%; }
  .snp-m__alert{
    display:inline-flex; align-items:center; justify-content:center;
    width:56px; background:var(--snp-orange);
  }
  .snp-m__close{
    width:56px; align-self:stretch; border:none; background:#f1f1f1;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .snp-m__list{ display:flex; flex-direction:column; }
  .snp-m__row{
    width:100%; display:flex; align-items:center; justify-content:flex-start; gap:6px;
    padding:14px 20px; background:#fafafa; border:none; border-bottom:1px solid #ececec;
    font-family:var(--snp-font); font-size:16px; font-weight:400; color:#7a7a7a !important;
    text-align:left; text-decoration:none; cursor:pointer; box-sizing:border-box;
  }
  .snp-m__row--lvl1{ font-size:15px; font-weight:500; color:#7a7a7a !important; background:#f4f4f4; padding-left:30px; }
  .snp-m__row--lvl2{ font-size:14px; font-weight:400; color:#5a5a5a !important; background:#fff; padding-left:42px; }
  .snp-m__row.is-exp{ background:var(--snp-blue) !important; color:#fff !important; }
  a.snp-m__row:hover, a.snp-m__row:active,
  button.snp-m__row:hover{ background:var(--snp-blue) !important; color:#fff !important; }
  .snp-m__row .snp-caret{ display:none !important; }
  .snp-m__row:has(.snp-caret)::after{
    content:""; display:inline-block; margin-left:8px;
    width:0; height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:7px solid currentColor;
  }
  .snp-m__children{ display:none; }
  .snp-m__children.is-open{ display:block; }
}