/* ════════════════════════════════════════════════════════════
   SONWAY · Estilos
   Paleta: mar de Cortés (teal) + desierto/arena (ámbar)
   ════════════════════════════════════════════════════════════ */
:root{
  --teal:        #0a9396;
  --teal-dark:   #005f73;
  --teal-soft:   #e0f3f3;
  --sand:        #ee9b00;
  --sand-soft:   #fcefd6;
  --coral:       #ca6702;
  --ink:         #0b1f24;
  --muted:       #6b7e82;
  --line:        #e6ecec;
  --bg:          #f4f8f8;
  --card:        #ffffff;
  --radius:      18px;
  --shadow:      0 4px 20px rgba(0,60,70,.08);
  --shadow-lg:   0 12px 40px rgba(0,60,70,.16);
  font-synthesis: none;
}
*{ box-sizing:border-box; margin:0; padding:0 }
body{ font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none }
[data-lucide]{ width:20px; height:20px; stroke-width:1.5 }
[hidden]{ display:none !important }

/* ══ TOPBAR ══ */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:10px 20px;
  background:linear-gradient(100deg,var(--teal-dark),var(--teal));
  color:#fff; box-shadow:0 2px 14px rgba(0,60,70,.18);
  height:58px;
}
.brand{ display:flex; align-items:center; gap:10px }
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.18);
  display:grid; place-items:center; backdrop-filter:blur(4px);
}
.brand-mark [data-lucide]{ width:20px; height:20px; color:#fff }
.brand-text{ font-size:21px; font-weight:800; letter-spacing:-.5px }
.brand-text span{ color:var(--sand) }
.topbar-sub{ font-size:12px; opacity:.8; font-weight:500; border-left:1px solid rgba(255,255,255,.3); padding-left:14px; }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:8px }
.topbar-icon{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); display:grid; place-items:center; color:#fff; transition:background .15s; }
.topbar-icon:hover{ background:rgba(255,255,255,.28) }
.topbar-icon [data-lucide]{ width:18px; height:18px }
.topbar-user{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:18px; transition:transform .15s; }
.topbar-user:hover{ transform:scale(1.08) }
@media(max-width:700px){ .topbar-sub{ display:none } }

/* ══ LAYOUT 3 COLUMNAS ══ */
.layout{
  display:grid;
  grid-template-columns: 230px 1fr 270px;
  grid-template-areas: "left center right";
  max-width:1400px;
  margin:0 auto;
  gap:0;
  min-height:100vh;
  align-items:start;
}
.col-left{
  grid-area:left;
  position:sticky; top:0;
  height:100vh;
  overflow-y:auto;
  padding:12px 10px;
  border-right:1px solid var(--line);
}
.col-center{
  grid-area:center;
  padding:24px 28px 80px;
}
.col-right{
  grid-area:right;
  position:sticky; top:0;
  height:100vh;
  overflow-y:auto;
  padding:20px 16px;
  border-left:1px solid var(--line);
}

@media(max-width:1100px){
  .layout{ grid-template-columns:68px 1fr 250px; }
}
@media(max-width:780px){
  .layout{ grid-template-columns:1fr; grid-template-areas:"center"; }
  .col-right{ display:none }

  /* col-left → cajón deslizante (drawer) */
  .col-left{
    display:block;
    position:fixed; top:0; left:0; bottom:0;
    width:84%; max-width:300px; height:100vh; height:100dvh;
    z-index:120;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:6px 0 40px rgba(0,0,0,.28);
    border-right:1px solid var(--line) !important;
  }
  .col-left.drawer-open{ transform:translateX(0) }

  /* dentro del drawer: mostrar textos completos (revertir colapso de 1100px) */
  .col-left .snav-brand{ justify-content:flex-start !important; padding:14px 16px 18px !important }
  .col-left .snav-brand-name{ display:block !important }
  .col-left .snav-section{ display:block !important }
  .col-left .snav-label{ display:block !important }
  .col-left .snav-badge{ display:grid !important }
  .col-left .snav-item{ justify-content:flex-start !important; padding:10px 12px !important; margin:1px 6px !important }
  .col-left .snav-cta{ justify-content:flex-start !important; padding:11px 16px !important; width:calc(100% - 20px) !important }
  .col-left .snav-cta span{ display:inline !important }
  .col-left .snav-logout{ justify-content:flex-start !important }
  .col-left .snav-logout .snav-label{ display:block !important }
}

/* backdrop del drawer */
.menu-backdrop{
  position:fixed; inset:0; z-index:110;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .28s;
  display:none;
}
@media(max-width:780px){ .menu-backdrop{ display:block } }
.menu-backdrop.show{ opacity:1; pointer-events:auto }

/* botón cerrar dentro del drawer (solo móvil) */
.snav-drawer-close{ display:none }
@media(max-width:780px){
  .snav-drawer-close{
    display:grid; place-items:center; margin-left:auto;
    width:34px; height:34px; border-radius:50%;
    background:var(--bg); color:var(--muted);
    border:1px solid var(--line); cursor:pointer; flex:none;
    transition:background .15s, color .15s;
  }
  .snav-drawer-close:hover{ background:var(--line); color:var(--ink) }
  .snav-drawer-close [data-lucide]{ width:18px; height:18px }
}

/* ══ COL-LEFT fondo blanco ══ */
.col-left{
  background:#ffffff;
  border-right:1px solid var(--line) !important;
  min-height:100vh;
  scrollbar-width:thin;
  scrollbar-color: rgba(10,147,150,.45) transparent;
}
.col-left::-webkit-scrollbar{ width:4px; }
.col-left::-webkit-scrollbar-track{ background:transparent; }
.col-left::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,
    rgba(10,147,150,.7) 0%,
    rgba(0,95,115,.9) 50%,
    rgba(10,147,150,.7) 100%);
  border-radius:10px;
  box-shadow:0 0 8px rgba(10,147,150,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.col-left::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,
    rgba(10,147,150,1) 0%,
    rgba(0,95,115,1) 50%,
    rgba(10,147,150,1) 100%);
}

