:root{
  --radius: 22px;
  --radius2: 16px;
  --shadow: 0 18px 50px rgba(0,0,0,.10);
  --shadow2: 0 10px 28px rgba(0,0,0,.10);
  --stroke: rgba(255,255,255,.18);

  --bg: #eef3ff;
  --bg2:#f7f9ff;
  --panel: rgba(255,255,255,.70);
  --card: rgba(255,255,255,.82);
  --text: #0b0f1a;
  --muted: rgba(15, 23, 42, .62);
  --accent: #2563eb;
  --accent2:#7c3aed;
  --chip: rgba(37, 99, 235, .10);

  --topbar: rgba(18, 22, 35, .72);
  --topbarText: #fff;

  --input: rgba(255,255,255,.85);
  --inputStroke: rgba(0,0,0,.08);
}

body[data-theme="dark"]{
  --bg: #080b14;
  --bg2:#0a1020;
  --panel: rgba(13, 19, 35, .66);
  --card: rgba(14, 20, 38, .72);
  --text: #e8ecff;
  --muted: rgba(232,236,255,.65);
  --stroke: rgba(255,255,255,.12);

  --topbar: rgba(9, 12, 20, .72);
  --topbarText: #e9edff;

  --input: rgba(17, 24, 39, .60);
  --inputStroke: rgba(255,255,255,.10);
  --chip: rgba(96, 165, 250, .14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(900px 650px at 85% 10%, rgba(168,85,247,.20), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow:hidden;
}

/* ===== Kiosk (opcional) ===== */
body[data-kiosk="1"]{
  cursor: none;
  -webkit-tap-highlight-color: transparent;
}
body[data-kiosk="1"] *{
  user-select:none;
}

/* ===== Overlay ===== */
.overlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index:9999;
  opacity:1;
  pointer-events:auto;
  transition: opacity .25s ease;
}
.overlay.is-hidden{
  opacity:0;
  pointer-events:none;
}
.overlay-card{
  width:min(560px, 88vw);
  border-radius: 26px;
  padding: 34px 28px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  text-align:center;
  transform: translateY(0);
  transition: transform .25s ease;
  user-select:none;
}
body[data-theme="light"] .overlay-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.18);
}
.tap-icon{
  width:92px; height:92px;
  margin: 0 auto 12px;
  position:relative;
  display:grid; place-items:center;
  border-radius: 22px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}
body[data-theme="light"] .tap-icon{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}
.tap-icon svg{ width:52px; height:52px; opacity:.95; }
.tap-pulse{
  position:absolute; inset:-10px;
  border-radius: 30px;
  border: 2px solid rgba(255,255,255,.22);
  animation: pulse 1.4s ease-in-out infinite;
}
body[data-theme="light"] .tap-pulse{
  border-color: rgba(0,0,0,.12);
}
@keyframes pulse{
  0%{ transform: scale(.92); opacity:.35; }
  60%{ transform: scale(1.02); opacity:.15; }
  100%{ transform: scale(.92); opacity:.35; }
}
.overlay-title{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .2px;
}
.overlay-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
body[data-theme="light"] .overlay-sub{ color: rgba(15,23,42,.65); }
.overlay-hint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
}
body[data-theme="light"] .overlay-hint{ color: rgba(15,23,42,.55); }

/* ===== Layout ===== */
.totem-wrap{
  height:100%;
  display:grid;
  grid-template-columns: 35% 65%;
  gap: 16px;
  padding: 14px 14px 18px;
}
.left-panel, .right-panel{
  border-radius: 28px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.left-panel{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.right-panel{
  display:flex;
  flex-direction:column;
}

/* ===== Left ===== */
.left-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.dir-title{
  margin:0;
  font-size: 34px;
  letter-spacing: .18em;
  font-weight: 900;
}
.dir-sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.theme-switch{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-top: 6px;
}
.theme-switch .label{
  font-size: 12px;
  color: var(--muted);
}
.switch{
  width: 54px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  position:relative;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
body[data-theme="light"] .switch{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.08);
}
.switch .knob{
  position:absolute;
  top: 4px; left: 4px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.switch.is-on{
  background: linear-gradient(135deg, rgba(37,99,235,.85), rgba(124,58,237,.80));
  border-color: rgba(255,255,255,.18);
}
.switch.is-on .knob{ transform: translateX(24px); }

.building-media{ display:flex; flex-direction:column; gap: 10px; }
.building-img{
  width:100%;
  height: 230px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.left-cards{ display:flex; flex-direction:column; gap: 12px; }

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: var(--shadow2);
}
.card-pad{ padding: 16px; }

.building-card{
  display:flex;
  gap: 12px;
  align-items:center;
}
.b-logo{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .05em;
  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.90));
  box-shadow: 0 14px 30px rgba(37,99,235,.22);
}
.b-name{ font-size: 16px; font-weight: 900; }
.b-addr{ margin-top: 3px; font-size: 12px; color: var(--muted); }

.section-title{
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 12px;
}
.contact-wrap{ display:flex; align-items:center; gap: 12px; }
.contact-logo{ width: 66px; height: 40px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.15)); }
.contact-lines{ display:flex; flex-direction:column; gap: 4px; }
.contact-name{ font-weight: 900; }
.contact-sub{ font-size: 12px; color: var(--muted); }
.contact-phone{ font-size: 18px; font-weight: 900; letter-spacing: .06em; }

/* ===== Right ===== */
.right-top{
  padding: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.btn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 800;
  transition: transform .10s ease, background .2s ease;
}
.btn:active{ transform: scale(.98); }
body[data-theme="light"] .btn{
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.08);
}

.search{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--input);
  border: 1px solid var(--inputStroke);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.search .icon{ opacity: .8; }
.search input{
  border:0; outline:0;
  background: transparent;
  color: var(--text);
  width: 100%;
  font-size: 14px;
}
.search input::placeholder{ color: rgba(127,127,127,.75); }
.clear{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.12);
  cursor:pointer;
  color: var(--text);
}
body[data-theme="light"] .clear{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}

.right-body{
  padding: 0 14px 14px;
  overflow:auto;
}
.right-body::-webkit-scrollbar{ width: 10px; }
.right-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}
body[data-theme="light"] .right-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.10);
}

.hint{
  margin-top: 12px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.16);
  color: var(--muted);
}
body[data-theme="light"] .hint{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.10);
}

.stack{ display:flex; flex-direction:column; gap: 12px; }

/* ===== Floor accordion (animado suave) ===== */
.floor{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  transform: translateZ(0);
}
.floor-head{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
}
.floor-left{ display:flex; align-items:center; gap: 12px; }
.floor-badge{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 900;
  background: rgba(37,99,235,.14);
  border: 1px solid rgba(37,99,235,.22);
}
.floor-title{ font-weight: 900; }
.floor-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.floor-caret{ opacity:.7; transition: transform .22s ease; }
.floor.is-open .floor-caret{ transform: rotate(180deg); }

.floor-body{
  padding: 0 12px;
  max-height: 0;
  overflow:hidden;
  opacity: 0;
  transition: max-height .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.floor.is-open .floor-body{
  opacity: 1;
  padding: 0 12px 12px;
}

/* ===== Offices list ===== */
.office{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
body[data-theme="light"] .office{ background: rgba(255,255,255,.70); }

.office-head{
  padding: 12px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  cursor:pointer;
}
.office-name{ font-weight: 900; }
.office-desc{ margin-top: 4px; font-size: 12px; color: var(--muted); }

.meta-row{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid rgba(37,99,235,.18);
}
.office-caret{ margin-top: 2px; opacity:.7; transition: transform .22s ease; }
.office.is-open .office-caret{ transform: rotate(180deg); }

.office-body{
  max-height: 0;
  overflow:hidden;
  opacity: 0;
  border-top: 1px solid var(--stroke);
  transition: max-height .30s cubic-bezier(.2,.8,.2,1), opacity .20s ease;
}
.office.is-open .office-body{ opacity: 1; }

.detail-grid{
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 12px 14px 14px;
}
.detail-line{ font-size: 13px; }
.detail-line .k{ font-weight: 900; margin-right: 6px; }

.actions{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.linkbtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  color: var(--text);
  font-weight: 900;
  text-decoration:none;
}
body[data-theme="light"] .linkbtn{
  background: rgba(255,255,255,.80);
  border-color: rgba(0,0,0,.08);
}
.linkbtn:active{ transform: scale(.99); }

/* ===== Search results ===== */
.results-head{
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 900;
  color: var(--muted);
  margin: 8px 2px;
}
.result{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: var(--shadow2);
  padding: 14px;
  cursor:pointer;
}
.result:active{ transform: scale(.995); }
.result-title{ font-weight: 900; }
.result-sub{ margin-top: 5px; font-size: 12px; color: var(--muted); }
.result-tags{ margin-top: 10px; display:flex; flex-wrap:wrap; gap: 8px; }

/* ===== Modal QR ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}
.modal.is-open{ display: block; }
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-card{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  overflow:hidden;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
}
.modal-title{ font-weight: 900; }
.modal-close{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}
.modal-body{ padding: 16px; }
.modal-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items:start;
}
.modal-qr{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  padding: 12px;
  min-height: 280px;
  display:grid;
  place-items:center;
}
.modal-qr img{
  width: 240px;
  height: 240px;
  object-fit: contain;
  display:none;
}
.modal-empty{
  color: var(--muted);
  font-size: 13px;
}
.modal-actions{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.modal-actions .linkbtn{
  justify-content:center;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  body{ overflow:auto; }
  .totem-wrap{
    height:auto;
    grid-template-columns: 1fr;
  }
  .building-img{ height: 200px; }
  .modal-grid{ grid-template-columns: 1fr; }
  .modal-qr img{ width: 220px; height: 220px; }
}

/* Acordeón suave: reemplaza el display none */
.floor-body{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .42s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
  padding: 0 12px; /* se mantiene el padding horizontal */
}

.floor.is-open .floor-body{
  max-height: 2000px; /* suficientemente grande */
  opacity: 1;
  padding-bottom: 12px;
}

.floor-inner{
  padding-top: 4px;
}

/* Detalle oficina suave */
.office-body{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
  border-top: 1px solid var(--stroke);
}

.office.is-open .office-body{
  max-height: 1200px;
  opacity: 1;
}

/* ===== QRs dentro del desplegable ===== */
.qr-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.qr-item{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 12px;
}

.qr-label{
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .85;
  margin-bottom: 10px;
}

.qr-img{
  width: 100%;
  aspect-ratio: 1 / 1;      /* ✅ siempre cuadrado */
  object-fit: contain;       /* ✅ no recorta */
  background: #fff;          /* ✅ QR se ve perfecto en dark */
  border-radius: 10px;
  display: block;
  padding: 10px;             /* ✅ aire alrededor */
  box-sizing: border-box;
}

/* En pantallas chicas, apilarlos */
@media (max-width: 900px){
  .qr-grid{ grid-template-columns: 1fr; }
}

/* ===== QRs compactos y equilibrados ===== */

.qr-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px;
  justify-content: flex-start; /* que no ocupen todo el ancho */
}

.qr-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qr-label{
  font-size: 12px;
  opacity: .75;
}

.qr-img{
  width: 190px;       /* 👈 tamaño fijo cómodo */
  height: 190px;
  object-fit: contain;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}


/* === Animaciones suaves acordeón === */
.floor-body,
.office-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease;
}

