/* ===== BLOQUE VIEJO (DESACTIVADO) =====
=========================================================
   MOBILE UI (APP STYLE) - SOLO MOVIL
   Archivo: /assets/ui/mobile-ui.css
   ========================================================= 

@media (max-width: 640px){

  /* Tarjeta/contendor: más ancho, tipo app */
  .card, .panel, .box, .search-card, .form-card{
    width: calc(100vw - 24px) !important;
    max-width: 560px !important;
    margin: -240px auto 0 auto !important;
    padding: 18px 16px !important;
  }

  /* Título: SMALL + BOLD elegante */
  h1, .sectionTitle, .card h1{
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 0 10px 0 !important;
  }

  /* Subtítulo */
  p, .sectionSubtitle, .card p{
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 14px 0 !important;
  }

  /* Botón Buscar: MÁS CORTO (no exagerado), centrado */
  button, .btn{
    display: block !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 320px !important;
    margin: 14px auto 0 auto !important;
    padding: 12px 22px !important;
    font-size: 16px !important; /* NO bajamos la palabra */
    border-radius: 14px !important;
  }

}
/* ===============================
   MOBILE APP UI – TÍTULO FUERA DEL BOX
   =============================== */
@media (max-width: 640px){

  /* El contenedor NO corta elementos */
  .card,
  .search-card,
  .form-card{
    overflow: visible !important;
    padding-top: 22px !important; /* espacio real del box */
  }

  /* TÍTULO: lo sacamos visualmente del box */
  h1,
.sectionTitle,
.card h1{
  position: relative !important;
  top: -48px !important;          /* SUBE más el título */
  margin-bottom: -18px !important;/* Compensa el espacio */
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

  /* Subtítulo queda dentro del box */
  .card p,
  .sectionSubtitle{
    margin-top: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

}
===== FIN BLOQUE VIEJO ===== */




/* AUTO-UI OVERRIDES START */

/* MOBILE HARD FIX: logo + texto SIEMPRE visibles (anula colapsos portal/detalle) */
@media (max-width: 768px){
  .header{ height:auto !important; min-height:72px !important; overflow:visible !important; display:block !important; }
  .header .brand{ display:flex !important; align-items:center !important; gap:10px !important; height:auto !important; min-height:44px !important; overflow:visible !important; }
  .header .logo{ display:block !important; height:auto !important; min-height:44px !important; overflow:visible !important; line-height:0 !important; opacity:1 !important; visibility:visible !important; }
  .header .logo img{ display:block !important; width:96px !important; height:96px !important; object-fit:contain !important; opacity:1 !important; visibility:visible !important;  
   margin-left: -1px !important; /* izquierda/derecha */
   margin-top:  10px !important;    /* arriba/abajo */
   }
}
@media (max-width: 768px){

  .topbar{
    display:block !important;
    height: 45px !important;    /* más baja-menos sube */
  }

  .subbar{
    display:flex !important;
    align-items:center !important;
    min-height:44px !important;
    height:auto !important;
    overflow:visible !important;
    margin-top: -20px !important;
  }

  .subbar-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    padding:0 12px !important;
  }
  /* sep.gob.mx */
.subbar-left{
  display:inline-block !important;
  font-size:18px !important;
  font-weight:600 !important;
  color:#fff !important;
  letter-spacing:.4px !important;
  line-height:1 !important;

  position:relative !important;
  top:0px !important;        /* arriba/abajo */
  margin-left:0px !important; /* izq/der */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* SIGED */
.subbar-right{
  display:inline-block !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:#fff !important;
  letter-spacing:.6px !important;
  line-height:1 !important;

  position:relative !important;
  top:0px !important;
  margin-right:0px !important;
}

/* Si quieres quitar SIGED */
.subbar-right{ display:none !important; }
}

/* ================================
   MOBILE TEXT SIGED POSITION – FINAL
   ================================ */
@media (max-width: 768px){
  .header .site,
  .header .site small{
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  width: 48px !important;
  height: 48px !important
  position: relative !important;
  top: 0px !important;
  margin-top:  -20px !important;
  margin-left:  0px !important;
  margin-right: 0px !important;
  }
}
   /* ======================================================
   PORTAL (HOME) – CONTROL TOTAL DE POSICIÓN Y TAMAÑO
   NO AFECTA /c/
====================================================== */

/* ===== 1) BLOQUE COMPLETO (TÍTULO + CAJA) ===== */
body.page-home .container.center{
  margin-top: 0px !important;     /* (-) sube | (+) baja TODO */
  margin-bottom: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-top: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* ===== 2) TÍTULO "Consulta de certificados" ===== */
body.page-home .title{
  font-size: 28px !important;
  text-align: center !important;

  margin-top: 0px !important;     /* posición vertical */
  margin-bottom: 16px !important;
  margin-left: -65px !important;
  margin-right: 0px !important;
}

/* ===== 3) CAJA BLANCA COMPLETA (CARD) ===== */
body.page-home .card{
  /* tamaño de la caja */
  padding-top: 0px !important;
  padding-bottom: -25px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;

  /* ancho */
  width: min(760px, 96vw) !important;

  /* posición */
  margin-top: -155px !important;     /* (-) sube | (+) baja SOLO la caja */
  margin-bottom: 0px !important;
  margin-left: auto !important;   /* centra */
  margin-right: auto !important;

  border-radius: 18px !important;
}

/* ===== 4) TEXTO DESCRIPTIVO ===== */
body.page-home .subtitle{
  font-size: 16px !important;
  text-align: left !important;

  margin-top: -30px !important;      /*AGRANDAR O HACER CHICA LA CAJA*/
  margin-bottom: 25px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* ===== 5) FORM (INPUT + BOTÓN) ===== */
body.page-home form.searchRow{
  display: flex !important;
  flex-direction: column !important;

  gap: 14px !important;            /* separación input ↔ botón */

  margin-top: -15px !important;
  margin-bottom: -10px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* ===== 6) INPUT FOLIO ===== */
body.page-home input[name="folio"]{
  height: 56px !important;         /* alto */
  font-size: 18px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  width: 100% !important;

  margin-top: 15px !important;
  margin-bottom: 10px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;

  box-sizing: border-box !important;
}

/* ===== 7) BOTÓN BUSCAR ===== */
body.page-home form.searchRow button,
body.page-home form.searchRow input[type="submit"]{
  height: 40px !important;
  font-size: 18px !important;
  border-radius: 16px !important;
  width: 100% !important;
  padding: 0 18px !important;

  margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}
   /* ======================================================
   /c/ DETALLE DEL DOCUMENTO — AJUSTES MOBILE
   ====================================================== */

/* ===== CARD COMPLETA (CAJA BLANCA) ===== */
body.page-detail .card{
  /* tamaño interno */
  padding: 22px !important;

  /* mover toda la caja */
  margin-top: -10px !important;   /* ↑ sube | ↓ baja */
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* ===== CONTENEDOR DE BOTONES ===== */
body.page-detail .card > div:has(a){
  display: flex !important;
  gap: 12px !important;

  /* mover SOLO el bloque de botones */
  margin-top: 18px !important;
}

/* ===== BOTÓN PDF ===== */
body.page-detail .card a[href*="pdf"]{
  flex: 1 1 auto !important;

  height: 60px !important;
  font-size: 17px !important;
  border-radius: 18px !important;

  /* mover solo este botón */
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== BOTÓN BUSCAR OTRO FOLIO ===== */
body.page-detail .card a[href="/"]{
  flex: 1 1 auto !important;

  height: 60px !important;
  font-size: 17px !important;
  border-radius: 18px !important;

  /* mover solo este botón */
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* AUTO-UI OVERRIDES END */