/* ============================================================
   estilos.css — Celulares Medellín
   Paleta: azul profundo (marca) + naranja (acción/venta) + ámbar (destacar)
   ============================================================ */
:root{
  --cm-azul:    #123262;
  --cm-azul-2:  #1a3f7a;
  --cm-naranja: #FF7A1A;
  --cm-naranja-2:#E8620A;
  --cm-ambar:   #F59E0B;
  --cm-verde:   #16A34A;
  --cm-wa:      #25D366;
  --cm-wa-oscuro:#075E54;   /* el verde-teal de las barras de WhatsApp */
  --cm-gris:    #F4F6F9;
  --cm-texto:   #1F2937;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--cm-texto);
}

/* Más aire a los lados del contenedor. El de Bootstrap trae solo .75rem de
   margen (--bs-gutter-x) y su ancho salta entre anchos fijos por punto de
   quiebre (540/720/960/1140/1320px): justo pasando un punto de quiebre casi
   no queda margen y el contenido se ve pegado al borde de la ventana — se
   notaba sobre todo a 100% de zoom en pantallas de portátil. */
.container{ --bs-gutter-x: 2rem; }

/* ── Reasignar el "primary" de Bootstrap ──
   Varias páginas usan utilidades sueltas de Bootstrap (text-primary,
   bg-primary, btn-outline-primary) sin pasar por las clases cm-*. Sin esto
   salen en el azul genérico de Bootstrap (#0d6efd), que no combina con el
   navy/naranja del resto del sitio. */
:root{
  --bs-primary: var(--cm-azul);
  --bs-primary-rgb: 18,50,98;
  --bs-primary-text-emphasis: var(--cm-azul);
  --bs-primary-bg-subtle: #dbe3ee;
  --bs-primary-border-subtle: #9fb0c9;
  --bs-link-color: var(--cm-azul);
  --bs-link-color-rgb: 18,50,98;
  --bs-link-hover-color: var(--cm-naranja-2);
  --bs-link-hover-color-rgb: 232,98,10;
}
.btn-primary{
  --bs-btn-bg:var(--cm-azul); --bs-btn-border-color:var(--cm-azul);
  --bs-btn-hover-bg:var(--cm-azul-2); --bs-btn-hover-border-color:var(--cm-azul-2);
  --bs-btn-active-bg:var(--cm-azul-2); --bs-btn-active-border-color:var(--cm-azul-2);
  --bs-btn-disabled-bg:var(--cm-azul); --bs-btn-disabled-border-color:var(--cm-azul);
}
.btn-outline-primary{
  --bs-btn-color:var(--cm-azul); --bs-btn-border-color:var(--cm-azul);
  --bs-btn-hover-bg:var(--cm-azul); --bs-btn-hover-border-color:var(--cm-azul);
  --bs-btn-active-bg:var(--cm-azul); --bs-btn-active-border-color:var(--cm-azul);
  --bs-btn-disabled-color:var(--cm-azul); --bs-btn-disabled-border-color:var(--cm-azul);
}

/* ── Navbar ── */
.cm-navbar{ background: linear-gradient(90deg, var(--cm-azul), var(--cm-azul-2)); }
/* white-space:nowrap es lo que evita que el ícono y el texto de cada link
   (p. ej. "Buscar") se partan en dos líneas cuando el navbar viene apretado
   (zoom 100% en pantallas de portátil, muchos ítems): sin esto, el texto
   se iba abajo del ícono en vez de quedar al lado. */