.floor.is-open .floor-body {
  max-height: 2400px; /* grande para permitir contenido */
  opacity: 1;
  transform: translateY(0);
}

.office.is-open .office-body {
  max-height: 2200px;
  opacity: 1;
  transform: translateY(0);
}

/* si tu CSS ya usa aria-hidden para mostrar/ocultar, esto lo vuelve "pro" */
.floor-body[aria-hidden="false"],
.office-body[aria-hidden="false"] {
  max-height: 2400px;
  opacity: 1;
  transform: translateY(0);
}

/* === QR Pro: centrado, tamaño chico, en fila si son 2 === */
.qr-grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  justify-content: center; /* centra el conjunto */
  align-items: start;
}

/* por defecto: 2 columnas si hay espacio */
.qr-grid {
  grid-template-columns: repeat(2, minmax(160px, 220px));
}

/* si hay 1 QR: una columna y centrado */
.qr-grid[data-count="1"] {
  grid-template-columns: minmax(180px, 240px);
}

/* si hay 3 QR: 3 columnas cuando hay ancho, sino cae solo */
@media (min-width: 1100px) {
  .qr-grid[data-count="3"] {
    grid-template-columns: repeat(3, minmax(160px, 210px));
  }
}

/* Cards */
.qr-card {
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

body[data-theme="light"] .qr-card {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.qr-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.qr-title {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.qr-link {
  font-size: 12px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.qr-link:hover { filter: brightness(1.1); }

.qr-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
}

body[data-theme="light"] .qr-box {
  background: rgba(0,0,0,0.06);
}

.qr-img {
  width: 180px;     /* ✅ tamaño más chico */
  height: 180px;
  object-fit: contain;
  image-rendering: crisp-edges;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
}

/* si querés aún más chico, bajalo a 160x160 */
@media (max-width: 900px) {
  .qr-img { width: 160px; height: 160px; }
  .qr-grid { grid-template-columns: repeat(2, minmax(150px, 200px)); }
}

.qr-missing {
  font-size: 13px;
  opacity: .7;
  padding: 18px 10px;
}

.qr-card.qr-broken .qr-missing {
  display: block;
}


/* ===== QR INLINE (centrado, pro, 1 o 2) ===== */
.qr-wrap{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.qr-grid{
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.qr-grid.is-one{ justify-content: center; }
.qr-grid.is-two{ justify-content: center; }

.qr-card{
  width: min(240px, 42vw);
  max-width: 240px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

body[data-theme="light"] .qr-card{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.qr-card-head{
  display:flex;
  align-items:center;
  justify-content: center;
  padding: 2px 6px 10px;
}

.qr-title{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.qr-click{
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius: 12px;
  overflow:hidden;
  background: #fff;
  padding: 10px;
}

.qr-click.is-static{ cursor: default; }
.qr-click:not(.is-static){ cursor: pointer; }

.qr-img{
  width: 170px;
  height: 170px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* En pantallas más chicas: QR un poco más chico */
@media (max-width: 900px){
  .qr-card{ max-width: 220px; }
  .qr-img{ width: 150px; height: 150px; }
}
@media (max-width: 600px){
  .qr-card{ width: min(220px, 90vw); }
  .qr-img{ width: 150px; height: 150px; }
}

/* ===== Animación suave (sin romper tu render por rearmado de HTML) ===== */
/* cuando aparece el body, lo animamos sutil */
.floor.is-open .floor-body,
.office.is-open .office-body{
  animation: softDrop .18s ease-out both;
}

@keyframes softDrop{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ===== Cursor visible SIEMPRE (corrige “desaparece”) ===== */
/* Si tenías cursor:none en algún lado, esto lo pisa */
html, body { cursor: default !important; }
button, a, .floor-head, .office-head, .result { cursor: pointer !important; }
input { cursor: text !important; }

/* ===== Left panel corporativo ===== */

.left-panel { display:flex; flex-direction:column; gap:16px; }
.left-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { width:44px; height:44px; border-radius:14px; position:relative; overflow:hidden;
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(0,209,255,.18));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  flex: 0 0 auto;
}
.brand-logo { width:100%; height:100%; object-fit:cover; display:block; }
.brand-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.02em;
}

.brand-text { min-width:0; }
.dir-title { margin:0; letter-spacing:.35em; }
.dir-sub { opacity:.85; margin-top:2px; }

.building-hero { position:relative; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.building-hero .building-img { width:100%; height:180px; object-fit:cover; display:block; }
.hero-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between;
  padding:14px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.12) 55%, rgba(0,0,0,0));
}
.hero-chip { font-size:12px; padding:8px 10px; border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.hero-clock { text-align:right; }
.clock-time { font-size:22px; font-weight:800; line-height:1; letter-spacing:.02em; }
.clock-date { font-size:12px; opacity:.9; margin-top:4px; }

.building-card { display:flex; align-items:center; gap:12px; }
.b-meta { min-width:0; }
.b-slogan { opacity:.85; margin-top:4px; font-size:12px; }

.info-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px; }
.info-tile { display:flex; gap:10px; padding:10px; border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.info-ico { width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: rgba(124,92,255,.18);
  border:1px solid rgba(255,255,255,.10);
}
.info-top { font-weight:700; font-size:13px; }
.info-sub { opacity:.85; font-size:12px; margin-top:2px; }

.contact-footer { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pill { font-size:12px; padding:7px 10px; border-radius:999px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  opacity:.92;
}

.left-foot { display:flex; align-items:center; gap:10px; opacity:.8; margin-top:auto; padding:6px 2px; }
.foot-dot { width:10px; height:10px; border-radius:999px; background: rgba(0,209,255,.9);
  box-shadow: 0 0 0 4px rgba(0,209,255,.15);
}
.foot-text { font-size:12px; }

/* Responsive: si la pantalla es angosta, 1 columna */
@media (max-width: 980px) {
  .info-grid { grid-template-columns: 1fr; }
  .building-hero .building-img { height:150px; }
}

/* ===== Fix cursor “desaparece” =====
   Solo escondemos cursor en modo kiosk cuando es táctil (pointer coarse).
*/
@media (pointer: coarse) {
  body[data-kiosk="1"] { cursor: none; }
}
@media (pointer: fine) {
  body[data-kiosk="1"] { cursor: default; }
}


/* ============ CONTACTO corporativo ============ */
.contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
}

body[data-theme="light"] .contact-card{
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.02));
  border-color: rgba(0,0,0,.10);
}

.contact-corp{
  margin-top: 10px;
  border-radius: 16px;
  padding: 16px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
}

body[data-theme="light"] .contact-corp{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}

.contact-corp-logo{
  max-width: 260px;
  width: min(260px, 85%);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}

body[data-theme="light"] .contact-corp-logo{
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.12));
}

.contact-corp-sub{
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--muted);
}

.contact-corp-phone{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--text);
  padding-top: 2px;
}

/* ================================
   FIX: Foto edificio completa + sin badge/mini logo encima
   ================================ */

/* Contenedor de la imagen */
.building-media{
  position: relative;
  overflow: auto;
  border-radius: 22px;
  /* si tu alto está fijo y recorta, probá este alto:
     (ajustalo si querés más alto o más bajo) */
  height: 190px;
  background: rgba(255,255,255,.04);
}

/* La imagen: NO recorta, se ve completa */
.building-media .building-img{
  width: 100%;
  height: auto;
  max-height: 260px; /* límite para que no se haga gigante */
  object-fit: contain;     /* clave: muestra completa */
  object-position: center; /* centrada */
  display: block;
}

/* Oculta cualquier overlay que esté dentro del contenedor (logo/chip/badge),
   dejando SOLO la imagen */
.building-media > :not(img){
  display: none !important;
}

/* Por si el overlay es un pseudo-elemento */
.building-media::before,
.building-media::after{
  content: none !important;
  display: none !important;
}

/* ====== FIX FOTO EDIFICIO (NO RECORTAR) ====== */
.building-media{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  /* alto controlado y consistente para kiosko */
  height: 190px;              /* ajustá si querés: 170–240 */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

/* clave: contain para que se vea completa */
.building-img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* <-- antes seguramente estaba cover */
  object-position: center;
  display: block;
  transform: translateZ(0);
}

/* Ocultar el “Edificio”/chip sobre la foto (si existe) */
.building-media .badge,
.building-media .chip,
.building-media .tag,
.building-media .pill,
.building-media .building-tag,
.building-media .building-badge,
.building-media [data-badge],
.building-media [data-chip]{
  display: none !important;
}

/* ====== ICONO TEMA ====== */
.theme-switch .label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.theme-icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
}

.building-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: auto;              /* 👈 importante */
  border: 1px solid rgba(255,255,255,.08);
}

.building-hero .building-img{
  width: 100%;
  height: auto;              /* 👈 importante */
  display: block;
  object-fit: contain;       /* 👈 muestra completa */
}

/* ====== FIX: Layout responsive + hero sin recorte ====== */

/* Grid principal responsive */
.totem-wrap{
  display: grid;
  grid-template-columns: clamp(320px, 34vw, 520px) 1fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px){
  .totem-wrap{
    grid-template-columns: 1fr;
  }
}

/* LEFT panel: que nunca “reviente” el layout */
.left-panel{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Encabezado: sin el icono MP (ya lo sacamos en HTML) */
.left-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-text.only{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* HERO: se ve completa SIEMPRE */
.building-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);

  /* Alto responsive (ajustá si querés) */
  height: clamp(140px, 22vh, 240px);
}

.building-hero .building-img{
  width: 100%;
  height: 100%;
  display: block;

  /* CLAVE: NO recorta */
  object-fit: contain;

  /* Centrada */
  object-position: center;

  /* Si sobra espacio por “contain”, que se vea prolijo */
  background: radial-gradient(120% 120% at 50% 30%, rgba(255,255,255,.06), rgba(0,0,0,.22));
}

/* Overlay reloj */
.building-hero .hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
}

.hero-clock{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(10px);
}

.clock-time{ font-size: 22px; font-weight: 800; line-height: 1; }
.clock-date{ font-size: 12px; opacity: .85; margin-top: 2px; }

