@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --ink:#161a2b;
  --ink-soft:#5b6178;
  --line:#e4e6ef;
  --brand:#3654f4;
  --brand-dark:#1f38c9;
  --brand-soft:#eef0ff;
  --accent:#0fb37f;
  --danger:#e0475a;
  --radius:14px;
  --font-display:'Poppins', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;}
/* Sin esto, un elemento con [hidden] pero también con una clase que fija su
   propio "display" (ej. .btn{display:inline-flex}) se sigue mostrando: misma
   especificidad que el estilo por defecto del navegador, y el de la hoja de
   estilos del sitio gana por venir después. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
}

a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .4em; line-height:1.2;}

.container{max-width:1120px; margin:0 auto; padding:0 20px;}

/* --- Nav --- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:16px 20px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.nav-brand-wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.nav-brand{display:flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); transition:opacity .2s ease;}
.nav-brand:hover{text-decoration:none; opacity:.85;}
.nav-brand img{height:28px; width:auto; display:block;}
.nav-saludo{color:var(--ink-soft); font-weight:600; font-size:.92rem; padding-left:14px; border-left:1px solid var(--line);}
.nav-links{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.nav-link{
  position:relative; display:inline-block; color:var(--ink-soft); font-weight:500;
  padding:4px 2px; transition:color .2s ease, transform .2s ease;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  border-radius:2px; background:linear-gradient(90deg, var(--brand), var(--accent));
  transition:right .25s ease;
}
.nav-link:hover{color:var(--brand); text-decoration:none; transform:translateY(-1px);}
.nav-link:hover::after, .nav-link.activo::after{right:0;}
.nav-link.activo{color:var(--brand);}
.nav-user{color:var(--ink-soft); font-size:.9rem;}

.nav-icon-btn{
  position:relative; width:36px; height:36px; border-radius:50%; border:none; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:none; color:var(--ink-soft); transition:background .2s ease, color .2s ease;
}
.nav-icon-btn svg{width:19px; height:19px;}
.nav-icon-btn:hover{background:var(--bg); color:var(--brand); text-decoration:none;}
.nav-icon-wrap{position:relative;}
.nav-notif-punto{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface);
}
.nav-dropdown.nav-notif-dropdown{min-width:260px; padding:6px;}
.nav-notif-vacio{padding:14px 10px; color:var(--ink-soft); font-size:.85rem; margin:0; text-align:center;}
.nav-notif-item{display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:8px;}
.nav-notif-item:hover{background:var(--bg);}
.nav-notif-item > div{flex:1; min-width:0;}
.nav-notif-icono{font-size:1.2rem; flex-shrink:0;}
.nav-notif-item strong{display:block; font-size:.85rem;}
.nav-notif-item .hint{font-size:.78rem;}

.nav-avatar-wrap{position:relative;}
.nav-avatar{
  width:38px; height:38px; border-radius:50%; border:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.9rem;
}
.nav-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.nav-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; min-width:170px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 30px rgba(10,14,40,.12); padding:8px; z-index:30;
}
.nav-dropdown-nombre{padding:8px 10px 6px; font-size:.85rem; color:var(--ink-soft); border-bottom:1px solid var(--line); margin-bottom:4px;}
.nav-dropdown a, .nav-dropdown button{
  display:block; width:100%; text-align:left; padding:9px 10px; border-radius:8px;
  color:var(--ink); font-weight:500; background:none; border:none; cursor:pointer; font-size:.92rem;
}
.nav-dropdown a:hover, .nav-dropdown button:hover{background:var(--bg); text-decoration:none;}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; padding:10px 20px; font-weight:600;
  font-family:var(--font-body); font-size:.95rem; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px);}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand);}
.btn-danger{background:#fdecee; color:var(--danger);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6; cursor:not-allowed; transform:none;}

/* --- Hero / search --- */
.hero{padding:56px 0 32px; text-align:center;}
.hero p{color:var(--ink-soft); font-size:1.05rem; max-width:560px; margin:0 auto;}
.search-bar{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:28px; background:var(--surface); padding:14px; border-radius:var(--radius);
  border:1px solid var(--line); max-width:760px; margin-inline:auto;
}
.search-bar input, .search-bar select{flex:1; min-width:160px;}

/* --- Hero (dos columnas: copy + mosaico de logos) --- */
.hero-section{padding:48px 0 16px;}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;}
.hero-copy{text-align:left;}
.hero-copy p{color:var(--ink-soft); font-size:1.05rem; max-width:480px; margin:0;}
.hero-login{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin:20px 0; padding:14px 16px; border-radius:14px;
  background:rgba(22,26,43,.06); border:1px solid rgba(22,26,43,.08);
  width:fit-content;
}
.search-bar-left{justify-content:flex-start; margin:0; margin-inline:0; max-width:none;}
.chip-row-left{justify-content:flex-start;}

.hero-visual{display:flex; justify-content:center;}
.logo-showcase{position:relative; width:100%; max-width:520px; height:490px; overflow:hidden;}

.ribbon-row{
  position:absolute; left:-15%; width:130%; height:128px;
  overflow:hidden; transform-origin:center;
}
.ribbon-track{
  display:flex; align-items:center; gap:20px; width:max-content;
  animation-name:ribbon-scroll; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes ribbon-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ribbon-track{ animation:none; }
}

.logo-tile{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:104px; height:104px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 8px 20px rgba(22,26,43,.10); overflow:hidden; padding:14px;
  transition:box-shadow .18s ease;
}
.logo-tile:hover{box-shadow:0 12px 26px rgba(22,26,43,.16); text-decoration:none;}
.logo-tile img{width:100%; height:100%; object-fit:contain;}
.logo-tile-vacio{
  background:var(--brand-soft); border-style:dashed; border-color:#c3caf7;
  color:var(--brand-dark); font-size:2rem;
}

