/* ALPE WEB INICIO + CONTACTO R4.1 | 02-11-2026
   Intervencion EXCLUSIVAMENTE visual. No modifica el helper de horarios,
   los datos oficiales, el iframe del mapa, cookies ni las acciones.
   Las reglas afectan solo a Inicio y Contacto, dentro de #alpe-location. */

body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location {
  scroll-margin-top: 104px;
}

/* Los dos componentes que eran columnas independientes pasan a usar el
   ancho real del contenedor: no se desperdicia la mitad derecha al crecer
   el widget de horarios y excepciones. */
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(25px, 3.2vw, 42px);
  align-items: start;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-copy,
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-visual {
  width: 100%;
  max-width: none;
  min-width: 0;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-copy > h2 {
  max-width: 25ch;
  font-size: clamp(2.5rem, 3.6vw, 4.05rem);
  line-height: 1.07;
  margin-block: 12px 16px;
  text-wrap: balance;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-copy > p {
  max-width: 78ch;
  line-height: 1.7;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-address-card {
  width: 100%;
  max-width: none;
  margin-block: 20px 20px;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(20px, 2.3vw, 34px);
  border-radius: 20px;
  border-color: #d3e3ef;
  box-shadow: 0 16px 38px rgba(15, 54, 92, .07);
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget .r15-office-top {
  min-width: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #dce8f1;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-days > div {
  padding-block: 10px;
  font-size: .92rem;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-days > div strong {
  font-size: .9rem;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-next {
  min-width: 0;
}
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-next span,
body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-next b {
  overflow-wrap: anywhere;
}

/* Para el caso real con cierres futuros: distribuir semana a la izquierda,
   festivos y cierres a la derecha, SIN duplicar ni alterar datos. Si el
   calendario no tiene cierres, su tarjeta permanece naturalmente a una
   columna, sin panel fantasma. */
@supports selector(:has(*)) {
  @media (min-width: 900px) {
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget:has(.r15-upcoming-closures) {
      display: grid;
      grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
      grid-template-areas:
        "office-status office-status"
        "hours-heading future-closures"
        "weekday-hours future-closures"
        "next-opening future-closures"
        "office-note office-note";
      column-gap: clamp(22px, 3vw, 48px);
      row-gap: 10px;
      align-items: start;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget:has(.r15-upcoming-closures) > .r15-office-top {
      grid-area: office-status;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget:has(.r15-upcoming-closures) > .r15-office-heading {
      grid-area: hours-heading;
      margin-block: 9px 0 !important;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget:has(.r15-upcoming-closures) > .r15-office-days {
      grid-area: weekday-hours;
      min-width: 0;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget:has(.r15-upcoming-closures) > .r15-next {
      grid-area: next-opening;
      margin-block: 12px 0 !important;
      flex-wrap: wrap;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget:has(.r15-upcoming-closures) > .r15-upcoming-closures {
      grid-area: future-closures;
      min-width: 0;
      margin: 0;
      padding: clamp(16px, 2vw, 24px);
      border: 1px solid #d6e5f0;
      border-radius: 16px;
      background: #f5f9fd;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-upcoming-closures .r15-closures-heading {
      margin-block: 1px 17px !important;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-upcoming-closures .r15-next-closure {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: #fff;
      margin: 0 0 10px !important;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-upcoming-closures .r15-next-closure b {
      text-align: end;
      white-space: normal;
    }
    body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget:has(.r15-upcoming-closures) > .r15-office-footnote {
      grid-area: office-note;
      margin-top: 7px !important;
    }
  }
}

/* El mapa mantiene su marcado original, pero deja de quedar atrapado en la
   segunda mitad de una columna demasiado estrecha. Botones y aviso a su lado. */
@media (min-width: 900px) {
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-visual {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(245px, .65fr);
    grid-template-rows: auto 1fr;
    gap: 14px 24px;
    align-items: start;
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-visual > .alpe-map-shell {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 395px;
    min-height: 355px;
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-visual > .alpe-location-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-visual > .alpe-location-actions > a {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    min-width: 0;
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-visual > .alpe-map-disclosure {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 2px 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 899px) {
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-visual {
    display: block;
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-office-widget {
    padding: clamp(18px, 3.5vw, 26px);
  }
}

@media (max-width: 600px) {
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location {
    scroll-margin-top: 82px;
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .alpe-location-copy > h2 {
    font-size: clamp(2.2rem, 9.2vw, 3.1rem);
    max-width: none;
  }
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-next,
  body:is([data-page="inicio"],[data-page="contacto"]) #alpe-location .r15-next-closure {
    overflow-wrap: anywhere;
  }
}