/* Cards contenedor */
.left-cards{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Footer que no empuje raro */
.left-foot{
  margin-top: auto;
}

/* Tema: icono alineado y visible */
.theme-switch .label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.theme-icon{
  width: 18px;
  display: inline-flex;
  justify-content: center;
}

/* Evitar “romper” por anchos largos */
.dir-title, .dir-sub, .b-name, .b-addr, .b-slogan{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Si algún estilo viejo te estaba deformando la imagen, lo pisamos */
.building-media, .building-media img{
  display: none !important;
}

/* ===== Theme switch (slider pro) ===== */
.theme-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.theme-switch .label{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.switch{
  width: 58px;
  height: 32px;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent;
}

body[data-theme="light"] .switch{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.10);
}

.switch::before{
  content:"";
  position:absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

.switch.is-on{
  background: linear-gradient(135deg, rgba(37,99,235,.78), rgba(124,58,237,.72));
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22);
}

.switch.is-on::before{
  transform: translateX(26px);
}

.switch:active::before{
  width: 26px; /* mini “squish” pro */
}

.switch:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(98,160,255,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
/* ===== Footer pegado abajo + centrado ===== */
.left-panel{
  display:flex;
  flex-direction:column;
  min-height: 100vh; /* asegura que tenga altura completa */
}

.left-cards{
  flex: 1 1 auto;
  min-height: 0;
}

.left-foot{
  margin-top:auto;
  padding: 14px 14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}

.left-foot .foot-text{
  text-align:center;
}

/* Si querés que el puntito no “descentre” visualmente, podés achicarlo */
.left-foot .foot-dot{
  width:10px;
  height:10px;
  flex: 0 0 auto;
}


/* ===============================
   MOBILE: achicar título / header
   =============================== */

/* Base: título responsivo (sirve en todas las pantallas) */
.dir-title{
  /* min, ideal, max */
  font-size: clamp(22px, 6vw, 44px);
  line-height: 1.05;
  letter-spacing: clamp(.14em, 1.2vw, .28em);
  word-break: normal;
}

/* Subtítulo un poco más flexible */
.dir-sub{
  font-size: clamp(12px, 3.2vw, 14px);
  opacity: .9;
}

/* Mobile fino: ajustar aún más para que no desborde */
@media (max-width: 520px){
  .left-head{
    gap: 10px;
    align-items: flex-start;
  }

  .dir-title{
    font-size: 22px;          /* más chico en móvil */
    letter-spacing: .18em;    /* menos separación */
  }

  .dir-sub{
    font-size: 12px;
  }

  /* Si querés ganar espacio vertical, podés bajar un poco el padding del panel izquierdo */
  .left-panel{
    padding-top: 12px;
  }
}

/* Mobile muy chico */
@media (max-width: 380px){
  .dir-title{
    font-size: 20px;
    letter-spacing: .16em;
  }
  .dir-sub{
    font-size: 11px;
  }
}

/* ===============================
   LOGO edificio según tema
   =============================== */

.building-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 10px 0 6px;
}

.building-logo img{
  max-width: 100%;
  height: auto;
  display: none;
  transition: opacity .25s ease;
}

/* Tema oscuro */
body[data-theme="dark"] .logo-dark{
  display:block;
}

/* Tema claro */
body[data-theme="light"] .logo-light{
  display:block;
}

/* Mobile: achicar un poco */
@media (max-width: 520px){
  .building-logo img{
    max-width: 85%;
  }
}

/* =========================
   FIX MOBILE: título + footer (no cortar)
   Pegarlo al FINAL de totem.css
   ========================= */

/* 1) Evitar que el header recorte/ellipse el título */
.left-head,
.brand-text,
.brand-text.only {
  min-width: 0;
  overflow: visible;
}

.dir-title{
  /* que NO haga "..." */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  /* escala bien según pantalla */
  font-size: clamp(22px, 7vw, 40px);
  line-height: 1.05;

  /* si el tracking era muy grande en mobile, baja un poco */
  letter-spacing: clamp(.12em, 1.2vw, .22em);
}

/* 2) Layout: que el footer siempre quede visible y centrado abajo */
.totem-wrap{
  min-height: 100dvh; /* mejor que 100vh en mobile */
}

.left-panel{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Dejá que el contenido del medio scrollee si hace falta */
.left-cards{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* Footer: abajo del todo, centrado, sin cortarse */
.left-foot{
  margin-top: auto;
  text-align: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

/* 3) Ajustes extra para pantallas chicas */
@media (max-width: 520px){
  .left-panel{ padding-bottom: 6px; }

  /* opcional: si tenés mucho espacio arriba, compacta */
  .dir-sub{ font-size: 12px; }
}

/* ================================
   FIX CONTRASTE MODO CLARO (PISOS)
   Pegalo AL FINAL de totem.css
================================== */

body[data-theme="light"] .right-panel{
  /* fondo general del panel derecho un poco más marcado */
  background: rgba(255,255,255,.65);
}

/* Tarjeta de Piso */
body[data-theme="light"] .floor{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

/* Header del Piso (más “separado”) */
body[data-theme="light"] .floor-head{
  background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.02));
  border-bottom: 1px solid rgba(15,23,42,.10);
}

/* Hover/press del header para que “se note” */
body[data-theme="light"] .floor-head:hover{
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(15,23,42,.02));
}
body[data-theme="light"] .floor-head:active{
  transform: scale(.999);
}

/* Badge del número (más contraste) */
body[data-theme="light"] .floor-badge{
  background: rgba(37,99,235,.14);
  border: 1px solid rgba(37,99,235,.22);
  color: rgba(15,23,42,.90);
}

/* Texto del piso */
body[data-theme="light"] .floor-title{
  color: rgba(15,23,42,.92);
}
body[data-theme="light"] .floor-sub{
  color: rgba(15,23,42,.62);
}

/* Flechita */
body[data-theme="light"] .floor-caret{
  color: rgba(15,23,42,.55);
}

/* Contenedor interno */
body[data-theme="light"] .floor-inner{
  background: rgba(255,255,255,.35);
}

/* Oficinas dentro del piso */
body[data-theme="light"] .office{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

/* Header de la oficina */
body[data-theme="light"] .office-head{
  background: rgba(15,23,42,.03);
}
body[data-theme="light"] .office-name{
  color: rgba(15,23,42,.92);
}
body[data-theme="light"] .office-desc{
  color: rgba(15,23,42,.62);
}

/* Chips (sector/ubicación/etc) */
body[data-theme="light"] .chip{
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.72);
}

/* Botones de links (web/whatsapp) si los usás */
body[data-theme="light"] .linkbtn{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(15,23,42,.88);
}
body[data-theme="light"] .linkbtn:hover{
  background: rgba(37,99,235,.14);
}
/* ===============================
   MODO CLARO – Bordes más notorios
   =============================== */

body[data-theme="light"] .floor{
  border: 2px solid rgba(0,0,0,.22);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

body[data-theme="light"] .floor-head{
  border-bottom: 2px solid rgba(0,0,0,.18);
}

body[data-theme="light"] .office{
  border: 1.5px solid rgba(0,0,0,.20);
}

body[data-theme="light"] .floor-badge{
  border: 1.5px solid rgba(0,0,0,.25);
}

/* Hover más marcado */
body[data-theme="light"] .floor-head:hover{
  background: rgba(0,0,0,.05);
}


/* ===================================
   MODO CLARO – Bordes más notorios
   También en lista de oficinas
==================================== */

/* Pisos */
body[data-theme="light"] .floor{
  border: 2px solid rgba(0,0,0,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

body[data-theme="light"] .floor-head{
  border-bottom: 2px solid rgba(0,0,0,.20);
}

/* Oficinas */
body[data-theme="light"] .office{
  border: 2px solid rgba(0,0,0,.26);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: rgba(255,255,255,.95);
}

/* Header de oficina más marcado */
body[data-theme="light"] .office-head{
  border-bottom: 1.5px solid rgba(0,0,0,.18);
}

/* Hover más notorio */
body[data-theme="light"] .office:hover{
  border-color: rgba(0,0,0,.40);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  transition: all .2s ease;
}

/* Resultado de búsqueda */
body[data-theme="light"] .result{
  border: 2px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  background: rgba(255,255,255,.96);
}

body[data-theme="light"] .result:hover{
  border-color: rgba(0,0,0,.40);
}

/* ===================================
   MODO CLARO – Glow estilo iOS
==================================== */

/* Piso abierto */
body[data-theme="light"] .floor.is-open{
  border-color: rgba(0,0,0,.18);
  box-shadow:
    0 8px 24px rgba(0,0,0,.10),
    0 0 0 4px rgba(0,122,255,.12); /* halo suave */
  background: rgba(255,255,255,1);
  transition: all .25s ease;
}

/* Oficina abierta */
body[data-theme="light"] .office.is-open{
  border-color: rgba(0,0,0,.18);
  box-shadow:
    0 6px 20px rgba(0,0,0,.08),
    0 0 0 3px rgba(0,122,255,.14);
  background: rgba(255,255,255,1);
  transform: translateY(-1px);
  transition: all .25s ease;
}

/* Hover suave tipo iOS */
body[data-theme="light"] .office:not(.is-open):hover{
  box-shadow:
    0 6px 16px rgba(0,0,0,.08),
    0 0 0 2px rgba(0,122,255,.08);
  transition: all .2s ease;
}



/* =========================================
   SEARCH iOS / Glass (reemplaza look actual)
   Pegalo AL FINAL de totem.css
========================================= */

/* Ajustá estas vars si querés más/menos glow */
:root{
  --search-h: 54px;
  --search-radius: 18px;
  --search-pad-x: 14px;

  --search-bg: rgba(255,255,255,.10);
  --search-bg2: rgba(255,255,255,.06);
  --search-stroke: rgba(255,255,255,.14);
  --search-shadow: 0 18px 48px rgba(0,0,0,.22);
  --search-inner: inset 0 0 0 1px rgba(0,0,0,.10);

  --search-focus-stroke: rgba(124,92,255,.45);
  --search-focus-glow: 0 0 0 4px rgba(124,92,255,.18);

  --search-text: var(--text);
  --search-muted: rgba(232,236,255,.70);
  --search-placeholder: rgba(232,236,255,.55);
}

/* Light */
body[data-theme="light"]{
  --search-bg: rgba(255,255,255,.78);
  --search-bg2: rgba(255,255,255,.62);
  --search-stroke: rgba(0,0,0,.12);
  --search-shadow: 0 14px 38px rgba(0,0,0,.10);
  --search-inner: inset 0 0 0 1px rgba(255,255,255,.55);

  --search-focus-stroke: rgba(47,107,255,.45);
  --search-focus-glow: 0 0 0 4px rgba(47,107,255,.16);

  --search-muted: rgba(15,23,42,.62);
  --search-placeholder: rgba(15,23,42,.45);
}

/* Contenedor search */
.right-top .search{
  position: relative;
  height: var(--search-h);
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 var(--search-pad-x);
  border-radius: var(--search-radius);

  background: linear-gradient(180deg, var(--search-bg), var(--search-bg2));
  border: 1px solid var(--search-stroke);
  box-shadow: var(--search-shadow), var(--search-inner);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.right-top .search:active{
  transform: scale(.996);
}

/* Icon */
.right-top .search .icon{
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  color: var(--search-muted);
  opacity: .95;
  user-select: none;
}

/* Input */
.right-top .search input{
  flex: 1;
  height: calc(var(--search-h) - 14px);
  border: 0;
  outline: 0;
  background: transparent;

  color: var(--search-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;

  padding: 0;
}

.right-top .search input::placeholder{
  color: var(--search-placeholder);
  font-weight: 650;
}

/* Clear button (iOS style) */
.right-top .search .clear{
  width: 34px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: var(--search-muted);

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

body[data-theme="light"] .right-top .search .clear{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
}

.right-top .search .clear:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
}

body[data-theme="light"] .right-top .search .clear:hover{
  background: rgba(0,0,0,.08);
}

.right-top .search .clear:active{
  transform: scale(.98);
}

/* Focus ring on wrapper */
.right-top .search:focus-within{
  border-color: var(--search-focus-stroke);
  box-shadow: var(--search-shadow), var(--search-inner), var(--search-focus-glow);
}

/* Mobile: un toque más compacta */
@media (max-width: 560px){
  :root{ --search-h: 48px; --search-radius: 16px; }
  .right-top .search input{ font-size: 15px; }
  .right-top .search .icon{ font-size: 15px; }
}

.search .clear.is-hidden{ opacity:0; pointer-events:none; transform: scale(.96); }

/* =========================
   SEARCHBAR (fix dark mode)
   ========================= */

/* contenedor (si tenés una clase, igual esto no molesta) */
.searchbar, .search, .search-wrap, .top-search {
  color: inherit;
}

/* Input real (tu JS usa id="q") */
#q{
  color: var(--text) !important;
  caret-color: var(--text);
  -webkit-text-fill-color: var(--text); /* iOS/Safari */
}

/* Placeholder visible */
#q::placeholder{
  color: rgba(232,236,255,.60) !important; /* oscuro */
}

/* Dark theme: fondo + borde + glow suave iOS */
body[data-theme="dark"] #q{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Focus: glow iOS */
body[data-theme="dark"] #q:focus{
  border-color: rgba(120,140,255,.45) !important;
  box-shadow:
    0 0 0 4px rgba(120,140,255,.18),
    0 14px 34px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Light theme: placeholder más gris */
body[data-theme="light"] #q::placeholder{
  color: rgba(15,23,42,.45) !important;
}

/* Botón limpiar (id="btnClear") si está dentro de la barra */
#btnClear{
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
body[data-theme="light"] #btnClear{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.75);
}

/* ===============================
   FIX – Quitar rectángulo interno
   =============================== */

#q{
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Evitar highlight interno en focus */
#q:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* También para Safari/iOS */
#q::-webkit-focus-inner{
  border: 0;
}

/* Aseguramos que el glow lo tenga el contenedor */
.search:focus-within{
  box-shadow:
    0 0 0 3px rgba(120,140,255,.25),
    0 12px 30px rgba(0,0,0,.35);
  border-color: rgba(120,140,255,.45);
}
/* Contenedor de búsqueda (acá va el look iOS) */
.search{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}

/* Glow/foco SOLO en el contenedor */
.search:focus-within{
  border-color: rgba(124, 92, 255, .55);
  box-shadow:
    0 0 0 4px rgba(124, 92, 255, .22),
    0 12px 30px rgba(0,0,0,.28);
}

/* ✅ El input NO debe dibujar su propio “rectángulo” */
.search input{
  flex:1;
  width:100%;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;   /* <- clave */
  color: inherit;
  font-size: 15px;
  line-height: 1.2;
  padding: 0;                           /* sin padding interno que parezca caja */
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder legible */
.search input::placeholder{
  color: rgba(232,236,255,.55);
}

/* Opcional: evita “cajas” raras en autofill (Chrome) */
.search input:-webkit-autofill{
  -webkit-text-fill-color: inherit;
  transition: background-color 999999s ease-in-out 0s;
}

/* Botón clear sin caja propia */
.search .clear{
  border: 0;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
}
.search .clear:focus{
  outline: none;
  box-shadow: none;
}

/* Modo claro: ajustá colores para que no quede “lavado” */
body[data-theme="light"] .search{
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
body[data-theme="light"] .search:focus-within{
  border-color: rgba(47,107,255,.45);
  box-shadow: 0 0 0 4px rgba(47,107,255,.18), 0 12px 28px rgba(0,0,0,.12);
}
body[data-theme="light"] .search input::placeholder{
  color: rgba(0,0,0,.45);
}

/* ✅ Quitar el rectángulo interno del input y dejar solo el contenedor .search */
.search input#q{
  flex: 1;
  width: 100%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit;
  font: inherit;
  padding: 0;              /* importante: evita el “bloque” interno */
  margin: 0;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

/* Por si el navegador agrega foco/outline */
.search input#q:focus,
.search input#q:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}

/* Placeholder legible (ajustá si querés más/menos opacidad) */
.search input#q::placeholder{
  opacity: .7;
}

/* Si Chrome te lo marca como autofill (a veces dibuja “caja”) */
.search input#q:-webkit-autofill,
.search input#q:-webkit-autofill:hover,
.search input#q:-webkit-autofill:focus{
  -webkit-text-fill-color: inherit;
  transition: background-color 999999s ease-out 0s;
  box-shadow: 0 0 0px 1000px transparent inset !important;
}
/* Clear button – estilo limpio sin movimiento */
.search .clear{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;

  border: none;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);

  transition: background .18s ease, color .18s ease;
}

/* Hover: solo se resalta */
.search .clear:hover{
  background: rgba(255,255,255,.18);
  color: #ffffff;
}

/* Active: un poco más oscuro */
.search .clear:active{
  background: rgba(255,255,255,.25);
}

/* Light mode */
body[data-theme="light"] .search .clear{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.75);
}

body[data-theme="light"] .search .clear:hover{
  background: rgba(0,0,0,.12);
  color: #000;
}

/* === FIX: botón X (clear) no se mueve ni se sale === */
.search{
  position: relative;
  overflow: hidden;          /* si algo intenta “salirse”, queda recortado */
}

.search .clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);  /* centrado vertical estable */
  width: 32px;
  height: 32px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);

  padding: 0;
  margin: 0;
  line-height: 1;            /* evita saltos de baseline */
  cursor: pointer;

  /* clave: anulamos cualquier animación tipo “botón” */
  transition: background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease;
  will-change: auto;
}

/* 🔒 no permitir que se aplique transform por hover/active desde reglas globales */
.search .clear:hover,
.search .clear:active,
.search .clear:focus{
  transform: translateY(-50%) !important;
}

/* hover iOS-style: solo “glow” suave */
.search .clear:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 4px rgba(124,92,255,.18);
}

/* opcional: cuando apretás, que no “baje” */
.search .clear:active{
  opacity: .9;
  box-shadow: 0 0 0 4px rgba(124,92,255,.12);
}

/* modo claro */
body[data-theme="light"] .search .clear{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.70);
}
body[data-theme="light"] .search .clear:hover{
  background: rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.20);
  box-shadow: 0 0 0 4px rgba(47,107,255,.15);
}

/* ===============================
   CLOCK: forzar texto BLANCO en modo claro
   (tu theme vive en BODY)
   =============================== */

#clockTime, #clockDate {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* En modo claro, el fondo del reloj suele ser claro => oscurecemos el pill */
body[data-theme="light"] .clock,
body[data-theme="light"] .clock-card,
body[data-theme="light"] .timebox,
body[data-theme="light"] .clock-wrap {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  backdrop-filter: blur(10px);
}

/* Asegurar blanco en modo claro también (por si hay reglas que lo pisan) */
body[data-theme="light"] #clockTime,
body[data-theme="light"] #clockDate {
  color: #fff !important;
}
/* =========================
   ICONO START - MODO CLARO
   ========================= */

body[data-theme="light"] .start-icon,
body[data-theme="light"] .start-overlay .icon,
body[data-theme="light"] .overlay-start .icon {
  color: #2c2c2c !important;        /* más oscuro */
  background: rgba(255,255,255,0.8);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(0,0,0,0.05);
}
body[data-theme="light"] .start-icon {
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* =========================
   START ICON - PULSO SUAVE
   ========================= */

@keyframes softPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

.osk{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px;
  z-index: 9999;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,24,.55);
}
body[data-theme="light"] .osk{
  border-top: 1px solid rgba(0,0,0,.10);
  background: rgba(245,246,252,.75);
}
.osk.hidden{ display:none; }

