/* Campus Guide · UPP — © 2026 imsale91-cmyk. Todos los derechos reservados.
   Uso, copia o redistribución sin autorización prohibidos. Ver LICENSE. */
/* ==========================================================================
   COMPONENTES
   Piezas reutilizables: tarjetas, modal, carrusel, acordeones,
   buscador, banner de instalación y toast.
   ========================================================================== */

/* ─── WELCOME BANNER ─── */
.welcome-banner {
  background: linear-gradient(135deg, #2A1060 0%, var(--upp-purple) 60%, #7B4BBF 100%);
  border-radius: var(--r-xl); padding: 1.5rem 1.4rem;
  color: #fff; margin-bottom: 1.25rem; position: relative; overflow: hidden;
}
.wb-deco1 {
  position: absolute; right: -16px; top: -16px;
  width: 90px; height: 90px; border-radius: 50%;
  background: rgba(201,162,39,0.14); pointer-events: none;
}
.wb-deco2 {
  position: absolute; right: 30px; bottom: -32px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,0.06); pointer-events: none;
}
.wb-greeting { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.3rem; }
.wb-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem,4vw,1.55rem); color: #fff; line-height: 1.2; }
.wb-title .accent { color: var(--upp-gold-light); }
.wb-sub { font-size: 0.82rem; color: rgba(255,255,255,0.68); margin-top: 0.5rem; line-height: 1.55; }
.wb-meta { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.wb-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85); border-radius: var(--r-full);
  padding: 4px 10px; font-size: 0.7rem; font-weight: 500;
}

/* ─── QUICK ACCESS ─── */
.quick-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 0.7rem; margin-bottom: 1.5rem;
}
@media (min-width: 380px) { .quick-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 768px) { .quick-grid { grid-template-columns: repeat(6,1fr); } }
.quick-card {
  background: var(--upp-white); border: 1px solid var(--upp-gray-border);
  border-radius: var(--r-lg); padding: 1rem 0.6rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center; box-shadow: var(--shadow-card);
  transition: transform 0.22s var(--ease-spring), box-shadow 0.18s, border-color 0.18s;
  cursor: pointer;
}
.quick-card:active { transform: scale(0.95); }
.quick-card:hover { border-color: var(--upp-purple-light); box-shadow: var(--shadow-raised); }
.qc-icon {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--upp-purple-pale);
  display: flex; align-items: center; justify-content: center;
}
.qc-icon svg { width: 20px; height: 20px; stroke: var(--upp-purple); stroke-width: 1.8; fill: none; }
.qc-label { font-size: 0.7rem; font-weight: 600; color: var(--upp-oxford); line-height: 1.3; }

/* ─── INFO CARDS ─── */
.info-cards { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.25rem; }
.info-card {
  background: var(--upp-white); border: 1px solid var(--upp-gray-border);
  border-left: 3px solid var(--upp-purple); border-radius: var(--r-md);
  padding: 0.9rem 1rem; box-shadow: var(--shadow-xs);
  display: flex; gap: 0.7rem; align-items: flex-start;
}
.info-card.gold  { border-left-color: var(--upp-gold); }
.info-card.green { border-left-color: var(--upp-success); }
.info-card.blue  { border-left-color: var(--upp-info); }
.ic-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ic-icon svg { width: 20px; height: 20px; stroke-width: 1.8; fill: none; stroke: var(--upp-purple); }
.info-card.gold .ic-icon svg { stroke: var(--upp-gold); }
.info-card.green .ic-icon svg { stroke: var(--upp-success); }
.info-card.blue .ic-icon svg { stroke: var(--upp-info); }
.ic-title { font-size: 0.87rem; font-weight: 600; color: var(--upp-oxford); margin-bottom: 2px; }
.ic-text  { font-size: 0.79rem; color: var(--upp-gray-mid); line-height: 1.55; }

/* ─── MAP TOOLBAR ─── */
.map-toolbar {
  display: flex; align-items: center; padding: 0.55rem 1rem;
  gap: 0.5rem; background: var(--upp-white);
  border-bottom: 1px solid var(--upp-gray-border); flex-shrink: 0;
}
.map-toolbar svg { width: 16px; height: 16px; stroke: var(--upp-purple); stroke-width: 2; flex-shrink: 0; }
.map-title-text { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--upp-oxford); flex: 1; }
.map-hint { font-size: 0.68rem; color: var(--upp-gray-mid); }

