/* Cofipot Sidebar Polish v4 — Fix icon font + reduce spacing */

/* ==== Font Inter SOLO para texto del sidebar (NO afecta icon fonts) ==== */
#pnav,
#pnav > li,
#pnav > li > a,
#pnav > li > a > span,
#pnav > li > ul > li > a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.005em;
}

/* CRITICAL: NO tocar font-family de los iconos .lnr — ellos usan su propia font */
#pnav .lnr,
#pnav i.lnr,
#pnav .icon,
#pnav i {
  /* font-family se hereda de Linearicons (no se override) */
}

/* ==== Items del sidebar — compactos ==== */
#pnav > li {
  margin: 0 !important;
  padding: 0 !important;
}

#pnav > li > a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  height: auto !important;
}

#pnav > li > a > i.lnr,
#pnav > li > a > .lnr {
  font-size: 16px !important;
  margin-right: 10px !important;
  opacity: 0.85;
  vertical-align: middle;
}

#pnav > li > a:hover > i.lnr,
#pnav > li > a:hover > .lnr {
  opacity: 1;
}

#pnav > li > a > span {
  vertical-align: middle;
}

/* ==== Section divider OPERACIONES — compacto ==== */
#pnav > li.menu-section-divider {
  padding: 12px 18px 4px !important;
  font-size: 10px !important;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32) !important;
  letter-spacing: 0.1em;
  list-style: none;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-weight: 600 !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* ==== Items manual "_quick" — compactos ==== */
#pnav > li.canjear_quick,
#pnav > li.equipo_quick,
#pnav > li.cumples_quick,
#pnav > li.smtp_quick,
#pnav > li.wa_quick {
  list-style: none;
  display: block;
  margin: 0 !important;
}

#pnav > li.canjear_quick > a,
#pnav > li.equipo_quick > a,
#pnav > li.cumples_quick > a,
#pnav > li.smtp_quick > a,
#pnav > li.wa_quick > a {
  color: #b1b2ba;
  padding: 8px 14px !important;
  display: block;
  text-decoration: none;
  position: relative;
  text-align: left;
  margin: 2px 12px !important;
  border-radius: 8px;
  transition: all 0.2s ease;
  height: auto !important;
  line-height: 1.6 !important;
  font-size: 13.5px;
  font-weight: 500;
}

#pnav > li.canjear_quick > a:hover,
#pnav > li.equipo_quick > a:hover,
#pnav > li.cumples_quick > a:hover,
#pnav > li.smtp_quick > a:hover,
#pnav > li.wa_quick > a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

#pnav > li.canjear_quick > a > .lnr,
#pnav > li.equipo_quick > a > .lnr,
#pnav > li.cumples_quick > a > .lnr,
#pnav > li.smtp_quick > a > .lnr,
#pnav > li.wa_quick > a > .lnr {
  font-size: 16px;
  margin-right: 10px;
  vertical-align: middle;
  opacity: 0.8;
}

#pnav > li.canjear_quick > a > span,
#pnav > li.equipo_quick > a > span,
#pnav > li.cumples_quick > a > span,
#pnav > li.smtp_quick > a > span,
#pnav > li.wa_quick > a > span {
  vertical-align: middle;
  font-weight: 500;
}

/* ==== Resaltar CAMPAÑAS ==== */
#pnav > li.marketing > a {
  position: relative;
  background: linear-gradient(95deg, rgba(81,52,235,0.18), rgba(121,88,255,0.08)) !important;
  border-left: 3px solid #7958ff !important;
  margin: 4px 8px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  transition: all 0.2s ease;
}

#pnav > li.marketing > a:hover {
  background: linear-gradient(95deg, rgba(81,52,235,0.30), rgba(121,88,255,0.15)) !important;
  transform: translateX(2px);
}

#pnav > li.marketing > a > i.lnr {
  color: #b09aff !important;
  opacity: 1 !important;
}

#pnav > li.marketing > a::after {
  content: '✨';
  font-family: -apple-system, "Segoe UI Emoji", sans-serif !important;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.7;
}

/* ==== Badge NEW en Email (SMTP) y WhatsApp API ==== */
#pnav > li.smtp_quick > a::after,
#pnav > li.wa_quick > a::after {
  content: 'NEW';
  font-family: 'Inter', sans-serif !important;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(255, 87, 34, 0.4);
}

/* ==== Cupones hover: mantener amarillo, no oscurecer ==== */
#pnav > li.cupones > a:hover {
  background: linear-gradient(180deg, rgba(253,200,0,1) 0%, rgba(255,213,30,1) 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.35);
}
#pnav > li.cupones > a:hover .lnr,
#pnav > li.cupones > a:hover span {
  color: #000 !important;
}

/* ==== Botón WhatsApp del footer ==== */
.menu_btn_wsp {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ==== Estado activo ==== */
#pnav > li.activo > a,
#pnav > li > a.activo {
  background: linear-gradient(90deg, rgba(81,52,235,0.25), rgba(81,52,235,0.10)) !important;
  color: #ffffff !important;
  border-left: 3px solid #7958ff;
}