.osk-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.osk-title{ font-weight:700; opacity:.85; }
.osk-btn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
}
body[data-theme="light"] .osk-btn{
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

.osk-keys{
  display:grid;
  gap:8px;
}
.osk-row{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap:8px;
}
.osk-key{
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;
  border-radius: 14px;
  padding: 14px 10px;
  text-align:center;
  font-size: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
body[data-theme="light"] .osk-key{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
}
.osk-key:active{
  transform: scale(.98);
  filter: brightness(1.05);
}

.osk-key.wide{ grid-column: span 2; }
.osk-key.xwide{ grid-column: span 3; }

@media (max-height: 700px){
  .osk-key{ padding: 12px 8px; font-size:15px; }
}




/* =========================
   OSK v2.1 (Teclado en pantalla) — limpio
   - No blurea ni "lava" el fondo
   - Centrado real (viewport)
   - Estilo iOS-like
========================= */

:root{
  --osk-radius: 22px;
  --osk-shadow: 0 18px 55px rgba(0,0,0,.22);
  --osk-border: rgba(0,0,0,.08);
  --osk-bg: rgba(255,255,255,.92);
  --osk-key-bg: rgba(255,255,255,.85);
  --osk-key-bd: rgba(0,0,0,.10);
  --osk-key-tx: #0f172a;
  --osk-accent: rgba(99,102,241,.20);
  --osk-accent-bd: rgba(99,102,241,.35);
}

/* Overlay: solo captura clicks, no oscurece ni blurea el fondo */
.osk{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;            /* ✅ centrado vertical */
  justify-content: center;        /* ✅ centrado horizontal */
  padding: 24px;
  background: transparent;        /* ✅ NO tapa el fondo */
}
.osk.is-open{ display:flex; }

/* Card */
.osk-shell{
  width: min(980px, calc(100vw - 48px));
  max-height: min(560px, calc(100vh - 48px));
  overflow: hidden;
  border-radius: var(--osk-radius);
  background: var(--osk-bg);
  border: 1px solid var(--osk-border);
  box-shadow: var(--osk-shadow);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
}

.osk-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.osk-title{ font-weight: 800; letter-spacing: .2px; }

.osk-actions{ display:flex; gap:10px; }

.osk-btn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
  color: #0f172a;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s ease, background .12s ease;
}
.osk-btn:active{ filter: brightness(.96); }
.osk-btn-ghost{ background: rgba(255,255,255,.55); }
.osk-btn-danger{ background: rgba(255,255,255,.55); }

.osk-row--input{ padding: 10px 16px 0; }
.osk-preview{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}
.osk-preview-label{ font-size: 12px; opacity: .75; }
.osk-preview-text{ font-weight: 800; }
.osk-caret-hint{ margin-top: 8px; font-size: 12px; opacity: .65; }

.osk-keys{ padding: 14px 16px 18px; }

.osk-grid{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.osk-line{
  display:grid;
  gap: 10px;
  align-items: stretch;
}

/* Layout QWERTY */
.osk-line--qwerty-1{ grid-template-columns: repeat(10, 1fr); }
.osk-line--qwerty-2{ grid-template-columns: repeat(10, 1fr); }
.osk-line--qwerty-3{ grid-template-columns: 1.25fr repeat(7, 1fr) 1.25fr; }
.osk-line--qwerty-4{ grid-template-columns: 1.2fr 1.6fr 1.2fr 1.2fr 1.2fr; }

/* Layout NUM */
.osk-line--num-1{ grid-template-columns: repeat(10, 1fr); }
.osk-line--num-2{ grid-template-columns: repeat(10, 1fr); }
.osk-line--num-3{ grid-template-columns: 1.25fr repeat(7, 1fr) 1.25fr; }
.osk-line--num-4{ grid-template-columns: 1.2fr 1.6fr 1.2fr 1.2fr 1.2fr; }

.osk-key{
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;

  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--osk-key-bd);
  background: var(--osk-key-bg);
  color: var(--osk-key-tx);
  font-weight: 800;
  font-size: 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.osk-key:active{
  transform: translateY(1px);
  filter: brightness(.97);
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}

.osk-key--wide{ font-size: 16px; }
.osk-key--action{
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.25);
}
.osk-key--enter{
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.35);
}

/* Evita “outline” cuadrado del focus */
.osk-key:focus{ outline: none; }

/* Dark theme tune */
body[data-theme="dark"] .osk-shell{
  --osk-bg: rgba(15,23,42,.92);
  --osk-border: rgba(255,255,255,.10);
  --osk-key-bg: rgba(255,255,255,.06);
  --osk-key-bd: rgba(255,255,255,.12);
  --osk-key-tx: rgba(255,255,255,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
body[data-theme="dark"] .osk-top{
  border-bottom-color: rgba(255,255,255,.10);
}
body[data-theme="dark"] .osk-btn{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
body[data-theme="dark"] .osk-preview{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
body[data-theme="dark"] .osk-key{
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

@media (max-width: 900px){
  .osk{ padding: 16px; }
  .osk-key{ height: 50px; font-size: 16px; border-radius: 14px; }
}

/* =========================
   OSK FIX: layout + centrado
   (forzar por encima de cualquier regla previa)
   ========================= */

#osk.osk{
  position: fixed !important;
  inset: 0 !important;
  display: none;              /* se muestra con .is-open */
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  z-index: 9999 !important;
  background: rgba(0,0,0,.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#osk.osk.is-open{ display: flex !important; }

#osk .osk-shell{
  width: min(980px, 92vw) !important;
  max-height: min(560px, 80vh) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
}

/* que no “tape” raro el fondo con sombra negra rara:
   lo que tapa es el overlay (#osk) – lo dejamos suave */
body[data-theme="dark"] #osk.osk{
  background: rgba(0,0,0,.28) !important;
}
body[data-theme="dark"] #osk .osk-shell{
  background: rgba(18,22,32,.92) !important;
}

/* ✅ ESTE ES EL FIX CLAVE: GRILLA DE TECLAS */
#oskKeys{
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px 16px 18px !important;
  align-content: start !important;
}

/* filas especiales (si tus teclas tienen data-w) */
#oskKeys .osk-key[data-w="2"]{ grid-column: span 2; }
#oskKeys .osk-key[data-w="3"]{ grid-column: span 3; }
#oskKeys .osk-key[data-w="4"]{ grid-column: span 4; }
#oskKeys .osk-key[data-w="5"]{ grid-column: span 5; }

/* Tecla */
#oskKeys .osk-key{
  min-width: 0 !important;
  height: 54px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Dark */
body[data-theme="dark"] #oskKeys .osk-key{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}

/* Hover/active suave (sin moverse) */
#oskKeys .osk-key:hover{ filter: brightness(1.03); }
#oskKeys .osk-key:active{ transform: none !important; }
#oskKeys .osk-key:focus{ outline: none !important; }
#oskKeys .osk-key:focus-visible{
  outline: 2px solid rgba(120,140,255,.45) !important;
  outline-offset: 2px !important;
}


/* =============================
   FINAL OVERRIDES — cliente
   ============================= */

/* El tema se gestiona desde admin */
.theme-switch{ display:none !important; }
.left-head{ justify-content:flex-start !important; }

/* Imagen del edificio más grande */
.building-hero{
  min-height: 220px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.building-hero .building-img,
.building-img{
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.hero-overlay{
  padding: 16px !important;
}
.hero-clock{
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 12px;
  border-radius: 16px;
}

/* ===== Teclado iPad abajo, limpio ===== */
#osk.osk{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  inset: auto 0 0 0 !important;
  display: none !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 20px 18px !important;
  margin: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 9999 !important;
}
#osk.osk.is-open{ display:flex !important; }

#osk .osk-shell{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(1180px, calc(100vw - 64px)) !important;
  max-width: 1180px !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(14,20,38,.94) !important;
  box-shadow: 0 -18px 55px rgba(0,0,0,.36) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
body[data-theme="light"] #osk .osk-shell{
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 -18px 45px rgba(0,0,0,.16) !important;
}

#osk .osk-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding: 14px 18px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
body[data-theme="light"] #osk .osk-top{
  border-bottom-color: rgba(0,0,0,.08) !important;
}
#osk .osk-title{
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}
#osk .osk-actions{
  display:flex !important;
  gap: 10px !important;
}
#osk .osk-btn{
  min-width: 48px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
}

#osk .osk-row--input{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 10px !important;
  align-items:center !important;
  padding: 14px 18px 4px !important;
}
#osk .osk-preview{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
}
body[data-theme="light"] #osk .osk-preview{
  border-color: rgba(0,0,0,.08) !important;
  background: rgba(0,0,0,.03) !important;
}
#osk .osk-caret-hint{
  font-size: 13px !important;
  opacity: .72 !important;
  white-space: nowrap !important;
}

/* contenedor de filas */
#osk .osk-keys{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px 18px 18px !important;
}
#osk .osk-krow{
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
#osk .osk-krow.r1,
#osk .osk-krow.r2,
#osk .osk-krow.r3,
#osk .osk-krow.r4{
  display: flex !important;
}

#osk .osk-key{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex: 0 0 auto !important;
  min-width: 72px !important;
  height: 58px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.95) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.20) !important;
}
body[data-theme="light"] #osk .osk-key{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}
#osk .osk-key.is-fn{ min-width: 96px !important; }
#osk .osk-key.is-primary{ 
  min-width: 112px !important;
  background: rgba(99,102,241,.22) !important;
  border-color: rgba(99,102,241,.42) !important;
}
#osk .osk-key.is-on{
  background: rgba(99,102,241,.18) !important;
  border-color: rgba(99,102,241,.36) !important;
}
/* fila 4 tipo iPad */
#osk .osk-krow.r4 .osk-key:nth-child(1){ min-width: 88px !important; }
#osk .osk-krow.r4 .osk-key:nth-child(2){ min-width: 128px !important; }
#osk .osk-krow.r4 .osk-key:nth-child(3){ min-width: 160px !important; }
#osk .osk-krow.r4 .osk-key:nth-child(4){ min-width: 120px !important; }
#osk .osk-krow.r4 .osk-key:nth-child(5){ min-width: 120px !important; }

/* nada de blur raro sobre el fondo */
body.osk-open .totem-wrap,
body.osk-open .right-panel,
body.osk-open .right-body,
body.osk-open #floorsRoot,
body.osk-open .left-panel{
  filter: none !important;
  opacity: 1 !important;
}

/* Responsive */
@media (max-width: 1200px){
  #osk .osk-shell{ width: calc(100vw - 32px) !important; }
  #osk .osk-key{ min-width: 60px !important; height: 54px !important; }
  #osk .osk-krow.r4 .osk-key:nth-child(2){ min-width: 112px !important; }
  #osk .osk-krow.r4 .osk-key:nth-child(3){ min-width: 136px !important; }
}
@media (max-width: 860px){
  .building-hero .building-img,
  .building-img{ height: 190px !important; }
  #osk.osk{ padding: 0 10px 10px !important; }
  #osk .osk-shell{ width: calc(100vw - 20px) !important; border-radius: 20px !important; }
  #osk .osk-row--input{ grid-template-columns: 1fr !important; }
  #osk .osk-caret-hint{ white-space: normal !important; }
  #osk .osk-key{ min-width: 46px !important; height: 50px !important; font-size: 16px !important; }
}


.office-head{
  display:flex;
  align-items:center;
  gap:14px;
}

.office-main{
  flex:1;
  min-width:0;
}

.office-logo-img{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:14px;
  padding:8px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  flex:0 0 auto;
}

body[data-theme="dark"] .office-logo-img{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}









/* =========================================================
   CLIENT UPDATE 2026-04-27
   Logo superior + espacio para slide + QR hacia la izquierda
   ========================================================= */

.office-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.office-main{
  flex:1;
  min-width:0;
}

.office-head > .office-logo-img{
  display:none !important;
}

.office-expanded-layout{
  display:grid;
  grid-template-columns:minmax(460px, 1fr) minmax(320px, 430px);
  gap:22px;
  padding:14px;
  align-items:start;
}

.office-expanded-left{
  min-width:0;
}

.office-expanded-right{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
}

.office-expanded-layout .detail-grid{
  padding:0;
}

.office-logo-panel{
  width:100%;
  min-height:104px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  overflow:hidden;
}