#map-container { flex: 1; min-height: 0; position: relative; overflow: hidden; isolation: isolate; z-index: 0; }
#leaflet-map {
  width: 100%; height: 100%;
  min-height: 0;
  background: #e8e4f0;
}

/* ─── MAP MARKERS ─── */
.poi-wrap {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: transform 0.2s var(--ease-spring);
  filter: drop-shadow(0 3px 6px rgba(92,45,145,0.35));
}
.poi-wrap:hover, .poi-wrap.active { transform: scale(1.18) translateY(-4px); filter: drop-shadow(0 5px 12px rgba(92,45,145,0.45)); }
.poi-pin {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--upp-purple);
  border: 2.5px solid var(--upp-gold);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s;
}
.poi-pin svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 1.8; fill: none; }
.poi-pin.active { background: var(--upp-gold); }
.poi-pin.active svg { stroke: var(--upp-purple-dark); }
.poi-tag {
  background: var(--upp-white); color: var(--upp-purple-dark);
  font-size: 0.62rem; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-full); margin-top: 3px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.12);
  white-space: nowrap; max-width: 88px;
  overflow: hidden; text-overflow: ellipsis;
}

/* ─── MODAL ─── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(20,10,40,0.65);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  isolation: isolate;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }

.modal-sheet {
  background: var(--upp-white) !important;
  opacity: 1 !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-width: 700px;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal);
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.34,1.15,0.64,1);
  overflow: hidden;
}
.modal-backdrop.open .modal-sheet { transform: translateY(0); }

.modal-handle { width: 36px; height: 4px; background: var(--upp-gray-border); border-radius: 99px; margin: 10px auto 0; flex-shrink: 0; }

.modal-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.2rem 0.7rem;
  border-bottom: 1px solid var(--upp-gray-border);
  flex-shrink: 0; background: var(--upp-white);
}
.modal-icon-wrap {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-md);
  background: var(--upp-purple-pale);
  display: flex; align-items: center; justify-content: center;
}
.modal-icon-wrap svg { width: 22px; height: 22px; stroke: var(--upp-purple); stroke-width: 1.8; fill: none; }
.modal-title-group { flex: 1; min-width: 0; }
.modal-name {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--upp-oxford); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-cat { font-size: 0.7rem; color: var(--upp-gray-mid); margin-top: 1px; }
.modal-close {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--r-sm); background: var(--upp-gray-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--upp-gray-dark); transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: #fde8e8; color: var(--upp-danger); }
.modal-close svg { width: 18px; height: 18px; stroke-width: 2.5; }

.modal-body { overflow-y: auto; flex: 1; overscroll-behavior: contain; background: var(--upp-white); }

/* ─── CAROUSEL ─── */
.carousel-wrap { position: relative; background: #1E1A2E; height: 185px; overflow: hidden; flex-shrink: 0; }
.carousel-track { display: flex; height: 100%; transition: transform 0.35s var(--ease-out); }
.carousel-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--upp-purple-pale), var(--upp-purple-pale));
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem;
}
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.slide-placeholder svg { width: 40px; height: 40px; stroke: var(--upp-purple-light); stroke-width: 1.5; fill: none; opacity: 0.5; }
.slide-placeholder span { font-size: 0.75rem; color: var(--upp-gray-mid); }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.88);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); z-index: 5;
  transition: background 0.15s; font-size: 0.85rem;
}
.car-btn:hover { background: #fff; }
.car-btn.prev { left: 10px; }
.car-btn.next { right: 10px; }
.car-btn svg { width: 14px; height: 14px; stroke-width: 2.5; stroke: var(--upp-oxford); fill: none; }
.car-dots { position: absolute; bottom: 8px; width: 100%; display: flex; justify-content: center; gap: 5px; }
.car-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background 0.15s, transform 0.2s; }
.car-dot.on { background: var(--upp-gold); transform: scale(1.3); }

