/* =====================================================================
   BLOQUE 14 — Negocio → Ranking del equipo (podio con fotos, filtros por
   periodo y métrica, «Tu posición», insignias, evolución de tus puntos)
   y Ajustes → Ranking (solo responsable).
   Archivo bloque15.css (bloque14.css es de Beneficio, Bloque 13). Va el
   último. Solo tokens (Noche y Día); botones redondos; movimiento dentro
   de prefers-reduced-motion. Motivar sin humillar: medallas solo en el
   podio; del 4.º en adelante, todo en neutro.
   ===================================================================== */
:root{
  --b14-oro:#f5b301;    --b14-oro-ink:#ffd25e;    --b14-oro-bg:rgba(245,179,1,.16);
  --b14-plata:#b9c3d6;  --b14-plata-ink:#d9e0ee;  --b14-plata-bg:rgba(185,195,214,.16);
  --b14-bronce:#d9894a; --b14-bronce-ink:#f0aa73; --b14-bronce-bg:rgba(217,137,74,.16);
  --b14-ped-ink:#000e35;
  --b14-r:22px;
}
:root[data-theme="light"]{
  --b14-oro:#d99a00;    --b14-oro-ink:#7a5300;    --b14-oro-bg:rgba(217,154,0,.13);
  --b14-plata:#8e9ab0;  --b14-plata-ink:#46536b;  --b14-plata-bg:rgba(110,124,150,.13);
  --b14-bronce:#b8692d; --b14-bronce-ink:#7c3f12; --b14-bronce-bg:rgba(184,105,45,.13);
  --b14-ped-ink:#000e35;
}
.b14-oro{--b14-c:var(--b14-oro); --b14-ink:var(--b14-oro-ink); --b14-bg:var(--b14-oro-bg);}
.b14-plata{--b14-c:var(--b14-plata); --b14-ink:var(--b14-plata-ink); --b14-bg:var(--b14-plata-bg);}
.b14-bronce{--b14-c:var(--b14-bronce); --b14-ink:var(--b14-bronce-ink); --b14-bg:var(--b14-bronce-bg);}

.b14{display:flex; flex-direction:column; gap:14px; min-width:0;}

/* ---------- Filtros ---------- */
.b14-barra{display:flex; align-items:center; gap:10px; min-width:0;}
.b14-periodos{display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--b4-track); flex:1 1 auto; max-width:460px; min-width:0;}
.b14-per{flex:1 1 0; min-width:0; min-height:42px; padding:0 8px; border:0; border-radius:999px; background:transparent; color:var(--ink-soft);
  font:inherit; font-weight:800; font-size:.88rem; cursor:pointer; white-space:nowrap; transition:background .18s ease, color .18s ease;}
.b14-per:hover{color:var(--ink);}
.b14-per.on{background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 16px -8px var(--accent);}
.b14-per:focus-visible, .b14-met:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.b14-barra .b4-info-btn{margin:0; flex:none;}
@media (max-width:440px){ .b14-per{font-size:.8rem; padding:0 4px;} }

.b14-metricas{display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:2px 2px 6px; margin:0 -2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.b14-metricas::-webkit-scrollbar{display:none;}
@media (min-width:1100px){ .b14-metricas{flex-wrap:wrap; overflow:visible;} }
.b14-met{flex:none; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:5px; width:74px; padding:0; border:0; background:none;
  color:var(--ink-soft); font:inherit; cursor:pointer;}
.b14-met-ico{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1.5px solid var(--line-strong);
  color:var(--ink); transition:transform .15s ease, background .18s ease, border-color .18s ease;}
.b14-met-ico .ico-set{width:22px; height:22px;}
.b14-met:hover .b14-met-ico{border-color:var(--ink-soft);}
.b14-met:active .b14-met-ico{transform:scale(.93);}
.b14-met-txt{font-size:.7rem; font-weight:800; line-height:1.15; text-align:center; letter-spacing:.01em;}
.b14-met.on{color:var(--ink);}
.b14-met.on .b14-met-ico{background:var(--accent); border-color:transparent; color:var(--accent-ink); box-shadow:0 8px 18px -10px var(--accent);}

/* ---------- Cuerpo: principal + lateral ---------- */
.b14-cuerpo{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; min-width:0;}
.b14-main, .b14-lado{display:flex; flex-direction:column; gap:14px; min-width:0;}
@media (min-width:1000px){
  .b14-cuerpo{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); align-items:start;}
  .b14-lado{position:sticky; top:84px;}
}
/* En móvil y tableta, «Tu posición» va primero (fija y destacada arriba). */
@media (max-width:999px){
  .b14-cuerpo{display:flex; flex-direction:column;}
  .b14-main, .b14-lado{display:contents;}
  .b14-tu{order:-2;}
  .b14-podio{order:-1;}
}

