/**
 * @file
 * Componente: Ubícate en nuestro hospital  (.c-uh)
 *
 * Mapa del campus con zonas clicables + panel de torre con acordeón de pisos.
 * El color destacado se inyecta inline desde el Twig como --uh-dest.
 */

/* ============================================================
   Contenedor y tokens
   ============================================================ */
.c-uh {
  --uh-dest: #4a2560;          /* Fallback; el Twig lo sobrescribe inline */
  --uh-item-bg: #ffffff;
  --uh-item-fg: #111111;
  --uh-item-borde: #dcdcdc;
  --uh-texto: #333333;

  /* Geometría calibrada sobre imagen-hospital-rionegro.png (684 x 875 px).
     A y su anexo verificados en pantalla; B/C/D reajustados tras QA.
     Si cambia el plano, hay que recalcular estos 16 valores. */
    --a-x: 55.2%;
    --a-y: 38.6%;
    --a-w: 16.5%;
    --a-h: 12.7%;
    --b-x: 45.5%;
    --b-y: 54.6%;
    --b-w: 38.0%;
    --b-h: 9.6%;
    --c-x: 44.5%;
    --c-y: 66%;
    --c-w: 40.5%;
    --c-h: 9.4%;
    --d-x: 45.9%;
    --d-y: 77.3%;
    --d-w: 37.3%;
    --d-h: 9.5%;
}

.c-uh__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 16px;
  display: grid;
  gap: 32px 48px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "titulo titulo"
    "mapa   panel";
  align-items: start;
}

/* Texto solo para lectores de pantalla (fallback propio del componente). */
.c-uh__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-uh__titulo {
  grid-area: titulo;
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #111111;
}

/* ============================================================
   Mapa y zonas clicables
   ============================================================ */

/* Sin borde ni radio: el PNG ya trae el marco verde y las esquinas
   redondeadas quemados en la propia imagen. */
.c-uh__mapa {
  grid-area: mapa;
  position: relative;
  min-width: 0;
  line-height: 0;
}

/* Drupal imprime width/height como atributos en el <img>; hay que anularlos. */
.c-uh__mapa img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.c-uh__zonas {
  position: absolute;
  inset: 0;
}

.c-uh__zona {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.c-uh__zona:hover {
  background: rgba(74, 37, 96, 0.22);
}

.c-uh__zona:focus-visible {
  background: rgba(74, 37, 96, 0.22);
  outline: 3px solid var(--uh-dest);
  outline-offset: 2px;
}

.c-uh__zona.is-activa {
  background: rgba(74, 37, 96, 0.28);
  box-shadow: 0 0 0 2px var(--uh-dest);
}

.c-uh__zona--torre-a {
  left: var(--a-x);
  top: var(--a-y);
  width: var(--a-w);
  height: var(--a-h);
  border-radius: 50%;
}

.c-uh__zona--torre-b {
  left: var(--b-x);
  top: var(--b-y);
  width: var(--b-w);
  height: var(--b-h);
}

.c-uh__zona--torre-c {
  left: var(--c-x);
  top: var(--c-y);
  width: var(--c-w);
  height: var(--c-h);
}

.c-uh__zona--torre-d {
  left: var(--d-x);
  top: var(--d-y);
  width: var(--d-w);
  height: var(--d-h);
}

/* Anexo circular de la Torre A (el círculo pequeño a su izquierda).
   Los pseudo-elementos participan del hit-testing, así que el clic sobre
   el anexo se enruta al mismo botón sin tocar Twig ni JS.
   Si no se quiere clicable, borrar este bloque completo. */
.c-uh__zona--torre-a::after {
  content: "";
  position: absolute;
  left: -53%;
  top: 64%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: inherit;
  box-shadow: inherit;
}

/* ============================================================
   Panel de torre
   ============================================================ */
.c-uh__panel {
  grid-area: panel;
  min-width: 0;
}

.c-uh__torre[hidden] {
  display: none;
}

.c-uh__torre-nombre {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  color: var(--uh-dest);
}

.c-uh__pisos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-uh__piso {
  margin-bottom: 12px;
}

.c-uh__piso-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  background: var(--uh-item-bg);
  color: var(--uh-item-fg);
  border: 1px solid var(--uh-item-borde);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.c-uh__piso-btn:hover {
  border-color: var(--uh-dest);
}

.c-uh__piso-btn:focus-visible {
  outline: 3px solid var(--uh-dest);
  outline-offset: 2px;
}

/* Estado seleccionado. El morado indica "seleccionado", no "abierto":
   se conserva aunque el acordeón se cierre. */
.c-uh__piso.is-activo > .c-uh__piso-btn {
  background: var(--uh-dest);
  color: #ffffff;
  border-color: var(--uh-dest);
}

/* Flecha dibujada con clip-path, sin SVG ni fuente de iconos. */
.c-uh__piso-flecha {
  flex: 0 0 auto;
  width: 15px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(0 42%, 62% 42%, 62% 12%, 100% 50%, 62% 88%, 62% 58%, 0 58%);
  transition: transform 0.2s ease;
}

.c-uh__piso-btn[aria-expanded="true"] .c-uh__piso-flecha {
  transform: rotate(90deg);
}

/* ============================================================
   Contenido del piso
   ============================================================ */
.c-uh__piso-cuerpo {
  padding: 14px 20px 6px;
  font-size: 15px;
}

.c-uh__piso-cuerpo[hidden] {
  display: none;
}

/* El theme trae reglas globales sobre <p>, <li> y <a> que ganan por
   especificidad: hay que apuntar a los hijos directamente. */
.c-uh__piso-cuerpo p,
.c-uh__piso-cuerpo li {
  color: var(--uh-texto) !important;
  line-height: 1.55;
  margin: 0 0 6px;
}

.c-uh__piso-cuerpo ul,
.c-uh__piso-cuerpo ol {
  margin: 0;
  padding-left: 20px;
}

.c-uh__piso-cuerpo a {
  color: var(--uh-dest) !important;
  text-decoration: underline;
}

.c-uh__piso-cuerpo a:hover {
  filter: brightness(1.25);
}

/* ============================================================
   Móvil
   ============================================================ */
@media (max-width: 991px) {
  .c-uh__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titulo"
      "panel"
      "mapa";
    gap: 24px;
    padding: 32px 16px;
  }

  .c-uh__titulo {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .c-uh__torre-nombre {
    font-size: 20px;
  }
}

/* ============================================================
   Accesibilidad
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .c-uh__zona,
  .c-uh__piso-btn,
  .c-uh__piso-flecha {
    transition: none;
  }
}