.cm-navbar .nav-link{ font-weight:500; white-space:nowrap; }
.cm-navbar .nav-link.active{ color:#fff !important; border-bottom:2px solid var(--cm-naranja); }
@media(min-width:992px){
  /* Menos aire por ítem en escritorio: con "Buscar" sumado a los demás,
     el padding por defecto de Bootstrap ya no cabía a 100% de zoom. */
  .cm-navbar .navbar-nav .nav-link{ padding-left:.6rem; padding-right:.6rem; }
}
.navbar-collapse.show{ background: var(--cm-azul); padding:12px; border-radius:8px; }

/* ── Aviso de modo fantasma ──
   Rojo a propósito: es una alerta ("estás viendo un perfil ajeno"), no un
   simple estado informativo, así que suena a advertencia y no a marca. */
.cm-fantasma{
  background:#B91C1C; color:#fff; padding:.55rem 0; font-size:.85rem; font-weight:600;
  text-align:center;
}
.cm-fantasma i{ color:#FCA5A5; }
.cm-fantasma-salir{
  display:inline-flex; align-items:center;
  color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  padding:.15rem .7rem; border-radius:20px; text-decoration:none; font-weight:700;
  transition:background .15s;
}
.cm-fantasma-salir:hover{ background:rgba(255,255,255,.3); color:#fff; }

/* ── Barra de subpaneles del dueño ──
   Cada módulo tiñe su propia pastilla (mismo color que su ícono en el
   dashboard) para que la barra se lea de un vistazo, no como texto plano. */
.cm-subnav{ background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.cm-sub{
  display:inline-flex; align-items:center;
  padding:.4rem .9rem; border-radius:30px;
  font-size:.9rem; font-weight:600; text-decoration:none;
  color:var(--cm-azul); background:var(--cm-gris);
  border:1px solid transparent; transition:all .15s;
}
.cm-sub:hover{ background:#e6ecf5; color:var(--cm-azul); transform:translateY(-1px); }
.cm-sub.activo{ background:var(--cm-azul); color:#fff; }

.cm-sub-repuestos:hover{ background:#EFE6FD; color:#7C3AED; }
.cm-sub-repuestos.activo{ background:#7C3AED; color:#fff; }
.cm-sub-accesorios:hover{ background:#FFEADA; color:var(--cm-naranja-2); }
.cm-sub-accesorios.activo{ background:var(--cm-naranja); color:#fff; }
.cm-sub-taller:hover{ background:#FEF3C7; color:#B45309; }
.cm-sub-taller.activo{ background:var(--cm-ambar); color:#fff; }
.cm-sub-computadores:hover{ background:#DFF5FA; color:#0891B2; }
.cm-sub-computadores.activo{ background:#0891B2; color:#fff; }
.cm-sub-juegos:hover{ background:#FCE4F0; color:#DB2777; }
.cm-sub-juegos.activo{ background:#DB2777; color:#fff; }
.cm-sub-electrodomesticos:hover{ background:#DAF5E8; color:#059669; }
.cm-sub-electrodomesticos.activo{ background:#059669; color:#fff; }
.cm-sub-ventas:hover{ background:#DCFCE7; color:var(--cm-verde); }
.cm-sub-ventas.activo{ background:var(--cm-verde); color:#fff; }

/* ── Tarjetas de métrica del dashboard ── */
.cm-metrica{
  border:none; border-radius:14px; background:#fff;
  border-top:3px solid var(--cm-azul);
  box-shadow:0 4px 14px rgba(15,44,89,.08);
  transition:transform .2s, box-shadow .2s;
}
.cm-metrica:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(15,44,89,.14); }
.cm-ico{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:#fff; background:var(--cm-azul);
  transition:transform .2s;
}
.cm-metrica:hover .cm-ico{ transform:scale(1.08) rotate(-4deg); }
.cm-metrica .cm-valor{ font-size:1.7rem; font-weight:700; line-height:1.1; }
.cm-metrica .cm-etiqueta{ font-size:.82rem; color:#6B7280; text-transform:uppercase; letter-spacing:.03em; }

/* Variantes de color del ícono, una por módulo — el borde superior de la
   tarjeta hereda el mismo color para que la cuadrícula del panel se vea
   variada en vez de un bloque azul repetido. */
.ico-celulares{ background:var(--cm-azul); }
.ico-repuestos{ background:#7C3AED; }
.ico-accesorios{ background:var(--cm-naranja); }
.ico-taller{ background:var(--cm-ambar); }
.ico-computadores{ background:#0891B2; }
.ico-juegos{ background:#DB2777; }
.ico-electrodomesticos{ background:#059669; }
.ico-ventas{ background:var(--cm-verde); }
.ico-clientes{ background:#EF4444; }

.cm-metrica:has(.ico-celulares){ border-top-color:var(--cm-azul); }
.cm-metrica:has(.ico-repuestos){ border-top-color:#7C3AED; }
.cm-metrica:has(.ico-accesorios){ border-top-color:var(--cm-naranja); }
.cm-metrica:has(.ico-taller){ border-top-color:var(--cm-ambar); }
.cm-metrica:has(.ico-computadores){ border-top-color:#0891B2; }
.cm-metrica:has(.ico-juegos){ border-top-color:#DB2777; }
.cm-metrica:has(.ico-electrodomesticos){ border-top-color:#059669; }
.cm-metrica:has(.ico-ventas){ border-top-color:var(--cm-verde); }
.cm-metrica:has(.ico-clientes){ border-top-color:#EF4444; }

/* ── Tarjeta de producto ── */
.cm-producto{
  border:1px solid #C7CED9; border-radius:14px; overflow:hidden;
  background:#fff; height:100%; transition:transform .2s, box-shadow .2s;
}
.cm-producto:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.cm-producto .cm-img{
  aspect-ratio:4/3; width:100%; object-fit:cover; background:var(--cm-gris);
}
.cm-producto .cm-sinimg{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--cm-gris); color:#9CA3AF; font-size:2.4rem;
}
.cm-precio{ font-size:1.15rem; font-weight:700; color:var(--cm-naranja-2); }
.cm-precio-antes{ font-size:.85rem; color:#9CA3AF; text-decoration:line-through; }
.cm-precio-color{ color:var(--cm-naranja-2); }

/* ── Botones ── */
.btn-cm{ background:var(--cm-azul); border-color:var(--cm-azul); color:#fff; }
.btn-cm:hover{ background:var(--cm-azul-2); border-color:var(--cm-azul-2); color:#fff; }
.btn-wa{ background:var(--cm-wa); border-color:var(--cm-wa); color:#fff; }
.btn-wa:hover{ background:#1eb958; border-color:#1eb958; color:#fff; }

/* ── Botón de Google (mismo aspecto que el oficial) ── */
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:.6rem 1rem;
  background:#fff; color:#3c4043; font-weight:600;
  border:1px solid #dadce0; border-radius:8px; text-decoration:none;
  transition:background .15s, box-shadow .15s;
}
.btn-google:hover{ background:#f7f8f8; box-shadow:0 1px 3px rgba(60,64,67,.3); color:#3c4043; }
.btn-google svg{ width:18px; height:18px; }

/* Variante solo-ícono: para ponerlo al lado de otro botón sin ocupar una fila
   completa (p. ej. junto a "Entrar" en login.php). */
.btn-google-icono{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:46px;
  background:#fff; border:1px solid #dadce0; border-radius:8px;
  transition:background .15s, box-shadow .15s;
}
.btn-google-icono:hover{ background:#f7f8f8; box-shadow:0 1px 3px rgba(60,64,67,.3); }
.btn-google-icono svg{ width:20px; height:20px; }

/* Variante para meterlo dentro de la navbar oscura, junto a "Entrar": más
   chico y redondo, para que se vea como un accesorio del link, no como un
   botón de formulario suelto. */
.btn-google-icono-nav{
  width:auto; height:auto; padding:.6rem .7rem; border-radius:20px;
  border-color:rgba(255,255,255,.5);
}
.btn-google-icono-nav svg{ width:16px; height:16px; }
.btn-google-icono-nav:hover{ box-shadow:0 0 0 3px rgba(255,255,255,.25); }
@media(max-width:991.98px){
  /* En el menú colapsado (móvil) las filas son de ancho completo: aquí sí
     tiene sentido que ocupe su fila con más aire, como los demás links. */
  .btn-google-icono-nav{ width:auto; height:auto; border-radius:8px; padding:.5rem 1rem; gap:.5rem; }
  .btn-google-icono-nav svg{ width:18px; height:18px; }
  .btn-google-icono-nav::after{ content:"Entrar con Google"; font-weight:500; color:#3c4043; }
}

/* ── Portada pública ── */
.cm-hero{
  background:linear-gradient(135deg, var(--cm-azul) 0%, #7a3e2e 60%, var(--cm-naranja) 100%);
  color:#fff; padding:3rem 0 2.5rem;
}
/* Título más grande que un h1 normal: es la carta de presentación del sitio,
   tiene que notarse desde el primer segundo. */
.cm-hero-titulo{ font-size:clamp(2.2rem, 5vw, 3.2rem); letter-spacing:-.02em; }
.cm-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem 1rem; border-radius:30px; text-decoration:none;
  background:rgba(255,255,255,.15); color:#fff; font-weight:600; font-size:.9rem;
  border:1px solid rgba(255,255,255,.25); transition:background .15s;
}
.cm-chip:hover{ background:rgba(255,255,255,.28); color:#fff; }
.cm-chip.activo{ background:#fff; color:var(--cm-azul); }

/* Cifras reales de la portada, en una sola línea: dan confianza sin robarle
   pantalla al catálogo, que es lo que la gente vino a ver. */
.cm-hero-stats-inline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem;
  font-size:.85rem; opacity:.92;
}
.cm-hero-stats-inline strong{ font-weight:800; }
.cm-hero-stats-inline i{ opacity:.75; }
.cm-hero-stats-sep{ opacity:.4; }
@media(max-width:575.98px){
  .cm-hero-stats-inline{ font-size:.78rem; gap:.3rem .6rem; }
}

/* Avatar de tienda destacada: logo si tiene, si no la inicial — mismo
   fallback que el resto del sitio (cm-tienda-avatar, cm-chat-avatar). */
.cm-destacada-avatar{
  width:52px; height:52px; border-radius:50%; overflow:hidden;
  background:var(--cm-gris); color:var(--cm-azul);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:700;
}
.cm-destacada-avatar img{ width:100%; height:100%; object-fit:cover; }

/* ── Buscador con sugerencias en vivo (hero + barra flotante) ──
   Mismo patrón visual en los dos: el campo no crece, el desplegable hace el
   trabajo. Va en position:absolute sobre el wrapper (no fixed como en
   amobladomedellin.com): aquí el contenedor no recorta con overflow, así
   que no hace falta que el JS lo reubique en cada scroll. */
.cm-busca-wrap{ position:relative; }
.cm-busca-wrap .form-control{ padding-right:2.6rem; }
.cm-busca-x{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border:none; border-radius:50%;
  background:#94a3b8; color:#fff; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; line-height:1; padding:0 0 1px 0;
  transition:background .15s, transform .15s;
}
.cm-busca-x.visible{ display:flex; }
.cm-busca-x:hover{ background:#dc2626; transform:translateY(-50%) scale(1.08); }

.cm-suge-box{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  max-height:60vh; overflow-y:auto;
  background:#fff; border:1px solid #e9edf0; border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  z-index:1030; display:none; padding:.3rem; color:#222;
}
.cm-suge-box.abierto{ display:block; }
.cm-suge-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; border-radius:10px;
  text-decoration:none; color:#222; cursor:pointer;
}
.cm-suge-item:hover, .cm-suge-item.activo{ background:var(--cm-gris); }
.cm-suge-ico{ font-size:1rem; flex-shrink:0; }
.cm-suge-txt{ min-width:0; flex:1; }
.cm-suge-t{ display:block; font-size:.82rem; font-weight:700; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-suge-n{ display:block; font-size:.71rem; color:#5a6570; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.05rem; }
.cm-suge-vacio{ padding:.8rem .7rem; font-size:.8rem; color:#5a6570; text-align:center; }
.cm-suge-todo{
  display:block; text-align:center; font-size:.76rem; font-weight:700; color:var(--cm-azul);
  padding:.5rem; border-top:1px solid #f0f2f4; margin-top:.2rem; text-decoration:none;
}

/* Barra flotante: aparece bajo el navbar (sticky-top) al bajar del buscador
   del hero, y se oculta/asoma según la dirección del scroll (index.php la
   controla) — igual que amobladomedellin.com. Con más de mil productos en
   scroll infinito, es la única forma de volver a buscar sin arrastrar hasta
   arriba del todo. */
.cm-buscador-flotante{
  position:fixed; top:var(--cm-nav-h, 60px); left:0; right:0; z-index:1020;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.12);
  padding:.6rem 0; opacity:0; pointer-events:none;
  /* -100% (su propio alto) NO basta para esconderla del todo: su "top" ya
     está corrido var(--cm-nav-h) hacia abajo (para quedar bajo el navbar),
     así que hay que restar también eso o queda "a medio salir" arriba. */
  transform:translateY(calc(-100% - var(--cm-nav-h, 60px)));
  transition:transform .25s ease, opacity .2s ease;
}
.cm-buscador-flotante.visible{ opacity:1; pointer-events:auto; }
.cm-buscador-flotante.visible:not(.oculta){ transform:translateY(0); }
.cm-buscador-flotante.visible.oculta{ transform:translateY(calc(-100% - var(--cm-nav-h, 60px))); }
.cm-busca-flot-form{ display:flex; align-items:center; gap:.5rem; }
.cm-busca-wrap-flot{ flex:1 1 auto; min-width:0; }
.cm-busca-flot-btn{
  flex-shrink:0; width:42px; height:42px; border:none; border-radius:50%;
  background:var(--cm-azul); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.cm-busca-flot-btn:hover{ background:var(--cm-azul-2); }

/* ── Cabecera del micrositio (estilo página de red social) ──
   La portada es el fondo y el avatar se monta sobre ella con margen negativo.
   En móvil el bloque se apila y el avatar se encoge para no comerse la pantalla. */
.cm-tienda-cabecera{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.cm-tienda-portada{
  height:260px;
  background:linear-gradient(135deg,var(--cm-azul) 0%,#7a3e2e 60%,var(--cm-naranja) 100%);
  background-size:cover; background-position:center;
}
.cm-tienda-datos{
  display:flex; gap:1.25rem; align-items:center;
  padding:0 0 1.25rem; margin-top:-58px;
}
/* El nombre queda montado sobre la portada (por el margen negativo de arriba):
   un contorno blanco lo mantiene legible sin importar qué tan oscuro u
   oscuro/claro sea el color de la portada justo detrás de la letra. */
.cm-tienda-datos .flex-grow-1 > *{
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 0 6px rgba(255,255,255,.85);
}
.cm-tienda-avatar{
  flex:0 0 auto; width:150px; height:150px; border-radius:50%;
  border:5px solid #fff; background:var(--cm-gris); overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
}
.cm-tienda-avatar img{ width:100%; height:100%; object-fit:cover; }
.cm-tienda-inicial{ font-size:3.4rem; font-weight:700; color:var(--cm-azul); }

@media(max-width:767.98px){
  .cm-tienda-portada{ height:150px; }
  .cm-tienda-datos{ flex-direction:column; align-items:flex-start; gap:.75rem; margin-top:-46px; }
  .cm-tienda-avatar{ width:96px; height:96px; border-width:4px; }
  .cm-tienda-inicial{ font-size:2.2rem; }
}

/* ── Chat interno (estilo WhatsApp) ── */

/* Círculo de avatar: foto o logo del micrositio si hay, si no la inicial.
   Cuando el otro tiene micrositio, el círculo es un <a target="_blank">
   propio (no anidado dentro del link de la conversación) para poder abrirlo
   sin disparar el clic de "abrir esta conversación". */
.cm-chat-avatar{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--cm-gris); color:var(--cm-azul);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-decoration:none;
}
.cm-chat-avatar img{ width:100%; height:100%; object-fit:cover; }
.cm-chat-avatar-inicial{ font-size:1.1rem; font-weight:700; }
a.cm-chat-avatar{
  box-shadow:0 0 0 2px transparent; transition:box-shadow .15s;
  cursor:pointer;
}
a.cm-chat-avatar:hover{ box-shadow:0 0 0 2px var(--cm-wa); }  /* insinúa "esto abre algo" */
.cm-chat-avatar-sin-enlace{ cursor:default; }
.cm-chat-avatar-lg{ width:48px; height:48px; }
.cm-chat-avatar-lg .cm-chat-avatar-inicial{ font-size:1.25rem; }

/* Paleta: dentro de .cm-chat se cambia el azul de marca por el verde-teal de
   WhatsApp, para que la pantalla se sienta como esa app y no como el resto
   del sitio. Va escopado a .cm-chat para no tocar el resto de tarjetas del
   sitio, que sí deben quedarse en azul. */
.cm-chat .card-header{
  background:var(--cm-wa-oscuro); color:#fff; border-bottom:0;
}
.cm-chat .card-header a{ color:#D9FDD3; }
.cm-chat .card-header a:hover{ color:#fff; }
.cm-chat .card-header .badge.bg-light{
  background:rgba(255,255,255,.18) !important; color:#fff !important; border-color:rgba(255,255,255,.35) !important;
}
.cm-chat .card-header .cm-chat-avatar{ box-shadow:0 0 0 2px rgba(255,255,255,.45); }
.cm-chat .card-header a.cm-chat-avatar:hover{ box-shadow:0 0 0 2px #fff; }

/* Conversación activa: el gris verdoso de la lista de WhatsApp, no el azul
   genérico de Bootstrap. */
.cm-chat .list-group-item-action.active{
  background:#F0F2F5; color:inherit; border-color:transparent;
}
.cm-chat .list-group-item-action:not(.active):hover{ background:#F5F6F6; }

.cm-chat .badge.bg-danger{ background-color:var(--cm-wa) !important; }  /* sin leer, en verde */

.cm-chat .btn-cm{ background:var(--cm-wa); border-color:var(--cm-wa); }
.cm-chat .btn-cm:hover{ background:#1DA851; border-color:#1DA851; }
.cm-chat .form-control:focus{
  border-color:var(--cm-wa); box-shadow:0 0 0 .2rem rgba(37,211,102,.2);
}

/* Fondo del hilo: el patrón tejido claro de WhatsApp, muy sutil */
#hilo{
  background-color:#EFEAE2;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0,0,0,.02) 0, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,.02) 0, transparent 40%);
}

.cm-burbuja{
  position:relative; max-width:75%; padding:.55rem .85rem; border-radius:8px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15);
  font-size:.92rem; word-break:break-word;
}
.cm-burbuja.mia{ background:#D9FDD3; }      /* el verde de "lo mío", como en WhatsApp */
.cm-burbuja-hora{ font-size:.7rem; color:#6B7280; text-align:right; margin-top:.15rem; }

/* Contador de mensajes sin leer en el navbar */
.cm-badge-chat{
  position:absolute; top:2px; right:-2px;
  font-size:.62rem; padding:.18rem .38rem;
}

/* ── Footer ── */
.cm-footer{ background:var(--cm-azul); color:#D1D5DB; }
.cm-footer a{ color:#9CD8F5; text-decoration:none; }
.cm-footer a:hover{ text-decoration:underline; }

/* ── Búsqueda: la "x" nativa de input[type=search] ──
   Chrome la pinta gris oscuro, y sobre el degradado del hero se pierde. Se
   fuerza a blanco ahí y se agranda un poco: en móvil el objetivo por defecto
   queda demasiado pequeño para el dedo. Firefox no la muestra: para eso está
   el botón "Limpiar", que además borra los demás filtros. */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none; appearance: none;
  width:16px; height:16px; margin-left:6px; cursor:pointer; opacity:.55;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 6.6 13.4.9l1.7 1.7L9.7 8l5.4 5.4-1.7 1.7L8 9.7l-5.4 5.4-1.7-1.7L6.3 8 .9 2.6 2.6.9z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 6.6 13.4.9l1.7 1.7L9.7 8l5.4 5.4-1.7 1.7L8 9.7l-5.4 5.4-1.7-1.7L6.3 8 .9 2.6 2.6.9z'/></svg>") center/contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover{ opacity:1; }

/* Etiqueta de un filtro activo. La "x" quita ese filtro y deja los demás. */
.cm-etiqueta-filtro{
  display:inline-flex; align-items:center;
  padding:.3rem .7rem; border-radius:30px; text-decoration:none;
  font-size:.82rem; font-weight:600;
  color:var(--cm-azul); background:#E8F1FB; border:1px solid #CBDFF5;
}
.cm-etiqueta-filtro:hover{ background:#D6E7F8; color:var(--cm-azul); }
.cm-etiqueta-filtro i{ opacity:.6; font-size:.75rem; }
.cm-etiqueta-filtro:hover i{ opacity:1; }

/* Botón "Limpiar": quita búsqueda Y filtros de una vez. */
.cm-limpiar{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .9rem; border-radius:30px; text-decoration:none;
  font-size:.85rem; font-weight:600;
  color:#B91C1C; background:#FEF2F2; border:1px solid #FECACA;
}
.cm-limpiar:hover{ background:#FEE2E2; color:#991B1B; }

/* ── Utilidades ── */
.cm-vacio{
  text-align:center; padding:3rem 1rem; color:#6B7280;
  border:2px dashed #D1D5DB; border-radius:14px; background:#fff;
}
.cm-vacio > i{ font-size:2.5rem; color:#9CA3AF; }

/* ── Botón flotante "Volver arriba" ──
   Aparece solo tras bajar un tramo largo (ver umbral en footer.php): con un
   umbral chico sale casi al primer scroll y deja de sentirse útil. */
/* "Volver arriba" queda sobre "Compartir" en la pila flotante — "ayuda" ya
   no vive aquí, se mudó al navbar (junto a "Registra tu tienda" / el menú
   de usuario), así que la pila de abajo-derecha quedó con solo estos dos. */
.cm-arriba{
  position:fixed; bottom:6.5rem; right:1.5rem; z-index:1090;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:var(--cm-azul); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(18,50,98,.4);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .25s, transform .2s, background .15s;
}
.cm-arriba.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.cm-arriba:hover{ background:var(--cm-naranja); transform:translateY(0) scale(1.08); }
@media(max-width:575.98px){
  .cm-arriba{ bottom:5.5rem; right:1rem; width:44px; height:44px; }
}

/* ── Botón flotante "Compartir" (solo páginas públicas) ──
   Comparte la URL y el título de la página donde esté: en index.php
   comparte el sitio, en tienda.php comparte esa tienda puntual — no hace
   falta distinguir casos porque toma window.location.href tal cual.
   Ocupa el puesto de abajo (antes era el de "ayuda"). */
.cm-compartir-btn{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:1091;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--cm-naranja); color:#fff; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(255,122,26,.4);
}
.cm-compartir-btn:hover{ background:var(--cm-naranja-2); }
.cm-compartir-panel{
  position:fixed; bottom:6.9rem; right:1.5rem; width:210px; z-index:1092;
  background:#fff; border-radius:16px; box-shadow:0 10px 35px rgba(0,0,0,.18);
  padding:8px; display:none; flex-direction:column; gap:4px;
}
@media(max-width:575.98px){
  .cm-compartir-btn{ bottom:1rem; right:1rem; width:44px; height:44px; }
  .cm-compartir-panel{ bottom:5.9rem; right:1rem; }
}
.cm-compartir-panel.visible{ display:flex; }
.cm-compartir-opt{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  text-decoration:none; color:var(--cm-texto); font-size:.88rem; font-weight:600;
  border:none; background:none; width:100%; text-align:left; font-family:inherit; cursor:pointer;
}
.cm-compartir-opt:hover{ background:var(--cm-gris); color:var(--cm-texto); }
.cm-compartir-ic{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem;
}

/* ── Botón de ayuda contextual (recorrido guiado) ──
   Vive en el navbar, junto a "Registra tu tienda" (sitio público) o al final
   del menú de usuario (paneles privados) — ya no flota. Oculto por defecto:
   solo tour.js lo muestra, y solo si la página define un recorrido
   (window.CM_TOUR). Un botón "?" que no hace nada es peor que no tener botón. */
.cm-ayuda{
  display:none; width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55); background:transparent; cursor:pointer;
  color:#fff; font-weight:800; font-size:.9rem; line-height:1;
  align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
}
.cm-ayuda.visible-siempre{ display:flex; }
.cm-ayuda:hover{ background:rgba(255,255,255,.18); transform:scale(1.08); }

/* ── Recorrido guiado: elemento resaltado + tarjeta flotante ── */
.cm-tour-resaltado{
  position:relative; z-index:10050;
  outline:3px solid var(--cm-naranja); outline-offset:3px; border-radius:10px;
  box-shadow:0 0 0 4px rgba(255,122,26,.25), 0 0 24px rgba(255,122,26,.5);
}
.cm-tour-tarjeta{
  position:fixed; z-index:10060; width:320px; max-width:calc(100vw - 24px);
  background:#fff; border-radius:14px; padding:1rem 1.1rem;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.cm-tour-tarjeta.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.cm-tour-cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.35rem; }
.cm-tour-paso{ font-size:.72rem; font-weight:700; color:var(--cm-naranja-2); text-transform:uppercase; letter-spacing:.04em; }
.cm-tour-cerrar{
  background:none; border:none; font-size:1.35rem; line-height:1; color:#9CA3AF;
  cursor:pointer; padding:0 .2rem;
}
.cm-tour-cerrar:hover{ color:#374151; }
.cm-tour-titulo{ font-size:1rem; font-weight:700; margin-bottom:.35rem; color:var(--cm-texto); }
.cm-tour-texto{ font-size:.87rem; color:#4B5563; margin-bottom:.9rem; }
.cm-tour-pie{ display:flex; justify-content:space-between; align-items:center; }
.cm-tour-saltar{ background:none; border:none; color:#9CA3AF; font-size:.8rem; cursor:pointer; padding:0; }
.cm-tour-saltar:hover{ color:#6B7280; text-decoration:underline; }
.cm-tour-nav{ display:flex; gap:.5rem; }
.cm-tour-atras, .cm-tour-sig{
  border:none; border-radius:8px; padding:.4rem .85rem; font-size:.82rem; font-weight:600; cursor:pointer;
}
.cm-tour-atras{ background:var(--cm-gris); color:var(--cm-texto); }
.cm-tour-atras:hover{ background:#e5e9ef; }
.cm-tour-sig{ background:var(--cm-naranja); color:#fff; }
.cm-tour-sig:hover{ background:var(--cm-naranja-2); }

/* Un pastel distinto por rol: mismo layout de headerPrivado.php para los
   tres, así que el color de fondo es la pista rápida de "en qué panel estoy"
   sin tener que leer el navbar. */
.cm-panel-superadmin{ background:#FBEAEA; }   /* rojizo */
.cm-panel-dueno{      background:#FDF0E4; }   /* naranja claro */
.cm-panel-interesado{ background:#E9F7EF; }   /* verde claro */

/* ── Suscripción (pago manual Nequi) ── */
.text-cm-azul{ color:var(--cm-azul); }
.text-wa{ color:var(--cm-wa); }

.cm-mes-btn{
  flex:1; min-width:70px; text-align:center; cursor:pointer;
  border:2px solid #E5E7EB; border-radius:12px; padding:.5rem .9rem;
  background:#fff; transition:border-color .15s, background .15s;
}
.cm-mes-btn:hover{ border-color:var(--cm-azul); }
.cm-mes-btn.sel{ border-color:var(--cm-azul); background:var(--cm-gris); }
.cm-mes-num{ font-size:1.3rem; font-weight:900; color:var(--cm-azul); line-height:1; }
.cm-mes-lbl{ font-size:.62rem; color:#888; font-weight:600; text-transform:uppercase; }
.cm-mes-desc{ font-size:.68rem; color:var(--cm-verde); font-weight:700; margin-top:.15rem; }

.cm-precio-wrap{ background:var(--cm-gris); border-radius:14px; padding:1.2rem 1.5rem; }
.cm-nequi-card{ background:#F0FDF4; border:1.5px solid #86EFAC !important; }
.cm-cortesia-card{ border:1.5px dashed var(--cm-ambar) !important; background:#FFFBEB; }

/* ── Autocompletar Ciudad (assets/js/ciudad-autocomplete.js) ──
   Lista flotante bajo el input; el JS solo la enseña cuando hay resultados,
   así que aquí solo hace falta el aspecto, no el show/hide. */
.cm-ciudad-sugerencias{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:1060;
  margin-top:2px; max-height:240px; overflow-y:auto;
  background:#fff; border:1px solid #E5E7EB; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.cm-ciudad-sugerencias.visible{ display:block; }
.cm-ciudad-opcion{ padding:.5rem .75rem; font-size:.88rem; cursor:pointer; }
.cm-ciudad-opcion .cm-ciudad-depto{ color:#6B7280; font-size:.8rem; }
.cm-ciudad-opcion:hover, .cm-ciudad-opcion.activo{ background:var(--cm-gris); }