/* ─── MODAL BODY CONTENT ─── */
.modal-desc { padding: 1rem 1.2rem 0.5rem; font-size: 0.86rem; line-height: 1.7; color: var(--upp-gray-dark); }
.modal-section { padding: 0.6rem 1.2rem 1.2rem; }
.modal-section-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--upp-gray-mid); margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 6px;
}
.modal-section-label::after { content: ''; flex: 1; height: 1px; background: var(--upp-gray-border); }
.room-list { display: flex; flex-direction: column; gap: 0.35rem; }
.room-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--upp-gray-light); border-radius: var(--r-sm);
  font-size: 0.83rem; color: var(--upp-oxford);
}
.room-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--upp-purple); flex-shrink: 0; }

.modal-actions { display: flex; gap: 0.5rem; padding: 0.5rem 1.2rem 1.4rem; }
.btn-primary {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--upp-purple); color: #fff;
  border-radius: var(--r-md); padding: 0.7rem 1rem;
  font-size: 0.85rem; font-weight: 600; font-family: var(--font-body);
  transition: background 0.18s, transform 0.15s;
}
.btn-primary:hover { background: var(--upp-purple-dark); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; fill: none; }
.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--upp-gray-light); color: var(--upp-oxford);
  border-radius: var(--r-md); padding: 0.7rem 1rem;
  font-size: 0.85rem; font-weight: 600; font-family: var(--font-body);
  border: 1px solid var(--upp-gray-border);
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--upp-purple-pale); color: var(--upp-purple); }
.btn-secondary svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ─── DIRECTORIO ─── */
.search-bar {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--upp-white); border: 1.5px solid var(--upp-gray-border);
  border-radius: var(--r-md); padding: 0 0.9rem; margin-bottom: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-bar:focus-within { border-color: var(--upp-purple); box-shadow: 0 0 0 3px var(--upp-purple-ultra); }
.search-bar svg { width: 16px; height: 16px; stroke: var(--upp-gray-mid); stroke-width: 2; fill: none; flex-shrink: 0; }
.search-bar input {
  flex: 1; border: none; outline: none; padding: 0.7rem 0;
  font-size: 0.87rem; background: transparent; color: var(--upp-oxford);
}
.search-bar input::placeholder { color: var(--upp-gray-mid); }

/* ─── INFO PAGE ─── */
.info-section { margin-bottom: 1.75rem; }
.info-section-title {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  color: var(--upp-oxford); padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--upp-purple-pale);
  margin-bottom: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.info-section-title svg { width: 18px; height: 18px; stroke: var(--upp-purple); stroke-width: 2; fill: none; flex-shrink: 0; }
.contact-card {
  background: var(--upp-white); border: 1px solid var(--upp-gray-border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.contact-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--upp-gray-border);
}
.contact-row:last-child { border-bottom: none; }
.cr-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.cr-icon svg { width: 18px; height: 18px; stroke: var(--upp-purple); stroke-width: 1.8; fill: none; }
.cr-label { font-size: 0.7rem; color: var(--upp-gray-mid); margin-bottom: 1px; }
.cr-value { font-size: 0.87rem; font-weight: 600; color: var(--upp-oxford); }
a.cr-value { color: var(--upp-purple); }