/* ---------- Podio ---------- */
.b14-podio{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--b14-r); box-shadow:var(--shadow);
  padding:18px 16px 0; overflow:hidden; min-width:0;}
.b14-podio::before{content:""; position:absolute; inset:-40% -10% auto; height:80%; pointer-events:none;
  background:radial-gradient(closest-side, var(--b14-oro-bg), transparent 75%);}
.b14-podio-nadie{position:relative; margin:0 0 10px; text-align:center; font-weight:800; font-size:.9rem; color:var(--ink-soft);}
.b14-podio-fila{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); align-items:end; gap:10px; max-width:560px; margin:0 auto;}
.b14-pc{display:flex; flex-direction:column; align-items:center; min-width:0;}
.b14-pc-quien{display:flex; flex-direction:column; align-items:center; gap:3px; padding-bottom:10px; min-width:0; max-width:100%;}
.b14-av-caja{position:relative; display:inline-block; margin-bottom:4px;}
.b14-pc .b14-av{box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--b14-c);}
.b14-oro .b14-av{box-shadow:0 0 0 3px var(--surface), 0 0 0 7px var(--b14-c), 0 10px 30px -8px var(--b14-c);}
.b14-medalla{position:absolute; right:-4px; bottom:-2px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--m) 55%, #fff), var(--m) 70%); color:var(--b14-ped-ink);
  box-shadow:0 0 0 2.5px var(--surface), 0 4px 10px -3px rgba(0,0,0,.45);}