@media (max-width:840px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{text-align:center;}
  .hero-copy p{margin-inline:auto;}
  .hero-login, .search-bar-left, .chip-row-left{justify-content:center;}
  .hero-login{margin-inline:auto;}
  .hero-visual{display:none;}
}

/* --- Form controls --- */
label{display:block; font-weight:600; font-size:.88rem; margin:14px 0 6px;}
input, select, textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:.95rem; background:#fff; color:var(--ink);
}
input[type="checkbox"]{width:auto; padding:0; border:none; border-radius:0; flex:none; accent-color:var(--brand);}
input:focus, select:focus, textarea:focus{outline:2px solid var(--brand-soft); border-color:var(--brand);}
input::placeholder, textarea::placeholder{color:#a7abbe;}
input:disabled, select:disabled, textarea:disabled{background:#f0f1f5; color:var(--ink-soft); cursor:not-allowed;}
textarea{resize:vertical; min-height:90px;}
.hint{color:var(--ink-soft); font-size:.82rem; margin-top:4px;}
.hint-chica{font-size:.74rem;}

.password-field{position:relative;}
.password-field input{padding-right:44px;}
.password-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--ink-soft); border-radius:8px; padding:0;
}
.password-toggle:hover{color:var(--brand);}
.password-toggle svg{width:20px; height:20px; pointer-events:none;}
.olvide-password{display:block; text-align:right; font-size:.82rem; margin-top:8px;}
button.olvide-password{background:none; border:none; padding:0; width:100%; cursor:pointer; color:var(--brand); text-decoration:none; font-family:inherit;}
button.olvide-password:hover{text-decoration:underline;}
.recuperar-pregunta{font-weight:600; margin:12px 0 6px;}

/* --- Cards --- */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px 0 8px;}
.chip{
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:7px 16px; font-size:.85rem; font-weight:500; cursor:pointer; color:var(--ink-soft);
}
.chip.activo{background:var(--brand); color:#fff; border-color:var(--brand);}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; padding:24px 0 60px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease;
}
.card:hover{box-shadow:0 8px 24px rgba(22,26,43,.08); transform:translateY(-2px);}
.card-cover{height:120px; background:linear-gradient(135deg, var(--brand-soft), #dfe4ff); display:flex; align-items:center; justify-content:center;}
.card-cover img{width:100%; height:100%; object-fit:cover;}
.card-logo{width:56px; height:56px; border-radius:12px; background:#fff; object-fit:cover; border:1px solid var(--line); margin-top:-32px; margin-left:16px; box-shadow:0 2px 6px rgba(0,0,0,.08);}
.card-body{padding:10px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-body h3{font-size:1.05rem;}
.badge{display:inline-block; background:var(--brand-soft); color:var(--brand-dark); font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:999px; width:fit-content;}
.card-desc{color:var(--ink-soft); font-size:.88rem; flex:1;}
.card-meta{color:var(--ink-soft); font-size:.82rem;}

.empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft);}

/* --- Auth / panel cards --- */
.auth-wrap{max-width:460px; margin:48px auto; padding:0 20px;}
.panel-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:0 4px 20px rgba(22,26,43,.04);
}
.tabs{display:flex; gap:8px; margin-bottom:20px; background:var(--bg); padding:4px; border-radius:12px;}
.tab{flex:1; text-align:center; padding:9px; border-radius:9px; font-weight:600; cursor:pointer; color:var(--ink-soft); font-size:.9rem;}
.tab.activo{background:var(--surface); color:var(--brand); box-shadow:0 1px 4px rgba(0,0,0,.08);}

/* Selector "alcance de la cuenta" del registro: 3 cards en un mismo renglón. */
.cards-tipo-cuenta{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:20px;}
.card-tipo-cuenta{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:16px 10px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface);
  cursor:pointer; font-family:var(--font-body); transition:border-color .2s ease, background .2s ease;
}
.card-tipo-cuenta:hover{border-color:var(--brand);}
.card-tipo-cuenta.activo{border-color:var(--brand); background:var(--brand-soft);}
.card-tipo-cuenta .card-tipo-icono{font-size:1.6rem;}
.card-tipo-cuenta strong{font-size:.88rem;}
.card-tipo-cuenta .hint{font-size:.74rem; line-height:1.3;}
@media (max-width:520px){ .cards-tipo-cuenta{grid-template-columns:1fr;} }

