@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);}
/* margin-left:auto (no solo el justify-content:space-between del .nav padre)
   para que, cuando .nav-brand-wrap empuje a .nav-links a su propia línea en
   pantallas angostas, ese renglón lo siga pegando a la derecha en vez de
   colapsar a la izquierda (con un solo elemento en el renglón, space-between
   ya no tiene un segundo elemento contra el cual repartir el espacio). */
.nav-links{display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap; margin-left:auto;}
.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;}
#nav-cuentas-relacionadas:not(:empty){border-top:1px solid var(--line); margin:4px 0; padding-top:4px;}

/* En celulares (probado contra el ancho de un iPhone 15 Pro, 393px) el
   encabezado completo — logo, "Descubre Komu", "Iniciar sesión" y
   "Registrarme" — no cabía en un renglón a su tamaño normal de escritorio y
   se veía descuadrado al envolver. Se compacta todo (paddings, iconos,
   tipografía) para que quepa en una sola fila. */
@media (max-width:480px){
  .nav{padding:10px 14px; gap:8px;}
  .nav-brand-wrap{gap:8px;}
  .nav-brand img{height:22px;}
  .nav-saludo{font-size:.78rem; padding-left:8px;}
  .nav-links{gap:8px;}
  .nav-icon-btn{width:30px; height:30px;}
  .nav-icon-btn svg{width:16px; height:16px;}
  .nav-link{font-size:.75rem; padding:2px;}
  .nav-links .btn{padding:6px 12px; font-size:.75rem;}
  .nav-avatar{width:32px; height:32px; font-size:.78rem;}
}

