/* ===========================================================
   0) MÓVIL — Mantener EXACTAMENTE como ya lo tenías (NO cambia)
   =========================================================== */
@media (max-width: 768px) {

  /* 1) Evitar desplazamiento lateral */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* 2) Quitar padding/márgenes de wrappers FSE */
  .wp-site-blocks,
  .is-layout-constrained,
  .wp-block-post-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* 3) Full-bleed simétrico */
  .alignfull,
  .wp-block-cover.alignfull,
  .wp-block-group.alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* 3.1) Cover/Group normales al 100% */
  .wp-block-cover,
  .wp-block-cover__inner-container,
  .wp-block-group,
  .wp-block-group__inner-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .wp-block-cover img,
  .wp-block-cover__image-background,
  .wp-block-cover .wp-block-cover__background {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* 3.2) Contenedor home */
  .obj-home-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 3.3) Evitar empujes de hijos */
  .obj-home-container *,
  .obj-buttons-column,
  .obj-buttons-column * {
    max-width: 100% !important;
  }

  /* 3.4) Botones en móvil (70%) */
  a.btn-obj{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }
}

/* =========================================================== */

/* === Semáforos (Home) — tamaños y colores por clase === */
.sem-chip{
  display:inline-flex;justify-content:center;align-items:center;
  width:60px;height:60px;border-radius:999px;
  color:#fff;font-size:33px;font-weight:800;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  flex:0 0 60px;text-align:center;
}

/* Colores (los aplica/retira el JS según el % promedio) */
.sem-red{background:#d32f2f!important}
.sem-orange{background:#f97316!important}
.sem-yellow{background:#f59e0b!important}
.sem-green{background:#16a34a!important}
/* Compatibilidad (por si alguna versión anterior) */
.sem-amber{background:#f59e0b!important}

/* Si la maqueta deja muy pegado el texto y el chip, abre un poco el gap */
a.btn-obj{ gap: 12px !important; }

/* Responsive fino */
@media (max-width: 420px){
  .sem-chip{
    width:56px;height:56px;flex:0 0 56px;font-size:30px;
  }
}

/* ============================
   HISTÓRICO — Ajustes de ESCRITORIO (no afecta móvil)
   ============================ */
@media (min-width: 1025px){

  /* 1) Contenedor principal: usa más ancho */
  .ue-hist-wrap{
    max-width: 1360px !important;   /* sube a 1440px si quieres más */
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 2) .ue-hist-header ya es FLEX; dejamos flex-wrap y
        hacemos que el contenedor del BOTÓN ocupe toda la fila y centre */
  .ue-hist-header{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: end !important;
    margin-bottom: 8px !important;
  }
  .ue-hist-header .item{
    min-width: 220px !important;
    flex: 1 1 260px !important;     /* los filtros “respiran” en desktop */
  }

  /* === Botón “Filtrar” DEBAJO y CENTRADO (robusto) ===
     1) Si el botón está en el último .item
     2) Si usas clase .btn-slot para el contenedor del botón
     3) Si el navegador soporta :has(), detectamos el .item que contiene el botón */
  .ue-hist-header .item:last-of-type,
  .ue-hist-header .item.btn-slot{
    flex-basis: 100% !important;    /* ocupa la fila completa */
    display: flex !important;
    justify-content: center !important;
    margin-top: 2px !important;
  }
  /* Safari/Chrome modernos: detecta el .item que CONTIENE el botón */
  .ue-hist-header .item:has(.ue-hist-btn){
    flex-basis: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 2px !important;
  }
  /* Oculta el label “ ” si existe en el contenedor del botón */
  .ue-hist-header .item:last-of-type > label,
  .ue-hist-header .item.btn-slot > label,
  .ue-hist-header .item:has(.ue-hist-btn) > label{
    display: none !important;
  }
  /* El botón en sí, con presencia en desktop */
  .ue-hist-header .ue-hist-btn{
    padding: 10px 18px !important;
    min-width: 200px !important;
    text-align: center !important;
  }

  /* 3) RESULTADOS centrados y con ancho legible */
  .ue-hist-center,
  .ue-hist-summary,
  .ue-hist-table-wrap{
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4) Columnas clave centradas */
  .ue-hist-col-fecha,
  .ue-hist-col-avance,
  .ue-hist-col-estado{
    text-align: center !important;
  }
}

/* ============================
   HISTÓRICO — Salvaguardas MOBILE
   ============================ */
@media (max-width: 600px){
  .ue-hist-table-wrap{
    width: 100%;
    overflow-x: auto;             /* scroll horizontal interno */
    -webkit-overflow-scrolling: touch;
  }
  .ue-hist-table td{
    overflow-wrap: anywhere;      /* no empuja layout por palabras largas */
    word-break: break-word;
  }
  /* Botón full-width en móvil (opcional) */
  .ue-hist-header .item:has(.ue-hist-btn) .ue-hist-btn,
  .ue-hist-header .item:last-of-type .ue-hist-btn{
    width: 100%;
  }
}