.alert{padding:11px 14px; border-radius:10px; font-size:.9rem; margin:12px 0;}
.alert-error{background:#fdecee; color:#a3222f;}
.alert-ok{background:#e7f8f1; color:#0a7a54;}
.alert-info{background:var(--brand-soft); color:var(--brand-dark); font-size:.82rem; margin:6px 0 0;}
.alert-warning{background:#f3ecff; color:#6b3fa0; font-size:.82rem;}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }

/* --- Inicio de la persona, estructura inspirada en TripAdvisor: el buscador
   es la parte protagónica (hero grande arriba de todo); debajo, accesos por
   categoría, promos, ubicación/favoritos y por último carruseles de
   negocios. --- */
.home-hero{
  padding:28px; border-radius:var(--radius); margin-bottom:24px;
  background:linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%);
}
.home-hero-top{position:relative; text-align:center; margin-bottom:22px;}
.home-hero-top .nivel-pill{position:absolute; top:0; right:0;}
.home-hero-pregunta{
  color:#fff; margin:0; font-size:1.5rem; font-family:var(--font-display); font-weight:700;
}
.palabra-rotativa{
  display:inline-block; color:#ffe27a; transition:opacity .25s ease, transform .25s ease;
}
.palabra-rotativa.cambiando{opacity:0; transform:translateY(4px);}
@media (max-width:600px){ .home-hero-top .nivel-pill{position:static; margin:0 auto 10px; display:inline-flex;} }
.home-buscador-card{
  width:100%; display:flex; flex-direction:column; gap:16px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(20px) saturate(1.8); -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border:1px solid rgba(255,255,255,.5); border-radius:18px;
  padding:22px; box-shadow:0 14px 34px rgba(22,26,43,.2);
}
.buscador-tile-grande{padding:6px 8px; border-radius:26px;}
.buscador-tile-grande input{padding:12px 6px; font-size:1rem;}
.buscador-tile-grande .buscador-icono{width:40px; height:40px;}
.buscador-tile-grande .buscador-icono svg{width:19px; height:19px;}
@media (max-width:600px){ .home-hero{padding:20px;} .home-buscador-card{padding:16px;} }

/* Categorías como pills de acceso rápido, debajo del buscador. Mismo cristal
   translúcido (fondo semitransparente + blur) que el resto de las cards. */
.home-categorias-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.categoria-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.6); border-radius:999px;
  padding:8px 16px; font-size:.82rem; font-weight:600; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.categoria-pill:hover{background:rgba(255,255,255,.8); text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 14px rgba(22,26,43,.15);}
.categoria-pill svg{width:15px; height:15px; flex-shrink:0; stroke:#000;}

/* "Promos & avisos": banners de promociones de negocios o avisos de la
   plataforma (ej. nuevos negocios afiliados). */
.promos-avisos{
  padding:16px; border-radius:var(--radius); margin-bottom:28px;
  background:linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%);
}
.promos-avisos-header{display:flex; align-items:center; gap:14px; color:#fff; margin-bottom:12px;}
.promos-avisos-header strong{font-family:var(--font-display); font-size:1.05rem;}
.promos-avisos .hint{color:rgba(255,255,255,.85); margin:0;}
.promos-contenido{
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); border-radius:12px;
  padding:10px; min-height:150px; display:flex; align-items:center;
}
.promos-contenido .hint{padding:0; width:100%; text-align:center;}
.promos-lista{display:flex; gap:14px; overflow-x:auto; width:100%; padding:2px 2px 6px; scroll-snap-type:x proximity;}
.promos-dots{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:12px;}
.promos-dot{
  width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.4); transition:background .2s ease, transform .2s ease;
}
.promos-dot.activo{background:#fff; transform:scale(1.3);}
.promo-banner{
  flex:0 0 auto; width:260px; border-radius:16px; overflow:hidden; position:relative;
  background:rgba(255,255,255,.55); backdrop-filter:blur(20px) saturate(1.8); -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border:1px solid rgba(255,255,255,.5); box-shadow:0 10px 30px rgba(22,26,43,.16);
  scroll-snap-align:start; color:var(--ink); transition:transform .2s ease, box-shadow .2s ease;
}
.promo-banner:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 14px 34px rgba(22,26,43,.22);}
.promo-banner-img{display:block; width:100%; height:130px; object-fit:cover;}
.promo-banner-titulo{display:block; padding:8px 12px; font-size:.85rem; font-weight:600;}
@media (max-width:480px){ .promo-banner{width:220px;} }

/* Ubicación a la izquierda; favoritos + últimas vistas + mejor valorados
   apilados como cards en la columna lateral derecha, estiradas para que la
   columna completa alinee con la altura de la ventana del mapa. */
.home-secundario{display:grid; grid-template-columns:1.7fr 1fr; gap:16px; align-items:stretch; margin-bottom:28px;}
.home-secundario-lateral{display:flex; flex-direction:column; gap:16px; min-height:0;}
.home-secundario-lateral > *{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start;}
/* "Mis favoritos", "Últimas vistas" y "Mejor valorados": las tres cards
   completas llevan el degradado azul-verdoso de marca. */