/* ==== WhatsApp page width fix ==== */
.wa-page {
  max-width: none !important;
  width: 100%;
  padding: 16px 24px !important;
  box-sizing: border-box;
}

/* === FIX v4.1: matar line-height: 45px que viene de main.css === */
#pnav > li > a > .lnr,
#pnav > li > a > span,
#pnav > li.cumples_quick > a > .lnr,
#pnav > li.cumples_quick > a > span,
#pnav > li.equipo_quick > a > .lnr,
#pnav > li.equipo_quick > a > span,
#pnav > li.smtp_quick > a > .lnr,
#pnav > li.smtp_quick > a > span,
#pnav > li.wa_quick > a > .lnr,
#pnav > li.wa_quick > a > span,
#pnav > li.canjear_quick > a > .lnr,
#pnav > li.canjear_quick > a > span {
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

#pnav > li > a {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
}

#pnav > li.marketing > a {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 18px !important;
  line-height: 1.4 !important;
}

/* Items individuales — padding más chico */
#pnav > li > a {
  padding: 9px 18px !important;
}

/* === FIX v4.2: tighter spacing — kill the 5px 35px margin que separa cada item === */
#pnav > li > a {
  margin: 1px 8px !important;
  padding: 7px 14px !important;
  border-radius: 7px !important;
}

#pnav > li.marketing > a {
  margin: 2px 8px !important;
  padding: 8px 14px !important;
}

#pnav > li.cupones > a {
  margin: 8px 12px !important;
  padding: 11px 14px !important;
}

#pnav > li.canjear_quick > a,
#pnav > li.equipo_quick > a,
#pnav > li.cumples_quick > a,
#pnav > li.smtp_quick > a,
#pnav > li.wa_quick > a {
  margin: 1px 8px !important;
  padding: 7px 14px !important;
}

#pnav > li.menu-section-divider {
  margin-top: 6px !important;
  padding: 10px 14px 4px !important;
}

/* === v4.3: indentar icono+texto (no centrado, solo corridos a la derecha) === */
#pnav > li > a {
  padding: 7px 14px 7px 28px !important;
}
#pnav > li.marketing > a {
  padding: 8px 14px 8px 28px !important;
}
#pnav > li.cupones > a {
  padding: 11px 14px 11px 28px !important;
}
#pnav > li.canjear_quick > a,
#pnav > li.equipo_quick > a,
#pnav > li.cumples_quick > a,
#pnav > li.smtp_quick > a,
#pnav > li.wa_quick > a {
  padding: 7px 14px 7px 28px !important;
}
#pnav > li.menu-section-divider {
  padding: 10px 14px 4px 28px !important;
}

/* === v5: métricas — fixes mobile + polish === */
@media (max-width: 980px){
  html, body { overflow-x: hidden; }
  .metricas .card { height: auto !important; min-height: 0 !important; }
  .metricas .card.nopadding { padding-bottom: 110px !important; }
  .metricas .card .grafico { height: 96px !important; }
  .metricas .card.black.mranking { padding-bottom: 54px !important; }
  .metricas .mpuntos { float: none !important; display: flex; align-items: center; gap: 8px; margin: 16px 20px 0 !important; font-size: 30px !important; }
  .mgmaps { height: 22px !important; bottom: 12px !important; right: 14px !important; }
  .metricas .mtitle { padding: 14px 20px 2px !important; font-size: 17px !important; }
  .metricas .minfo { padding: 0 20px 14px !important; }
  .suc_spacing .fright { float: none !important; display: block; margin: 0 0 12px !important; }
  .metricas .frase { font-size: 15px !important; line-height: 1.5 !important; padding: 20px !important; height: auto !important; }
  .iinfo .tooltip { max-width: 78vw; }
}
@media (max-width: 600px){
  .metricas .card { max-width: 100% !important; margin: 12px 0 !important; }
}

/* === v6: menú lateral cohesivo (desktop + drawer) === */
/* contenedor: menos aire muerto bajo el logo */
.navlat #pnav { margin-top: 6px !important; }

/* TODOS los items: misma geometría (flex, 40px, radius 9) */
#pnav > li > a,
#pnav > li.canjear_quick > a,
#pnav > li.equipo_quick > a,
#pnav > li.cumples_quick > a,
#pnav > li.smtp_quick > a,
#pnav > li.wa_quick > a {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  height: 40px !important;
  margin: 2px 12px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #aeb1d6;
}
#pnav > li > a > span,
#pnav > li.canjear_quick > a > span,
#pnav > li.equipo_quick > a > span,
#pnav > li.cumples_quick > a > span,
#pnav > li.smtp_quick > a > span,
#pnav > li.wa_quick > a > span {
  line-height: 1 !important;
  display: inline !important;
}