/* ══ BOTON CTA REGISTRAR VIAJE ══ */
.snav-cta{
  display:flex; align-items:center; gap:10px;
  margin:8px 10px 4px;
  padding:11px 16px; border-radius:14px;
  background:var(--teal); color:#fff;
  font-size:13.5px; font-weight:700;
  cursor:pointer; border:none; font-family:inherit;
  transition:background .15s, transform .1s;
  width:calc(100% - 20px);
}
.snav-cta:hover{ background:var(--teal-dark) }
.snav-cta:active{ transform:scale(.97) }
.snav-cta [data-lucide]{ width:18px; height:18px; flex:none }
@media(max-width:1100px){
  .snav-cta span{ display:none }
  .snav-cta{ justify-content:center; padding:10px; width:calc(100% - 12px); margin:8px 6px 4px }
}

/* ══ NAV LATERAL ══ */
.sidenav{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 0 20px;
}

/* logo mini en el sidebar */
.snav-brand{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px 18px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.snav-brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:var(--teal); display:grid; place-items:center;
}
.snav-brand-mark [data-lucide]{ width:18px; height:18px; color:#fff }
.snav-brand-name{ font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.3px }
.snav-brand-name span{ color:var(--teal) }

.snav-section{
  font-size:10px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted);
  padding:14px 16px 5px;
}
.snav-divider{
  height:1px; background:var(--line);
  margin:10px 12px;
}

.snav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  margin:1px 6px;
  color:var(--muted); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:all .18s; text-decoration:none;
  position:relative;
}
.snav-item:hover{
  background:var(--teal-soft);
  color:var(--teal-dark);
}
.snav-item:hover .snav-icon{ background:rgba(10,147,150,.15) }

.snav-item.active{
  background:var(--teal-soft);
  color:var(--teal);
}
.snav-item.active::after{ display:none; }
.snav-item.active .snav-icon{
  background:var(--teal);
  box-shadow:0 4px 12px rgba(10,147,150,.35);
}
.snav-item.active .snav-icon [data-lucide]{ color:#fff }

.snav-icon{
  width:22px; height:22px; flex:none;
  background:transparent !important;
  display:grid; place-items:center;
  transition:all .18s;
}
.snav-icon [data-lucide]{
  width:18px; height:18px;
  color:#9db8bc;
  stroke-width:1.5;
  transition:color .18s;
}
.snav-item:hover .snav-icon [data-lucide]{ color:var(--teal) }
.snav-item.active .snav-icon [data-lucide]{ color:var(--teal); stroke-width:1.75 }
.snav-icon-red [data-lucide]{ color:#c9868b }
.snav-item:hover .snav-icon-red [data-lucide]{ color:#e63946 }
.snav-item.active .snav-icon-red [data-lucide]{ color:#e63946 }

/* punto de acento activo — fino, elegante */
.snav-item.active{
  background:var(--teal-soft);
  color:var(--teal);
}
.snav-item.active .snav-label{ font-weight:700 }

.snav-label{ flex:1; white-space:nowrap; color:inherit }

.snav-badge{
  background:var(--teal); color:#fff;
  font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px;
  display:grid; place-items:center; padding:0 5px;
  letter-spacing:.2px;
}

/* perfil al fondo */
.snav-item-user{
  margin-top:8px;
  background:transparent;
  border:1px solid var(--line);
}
.snav-item-user:hover{ background:var(--teal-soft); border-color:var(--teal) }
.snav-avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--teal-soft);
  display:grid; place-items:center; font-size:15px;
  border:1.5px solid var(--line);
  transition:border-color .18s;
}
.snav-item-user:hover .snav-avatar{ border-color:var(--teal) }

@media(max-width:1100px){
  .snav-label,.snav-section,.snav-badge,.snav-brand-name{ display:none }
  .snav-item{ justify-content:center; padding:10px; margin:1px 4px }
  .snav-brand{ justify-content:center; padding:10px 8px 16px }
}

/* ══ COMPOSER ══ */
.composer{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px; margin-bottom:18px;
}
.composer-head{ display:flex; align-items:center; gap:12px }
.composer-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--teal-soft); display:grid; place-items:center; font-size:20px; flex:none;
}
.composer-trigger{
  flex:1; text-align:left; background:var(--bg); color:var(--muted);
  padding:10px 16px; border-radius:22px; font-size:14px; transition:background .15s;
}
.composer-trigger:hover{ background:var(--teal-soft) }
.composer-body{ margin-top:14px; display:flex; flex-direction:column; gap:12px }
.drop{
  position:relative; display:block;
  border:2px dashed var(--line); border-radius:14px; background:var(--bg);
  min-height:140px; cursor:pointer; transition:border-color .15s,background .15s; overflow:hidden;
}
.drop:hover{ border-color:var(--teal); background:var(--teal-soft) }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2 }
.drop-empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--muted); text-align:center; padding:16px;
}
.drop-empty [data-lucide]{ width:32px; height:32px; color:var(--teal); margin-bottom:4px }
.drop-empty strong{ color:var(--ink); font-size:14.5px }
.drop-empty span{ font-size:12px }
.drop-preview{ display:grid; grid-auto-flow:column; grid-auto-columns:46%; gap:8px; padding:8px; overflow-x:auto; scroll-snap-type:x mandatory; }
.drop-preview:empty{ display:none }
.drop-preview .thumb{ position:relative; scroll-snap-align:start; border-radius:10px; overflow:hidden; aspect-ratio:4/3; background:#000; }
.drop-preview .thumb img{ width:100%; height:100%; object-fit:cover }
.drop-preview .thumb button{ position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center; z-index:3; }
.drop-preview .thumb button [data-lucide]{ width:13px; height:13px }
.caption{
  width:100%; min-height:60px; resize:vertical;
  border:1px solid var(--line); border-radius:12px;
  padding:10px 13px; font-size:14px; font-family:inherit; color:var(--ink);
  outline:none; transition:border-color .15s;
}
.caption:focus{ border-color:var(--teal) }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media(max-width:460px){ .field-row{ grid-template-columns:1fr } }
.field{ display:flex; flex-direction:column; gap:5px }
.field span{ font-size:11.5px; font-weight:600; color:var(--muted) }
.field select,.field input{
  border:1px solid var(--line); border-radius:10px;
  padding:8px 11px; font-size:13.5px; font-family:inherit; color:var(--ink);
  outline:none; background:#fff; transition:border-color .15s;
}
.field select:focus,.field input:focus{ border-color:var(--teal) }
.composer-actions{ display:flex; justify-content:flex-end; gap:10px }

/* ══ BOTONES ══ */
.btn-primary{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--teal); color:#fff;
  padding:10px 18px; border-radius:11px;
  font-size:14px; font-weight:700;
  transition:background .15s,transform .1s;
}
.btn-primary:hover{ background:var(--teal-dark) }
.btn-primary:active{ transform:scale(.97) }
.btn-primary.full{ width:100%; justify-content:center; margin-top:4px }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed }
.btn-ghost{ padding:10px 16px; border-radius:11px; font-size:14px; font-weight:600; color:var(--muted); transition:background .15s; }
.btn-ghost:hover{ background:var(--bg) }