.home-carrusel{background:linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%);}
.home-carrusel .opcion-cabecera, .home-carrusel .opcion-texto{color:#fff;}
.home-carrusel .hint{color:rgba(255,255,255,.85);}
@media (max-width:760px){ .home-secundario{grid-template-columns:1fr;} }

/* Recuadro interno de "Últimas vistas"/"Mejor valorados": fondo claro que
   resalta sobre el degradado de la card, con la lista de negocios. Si hay
   más registros de los que caben en su alto fijo, se desplaza verticalmente
   (scroll-y) en vez de estirar la card o desbordarse. */
.carrusel-contenido{
  flex:1; min-height:52px; overflow-y:auto; margin-top:8px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); border-radius:12px; padding:6px 8px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.5) transparent;
}
.carrusel-contenido::-webkit-scrollbar{width:6px;}
.carrusel-contenido::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5); border-radius:999px;}
.carrusel-contenido .hint{padding:0; margin:0;}
.lista-vertical{display:flex; flex-direction:column; gap:4px;}
.negocio-list-item{
  display:flex; align-items:center; gap:10px; padding:6px; border-radius:8px;
  color:#fff; transition:background .15s ease;
}
.negocio-list-item:hover{background:rgba(255,255,255,.18); text-decoration:none;}
.negocio-list-item-img{
  flex-shrink:0; width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.25) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:var(--font-display); font-size:.7rem;
}
.negocio-list-item-body{display:flex; flex-direction:column; min-width:0;}
.negocio-list-item-body strong{
  font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.negocio-list-item-body .hint{font-size:.7rem; margin:0;}

/* Encabezados reutilizados por los carruseles y la card de favoritos
   (ícono redondo + título + descripción). */
.opcion-cabecera{display:flex; align-items:center; gap:14px; color:var(--ink); margin-bottom:12px;}
.opcion-icono{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff;
}
.opcion-texto{display:flex; flex-direction:column; gap:2px;}
.opcion-texto strong{font-family:var(--font-display); font-size:.98rem;}
.opcion-texto .hint{margin:0;}

.buscador-tile{
  display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.6); border-radius:20px;
  padding:4px 6px;
}
.buscador-tile input{
  flex:1; width:auto; min-width:0; border:none; background:none; box-shadow:none;
  padding:8px 4px; font-size:.88rem; color:var(--ink);
}
.buscador-tile input:focus{outline:none;}
.buscador-icono{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; border:none; background:none; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.buscador-icono svg{width:17px; height:17px;}
.buscador-icono:hover{color:var(--brand); background:rgba(255,255,255,.6);}
.buscador-icono.escuchando{color:#e0475a; animation:pulso-mic 1s ease-in-out infinite;}
@keyframes pulso-mic{0%,100%{opacity:1;} 50%{opacity:.35;}}

/* --- Mapa de ubicación "estilo Apple": el mapa ocupa toda la tarjeta y los
   controles flotan encima en paneles de cristal (glassmorphism, blur). --- */
.mapa-card{
  position:relative; min-height:440px; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 20px rgba(22,26,43,.08);
  background:linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%);
  padding:10px;
}
.mapa-card #mapa-ubicacion{position:absolute; inset:10px; height:auto; border-radius:12px; overflow:hidden; z-index:1;}
.mapa-overlay{
  position:absolute; left:14px; right:14px; z-index:10;
  background:rgba(255,255,255,.06); backdrop-filter:blur(12px) saturate(1.8); -webkit-backdrop-filter:blur(12px) saturate(1.8);
  border:1px solid rgba(255,255,255,.25); border-radius:16px; padding:14px 18px;
  box-shadow:0 10px 30px rgba(22,26,43,.16);
}
.mapa-overlay-top{top:14px;}
.mapa-overlay-bottom{bottom:14px;}
.mapa-marcador-negocio{
  font-size:20px; line-height:28px; width:28px; height:28px; text-align:center;
  filter:drop-shadow(0 2px 3px rgba(22,26,43,.35));
}
.mapa-overlay h3{margin:0 0 8px;}
.mapa-overlay .hint{margin:0; line-height:1.3;}
.mapa-overlay .hint + .hint{margin-top:2px;}

.fila-ubicaciones{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.fila-ubicaciones .ubicaciones-guardadas{margin-bottom:0;}
.ubicaciones-guardadas{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.chip-ubicacion{
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.6); border-radius:14px;
  padding:3px 3px 3px 10px;
}
.chip-ubicacion-btn{
  background:none; border:none; padding:2px 0; cursor:pointer;
  color:var(--ink); font-weight:600; font-size:.78rem;
}
.chip-ubicacion-borrar{
  background:none; border:none; width:20px; height:20px; border-radius:50%; padding:0;
  cursor:pointer; color:var(--ink-soft); font-size:.72rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.chip-ubicacion-borrar:hover{background:rgba(224,71,90,.15); color:#e0475a;}
.chip-ubicacion-nueva{
  background:rgba(255,255,255,.3); border:1px dashed rgba(22,26,43,.3); border-radius:14px;
  padding:5px 12px; font-size:.78rem; color:var(--ink-soft); cursor:pointer;
}
.chip-ubicacion-nueva:hover{color:var(--brand); border-color:var(--brand);}
#btn-guardar-ubicacion{padding:5px 12px; font-size:.78rem; border-radius:14px;}

.alerta-ubicacion-caja{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.alerta-ubicacion-cerrar{
  flex:none; background:none; border:none; width:18px; height:18px; padding:0;
  cursor:pointer; color:inherit; opacity:.65; font-size:.75rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.alerta-ubicacion-cerrar:hover{opacity:1;}

/* --- Login: fondo de página, mismo azul que los botones (--brand) --- */
.login-page{
  min-height:100vh;
  background:linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.login-page .nav{background:rgba(255,255,255,.92);}

/* Fondo alterno del login "de sistema" (no el de admin): blanco, con
   hileras del logotipo en gris tenue inclinadas 45° que se desplazan lento,
   alternando de dirección fila por fila. */
.login-page.login-fondo-patron{background:#fff;}
.login-fondo{position:fixed; inset:0; overflow:hidden; z-index:0;}
.login-fondo-filas{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%) rotate(-45deg);
  display:flex; flex-direction:column; gap:46px;
}
/* Cada fila es un mosaico de fondo (background-repeat) en vez de una lista
   finita de <img>: el navegador la repite de verdad hasta el infinito en
   ambas direcciones, así que nunca hay un "final" del contenido que se
   pueda llegar a ver, sin importar el tamaño de pantalla ni cuánto dure
   la animación. El ancho generoso (300vmax) es solo para cubrir cualquier
   rotación/tamaño; ya no determina cuántos logos hay que generar.
   El mosaico ("tile") incluye el espacio entre logos ya incorporado
   (ver logo-komu-gris-tile.png), así el patrón se repite sin costuras. */
.login-fondo-fila{
  height:34px; width:300vmax;
  background-image:url('img/logo-komu-gris-tile.png');
  background-repeat:repeat-x;
  background-size:auto 100%;
  opacity:.55;
}
.login-fondo-fila.hacia-izq{animation:login-fondo-izq 4s linear infinite;}
.login-fondo-fila.hacia-der{animation:login-fondo-der 4s linear infinite;}
@keyframes login-fondo-izq{from{background-position-x:0;} to{background-position-x:-175.4678px;}}
@keyframes login-fondo-der{from{background-position-x:-175.4678px;} to{background-position-x:0;}}
.login-page.login-fondo-patron .container,
.login-page.login-fondo-patron .site-footer{position:relative; z-index:1;}
.login-page.login-fondo-patron .nav{position:relative; z-index:1; background:#fff;}

/* --- Login: panel partido (formulario + ilustración) --- */
.login-split{
  max-width:900px; margin:48px auto;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:var(--surface); border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    0 40px 80px -20px rgba(10,14,40,.45),
    0 15px 35px rgba(31,56,201,.35),
    0 0 0 1px rgba(255,255,255,.06);
}
.login-form-panel{padding:44px 40px; display:flex; flex-direction:column; justify-content:center;}
.login-brand{margin-bottom:22px;}
.login-brand img{height:32px; width:auto; display:block;}
.login-visual-panel{
  position:relative; overflow:hidden; min-height:340px;
  background:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
}

/* Carrusel de fotos con transición lenta en loop (crossfade). Se turnan en
   4 tramos iguales del ciclo completo: cada foto entra/sale con un fundido
   largo (10% del ciclo) para que el cambio se sienta lento, no un corte. */
.login-slideshow{position:absolute; inset:0;}
.slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation-duration:40s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;
}
.slide-1{animation-name:slide-fade-1;}
.slide-2{animation-name:slide-fade-2;}
.slide-3{animation-name:slide-fade-3;}
.slide-4{animation-name:slide-fade-4;}
@keyframes slide-fade-1{0%{opacity:1} 15%{opacity:1} 25%{opacity:0} 90%{opacity:0} 100%{opacity:1}}
@keyframes slide-fade-2{0%{opacity:0} 15%{opacity:0} 25%{opacity:1} 40%{opacity:1} 50%{opacity:0} 100%{opacity:0}}
@keyframes slide-fade-3{0%{opacity:0} 40%{opacity:0} 50%{opacity:1} 65%{opacity:1} 75%{opacity:0} 100%{opacity:0}}
@keyframes slide-fade-4{0%{opacity:0} 65%{opacity:0} 75%{opacity:1} 90%{opacity:1} 100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .slide{animation:none; opacity:0;}
  .slide-1{opacity:1;}
}

/* Vela azul de marca sobre las fotos, para mantener el mismo tono de marca
   sin importar qué foto esté visible. */
.login-visual-overlay{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(90,120,255,.35) 0%, rgba(31,56,201,.45) 100%);
}

@media (max-width:760px){
  .login-split{grid-template-columns:1fr; margin:0; border-radius:0; border:none; box-shadow:none;}
  .login-visual-panel{min-height:200px; order:-1;}
  .login-form-panel{padding:32px 24px;}
}

/* --- Perfil público de un negocio (negocio.html): toda la información que
   alguien querría ver antes de contactarlo o comprarle algo. --- */
.negperfil-vista-previa{
  display:flex; align-items:center; gap:12px; justify-content:space-between; margin:0 0 16px; font-weight:600;
}
.negperfil-vista-previa-texto{display:inline-flex; align-items:center; gap:8px;}
.negperfil-vista-previa svg{width:16px; height:16px; flex-shrink:0;}
.negperfil-vista-previa-volver{color:inherit; font-weight:700; text-decoration:underline; flex-shrink:0; white-space:nowrap;}
.negperfil-portada{
  height:260px; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%);
}
.negperfil-portada img{width:100%; height:100%; object-fit:cover; display:block;}
.negperfil-head{display:flex; gap:20px; align-items:flex-end; margin-top:18px; padding:0 4px 20px;}
.negperfil-logo{
  width:96px; height:96px; border-radius:20px; background:var(--brand); border:4px solid #fff;
  box-shadow:0 6px 16px rgba(22,26,43,.18); object-fit:cover; flex-shrink:0; margin-top:-44px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.6rem;
}
.negperfil-logo img{width:100%; height:100%; object-fit:cover;}
.negperfil-head-info{padding-bottom:4px;}
.negperfil-meta{display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--ink-soft); font-size:.85rem; margin-top:2px;}
.negperfil-meta span{display:inline-flex; align-items:center; gap:5px;}
.negperfil-meta svg{width:14px; height:14px; flex-shrink:0;}
.negperfil-acciones{display:flex; gap:10px; flex-wrap:wrap; margin:20px 0;}
.negperfil-accion{display:inline-flex; align-items:center; gap:8px;}
.negperfil-accion svg{width:16px; height:16px;}
.negperfil-card{margin-bottom:20px;}
.negperfil-card h3{display:flex; align-items:center; gap:8px;}
.negperfil-card h3 svg{width:18px; height:18px; color:var(--brand);}
.negperfil-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.negperfil-grid-2 .negperfil-card{margin-bottom:0;}
@media (max-width:640px){ .negperfil-grid-2{grid-template-columns:1fr;} }

/* "Promociones activas" (negocio.html): cada imagen se centra sobre un
   fondo hecho de ella misma, desenfocado y oscurecido, en vez de recortarla
   con object-fit:cover — así una imagen vertical o una horizontal se ven
   igual de bien encuadradas, sin franjas vacías ni contenido cortado. */
.promos-activas-viewport{border-radius:16px; overflow:hidden;}
.promos-activas-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:16px;
}
.promos-activas-track::-webkit-scrollbar{display:none;}
.promo-activa-item{
  position:relative; flex:0 0 100%; scroll-snap-align:start;
  height:340px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#14151f; text-decoration:none;
}
.promo-activa-fondo{
  position:absolute; inset:-20px; background-size:cover; background-position:center;
  filter:blur(30px) saturate(1.3) brightness(.6); transform:scale(1.1);
}
.promo-activa-img{
  position:relative; z-index:1; max-width:100%; max-height:100%;
  display:block; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.promo-activa-titulo{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:32px 18px 14px; color:#fff; font-weight:600; font-size:.95rem;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.promos-activas-dots{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:12px;}
.promos-activas-dot{
  width:8px; height:8px; padding:0; border:none; border-radius:50%;
  background:var(--line); cursor:pointer; transition:transform .2s, background .2s;
}
.promos-activas-dot.activo{background:var(--brand); transform:scale(1.3);}
@media (max-width:640px){ .promo-activa-item{height:240px;} }
.negperfil-similares-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px;}

/* --- Reseñas y calificación en estrellas (negocio.html, y reutilizadas en
   panel.html para "reseñas recibidas"). Ámbar fijo (no depende del tema de
   marca) porque así se reconoce universalmente una calificación. --- */
.resenas-resumen{display:flex; align-items:baseline; gap:6px; font-size:.95rem; color:var(--ink-soft); margin-bottom:14px;}
.resenas-resumen strong{font-size:1.4rem; color:var(--ink); font-family:var(--font-display);}
.estrellas-picker{display:flex; gap:4px; margin:6px 0 14px;}
.estrella-btn{background:none; border:none; padding:0; cursor:pointer; color:#f5a623; line-height:0;}
.estrella-btn svg{width:28px; height:28px;}
.resena-form{border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:20px; background:var(--bg);}
.resenas-lista{display:flex; flex-direction:column; gap:14px;}
.resena-item{border-top:1px solid var(--line); padding-top:12px;}
.resena-item:first-child{border-top:none; padding-top:0;}
.resena-item-cabeza{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.resena-estrellas-chicas{display:flex; gap:2px; color:#f5a623;}
.resena-estrellas-chicas svg{width:14px; height:14px;}
.resena-item-pie{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:4px;}
.resena-item-acciones{display:flex; gap:8px; flex-wrap:wrap;}
.resena-item-acciones .btn{padding:6px 12px; font-size:.82rem;}
.negperfil-similar-card{
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; border:1px solid var(--line);
  color:var(--ink); transition:background .15s ease, transform .15s ease;
}
.negperfil-similar-card:hover{background:var(--bg); text-decoration:none; transform:translateY(-1px);}
.negperfil-similar-logo{
  width:44px; height:44px; border-radius:10px; background:var(--brand); flex-shrink:0; object-fit:cover;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:.8rem;
}
.negperfil-similar-logo img{width:100%; height:100%; object-fit:cover;}
.negperfil-similar-card strong{display:block; font-size:.88rem;}
@media (max-width:600px){
  .negperfil-head{flex-direction:column; align-items:flex-start; gap:12px;}
  .negperfil-logo{margin-top:-60px;}
}

.section-title{margin-top:36px;}

.panel-header{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}

/* Nivel de la cuenta (gamificación): pill junto al saludo, y card con barra
   de progreso + badges en la pestaña "Premios". */
.nivel-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand-dark); font-weight:600; font-size:.85rem;
}

.tabs-perfil{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px;}
.tab-btn{
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  padding:10px 4px; margin-bottom:-1px; font-family:var(--font-body); font-weight:600;
  font-size:.92rem; color:var(--ink-soft);
}
.tab-btn:hover{color:var(--ink);}
.tab-btn.active{color:var(--brand); border-bottom-color:var(--brand);}

.nivel-card{
  padding:20px; border-radius:var(--radius); margin-bottom:24px;
  background:linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%); color:#fff;
}
.nivel-card .hint{color:rgba(255,255,255,.85);}
.nivel-card-top{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.nivel-card-icono{font-size:2rem;}
.nivel-card-top strong{font-family:var(--font-display); font-size:1.15rem; display:block;}
.nivel-barra{height:8px; border-radius:999px; background:rgba(255,255,255,.3); overflow:hidden; margin-bottom:8px;}
.nivel-barra-fill{height:100%; background:#fff; border-radius:999px; transition:width .3s ease;}

.badges-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px;}
.badge-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:14px 12px 18px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface);
  transition:transform .2s ease, box-shadow .2s ease;
}
.badge-card.ganada:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(22,26,43,.1);}
.badge-card.pendiente{opacity:.6;}
.badge-card strong{font-size:.88rem;}
.badge-fecha{font-size:.72rem; color:var(--ink-soft); margin-top:4px;}
.badge-card.ganada .badge-fecha{color:var(--accent); font-weight:600;}

/* Medallas estilo "Apple Fitness": insignia hexagonal tipo pin esmaltado —
   bisel metálico exterior (oro/plata/bronce) y una cara interior plana de
   color con el ícono encima, sin esferas brillantes ni listones de tela. */
.badge-medalla-wrap{width:78px; height:78px; margin:0 auto 10px;}
.badge-medalla{
  position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(26% 4%, 74% 4%, 100% 50%, 74% 96%, 26% 96%, 0% 50%);
  box-shadow:0 6px 14px rgba(22,26,43,.25);
}
.badge-medalla-cara{
  position:absolute; inset:4px;
  clip-path:polygon(26% 4%, 74% 4%, 100% 50%, 74% 96%, 26% 96%, 0% 50%);
}
.badge-medalla-icono{position:relative; z-index:1; font-size:1.6rem; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}

.badge-medalla.tema-oro{background:linear-gradient(135deg, #fff3c4 0%, #e8b93d 45%, #8a5f16 100%);}
.badge-medalla.tema-oro .badge-medalla-cara{background:linear-gradient(160deg, #3a2f14 0%, #1c160a 100%);}

.badge-medalla.tema-esmeralda{background:linear-gradient(135deg, #eef1f6 0%, #c3c9d4 45%, #838a99 100%);}
.badge-medalla.tema-esmeralda .badge-medalla-cara{background:linear-gradient(160deg, #17c98c 0%, #0a7d59 100%);}

.badge-medalla.tema-morado{background:linear-gradient(135deg, #fff3c4 0%, #e8b93d 45%, #8a5f16 100%);}
.badge-medalla.tema-morado .badge-medalla-cara{background:linear-gradient(160deg, #a279f2 0%, #6035c9 100%);}

.badge-medalla.tema-coral{background:linear-gradient(135deg, #eef1f6 0%, #c3c9d4 45%, #838a99 100%);}
.badge-medalla.tema-coral .badge-medalla-cara{background:linear-gradient(160deg, #ff8a63 0%, #d94f2c 100%);}

.badge-medalla.tema-azul{background:linear-gradient(135deg, #fff3c4 0%, #e8b93d 45%, #8a5f16 100%);}
.badge-medalla.tema-azul .badge-medalla-cara{background:linear-gradient(160deg, #5d7bff 0%, #2740c9 100%);}

.badge-medalla.tema-fuego{background:linear-gradient(135deg, #ffd9a8 0%, #d9822f 45%, #8a4a10 100%);}
.badge-medalla.tema-fuego .badge-medalla-cara{background:linear-gradient(160deg, #ff9d3d 0%, #d94f14 100%);}

.badge-medalla.tema-platino{background:linear-gradient(135deg, #ffffff 0%, #d7dbe3 45%, #9aa2b3 100%);}
.badge-medalla.tema-platino .badge-medalla-cara{background:linear-gradient(160deg, #f4f6fa 0%, #c7ccd6 100%);}
.badge-medalla.tema-platino .badge-medalla-icono{filter:none;}

.badge-medalla.tema-bloqueada{background:linear-gradient(135deg, #4a4f5c 0%, #2b2e37 60%, #1a1c22 100%);}
.badge-medalla.tema-bloqueada .badge-medalla-cara{background:linear-gradient(160deg, #33363f 0%, #202229 100%);}
.badge-medalla.tema-bloqueada .badge-medalla-icono{opacity:.6;}

/* "Mi perfil" a dos columnas cuando la cuenta también tiene negocio. */
.perfil-dual-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
@media (max-width:900px){ .perfil-dual-grid{grid-template-columns:1fr;} }

/* "Mi perfil" sin negocio: un solo recuadro a todo el ancho de la página,
   con la foto arriba y el formulario debajo, todo en una sola columna. */
.perfil-columna-unica{margin-top:16px;}
/* Campos del formulario en filas de tres columnas (estado/municipio/colonia,
   CP/edad/género) para aprovechar el ancho completo de la card en vez de
   una sola columna larga del lado izquierdo. */
.form-fila{display:grid; grid-template-columns:repeat(3, 1fr); gap:0 16px;}
.form-fila .campo label, .campo label{margin-top:14px;}
@media (max-width:760px){ .form-fila{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .form-fila{grid-template-columns:1fr;} }
.perfil-columna-unica .foto-dropzone{margin-bottom:20px;}
.perfil-subtitulo{font-size:.95rem; margin-bottom:12px;}

.upload-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.upload-preview{width:72px; height:72px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:var(--bg);}
.upload-preview img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
.upload-preview.portada{width:140px; height:72px;}
.upload-preview.avatar{border-radius:50%;}
.upload-preview.avatar-vacio{
  display:flex; align-items:center; justify-content:center; border:none;
  background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.15rem;
}
.upload-preview.upload-preview-vacio{
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.upload-preview.upload-preview-vacio svg{width:28px; height:28px;}

/* Recuadro "drag & drop" para la foto de perfil: punteado, gris tenue,
   moderno — clic para elegir un archivo o arrastrarlo encima. */
.foto-dropzone{
  display:flex; align-items:center; gap:16px;
  border:1.5px dashed var(--line); border-radius:16px; background:var(--bg);
  padding:18px 20px; cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.foto-dropzone:hover{border-color:var(--ink-soft);}
.foto-dropzone:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.foto-dropzone.arrastrando{border-color:var(--brand); background:var(--brand-soft);}
.foto-dropzone .upload-preview{flex-shrink:0;}
.foto-dropzone-texto{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0;}
.foto-dropzone-texto strong{font-size:.9rem; color:var(--ink);}
.foto-dropzone-texto .hint{margin:0;}

/* Logo + portada del negocio, uno junto al otro (mismo recuadro
   "drag & drop" de arriba, reutilizado). */
.imagenes-negocio-fila{display:flex; gap:16px; flex-wrap:wrap;}
.imagenes-negocio-fila .foto-dropzone{flex:1; min-width:240px;}

.banners-negocio-grid{display:flex; flex-direction:column; gap:12px;}
.banner-negocio-item{
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px; padding:12px;
}
.banner-negocio-item-controles{flex:1 1 220px; min-width:200px;}
.banner-negocio-item-controles input{margin-bottom:0;}
.banner-negocio-item-botones{display:flex; gap:8px; margin-top:8px;}

/* Modal genérico (fuera del panel de administración, que ya tiene el
   suyo con prefijo .admin-): mismo lenguaje visual, disponible para
   cualquier página del sitio. */
.modal-overlay{
  position:fixed; inset:0; background:rgba(22,26,43,.5); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto;
}
.modal-box{
  background:var(--surface); border-radius:var(--radius); padding:28px; width:100%; max-width:560px;
  box-shadow:0 30px 70px rgba(22,26,43,.3);
}
.modal-box h3{margin-top:0; margin-bottom:4px;}
.modal-botones{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

/* Editor de horario tipo Google/Meta: una fila por día con un check de
   "abierto" y, si aplica, uno o más rangos de hora (para turnos partidos
   con descanso a medio día). */
.horario-dias{max-height:60vh; overflow-y:auto; margin:0 -4px; padding:0 4px;}
.horario-dia{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
.horario-dia:last-child{border-bottom:none;}
.horario-dia-check{display:flex; align-items:center; gap:8px; width:130px; flex-shrink:0; padding-top:6px; font-weight:600; font-size:.9rem;}
.horario-dia-check input{margin:0;}
.horario-dia-cuerpo{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0;}
.horario-rango{display:flex; align-items:center; gap:8px;}
.horario-rango input[type="time"]{flex:1; min-width:0;}
.horario-rango-quitar{
  background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:4px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.horario-rango-quitar:hover{color:#b3261e;}
.horario-rango-quitar svg{width:16px; height:16px;}
.horario-agregar{
  display:inline-flex; align-items:center; gap:4px; background:none; border:none;
  color:var(--brand); font-weight:600; font-size:.82rem; cursor:pointer; padding:2px 0; align-self:flex-start;
}
.horario-agregar svg{width:14px; height:14px;}
.horario-cerrado-texto{color:var(--ink-soft); font-size:.88rem; padding-top:6px;}
.horario-copiar{
  background:none; border:none; color:var(--ink-soft); font-size:.78rem; cursor:pointer;
  padding:0; text-decoration:underline; align-self:flex-start;
}
.horario-resumen{
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:.88rem; color:var(--ink); background:var(--bg); white-space:pre-line;
}
.horario-resumen.horario-resumen-vacio{color:var(--ink-soft); font-style:italic; white-space:normal;}

/* Redes sociales del negocio: en vez de un campo de texto por cada red,
   una fila de íconos en gris; el ícono de una red sin enlace se queda
   gris, y en cuanto tiene enlace se pinta con su color de marca. Clic en
   cualquier ícono abre el mismo editor de abajo para esa red. */
.redes-iconos{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px;}
.red-icono{
  width:42px; height:42px; flex-shrink:0; border-radius:50%; border:1px solid var(--line);
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-soft); transition:border-color .15s ease, background .15s ease;
}
.red-icono svg{width:20px; height:20px;}
.red-icono:hover{border-color:var(--ink-soft); background:#fff;}
.red-icono.red-icono-activa{border-color:currentColor; background:#fff;}
.redes-editor{
  border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--bg); margin-bottom:14px;
}
.redes-editor-titulo{display:block; font-weight:600; font-size:.88rem; margin-bottom:8px;}
.redes-editor-fila{display:flex; gap:8px; flex-wrap:wrap;}
.redes-editor-fila input{flex:1; min-width:160px;}
.redes-editor-fila .btn{flex-shrink:0;}

/* --- Pie de página, compartido por todas las páginas (ver renderFooter en
   nav.js): columnas de enlaces arriba, barra de derechos reservados abajo. --- */
.site-footer{margin-top:40px; background:linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%);}
.site-footer-arriba{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:24px;
  padding:36px 20px 28px;
}
.site-footer-logo-pill{
  display:inline-flex; align-items:center; background:#fff; border-radius:999px;
  padding:8px 18px; margin-bottom:10px;
}
.site-footer-marca img{height:22px; width:auto; display:block;}
.site-footer-marca .hint{max-width:260px; margin:0; color:rgba(255,255,255,.6);}
.site-footer-col{display:flex; flex-direction:column; gap:5px;}
.site-footer-col strong{font-family:var(--font-display); font-size:.88rem; margin-bottom:2px; color:#fff;}
.site-footer-col a{color:rgba(255,255,255,.65); font-size:.88rem;}
.site-footer-col a:hover{color:#fff; text-decoration:none;}
.site-footer-abajo{
  border-top:1px solid rgba(255,255,255,.12); padding:16px 20px;
  text-align:center; color:rgba(255,255,255,.5); font-size:.8rem;
}
.site-footer-abajo p{margin:0;}
.site-footer-abajo a{color:inherit;}
.site-footer-abajo a:hover{color:#fff; text-decoration:underline;}
@media (max-width:760px){
  .site-footer-arriba{grid-template-columns:1fr 1fr; row-gap:28px;}
  .site-footer-marca{grid-column:1 / -1;}
}
@media (max-width:480px){ .site-footer-arriba{grid-template-columns:1fr;} }

/* --- Panel de administración: toolbar de búsqueda, tabla, pills de
   estado, modal de edición y cards de banners. --- */
.admin-toolbar{display:flex; gap:10px; margin:18px 0 14px;}
.admin-toolbar input{flex:1;}
.admin-tabla-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);}
.admin-tabla{width:100%; border-collapse:collapse; font-size:.88rem;}
.admin-tabla th{
  text-align:left; padding:10px 14px; background:var(--bg); color:var(--ink-soft);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.admin-tabla td{padding:10px 14px; border-top:1px solid var(--line); vertical-align:middle;}
.admin-tabla tbody tr:hover{background:var(--bg);}
.admin-fila-acciones{display:flex; gap:8px; white-space:nowrap;}
.admin-password-celda{display:flex; align-items:center; gap:8px;}
.admin-password-valor{font-family:monospace; font-size:.85rem; color:var(--ink-soft); white-space:nowrap;}
/* Botones de acción en forma de ícono (fila de tabla, card de banner, modal):
   mismo cuadrado con borde en todos, solo cambia el ícono adentro. La
   variante ".peligro" es para acciones irreversibles (eliminar). */
.admin-icon-btn{
  width:32px; height:32px; flex-shrink:0; border-radius:8px; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--surface); color:var(--ink-soft); transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.admin-icon-btn svg{width:16px; height:16px; pointer-events:none;}
.admin-icon-btn:hover{background:var(--bg); color:var(--brand); border-color:var(--brand);}
.admin-icon-btn:disabled{opacity:.35; cursor:not-allowed;}
.admin-icon-btn:disabled:hover{background:var(--surface); color:var(--ink-soft); border-color:var(--line);}
.admin-icon-btn.peligro:hover{background:#fdeceb; color:#b3261e; border-color:#b3261e;}
.admin-icon-btn.peligro:disabled:hover{background:var(--surface); color:var(--ink-soft); border-color:var(--line);}
.admin-pill{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:.76rem; font-weight:600;
}
.admin-pill.activo{background:#e3f9ee; color:#0a7d59;}
.admin-pill.inactivo{background:#fdeceb; color:#b3261e;}

.admin-modal-overlay{
  position:fixed; inset:0; background:rgba(22,26,43,.5); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto;
}
.admin-modal{
  background:var(--surface); border-radius:var(--radius); padding:28px; width:100%; max-width:560px;
  box-shadow:0 30px 70px rgba(22,26,43,.3);
}
.admin-modal-botones{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.admin-modal-fila{display:flex; align-items:center; gap:12px; margin-top:16px;}

.admin-banners-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px;}
.admin-banner-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.admin-banner-card img{display:block; width:100%; height:110px; object-fit:cover;}
.admin-banner-card-body{padding:12px; display:flex; flex-direction:column; gap:8px;}
.admin-banner-card-body input{font-size:.85rem; padding:8px 10px;}
.admin-banner-card-fila{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}