/* ============================================================
   VIAJANDO CON DAVE — v6 "Spotify × TikTok"
   Pure dark · Neon accents · App energy · Zero line icons
   ============================================================ */
:root{
  --bg:#121212;
  --card:#181818;
  --card-hi:#282828;
  --card-glow:#333;
  --white:#fff;
  --gray:#b3b3b3;
  --dim:#727272;
  --dark:#0a0a0a;

  --pink:#FE2C55;
  --green:#1DB954;
  --blue:#4a90ff;
  --orange:#ff7b00;

  --c-rest:#ff8c32;--c-str:#FE2C55;--c-par:#1DB954;--c-zoo:#4a90ff;
  --c-fin:#e8b44f;--c-caf:#facc15;--c-bar:#a78bfa;--c-htl:#2dd4bf;
  --c-ply:#38bdf8;--c-mus:#818cf8;

  --r:20px;--r-sm:14px;--r-pill:999px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --spring:cubic-bezier(.175,.885,.32,1.275);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Skip to content link */
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:#000;padding:.5rem 1rem;z-index:9999;transition:top .2s}
.skip-link:focus{top:0}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--white);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--white);text-decoration:none;transition:.2s}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit;border:none;outline:none;background:none}
button{cursor:pointer}
.w{width:100%;max-width:1300px;margin:0 auto;padding:0 24px}

/* ══ NAV ══ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(18,18,18,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:0;
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.7)}

.nav-row{
  display:flex;align-items:center;
  gap:16px;height:64px;
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.nav-av{width:36px;height:36px;border-radius:50%}
.nav-brand span{font-size:.88rem;font-weight:800;white-space:nowrap}

.nav-search{
  flex:1;max-width:500px;
  position:relative;
}
/* Lucide icon defaults */
[data-lucide]{width:18px;height:18px;stroke-width:2;flex-shrink:0}
.c [data-lucide],.cb [data-lucide]{width:16px;height:16px}
.btn-donate [data-lucide],.foot-donate [data-lucide]{width:16px;height:16px}
.stat [data-lucide]{width:14px;height:14px;opacity:.6}
.card-cat [data-lucide]{width:13px;height:13px}

.nav-search-ico{
  position:absolute;left:16px;top:50%;translate:0 -50%;
  width:17px!important;height:17px!important;
  color:var(--dim);pointer-events:none;
}
.nav-search input{
  width:100%;height:44px;
  padding:0 16px 0 42px;
  background:var(--card-hi);
  border-radius:var(--r-pill);
  color:var(--white);font-size:.85rem;
  transition:.2s;
}
.nav-search input::placeholder{color:var(--dim)}
.nav-search input:focus{
  background:var(--card-glow);
  box-shadow:0 0 0 2px var(--pink);
}

.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}

.nav-sort{
  height:40px;padding:0 28px 0 14px;
  background:var(--card-hi);
  border-radius:var(--r-pill);
  color:var(--gray);font-size:.78rem;font-weight:600;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6 0 0h10z' fill='%23727272'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:.2s;
}
.nav-sort:focus{box-shadow:0 0 0 2px var(--pink)}

.btn-donate{
  height:40px;padding:0 20px;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--pink);color:#fff;
  font-size:.78rem;font-weight:800;
  border-radius:var(--r-pill);
  transition:all .25s var(--spring);
}
.btn-donate:hover{
  transform:scale(1.05);
  box-shadow:0 0 24px rgba(254,44,85,.4);
}

/* Category pills */
.cats{
  display:flex;gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:12px 0 14px;
  position:relative;
}
.cats::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2rem;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none}
.cats::-webkit-scrollbar{display:none}

.c{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px 20px;
  border-radius:var(--r-pill);
  font-size:.8rem;font-weight:700;
  white-space:nowrap;
  background:var(--card-hi);
  color:var(--gray);
  transition:all .2s var(--ease);
  user-select:none;
  min-height:42px;
}
.c:hover{background:var(--card-glow);color:var(--white)}
.c.active{background:var(--white);color:#000}
.c[data-cat="restaurante"].active{background:var(--c-rest);color:#000}
.c[data-cat="street"].active{background:var(--c-str);color:#fff}
.c[data-cat="parque"].active{background:var(--c-par);color:#000}
.c[data-cat="zoologico"].active{background:var(--c-zoo);color:#fff}
.c[data-cat="finca"].active{background:var(--c-fin);color:#000}
.c[data-cat="cafeteria"].active{background:var(--c-caf);color:#000}
.c[data-cat="bar"].active{background:var(--c-bar);color:#fff}
.c[data-cat="hotel"].active{background:var(--c-htl);color:#000}
.c[data-cat="playa"].active{background:var(--c-ply);color:#000}
.c[data-cat="museo"].active{background:var(--c-mus);color:#fff}

/* ══ STATS ROW ══ */
.stats-row{
  display:flex;gap:16px;flex-wrap:wrap;
  padding:8px 24px 16px;
}
.stat{
  font-size:.78rem;color:var(--dim);
}
.stat strong{color:var(--white);font-weight:700}

/* ══ GRID ══ */
.grid{
  display:grid;grid-template-columns:1fr;
  gap:20px;padding:8px 0 80px;
}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr);gap:24px}}

/* ══ CARD ══ */
.card{
  background:var(--card);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .3s var(--spring),box-shadow .3s;
  opacity:0;animation:up .45s var(--ease) forwards;
}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}

/* Image */
.card-img{
  position:relative;width:100%;
  aspect-ratio:16/9;
  background:var(--card-hi);overflow:hidden;
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-img img{transform:scale(1.08)}
.card-empty{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;
  background:linear-gradient(135deg,var(--card-hi),var(--card));
}

/* Badge */
.badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--pink);color:#fff;
  font-size:.6rem;font-weight:800;
  padding:5px 14px;border-radius:var(--r-pill);
  letter-spacing:.08em;text-transform:uppercase;
}

/* Rating — pill on image */
.card-rate{
  position:absolute;bottom:12px;right:12px;z-index:2;
  font-size:.9rem;font-weight:800;
  padding:6px 14px;border-radius:var(--r-pill);
  line-height:1;
}
.r-gold{background:var(--green);color:#000}
.r-orange{background:var(--orange);color:#000}
.r-red{background:var(--pink);color:#fff}
.r-pending{background:var(--card-hi);color:var(--dim);font-size:.72rem;font-weight:700}

/* Body */
.card-body{padding:18px 20px 22px}

/* Category */
.card-cat{
  display:inline-block;
  font-size:.68rem;font-weight:700;
  padding:4px 12px;border-radius:var(--r-pill);
  margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.04em;
}
.cat-restaurante{background:rgba(255,140,50,.15);color:var(--c-rest)}
.cat-street{background:rgba(254,44,85,.12);color:var(--c-str)}
.cat-parque{background:rgba(29,185,84,.12);color:var(--c-par)}
.cat-zoologico{background:rgba(74,144,255,.12);color:var(--c-zoo)}
.cat-finca{background:rgba(232,180,79,.12);color:var(--c-fin)}
.cat-cafeteria{background:rgba(250,204,21,.12);color:var(--c-caf)}
.cat-bar{background:rgba(167,139,250,.12);color:var(--c-bar)}
.cat-hotel{background:rgba(45,212,191,.1);color:var(--c-htl)}
.cat-playa{background:rgba(56,189,248,.1);color:var(--c-ply)}
.cat-museo{background:rgba(129,140,248,.1);color:var(--c-mus)}

/* Name */
.card-name{
  font-size:1.3rem;font-weight:800;
  line-height:1.15;margin-bottom:6px;
  letter-spacing:-.02em;
}

/* Meta */
.card-meta{
  display:flex;gap:8px;align-items:center;
  font-size:.76rem;color:var(--dim);
  margin-bottom:14px;
}
.card-meta .d{width:4px;height:4px;border-radius:50%;background:var(--dim)}

/* Price */
.card-price{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.8rem;font-weight:700;
  color:var(--green);
  background:rgba(29,185,84,.1);
  padding:8px 18px;border-radius:var(--r-pill);
  margin-bottom:14px;
}

/* Quote */
.card-q{
  font-size:.86rem;color:var(--gray);
  font-style:italic;line-height:1.5;
  margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}

/* Buttons */
.card-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cb{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;padding:11px 20px;
  border-radius:var(--r-pill);
  font-size:.76rem;font-weight:700;
  min-height:44px;white-space:nowrap;
  transition:all .2s var(--ease);
}
.cb-maps{background:var(--card-hi);color:var(--gray)}
.cb-maps:hover{background:var(--green);color:#000}
.cb-vid{background:rgba(254,44,85,.1);color:var(--pink)}
.cb-vid:hover{background:var(--pink);color:#fff}
.cb-more{margin-left:auto;color:var(--dim);padding:11px 14px;font-size:.72rem}
.cb-more:hover{color:var(--white);background:var(--card-hi);border-radius:var(--r-pill)}

/* Notas */
.card-notas{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.card-notas.open{max-height:320px;padding-top:16px;margin-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.n-lbl{font-size:.62rem;font-weight:800;color:var(--pink);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.n-txt{font-size:.82rem;color:var(--gray);line-height:1.65}

/* Loading/Empty */
.loading,.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:100px 20px;text-align:center}
.loader{width:28px;height:28px;border:3px solid var(--card-hi);border-top-color:var(--pink);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{color:var(--dim)}
.e-icon{font-size:3.5rem}
.e-title{font-size:1.2rem;font-weight:800}
.e-text{font-size:.85rem;color:var(--dim);max-width:340px}

/* ══ FOOTER ══ */
.foot{border-top:1px solid rgba(255,255,255,.06);padding:48px 0;margin-top:20px}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:24px}
.foot-logo{width:110px;height:auto;opacity:.9}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.foot-links a{
  font-size:.82rem;font-weight:600;
  color:var(--dim);
  padding:8px 16px;
  border-radius:var(--r-pill);
  transition:all .2s;
}
.foot-links a:hover{color:var(--white);background:var(--card-hi)}
.foot-email{
  font-size:.82rem;font-weight:600;color:var(--dim);
  padding:8px 16px;border-radius:var(--r-pill);
  background:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .2s;font-family:inherit;
}
.foot-email [data-lucide]{width:14px;height:14px}
.foot-email:hover{color:var(--white);background:var(--card-hi)}
.foot-email.copied{color:var(--green)}
.foot-donate{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;font-weight:800;
  color:#fff;background:var(--pink);
  padding:14px 36px;border-radius:var(--r-pill);
  transition:all .3s var(--spring);
}
.foot-donate:hover{
  transform:scale(1.05);
  box-shadow:0 0 30px rgba(254,44,85,.35);
}
.foot-copy{font-size:.72rem;color:var(--dim)}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{background:var(--card);border-radius:var(--r);padding:40px 32px;width:100%;max-width:380px;text-align:center}
.login-logo{width:100px;height:auto;margin:0 auto 16px}
.login-title{font-size:1.3rem;font-weight:800;margin-bottom:4px}
.login-sub{font-size:.82rem;color:var(--dim);margin-bottom:24px}
.login-badge{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);background:rgba(254,44,85,.1);padding:4px 12px;border-radius:var(--r-pill);display:inline-block;margin-bottom:20px}
.login-input{width:100%;padding:13px 16px;background:var(--card-hi);border-radius:var(--r-sm);color:var(--white);font-size:1rem;margin-bottom:14px;text-align:center;min-height:48px;transition:.2s}
.login-input:focus{box-shadow:0 0 0 2px var(--pink)}
.login-btn{width:100%;padding:13px;background:var(--pink);color:#fff;font-weight:800;border-radius:var(--r-pill);font-size:.95rem;min-height:48px;transition:.2s}
.login-btn:hover{box-shadow:0 0 24px rgba(254,44,85,.3)}
.login-error{color:var(--pink);font-size:.85rem;margin-top:12px;display:none}
.login-error.show{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.shake{animation:shake .4s ease}

.admin-panel{display:none;min-height:100vh}.admin-panel.active{display:flex}
.admin-topbar{position:fixed;top:0;left:0;right:0;height:56px;background:rgba(18,18,18,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:200}
.admin-topbar-brand{display:flex;align-items:center;gap:10px}
.admin-topbar-logo{width:32px;height:32px;border-radius:50%}
.admin-topbar-title{font-size:.9rem;font-weight:700}
.admin-topbar-actions{display:flex;gap:8px;align-items:center}
.admin-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);font-size:.78rem;font-weight:600;min-height:36px;white-space:nowrap;transition:.2s}
.admin-btn-primary{background:var(--pink);color:#fff}
.admin-btn-primary:hover{box-shadow:0 0 16px rgba(254,44,85,.3)}
.admin-btn-ghost{background:var(--card-hi);color:var(--gray)}
.admin-btn-ghost:hover{color:var(--white)}
.admin-btn-danger{background:rgba(254,44,85,.1);color:var(--pink)}
.admin-btn-danger:hover{background:rgba(254,44,85,.2)}

.admin-layout{display:flex;margin-top:56px;min-height:calc(100vh - 56px)}
.admin-sidebar{width:280px;background:var(--card);border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;flex-shrink:0;padding:12px 0}
.sidebar-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);padding:8px 16px}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:.2s;border-left:3px solid transparent}
.sidebar-item:hover{background:var(--card-hi)}
.sidebar-item.active{background:var(--card-hi);border-left-color:var(--pink)}
.sidebar-item-emoji{font-size:1.1rem;flex-shrink:0}
.sidebar-item-info{flex:1;min-width:0}
.sidebar-item-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-item-meta{font-size:.7rem;color:var(--dim)}
.sidebar-item .draft-badge{font-size:.6rem;font-weight:700;background:rgba(254,44,85,.1);color:var(--pink);padding:1px 6px;border-radius:var(--r-pill);text-transform:uppercase}

.admin-main{flex:1;padding:24px;overflow-y:auto;max-width:800px}
.form-title{font-size:1.3rem;font-weight:800;margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 12px;background:var(--card-hi);border-radius:var(--r-sm);color:var(--white);font-size:.9rem;min-height:44px;transition:.2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{box-shadow:0 0 0 2px var(--pink)}
.form-textarea{resize:vertical;min-height:80px;line-height:1.5}
.form-select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23727272'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}

.rating-control{display:flex;align-items:center;gap:10px}
.rating-slider{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;background:var(--card-hi);outline:none}
.rating-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--green);cursor:pointer}
.rating-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--green);cursor:pointer;border:none}
.rating-display{font-size:1.1rem;font-weight:800;color:var(--green);min-width:40px;text-align:center}

.toggle-wrap{display:flex;align-items:center;gap:10px}
.toggle-switch{position:relative;width:48px;height:28px;cursor:pointer}
.toggle-switch input{display:none}
.toggle-track{position:absolute;inset:0;background:var(--card-hi);border-radius:14px;transition:.2s}
.toggle-switch input:checked+.toggle-track{background:var(--green)}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:.2s}
.toggle-switch input:checked+.toggle-track::after{transform:translateX(20px)}
.toggle-label-text{font-size:.85rem;color:var(--gray)}

.upload-area{border:2px dashed rgba(255,255,255,.1);border-radius:var(--r-sm);padding:24px;text-align:center;cursor:pointer;transition:.2s;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.upload-area:hover{border-color:var(--pink);background:rgba(254,44,85,.03)}
.upload-area.has-image{padding:8px}
.upload-area .upload-icon{font-size:1.5rem}
.upload-area .upload-text{font-size:.8rem;color:var(--dim)}
.upload-preview{max-width:100%;max-height:200px;border-radius:8px;object-fit:contain}
.upload-input{display:none}
.form-actions{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap}

.toast-container{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--r-sm);font-size:.85rem;font-weight:600;animation:toastIn .3s var(--spring);max-width:340px}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.toast.success{background:rgba(29,185,84,.15);color:var(--green)}
.toast.error{background:rgba(254,44,85,.15);color:var(--pink)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--card);border-radius:var(--r);padding:28px;max-width:400px;width:100%;text-align:center}
.modal-card .modal-title{font-size:1.1rem;font-weight:800;margin-bottom:8px}
.modal-card .modal-text{font-size:.9rem;color:var(--gray);margin-bottom:20px}
.modal-actions{display:flex;gap:10px;justify-content:center}

@media(max-width:768px){
  .nav-row{flex-wrap:wrap;height:auto;padding:10px 0;gap:10px}
  .nav-brand{order:1}.nav-actions{order:2;margin-left:auto}
  .nav-search{order:3;flex-basis:100%;max-width:100%}
  .stats-row{display:none}
  .admin-sidebar{position:fixed;top:56px;left:0;bottom:0;width:100%;max-width:300px;transform:translateX(-100%);transition:.3s;z-index:150;box-shadow:4px 0 24px rgba(0,0,0,.5)}
  .admin-sidebar.open{transform:translateX(0)}
  .admin-sidebar-backdrop{display:none;position:fixed;inset:0;top:56px;background:rgba(0,0,0,.5);z-index:140}
  .admin-sidebar-backdrop.open{display:block}
  .admin-main{padding:16px}
  .form-grid{grid-template-columns:1fr}
  .admin-menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--dim);font-size:1.2rem}
}
@media(min-width:769px){.admin-menu-toggle{display:none}.admin-sidebar-backdrop{display:none!important}}
@media(max-width:480px){
  .card-name{font-size:1.1rem}
  .c{padding:8px 16px;font-size:.75rem}
  .foot-links{gap:10px}
  .foot-links a,.foot-email{padding:6px 12px;font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}}