/* ══ FILTROS ══ */
.filtros{
  display:flex; gap:8px;
  overflow:visible;
  padding-bottom:4px; margin-bottom:16px;
}
.filtro{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 15px; border-radius:20px;
  background:var(--card); color:var(--muted);
  font-size:13px; font-weight:600;
  border:1px solid var(--line); transition:all .18s;
}
.filtro [data-lucide]{ width:13px; height:13px; stroke-width:1.75; flex:none }
.filtro:hover{ border-color:var(--teal); color:var(--teal) }
.filtro.active{
  background:var(--teal); color:#fff;
  border-color:var(--teal);
  box-shadow:0 2px 10px rgba(10,147,150,.25);
}
.filtro.active [data-lucide]{ color:#fff }

/* ══ FEED ══ */
.feed{ display:flex; flex-direction:column; gap:18px }
.post{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  animation:rise .35s ease both;
}
@keyframes rise{ from{ opacity:0;transform:translateY(12px) } to{ opacity:1;transform:none } }
.post-head{ display:flex; align-items:center; gap:11px; padding:13px 15px }
.post-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--sand-soft); display:grid; place-items:center; font-size:20px; flex:none;
}
.post-meta{ flex:1; min-width:0 }
.post-author{ font-weight:700; font-size:14px }
.post-sub{ font-size:12px; color:var(--muted) }
.post-tramo{ flex:none; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:var(--teal-soft); color:var(--teal-dark); }
.post-media{ position:relative; background:#000 }
.post-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.post-track::-webkit-scrollbar{ display:none }
.post-track img{ flex:none; width:100%; scroll-snap-align:start; aspect-ratio:1/1; object-fit:cover; }
.post-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.post-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); }
.post-dots span.on{ background:#fff }
.post-count{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.55); color:#fff; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:14px; }
.post-body{ padding:12px 15px 4px }
.post-caption{ font-size:14px; line-height:1.55 }
.post-lugar{ display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:12.5px; color:var(--coral); font-weight:600; }
.post-lugar [data-lucide]{ width:14px; height:14px }
.post-actions{ display:flex; align-items:center; gap:18px; padding:10px 15px 14px; }
.act{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; font-weight:600; transition:color .15s; }
.act:hover{ color:var(--ink) }
.act.liked{ color:#e63946 }
.act.liked [data-lucide]{ fill:#e63946; stroke:#e63946 }
.act-time{ margin-left:auto; color:var(--muted); font-size:12px; font-weight:500 }

/* ══ FEED VACÍO ══ */
.feed-empty{
  text-align:center; color:var(--muted); padding:60px 24px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.feed-empty [data-lucide]{ width:44px; height:44px; color:var(--teal); margin-bottom:6px }
.feed-empty strong{ color:var(--ink); font-size:16px }
.feed-empty span{ font-size:13.5px; max-width:260px }

/* ══════════════════════════════════════════════════════════
   PANEL CONEXIONES (columna derecha)
   ══════════════════════════════════════════════════════════ */
.cx-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.cx-title{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:800; color:var(--ink);
}
.cx-title [data-lucide]{ width:18px; height:18px; color:var(--teal) }
.cx-add{
  width:32px; height:32px; border-radius:50%;
  background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; transition:background .15s;
}
.cx-add:hover{ background:var(--teal); color:#fff }
.cx-add [data-lucide]{ width:16px; height:16px }

/* ── HISTORIAS/NOTAS ── */
.cx-stories-label{
  font-size:11px; font-weight:700; color:var(--muted);
  letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px;
}
.cx-stories{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:10px;
  scrollbar-width:none;
}
.cx-stories::-webkit-scrollbar{ display:none }

/* círculo de historia */
.story-bubble{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; flex:none;
}
.story-ring{
  width:58px; height:58px; border-radius:50%;
  padding:3px;
  background:conic-gradient(var(--teal),var(--sand),var(--teal));
  transition:transform .18s;
}
.story-ring.visto{
  background:conic-gradient(var(--line),var(--line));
}
.story-ring:hover{ transform:scale(1.08) }
.story-inner{
  width:100%; height:100%; border-radius:50%;
  border:2.5px solid var(--card);
  background:var(--teal-soft);
  display:grid; place-items:center;
  font-size:24px; overflow:hidden;
  position:relative;
}
.story-inner img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.story-name{
  font-size:11px; font-weight:600; color:var(--ink);
  max-width:62px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── VISOR DE NOTA (inline en col-right) ── */
.nota-viewer{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:flex-end;
  padding:20px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
}

/* ══ MODAL DE HISTORIA COMPLETA — estilo Instagram vertical ══ */
.historia-modal{
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.92);
  align-items:center; justify-content:center;
  padding:16px;
}
.historia-modal:not([hidden]){ display:flex; }

.hm-card{
  width:100%; max-width:420px;
  height:calc(100vh - 40px); max-height:860px;
  background:#111;
  border-radius:22px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
  display:flex; flex-direction:column;
  position:relative;
  animation:rise .3s ease both;
}

/* media de fondo — cubre todo el card */
.hm-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  z-index:0;
}

/* gradiente para legibilidad */
.hm-card::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.55) 0%,
    transparent 28%,
    transparent 55%,
    rgba(0,0,0,.75) 100%
  );
  pointer-events:none;
}

/* sin media: fondo degradado oscuro */
.hm-card.sin-media{
  background:linear-gradient(160deg,#0d3b45,#072a32);
}
.hm-card.sin-media::before{ display:none }

.hm-progress{
  height:3px; background:rgba(255,255,255,.25);
  position:relative; z-index:2; flex:none;
}
.hm-bar{ height:100%; background:#fff; width:0%; transition:width 5s linear; }

.hm-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 8px; color:#fff;
  position:relative; z-index:2; flex:none;
}
.hm-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--teal-soft); display:grid; place-items:center;
  font-size:22px; border:2px solid rgba(255,255,255,.4); flex:none;
  overflow:hidden;
}
.hm-meta{ flex:1 }
.hm-meta strong{ display:block; font-size:14.5px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5) }
.hm-meta span{ font-size:12px; color:rgba(255,255,255,.7) }