body[data-theme="light"] .office-logo-panel{
  background:rgba(255,255,255,.78);
  border-color:rgba(0,0,0,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.office-logo-panel.has-logo{
  background:rgba(255,255,255,.92);
}

body[data-theme="dark"] .office-logo-panel.has-logo{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.office-logo-panel-img{
  max-width:100%;
  max-height:88px;
  object-fit:contain;
  display:block;
}

.office-logo-panel.is-empty span{
  font-size:24px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  color:rgba(239,68,68,.95);
  opacity:.9;
}

.office-gallery-placeholder{
  min-height:210px;
  border-radius:16px;
  border:2px solid rgba(14,165,233,.85);
  background:linear-gradient(135deg, rgba(14,165,233,.07), rgba(99,102,241,.05)), rgba(255,255,255,.03);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
}

body[data-theme="light"] .office-gallery-placeholder{
  background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(99,102,241,.04)), rgba(255,255,255,.65);
}

.office-gallery-title{
  color:#0ea5e9;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:22px;
  font-weight:800;
}

.office-gallery-sub{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}

.office-expanded-left .qr-wrap{
  justify-content:flex-start !important;
  margin-top:18px;
}

.office-expanded-left .qr-grid{
  justify-content:flex-start !important;
  gap:14px;
}

.office-expanded-left .qr-card{
  width:220px;
  max-width:220px;
}

.office-expanded-left .qr-img{
  width:156px;
  height:156px;
}

@media (max-width:1150px){
  .office-expanded-layout{
    grid-template-columns:1fr;
  }

  .office-expanded-right{
    order:-1;
  }

  .office-logo-panel{
    min-height:90px;
  }

  .office-gallery-placeholder{
    min-height:150px;
  }

  .office-expanded-left .qr-wrap,
  .office-expanded-left .qr-grid{
    justify-content:center !important;
  }
}

@media (max-width:700px){
  .office-expanded-layout{
    padding:12px;
    gap:14px;
  }

  .office-expanded-left .qr-card{
    width:min(220px, 100%);
  }

  .office-expanded-left .qr-img{
    width:145px;
    height:145px;
  }

  .office-gallery-title{
    font-size:18px;
  }
}


.office-logo-header{
  flex:0 0 auto;
  width:360px;
  max-width:34%;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  padding:10px 16px;
  margin-right:18px;
}

.office-logo-header img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

body[data-theme="dark"] .office-logo-header{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}

@media (max-width:900px){
  .office-logo-header{
    width:180px;
    height:58px;
    max-width:40%;
    margin-right:8px;
  }
}




/* =========================================================
   AJUSTES FINALES CLIENTE - PANEL IZQUIERDO / QR / MOBILE
   ========================================================= */
.left-panel{overflow-y:auto !important;overflow-x:hidden !important;}
.left-head,.brand-text.only,.dir-title,.dir-sub{text-align:center !important;}
.left-cards{align-items:stretch !important;overflow:visible !important;}
.building-logo-main,.building-logo{width:100% !important;min-height:130px !important;max-height:none !important;padding:6px 10px 10px !important;margin:8px auto 12px !important;display:flex !important;align-items:center !important;justify-content:center !important;overflow:visible !important;background:transparent !important;border:0 !important;box-shadow:none !important;}
.building-logo img{width:auto !important;max-width:82% !important;height:auto !important;max-height:125px !important;object-fit:contain !important;object-position:center !important;margin:0 auto !important;display:none !important;}
body[data-theme="dark"] .building-logo img.logo-dark{display:block !important;}
body[data-theme="light"] .building-logo img.logo-light{display:block !important;}
.building-hero{width:100% !important;min-height:210px !important;height:clamp(210px,26vh,310px) !important;border-radius:22px !important;overflow:hidden !important;margin:0 auto 14px !important;}
.building-img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;}
.directory-qr-card{height:auto !important;max-height:none !important;overflow:visible !important;padding:18px !important;text-align:left !important;}
.directory-qr-box{width:100% !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:18px !important;padding:18px !important;border-radius:22px !important;overflow:visible !important;}
.directory-qr-img{width:190px !important;height:190px !important;min-width:190px !important;object-fit:contain !important;display:block !important;border-radius:16px !important;box-shadow:0 14px 32px rgba(0,0,0,.18) !important;pointer-events:none !important;cursor:default !important;}
.directory-qr-title{font-size:18px !important;font-weight:900 !important;}.directory-qr-sub{font-size:13px !important;opacity:.78 !important;}
.qr-click,.qr-click.is-static,.qr-card img,.qr-img{pointer-events:none !important;cursor:default !important;}.qr-click{text-decoration:none !important;}
.office-expanded-layout{display:grid !important;grid-template-columns:minmax(330px,39%) minmax(420px,1fr) !important;gap:24px !important;align-items:stretch !important;}
.office-expanded-left{display:flex !important;align-items:center !important;justify-content:center !important;}.office-expanded-left .detail-grid{width:100% !important;}.office-expanded-left .qr-wrap,.office-expanded-left .qr-grid{justify-content:center !important;}
.office-expanded-right{min-height:310px !important;display:flex !important;}.office-slider{position:relative !important;width:100% !important;min-height:310px !important;height:100% !important;border-radius:22px !important;overflow:hidden !important;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,247,255,.88)) !important;border:2px solid rgba(0,174,255,.78) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 14px 34px rgba(0,0,0,.10) !important;}body[data-theme="dark"] .office-slider{background:linear-gradient(135deg,rgba(12,18,30,.96),rgba(22,28,46,.95)) !important;}
.office-slide{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:contain !important;object-position:center !important;opacity:0 !important;transform:scale(1.015) !important;transition:opacity .8s ease,transform 4.8s ease !important;padding:8px !important;}.office-slide.active{opacity:1 !important;transform:scale(1.045) !important;}
.office-gallery-placeholder{width:100% !important;min-height:310px !important;height:100% !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;border-radius:22px !important;border:2px solid rgba(0,174,255,.72) !important;background:linear-gradient(135deg,rgba(238,249,255,.92),rgba(245,248,255,.9)) !important;}
.office-logo-header{flex:0 0 auto !important;width:min(320px,33%) !important;height:78px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:18px !important;background:rgba(255,255,255,.9) !important;border:1px solid rgba(0,0,0,.08) !important;box-shadow:0 12px 28px rgba(0,0,0,.12) !important;padding:10px 16px !important;margin-right:24px !important;}.office-logo-header img{width:100% !important;height:100% !important;object-fit:contain !important;display:block !important;}
@media (max-width:760px){body{overflow:auto !important;}.totem-wrap{display:block !important;min-height:100dvh !important;}.left-panel{width:100% !important;height:auto !important;min-height:auto !important;border-radius:0 0 24px 24px !important;}.building-logo-main{min-height:auto !important;margin:4px auto 10px !important;}.building-logo img{max-width:68% !important;max-height:84px !important;}.building-hero{height:190px !important;min-height:190px !important;}.directory-qr-card{padding:16px !important;text-align:center !important;}.directory-qr-card .section-title{text-align:center !important;}.directory-qr-box{display:none !important;}.right-panel{width:100% !important;min-height:auto !important;border-radius:24px 24px 0 0 !important;}.right-body{padding:14px !important;}.office-head{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:10px !important;position:relative !important;}.office-main{width:100% !important;order:1 !important;}.office-logo-header{order:2 !important;width:100% !important;max-width:100% !important;height:74px !important;margin:0 !important;align-self:stretch !important;}.office-caret{position:absolute !important;top:16px !important;right:14px !important;}.office-expanded-layout{display:block !important;}.office-expanded-right,.office-slider,.office-gallery-placeholder,.qr-wrap,.qr-grid,.qr-card{display:none !important;}.mobile-office-actions,.actions{display:flex !important;flex-wrap:wrap !important;gap:10px !important;margin-top:12px !important;}.linkbtn{flex:1 1 140px !important;justify-content:center !important;min-height:44px !important;}}

/* =========================================================
   AJUSTES FINALES CLIENTE - panel izquierdo / slider / mobile
   ========================================================= */

.left-panel{overflow-y:auto!important;overflow-x:hidden!important;text-align:center!important;}
.left-cards{align-items:stretch!important;}

.building-logo-main,.building-logo{width:100%!important;min-height:118px!important;max-height:none!important;padding:4px 8px 8px!important;margin:6px auto 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.building-logo img{width:auto!important;max-width:82%!important;height:auto!important;max-height:112px!important;object-fit:contain!important;object-position:center!important;margin:0 auto!important;display:none!important;}
body[data-theme="dark"] .building-logo img.logo-dark{display:block!important;}
body[data-theme="light"] .building-logo img.logo-light{display:block!important;}

.building-hero{height:230px!important;min-height:230px!important;border-radius:20px!important;overflow:hidden!important;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.06),rgba(0,0,0,.28))!important;}
.building-hero .building-img,.building-img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:left top!important;display:block!important;}

.directory-qr-card{height:auto!important;max-height:none!important;overflow:visible!important;padding:18px!important;text-align:left!important;}
.directory-qr-box{width:100%!important;min-height:230px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:20px!important;padding:18px!important;border-radius:22px!important;overflow:visible!important;}
.directory-qr-img{width:200px!important;height:200px!important;min-width:200px!important;object-fit:contain!important;display:block!important;border-radius:16px!important;box-shadow:0 14px 32px rgba(0,0,0,.18)!important;pointer-events:none!important;cursor:default!important;}
.directory-qr-title{font-size:18px!important;font-weight:900!important;}.directory-qr-sub{font-size:13px!important;opacity:.78!important;}.directory-qr-url,.directory-qr-link,.directory-qr-chip{display:none!important;}

.qr-click,.qr-click *{pointer-events:none!important;cursor:default!important;text-decoration:none!important;}.qr-card{cursor:default!important;}

.office-expanded-layout{display:grid!important;grid-template-columns:minmax(330px,38%) minmax(460px,1fr)!important;gap:24px!important;align-items:stretch!important;}
.office-expanded-left{display:flex!important;align-items:center!important;justify-content:center!important;}.office-expanded-left .detail-grid{width:100%!important;}.office-expanded-left .qr-wrap,.office-expanded-left .qr-grid{justify-content:center!important;}.office-expanded-left .qr-card{max-width:220px!important;border-radius:18px!important;}.office-expanded-left .qr-img{width:150px!important;height:150px!important;object-fit:contain!important;}
.office-expanded-right{min-height:310px!important;display:flex!important;}.office-slider{position:relative!important;width:100%!important;min-height:310px!important;height:100%!important;border-radius:22px!important;overflow:hidden!important;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,247,255,.88))!important;border:2px solid rgba(0,174,255,.78)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 14px 34px rgba(0,0,0,.10)!important;display:block!important;}body[data-theme="dark"] .office-slider{background:linear-gradient(135deg,rgba(12,18,30,.96),rgba(22,28,46,.95))!important;}
.office-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;opacity:0!important;transform:scale(1.015)!important;transition:opacity .85s ease,transform 4.5s ease!important;padding:8px!important;}.office-slide.active{opacity:1!important;transform:scale(1)!important;}.office-gallery-placeholder{min-height:310px!important;}

@media (max-width:1150px){.office-expanded-layout{grid-template-columns:1fr!important;}.office-expanded-right{min-height:260px!important;}}

