/* ============ Tarjetas 3D, mapa, galería, reproductor, chat, ingreso ============ */
[hidden] { display: none !important; }
:root {
  --line: rgba(43, 95, 147, .16);
  --bubble-mine: #d6ebfb;
  --bubble-theirs: #ffffff;
  --panel: #f5f9fd;
  --danger: #d64545;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line: rgba(160, 200, 240, .16);
    --bubble-mine: #1f4a73;
    --bubble-theirs: #22303f;
    --panel: #121b26;
  }
}
:root[data-theme="dark"] { --line: rgba(160,200,240,.16); --bubble-mine: #1f4a73; --bubble-theirs: #22303f; --panel: #121b26; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.btn-main, .btn-ghost {
  font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 11px 16px; cursor: pointer;
}
.btn-main { background: linear-gradient(145deg, var(--celeste), var(--celeste-dark)); color: #fff; box-shadow: 0 6px 16px rgba(43,95,147,.35); }
.btn-ghost { background: rgba(108,172,228,.16); color: var(--ink); }
.btn-main:active, .btn-ghost:active { transform: scale(.97); }
.wide { width: 100%; }

/* ---------------- capa de tarjetas 3D ---------------- */
#cards {
  position: fixed; inset: 0; pointer-events: none; z-index: 30;
  display: grid; place-items: center; perspective: 1400px;
  padding: calc(env(safe-area-inset-top) + 64px) 12px calc(env(safe-area-inset-bottom) + 96px);
}
.card3d {
  grid-area: 1 / 1; width: min(560px, 100%); max-height: 100%;
  pointer-events: auto; transform-style: preserve-3d;
  opacity: 0; transform: translateY(40px) rotateX(55deg) scale(.82);
  transition: transform .55s cubic-bezier(.2,.9,.25,1.2), opacity .35s;
}
.card3d.in { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
.card3d.out { opacity: 0; transform: translateY(-30px) rotateX(-40deg) scale(.85); transition-duration: .4s; }
.card-inner {
  --rx: 0deg; --ry: 0deg;
  transform: rotateX(calc(4deg + var(--rx))) rotateY(var(--ry));
  transition: transform .2s ease-out;
  background: var(--card); backdrop-filter: blur(14px);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -18px rgba(20,40,70,.55), 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.5);
  display: flex; flex-direction: column; max-height: calc(100vh - 190px);
}
.card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.card-title { flex: 1; font-weight: 800; color: var(--celeste-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-title { color: var(--celeste); } }
.card-close { border: 0; background: rgba(108,172,228,.16); color: var(--ink); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.card-body { overflow: auto; position: relative; }
body.has-card #bubble { display: none; }

/* ---------------- mapa / navegación ---------------- */
.route-card .card-body { overflow: hidden; }
.map-tilt { height: 46vh; min-height: 260px; overflow: hidden; perspective: 900px; background: #dfe9f2; }
.map { height: 100%; width: 100%; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.route-card.navigating .map-tilt { height: 56vh; }
.route-card.navigating .map { transform: rotateX(48deg) scale(1.55) translateY(-6%); }
.route-card.navigating .card-inner { transform: none; }
.route-info { padding: 10px 14px 4px; }
.route-info .addr { font-size: 13px; color: var(--muted); }
.route-info .meta { font-size: 15px; margin-top: 2px; }
.route-actions { display: flex; gap: 8px; align-items: center; padding: 10px 14px 14px; flex-wrap: wrap; }
.route-actions .btn-main { flex: 1; }
.modes { display: flex; gap: 4px; background: rgba(108,172,228,.14); border-radius: 12px; padding: 3px; }
.modes button { border: 0; background: transparent; font-size: 18px; padding: 6px 9px; border-radius: 9px; cursor: pointer; }
.modes button.on { background: var(--card); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.nav-banner {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 500;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(145deg, #2b5f93, #1d4670); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.nav-banner[hidden] { display: none; }
.nav-icon { font-size: 30px; width: 40px; text-align: center; }
.nav-banner b { display: block; font-size: 16px; line-height: 1.25; }
.nav-banner small { opacity: .85; font-size: 12.5px; }
.pin { width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(145deg, #f6b40e, #e0901a); display: grid; place-items: center; box-shadow: 0 6px 12px rgba(0,0,0,.3); }
.pin span { transform: rotate(45deg); font-size: 16px; }
.me { width: 28px; height: 28px; border-radius: 50%; background: rgba(108,172,228,.3); display: grid; place-items: center; }
.me .arrow { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 16px solid #2b5f93; filter: drop-shadow(0 0 2px #fff); transition: transform .4s; }

/* ---------------- galería 3D ---------------- */
.gallery-card .card-inner { max-height: calc(100vh - 150px); }
.stage3d { position: relative; height: min(58vh, 520px); perspective: 1100px; background: #0d1520; overflow: hidden; touch-action: pan-y; }
.slide { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden;
  opacity: 0; transition: transform 1s cubic-bezier(.3,.8,.2,1), opacity .8s; }
.slide img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.slide.enter-right { transform: rotateY(70deg) translateZ(-200px); }
.slide.enter-left { transform: rotateY(-70deg) translateZ(-200px); }
.slide.active { opacity: 1; transform: rotateY(0) translateZ(0); }
.slide.active img { animation: kenburns 6s ease-out forwards; }
.slide.exit-left { opacity: 0; transform: rotateY(-70deg) translateZ(-200px); }
.slide.exit-right { opacity: 0; transform: rotateY(70deg) translateZ(-200px); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.g-caption { display: flex; justify-content: space-between; padding: 10px 14px 4px; font-size: 13px; color: var(--muted); }
.g-progress { height: 3px; margin: 0 14px; background: var(--line); border-radius: 3px; overflow: hidden; }
.g-progress i { display: block; height: 100%; width: 0; background: var(--gold); }
.g-controls { display: flex; justify-content: center; gap: 14px; padding: 10px 0 14px; }
.g-controls button, .np-ctl button { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; background: rgba(108,172,228,.16); color: var(--ink); }

/* ---------------- reproductor ---------------- */
.player-card { align-self: end; }
.np { display: flex; gap: 14px; align-items: center; padding: 14px; }
.np b { display: block; font-size: 16px; }
.np small, .np-q { color: var(--muted); font-size: 13px; }
.disc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(circle, #fff 0 18%, #2b5f93 19% 60%, #1c2733 61%); }
.disc.spin { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.np-ctl { display: flex; justify-content: center; gap: 12px; padding: 0 0 14px; }

/* ---------------- conversaciones ---------------- */
#chatChips { position: fixed; top: calc(env(safe-area-inset-top) + 64px); left: 12px; right: 12px; z-index: 25;
  display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
#chatChips button { pointer-events: auto; border: 0; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13.5px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
#chatChips i { font-style: normal; background: var(--danger); color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 6px; font-size: 12px; }

#chatPanel {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--panel);
  transform: perspective(1200px) rotateY(-25deg) translateX(100%); opacity: 0; transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .3s;
}
#chatPanel.in { transform: none; opacity: 1; }
@media (min-width: 700px) {
  #chatPanel { left: auto; width: 440px; box-shadow: -20px 0 40px rgba(0,0,0,.18); }
}
.ch-head { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 10px 10px;
  background: linear-gradient(145deg, var(--celeste-dark), #1d4670); color: #fff; }
.ch-head button { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.ch-head .ch-back { font-size: 26px; background: transparent; }
.ch-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #3a2410; display: grid; place-items: center; font-weight: 800; }
.ch-who { flex: 1; min-width: 0; }
.ch-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-who small { opacity: .85; font-size: 12px; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px;
  background-image: radial-gradient(rgba(108,172,228,.12) 1px, transparent 1px); background-size: 18px 18px; }
.sys { align-self: center; text-align: center; font-size: 12.5px; color: var(--muted); background: var(--card);
  padding: 6px 12px; border-radius: 10px; max-width: 90%; }
.msg { max-width: 82%; padding: 7px 10px 18px; border-radius: 14px; position: relative; font-size: 15px; line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: var(--bubble-mine); border-bottom-right-radius: 4px; }
.msg.theirs { align-self: flex-start; background: var(--bubble-theirs); border-bottom-left-radius: 4px; }
.msg p { margin: 0; white-space: pre-wrap; }
.msg img, .msg video { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; }
.msg .meta { position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: var(--muted); }
.msg .aud { display: flex; align-items: center; gap: 6px; }
.msg audio { max-width: 230px; height: 36px; }
.msg .doc { display: flex; gap: 10px; align-items: center; font-size: 26px; }
.msg .doc b { display: block; font-size: 14px; }
.msg .doc small { font-size: 12px; color: var(--muted); }
.msg .saved, .msg .save { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.msg .save { color: var(--celeste-dark); }
.loc-map { width: 230px; height: 140px; border-radius: 10px; overflow: hidden; }
.loc-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 13px; }
.loc-actions button { border: 0; border-radius: 8px; padding: 4px 8px; background: rgba(108,172,228,.2); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.ch-attach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: var(--card); border-top: 1px solid var(--line); }
.ch-attach label, .ch-attach button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  border-radius: 14px; background: rgba(108,172,228,.12); border: 0; color: var(--ink); font: inherit; font-size: 22px; cursor: pointer; }
.ch-attach span { font-size: 12px; }
.ch-attach button[data-gif] { font-weight: 900; font-size: 16px; }
.ch-gifs { padding: 10px; background: var(--card); border-top: 1px solid var(--line); }
.ch-gifs input { width: 100%; font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; max-height: 32vh; overflow: auto; }
.gif-grid img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; cursor: pointer; }
.ch-compose { display: flex; gap: 8px; align-items: center; padding: 8px 10px calc(env(safe-area-inset-bottom) + 10px); background: var(--card); border-top: 1px solid var(--line); }
.ch-compose .ch-input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 11px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); outline: none; }
.ch-clip { border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.ch-send { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; color: #fff;
  background: linear-gradient(145deg, var(--celeste), var(--celeste-dark)); }
.ch-send.rec { background: linear-gradient(145deg, #ff6b6b, #c92a2a); animation: ring 1.2s infinite; }
body.chat-open #composer, body.chat-open #chatChips { visibility: hidden; }

.invite { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 70px); z-index: 50; max-width: 480px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px;
  background: var(--card); border-radius: 18px; box-shadow: 0 20px 40px -10px rgba(0,0,0,.35);
  transform: perspective(900px) rotateX(-70deg) translateY(-30px); opacity: 0; transform-origin: top center;
  transition: transform .5s cubic-bezier(.2,.9,.25,1.3), opacity .3s; }
.invite.in { transform: none; opacity: 1; }
.inv-icon { font-size: 30px; }
.inv-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

/* ---------------- ingreso ---------------- */
#login { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: linear-gradient(var(--sky-top), var(--sky-bottom)); }
#login[hidden] { display: none; }
.sheet { width: min(400px, 100%); background: var(--card); border-radius: 22px; padding: 22px 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px; text-align: center; }
.sheet h2 { margin: 0; color: var(--celeste-dark); }
.sheet p { margin: 0 0 4px; }
.sheet label, #settings label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 13px; color: var(--muted); }
.sheet input, #settings input { font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); }
.lg-badge { font-size: 44px; }
.lg-msg { min-height: 1.2em; color: var(--danger); font-size: 13.5px; }
#lgSwitch { color: var(--celeste-dark); font-size: 14px; }

#settings { width: min(460px, calc(100% - 24px)); max-height: 86vh; overflow: auto; }
.set-head { display: flex; justify-content: space-between; align-items: center; }
.set-head h3 { margin: 0; }
.set-block { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.set-block h4 { margin: 0; }
#mailForm { display: flex; flex-direction: column; gap: 8px; }
details summary { cursor: pointer; font-size: 13px; color: var(--muted); }

#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 100px); z-index: 80; max-width: min(92vw, 480px);
  transform: translate(-50%, 20px); opacity: 0; transition: .3s; pointer-events: none;
  background: #1c2733; color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; box-shadow: var(--shadow); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }