/* Subiendo Inicio — capa visual sobre la barra y el panel. No toca posición ni alto del mapa ni del panel. */

@keyframes hp-shine{0%,60%{transform:translateX(-120%) rotate(22deg)}100%{transform:translateX(420%) rotate(22deg)}}
@keyframes hp-ping{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}50%{box-shadow:0 0 0 5px rgba(34,211,238,0)}}

/* ---------- Barra superior ---------- */
#screen-home .map-greeting{
  gap:.7rem;padding:.5rem .85rem .5rem .5rem;
  background:rgba(255,255,255,.94);border:1px solid rgba(37,99,235,.14);
  box-shadow:0 10px 26px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#screen-home .map-greeting-icon{
  position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:12px;font-size:0;
  background:linear-gradient(135deg,#22d3ee,#2563eb 60%,#4f46e5);
  box-shadow:0 6px 14px rgba(37,99,235,.35);
}
#screen-home .map-greeting-icon::before,
#screen-home .where-icon::before,
#screen-home .reservas-home-btn > span:first-child::before,
#screen-home .location-refresh-btn > span:first-child::before{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:#fff;
  -webkit-mask:var(--hp-ico) center/contain no-repeat;mask:var(--hp-ico) center/contain no-repeat;
}
#screen-home .map-greeting-icon,
#screen-home .where-icon{
  --hp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
#screen-home .map-greeting-title{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#2563eb}
#screen-home .map-greeting-addr{font-size:.9rem;font-weight:800;letter-spacing:-.01em}
#screen-home .map-nearby-hint{color:#0e7490}
#screen-home .map-nearby-hint::before{
  content:"";display:inline-block;width:6px;height:6px;margin:0 .35rem .1rem 0;border-radius:50%;
  vertical-align:middle;background:#22d3ee;animation:hp-ping 1.8s ease-in-out infinite;
}

.hp-avatar{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:#fff;
  background-color:#2563eb;background-image:linear-gradient(135deg,#2563eb,#22d3ee);
  background-size:cover;background-position:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 4px rgba(34,211,238,.45),0 6px 14px rgba(37,99,235,.3);
}
.hp-avatar.has-photo{color:transparent}

/* ---------- Panel inferior ---------- */
#screen-home .bottom-drawer{
  background:
    radial-gradient(120% 50% at 100% 0%,rgba(34,211,238,.1) 0%,transparent 60%),
    var(--white,#fff);
  border-top:1px solid rgba(37,99,235,.14) !important;
}
#screen-home .drawer-handle{background:linear-gradient(90deg,#22d3ee,#2563eb) !important;opacity:.55}
#screen-home .drawer-title{font-size:1.18rem;letter-spacing:-.02em;margin-bottom:.85rem}

#screen-home .where-to-btn{
  position:relative;overflow:hidden;isolation:isolate;gap:.8rem;
  padding:.85rem .85rem .85rem .75rem;border-radius:18px;color:#fff;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(34,211,238,.42) 0%,transparent 55%),
    linear-gradient(135deg,#0a1f5c 0%,#1d4ed8 60%,#2563eb 100%);
  box-shadow:0 14px 30px rgba(29,78,216,.3),inset 0 1px 0 rgba(255,255,255,.18);
}
#screen-home .where-to-btn::after{
  content:"";position:absolute;top:-60%;left:0;width:30%;height:220%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  animation:hp-shine 6s ease-in-out infinite;
}
#screen-home .where-to-btn:active{transform:scale(.98)}
#screen-home .where-icon{
  position:relative;flex:0 0 40px;height:40px;border-radius:13px;font-size:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
}
#screen-home .where-label{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
#screen-home .where-placeholder{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
#screen-home .where-arrow{
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;
  font-size:1.15rem;color:#fff;background:rgba(255,255,255,.16);
}