@media (max-width:760px){body{overflow:auto!important;}.totem-wrap{display:block!important;min-height:100dvh!important;}.left-panel{width:100%!important;height:auto!important;min-height:auto!important;border-radius:0 0 24px 24px!important;}.building-logo-main{min-height:auto!important;margin:4px auto 10px!important;}.building-logo img{max-width:70%!important;max-height:84px!important;}.building-hero{height:190px!important;min-height:190px!important;}.directory-qr-card{padding:16px!important;text-align:center!important;}.directory-qr-card .section-title{text-align:center!important;}.directory-qr-box{display:none!important;}.right-panel{width:100%!important;min-height:auto!important;border-radius:24px 24px 0 0!important;}.right-body{padding:14px!important;}.office-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;position:relative!important;}.office-main{width:100%!important;order:1!important;padding-right:32px!important;}.office-logo-header{order:2!important;width:100%!important;max-width:100%!important;height:74px!important;margin:0!important;align-self:stretch!important;}.office-caret{position:absolute!important;top:16px!important;right:14px!important;}.office-expanded-layout{display:block!important;}.office-expanded-right,.office-slider,.office-gallery-placeholder,.qr-wrap,.qr-grid,.qr-card{display:none!important;}.mobile-office-actions,.actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:12px!important;}.linkbtn{flex:1 1 140px!important;justify-content:center!important;min-height:44px!important;}#osk{display:none!important;}}

/* =========================================================
   FINAL MOBILE POLISH - 2026-04-28
   Ajusta resultados de búsqueda, fichas mobile, slider y panel izquierdo
   sin tocar backend ni lógica de admin.
   ========================================================= */

/* Slider: imagen completa, sin deformar. */
.office-slider{
  display:block !important;
  position:relative !important;
}
.office-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:0 !important;
  transform:scale(1) !important;
  transition:opacity .75s ease, transform 4.5s ease !important;
  padding:8px !important;
}
.office-slide.active{
  opacity:1 !important;
  transform:scale(1.018) !important;
}

/* Imagen del edificio: prioriza que se vea el cartel/nombre. */
.building-hero .building-img,
.building-img{
  object-fit:cover !important;
  object-position:left top !important;
}

/* QR del panel izquierdo siempre completo en desktop/tótem. */
.directory-qr-card{
  overflow:visible !important;
}
.directory-qr-box{
  overflow:visible !important;
}
.directory-qr-img{
  object-fit:contain !important;
  pointer-events:none !important;
  cursor:default !important;
}

/* QR de oficinas visibles en desktop/tótem, pero no accionables al tocar. */
.qr-click,
.qr-click *{
  pointer-events:none !important;
  cursor:default !important;
}

@media (max-width: 760px){
  html, body{
    height:auto !important;
    min-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  body[data-kiosk="1"]{
    cursor:auto !important;
  }
  body[data-kiosk="1"] *{
    user-select:auto !important;
  }

  .totem-wrap{
    display:block !important;
    width:100% !important;
    min-height:100dvh !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .left-panel{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:auto !important;
    overflow:visible !important;
    border-radius:0 0 26px 26px !important;
    padding:18px 16px 20px !important;
  }

  .left-head,
  .brand-text.only{
    text-align:center !important;
    width:100% !important;
  }

  .dir-title{
    font-size:clamp(30px, 9vw, 44px) !important;
    line-height:1 !important;
    letter-spacing:.16em !important;
    text-align:center !important;
  }

  .dir-sub{
    text-align:center !important;
    font-size:14px !important;
  }

  .building-logo-main,
  .building-logo{
    width:100% !important;
    min-height:auto !important;
    max-height:none !important;
    padding:0 !important;
    margin:12px auto 14px !important;
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .building-logo img{
    max-width:min(78vw, 360px) !important;
    max-height:110px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .building-hero{
    height:210px !important;
    min-height:210px !important;
    margin:0 auto 16px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  .building-hero .building-img,
  .building-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:left top !important;
  }

  /* En mobile NO mostramos el QR grande del panel izquierdo. */
  .directory-qr-card{
    padding:16px !important;
    text-align:center !important;
  }
  .directory-qr-card .section-title{
    text-align:center !important;
  }
  .directory-qr-box{
    display:none !important;
  }

  .right-panel{
    width:100% !important;
    min-height:auto !important;
    border-radius:24px 24px 0 0 !important;
    overflow:visible !important;
  }
  .right-body{
    padding:14px !important;
    overflow:visible !important;
  }
  .stack{
    width:100% !important;
    max-width:100% !important;
  }

  /* Resultados de búsqueda mobile: texto contenido dentro de la tarjeta. */
  .results-head{
    font-size:15px !important;
    letter-spacing:.22em !important;
    margin:22px 6px 14px !important;
  }
  .result{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:22px 24px !important;
    border-radius:26px !important;
    overflow:hidden !important;
  }
  .result-title{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    hyphens:auto !important;
    line-height:1.16 !important;
    font-size:clamp(20px, 6.4vw, 30px) !important;
    letter-spacing:-.02em !important;
  }
  .result-sub{
    display:block !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.3 !important;
    font-size:clamp(15px, 4.2vw, 20px) !important;
    margin-top:12px !important;
  }
  .result-tags{
    max-width:100% !important;
  }

  /* Fichas de oficina mobile: logo no pisa texto. */
  .office{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  .office-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
    position:relative !important;
    padding-right:44px !important;
  }
  .office-main{
    order:1 !important;
    width:100% !important;
    min-width:0 !important;
    padding-right:0 !important;
  }
  .office-name{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    line-height:1.18 !important;
    font-size:clamp(18px, 5.4vw, 25px) !important;
  }
  .office-desc{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.28 !important;
  }
  .office-logo-header{
    order:2 !important;
    width:100% !important;
    max-width:100% !important;
    height:72px !important;
    margin:0 !important;
    align-self:stretch !important;
  }
  .office-logo-header img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
  .office-caret{
    position:absolute !important;
    top:16px !important;
    right:16px !important;
  }

  /* En mobile se ocultan QR grandes y slider, quedan botones Web/WhatsApp. */
  .office-expanded-layout{
    display:block !important;
  }
  .office-expanded-right,
  .office-slider,
  .office-gallery-placeholder,
  .qr-wrap,
  .qr-grid,
  .qr-card{
    display:none !important;
  }
  .mobile-office-actions,
  .actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-top:12px !important;
  }
  .linkbtn{
    flex:1 1 145px !important;
    min-height:46px !important;
    justify-content:center !important;
    font-size:16px !important;
  }

  /* El teclado custom queda desactivado en mobile. */
  #osk{
    display:none !important;
  }
}

@media (max-width: 420px){
  .result{
    padding:20px 20px !important;
  }
  .result-title{
    font-size:clamp(19px, 6vw, 26px) !important;
  }
  .building-hero{
    height:190px !important;
    min-height:190px !important;
  }
}


/* =========================================================
   CLEAN PREMIUM FINAL v2
   - No mostrar placeholders si no hay datos.
   - Layout se adapta si falta detalle, QR o slider.
   - Controles del slider prolijos a los costados.
   ========================================================= */

.office.no-extra .office-head{
  cursor: default !important;
}

.office.no-extra .office-body,
.office.no-extra .office-caret{
  display: none !important;
}

/* Si no hay contenido izquierdo pero sí slider, el slider ocupa todo */
.office-expanded-layout.no-left.has-slider{
  grid-template-columns: 1fr !important;
}

.office-expanded-layout.has-left.no-slider{
  grid-template-columns: 1fr !important;
}

.office-expanded-layout.no-left.has-slider .office-expanded-right,
.office-expanded-layout.has-left.no-slider .office-expanded-left{
  width: 100% !important;
}

/* Si no hay slider, no queda rectángulo celeste ni placeholder */
.office-expanded-layout.no-slider .office-expanded-right,
.office-gallery-placeholder{
  display: none !important;
}

/* Slider */
.office-slider{
  position: relative !important;
  overflow: hidden !important;
}

.office-slide-image,
.office-slide-video,
.office-slide-embed{
  border: 0 !important;
}

/* Controles: flechas a los costados y sonido abajo centro SOLO cuando corresponde */
.office-slider-controls{
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  pointer-events: none !important;
  display: block !important;
}

.office-slider-btn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(15,23,42,.58) !important;
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.office-slider-prev{
  left: 16px !important;
}

.office-slider-next{
  right: 16px !important;
}

.office-slider-btn:hover{
  background: rgba(15,23,42,.72) !important;
}

.office-slider-btn:active{
  transform: translateY(-50%) scale(.96) !important;
}

.office-slider-sound{
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(15,23,42,.72) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 0 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  white-space: nowrap !important;
}

.office-slider-sound.is-hidden{
  display: none !important;
}

/* Evita botones nativos pequeños por reglas previas */
.office-slider-controls button{
  font-family: inherit !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Mobile */
@media (max-width:760px){
  .office.no-extra .office-head{
    padding-right: 14px !important;
  }

  .office-slider-controls,
  .office-slider-btn,
  .office-slider-sound{
    display: none !important;
  }
}


/* =========================================================
   SLIDER CONTROLS MODERN PREMIUM - 2026-04-29
   Botones modernos tipo glass/iOS, laterales y sonido limpio.
   Pegar al final para pisar estilos anteriores.
   ========================================================= */

.office-slider{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.office-slider::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 12;
  background:
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 15%, transparent 85%, rgba(0,0,0,.10)),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.06));
  opacity:.75;
}

.office-slider-controls{
  position:absolute !important;
  inset:0 !important;
  z-index:30 !important;
  pointer-events:none !important;
  display:block !important;
}

.office-slider-controls button{
  font-family: inherit !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  outline:none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.office-slider-btn{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:54px !important;
  height:54px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.42) !important;
  background:linear-gradient(180deg, rgba(15,23,42,.58), rgba(15,23,42,.38)) !important;
  color:#fff !important;
  font-size:0 !important;
  line-height:1 !important;
  font-weight:900 !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  backdrop-filter:blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25) !important;
  padding:0 !important;
  margin:0 !important;
  transition:
    transform .16s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    opacity .18s ease !important;
}

.office-slider-btn::before{
  content:"";
  width:13px;
  height:13px;
  border-top:3px solid currentColor;
  border-right:3px solid currentColor;
  display:block;
}

.office-slider-prev{
  left:18px !important;
}
.office-slider-prev::before{
  transform:rotate(-135deg) translate(-1px, -1px);
}

.office-slider-next{
  right:18px !important;
}
.office-slider-next::before{
  transform:rotate(45deg) translate(-1px, 1px);
}

.office-slider-btn:hover{
  background:linear-gradient(180deg, rgba(37,99,235,.72), rgba(15,23,42,.52)) !important;
  border-color:rgba(255,255,255,.58) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.30),
    0 0 0 5px rgba(37,99,235,.16),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.office-slider-btn:active{
  transform:translateY(-50%) scale(.94) !important;
}