.hm-body{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:16px 24px 12px; text-align:center;
  position:relative; z-index:2;
}

/* solo para historias sin media — centrar */
.hm-card.sin-media .hm-body{
  justify-content:center;
}

.hm-emoji{ font-size:58px; margin-bottom:14px; }
.hm-texto{
  font-size:19px; font-weight:700; color:#fff;
  line-height:1.45; letter-spacing:-.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.hm-tag{
  margin-top:10px; display:inline-block;
  background:rgba(255,255,255,.15); color:rgba(255,255,255,.9);
  font-size:12px; font-weight:600; padding:4px 12px; border-radius:20px;
  backdrop-filter:blur(4px);
}
.hm-foot{
  padding:10px 14px 18px; display:flex; gap:8px;
  position:relative; z-index:2; flex:none;
}
.nv-close{
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff;
  display:grid; place-items:center; margin-left:auto;
  transition:background .15s;
}
.nv-close:hover{ background:rgba(255,255,255,.28) }
.nv-close [data-lucide]{ width:16px; height:16px }
.nv-reply{
  flex:1; background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:22px;
  padding:10px 14px; font-size:13px; font-family:inherit; outline:none;
}
.nv-reply::placeholder{ color:rgba(255,255,255,.5) }
.nv-send{
  width:38px; height:38px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:grid; place-items:center; flex:none;
  transition:background .15s;
}
.nv-send:hover{ background:var(--teal-dark) }
.nv-send [data-lucide]{ width:16px; height:16px }

/* ── SEPARADOR ── */
.cx-sep{ height:1px; background:var(--line); margin:16px 0 }
.cx-contacts-label{
  font-size:11px; font-weight:700; color:var(--muted);
  letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px;
}

/* ── LISTA DE CONTACTOS ── */
.cx-contacts{ list-style:none; display:flex; flex-direction:column; gap:2px }
.cx-contact{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:13px;
  cursor:pointer; transition:background .15s;
}
.cx-contact:hover{ background:var(--teal-soft) }
.cc-avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--sand-soft); display:grid; place-items:center;
  font-size:20px; position:relative;
}
.cc-dot{
  position:absolute; bottom:1px; right:1px;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--card);
  background:var(--line);
}
.cc-dot.online{ background:#22c55e }
.cc-dot.viajando{ background:var(--sand) }
.cc-info{ flex:1; min-width:0 }
.cc-name{ font-size:13.5px; font-weight:700; }
.cc-sub{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-accion{
  flex:none; padding:5px 10px; border-radius:8px;
  background:var(--teal-soft); color:var(--teal);
  font-size:11.5px; font-weight:700; transition:all .15s;
}
.cc-accion:hover{ background:var(--teal); color:#fff }

/* ══ MODAL NOMBRE ══ */
.modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(11,31,36,.55); backdrop-filter:blur(4px);
  place-items:center; padding:20px;
}
.modal:not([hidden]){ display:grid; }
.modal-card{
  background:var(--card); border-radius:22px;
  padding:30px 26px; max-width:360px; width:100%;
  text-align:center; box-shadow:var(--shadow-lg);
  animation:rise .3s ease both;
}
.modal-mark{
  width:58px; height:58px; border-radius:17px; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  display:grid; place-items:center;
}
.modal-mark [data-lucide]{ width:28px; height:28px; color:#fff }
.modal-card h2{ font-size:21px; font-weight:800; margin-bottom:6px }
.modal-card p{ font-size:13.5px; color:var(--muted); margin-bottom:18px }
.modal-card input{
  width:100%; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:15px; font-family:inherit;
  outline:none; text-align:center; transition:border-color .15s;
}
.modal-card input:focus{ border-color:var(--teal) }

/* ══ LOGOUT SIDEBAR ══ */
.snav-logout{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  margin:1px 6px; width:calc(100% - 12px);
  color:var(--muted); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:all .18s; font-family:inherit;
  border:none; background:none; text-align:left;
}
.snav-logout:hover{ background:#fff0f0; color:#e63946 }
.snav-logout:hover .snav-icon [data-lucide]{ color:#e63946 }
@media(max-width:1100px){
  .snav-logout{ justify-content:center; padding:10px; width:calc(100% - 12px) }
  .snav-logout .snav-label{ display:none }
}

/* ══ MODAL LOGIN ══ */
.login-card{ max-width:400px; text-align:left; padding:28px }
.pwd-wrap{
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:10px;
  background:#fff; overflow:hidden; transition:border-color .15s;
}
.pwd-wrap:focus-within{ border-color:var(--teal) }
.pwd-wrap input{
  flex:1; border:none !important; outline:none;
  padding:10px 13px; font-size:14px; font-family:inherit; color:var(--ink);
  background:transparent;
}
.pwd-toggle{
  width:38px; height:38px; flex:none;
  background:none; border:none; cursor:pointer;
  display:grid; place-items:center; color:var(--muted);
  transition:color .15s;
}
.pwd-toggle:hover{ color:var(--teal) }
.pwd-toggle [data-lucide]{ width:16px; height:16px }
.btn-link{
  display:block; text-align:right;
  font-size:12.5px; font-weight:600; color:var(--teal);
  background:none; border:none; cursor:pointer;
  margin:-4px 0 14px; padding:0; font-family:inherit;
  transition:color .15s;
}
.btn-link:hover{ color:var(--teal-dark) }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:10px 18px; border-radius:11px;
  border:1.5px solid var(--teal); color:var(--teal);
  font-size:14px; font-weight:700; background:none;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.btn-outline:hover{ background:var(--teal-soft) }
.login-sep{
  display:flex; align-items:center; gap:10px;
  margin:16px 0 12px; color:var(--muted); font-size:12.5px;
}
.login-sep::before,.login-sep::after{
  content:''; flex:1; height:1px; background:var(--line);
}

/* ══ MODAL LOGOUT CONFIRM ══ */
.logout-card{ max-width:320px; text-align:center }
.logout-icon{
  width:56px; height:56px; border-radius:16px; margin:0 auto 14px;
  background:#fff0f0; display:grid; place-items:center;
}
.logout-icon [data-lucide]{ width:26px; height:26px; color:#e63946 }
.logout-card h2{ font-size:18px; font-weight:800; margin-bottom:6px }
.logout-card p{ font-size:13px; color:var(--muted); margin-bottom:20px }
.logout-actions{ display:flex; gap:10px; justify-content:center }
.btn-danger{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px; border-radius:11px;
  background:#e63946; color:#fff;
  font-size:14px; font-weight:700; border:none;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
.btn-danger:hover{ background:#c1121f }

/* ══ MODAL REGISTRO ══ */
.reg-card{
  max-width:500px; width:100%;
  text-align:left; padding:28px 28px 24px;
  overflow:visible;
}
.reg-header{
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px; padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.reg-logo{
  width:46px; height:46px; border-radius:14px; flex:none;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  display:grid; place-items:center;
}
.reg-logo [data-lucide]{ width:24px; height:24px; color:#fff }
.reg-title{ font-size:20px; font-weight:800; color:var(--ink); margin-bottom:2px }
.reg-sub{ font-size:13px; color:var(--muted) }
.reg-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:0 16px;
}
@media(max-width:480px){ .reg-cols{ grid-template-columns:1fr } }
.req{ color:var(--coral); font-weight:700 }
.reg-btn{ margin-top:6px }
.ep-field input[type="date"]{
  color:var(--muted);
}
.ep-field input[type="date"]:valid{ color:var(--ink) }

/* ══ BANNER MODO LOCAL ══ */
.local-banner{
  background:var(--sand-soft); color:var(--coral);
  border:1px solid #f3d9a8; border-radius:12px;
  padding:9px 14px; font-size:12px; font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.local-banner [data-lucide]{ width:15px; height:15px; flex:none }

/* ══ SNAV AVATAR ICON ══ */
.snav-icon-avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--teal-soft);
  display:grid; place-items:center; font-size:15px;
  border:2px solid var(--line);
  transition:border-color .18s;
  overflow:hidden;
  background-size:cover; background-position:center;
}
.snav-item.active .snav-icon-avatar{ border-color:var(--teal) }
.snav-icon-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% }

/* ══ PERFIL SECTION ══ */
.perfil-section{ animation:rise .3s ease both }

.perfil-portada{
  position:relative; height:200px;
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 60%, var(--sand) 100%);
  background-size:cover; background-position:center;
}
.perfil-portada-btn{
  position:absolute; bottom:12px; right:12px;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.42); color:#fff;
  padding:7px 13px; border-radius:10px;
  font-size:12.5px; font-weight:700; cursor:pointer;
  backdrop-filter:blur(4px); transition:background .15s; border:none; font-family:inherit;
}
.perfil-portada-btn:hover{ background:rgba(0,0,0,.62) }
.perfil-portada-btn [data-lucide]{ width:14px; height:14px }

/* ── BOTON AGREGAR EN TABS ── */
.perfil-tab-add{
  flex:1; display:flex; justify-content:center; align-items:center;
  padding:14px 0; background:none; border:none; cursor:pointer;
  color:var(--teal); border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s; margin-left:auto;
  font-family:inherit;
}
.perfil-tab-add:hover{ color:var(--teal-dark) }
.perfil-tab-add [data-lucide]{ width:20px; height:20px }

/* cuerpo estilo instagram */
.perfil-body{
  display:flex; align-items:flex-start; gap:20px;
  padding:0 20px 20px;
  margin-top:-50px; position:relative; z-index:2;
}
.perfil-avatar-wrap{ position:relative; flex:none }
.perfil-avatar{
  width:96px; height:96px; border-radius:50%;
  border:4px solid var(--card);
  background:var(--teal-soft);
  display:grid; place-items:center;
  font-size:44px; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,60,70,.18);
  background-size:cover; background-position:center;
}
.perfil-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% }
.perfil-avatar-edit{
  position:absolute; bottom:4px; right:4px;
  width:30px; height:30px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  border:2px solid var(--card); transition:background .15s;
}
.perfil-avatar-edit:hover{ background:var(--teal-dark) }
.perfil-avatar-edit input{ display:none }
.perfil-avatar-edit [data-lucide]{ width:13px; height:13px }

.perfil-right{
  flex:1; padding-top:56px;
  display:flex; flex-direction:column; gap:5px;
}
.perfil-username-row{ display:flex; align-items:center; gap:10px }
.perfil-username{ font-size:20px; font-weight:700; color:var(--ink) }
.perfil-settings-btn{
  width:30px; height:30px; border-radius:8px;
  background:var(--bg); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted);
  cursor:pointer; transition:all .15s; flex:none;
}
.perfil-settings-btn:hover{ border-color:var(--teal); color:var(--teal); background:var(--teal-soft) }
.perfil-settings-btn [data-lucide]{ width:16px; height:16px }
.perfil-nombre-display{ font-size:14px; font-weight:600; color:var(--ink) }
.perfil-stats-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:4px }
.perfil-stat{ font-size:13px; color:var(--muted); font-weight:500 }
.perfil-stat strong{ color:var(--ink); font-weight:800 }
.perfil-ciudad-row{
  display:flex; align-items:center; gap:5px;
  font-size:13px; color:var(--teal-dark); font-weight:600; margin-top:2px;
}
.perfil-ciudad-row [data-lucide]{ width:13px; height:13px; color:var(--teal) }

/* ══ MODAL EDITAR PERFIL ══ */
.modal-card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.modal-card-head strong{ font-size:17px; font-weight:800; color:var(--ink) }
.modal-card .nv-close{ background:var(--bg); color:var(--muted) }
.modal-card .nv-close:hover{ background:var(--line); color:var(--ink) }
.ep-field{
  display:flex; flex-direction:column; gap:6px;
  text-align:left; margin-bottom:14px;
}
.ep-field label{
  font-size:11.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;
}
.ep-field input,.ep-field select{
  border:1px solid var(--line); border-radius:10px;
  padding:10px 13px; font-size:14px; font-family:inherit;
  color:var(--ink); outline:none; background:#fff;
  transition:border-color .15s; width:100%; text-align:left;
}
.ep-field input:focus,.ep-field select:focus{ border-color:var(--teal) }
.ep-input-prefix{
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:10px;
  background:#fff; overflow:hidden; transition:border-color .15s;
}
.ep-input-prefix:focus-within{ border-color:var(--teal) }
.ep-input-prefix > span{
  padding:0 10px; color:var(--muted); font-size:14px; font-weight:600;
  border-right:1px solid var(--line);
  display:flex; align-items:center; background:var(--bg);
}
.ep-input-prefix input{
  flex:1; border:none !important; border-radius:0 !important;
  box-shadow:none; outline:none; padding:10px 13px;
  font-size:14px; font-family:inherit; color:var(--ink);
  text-align:left;
}

/* ══ PERFIL GRID DE POSTS ══ */
.perfil-divider{ height:1px; background:var(--line); margin:20px 0 }
.perfil-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:3px;
}
.perfil-grid-item{
  position:relative; aspect-ratio:1/1;
  background:#000; overflow:hidden; cursor:pointer;
}
.perfil-grid-item img,
.perfil-grid-item video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .2s;
}
.perfil-grid-item:hover img,
.perfil-grid-item:hover video{ transform:scale(1.05) }
.perfil-grid-item .gi-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.0);
  display:flex; align-items:center; justify-content:center;
  gap:14px; color:#fff; font-size:14px; font-weight:700;
  transition:background .2s; opacity:0;
}
.perfil-grid-item:hover .gi-overlay{ background:rgba(0,0,0,.38); opacity:1 }
.perfil-grid-item .gi-play{
  position:absolute; top:6px; right:6px;
  color:#fff; opacity:.9;
}
.perfil-grid-item .gi-play [data-lucide]{ width:18px; height:18px }
.perfil-grid-item .gi-multi{
  position:absolute; top:6px; right:6px;
  color:#fff; opacity:.9;
}
.perfil-grid-item .gi-multi [data-lucide]{ width:16px; height:16px }

.perfil-grid-empty{
  grid-column: 1/-1;
  text-align:center; color:var(--muted); padding:40px 24px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.perfil-grid-empty [data-lucide]{ width:36px; height:36px; color:var(--teal); margin-bottom:4px }
.perfil-grid-empty strong{ color:var(--ink); font-size:15px }
.perfil-grid-empty span{ font-size:13px }

@media(max-width:780px){
  .perfil-grid{ grid-template-columns: repeat(3, 1fr); gap:2px }
}

/* ══ CREAR NOTA: selector tipo ══ */
.cn-tipo-wrap{
  display:flex; gap:8px; margin-bottom:18px;
}
.cn-tipo{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px; border-radius:10px; border:2px solid var(--line);
  background:none; cursor:pointer; font-size:.9rem; color:var(--muted);
  transition:all .15s;
}
.cn-tipo [data-lucide]{ width:16px; height:16px }
.cn-tipo.activo{
  border-color:var(--teal); color:var(--teal);
  background:var(--teal-soft); font-weight:600;
}

/* ══ STORY BURBUJA USUARIO ══ */
.story-ring.user-ring{ border-color: var(--teal) }
.story-ring.sin-nota{ border-color: var(--line); border-style: dashed }
.story-bubble{ position: relative }
.story-add-plus{
  position:absolute; top:2px; right:2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--teal); color:#fff;
  font-size:13px; line-height:18px; text-align:center;
  font-weight:700; pointer-events:none;
}

/* ══ PERFIL TABS ══ */
.perfil-tabs{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:0 0 16px;
}
.perfil-tab{
  flex:1; display:flex; justify-content:center; align-items:center;
  padding:14px 0; background:none; border:none; cursor:pointer;
  color:var(--muted); border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.perfil-tab [data-lucide]{ width:20px; height:20px }
.perfil-tab:hover{ color:var(--teal) }
.perfil-tab.activo{ color:var(--teal); border-bottom-color:var(--teal) }

/* ══ FILTRO DROPDOWN ══ */
.filtro-wrap{ position:relative; flex:none }
.filtro-chevron{ width:13px !important; height:13px !important; margin-left:2px; transition:transform .18s }
.filtro-wrap .filtro{ display:inline-flex; align-items:center; gap:6px }
.filtro-wrap.open .filtro{ background:var(--teal); color:#fff; border-color:var(--teal) }
.filtro-wrap.open .filtro [data-lucide]{ color:#fff }
.filtro-wrap.open .filtro-chevron{ transform:rotate(180deg) }
.filtro-dd{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:190px;
  background:#fff;
  border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow-lg);
  z-index:55;
  max-height:260px; overflow-y:auto;
  padding:5px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(10,147,150,.3) transparent;
}
.filtro-dd::-webkit-scrollbar{ width:4px }
.filtro-dd::-webkit-scrollbar-thumb{ background:rgba(10,147,150,.35); border-radius:4px }
.filtro-dd-item{
  display:flex; align-items:center; gap:7px;
  padding:8px 14px; font-size:13px; cursor:pointer;
  color:var(--ink); transition:background .12s;
}
.filtro-dd-item:hover{ background:var(--teal-soft); color:var(--teal-dark) }
.filtro-dd-item.activo{ background:var(--teal-soft); color:var(--teal); font-weight:700 }
.filtro-dd-item [data-lucide]{ width:14px; height:14px; flex:none; color:var(--teal) }
.filtro-dd-all{ font-weight:700; color:var(--teal-dark) }
.filtro-dd-sep{ height:1px; background:var(--line); margin:4px 10px }
.filtro-dd-search-wrap{
  display:flex; align-items:center; gap:0;
  margin:6px 10px 4px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--bg);
  transition:border-color .15s;
  overflow:hidden;
}
.filtro-dd-search-wrap:focus-within{ border-color:var(--teal) }
.filtro-dd-search-wrap [data-lucide]{
  width:13px; height:13px; flex:none;
  color:var(--muted); margin-left:9px;
}
.filtro-dd-search{
  flex:1; border:none; background:transparent;
  padding:7px 10px 7px 6px;
  font-size:12.5px; font-family:inherit; color:var(--ink);
  outline:none;
}
.filtro-dd-search::placeholder{ color:var(--muted) }

/* ══ CIUDAD PICKER ══ */
.ciudad-picker{ position:relative }
.ciudad-search-wrap{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--line); border-radius:10px;
  background:#fff; overflow:hidden; transition:border-color .15s;
}
.ciudad-search-wrap:focus-within{ border-color:var(--teal) }
.ciudad-search-icon{
  width:14px !important; height:14px !important;
  color:var(--muted); flex:none;
  margin-left:10px; pointer-events:none;
}
.ciudad-search{
  flex:1; border:none !important; border-radius:0; background:transparent;
  padding:8px 11px;
  font-size:13.5px; font-family:inherit; color:var(--ink);
  outline:none;
}
.ciudad-search::placeholder{ color:var(--muted) }
.ciudad-dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff;
  border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg);
  z-index:60;
  max-height:230px; overflow-y:auto;
  padding:4px 0 6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(10,147,150,.35) transparent;
}
.ciudad-dropdown::-webkit-scrollbar{ width:4px }
.ciudad-dropdown::-webkit-scrollbar-thumb{ background:rgba(10,147,150,.4); border-radius:4px }
.ciudad-group-label{
  font-size:10px; font-weight:800; letter-spacing:.8px;
  text-transform:uppercase; color:var(--muted);
  padding:8px 14px 4px; pointer-events:none;
  position:sticky; top:0; background:#fff; z-index:1;
}
.ciudad-option{
  padding:7px 14px; font-size:13.5px; cursor:pointer;
  transition:background .12s; color:var(--ink);
}
.ciudad-option:hover{ background:var(--teal-soft); color:var(--teal-dark) }
.ciudad-option.sel{ background:var(--teal-soft); color:var(--teal); font-weight:700 }
.ciudad-empty{
  padding:12px 14px; font-size:13px; color:var(--muted); text-align:center;
}

/* ══ MODAL REGISTRAR VIAJE ══ */
.rv-card{ max-width:440px; text-align:left; overflow:visible }
.rv-drop{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; border:2px dashed var(--line); border-radius:12px;
  background:var(--bg); cursor:pointer; transition:all .15s;
  margin-bottom:6px;
}
.rv-drop:hover{ border-color:var(--teal); background:var(--teal-soft) }
.rv-drop [data-lucide]{ width:24px; height:24px; color:var(--teal); flex:none }
.rv-drop span{ font-size:13.5px; color:var(--muted); font-weight:600 }

/* ══ TOAST ══ */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:all .25s; z-index:500;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
@media(max-width:780px){ .toast{ bottom:80px } }

/* ══ MOBILE BOTTOM NAV ══ */
.mobile-nav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:#fff; border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-around;
  gap:0; box-shadow:0 -4px 20px rgba(0,60,70,.10);
}
@media(max-width:780px){ .mobile-nav{ display:flex } }

.mn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; border-radius:10px; background:none; border:none;
  color:var(--muted); cursor:pointer; transition:color .15s;
  font-family:inherit;
}
.mn-item.active{ color:var(--teal) }
.mn-item.active .mn-icon [data-lucide]{ color:var(--teal) }
.mn-icon{ display:grid; place-items:center; width:24px; height:24px }
.mn-icon [data-lucide]{ width:22px; height:22px; color:var(--muted); stroke-width:1.5; transition:color .15s }
.mn-label{ font-size:10px; font-weight:600; line-height:1 }

/* FAB central */
.mn-fab{
  width:52px; height:52px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff; display:grid; place-items:center;
  border:none; cursor:pointer; margin-bottom:4px;
  box-shadow:0 4px 16px rgba(10,147,150,.45);
  transition:transform .15s, box-shadow .15s;
}
.mn-fab:active{ transform:scale(.92) }
.mn-fab [data-lucide]{ width:24px; height:24px; color:#fff }

/* avatar en móvil nav */
.mn-icon-avatar{
  width:24px; height:24px; border-radius:50%;
  background:var(--teal-soft); display:grid; place-items:center;
  font-size:14px; overflow:hidden; border:1.5px solid var(--line);
}
.mn-item.active .mn-icon-avatar{ border-color:var(--teal) }
.mn-icon-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% }

/* ══ RESPONSIVE MOBILE ══ */
@media(max-width:780px){

  /* padding inferior para el bottom nav */
  .col-center{ padding:12px 14px 90px !important }

  /* filtros: scroll horizontal */
  .filtros{
    overflow-x:auto !important;
    overflow-y:visible;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filtros::-webkit-scrollbar{ display:none }

  /* composer más compacto */
  .composer{ padding:10px }

  /* posts: imagen cuadrada perfecta */
  .post-track img{ aspect-ratio:4/5 }

  /* modal: bottom sheet */
  .modal{ justify-items:center; align-items:flex-end; padding:0; padding-bottom:env(safe-area-inset-bottom) }
  .modal-card{
    border-radius:22px 22px 0 0;
    width:100%; max-width:100%; padding:20px 18px 20px;
    max-height:calc(100vh - 60px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .login-card{ width:100%; max-width:100%; padding:24px 20px }
  .reg-card{ width:100%; max-width:100%; padding:24px 20px }
  .rv-card{ width:100%; max-width:100%; padding:20px }

  /* modal registro: cols a 1 columna */
  .reg-cols{ grid-template-columns:1fr }

  /* botones en row */
  .logout-actions{ flex-direction:row }

  /* perfil body: stack en móvil */
  .perfil-body{ flex-direction:column; align-items:center; gap:10px; margin-top:-40px; padding:0 14px 14px }
  .perfil-right{ padding-top:0; align-items:center; text-align:center; gap:4px }
  .perfil-stats-row{ justify-content:center }
  .perfil-avatar{ width:80px; height:80px; font-size:36px }

  /* historia modal full screen en móvil */
  .historia-modal{ align-items:stretch; justify-content:stretch; padding:0 }
  .hm-card{ max-width:100%; width:100%; height:100vh; max-height:100vh; border-radius:0 }

  /* nota viewer */
  .nota-viewer{ align-items:flex-end; padding:0 }
  .nota-viewer > *{ width:100%; border-radius:22px 22px 0 0 }
}

/* ══════════════════════════════════════════════════════════
   CÁMARA MODAL — pantalla completa estilo Instagram
   ══════════════════════════════════════════════════════════ */
.camara-modal{
  position:fixed; inset:0; z-index:500;
  background:#000;
  flex-direction:column;
}
.camara-modal:not([hidden]){ display:flex }

/* ── visor en vivo ── */
#cam-captura{
  position:relative; flex:1;
  display:flex; flex-direction:column;
  overflow:hidden;
}
#cam-feed{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* barra de grabación (60s) */
.cam-rec-bar{
  position:absolute; top:0; left:0; right:0;
  height:5px; background:rgba(255,255,255,.25); z-index:10;
}
.cam-rec-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--teal),var(--sand));
  transition:width .1s linear;
}

/* controles superiores */
.cam-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
  z-index:10;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);
}
.cam-icon-btn{
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff;
  display:grid; place-items:center; border:none; cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .15s;
}
.cam-icon-btn:hover{ background:rgba(0,0,0,.6) }
.cam-icon-btn [data-lucide]{ width:20px; height:20px }

/* indicador REC */
.cam-rec-dot{
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.5); border-radius:20px;
  padding:5px 12px; color:#fff; font-size:13px; font-weight:700;
  backdrop-filter:blur(4px);
}
.cam-rec-pulse{
  width:10px; height:10px; border-radius:50%;
  background:#e63946;
  animation:rec-pulse .9s infinite;
}
@keyframes rec-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* parte inferior */
.cam-bottom{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center;
  gap:14px;
  padding:20px 24px calc(28px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
  z-index:10;
}
.cam-hint{
  font-size:12.5px; color:rgba(255,255,255,.8);
  font-weight:600; letter-spacing:.2px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.cam-shutter-wrap{ display:flex; align-items:center; justify-content:center }
.cam-shutter{
  width:76px; height:76px; border-radius:50%;
  border:4px solid rgba(255,255,255,.85);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .15s, transform .1s;
  user-select:none; -webkit-user-select:none;
}
.cam-shutter:active{ transform:scale(.92) }
.cam-shutter.grabando{ border-color:var(--teal) }
.cam-shutter-inner{
  width:56px; height:56px; border-radius:50%;
  background:#fff;
  transition:border-radius .2s, width .2s, height .2s, background .15s;
}
.cam-shutter.grabando .cam-shutter-inner{
  border-radius:10px;
  width:34px; height:34px;
  background:var(--teal);
}

/* ── previsualización ── */
#cam-preview-screen{
  flex:1; display:flex; flex-direction:column; position:relative;
}
.cam-preview-media{
  flex:1; position:relative; overflow:hidden;
}
#cam-prev-img,
#cam-prev-vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.cam-retomar-btn{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); left:16px;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(0,0,0,.45); color:#fff;
  padding:8px 14px; border-radius:22px;
  font-size:13px; font-weight:700; border:none; cursor:pointer;
  backdrop-filter:blur(4px); z-index:10;
  transition:background .15s;
}
.cam-retomar-btn:hover{ background:rgba(0,0,0,.7) }
.cam-retomar-btn [data-lucide]{ width:16px; height:16px }

/* barra de tipo */
.cam-tipo-bar{
  display:flex; gap:0;
  background:rgba(0,0,0,.9);
  padding:6px 0 calc(10px + env(safe-area-inset-bottom));
  backdrop-filter:blur(10px);
}
.cam-tipo-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 6px 8px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.7); font-size:11.5px; font-weight:700;
  font-family:inherit; border-top:2.5px solid transparent;
  transition:color .15s, border-color .15s;
}
.cam-tipo-btn:hover{ color:#fff; border-top-color:rgba(255,255,255,.4) }
.cam-tipo-btn [data-lucide]{ width:22px; height:22px; margin-bottom:1px }
.cam-tipo-btn.publicacion-btn:not(:disabled):hover{ border-top-color:var(--teal); color:var(--teal) }
.cam-tipo-btn.historia-btn:not(:disabled):hover{ border-top-color:var(--sand); color:var(--sand) }
.cam-tipo-btn.ways-btn:not(:disabled):hover{ border-top-color:#a855f7; color:#a855f7 }
.cam-tipo-btn:disabled{ opacity:.3; cursor:not-allowed }