/* Reservas + ubicación: dos accesos lado a lado */
#screen-home .reservas-home-btn,
#screen-home .location-refresh-btn{
  width:calc(50% - .3rem);min-height:62px;margin:0 0 .75rem;padding:.6rem .65rem;
  display:flex;align-items:center;justify-content:flex-start;gap:.55rem;text-align:left;
  border-radius:16px;background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);
  box-shadow:0 6px 16px rgba(15,23,42,.06);color:var(--text,#0f172a);letter-spacing:0;
}
#screen-home .reservas-home-btn{float:left}
#screen-home .location-refresh-btn{float:right;font-size:.8rem;font-weight:800;line-height:1.2}
#screen-home .reservas-home-btn:active,
#screen-home .location-refresh-btn:active{transform:scale(.97);background:var(--surface,#f8fafc)}
#screen-home .reservas-home-btn > span:first-child,
#screen-home .location-refresh-btn > span:first-child{
  position:relative;flex:0 0 36px;height:36px;border-radius:12px;font-size:0 !important;
  box-shadow:0 6px 12px rgba(15,23,42,.14);
}
#screen-home .reservas-home-btn > span:first-child{
  background:linear-gradient(135deg,#818cf8,#4338ca);
  --hp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
#screen-home .location-refresh-btn > span:first-child{
  background:linear-gradient(135deg,#22d3ee,#0e7490);
  --hp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
}
#screen-home .reservas-home-btn > div{min-width:0;flex:1}
#screen-home .reservas-home-btn > span:last-child{display:none}
#screen-home .reservas-home-title{font-size:.84rem}
#screen-home .reservas-home-sub{font-size:.66rem;color:var(--text3,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-home .quick-dests{clear:both}

#screen-home .quick-chip{
  padding:.5rem .8rem;border-radius:12px;font-weight:700;color:var(--text,#0f172a);
  background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);box-shadow:0 4px 12px rgba(15,23,42,.05);
}
#screen-home .quick-chip:active{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.2)}

#screen-home .promo-banner{border-radius:18px}
#screen-home .promo-banner-image{border-radius:12px}

#screen-home .recent-place{padding:.7rem .1rem}
#screen-home .recent-place:active{margin:0;padding:.7rem .1rem;background:transparent;opacity:.7}
#screen-home .rp-icon{
  border-radius:12px;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(37,99,235,.14));
  border:1px solid rgba(37,99,235,.14);
}
#screen-home .rp-time{
  flex-shrink:0;padding:.15rem .5rem;border-radius:99px;font-size:.64rem;font-weight:700;white-space:nowrap;
  background:var(--surface,#f1f5f9);border:1px solid var(--border,#e2e8f0);
}

/* ---------- Modo oscuro ---------- */
html[data-theme="dark"] #screen-home .map-topbar{background:linear-gradient(180deg,rgba(11,18,32,.95) 0%,rgba(11,18,32,0) 100%) !important}
html[data-theme="dark"] #screen-home .map-topbar-inner{border-color:rgba(51,65,85,.6) !important}
html[data-theme="dark"] #screen-home .map-greeting{background:rgba(30,41,59,.94);border-color:rgba(96,165,250,.22)}
html[data-theme="dark"] #screen-home .map-greeting-title{color:#60a5fa}
html[data-theme="dark"] #screen-home .map-nearby-hint{color:#67e8f9}
html[data-theme="dark"] .hp-avatar{box-shadow:0 0 0 2px #111827,0 0 0 4px rgba(34,211,238,.45),0 6px 14px rgba(0,0,0,.35)}
html[data-theme="dark"] #screen-home .bottom-drawer{border-top-color:rgba(96,165,250,.2) !important}
html[data-theme="dark"] #screen-home .where-to-btn{
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(34,211,238,.35) 0%,transparent 55%),
    linear-gradient(135deg,#0a1f5c 0%,#1d4ed8 60%,#2563eb 100%) !important;
  color:#fff !important;border:1px solid rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] #screen-home .where-label{color:rgba(255,255,255,.72) !important}
html[data-theme="dark"] #screen-home .where-placeholder,
html[data-theme="dark"] #screen-home .where-arrow{color:#fff !important}
html[data-theme="dark"] #screen-home .reservas-home-btn,
html[data-theme="dark"] #screen-home .location-refresh-btn{
  background:var(--card) !important;color:var(--text) !important;border:1px solid var(--border) !important;
}
html[data-theme="dark"] #screen-home .quick-chip{background:var(--card);border-color:var(--border);color:var(--text)}
html[data-theme="dark"] #screen-home .rp-icon{background:#243044;border-color:var(--border)}
html[data-theme="dark"] #screen-home .rp-time{background:var(--surface);border-color:var(--border);color:var(--text2)}