:root {
  --azul: #0d6e8a;
  --azul-oscuro: #0a3347;
  --cian: #1b9fc0;
  --arena: #f6f8fa;
  --texto: #12212a;
  --gris: #5d7380;
  --tarjeta: #ffffff;
  --sombra: 0 1px 2px rgba(10, 51, 71, 0.06), 0 6px 20px rgba(10, 51, 71, 0.08);
  --radio: 14px;
  --verde: #21a867;
  --naranja: #e8830c;
  --rojo: #e0352f;
  --borde: #e3eaf0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: linear-gradient(180deg, #d4eef7 0%, #e8f4f9 30%, #f0f8fb 100%);
  background-attachment: fixed;
  color: var(--texto);
  min-height: 100vh;
  padding-bottom: 84px; /* espacio para el menú inferior */
}

/* ------- Cabecera ------- */
#app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 3%, #0a3347 100%);
  color: #fff;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(10, 51, 71, 0.25);
}
.logo { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.3px; background: none; border: 0; color: #fff; display: inline-flex; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.logo:hover { background: rgba(255,255,255,0.12); }
.logo-img { height: 52px; width: auto; vertical-align: middle; }
.menu-flecha { margin-left: 6px; font-size: 0.8rem; color: var(--azul); }
.menu-app {
  position: absolute;
  top: 56px;
  left: 10px;
  background: #fff;
  color: var(--azul-oscuro);
  border: 1px solid #d9e4e8;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(10, 51, 71, 0.18);
  min-width: 210px;
  z-index: 40;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.menu-item {
  text-align: left;
  background: none;
  border: 0;
  padding: 11px 14px;
  font-size: 0.95rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--azul-oscuro);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-item:hover { background: #eef6f9; color: var(--azul); }
.header-user { font-size: 0.85rem; opacity: 0.95; position: relative; }
.header-user .btn-login { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 6px 12px; border-radius: 18px; cursor: pointer; font-size: 0.85rem; }
.header-user .btn-login:hover { background: rgba(255,255,255,0.22); }

/* User menu dropdown */
.user-menu-wrap { position: relative; display: inline-block; }
.user-menu-btn { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 6px 12px; border-radius: 18px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }
.user-menu-btn:hover { background: rgba(255,255,255,0.22); }
.user-coins { background: rgba(255,215,0,0.25); border: 1px solid rgba(255,215,0,0.5); color: #ffd700; padding: 2px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; }
.user-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); min-width: 160px; z-index: 200; overflow: hidden; }
.dropdown-item { display: block; padding: 10px 16px; color: #1a3a5c; text-decoration: none; font-size: 0.88rem; font-weight: 500; border-bottom: 1px solid #f0f0f0; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: #f0f7ff; }
.dropdown-exit { color: #c0392b; }

/* ------- Contenido ------- */
main { padding: 16px 14px; max-width: 720px; margin: 0 auto; }
.hidden { display: none !important; }

h2.seccion { font-size: 1.15rem; margin: 6px 0 12px; color: var(--azul-oscuro); font-weight: 700; }
h3 { font-size: 1.02rem; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* ------- Zona del día (portada) ------- */
.hero {
  background: linear-gradient(150deg, #0a3347 0%, #0d6e8a 55%, #1b9fc0 100%);
  color: #fff;
  border-radius: var(--radio);
  padding: 24px 18px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.16), transparent 70%);
}
.hero .etiqueta { text-transform: uppercase; letter-spacing: 1.6px; font-size: 0.7rem; opacity: 0.85; font-weight: 600; }
.hero h1 { font-size: 1.55rem; margin: 6px 0; letter-spacing: -0.01em; }
.hero .sub { font-size: 0.95rem; opacity: 0.95; margin-top: 4px; }

#sumario { list-style: none; }
#sumario .fila-spot {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
#sumario .fila-spot:hover { transform: translateY(-2px); }
#sumario .fila-spot .emoji { font-size: 1.7rem; }
#sumario .fila-spot .info { flex: 1; }
#sumario .fila-spot .info b { display: block; font-size: 1rem; }
#sumario .fila-spot .info small { color: var(--gris); }
.barra-punt { height: 8px; background: #e3eef0; border-radius: 6px; overflow: hidden; margin-top: 6px; }
.barra-punt > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--verde), #ffd84d, var(--naranja)); }

/* ------- Score / chips ------- */
.chip { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--azul); }
.chip-grande { display: inline-block; padding: 8px 16px; border-radius: 24px; font-size: 1.5rem; font-weight: 800; color: #fff; }
.chip-gris { background: #8ca0a8; }
.chip-geo { background: #e3f5e8; color: var(--azul-oscuro); border-left: 4px solid var(--verde); font-size: 0.9rem; line-height: 1.4; }


/* ------- Tarjetas Fin de semana (portada) ------- */
.fin-card { cursor: pointer; }
.fin-card:active { transform: scale(0.99); }
.fin-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fin-titulo { font-size: 1.05rem; }
.fin-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.fin-num { background: #f0f7fa; border-radius: 10px; padding: 6px 4px; text-align: center; }
.fin-num b, .fin-num { font-size: 1.2rem; font-weight: 800; color: var(--azul-oscuro); line-height: 1.1; }
.fin-num small { display: block; font-size: 0.65rem; font-weight: 600; color: var(--gris); margin-top: 2px; }
.fin-num small .racha-amarilla { color: #f1c40f !important; font-weight: 800; }
.fin-num.dir-cel { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fin-fuente { font-size: 0.66rem; color: var(--gris); margin-bottom: 6px; }
.fin-horas { display: flex; flex-wrap: wrap; gap: 4px; }
.h-viento { background: #f4f8fa; border-radius: 6px; padding: 2px 5px; font-size: 0.66rem; color: var(--gris); display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 34px; }
.h-viento b { font-weight: 800; }
.h-viento i { font-style: normal; font-size: 0.58rem; font-weight: 700; }
.h-viento i.rafa { font-weight: 800; }
.h-viento.noche { opacity: 0.65; }

/* Colores del viento (como WindGuru) */
.w-0 { background: #e8edf0; color: #556; }
.w-1 { background: #a0d8ef; color: #045; }
.w-2 { background: #40c0cb; color: #fff; }
.w-3 { background: #4caf50; color: #fff; }
.w-4 { background: #f5a623; color: #fff; }
.w-5 { background: #e74c3c; color: #fff; }

/* ------- Tabla de previsión ------- */
.tabla-wrap { overflow-x: auto; border-radius: var(--radio); }
.tabla-semanal { margin: 0; }
.tabla-semanal table { min-width: 520px; }
table.prevision { width: 100%; border-collapse: collapse; font-size: 0.82rem; background: #fff; }
table.prevision th, table.prevision td { padding: 7px 8px; text-align: center; vertical-align: middle; white-space: nowrap; }
table.prevision thead th { background: var(--azul); color: #fff; position: sticky; top: 0; font-size: 0.78rem; }
table.prevision tbody tr:nth-child(even) { background: #f2fbfd; }
table.prevision td.vel { font-weight: 800; border-radius: 6px; }
table.prevision td.racha-col { font-weight: 800; border-radius: 6px; }
.dia-nom { font-weight: 700; color: var(--azul-oscuro); text-align: left !important; min-width: 50px; }
.dia-nom small { color: var(--gris); font-weight: 400; }
.dia-hoy { background: #e0f7fa !important; }
td.vacio { color: #ccc; }
.fila-hoy { background: #e0f7fa !important; }

/* ------- Quedadas ------- */
.meetup { border-left: 5px solid var(--cian); }
.meetup .titulo { font-size: 1.05rem; font-weight: 700; }
.meetup .meta { color: var(--gris); font-size: 0.88rem; margin: 4px 0 8px; }

/* ------- Botones y formularios ------- */
button.principal, .btn {
  background: var(--azul);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
button.principal:hover { background: var(--azul-oscuro); }
button.secundario { background: #eef5f8; color: var(--azul); border: 1.5px solid #bcd7e0; }
button.danger { background: #fdecec; color: var(--rojo); border: 1.5px solid #eec9c9; }

input, textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #d7e1e8;
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 12px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s;
}
input:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(13,110,138,0.12); }
label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 5px; color: var(--azul-oscuro); }

/* ------- Vídeos ------- */
.video-card { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 16px; background: #fff; }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
.video-card .info { padding: 12px 14px; }
.video-card .info b { font-size: 0.98rem; }
.video-card .info small { color: var(--gris); display: block; margin-top: 3px; }

/* ------- Fotos / Instagram ------- */
.foto-pro { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); margin-bottom: 10px; text-decoration: none; color: inherit; }
.foto-pro .avatar { font-size: 2.2rem; }
.foto-pro .nom { font-weight: 700; }
.foto-pro .desc { color: var(--gris); font-size: 0.85rem; }
.foto-pro .flecha { margin-left: auto; color: var(--cian); font-weight: 800; }

.post { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; margin-bottom: 12px; }
.post .autor { font-weight: 700; color: var(--azul); font-size: 0.9rem; }
.post .fecha { color: var(--gris); font-size: 0.78rem; }
.post .contenido { margin-top: 6px; white-space: pre-wrap; }

/* ------- Carga y avisos ------- */
.loader {
  position: fixed; inset: 0; background: rgba(255,255,255,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  z-index: 50; font-weight: 600; color: var(--azul);
}
.spinner { width: 44px; height: 44px; border: 5px solid #d5ecf1; border-top-color: var(--azul); border-radius: 50%; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  background: var(--azul-oscuro); color: #fff; padding: 12px 20px; border-radius: 24px;
  box-shadow: var(--sombra); z-index: 60; font-size: 0.95rem; max-width: 90%; text-align: center;
}

/* ------- Banner de instalación (PWA) ------- */
.instalar {
  position: fixed; bottom: 76px; left: 10px; right: 10px; z-index: 55;
  background: #0a3347; color: #fff;
  border-radius: 16px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 6px 18px rgba(10, 51, 71, 0.35);
}
.instalar-texto { display: flex; flex-direction: column; min-width: 0; }
.instalar-texto small { opacity: 0.85; font-size: 0.78rem; line-height: 1.3; }
.instalar-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.instalar .principal { background: var(--verde); border: 0; color: #fff; padding: 9px 14px; border-radius: 20px; font-weight: 700; cursor: pointer; font-size: 0.88rem; }

/* ------- Navegación inferior ------- */
#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: #fff;
  border-top: 1px solid var(--borde);
  display: flex;
  justify-content: space-around;
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 3px rgba(10, 51, 71, 0.08);
}
.nav-btn {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 1.35rem; color: #9db0ba; padding: 2px 6px;
  border-radius: 12px;
  transition: color 0.15s;
}
.nav-btn span { font-size: 0.62rem; font-weight: 600; }
.nav-btn.active { color: var(--azul); }
.nav-btn.active span { color: var(--azul); }

.encabezado-movil { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px; margin-bottom: 6px; font-size: 0.9rem; color: var(--gris); }
.encabezado-movil b { color: var(--azul-oscuro); }
.tiempo-act { color: var(--gris); font-size: 0.85rem; text-align: center; margin: 8px 0 12px; }

.ahora-header { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); margin-bottom: 8px; }
.ahora-spot { flex: 1; font-size: 0.85rem; color: var(--gris); line-height: 1.3; }
.ahora-spot b { color: var(--azul-oscuro); font-size: 0.95rem; }
.ahora-viento { text-align: center; min-width: 80px; }
.ahora-viento-num { font-size: 2.2rem; font-weight: 900; color: var(--azul); line-height: 1; }
.ahora-viento-nud { font-size: 0.7rem; color: var(--gris); text-transform: uppercase; letter-spacing: 1px; }
.ahora-btn-futuro { margin-top: 12px; margin-bottom: 16px; text-align: center; }
.btn-ahora-futuro { display: block; background: linear-gradient(135deg, var(--azul), var(--cian)); color: #fff; border: 0; border-radius: 14px; padding: 16px 24px; font-size: 1.05rem; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.2; white-space: nowrap; width: 100%; text-decoration: none; letter-spacing: 0.5px; transition: transform 0.15s, box-shadow 0.15s; }
.btn-ahora-futuro:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(13,110,138,0.35); }

.grid-actual {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 10px 0;
}
.grid-actual .celda { background: #eef7f9; border-radius: 10px; padding: 8px 4px; text-align: center; }
.grid-actual .numero { font-weight: 800; font-size: 1.05rem; color: var(--azul-oscuro); }
.grid-actual .leyenda { font-size: 0.68rem; color: var(--gris); }

.enlace-ext { color: var(--azul); font-weight: 600; display: inline-block; margin-right: 14px; text-decoration: none; }
.enlace-ext:hover { text-decoration: underline; }

.login-card { max-width: 420px; margin: 10px auto; }
.switch-form { text-align: center; margin-top: 6px; font-size: 0.9rem; }
.switch-form a { color: var(--azul); font-weight: 700; cursor: pointer; }

.campo-con-ojito { position: relative; }
.campo-con-ojito input { width: 100%; padding-right: 44px; }
.ojito {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 4px;
}
.verifica-cuenta { text-align: center; padding: 26px 20px; }
.verifica-emoji { font-size: 3rem; margin-bottom: 8px; }
.verifica-cuenta h2 { margin: 6px 0 10px; }
.verifica-cuenta p { margin: 8px 0; }

.equipo-tit { margin-top: 18px; padding: 10px; background: #eef4f6; border: 1px solid #d7e3e8; border-radius: 8px; cursor: pointer; font-weight: 600; }
.equipo-tit small { color: var(--azul); font-weight: 400; }
.equipo-campo { margin-top: 8px; padding: 10px; background: #f8fbfc; border: 1px solid #e2edf0; border-radius: 8px; }
.equipo-campo input { margin-bottom: 8px; }
.equipo-nota { color: #7a8a90; font-size: 0.75rem; margin-top: 6px; }

/* Buscador de spots en perfil */
.spot-search-results { position: relative; z-index: 10; }
.spot-search-item { padding: 10px 12px; border-bottom: 1px solid #eee; cursor: pointer; font-size: 0.88rem; background: #fff; }
.spot-search-item:hover { background: #e8f4f8; }
.spot-search-item:last-child { border-bottom: none; }
.ley-datos { color: #9aa7ac; font-size: 0.6rem; line-height: 1.4; margin-top: 14px; text-align: justify; }
.ley-datos a { color: #82969e; text-decoration: underline; }

.spots-selec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.spots-selec button {
  border: 1.5px solid #cfe6ec; background: #fff; border-radius: 22px; padding: 8px 14px;
  cursor: pointer; font-size: 0.9rem; font-weight: 600;
}
.spots-selec button.activo { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ------- Títulos por regiones ------- */
.region-tit {
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--azul-oscuro); margin: 14px 0 8px;
}

/* ------- Mis playas favoritas (single line) ------- */
.listafav { list-style: none; }
#mis-playas .fila-spot { display: flex; align-items: center; gap: 12px; }
.fav-card-v2 {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 50%, #dbeefa 100%);
  border: 1px solid #c5dffa; border-radius: 12px;
  padding: 6px 8px; margin-bottom: 6px;
  cursor: pointer; transition: transform .15s;
  flex-wrap: nowrap; overflow-x: auto;
}
.fav-card-v2:active { transform: scale(0.98); }
.fav-wicon { font-size: 2.2rem; flex-shrink: 0; }
.fav-temp-now { font-size: 1.8rem; font-weight: 900; color: #1a3a5c; flex-shrink: 0; }
.fav-temp-hilo { font-size: 1rem; color: #5a7a9a; font-weight: 600; flex-shrink: 0; }
.fav-name { font-size: 1.1rem; font-weight: 700; color: #1a3a5c; white-space: nowrap; flex-shrink: 0; }
.fav-tag {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px; padding: 4px 8px;
  font-size: 0.95rem; font-weight: 700; color: #2c5a8a; white-space: nowrap; flex-shrink: 0;
}
.fav-tag b { color: #0d4a7a; }
.fav-dia-v2 {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0px;
  background: rgba(255,255,255,0.5); border-radius: 8px; padding: 2px 4px;
  flex-shrink: 0; vertical-align: middle;
}
.fav-dia-v2 + .fav-dia-v2 { margin-left: 4px; }
.fav-dia-v2 b { font-size: 0.7rem; color: #6a8aaa; text-transform: uppercase; font-weight: 700; }
.fav-dia-v2 .rosa-tm { width: 36px !important; height: 36px !important; }
.fav-dia-v2 span { font-size: 0.85rem; font-weight: 800; color: #1a3a5c; text-align: center; }
.fav-nofin { font-style: normal; font-size: 0.7rem; color: #8aa; }
.btn-fav-del { background: none; border: 0; color: #c44; font-size: 1rem; cursor: pointer; padding: 2px 4px; opacity: 0.4; flex-shrink: 0; }
.btn-fav-del:active { opacity: 1; }
.btn-fav-bell { background: none; border: 0; font-size: 1rem; cursor: pointer; padding: 2px 4px; opacity: 0.4; flex-shrink: 0; transition: opacity .2s; }
.btn-fav-bell.active { opacity: 1; }
.btn-fav-bell:active { opacity: 1; }
.fav-arrow { font-size: 1.6rem; font-weight: 300; color: #4a8ab5; line-height: 1; flex-shrink: 0; }
.fav-add { margin-top: 6px; }

/* ------- Buscador de playas (geocodificación) ------- */
.buscador-playa input { margin-bottom: 8px; }
.geo-resultado {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #f2fbfd; border: 1px solid #cfe6ec; border-radius: 12px;
  padding: 10px 12px; margin-top: 8px; cursor: pointer; font-size: 0.95rem;
}
.geo-resultado b { color: var(--azul-oscuro); }
.geo-resultado small { color: var(--gris); display: block; }
.sin-resultado { color: var(--gris); font-size: 0.9rem; margin-top: 8px; }

/* ------- Mapa Windy embebido ------- */
.mapa-windy {
  width: 100%; height: 46vh; border: 0; border-radius: 12px; margin-top: 10px;
  background: #eef7f9;
}

/* ------- Fotos del grupo (mini-Instagram) ------- */
.foto-inline {
  width: 100%; border-radius: 12px; margin-bottom: 10px; display: block;
  object-fit: cover; max-height: 55vh; background: #000;
}
video.foto-inline { object-fit: contain; }
.muro-mini { margin-bottom: 10px; }
.muro-mini .foto-inline { margin-bottom: 0; }

/* ------- Moderación / borrado ------- */
.btn-del {
  background: #fdecec; color: var(--rojo); border: 1px solid #f5b9b9;
  border-radius: 14px; padding: 6px 10px; font-size: 1rem; cursor: pointer;
}
.btn-del:hover { background: #fbd; }
.post-cabeza { display: flex; justify-content: space-between; align-items: flex-start; }
.meetup-acciones { display: flex; gap: 8px; margin-top: 8px; }
.meetup-acciones .btn { flex: 1; }
.meetup-acciones .btn-del { flex: 0 0 auto; padding: 10px 14px; }

/* ------- Quedadas automáticas ------- */
.meetup.auto { border-left-color: var(--verde); }
.etiqueta-auto {
  display: inline-block; background: #e5f7ec; color: #1a7a44; font-size: 0.75rem;
  font-weight: 700; padding: 3px 10px; border-radius: 14px; margin: 6px 0;
}

/* ------- Toggle Hoy / Mañana ------- */
.dias-toggle { display: flex; gap: 8px; }
.dias-toggle button {
  flex: 1; border: 1.5px solid #cfe6ec; background: #fff; border-radius: 16px;
  padding: 10px 8px; font-size: 0.9rem; font-weight: 700; cursor: pointer; color: var(--azul-oscuro);
}
.dias-toggle button.activo { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ------- Selector de modelos de viento ------- */
.mod-modelos { display: flex; gap: 8px; margin-bottom: 14px; }
.mod-modelos button {
  flex: 1; border: 1.5px solid #cfe6ec; background: #fff; border-radius: 16px;
  padding: 12px 8px; font-size: 0.95rem; font-weight: 700; cursor: pointer; color: var(--azul-oscuro);
}
.mod-modelos button small { display: block; font-weight: 600; font-size: 0.72rem; color: var(--gris); margin-top: 3px; }
.mod-modelos button.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.mod-modelos button.activo small { color: #e9f7fb; }
.modelo-chip { background: var(--azul) !important; color: #fff; font-size: 0.7rem; margin-left: 6px; }

/* ------- Flechita de dirección del viento ------- */
.flecha-viento { font-size: 1rem; display: inline-block; }
.dir-texto { font-size: 0.7rem; color: var(--gris); font-weight: 600; }
table.prevision td small.dir-texto { display: block; }

/* ------- Rosa "tierra/mar" ------- */
.rosa-tm { display: inline-block; vertical-align: middle; }

/* ------- Recomendación de neopreno ------- */
.traje { font-size: 0.68rem; margin-top: 4px; padding: 2px 6px; border-radius: 8px; font-weight: 600; }
.traje.t-32 { background: #d6f5d6; color: #0a5; }
.traje.t-43 { background: #d9eaffe; color: #05a; }
.traje.t-frio { background: #cfe2f7; color: #045; }

/* ------- Enlace WindGuru en el ranking ------- */
.wg-mini {
  background: #eef7f9; border: 1px solid #cfe6ec; border-radius: 14px;
  padding: 4px 10px; font-size: 0.72rem; white-space: nowrap; text-decoration: none;
}
.wg-mini:hover { background: #dbeff4; }

/* ------- Chips de viento en Mis spots ------- */
.mic-chip {
  display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem;
  font-weight: 700; margin: 2px 0;
}
.mic-chip.bueno { background: var(--verde); color: #fff; }
.mic-chip.flojo { background: var(--naranja); color: #fff; }
#mis-playas .fila-spot { flex-wrap: wrap; }
#mis-playas .fila-spot .info small { line-height: 1.5; }

/* ------- Social: likes, comentarios, paginación, crew ------- */
.chip-crew { display: inline-block; background: #e7f0f4; color: var(--azul-oscuro); border-radius: 10px; padding: 1px 7px; font-size: 0.68rem; font-weight: 700; margin-left: 4px; }
.chip-crew.small { font-size: 0.6rem; margin-left: 2px; }
.post-acciones { display: flex; gap: 8px; margin-top: 8px; }
.como-btn { background: #f0f5f7; border: 1px solid #d9e4e8; border-radius: 16px; padding: 5px 12px; font-size: 0.85rem; cursor: pointer; color: #5a6b73; }
.como-btn.activo { background: #ffe4e1; border-color: #f4a0a0; color: #d43; }
.comentarios { margin-top: 8px; background: #f7fbfc; border-radius: 8px; padding: 8px; }
.comentario { font-size: 0.82rem; padding: 2px 0; border-bottom: 1px dashed #e2ecef; }
.comentario:last-child { border-bottom: none; }
.comentario b { color: var(--azul-oscuro); }
.comentario i { font-style: normal; color: var(--gris); font-size: 0.68rem; margin-left: 6px; }
.comentar { display: flex; gap: 6px; margin-top: 8px; }
.comentar input { flex: 1; }
.comentar button { background: var(--azul); color: #fff; border: 0; border-radius: 10px; padding: 0 12px; cursor: pointer; }
.paginador { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.paginador span { font-weight: 700; color: var(--gris); }
.nav-pag { background: var(--azul); color: #fff; border: 0; border-radius: 16px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.nav-pag:disabled { background: #c5d3d9; cursor: default; }
.crew-paginador { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.crew-pop { display: block; margin-top: 2px; font-size: 0.72rem; color: #e67e22; font-weight: 700; }

/* ------- Perfil / puntos / logros ------- */
.perfil-puntos { text-align: center; }
.perfil-rango { font-size: 1.3rem; font-weight: 800; color: var(--azul-oscuro); }
.perfil-puntaje { font-size: 1.2rem; color: var(--gris); margin-top: 2px; }
.perfil-puntaje b { color: var(--naranja); font-size: 1.5rem; }
.perfil-crew { margin-top: 4px; font-size: 0.88rem; color: var(--gris); }
.perfil-logros-tit { margin-top: 10px; font-size: 0.75rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; }
.perfil-logros { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.logro-chip { background: var(--verde); color: #fff; border-radius: 12px; padding: 3px 10px; font-size: 0.72rem; font-weight: 700; }

/* ------- Ranking Woosports ------- */
.woo-ranking { width: 100%; height: 62vh; border: 0; border-radius: 12px; background: #fff; }

/* ------- Insignias de trucos (lista minimalista) ------- */
.nivel-grupo { margin-bottom: 4px; }
.nivel-tit { font-weight: 800; color: var(--azul); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .4px; margin: 0; }
.nivel-colapsable { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 10px 12px; background: rgba(255,255,255,.06); border-radius: 10px; user-select: none; }
.nivel-colapsable:hover { background: rgba(255,255,255,.1); }
.nivel-flecha { font-size: .7rem; transition: transform .2s; color: var(--gris); }
.nivel-grupo.abierto .nivel-flecha { transform: rotate(90deg); }
.nivel-badge { font-size: .7rem; font-weight: 600; background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 8px; margin-left: 6px; }
.lista-trucos { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.nivel-grupo.abierto .lista-trucos { max-height: 2000px; }
li.truco {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid #eef4f6; cursor: pointer; font-size: 0.88rem;
}
li.truco:last-child { border-bottom: none; }
li.truco .t-check {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid #c5d6db;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; flex: none; font-size: 0.9rem; padding: 0;
}
li.truco .t-nombre { flex: 1; }
li.truco.ganada .t-check { background: var(--verde); border-color: var(--verde); }
li.truco.ganada .t-nombre { color: var(--verde); font-weight: 600; }
li.truco.pendiendo .t-check { background: var(--naranja); border-color: var(--naranja); color: #fff; }
li.truco .t-nota { font-size: 0.68rem; color: var(--naranja); font-weight: 600; }
li.truco .t-ejemplo { font-size: 0.75rem; color: var(--cian); text-decoration: none; white-space: nowrap; }
li.truco .t-ejemplo:hover { text-decoration: underline; }
.link-login { color: var(--cian); font-weight: 600; }

/* ------- Trucos por verificar de la crew ------- */
.lista-verificar { list-style: none; padding: 0; margin: 0; }
.verificar-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px;
  border-bottom: 1px solid #f0e4cf; font-size: 0.88rem; flex-wrap: wrap;
}
.verificar-item:last-child { border-bottom: none; }
.verificar-item b { flex: 1; }

/* ------- Crews ------- */
.crew-buscar { width: 100%; margin-bottom: 10px; }
.crews-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.crew-card { border: 1px solid #c5dffa; border-radius: 14px; padding: 12px; background: linear-gradient(160deg, #e8f4fd 0%, #d4ecf7 30%, #c5e8f0 60%, #b8e4d8 100%); box-shadow: 0 2px 8px rgba(11,114,133,.1); position: relative; overflow: hidden; }
.crew-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.crew-card.mio { border-color: #5abf8a; background: linear-gradient(160deg, #e0f7e9 0%, #d0f0e0 30%, #c5ead5 60%, #b8e4c8 100%); }
.crew-cabeza { display: flex; align-items: center; gap: 8px; }
.crew-emoji { font-size: 1.4rem; }
.crew-info { flex: 1; min-width: 0; }
.crew-info b { display: block; overflow-wrap: anywhere; }
.crew-info small { color: var(--gris); font-size: 0.75rem; }
.btn-chico { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--azul); background: #fff; color: var(--azul); font-weight: 600; cursor: pointer; font-size: 0.78rem; flex: none; }
.btn-chico.peligro { border-color: #d43; color: #d43; }
.crew-like-btn.activo, .crew-like-btn.activo:hover { background: #e4f5e9; border-color: #2a9d4f; color: #1e7a3d; }
.crew-miembros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crew-miembro { background: #eef6f9; border-radius: 10px; padding: 2px 8px; font-size: 0.75rem; }
/* Crear crew: input ancho y botón compacto */
.crew-crear { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.crew-crear input { flex: 1; min-width: 0; }
.btn-crear-crew { flex: none; padding: 10px 14px; border-radius: 10px; border: 0; background: var(--azul); color: #fff; font-weight: 700; cursor: pointer; font-size: 0.85rem; white-space: nowrap; }

/* Tarjeta grande de crew + detalle (muro/miembros/logros) */
.crew-card { cursor: pointer; transition: box-shadow .15s; }
.crew-card:hover { box-shadow: 0 4px 14px rgba(11,114,133,.18); }
.crew-card .crew-emoji { font-size: 1.9rem; background: rgba(255,255,255,0.5); border-radius: 12px; padding: 6px 8px; display: inline-block; }
.crew-stats { display: block; margin-top: 2px; font-size: 0.72rem; color: #5a6b73; }
.btn-ver-crew { margin-top: 8px; }
.crew-detalle .crew-detalle-tit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crew-detalle .crew-detalle-tit h2 { margin: 0; font-size: 1.3rem; }
.crew-detalle-acciones { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.crew-tabs { display: flex; gap: 6px; margin: 12px 0 10px; flex-wrap: wrap; }
.crew-tabs button { padding: 7px 12px; border-radius: 20px; border: 1px solid #d9e4e8; background: #fff; color: #5a6b73; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.crew-tabs button.tab-activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.lista-miembros, .lista-logros { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-miembros li, .lista-logros li { background: #f4f9fb; border: 1px solid #e0ecf0; border-radius: 10px; padding: 7px 10px; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lista-miembros i, .lista-logros i { color: var(--gris); font-size: 0.72rem; margin-left: auto; }
.video-foto { background: #000; border-radius: 10px; }
.muro-mini video { max-height: 260px; width: auto; border-radius: 10px; }

/* Chat interno de crew */
.chat-abrir { margin-left: 6px; }
.chip-expulsar { padding: 1px 6px; font-size: 0.68rem; margin-left: 3px; border-radius: 8px; }
.crew-chat { margin-top: 8px; border-top: 1px dashed #dbe7ea; padding-top: 8px; }
.chat-msgs { max-height: 160px; overflow-y: auto; background: #f7fbfc; border-radius: 8px; padding: 8px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.chat-msg { font-size: 0.82rem; background: #fff; border-radius: 10px; padding: 4px 8px; max-width: 85%; align-self: flex-start; }
.chat-msg.mio { align-self: flex-end; background: #e2f0e6; }
.chat-msg b { color: var(--azul-oscuro); }
.chat-msg i { font-style: normal; color: var(--gris); font-size: 0.65rem; margin-left: 6px; display: block; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; }
.chat-form button { background: var(--azul); color: #fff; border: 0; border-radius: 10px; padding: 0 12px; cursor: pointer; }

/* ------- Panel de administración ------- */
.admin-lista { list-style: none; }
.admin-usuario, .admin-foto {
  display: flex; align-items: center; gap: 10px; border-top: 1px solid #e3eef0;
  padding: 10px 2px; flex-wrap: wrap;
}
.admin-usuario .au-info { flex: 1; min-width: 160px; }
.admin-usuario .au-info b { color: var(--azul-oscuro); }
.admin-usuario .au-info small { display: block; color: var(--gris); font-size: 0.75rem; }
.admin-usuario .au-acciones { display: flex; gap: 6px; align-items: center; }
.admin-usuario .au-acciones-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; width: 100%; }
.au-pass-row { display: flex; align-items: center; }
.au-pass-input { font-size: 0.8rem; padding: 4px 8px; border: 1px solid var(--borde, #d7e3e8); border-radius: 8px; max-width: 150px; }
.au-check { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.au-coins-row { display: flex; gap: 4px; align-items: center; }
.au-coins-input { font-size: 0.85rem; padding: 5px 8px; border: 1px solid var(--borde, #d7e3e8); border-radius: 8px; width: 70px; }
.au-coins-box { display: flex; align-items: center; gap: 4px; background: #fffbf0; border: 1px solid #f0d060; border-radius: 10px; padding: 4px 8px; }
.au-coins-label { font-size: 0.85rem; font-weight: 700; color: #b8860b; min-width: 40px; }
.au-coins-box .au-coins-input { width: 60px; border-color: #f0d060; background: #fff; }
.btn-coin-add { background: #27ae60 !important; color: #fff !important; border: none !important; cursor: pointer; }
.btn-coin-add:active { transform: scale(0.95); }
.btn-coin-sub { background: #e74c3c !important; color: #fff !important; border: none !important; cursor: pointer; }
.btn-coin-sub:active { transform: scale(0.95); }
.au-pts-box { background: #f0f7ff; border-color: #a0c4e8; }
.au-pts-label { color: var(--azul); }
.au-pts-box .au-coins-input { border-color: #a0c4e8; }
.btn-pts-add { background: var(--azul) !important; color: #fff !important; border: none !important; cursor: pointer; }
.btn-pts-sub { background: #7f8c8d !important; color: #fff !important; border: none !important; cursor: pointer; }

/* Rewards table */
.admin-rewards-tbl h3 { margin-bottom: 10px; }
.rewards-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rewards-table th { background: var(--azul); color: #fff; padding: 8px 12px; text-align: left; font-size: 0.8rem; }
.rewards-table td { padding: 8px 12px; border-bottom: 1px solid var(--borde, #d7e3e8); }
.rewards-table tr:nth-child(even) { background: #f8fbfe; }
.rewards-table td:nth-child(2), .rewards-table td:nth-child(3) { font-weight: 700; text-align: center; }
.rewards-table td:nth-child(2) { color: var(--azul); }
.rewards-table td:nth-child(3) { color: #d4a017; }
.rw-input { width: 60px; padding: 4px 6px; border: 1px solid var(--borde, #d7e3e8); border-radius: 6px; font-size: 0.85rem; text-align: center; font-weight: 700; }
.rw-input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 2px rgba(13,110,138,0.15); }
.admin-foto { align-items: center; }
.admin-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #eef7f9; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.admin-foto .af-cuerpo { flex: 1; min-width: 180px; }
.admin-foto .af-cuerpo small { color: var(--gris); display: block; font-size: 0.72rem; }
.admin-foto .af-texto { font-size: 0.88rem; padding: 8px; margin: 4px 0 0; }
.admin-foto .af-acciones { display: flex; gap: 6px; }

/* Admin profile view */
.btn-perfil { background: var(--cian) !important; color: #fff !important; border: none !important; cursor: pointer; font-size: 0.85rem; padding: 6px 12px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.btn-perfil:hover { opacity: 0.85; }
.btn-back { background: none; border: none; color: var(--cian); font-size: 0.9rem; cursor: pointer; font-weight: 600; margin-right: 8px; }
.btn-back:hover { text-decoration: underline; }
.profile-header { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.perfil-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cian); flex-shrink: 0; }
.perfil-avatar-empty { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: #eef7f9; width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; }
.profile-basic { flex: 1; }
.profile-basic h3 { margin: 0 0 4px; color: var(--azul-oscuro); }
.profile-stats { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.profile-stats span { font-size: 0.9rem; }
.profile-section { margin-bottom: 10px; }
.profile-section h4 { margin: 0 0 6px; font-size: 0.85rem; color: var(--azul); text-transform: uppercase; letter-spacing: 0.5px; }
.profile-edit-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.profile-edit-grid label { font-size: 0.85rem; font-weight: 600; color: var(--azul-oscuro); }
.profile-edit-grid input { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 0.9rem; }
.profile-edit-grid input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 2px rgba(13,110,138,0.15); }
.admin-profile-top { border-left: 4px solid var(--cian); }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-trick-list { font-size: 0.85rem; line-height: 1.6; }
.profile-post-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef3f5; }
.profile-post-item:last-child { border-bottom: none; }
.equipo-table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.equipo-table td { padding: 4px 8px; border-bottom: 1px solid #eef3f5; }
.equipo-table td:first-child { color: var(--gris); white-space: nowrap; width: 100px; }
.spot-select-wrap { position: relative; }
.spot-search { width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 0.9rem; box-sizing: border-box; }
.spot-search:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 2px rgba(13,110,138,0.15); }
.spot-select { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 0.85rem; margin-top: 2px; }

/* Modal cambio de contraseña (funciona en PWA) */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-overlay[hidden] { display: none !important; }
.modal-caja { background: #fff; border-radius: 16px; padding: 18px; width: 100%; max-width: 340px; box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.modal-caja h3 { margin: 0 0 10px; font-size: 1rem; color: var(--azul-oscuro); }
.modal-caja input { width: 100%; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; font-size: 1rem; }
.modal-acciones { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }

/* Asistentes de quedada */
.asistentes-lista { padding: 8px 0; }
.asistentes-lista.hidden { display: none; }

/* Buscar usuario */
.user-search-item:hover { background: #e8f4f9 !important; border-color: var(--cian) !important; }

/* Perfil público overlay */
#perfil-publico-overlay .tarjeta { max-height: 85vh; overflow-y: auto; }

/* ------- Mercado de segunda mano ------- */
.seccion-mercado { margin: 0 0 4px; }
.mercado-form h3 { margin: 0 0 10px; }
.mercado-form input, .mercado-form textarea { margin-bottom: 8px; }
.merc-foto {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed #cfe6ec; border-radius: 12px; padding: 12px; margin-bottom: 8px;
  font-weight: 700; color: var(--azul); cursor: pointer; background: #f2fbfd;
}
.merc-foto img { max-width: 100%; max-height: 160px; border-radius: 10px; }
.merc-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.merc-thumb { position: relative; }
.merc-thumb img { width: 78px; height: 78px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); }
.merc-thumb button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; background: var(--rojo); color: #fff;
  font-weight: 800; cursor: pointer; line-height: 1; padding: 0;
}
.merc-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.merc-filtros-cats { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.merc-cat-btn {
  background: #eef3f5; border: 1px solid #d7e3e8; border-radius: 20px; padding: 5px 12px;
  font-size: 0.78rem; cursor: pointer; color: var(--azul-oscuro); transition: all 0.15s;
}
.merc-cat-btn:hover { background: #d7e3e8; }
.merc-cat-btn.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.merc-ordenar {
  background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px;
  font-size: 0.8rem; color: var(--azul-oscuro); min-width: 130px;
}
.merc-cat-tag {
  display: inline-block; background: #eef7f9; color: var(--azul); font-size: 0.68rem;
  font-weight: 600; border-radius: 10px; padding: 2px 8px; margin-bottom: 4px;
}
.merc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.merc-item {
  background: #fff; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(10,51,71,0.06);
  position: relative; cursor: pointer; transition: transform 0.12s;
}
.merc-item:active { transform: scale(0.98); }
.merc-img { width: 100%; height: 140px; object-fit: cover; background: #eef3f5; }
.merc-img.sin-foto { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.merc-fotocount { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; }
.merc-cuerpo { padding: 10px; }
.merc-nombre { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.merc-precio { color: var(--naranja); font-weight: 800; font-size: 1.15rem; margin-top: 2px; }
.merc-desc { color: var(--gris); font-size: 0.85rem; margin: 4px 0; }
.merc-vendedor { color: var(--gris); font-size: 0.78rem; }
.merc-vendedor i { color: #9fb1b8; }

/* Detalle de artículo */
.merc-detail-nombre { font-size: 1.4rem; font-weight: 800; color: var(--azul-oscuro); }
.merc-detail-precio { font-size: 1.5rem; font-weight: 800; color: var(--naranja); margin-top: 2px; }
.merc-detail-vendedor { color: var(--gris); font-size: 0.85rem; margin-top: 4px; }
.merc-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.merc-gal-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); }
.merc-contacto { border-left: 4px solid var(--azul); }
.merc-tel { background: #eef5f8; border-radius: 10px; padding: 12px; margin-top: 8px; font-size: 1.1rem; }

/* Aviso legal RGPD */
.legal-nota { background: #f7f9fa; font-size: 0.82rem; color: var(--gris); line-height: 1.5; }
.legal-nota b { color: var(--azul-oscuro); }
.legal-nota p { margin-top: 6px; }
.volver-merc { max-width: 200px; }
@media (min-width: 720px) { .merc-grid { grid-template-columns: repeat(3, 1fr); } .merc-galeria { grid-template-columns: repeat(3, 1fr); } }

/* Paginación vídeos */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; }
.btn-pag { background: var(--azul); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.btn-pag:disabled { opacity: .4; cursor: default; }
.btn-pag:not(:disabled):active { transform: scale(.97); }
.pag-info { font-size: .85rem; color: var(--gris); font-weight: 600; }

/* Profile sections: prevent overflow */
#pf-push-section label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  font-size: .88rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
#pf-push-section span {
  flex: 1 1 0%;
  min-width: 0;
  word-break: break-word;
  text-align: left;
}
#pf-logros-section label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  font-size: .88rem;
  cursor: pointer;
  word-break: break-word;
  width: 100%;
  box-sizing: border-box;
}
#pf-logros-section span {
  flex: 1 1 0%;
  min-width: 0;
}
#pf-push-section,
#pf-kc-bank,
#pf-logros-section,
#pf-shop-section,
#sesiones-section {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.chip { white-space: nowrap; }