/* ===== HHQ GRID: contenedor ===== */
.hhq.hhq-grid{
  display:flex;
  flex-direction:column;
  width:100%;
  padding:16px;
  border:2px solid #0b5e86;
  border-radius:16px;
  background:#fff;
}

/* Título */
.hhq-grid .hhq__title{
  margin:0 0 16px 0;
  color:#0b5e86;
  font-weight:700;
  text-align:center;
}

/* ===== Grilla (soporta .hhq-grid__list y .hhq-grid_list) ===== */
.hhq-grid__list,
.hhq-grid_list{
  display:grid;
  grid-template-columns: 1fr;   /* mobile por defecto */
  gap:16px;
  width:100%;
  justify-items:stretch !important;
  align-items:stretch !important;
}

/* Tablet: 2 col */
@media (min-width:768px){
  .hhq-grid__list,
  .hhq-grid_list{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 col */
@media (min-width:992px){
  .hhq-grid__list,
  .hhq-grid_list{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Fuerza de estirado del ítem (soporta .hhq__btn y .hhq_btn) ===== */
.hhq-grid__list > .hhq__btn,
.hhq-grid_list  > .hhq__btn,
.hhq-grid__list > .hhq_btn,
.hhq-grid_list  > .hhq_btn,
.hhq-grid__list > button,
.hhq-grid_list  > button{
  width:100% !important;
  display:flex !important;
}

/* ===== Botón “card” (aplica tanto a .hhq__btn--card solo como combinado con .hhq_btn) ===== */
.hhq__btn--card{
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 16px;
  text-align:center;
  border-radius:12px;
  border:2px solid #0b5e86;
  background:#fff;
  color:#0b5e86;
  transition: transform .08s ease, box-shadow .15s ease,
              background .15s ease, color .15s ease, border-color .15s ease;
}
.hhq__btn--card:hover{ transform:translateY(-1px); }
.hhq__btn--card:focus{ outline:none; box-shadow:0 0 0 3px rgba(11,94,134,.25); }

/* Media + texto */
.hhq__card-media{
  width:80px; height:80px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:50%;
  border:2px solid currentColor;
  background:#fff;
}
.hhq__card-media .hhq__img{ width:48px; height:48px; object-fit:contain; }

.hhq__img_custom{ width:80px; height:80px; object-fit:contain; }

.hhq__card-label{
  font-weight:700;
  font-size:1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Seleccionado (tema azul) */
.hhq-grid .hhq__btn--card.is-selected{
  background:#0b5e86; color:#fff; border-color:#0b5e86;
}
.hhq-grid .hhq__btn--card.is-selected .hhq__card-media{
  background:#fff; color:#0b5e86;
}

/* ===== Variante invertida ===== */
.hhq-grid.hhq--invert{ background:#0b5e86; border-color:#0b5e86; }
.hhq-grid.hhq--invert .hhq__title{ color:#fff; }

.hhq-grid.hhq--invert .hhq__btn--card{
  background:transparent; color:#fff; border-color:#fff;
}
.hhq-grid.hhq--invert .hhq__btn--card .hhq__card-media{
  background:transparent; color:#fff;
}
.hhq-grid.hhq--invert .hhq__btn--card.is-selected{
  background:#fff; color:#0b5e86; border-color:#fff;
}
.hhq-grid.hhq--invert .hhq__btn--card.is-selected .hhq__card-media{
  background:#fff; color:#0b5e86;
}


/* === FIX DURO PARA QUE LOS BOTONES SE ESTIREN DE VERDAD === */

/* 1) La celda del grid estira a sus hijos y no los centra */
.hhq-grid__list,
.hhq-grid_list{
  justify-items: stretch !important;
  align-items: stretch !important;
  grid-template-columns: 1fr; /* mobile */
}
@media (min-width:768px){
  .hhq-grid__list, .hhq-grid_list{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:992px){
  .hhq-grid__list, .hhq-grid_list{ grid-template-columns: repeat(3, 1fr); }
}

/* 2) El ítem (botón) ocupa TODA la celda, sin max-width heredados */
.hhq-grid__list > .hhq__btn,
.hhq-grid_list  > .hhq__btn,
.hhq-grid__list > .hhq_btn,
.hhq-grid_list  > .hhq_btn,
.hhq-grid__list > button,
.hhq-grid_list  > button{
  justify-self: stretch !important;
  align-self: stretch !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;    /* evita recortes raros */
  flex-direction: column;
}

/* 3) El propio “card” no limita el ancho */
.hhq__btn--card{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* 4) El contenido interno puede expandirse sin cortar palabras a lo loco */
.hhq__card-label{
  white-space: nowrap;         /* mostrás con “…” si no entra */
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;              /* que el texto use el espacio disponible */
  min-width: 0;                /* clave para que el ellipsis funcione */
}

/* 5) Por si alguna regla global centraba con margin:auto o similar */
.hhq-grid__list > *{
  margin: 0 !important;
}