/* --- 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;
}
a.card{color:var(--ink);}
.card:hover{box-shadow:0 8px 24px rgba(22,26,43,.08); transform:translateY(-2px); text-decoration:none;}
.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-cover-vacio{font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--brand-dark);}
.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; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.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;}

/* --- Toasts flotantes (confirmación/error), ver mostrarToast() en nav.js --- */
.toast-root{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column-reverse; gap:8px;
  width:calc(100% - 32px); max-width:420px;
}
.toast{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:12px; font-size:.9rem; font-weight:500;
  box-shadow:0 10px 30px rgba(22,26,43,.18);
  animation:toast-entrada .2s ease;
}
.toast-error{background:#fdecee; color:#a3222f;}
.toast-ok{background:#e7f8f1; color:#0a7a54;}
.toast-info{background:var(--brand-soft); color:var(--brand-dark);}
.toast-warning{background:#f3ecff; color:#6b3fa0;}
.toast-cerrar{background:none; border:none; padding:0; cursor:pointer; font-size:1rem; line-height:1; color:inherit; opacity:.6; flex-shrink:0;}
.toast-cerrar:hover{opacity:1;}
.toast-saliendo{animation:toast-salida .2s ease forwards;}
@keyframes toast-entrada{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
@keyframes toast-salida{to{opacity:0; transform:translateY(12px);}}

.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);}
/* En móvil la pill de nivel ("Amateur", etc.) se muda al renglón de las
   pestañas "Inicio"/"Premios" (ver .tabs-perfil .nivel-pill), en vez de
   quedarse centrada arriba del "¿Qué buscas hoy?": se ve mejor en el mismo
   renglón que ya existe que ocupando una línea propia. */
@media (max-width:600px){ .home-hero-top .nivel-pill{display:none;} }
.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.
   La pill "+ Categorías" vive DENTRO de ".categorias-pills-scroll", como una
   pill más: así se desplaza junto con las demás en vez de quedar fija aparte.
   Su desplegable no se recorta por el overflow-x del carrusel porque se
   posiciona con position:fixed (calculado por JS, ver configurarCategoriaDropdown
   en nav.js) en vez de absolute relativo a un ancestro con overflow. */
.home-categorias-pills{display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:10px;}
.categorias-pills-scroll{display:flex; align-items:center; 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;}
.categoria-pill-dropdown{position:relative; display:inline-flex;}
.categoria-pill-dropdown > .categoria-pill{cursor:pointer; font-family:inherit;}
.categoria-dropdown-panel{
  position:fixed; z-index:100;
  min-width:220px; max-height:280px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 30px rgba(10,14,40,.16); padding:8px;
}
.categoria-dropdown-panel a{
  display:block; padding:8px 10px; border-radius:8px; font-size:.88rem; font-weight:500; color:var(--ink);
}
.categoria-dropdown-panel a:hover{background:var(--bg); text-decoration:none;}
.categoria-pill-activa{background:var(--brand); border-color:var(--brand); color:#fff;}
.categoria-pill-activa:hover{background:var(--brand-dark); color:#fff;}
@media (max-width:1024px){
  /* En móvil y tablet (ej. iPad en vertical) las pills se desplazan en una
     sola fila (en vez de envolver a varias líneas) para dejarle más
     protagonismo al buscador de arriba. */
  .home-categorias-pills{flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;}
  /* Un contenedor flex con overflow-x:auto puede negarse a encogerse (o
     depender de que min-width:0 se herede bien) y el scroll queda "trabado"
     sin efecto — pasó incluso ya con min-width:0. Para que el scroll
     horizontal por touch funcione siempre, se cambia a un bloque normal con
     white-space:nowrap (el mismo patrón de toda la vida para carruseles de
     chips), donde cada pill (incluida "+ Categorías") pasa a inline-block:
     no depende de ningún cálculo de flexbox, solo de que el contenido sea
     más ancho que la caja. */
  .categorias-pills-scroll{
    display:block; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:2px; scrollbar-width:none;
  }
  .categorias-pills-scroll::-webkit-scrollbar{display:none;}
  .categorias-pills-scroll .categoria-pill,
  .categorias-pills-scroll .categoria-pill-dropdown{display:inline-flex; margin-right:10px; vertical-align:top;}
  .categorias-pills-scroll .categoria-pill-dropdown:last-child{margin-right:0;}
}

/* "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;} }

/* "Negocios recomendados" (ver GET /negocios/recomendados): sección propia,
   no reutiliza .promos-avisos (contenido subido por admin/negocios) porque
   esta es un ranking calculado según ubicación, intereses de la persona y el
   momento del día. Usa los colores del logotipo (teal/morado) en vez del
   azul de marca, para distinguirla visualmente de "Promos & avisos". */
.recomendados-negocios{
  padding:16px; border-radius:var(--radius); margin-bottom:28px;
  background:linear-gradient(160deg, #00b5ac 0%, #7b5ce0 100%);
}
.recomendados-header{display:flex; align-items:center; gap:14px; color:#fff; margin-bottom:6px;}
.recomendados-header strong{font-family:var(--font-display); font-size:1.05rem;}
.recomendados-mensaje{color:#fff; font-weight:600; margin:0 0 12px; font-size:.94rem;}
.recomendados-lista{display:flex; gap:14px; overflow-x:auto; width:100%; padding:2px 2px 6px; scroll-snap-type:x proximity;}
.recomendados-negocios > .hint{color:rgba(255,255,255,.88); margin:0;}
.recomendado-card{
  flex:0 0 auto; width:210px; border-radius:16px; overflow:hidden; position:relative;
  background:#fff; 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;
}
.recomendado-card:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 14px 34px rgba(22,26,43,.22);}
.recomendado-card-img{display:block; width:100%; height:110px; object-fit:cover;}
.recomendado-card-img-vacio{
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand-dark);
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
}
.recomendado-card-body{padding:10px 12px;}
.recomendado-card-body strong{display:block; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.recomendado-card-body .hint{margin:2px 0 0; font-size:.74rem; color:var(--ink-soft);}
@media (max-width:480px){ .recomendado-card{width:170px;} }
.recomendados-dots{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:10px;}
.recomendados-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;
}
.recomendados-dot.activo{background:#fff; transform:scale(1.3);}

/* Recomendados y "Negocios cerca de mí" comparten fila: cada una ocupa la
   mitad del ancho en escritorio y se apilan en celular. */
.home-duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; margin-bottom:28px;}
.home-duo > *{min-width:0; margin-bottom:0 !important;}
@media (max-width:760px){ .home-duo{grid-template-columns:minmax(0,1fr);} }

.cercanos-negocios{
  padding:16px; border-radius:var(--radius); margin-bottom:0;
  background:linear-gradient(160deg, #00b5ac 0%, #7b5ce0 100%); color:#fff;
  display:flex; flex-direction:column;
}
.cercanos-header{display:flex; align-items:center; gap:14px; color:#fff; margin-bottom:6px;}
.cercanos-header strong{font-family:var(--font-display); font-size:1.05rem;}
.cercanos-radio{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.cercanos-radio label{margin:0; font-size:.88rem; color:#fff; font-weight:600;}
.cercanos-radio select{width:auto; min-width:0; margin:0; background:#fff; padding:3px 26px 3px 12px; font-size:.8rem; line-height:1.2; border-radius:999px; color:var(--ink);}
.cercanos-lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px;
  height:200px; overflow-y:auto; padding:2px 2px 6px; align-content:start;
}
.cercanos-lista .card-cover{height:90px;}
.cercanos-lista .card-logo{width:44px; height:44px; margin-top:-26px; margin-left:12px;}
.cercanos-lista .card-body{padding:8px 12px 12px; gap:4px;}
.cercanos-lista .card-body h3{font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cercanos-vacio{
  height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px;
  padding:16px 20px; border-radius:var(--radius);
  background:rgba(255,255,255,.12); border:1px dashed rgba(255,255,255,.55);
}
.cercanos-vacio-icono{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; background:#fff; box-shadow:0 6px 14px rgba(22,26,43,.18); margin-bottom:2px;
}
.cercanos-vacio strong{font-family:var(--font-display); font-size:.9rem; color:#fff;}
.cercanos-vacio p{margin:0; color:rgba(255,255,255,.92); font-size:.78rem; max-width:300px; line-height:1.35;}
.cercanos-vacio .btn{margin-top:6px; background:#fff; color:var(--brand-dark); border-color:#fff;}
.cercanos-negocios .hint{color:rgba(255,255,255,.9);}

/* 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{
  position:relative; 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;
}
.autocompletar-lista{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 30px rgba(10,14,40,.16); padding:6px; max-height:320px; overflow-y:auto;
}
.autocompletar-lista a{
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; color:var(--ink);
}
.autocompletar-lista a:hover{background:var(--bg); text-decoration:none;}
.autocompletar-lista img{width:32px; height:32px; border-radius:8px; object-fit:cover; flex-shrink:0;}
.autocompletar-inicial{
  width:32px; height:32px; border-radius:8px; background:var(--brand); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.75rem;
}
.autocompletar-lista strong{display:block; font-size:.88rem;}
.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{
  display:flex; flex-direction:column; gap:10px;
  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;
}
/* Envuelve el mapa y sus overlays flotantes; separado del mapa-card para que
   el botón "Ver negocios favoritos" pueda vivir debajo, en el mismo
   recuadro azul pero fuera del área del mapa (no flotando sobre él). */
.mapa-lienzo{position:relative; min-height:420px; flex:1; border-radius:12px; overflow:hidden;}
.mapa-lienzo #mapa-ubicacion{position:absolute; inset:0; 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;}
/* Globo del marcador de un negocio favorito: nombre + acceso directo a su
   ficha, para llegar ahí sin tener que buscarlo de nuevo. */
.leaflet-popup-content{margin:10px 12px;}
.leaflet-popup-content strong{display:block; margin-bottom:2px;}
/* :link/:visited sube la especificidad por encima de la regla propia de
   leaflet.css (".leaflet-container a"), que si no gana por cargarse después
   de styles.css y pintaba este enlace en su verde-azulado por defecto en vez
   del blanco que necesita para leerse sobre el fondo de marca. */
.leaflet-popup-content a:link,
.leaflet-popup-content a:visited{
  display:inline-block; margin-top:0; background:var(--brand); color:#fff;
  padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:600;
}
.leaflet-popup-content a:hover{background:var(--brand-dark); color:#fff; text-decoration:none;}
.mapa-overlay h3{margin:0 0 8px;}
.mapa-overlay .hint{margin:0; line-height:1.3;}
.mapa-overlay .hint + .hint{margin-top:2px;}
.mapa-overlay-top-cabecera{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.mapa-overlay-top-cabecera h3{margin:0;}
.mapa-overlay-toggle{
  display:none; background:none; border:none; padding:4px; margin:0; cursor:pointer;
  color:inherit; font-size:1rem; line-height:1; flex-shrink:0; transition:transform .2s ease;
}
/* En móvil (y tablet, ej. iPad en vertical: hasta 1024px de ancho lógico) el
   texto de ayuda del mapa empieza contraído: entre ese texto y la tarjeta de
   abajo (dirección, ubicaciones guardadas, botones) casi no quedaba espacio
   para ver el mapa y el pin. */
@media (max-width:1024px){
  .mapa-overlay-toggle{display:block;}
  .mapa-overlay-top-texto{display:none;}
  .mapa-overlay-top.expandido .mapa-overlay-top-texto{display:block; margin-top:8px;}
  .mapa-overlay-top.expandido .mapa-overlay-toggle{transform:rotate(180deg);}
  .mapa-overlay-bottom .mapa-overlay-toggle{transform:rotate(180deg);}
  .mapa-overlay-bottom.contraido .mapa-overlay-bottom-controles{display:none;}
  .mapa-overlay-bottom.contraido .mapa-overlay-toggle{transform:rotate(0deg);}
}

.mapa-overlay-bottom-cabecera{display:flex; align-items:center; justify-content:space-between; gap:10px;}
/* Dirección, ubicaciones guardadas y botones en filas propias (en vez de
   amontonados uno junto al otro): así cada uno tiene su propio ancho
   completo para distribuirse bien, sin pelear por espacio. */
.mapa-overlay-bottom-controles{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
/* Fuera del mapa: propia fila dentro del recuadro azul del mapa-card, no
   flotando sobre el mapa junto con "actualizar/guardar ubicación". */
.favoritos-mapa-dropdown{position:relative;}
.btn-favoritos-mapa{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.6); border-radius:14px;
  padding:9px 14px; font-size:.85rem; font-weight:600; color:var(--ink);
}
.btn-favoritos-mapa:hover{background:rgba(255,255,255,.8);}
/* Se abre hacia arriba (bottom, no top): este botón vive pegado abajo del
   todo del mapa-card, así que un desplegable hacia abajo se saldría de la
   tarjeta en vez de quedar visible sobre el mapa. */
.favoritos-mapa-panel{
  position:absolute; bottom:calc(100% + 8px); left:0; right:0; z-index:40;
  max-height:220px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 30px rgba(10,14,40,.16); padding:6px;
}
.favoritos-mapa-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; border-radius:8px; background:none; border:none; cursor:pointer;
  color:var(--ink); font-size:.85rem; font-weight:500; font-family:inherit;
}
.favoritos-mapa-item:hover{background:var(--bg);}
.favoritos-mapa-color{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.botones-ubicacion{display:flex; gap:8px;}
.botones-ubicacion .btn{flex:1;}
.btn-ubicacion-gps{background:#fff; color:var(--brand); border:1px solid #fff; box-shadow:0 2px 8px rgba(22,26,43,.12);}
.btn-ubicacion-gps:hover{background:#fff; color:var(--brand-dark); box-shadow:0 4px 12px rgba(22,26,43,.18);}
.ubicaciones-guardadas{display:flex; flex-wrap:wrap; gap:6px;}
.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, .btn-ubicacion-gps{padding:9px 14px; font-size:.85rem; line-height:1.3; border-radius:14px;}

/* --- Intro splash: solo en login.html, una vez por sesión de navegador
   (ver script inline en el <head> y el bloque al final del <body> que la
   controla). Usa los colores propios del logotipo (teal/morado) en vez del
   azul de marca de la app, porque es un momento de presentación del
   logotipo, no de la interfaz. --- */
html.komu-intro-listo .intro-splash{display:none !important;}
/* Mientras la intro no haya terminado, el formulario de login (con sus
   campos de correo/contraseña) ni siquiera existe visualmente en la página
   — display:none real, no solo tapado por la intro — para que el
   autocompletado del navegador/gestor de contraseñas no se dispare de fondo
   y su ventana emergente termine encimándose a la animación mientras el
   logo/tagline todavía se están dibujando.
   Esta clase (komu-login-visible) es independiente de komu-intro-listo a
   propósito: se agrega en el instante en que la intro EMPIEZA a
   desvanecerse (no cuando termina de quitarse del DOM), para que el login
   aparezca de inmediato en un crossfade con la intro — evitando ese hueco
   donde solo se ve el fondo animado sin el login todavía. Para ese momento
   la animación de logo/tagline ya terminó hace rato, así que no hay riesgo
   de que el autocompletado se encime a mitad de esa animación. */
html:not(.komu-login-visible) body.login-page .container{display:none;}
.intro-splash{
  position:fixed; inset:0; z-index:9999;
  background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity .6s ease, visibility .6s ease;
}
.intro-splash.intro-splash-oculto{opacity:0; visibility:hidden; pointer-events:none;}
.intro-splash-glow{
  position:absolute; width:min(360px, 70vw); height:min(360px, 70vw); border-radius:50%;
  background:radial-gradient(circle, rgba(0,181,175,.22), rgba(123,92,224,.22) 60%, transparent 72%);
  filter:blur(4px);
  opacity:0; transform:scale(.6);
  animation:introGlowIn 1.4s ease forwards;
}
@keyframes introGlowIn{
  0%{opacity:0; transform:scale(.6);}
  45%{opacity:1;}
  100%{opacity:1; transform:scale(1);}
}
.intro-splash-logo{
  position:relative; width:min(210px, 52vw); opacity:0; transform:scale(.7) translateY(6px);
  animation:introLogoIn .7s cubic-bezier(.2,.9,.25,1.2) .15s forwards;
}
@keyframes introLogoIn{ to{opacity:1; transform:scale(1) translateY(0);} }
.intro-splash-bar{
  position:relative; width:110px; height:4px; border-radius:99px; background:var(--line); overflow:hidden;
  opacity:0; animation:introFadeIn .3s ease .5s forwards;
}
.intro-splash-bar span{
  position:absolute; inset:0; width:0%; border-radius:inherit;
  background:linear-gradient(90deg, #00b5ac, #7b5ce0);
  animation:introBarFill 1s ease .55s forwards;
}
@keyframes introBarFill{ to{width:100%;} }
.intro-splash-tagline{
  position:relative; margin:0; font-family:var(--font-display); font-weight:600; font-size:.9rem;
  color:var(--ink-soft); opacity:0; transform:translateY(6px);
  animation:introTaglineIn .5s ease .75s forwards;
}
@keyframes introFadeIn{ to{opacity:1;} }
@keyframes introTaglineIn{ to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){
  .intro-splash-glow, .intro-splash-logo, .intro-splash-bar, .intro-splash-bar span, .intro-splash-tagline{animation:none; opacity:1; transform:none; width:100%;}
}

/* --- 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;
}
/* Se anima con transform (no background-position-x): un cambio de
   background-position obliga al navegador a repintar el mosaico completo en
   cada fotograma (nada de composición por GPU), lo que en móvil se veía
   "robotizado" (tirones) y además competía por el hilo principal con la
   escritura en los campos del formulario, sintiéndose como un delay al
   teclear. transform sí se compone en su propia capa y no bloquea el hilo
   principal. El desplazamiento (un ancho de mosaico) es el mismo de antes;
   al ser una fila de 300vmax repetida sin costuras, mover toda la fila ese
   tramo produce visualmente el mismo loop infinito que mover el fondo. */
.login-fondo-fila.hacia-izq{animation:login-fondo-izq 4s linear infinite; will-change:transform;}
.login-fondo-fila.hacia-der{animation:login-fondo-der 4s linear infinite; will-change:transform;}
@keyframes login-fondo-izq{from{transform:translateX(0);} to{transform:translateX(-175.4678px);}}
@keyframes login-fondo-der{from{transform:translateX(-175.4678px);} to{transform:translateX(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; flex-direction:column; gap:14px; margin:20px 0;}
.negperfil-accion{display:inline-flex; align-items:center; gap:8px; border:1px solid transparent;}
.negperfil-accion svg{width:16px; height:16px;}
.negperfil-accion-checkin{background:#e6f7f5; color:#0a7d72; border-color:#bfeae5;}
.negperfil-accion-checkin:hover{background:#d3f0ec; color:#065f57;}
@media (max-width:600px){
  .negperfil-accion{padding:7px 12px; font-size:.8rem; gap:6px;}
  .negperfil-accion svg{width:14px; height:14px;}
}

/* Barra de contacto/redes: siempre los mismos íconos, en el mismo orden.
   Un color reconocible por red cuando el negocio sí cargó ese dato; si no,
   el ícono se ve igual pero en gris tenue y sin poder darle clic
   (negperfil-icono-inactivo) — así de un vistazo se nota qué canales tiene
   activos un negocio y cuáles no cargó, sin que la barra "salte" de tamaño. */
.negperfil-iconos{display:flex; gap:10px; flex-wrap:wrap;}
.contactar-wrap{position:relative; align-self:flex-start;}
.contactar-pop{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30; min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 34px rgba(22,26,43,.18); padding:10px; display:flex; flex-direction:column; gap:4px;
}
.contactar-titulo{margin:4px 10px 6px; font-size:.8rem; color:var(--ink-soft);}
.contactar-opcion{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; color:var(--ink); text-decoration:none;}
.contactar-opcion strong{font-size:.95rem;}
.contactar-opcion small{font-size:.8rem; color:var(--ink-soft);}
.contactar-opcion:hover{background:var(--brand-soft); text-decoration:none;}
.contactar-whatsapp strong{color:#128a4d;}
.contactar-llamada strong{color:var(--brand-dark);}
.negperfil-icono{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:1px solid transparent;
  cursor:pointer; background:none; padding:0; transition:background .15s ease, color .15s ease;
}
.negperfil-icono svg{width:19px; height:19px;}
.negperfil-icono-inactivo{background:#f1f2f4; color:#b7bac0; border-color:#e5e7ea; cursor:default; pointer-events:none;}
.negperfil-icono-whatsapp{background:#e7f9ef; color:#128a4d; border-color:#bfead4;}
.negperfil-icono-whatsapp:hover{background:#d5f3e3; color:#0e6b3a;}
.negperfil-icono-web{background:var(--brand-soft); color:var(--brand); border-color:#c7cdfb;}
.negperfil-icono-web:hover{background:#e0e4ff; color:var(--brand-dark);}
.negperfil-icono-facebook{background:#e8f0fe; color:#1456c7; border-color:#c7d9f9;}
.negperfil-icono-facebook:hover{background:#d7e4fd; color:#0f3f94;}
.negperfil-icono-instagram{background:#fdeef6; color:#c1237a; border-color:#f6c8e0;}
.negperfil-icono-instagram:hover{background:#fbdcec; color:#98195f;}
.negperfil-icono-linkedin{background:#e8f2fb; color:#0a5fa8; border-color:#c3ddf3;}
.negperfil-icono-linkedin:hover{background:#d6e9f8; color:#08487d;}
.negperfil-icono-youtube{background:#fdecec; color:#cc1f1f; border-color:#f6c9c9;}
.negperfil-icono-youtube:hover{background:#fbd9d9; color:#a11717;}
.negperfil-icono-tiktok{background:#eef0f2; color:#17181a; border-color:#d8dbe0;}
.negperfil-icono-tiktok:hover{background:#e2e4e8; color:#000;}
.negperfil-icono-favorito{background:#fdeceb; color:#c62828; border-color:#f6cccb;}
.negperfil-icono-favorito:hover{background:#fbd9d7;}
.negperfil-icono-favorito.guardado{background:#c62828; color:#fff; border-color:#c62828;}
.negperfil-icono-favorito.guardado svg{fill:currentColor;}
@media (max-width:600px){
  .negperfil-icono{width:38px; height:38px;}
  .negperfil-icono svg{width:17px; height:17px;}
}
.negperfil-card{margin-bottom:20px;}
.negperfil-card h3{display:flex; align-items:center; gap:8px;}

/* "Tus amigos que han estado aquí" (negocio.html) y listas de amigos en
   panel.html: mismo patrón de avatar circular que .nav-avatar, reutilizado
   fuera del header. */
.amigos-checkins-lista{display:flex; flex-direction:column; gap:12px;}
.amigo-checkin-item{display:flex; align-items:center; gap:10px;}
.amigo-checkin-item strong{display:block; font-size:.9rem;}
.avatar-persona{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.85rem;
}
.avatar-persona img{width:100%; height:100%; object-fit:cover; display:block;}

/* Pestaña "Amigos" (panel.html): una fila por persona, ya sea en resultados
   de búsqueda, solicitudes o la lista de amigos — mismo layout para las
   tres, solo cambian los botones de acción de la derecha. */
.fila-persona{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line);}
.fila-persona:first-child{border-top:none; padding-top:0;}
.fila-persona-acciones{display:flex; gap:6px; flex-shrink:0;}
.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;} }

/* "Estadísticas de tu negocio" (panel.html, zona de "Mi negocio" — nunca en
   la ficha pública): tres cifras grandes arriba (impresiones, vistas, clics
   de WhatsApp), luego dos listas de barras horizontales (género/edad de
   quien lo buscó o vio) y un mini histograma de 24 columnas (una por hora
   del día). */
.metricas-negocio-card{background:linear-gradient(160deg, var(--brand-soft) 0%, var(--surface) 60%); border:1px solid var(--line);}
.metricas-stats{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px;}
.metrica-stat{
  flex:1 1 160px; display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 16px;
}
.metrica-stat-valor{font-family:var(--font-display); font-size:1.7rem; font-weight:600; color:var(--ink); line-height:1.1;}
.metrica-stat-label{font-size:.78rem; color:var(--ink-soft); line-height:1.3; margin-top:8px;}
.metrica-stat-detalle{font-size:.72rem; color:var(--ink-soft); opacity:.85; line-height:1.3;}
.metrica-tendencia{margin-top:4px;}
.metrica-tendencia-chip{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; padding:3px 9px; border-radius:999px;}
.metrica-tendencia-chip svg{width:14px; height:14px; flex-shrink:0;}
.metrica-tendencia-chip small{font-weight:500; opacity:.8;}
.metrica-tendencia-chip.subida{background:#e7f9ef; color:#0a7d59;}
.metrica-tendencia-chip.bajada{background:#fdecee; color:#b3261e;}
.metrica-tendencia-chip.igual{background:var(--bg); color:var(--ink-soft);}
.metrica-tendencia-texto{font-size:.74rem; color:var(--ink-soft);}

.metricas-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:22px;}
@media (max-width:640px){ .metricas-grid-2{grid-template-columns:1fr;} }
.metricas-bloque h4{margin:0 0 10px; font-size:.9rem; color:var(--ink);}

.metrica-bar-row{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.metrica-bar-row:last-child{margin-bottom:0;}
.metrica-bar-label{flex:0 0 118px; font-size:.8rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.metrica-bar-track{flex:1; height:10px; background:var(--bg); border-radius:6px; overflow:hidden;}
.metrica-bar-fill{height:100%; min-width:3px; border-radius:0 4px 4px 0; transition:width .3s ease;}
.metrica-bar-valor{flex:0 0 auto; min-width:22px; text-align:right; font-size:.8rem; font-weight:600; color:var(--ink);}

/* Histograma de 24 horas: cada columna crece desde una sola línea base
   (borde inferior), remate redondeado (4px) arriba, cuadrado en la base. Un
   espacio (gap) entre columnas hace de separador en vez de un borde. */
.metricas-horas{margin-bottom:4px;}
/* Gráfico de horas punta: ancho acotado (no ocupa toda la card), barras finas
   y redondeadas, pestañas por día y eje de horas abajo. */
.horas-tabs{display:flex; gap:14px; flex-wrap:wrap; max-width:460px; margin-bottom:8px; border-bottom:1px solid var(--line);}
.horas-tab{
  all:unset; cursor:pointer; padding:4px 0 6px; font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.horas-tab.activa{color:var(--brand); border-bottom-color:var(--brand);}
.horas-tab:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px;}
.horas-pico{max-width:460px; margin:8px 0 10px; font-size:.82rem; color:var(--ink-soft);}
.horas-pico strong{color:var(--brand); font-weight:700; margin-right:4px;}
.metricas-horas{max-width:460px;}
.horas-area{
  height:110px; border-bottom:1px solid #b8bcc6;
  background:repeating-linear-gradient(to bottom, transparent 0 27px, var(--line) 27px 28px);
}
.horas-barras{display:flex; align-items:flex-end; height:100%;}
.horas-col{flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center;}
.horas-barra{width:9px; border-radius:999px; background:#9fb2f7; min-height:0; transition:height .4s ease;}
.horas-barra.pico{background:var(--brand);}
.horas-barra.ahora{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--ink);}
.horas-ejes{display:flex; margin-top:6px;}
.horas-ejes span{flex:1 1 0; min-width:0; text-align:center; font-size:.68rem; color:var(--ink-soft); white-space:nowrap;}
@media (prefers-reduced-motion:reduce){ .horas-barra{transition:none;} }

/* "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;}

/* "Directorio rápido" (panel.html, pestaña dedicada): agenda de negocios o
   personas que alguien registró a mano porque todavía no tienen cuenta en
   Komu. Cada tarjeta es como una ficha de contacto, con sus reseñas debajo. */
.directorio-rapido-cabecera{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.directorio-rapido-cabecera strong{display:block; margin-bottom:4px; font-size:1.05rem;}
.directorio-rapido-resumen{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--ink-soft);
}
.directorio-rapido-resumen .resena-estrellas-chicas{display:inline-flex; vertical-align:middle; margin-right:4px;}
.directorio-rapido-resenas{display:flex; flex-direction:column; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.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; align-items:center; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px;}
/* Oculta por defecto (en escritorio la pill de nivel ya se ve en el hero, ver
   .home-hero-top .nivel-pill): en móvil se muestra aquí, pegada a la derecha
   del mismo renglón que "Inicio"/"Premios". */
.tabs-perfil .nivel-pill{display:none;}
@media (max-width:600px){
  .tabs-perfil .nivel-pill{display:inline-flex; margin-left:auto;}
  /* Con tres pestañas ("Inicio", "Directorio rápido", "Premios") ya no caben
     todas en una sola fila sin encimarse en pantallas de celular — mismo
     patrón de siempre para carruseles de chips (display:block +
     white-space:nowrap): cada botón se desplaza en vez de encogerse o
     desbordar la pantalla. */
  .tabs-perfil{
    display:block; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .tabs-perfil::-webkit-scrollbar{display:none;}
  .tabs-perfil .nivel-pill{margin-left:10px; vertical-align:middle;}
}
.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); white-space:nowrap;
}
@media (max-width:600px){ .tab-btn{display:inline-block; margin-right:14px;} }
.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;}

/* Cuponera, lado del negocio (panel.html): mismo patrón de fila que
   .banner-negocio-item, pero sin campo de enlace — solo el tipo de uso. */
.cupones-negocio-grid{display:flex; flex-direction:column; gap:12px;}
.cupon-negocio-item{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:12px;
}
.cupon-negocio-item-controles{display:flex; align-items:center; gap:12px;}

/* Cuponera, lado de las personas (pestaña "Cuponera"): a diferencia de un
   banner (decorativo, se puede recortar sin problema), la imagen de un cupón
   lleva el texto de la oferta — object-fit:contain para nunca cortarlo. */
.cuponera-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px;}
.cupon-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); display:flex; flex-direction:column;}
.cupon-card-img{display:block; width:100%; height:180px; object-fit:contain; background:var(--bg);}
.cupon-card-body{padding:12px; display:flex; flex-direction:column; gap:4px;}
.cupon-card-negocio{display:flex; align-items:center; gap:8px; margin-bottom:2px;}
.cupon-card-negocio-logo{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; overflow:hidden;
  background:var(--brand-soft); color:var(--brand-dark); display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:700; font-family:var(--font-display);
}
.cupon-card-negocio-logo img{width:100%; height:100%; object-fit:cover;}
.cupon-card-negocio strong{font-size:.88rem;}

/* 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;}

/* Recuadro flotante con el mapa de un negocio (negocio.html, "Ver en el
   mapa"): más ancho que el modal genérico, para que el mapa se vea bien. */
.modal-box-mapa{max-width:640px;}
.modal-mapa-cabecera{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.modal-mapa-cabecera h3{display:flex; align-items:center; gap:6px;}
.modal-mapa-cabecera svg{width:18px; height:18px; flex-shrink:0; color:var(--brand);}
.btn-cerrar-modal{
  flex-shrink:0; background:none; border:none; width:28px; height:28px; padding:0;
  border-radius:50%; cursor:pointer; color:var(--ink-soft); font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.btn-cerrar-modal:hover{background:var(--bg); color:var(--ink);}
#mapa-negocio-modal{width:100%; height:340px; border-radius:12px; overflow:hidden;}
@media (max-width:600px){ #mapa-negocio-modal{height:260px;} }

/* 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;}

.admin-banners-negocio-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px;}
.admin-banner-negocio-item{position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.admin-banner-negocio-item img{display:block; width:100%; height:90px; object-fit:cover;}
.admin-banner-negocio-item .admin-icon-btn{position:absolute; top:6px; right:6px; background:rgba(255,255,255,.9);}

.admin-cuenta-vinculada-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; font-size:.88rem;}

/* Moderación de banners de negocio en la pestaña "Banners y avisos" (a
   diferencia de .admin-banner-negocio-item, este sí lleva un pie con el
   nombre del negocio y su enlace, porque aquí se listan de todo el
   directorio junto, no dentro de la ficha de un solo negocio ya identificado). */
.admin-banner-negocio-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.admin-banner-negocio-card img{display:block; width:100%; height:110px; object-fit:cover;}
.admin-banner-negocio-card-body{padding:10px 12px 0; display:flex; flex-direction:column; gap:6px;}
.admin-banner-negocio-card-body strong{font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.admin-banner-negocio-card-body input{font-size:.85rem; padding:8px 10px;}
.admin-banner-negocio-card-fila{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px 12px 10px;}

/* Celular (≤600px): nada se desplaza horizontalmente. Las filas de pastillas
   y pestañas se acomodan en varias líneas; los carruseles de cards pasan a
   dos columnas y los banners se apilan en vertical. */
@media (max-width:600px){
  .categorias-pills-scroll,
  .tabs-perfil{display:flex; flex-wrap:wrap; gap:8px; white-space:normal; overflow:visible; padding-bottom:0;}
  .promos-lista,
  .recomendados-lista{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; overflow:visible; scroll-snap-type:none; padding:2px 0 6px;}
  .promos-lista > *,
  .recomendados-lista > *{width:auto; flex:none; min-width:0;}
  .promos-activas-track{display:flex; flex-direction:column; overflow:visible; scroll-snap-type:none;}
  .promo-activa-item{flex:none; width:100%;}
  .promos-dots{display:none;}
}

/* Pantallas muy angostas (plegables, ≤480px): la cabecera de la ficha se apila
   y ningún bloque del mapa ni de la ficha fuerza un ancho mayor a la pantalla. */
.home-secundario,
.home-secundario > *,
.home-secundario-lateral,
.negperfil-head-info,
.mapa-card,
.mapa-lienzo,
.mapa-overlay{min-width:0; max-width:100%;}
.negperfil-head-info h1,
.negperfil-meta{overflow-wrap:anywhere;}
@media (max-width:760px){ .home-secundario{grid-template-columns:minmax(0,1fr);} }
@media (max-width:480px){
  .negperfil-head{flex-direction:column; align-items:flex-start; gap:12px;}
  .negperfil-logo{margin-top:-44px;}
}

/* Editor de medios de pago y costo a domicilio (panel del negocio). */
.operacion-editor{margin-top:6px;}
.operacion-medios{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.operacion-medio{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.9rem; cursor:pointer;}
.operacion-modo{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px;}
.operacion-modo label{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; cursor:pointer; font-size:.9rem;}
.operacion-rango{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px;}
.operacion-rango input{min-width:0;}
@media (max-width:480px){
  .operacion-rango{grid-template-columns:1fr 1fr;}
  .operacion-rango .rango-costo{grid-column:span 1;}
}