/* ─── ACORDEÓN DIRECTORIO ─── */
.acc-hint { font-size: 0.76rem; color: var(--upp-gray-mid); margin-bottom: 0.6rem; line-height: 1.45; }
.accordion {
  background: var(--upp-white); border: 1px solid var(--upp-gray-border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.acc-item { border-bottom: 1px solid var(--upp-gray-border); }
.acc-item:last-child { border-bottom: none; }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.8rem 1rem; cursor: pointer; text-align: left;
  background: none; transition: background 0.15s;
}
.acc-head:hover { background: var(--upp-gray-light); }
.acc-item.open .acc-head { background: var(--upp-purple-pale); }
.acc-badge {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: #fff;
}
.acc-badge.b-purple { background: var(--upp-purple); }
.acc-badge.b-gold   { background: var(--upp-gold); }
.acc-badge.b-green  { background: var(--upp-success); }
.acc-badge.b-blue   { background: var(--upp-info); }
.acc-title { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--upp-oxford); line-height: 1.35; }
.acc-chevron {
  flex-shrink: 0; width: 18px; height: 18px; stroke: var(--upp-gray-mid); stroke-width: 2; fill: none;
  transition: transform 0.28s var(--ease-spring);
}
.acc-item.open .acc-chevron { transform: rotate(90deg); stroke: var(--upp-purple); }
.acc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > .acc-body-inner { min-height: 0; overflow: hidden; }
.acc-body-inner { padding: 0 1rem 0 calc(1rem + 34px + 0.75rem); }
.acc-item.open .acc-body-inner { padding-top: 0.1rem; padding-bottom: 0.9rem; }
.acc-person + .acc-person { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--upp-gray-border); }
.ap-name { font-size: 0.85rem; font-weight: 700; color: var(--upp-oxford); line-height: 1.35; }
.ap-role { font-size: 0.72rem; font-weight: 600; color: var(--upp-purple); }
.ap-mail {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 0.8rem; font-weight: 600; color: var(--upp-purple); word-break: break-word;
}
.ap-mail svg { width: 15px; height: 15px; stroke: var(--upp-purple); stroke-width: 1.8; fill: none; flex-shrink: 0; }
.ap-mail:hover span { text-decoration: underline; }
.ap-tel { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 0.78rem; color: var(--upp-gray-dark); }
.ap-tel svg { width: 15px; height: 15px; stroke: var(--upp-gray-mid); stroke-width: 1.8; fill: none; flex-shrink: 0; }

/* ─── CONTACTOS DE FINANCIERA ─── */
.fin-card {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--upp-white); border: 1px solid var(--upp-gray-border);
  border-radius: var(--r-lg); padding: 0.7rem 0.85rem; box-shadow: var(--shadow-xs);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.fin-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); border-color: var(--upp-purple-light); }
.fin-avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; color: #fff;
}
.fin-avatar.b-purple { background: var(--upp-purple); }
.fin-avatar.b-gold   { background: var(--upp-gold); }
.fin-avatar.b-green  { background: var(--upp-success); }
.fin-avatar.b-blue   { background: var(--upp-info); }
.fin-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-name { font-size: 0.83rem; font-weight: 600; color: var(--upp-oxford); line-height: 1.3; }
.fin-mail { font-size: 0.74rem; color: var(--upp-purple); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-arrow { flex-shrink: 0; width: 18px; height: 18px; }
.fin-arrow svg { width: 100%; height: 100%; stroke: var(--upp-gray-mid); stroke-width: 1.8; fill: none; }
.fin-card:hover .fin-arrow svg { stroke: var(--upp-purple); }

/* ─── INSTALL BANNER ─── */
.install-banner {
  display: none; align-items: center; gap: 0.75rem;
  background: linear-gradient(90deg, var(--upp-gold-pale), #fff5d0);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: var(--r-lg); padding: 0.85rem 1rem;
  margin-bottom: 1.1rem; cursor: pointer;
  transition: box-shadow 0.18s;
}
.install-banner.visible { display: flex; }
.install-banner:hover { box-shadow: 0 3px 12px rgba(201,162,39,0.25); }
.ib-icon { width: 38px; height: 38px; background: var(--upp-gold); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ib-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; }
.ib-text { flex: 1; }
.ib-text strong { font-size: 0.87rem; color: #6a4a00; display: block; font-weight: 700; }
.ib-text span { font-size: 0.73rem; color: #9a7200; }
.ib-arrow svg { width: 16px; height: 16px; stroke: var(--upp-gold); stroke-width: 2.5; fill: none; }

/* ─── TOAST ─── */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 12px);
  left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--upp-oxford); color: #fff;
  padding: 0.55rem 1.1rem; border-radius: var(--r-full);
  font-size: 0.81rem; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── ENLACES EN TARJETAS (ubicación clickeable, calendario) ─── */
a.wb-tag { text-decoration: none; cursor: pointer; }
a.wb-tag:hover { background: rgba(255,255,255,0.22); }
a.info-card { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.18s, transform 0.18s; }
a.info-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }