/* ============================================================
   ZureMatch - Tema de lujo negro y dorado
   ============================================================ */
:root{
  --bg:#0a0a0a; --bg2:#141414; --card:#1b1b1b; --card2:#232323;
  --gold:#d4af37; --gold2:#b8860b; --gold-soft:#e8c96a;
  --text:#f5f5f5; --muted:#9a9a9a; --line:#2c2c2c;
  --danger:#e05a5a; --ok:#4caf7d; --blue:#4a9fe0;
  --grad-gold:linear-gradient(135deg,#e8c96a,#d4af37 45%,#b8860b);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;height:100dvh}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1a1408 0%,var(--bg) 55%);
  color:var(--text);overflow:hidden;
}
/* Altura dinámica del viewport (dvh): en móvil evita que la barra inferior de
   navegación quede por debajo del área visible cuando la barra del navegador
   está desplegada (p. ej. justo tras "tirar para refrescar"). Con height:100%
   el contenido se veía pero los iconos de abajo no, y había que salir y volver
   a entrar. 100% queda como respaldo para navegadores sin soporte de dvh. */
#app{height:100%;height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;position:relative}
.hidden{display:none!important}
a{color:var(--gold)}
button{font-family:inherit;cursor:pointer}

/* Marca */
.brand{font-weight:800;letter-spacing:.5px}
.brand .z{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Botones */
.btn{border:none;border-radius:30px;padding:13px 22px;font-weight:700;font-size:15px;
  background:var(--grad-gold);color:#0a0a0a;transition:.15s;width:100%}
.btn:active{transform:scale(.98)}
.btn.secondary{background:transparent;color:var(--gold);border:1px solid var(--gold2)}
.btn.ghost{background:var(--card2);color:var(--text)}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.btn.small{width:auto;padding:8px 16px;font-size:13px}
.btn:disabled{opacity:.45}

/* Inputs */
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
input,select,textarea{
  width:100%;background:var(--card);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:12px 14px;font-size:15px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold2)}
textarea{resize:vertical;min-height:90px}
.field-error{border-color:var(--danger)!important}
.err-msg{color:var(--danger);font-size:12px;margin-top:4px}

/* Cabecera de pantallas de auth */
/* padding-top/bottom con env(safe-area-inset-*): en iPhone instalado como app
   (standalone) la barra de estado/notch se superpone al contenido y tapaba los
   botones de idioma de arriba, y el scroll no llegaba a ellos (rebotaba). Con el
   área segura, el contenido arranca por debajo del notch y se puede desplazar.
   -webkit-overflow-scrolling + overscroll-behavior dan un scroll táctil correcto
   en iOS y evitan que el "rebote" del body robe el desplazamiento. */
.auth-wrap{flex:1;display:flex;flex-direction:column;justify-content:flex-start;
  padding:28px;
  padding-top:max(28px, env(safe-area-inset-top));
  padding-bottom:max(28px, env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.logo-big{font-size:44px;text-align:center;font-weight:800;margin-bottom:4px}
.tagline{text-align:center;color:var(--muted);margin-bottom:28px;font-size:14px}
.card-panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px}
.link-row{text-align:center;margin-top:16px;font-size:14px}
.link-row a{cursor:pointer}

/* Pantalla de acceso: en móvil es una sola columna (hero arriba, tarjeta debajo).
   En tablet/ordenador se reparte en dos columnas (ver media query ≥768px). */
.auth-split{display:flex;flex-direction:column;width:100%}
.auth-hero{text-align:center}
.auth-langbar{text-align:center;margin-bottom:10px}
.auth-logo-img{width:100px;height:100px;object-fit:contain;display:block;margin:0 auto 2px;mix-blend-mode:screen}
.auth-pitch{color:var(--muted);line-height:1.5;margin-bottom:14px}
.auth-welcome{font-size:13px;color:#c9c9c9;line-height:1.9;margin-bottom:16px}
.auth-card{margin-top:2px}
.live-badge{display:inline-block;margin:6px 0 4px;padding:5px 13px;border:1px solid var(--gold2);border-radius:20px;background:rgba(212,175,55,.08);color:#d9c48a;font-size:12px;font-weight:600;line-height:1.45}

/* Barra superior */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.topbar .title{font-size:20px;font-weight:800}
.brand-col{display:flex;flex-direction:column;line-height:1.1}
.ver-tag{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--muted);margin-top:2px}
.app-version{text-align:center;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--muted);margin-bottom:20px}
.tier-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;border:1px solid var(--line)}
.tier-bronce{color:#c98a53;border-color:#5a3d28}
.tier-plata{color:#c7cdd6;border-color:#4a5058}
.tier-oro{color:var(--gold);border-color:var(--gold2)}
.tier-diamante{color:#7fd8ff;border-color:#2b6b86;background:rgba(127,216,255,.08)}
.tier-admin{color:#0a0a0a;border-color:var(--gold2);background:var(--grad-gold);font-weight:800}

/* Contenido */
.screen{flex:1;overflow-y:auto;padding:16px;padding-bottom:84px}

/* Navegación inferior */
.nav{position:absolute;bottom:0;left:0;right:0;display:flex;background:var(--bg2);
  border-top:1px solid var(--line);padding:8px 0 max(8px,env(safe-area-inset-bottom))}
.nav button{flex:1;background:none;border:none;color:var(--muted);font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.nav button.active{color:var(--gold)}
.nav .ico{font-size:22px;line-height:1}
.nav .badge{position:absolute;top:-4px;right:22%;background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px}

/* Tarjeta de swipe */
.deck{position:relative;height:66vh;max-height:560px;margin:6px auto}
.swipe-card{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6);
  background-size:cover;background-position:center;will-change:transform}
.swipe-card .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 12%,rgba(0,0,0,.15) 55%,transparent)}
.swipe-card .info{position:absolute;left:0;right:0;bottom:0;padding:20px}
.swipe-card .nm{font-size:26px;font-weight:800}
.swipe-card .sub{color:#ddd;font-size:14px;margin-top:2px}
.swipe-card .bio{color:#cfcfcf;font-size:13px;margin-top:8px;max-height:52px;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{background:rgba(212,175,55,.15);border:1px solid var(--gold2);color:var(--gold-soft);
  font-size:11px;padding:3px 10px;border-radius:20px}
.stamp{position:absolute;top:28px;font-size:30px;font-weight:900;border:4px solid;padding:4px 14px;
  border-radius:12px;opacity:0;transform:rotate(-15deg)}
.stamp.like{left:20px;color:var(--ok);border-color:var(--ok)}
.stamp.nope{right:20px;color:var(--danger);border-color:var(--danger)}
.badge-verify{display:inline-flex;align-items:center;gap:3px;background:rgba(74,159,224,.18);
  border:1px solid var(--blue);color:#8fd0ff;font-size:11px;padding:2px 8px;border-radius:20px;vertical-align:middle}

/* Botones de acción del swipe */
.actions{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:14px}
.act{border:none;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.5);font-size:24px}
.act.pass{width:56px;height:56px;background:#2a2a2a;color:var(--danger)}
.act.later{width:56px;height:56px;background:#2a2a2a;color:#c7cdd6}
.act.like{width:56px;height:56px;background:#2a2a2a;color:var(--ok)}
.act.super{width:46px;height:46px;background:var(--grad-gold);color:#0a0a0a;font-size:18px}
.act.msg{width:56px;height:56px;background:#2a2a2a;color:var(--blue)}
.act.back{width:50px;height:50px;background:#2a2a2a;color:var(--gold)}

/* Listas (matches, chats) */
.list-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);margin-bottom:10px}
.avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--card2);flex:none}
.li-body{flex:1;min-width:0}
.li-name{font-weight:700;display:flex;align-items:center;gap:6px}
.li-sub{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot-online{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}

.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{flex:1;background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:10px;border-radius:12px;font-weight:700}
.tabs button.active{background:rgba(212,175,55,.12);border-color:var(--gold2);color:var(--gold)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mcard{border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);position:relative;aspect-ratio:3/4;background-size:cover;background-position:center}
.mcard .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent 55%)}
.mcard .cap{position:absolute;bottom:0;left:0;right:0;padding:10px}
.mcard .cap .n{font-weight:700;font-size:15px}

/* Chat */
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.bubble{max-width:76%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.35;word-wrap:break-word}
.bubble.them{background:var(--card2);align-self:flex-start;border-bottom-left-radius:4px}
.bubble.me{background:var(--grad-gold);color:#0a0a0a;align-self:flex-end;border-bottom-right-radius:4px}
.bubble .tick{font-size:10px;opacity:.6;margin-left:6px}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:center}
.chat-input input{border-radius:24px}
.chat-input .send{width:46px;height:46px;flex:none;border-radius:50%;border:none;background:var(--grad-gold);color:#0a0a0a;font-size:20px}
.locked{padding:14px;margin:10px;background:rgba(224,90,90,.08);border:1px solid var(--danger);border-radius:14px;color:#ffb4b4;font-size:13px;text-align:center}

/* Planes */
.plan{border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;background:var(--card)}
.plan.featured{border-color:var(--gold2);background:linear-gradient(160deg,rgba(212,175,55,.10),var(--card))}
.plan .price{font-size:30px;font-weight:800}
.plan .price small{font-size:14px;color:var(--muted);font-weight:400}
.plan ul{list-style:none;padding:0;margin:12px 0}
.plan li{padding:5px 0;font-size:14px;color:#ddd}.plan li::before{content:"✓ ";color:var(--gold)}

/* Modales / toast */
.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);background:var(--card2);
  border:1px solid var(--gold2);color:var(--text);padding:12px 18px;border-radius:14px;font-size:14px;
  z-index:50;max-width:90%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.6);pointer-events:none}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;z-index:60;padding:20px}
.modal{background:var(--card);border:1px solid var(--gold2);border-radius:22px;padding:26px;max-width:400px;width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;text-align:center}
.modal .big{font-size:44px}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;margin:24px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.center-msg{text-align:center;color:var(--muted);padding:40px 20px}
.photo-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.photo-thumbs .t{width:72px;height:72px;border-radius:10px;object-fit:cover;position:relative;background:var(--card2)}
.photo-thumbs .rm{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;border:none;border-radius:50%;width:22px;height:22px}
.seg{display:flex;gap:8px}.seg button{flex:1;padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--text)}
.seg button.on{border-color:var(--gold2);background:rgba(212,175,55,.12);color:var(--gold)}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;gap:10px}.row>*{flex:1}

/* Interés seleccionado (feedback visual al tocar) */
.int-pick{transition:.12s}
.int-pick.on{background:var(--grad-gold);color:#0a0a0a;border-color:var(--gold);font-weight:700}
.pk-single.on,.pk-multi.on{background:var(--grad-gold);color:#0a0a0a;border-color:var(--gold);font-weight:700}

/* Selector de zonas (provincias donde ver perfiles) */
.zone-pick{transition:.12s}
.zone-pick.on{background:var(--grad-gold);color:#0a0a0a;border-color:var(--gold);font-weight:700}
.zone-all{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;margin:2px 0 4px}
.zone-all input{width:auto;margin:0;flex:none}
.zone-search{margin:6px 0 8px}
.zone-box{max-height:190px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px;border:1px solid var(--gold2);border-radius:12px}
.modal .zone-box{text-align:left}
.modal .zone-all{justify-content:flex-start;text-align:left}
.com-pick{transition:.12s}
.com-pick.on{background:var(--grad-gold);color:#0a0a0a;border-color:var(--gold);font-weight:700}
.com-box{max-height:190px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px;border:1px solid var(--gold2);border-radius:12px}
.com-search{margin:6px 0 8px}

/* Ajustes de búsqueda: selector de modo */
.mode-row{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.mode-btn{flex:1 1 auto;min-width:88px;padding:9px 6px;border-radius:12px;cursor:pointer;
  background:#1c1c1c;border:1px solid var(--gold2);color:var(--gold-soft);font-size:13px;font-weight:600}
.mode-btn.on{background:var(--grad-gold);color:#0a0a0a;border-color:var(--gold)}
.mode-panel{margin-bottom:4px}
.km-row{display:flex;flex-wrap:wrap;gap:6px}
.km-btn{flex:1 1 auto;min-width:60px;padding:9px 6px;border-radius:12px;cursor:pointer;
  background:#1c1c1c;border:1px solid var(--gold2);color:var(--gold-soft);font-size:13px;font-weight:600}
.km-btn.on{background:var(--grad-gold);color:#0a0a0a;border-color:var(--gold)}
.check-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;margin:6px 0 2px;font-weight:400}
.check-row input{width:auto;margin:0;flex:none}
.modal .com-box{text-align:left}

/* Fix scroll en móvil: establecer contenedor de scroll correcto */
#root{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;width:100%}
.screen{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.auth-wrap{min-height:0}

/* Altura dinámica de viewport: evita que el scroll se congele al cerrar el teclado en móvil */
#app{height:100dvh}

/* ============================================================
   Responsive: la web detecta el ancho de pantalla y se adapta
   · Móvil (por defecto): pantalla completa con barra de navegación abajo
     (esta versión es la que se usará también en las futuras apps).
   · Tablet / Ordenador: DASHBOARD — la navegación pasa a un MENÚ LATERAL
     izquierdo y el contenido ocupa un área amplia y elegante a la derecha.
   ============================================================ */

/* La marca del menú lateral: oculta en móvil, visible solo en el dashboard. */
.nav-brand{display:none}

@media (min-width:600px) and (max-width:767px){
  /* Móviles grandes en horizontal: columna algo más ancha (sigue con barra abajo). */
  #app{max-width:620px}
  .deck{height:62vh;max-height:600px}
}

@media (min-width:768px){
  /* La app se dispone en fila: menú lateral + contenido. */
  #app{max-width:1180px; margin:0 auto; flex-direction:row}

  /* La barra inferior se convierte en un menú lateral vertical. */
  #nav{
    position:static; order:-1;                 /* a la izquierda */
    width:224px; flex:none; height:100%;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
    border-top:none; border-right:1px solid var(--line);
    background:var(--bg2); padding:16px 12px max(16px,env(safe-area-inset-bottom));
  }
  .nav-brand{
    display:block; font-size:22px; font-weight:800; letter-spacing:.5px;
    padding:6px 12px 16px; margin-bottom:6px; border-bottom:1px solid var(--line);
  }
  #nav button{
    flex:none; flex-direction:row; justify-content:flex-start; align-items:center;
    gap:12px; padding:12px 14px; border-radius:12px; font-size:15px; font-weight:600;
    text-align:left;
  }
  #nav button .ico{font-size:20px}
  #nav button.active{background:var(--card2)}
  #nav .badge{position:static; margin-left:auto; top:auto; right:auto}

  /* Área de contenido: ocupa el resto, con su propio scroll y ancho cómodo. */
  #root{flex:1 1 auto; min-width:0; height:100%}
  .topbar{padding:16px 26px}
  .screen{max-width:960px; width:100%; margin:0 auto; padding:22px 26px 30px}
  .deck{height:min(66vh,600px); max-width:520px; margin:8px auto}
  .actions{max-width:520px; margin:14px auto 0}

  /* Pantalla de acceso en tablet/ordenador: dos columnas centradas en la pantalla,
     hero (marca + mensaje) a la izquierda y tarjeta de acceso a la derecha. */
  .auth-wrap{max-width:none; margin:0 auto; justify-content:center; align-items:center}
  .auth-split{flex-direction:row; align-items:center; gap:48px;
    max-width:900px; margin:0 auto}
  .auth-hero{flex:1 1 0; min-width:0; text-align:left}
  .auth-hero .auth-langbar{text-align:left}
  .auth-hero .auth-logo-img{width:120px;height:120px;margin:0 0 8px}
  .auth-hero .logo-big{text-align:left;font-size:52px}
  .auth-hero .app-version{text-align:left}
  .auth-hero .auth-pitch{font-size:16px;line-height:1.6;max-width:420px}
  .auth-hero .auth-pitch span{font-size:15px!important}
  .auth-hero .auth-welcome{font-size:15px;text-align:left}
  .auth-card{flex:none;width:390px;margin-top:0}
  .auth-foot{max-width:900px;margin-left:auto;margin-right:auto}
}

/* Ordenador grande: un poco más de aire. */
@media (min-width:1200px){
  #nav{width:252px}
  .screen{max-width:1040px}
}