.b14-medalla .ico-set{width:16px; height:16px; fill:currentColor; stroke-width:1.2;}
.b14-med-oro{--m:var(--b14-oro);} .b14-med-plata{--m:var(--b14-plata);} .b14-med-bronce{--m:var(--b14-bronce);}
.b14-oro .b14-medalla{width:36px; height:36px; right:-2px; bottom:0;}
.b14-oro .b14-medalla .ico-set{width:19px; height:19px;}
.b14-pc-nom{max-width:100%; font-size:.95rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b14-pc-val{font-size:clamp(1.25rem, 3.2vw, 1.75rem); font-weight:900; color:var(--b14-ink); font-variant-numeric:tabular-nums; line-height:1.05;}
.b14-oro .b14-pc-val{font-size:clamp(1.5rem, 4vw, 2.2rem);}
.b14-pc.yo .b14-pc-nom{color:var(--b4-az-ink);}
.b14-pedestal{width:100%; display:grid; place-items:center; border-radius:18px 18px 0 0;
  background:linear-gradient(180deg, var(--b14-c), color-mix(in srgb, var(--b14-c) 70%, var(--surface)));}
.b14-oro .b14-pedestal{height:96px;}
.b14-plata .b14-pedestal{height:70px;}
.b14-bronce .b14-pedestal{height:52px;}
.b14-ped-n{font-size:1.7rem; font-weight:900; color:var(--b14-ped-ink); opacity:.85;}
.b14-pc.libre{opacity:.5;}
.b14-hueco{background:transparent !important; color:var(--ink-soft) !important; border:2px dashed var(--line-strong); box-shadow:none !important;}
.b14 .avatar-xl{width:96px; height:96px;}
@media (max-width:560px){
  .b14-podio{padding:14px 10px 0;}
  .b14-podio-fila{gap:6px;}
  .b14 .b14-pc .avatar-xl{width:76px; height:76px; font-size:1.5rem;}
  .b14 .b14-pc .avatar-lg{width:56px; height:56px; font-size:1.05rem;}
  .b14-pc-nom{font-size:.84rem;}
  .b14-medalla{width:26px; height:26px;} .b14-medalla .ico-set{width:14px; height:14px;}
  .b14-oro .b14-medalla{width:30px; height:30px;} .b14-oro .b14-medalla .ico-set{width:16px; height:16px;}
  .b14-oro .b14-pedestal{height:78px;} .b14-plata .b14-pedestal{height:58px;} .b14-bronce .b14-pedestal{height:44px;}
}
@media (prefers-reduced-motion:no-preference){
  .b14-anim .b14-pedestal{animation:b14Sube .75s cubic-bezier(.2,.8,.2,1) both; transform-origin:bottom;}
  .b14-anim .b14-pc-quien{animation:b14Aparece .6s ease both;}
  .b14-anim .b14-plata .b14-pedestal{animation-delay:.08s;} .b14-anim .b14-plata .b14-pc-quien{animation-delay:.35s;}
  .b14-anim .b14-oro .b14-pedestal{animation-delay:.18s;}   .b14-anim .b14-oro .b14-pc-quien{animation-delay:.5s;}
  .b14-anim .b14-bronce .b14-pc-quien{animation-delay:.25s;}
  @keyframes b14Sube{from{transform:scaleY(.1); opacity:.2;} to{transform:scaleY(1); opacity:1;}}
  @keyframes b14Aparece{from{transform:translateY(14px) scale(.9); opacity:0;} to{transform:none; opacity:1;}}
}

/* ---------- Resto del equipo (neutro) ---------- */
.b14-resto{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.b14-fila{display:grid; grid-template-columns:30px auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 14px; min-height:52px;
  border-radius:18px; background:var(--surface); border:1px solid var(--line);}
.b14-fila-pos{font-weight:800; color:var(--ink-soft); text-align:center; font-variant-numeric:tabular-nums;}
.b14-fila-nom{font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.b14-fila-val{font-weight:800; font-variant-numeric:tabular-nums;}
.b14-fila.yo{border:2px solid var(--b4-az); background:var(--b4-az-bg);}
.b14-pie{margin:0; font-size:.74rem; color:var(--ink-soft); text-align:center;}

/* ---------- Tu posición ---------- */
.b14-tu{--b14-c:var(--b4-az); --b14-ink:var(--b4-az-ink); --b14-bg:var(--b4-az-bg);
  display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:var(--b14-r); background:var(--surface);
  border:2px solid var(--b14-c); box-shadow:0 0 0 4px var(--b14-bg), var(--shadow); min-width:0;}
.b14-tu.fuera{border-style:dashed; box-shadow:var(--shadow);}
.b14-tu-cab{display:flex; align-items:center; gap:14px; min-width:0;}
.b14-tu-pos{display:flex; flex-direction:column; min-width:0;}
.b14-tu-eti{font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.b14-tu-n{font-size:2.3rem; font-weight:900; line-height:1.05; color:var(--b14-ink); font-variant-numeric:tabular-nums;}
.b14-tu-de{font-size:.84rem; font-weight:700; color:var(--ink-soft);}
.b14-tu-tit{font-size:1.05rem;}
.b14-tu-sub{margin:0; font-size:.84rem; color:var(--ink-soft);}
.b14-tu-falta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 14px; border-radius:18px; background:var(--b14-bg); color:var(--b14-ink);}
.b14-tu-falta > .ico-set{width:22px; height:22px; flex:none;}
.b14-tu-falta strong{font-size:1rem; font-weight:900; color:var(--ink);}
.b14-tu-falta.lider{background:var(--b14-oro-bg); color:var(--b14-oro-ink);}
.b14-tu-ops{display:flex; flex-wrap:wrap; gap:6px; flex-basis:100%;}
.b14-op{font-size:.76rem; font-weight:800; padding:5px 11px; border-radius:999px; background:var(--surface); color:var(--ink);}

/* ---------- Insignias ---------- */
.b14-ins, .b14-evo{padding:16px; border-radius:var(--b14-r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); min-width:0;}
.b14-h3{margin:0 0 12px; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.b14-ins-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;}
@media (min-width:1000px){ .b14-ins-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:440px){ .b14-ins-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
.b14-insignia{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; min-width:0;}
.b14-ins-circ{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--b4-track); color:var(--ink-soft);}
.b14-ins-circ .ico-set{width:26px; height:26px;}
.b14-ins-txt{font-size:.8rem; font-weight:800; line-height:1.15;}
.b14-ins-quien{font-size:.72rem; color:var(--ink-soft); line-height:1.2; overflow-wrap:anywhere;}
.b14-insignia:not(.ganada) .b14-ins-txt{color:var(--ink-soft);}
.b14-insignia.ganada .b14-ins-circ{background:var(--b14-oro-bg); color:var(--b14-oro-ink); box-shadow:0 0 0 2px var(--b14-oro);}
.b14-insignia.ganada .b14-ins-quien{color:var(--ink); font-weight:700;}
.b14-insignia.mia .b14-ins-circ{background:var(--b14-oro); color:var(--b14-ped-ink); box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--b14-oro), 0 8px 22px -8px var(--b14-oro);}
@media (prefers-reduced-motion:no-preference){
  .b14-insignia.mia .b14-ins-circ{animation:b14Brilla 2.4s ease-in-out infinite;}
  @keyframes b14Brilla{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}
}

/* ---------- Evolución de tus puntos ---------- */
.b14-graf-caja{width:100%; min-width:0;}
.b14-graf{display:block; width:100%; height:auto; max-height:200px;}
.b14-barra-v{fill:color-mix(in srgb, var(--b4-az) 45%, transparent);}
.b14-barra-v.actual{fill:var(--accent);}
.b14-graf-base{stroke:var(--line-strong); stroke-width:1;}
.b14-graf-v{font-size:10px; font-weight:800; fill:var(--ink-soft); font-family:inherit;}
.b14-graf-v.actual{fill:var(--ink); font-size:12px;}
.b14-graf-e{font-size:9px; font-weight:700; fill:var(--ink-soft); font-family:inherit;}

/* ---------- Vacío y carga ---------- */
.b14-vacio, .b14-cargando{display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 16px; border-radius:var(--b14-r);
  background:var(--surface); border:1px dashed var(--line-strong); text-align:center; color:var(--ink-soft); font-weight:700;}
.b14-vacio p{margin:0;}
.b14-vacio-ico{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--b14-oro-bg); color:var(--b14-oro-ink);}
.b14-vacio-ico .ico-set{width:30px; height:30px;}

/* ---------- Botones redondos ---------- */
.b14-redondo{flex:none; width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0; transition:transform .12s ease, background .15s ease;}
.b14-redondo .ico-set{width:22px; height:22px;}
.b14-redondo:hover{border-color:var(--ink-soft);}
.b14-redondo:active{transform:scale(.94);}
.b14-redondo:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.b14-redondo.acento{background:var(--accent); color:var(--accent-ink); border-color:transparent;}
.b14-redondo:disabled{opacity:.6; cursor:default;}
@media (prefers-reduced-motion:no-preference){
  .b14-redondo.girando .ico-set{animation:b14Gira 1s linear infinite;}
  @keyframes b14Gira{to{transform:rotate(360deg);}}
}

/* ---------- Ajustes → Ranking (solo responsable) ---------- */
.b14-aj-cuerpo{display:flex; flex-direction:column; gap:14px; min-width:0;}
.b14-aj-cuerpo .usuarios-sub{margin:4px 0 0;}
.b14-aj-pesos{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:10px;}
.b14-aj-peso{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:20px; background:var(--b4-track); min-width:0;}
.b14-aj-peso .b14-met-ico{width:42px; height:42px; flex:none;}
.b14-aj-peso .b14-met-ico .ico-set{width:20px; height:20px;}
.b14-aj-peso-txt{flex:1 1 auto; min-width:0; font-weight:800; font-size:.88rem; line-height:1.2; overflow-wrap:anywhere;}
.b14-aj-peso .b4-stepper{flex:none;}
.b14 .b4-stepper input, .b14-aj-peso .b4-stepper input{width:58px; padding:0 4px;}
.b14-aj-acc{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.b14-aj-rec{display:inline-flex; align-items:center; gap:10px; margin-left:auto;}
.b14-aj-rec-txt{font-weight:800; font-size:.88rem;}
@media (max-width:560px){ .b14-aj-rec{margin-left:0;} }
.b14-aj-equipo{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.b14-aj-persona{display:grid; grid-template-columns:auto minmax(0,1fr) auto 62px; align-items:center; gap:10px; padding:8px 12px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line);}
.b14-aj-persona.oculto .b14-fila-nom, .b14-aj-persona.oculto .avatar{opacity:.55;}
.b14-aj-estado{font-size:.76rem; font-weight:800; color:var(--ink-soft);}
.b14-switch{position:relative; width:52px; height:30px; border-radius:999px; border:0; padding:0; cursor:pointer; background:var(--line-strong); transition:background .18s ease;}
.b14-switch.on{background:var(--b4-ok);}
.b14-switch-bola{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s ease;}
.b14-switch.on .b14-switch-bola{transform:translateX(22px);}
.b14-switch:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* Clientes: pestaña «Sin tablero» (contactos sueltos de Brevo / Inmovilla)
   y carga progresiva («Ver más») en tarjetas y tabla. */
.b4-tipo.t-suelto{--t:var(--b4-am); --t-bg:var(--b4-am-bg); --t-ink:var(--b4-am-ink);}
.tc-ini-contactos, .tc-tipo-contactos{background:var(--b4-am-bg); color:var(--b4-am-ink); border-color:var(--b4-am);}
.ctc-mas{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:14px 0 6px; color:var(--ink-soft); font-size:.85rem;}
.ctc-mas .btn{min-height:44px;}

/* Clientes: cumpleaños (KPI con anillo, filtro, celda editable y «Pedir cumpleaños») */
.ctc-cumple{display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; padding:12px 16px; margin:0 0 14px; border:1px solid var(--line); border-radius:20px; background:var(--surface);}
.ctc-cumple[hidden]{display:none;}
.ctc-cumple-anillo{width:48px; height:48px; flex:none; transform:rotate(-90deg);}
.ctc-cumple-anillo circle{fill:none; stroke-width:6;}
.ctc-cumple-fondo{stroke:var(--b4-track, var(--line));}
.ctc-cumple-valor{stroke:var(--b4-ok, var(--accent)); stroke-linecap:round; transition:stroke-dashoffset .5s ease;}
.ctc-cumple-tx{flex:1 1 220px; display:flex; flex-direction:column; gap:2px; min-width:0;}
.ctc-cumple-n{font-size:.95rem;}
.ctc-cumple-sub{font-size:.8rem; color:var(--ink-soft);}
.ctc-cumple-filtro{min-height:40px;}
.tc-th-nombre{width:19%;} .tc-th-tipo{width:15%;} .tc-th-etapa{width:14%;} .tc-th-proximo{width:15%;} .tc-th-cumple{width:13%;} .tc-th-tel{width:12%;} .tc-th-ultima{width:12%;}
.tc th.tc-th-cumple{padding:12px 14px;}
.cumple-btn .tc-fecha-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cumple-pop{position:fixed; z-index:95; width:min(330px, calc(100vw - 16px)); box-sizing:border-box; padding:14px; display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:18px; box-shadow:0 20px 50px -18px rgba(0,0,0,.6), var(--shadow);}
.cumple-pop-t{font-size:.9rem;}
.cumple-pop-campos{display:grid; grid-template-columns:96px 1fr; gap:8px;}
.cumple-pop-campos input{grid-column:1 / -1;}
.cumple-pop select, .cumple-pop input{min-height:42px; font-size:16px; padding:6px 10px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface-2); color:var(--ink); min-width:0;}
.cumple-pop-err{margin:0; color:var(--b4-ro-ink, var(--accent)); font-size:.82rem;}
.cumple-pop-acc{display:flex; flex-wrap:wrap; gap:8px;}
.cumple-pop-acc .btn{min-height:42px;}
.ctc-cumple-fila{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.ctc-cumple-l{font-size:.8rem; color:var(--ink-soft); margin-right:2px;}
.cumple-nota{margin:0 0 10px; color:var(--ink-soft); font-size:.85rem;}
.cumple-msg{width:100%; box-sizing:border-box; min-height:120px; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-2); color:var(--ink); resize:vertical;}
.cumple-wa{display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
@media (max-width:1100px){ .tc-th-nombre{width:19%;} .tc-th-tipo{width:15%;} }
@media (max-width:860px){ .tc thead th.tc-th-cumple{display:none;} }