/* ===== Fix UI: footer guinda al final + logos águila ===== */
body { padding-bottom: 78px; }

.ui-topbar,
.ui-footerbar{ position: relative; }

.ui-footerbar{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  min-height: 64px;
}

/* PNG completo, NO circular, tamaño mediano */
.ui-topbar::before,
.ui-footerbar::before{
  content:"";
  position:absolute;
  left:45px;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  background:url("/assets/aguila.png?v=3") no-repeat center/contain;
  border-radius:0 !important;
  pointer-events:none;
}

.ui-topbar,
.ui-footerbar{
  padding-left:74px !important;
}

.box, .container, .card, form, .center {
}



/* === FOOTER BAR GUINDA === */
:root{
  --ui-footer-h: 64px; /* igual que .topbar height */
}

/* Reserva espacio para que NO tape contenido */
body{
  padding-bottom: var(--ui-footer-h) !important;
}

/* Barra inferior fija (sin tocar HTML) */
body::after{
  content:"";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--ui-footer-h);
  background: var(--guinda);
  z-index: 9999;
}
/* === /FOOTER BAR GUINDA === */





/* AUTO-UI OVERRIDES START */
/* BRAND + BARRAS (PORTAL/DETALLE) */

:root{
  --guinda: #7a1f2a;
  --mostaza: #b38b00;

  --topbar-h: 64px;
  --subbar-h: 28px;
  --ui-top: calc(var(--topbar-h) + var(--subbar-h));
}

/* Barra superior (guinda) */
.topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h) !important;
  background: var(--guinda) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
}
.topbar-inner{
  width: min(980px, calc(100% - 32px));
  margin: 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}
.brand-logo{
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  display:block !important;
}
.brand-text{
  font-size: 18px !important;
  line-height: 1.1 !important;
}

/* Barra secundaria (mostaza) */
.subbar{
  position: fixed !important;
  top: var(--topbar-h) !important;
  left: 0; right: 0;
  height: var(--subbar-h) !important;
  background: var(--mostaza) !important;
  z-index: 9998 !important;
  display:flex !important;
  align-items:center !important;
}
.subbar-inner{
  width: min(980px, calc(100% - 25px));
  margin: 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
}
.subbar-left a{
  color: rgba(255,255,255,.95) !important;
  text-decoration:none !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
}
.subbar-left a:hover{ text-decoration: underline !important; }

/* Empuja contenido para que no quede debajo del header */
body{
  padding-top: var(--ui-top) !important;
}
/* Header visible siempre */
.header{
  position: relative !important;
  z-index: 10000 !important;
}

/* Marca / logo */
.brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.logo{
  display:block !important;
  width:44px !important;
  height:44px !important;
}

.logo img{
  display:block !important;
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
  visibility:visible !important;
  opacity:1 !important;
  margin-left: 20px !important;  /* mueve a la izquierda (ajusta -8, -10, -14) */
  margin-top: -2px !important;    /* sube un poquito (ajusta -1, -2, -3) */
}

.brand-text{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Evita que watermark tape */
.watermark{
  z-index:0 !important;
}
/* ===== FIX MOBILE: header no puede medir 0 ===== */
@media (max-width: 768px){
  .header{
    height: auto !important;
    min-height: 72px !important; /* ajustable */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    overflow: visible !important;
    display: block !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    gap:20px !important;
  }

  .logo{ display:block !important; }
  .logo img{
    display:block !important;
    width:40px !important;
    height:40px !important;
    margin-left:-12px !important;
    margin-top: 0px !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .site, .site small{
    display:inline-block !important;
    opacity:1 !important;
    visibility:visible !important;
    color:#fff !important;
    font-weight:900 !important;
  }
}
/* SUBBAR (barra mostaza) - alineación correcta */
/* SUBBAR MOSTAZA: izquierda/derecha + volumen sin desbordar */
.subbar{
  height: 44px !important;
  display:flex !important;
  align-items:center !important;
}

.subbar-inner{
  width: min(980px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  height: 44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
}

/* izquierda: sep.gob.mx (donde marcaste en rojo) */
.subbar-left{
  margin-right:auto !important;
  text-align:left !important;
}

/* derecha: SIGED */
.subbar-right{
  margin-left:auto !important;
  text-align:right !important;
}

/* texto con “volumen” pero sin salirse */
.subbar-left,
.subbar-right{
  display:block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  font-weight: 900 !important;          /* volumen */
  letter-spacing: .3px !important;

  /* tamaño auto (no se pasa de la barra) */
  font-size: clamp(14px, 2.2vw, 18px) !important;

  color: rgba(255,255,255,.95) !important;
}
/* ===== Ajuste fino: sep.gob.mx (desktop) ===== */
@media (min-width: 769px){

  /* que NO se recorte el texto dentro de la barra */
  .subbar,
  .subbar-inner{
    overflow: visible !important;
  }

  /* sep.gob.mx: más a la izquierda y un poco más abajo */
  .subbar-left{
    position: relative !important;
    margin-left: -56px !important;   /* ~1.5 cm a la izquierda (aprox) */
    top: 8px !important;             /* bájalo un poco (casi abajo del logo) */

    /* “tipo gubernamental” */
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    letter-spacing: .8px !important;
    text-transform: lowercase !important;

    /* que no se vea chaparro/cortado */
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* mejora visual */
    color: rgba(255,255,255,.95) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }
}
/* ===== Barra mostaza: ajustes institucionales (DESKTOP) ===== */
@media (min-width: 769px){

  /* Evita recortes */
  .subbar,
  .subbar-inner{
    overflow: visible !important;
  }

  /* sep.gob.mx debajo del logo */
  .subbar-left{
  margin-left: -155px !important;  /* más a la izquierda */
  top: 4px !important;             /* sube dentro de la barra */

    /* tipografía institucional */
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    letter-spacing: 1px !important;
    text-transform: lowercase !important;

    /* evitar aspecto “chaparro” */
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;

    /* look gubernamental */
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  /* ❌ Quitar SIGED del lado derecho */
  .subbar-right,
  .subbar-right *,
  .subbar .right,
  .subbar .siged{
    display: none !important;
    visibility: hidden !important;
  }
}
/* AUTO-UI OVERRIDES END */