.office-slider-sound{
  position:absolute !important;
  left:50% !important;
  bottom:18px !important;
  transform:translateX(-50%) !important;
  min-height:44px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.44) !important;
  background:linear-gradient(180deg, rgba(15,23,42,.76), rgba(15,23,42,.56)) !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  padding:0 20px !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  backdrop-filter:blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25) !important;
  white-space:nowrap !important;
  transition:
    transform .16s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.office-slider-sound:hover{
  background:linear-gradient(180deg, rgba(37,99,235,.78), rgba(15,23,42,.60)) !important;
  border-color:rgba(255,255,255,.62) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.30),
    0 0 0 5px rgba(37,99,235,.16),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.office-slider-sound:active{
  transform:translateX(-50%) scale(.96) !important;
}

.office-slider-sound.is-hidden{
  display:none !important;
}

/* Modo claro: botones con contraste sin quedar pesados */
body[data-theme="light"] .office-slider-btn{
  border-color:rgba(255,255,255,.78) !important;
  background:linear-gradient(180deg, rgba(15,23,42,.58), rgba(15,23,42,.38)) !important;
  box-shadow:
    0 16px 36px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}
body[data-theme="light"] .office-slider-sound{
  border-color:rgba(255,255,255,.78) !important;
  background:linear-gradient(180deg, rgba(15,23,42,.76), rgba(15,23,42,.58)) !important;
  box-shadow:
    0 16px 36px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

/* Si el slider es chico, que no invadan demasiado */
@media (max-width:1150px){
  .office-slider-btn{
    width:48px !important;
    height:48px !important;
  }
  .office-slider-prev{ left:14px !important; }
  .office-slider-next{ right:14px !important; }
  .office-slider-sound{
    min-height:40px !important;
    bottom:14px !important;
    font-size:13px !important;
    padding:0 16px !important;
  }
}

@media (max-width:760px){
  .office-slider-controls,
  .office-slider-btn,
  .office-slider-sound{
    display:none !important;
  }
}







/* =========================================================
   TOTEM PUBLICO - PRO VISUAL PACK
   Objetivo: más corporativo, legible y táctil.
   ========================================================= */

:root{
  --pro-primary:#2563eb;
  --pro-primary-2:#0ea5e9;
  --pro-accent:#22c55e;
  --pro-ink:#0f172a;
  --pro-soft:#f7faff;
  --pro-border:rgba(15,23,42,.10);
  --pro-shadow:0 20px 55px rgba(15,23,42,.12);
  --pro-shadow-soft:0 12px 32px rgba(15,23,42,.08);
}

/* Fuente y render */
html, body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Fondo más limpio y premium */
body{
  background:
    radial-gradient(1000px 620px at 10% 5%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(14,165,233,.10), transparent 62%),
    linear-gradient(135deg,#eef5ff 0%,#f8fbff 48%,#eef2ff 100%) !important;
}

body[data-theme="dark"]{
  background:
    radial-gradient(900px 620px at 8% 4%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 620px at 94% 0%, rgba(124,58,237,.14), transparent 58%),
    linear-gradient(135deg,#070b14 0%,#0b1220 48%,#111827 100%) !important;
}

/* Contenedor general */
.totem-wrap{
  gap:18px !important;
  padding:16px !important;
}

.left-panel,
.right-panel{
  border-radius:30px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow: var(--pro-shadow) !important;
  background:rgba(255,255,255,.76) !important;
}

body[data-theme="dark"] .left-panel,
body[data-theme="dark"] .right-panel{
  border-color:rgba(255,255,255,.12) !important;
  background:rgba(12,18,32,.72) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.38) !important;
}

/* Panel izquierdo */
.left-panel{
  padding:20px !important;
}

.dir-title{
  letter-spacing:.22em !important;
  font-weight:950 !important;
  font-size:clamp(30px,2.15vw,44px) !important;
  line-height:1 !important;
}

.dir-sub{
  font-size:13px !important;
  letter-spacing:.02em !important;
}

.building-card,
.directory-qr-card,
.contact-card,
.card,
.clock-card{
  border-radius:24px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:var(--pro-shadow-soft) !important;
  background:rgba(255,255,255,.72) !important;
  overflow:hidden;
}

body[data-theme="dark"] .building-card,
body[data-theme="dark"] .directory-qr-card,
body[data-theme="dark"] .contact-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .clock-card{
  border-color:rgba(255,255,255,.11) !important;
  background:rgba(255,255,255,.045) !important;
}

/* QR y contacto */
.directory-qr-title,
.contact-card .card-title,
.card-title{
  letter-spacing:.22em !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:rgba(15,23,42,.62) !important;
}

body[data-theme="dark"] .directory-qr-title,
body[data-theme="dark"] .contact-card .card-title,
body[data-theme="dark"] .card-title{
  color:rgba(232,236,255,.72) !important;
}

.contact-corp{
  border-radius:20px !important;
  padding:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,251,255,.72)) !important;
}

body[data-theme="dark"] .contact-corp{
  background:rgba(255,255,255,.05) !important;
}

.contact-corp-phone{
  font-weight:900 !important;
  font-size:20px !important;
  letter-spacing:.04em !important;
}

/* Buscador */
.search{
  border-radius:22px !important;
  min-height:58px !important;
  padding:14px 18px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 18px 42px rgba(15,23,42,.08) !important;
}

.search input,
#q{
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

.search:focus-within{
  border-color:rgba(37,99,235,.35) !important;
  box-shadow:0 0 0 5px rgba(37,99,235,.12),0 22px 50px rgba(15,23,42,.10) !important;
}

body[data-theme="dark"] .search{
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(255,255,255,.13) !important;
}

/* Lista de pisos */
.floor{
  border-radius:22px !important;
  margin-bottom:12px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,251,255,.82)) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.06) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.floor:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(15,23,42,.10) !important;
  border-color:rgba(37,99,235,.24) !important;
}

body[data-theme="dark"] .floor{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035)) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
}

.floor-head{
  min-height:68px !important;
  padding:16px 18px !important;
}

.floor-badge{
  width:38px !important;
  height:38px !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.12)) !important;
  border:1px solid rgba(37,99,235,.24) !important;
  color:#1e3a8a !important;
}

body[data-theme="dark"] .floor-badge{
  color:#dbeafe !important;
}

.floor-title{
  font-size:17px !important;
  font-weight:950 !important;
  letter-spacing:.005em !important;
}

.floor-caret{
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(15,23,42,.04) !important;
  border:1px solid rgba(15,23,42,.06) !important;
}

body[data-theme="dark"] .floor-caret{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* Oficina */
.office{
  border-radius:20px !important;
  margin-top:12px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
}

.office:hover{
  border-color:rgba(37,99,235,.22) !important;
}

body[data-theme="dark"] .office{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.10) !important;
}

.office-head{
  padding:15px 16px !important;
  align-items:center !important;
}

.office-name{
  font-size:16px !important;
  font-weight:950 !important;
  letter-spacing:-.01em !important;
}

.office-desc{
  font-size:13px !important;
  line-height:1.35 !important;
}

.chip,
.pill{
  font-size:12px !important;
  font-weight:800 !important;
  border-radius:999px !important;
  padding:7px 11px !important;
  background:rgba(37,99,235,.10) !important;
  border:1px solid rgba(37,99,235,.18) !important;
}

.office-body{
  border-top:1px solid rgba(15,23,42,.08) !important;
}

body[data-theme="dark"] .office-body{
  border-top-color:rgba(255,255,255,.10) !important;
}

.detail-line{
  font-size:14px !important;
  line-height:1.5 !important;
}

/* Botones de acciones */
.action-btn,
.office-action,
.btn,
.qr-link{
  border-radius:16px !important;
  font-weight:900 !important;
}

/* Slider más limpio */
.office-slider{
  border-radius:24px !important;
  border:2px solid rgba(14,165,233,.85) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 16px 36px rgba(2,132,199,.12) !important;
}

.office-slider-btn{
  width:50px !important;
  height:50px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:0 !important;
  background:rgba(15,23,42,.58) !important;
  backdrop-filter:blur(10px) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 14px 32px rgba(15,23,42,.20) !important;
}

.office-slider-btn::before{
  content:"";
  width:13px;
  height:13px;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  display:block;
}

.office-slider-prev::before{ transform:rotate(-135deg); margin-left:4px; }
.office-slider-next::before{ transform:rotate(45deg); margin-right:4px; }

.office-slider-btn:hover{
  transform:translateY(-50%) scale(1.06) !important;
  background:rgba(15,23,42,.76) !important;
}

.office-slider-sound{
  border-radius:999px !important;
  padding:11px 16px !important;
  font-weight:950 !important;
  backdrop-filter:blur(12px) !important;
}

/* Empty hint */
.empty,
.hint,
.empty-state{
  border-radius:20px !important;
  border:1px dashed rgba(15,23,42,.13) !important;
  background:rgba(255,255,255,.52) !important;
}

body[data-theme="dark"] .empty,
body[data-theme="dark"] .hint,
body[data-theme="dark"] .empty-state{
  border-color:rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.035) !important;
}

/* Animaciones suaves */
.floor,
.office,
.search,
.card,
.directory-qr-card,
.contact-card{
  will-change:transform;
}

@keyframes proFadeUp{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}

.floor,
.search,
.left-panel,
.right-panel{
  animation:proFadeUp .35s ease both;
}

/* Mobile y pantallas chicas */
@media(max-width:900px){
  .totem-wrap{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:100vh !important;
    overflow:auto !important;
    padding:12px !important;
  }

  .left-panel,
  .right-panel{
    border-radius:24px !important;
  }

  .left-panel{
    padding:16px !important;
  }

  .dir-title{
    font-size:30px !important;
    text-align:center !important;
  }

  .dir-sub{
    text-align:center !important;
  }

  .search{
    min-height:54px !important;
    border-radius:18px !important;
  }

  .floor-head{
    min-height:62px !important;
    padding:14px 15px !important;
  }

  .floor-title{
    font-size:16px !important;
  }

  .office-expanded-layout{
    grid-template-columns:1fr !important;
  }

  .office-slider,
  .office-gallery-placeholder{
    min-height:230px !important;
  }

  .office-slider-btn{
    width:44px !important;
    height:44px !important;
  }

  .contact-corp-logo{
    max-width:210px !important;
  }
}

@media(max-width:520px){
  .dir-title{
    letter-spacing:.16em !important;
    font-size:26px !important;
  }

  .floor-badge{
    width:34px !important;
    height:34px !important;
  }

  .office-name{
    font-size:15px !important;
  }

  .chip,
  .pill{
    font-size:11px !important;
    padding:6px 9px !important;
  }
}