/* iconos: visibles, tamaño fijo */
#pnav > li > a .lnr,
#pnav > li.canjear_quick > a .lnr,
#pnav > li.equipo_quick > a .lnr,
#pnav > li.cumples_quick > a .lnr,
#pnav > li.smtp_quick > a .lnr,
#pnav > li.wa_quick > a .lnr {
  font-size: 15px !important;
  width: 18px !important;
  text-align: center !important;
  margin: 0 !important;
  opacity: 1 !important;
  color: #9a9dc4 !important;
  flex: 0 0 18px;
  line-height: 1 !important;
}
#pnav > li > a:hover,
#pnav > li.canjear_quick > a:hover,
#pnav > li.equipo_quick > a:hover,
#pnav > li.cumples_quick > a:hover,
#pnav > li.smtp_quick > a:hover,
#pnav > li.wa_quick > a:hover {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}
#pnav > li > a:hover .lnr { color: #fff !important; }

/* activo: pill sólida de marca (sin border-left a medias) */
#pnav > li.activo > a,
#pnav > li > a.activo {
  background: #5134eb !important;
  color: #fff !important;
  border-left: none !important;
  font-weight: 600 !important;
}
#pnav > li.activo > a .lnr,
#pnav > li > a.activo .lnr { color: #fff !important; }

/* Campañas: promo distinta del activo (translúcida con borde) */
#pnav > li.marketing > a {
  background: rgba(121,88,255,.14) !important;
  border: 1px solid rgba(121,88,255,.4) !important;
  border-left: 1px solid rgba(121,88,255,.4) !important;
  color: #e4defc !important;
  font-weight: 600 !important;
  transform: none !important;
}
#pnav > li.marketing > a:hover { background: rgba(121,88,255,.24) !important; }
#pnav > li.marketing > a .lnr { color: #b09aff !important; }
#pnav > li.marketing > a::after { right: 12px; }

/* activo gana sobre promo si coinciden */
#pnav > li.marketing.activo > a { background: #5134eb !important; border-color: #5134eb !important; }

/* Cupones: misma geometría, dorado */
#pnav > li.cupones > a {
  margin: 10px 12px !important;
  padding: 0 12px !important;
  height: 42px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}
#pnav li.cupones a:after { top: 50% !important; transform: translateY(-50%) !important; right: 12px !important; width: 9px !important; height: 9px !important; }
#pnav li.cupones a span { position: static !important; text-align: left !important; width: auto !important; padding: 0 !important; line-height: 1 !important; }

/* divider OPERACIONES */
#pnav > li.menu-section-divider {
  margin-top: 10px !important;
  padding: 12px 24px 6px !important;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* badges NEW centrados en el item nuevo de 40px */
#pnav > li.smtp_quick > a::after,
#pnav > li.wa_quick > a::after { right: 12px; }

/* footer del menú: línea sutil + botón integrado */
.menu_hr {
  margin: 16px 16px 10px !important;
  width: auto !important;
  border-color: rgba(255,255,255,.08) !important;
}
.menu_btn_wsp {
  width: calc(100% - 24px) !important;
  margin: 0 12px 14px !important;
  height: 40px;
  line-height: 40px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: #25D366 !important;
  color: #053b25 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
.menu_btn_wsp:hover { filter: brightness(1.06); }

/* drawer mobile: panel pegado al borde, sin esquinas flotantes */
@media (max-width: 980px) {
  .navlat {
    width: 290px !important;
    max-width: 86vw;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-bottom: 20px;
  }
}

/* v6.1: alineación izquierda explícita en todos los items */
#pnav > li > a,
#pnav > li.canjear_quick > a, #pnav > li.equipo_quick > a,
#pnav > li.cumples_quick > a, #pnav > li.smtp_quick > a, #pnav > li.wa_quick > a {
  justify-content: flex-start !important;
  text-align: left !important;
}
#pnav > li > a > span { margin: 0 !important; flex: 0 1 auto !important; }
#pnav > li > a > i { margin: 0 !important; }

/* v6.2: Campañas misma indentación que el resto */
#pnav > li.marketing > a {
  padding: 0 12px !important;
  height: 40px !important;
  margin: 2px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  line-height: 1 !important;
}

/* === v7: header icons con aire + FAB menú mobile === */
.user_menu { gap: 10px; }
.btn_push_admin { margin-right: 0 !important; }
.user_menu .btn_recomendar { margin-right: 4px; }
#pwa-install-btn { margin-right: 2px !important; }

.fab_menu { display: none; }
@media (max-width: 980px) {
  .fab_menu {
    position: fixed;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #5134eb;
    border: none;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 10px 26px rgba(81, 52, 235, .5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fab_menu span {
    display: block;
    width: 20px; height: 2.5px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  body.open .fab_menu { background: #221f4d; }
  body.open .fab_menu span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.open .fab_menu span:nth-child(2) { opacity: 0; }
  body.open .fab_menu span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* v7.1: ajustes pedidos */
.btn_filtrar_metricas { font-weight: 500 !important; }
@media (max-width: 980px) {
  /* card ranking: aire arriba */
  .metricas .card.black.mranking { padding-top: 14px !important; }
  .metricas .mpuntos { margin: 22px 20px 4px !important; }
  /* hamburguesa del header fuera: ya está el FAB abajo */
  .toppage .btn_menu { display: none !important; }
}