/* LOP CRM · estilos
   Claro para trabajar: página gris, tarjetas y ventanas blancas, texto casi negro. La barra superior, el acceso y el arranque
   siguen en negro de marca (el logo es blanco). Magenta para lo que importa, morado como segundo color, bordes rectos, el
   romboide como firma y nada de verde. Barlow Condensed Bold Italic para títulos y cifras; Outfit para todo lo demás.
   Contraste (WCAG AA): texto ≥ 4,5:1 sobre blanco y sobre el gris de página; bordes que dibujan controles ≥ 3:1.
   Blanco sobre #FF1493 da 3,6:1: solo en texto grande y en negrita (≥ 18,66 px: botones principales, «+ Club»);
   en texto pequeño, fondo --magenta-deep (5,5:1). Texto magenta: --magenta-hi (sobre blanco o gris) o --magenta-ink (sobre tintes). */

/* ── Fuentes (locales: sin llamadas a Google) ── */
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;
  src:url(../fonts/barlow-condensed-latin-700-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;
  src:url(../fonts/barlow-condensed-latin-ext-700-italic.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/outfit-latin-wght-normal.woff2) format('woff2-variations'),url(../fonts/outfit-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations'),url(../fonts/outfit-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Tokens (los de ligaopenpadel.com, en claro) ──
   Los nombres vienen del tema oscuro: --ink… son superficies y --paper… textos. En :root van los valores claros; la barra
   superior, el acceso, el arranque y los avisos vuelven a declarar los oscuros (más abajo). */
:root{
  /* superficies: página gris, tarjetas/ventanas blancas, rellenos suaves (hover, seleccionado, etiquetas) */
  --ink:#F3F3F5; --ink-2:#FFFFFF; --ink-3:#EEEEF2; --ink-4:#E4E4EA; --ink-5:#CFCFD7;
  --wash:#F6F6F8; --col:#E8E8EC; --map-bg:#ECEFF0;
  /* texto: --paper, --soft, --mute y --faint pasan 4,5:1 sobre blanco, #F3F3F5 y #EEEEF2; --dim es para iconos (≥ 3:1) */
  --paper:#141418; --soft:#383842; --mute:#4D4D57; --faint:#62626C; --dim:#80808A;
  --hi:#0A0A0A; --on:#FFFFFF; --black:#0A0A0A;
  /* magenta: #FF1493 en rellenos con texto grande, iconos y trazos; --magenta-deep, rellenos con texto pequeño;
     --magenta-hi, texto magenta sobre blanco o gris (5,5:1); --magenta-ink, texto sobre tintes rosas (≥ 6:1) */
  --magenta:#FF1493; --magenta-hi:#C8107A; --magenta-deep:#C8107A; --magenta-ink:#A30D63; --mag-pale:#FFD6EC;
  --mag-08:rgba(255,20,147,.08); --mag-14:rgba(255,20,147,.14); --mag-24:rgba(255,20,147,.24); --mag-40:rgba(255,20,147,.4);
  /* morado: --lilac es el texto morado (7:1 sobre blanco); --purple-ink, sobre tintes morados */
  --purple:#5446B8; --purple-hi:#6E60D8; --lilac:#4B3EAD; --purple-ink:#3F3399; --pur-18:rgba(84,70,184,.12); --pur-30:rgba(84,70,184,.16);
  /* líneas: --line y --line-2 separan; --line-3 y --field dibujan controles (≥ 3:1 sobre blanco y sobre el gris) */
  --line:rgba(20,20,24,.09); --line-2:rgba(20,20,24,.15); --line-3:rgba(20,20,24,.52);
  --field:rgba(20,20,24,.52); --field-hi:rgba(20,20,24,.78);
  --scrim:rgba(20,20,26,.35);
  --halo:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,0 0 6px rgba(255,255,255,.9);
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:0; --top-h:58px; --bnav-h:60px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --shadow:0 18px 44px -18px rgba(20,20,40,.3),0 2px 6px rgba(20,20,40,.06);
  --shadow-s:0 1px 2px rgba(20,20,40,.08),0 4px 12px -4px rgba(20,20,40,.14);
  --shadow-xs:0 1px 2px rgba(20,20,40,.06);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
/* Negro de marca: barra superior (no la barra de modo del mapa, que también lleva .top), acceso, arranque y avisos */
.top:not(.mbar),.gate,.boot,.toasts{
  --ink:#0A0A0A; --ink-2:#121217; --ink-3:#1C1C23; --ink-4:#26262F; --ink-5:#30303B; --wash:#121217;
  --paper:#F5F4F8; --soft:#D9D8E0; --mute:#B8B8C0; --faint:#8A8894; --dim:#64626E; --hi:#FFFFFF;
  --magenta-hi:#FF3AA6; --magenta-ink:#FF3AA6; --lilac:#C9C5EE; --purple-ink:#C9C5EE; --pur-18:rgba(84,70,184,.18); --pur-30:rgba(84,70,184,.32);
  --line:rgba(245,244,248,.09); --line-2:rgba(245,244,248,.16); --line-3:rgba(245,244,248,.28);
  --field:rgba(245,244,248,.36); --field-hi:rgba(245,244,248,.52);
  --shadow:0 22px 48px -20px rgba(0,0,0,.85);
  color-scheme:dark; color:var(--paper);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%;background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{height:100%;margin:0;background:var(--ink);color:var(--paper);font:400 15px/1.45 var(--body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overscroll-behavior:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
svg{display:block;flex:none}
b,strong{font-weight:650}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--magenta);outline-offset:2px}
::selection{background:var(--magenta);color:var(--on)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.noscript{padding:40px;text-align:center}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--mute)} .faint{color:var(--faint)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-s{width:16px;height:16px}
.ico-l{width:24px;height:24px}
.scroll{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-thumb{background:var(--ink-5);border:3px solid transparent;background-clip:padding-box}
.scroll::-webkit-scrollbar-track{background:transparent}

/* Rótulos y títulos */
.kick{font:600 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.kick.mag{color:var(--magenta-hi)}
.h-xl{font:700 italic 34px/.92 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.h-l{font:700 italic 28px/.95 var(--display);text-transform:uppercase}
.h-m{font:700 italic 20px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.h-s{font:700 italic 17px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.big{font:700 italic 34px/.9 var(--display);font-variant-numeric:tabular-nums}

/* El romboide de la marca */
.rmb{display:inline-flex;align-items:center;padding:.12em .42em .06em .34em;background:var(--magenta);color:var(--on);
  font:700 italic 1em/1 var(--display);text-transform:uppercase;transform:skewX(-10deg)}
.rmb>span{display:inline-block;transform:skewX(10deg)}
.rmb.pur{background:var(--purple)}
.rmb.ink{background:var(--black);color:var(--on)}
.rmb.paper{background:var(--paper);color:var(--ink)}

/* ── Botones ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  font:600 14.5px/1 var(--body);color:var(--paper);white-space:nowrap;user-select:none;-webkit-user-select:none;
  transition:background-color .15s,box-shadow .15s,color .15s,opacity .15s}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .ico{width:18px;height:18px}
.btn-pri,.btn-sec{transform:skewX(-10deg);padding:0 20px;font:700 italic 19px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.btn-pri>span,.btn-sec>span{display:inline-flex;align-items:center;gap:8px;transform:skewX(10deg)}
.btn-pri{background:var(--magenta);color:var(--on);box-shadow:0 10px 22px -14px rgba(255,20,147,.6)}
.btn-pri:hover{background:var(--magenta-hi)}
.btn-pri:active{background:var(--magenta-deep)}
.btn-sec{box-shadow:inset 0 0 0 1.5px var(--line-3)}
.btn-sec:hover{box-shadow:inset 0 0 0 1.5px var(--magenta);color:var(--hi)}
.btn-pur{background:var(--purple);color:var(--on);box-shadow:none}
.btn-pur:hover{background:var(--purple-hi)}
.btn-ghost{padding:0 12px;color:var(--soft)}
.btn-ghost:hover{background:var(--ink-3);color:var(--hi)}
.btn-txt{min-height:36px;padding:0 6px;color:var(--magenta-hi);font-weight:600}
.btn-txt:hover{color:var(--magenta-ink);text-decoration:underline;text-underline-offset:3px}
.btn-danger{box-shadow:inset 0 0 0 1.5px var(--magenta-hi);color:var(--magenta-hi);transform:skewX(-10deg);font:700 italic 17px/1 var(--display);text-transform:uppercase}
.btn-danger>span{display:inline-flex;align-items:center;gap:8px;transform:skewX(10deg)}
.btn-danger:hover{background:var(--mag-08)}
.btn-block{width:100%}
.btn-s{min-height:36px;padding:0 14px;font-size:13.5px}
.btn-pri.btn-s,.btn-sec.btn-s{font-size:16px;padding:0 14px}
.ib{display:inline-grid;place-items:center;width:40px;height:40px;color:var(--soft);transition:background-color .15s,color .15s}
.ib:hover{background:var(--ink-3);color:var(--hi)}
.ib.on{color:var(--magenta-hi)}
.ib[disabled]{opacity:.35;pointer-events:none}
@media (pointer:coarse){.ib{width:44px;height:44px}}
.fab{position:absolute;z-index:30;right:calc(16px + var(--sar));bottom:calc(16px + var(--sab));display:inline-flex;align-items:center;gap:8px;
  min-height:52px;padding:0 20px;background:var(--magenta);color:var(--on);transform:skewX(-10deg);font:700 italic 19px/1 var(--display);
  text-transform:uppercase;letter-spacing:.02em;box-shadow:0 14px 28px -12px rgba(255,20,147,.5),0 2px 6px rgba(20,20,40,.12)}
.fab>span{display:inline-flex;align-items:center;gap:8px;transform:skewX(10deg)}
.fab .ico{width:20px;height:20px;stroke-width:2.4}
.fab:hover{background:var(--magenta-hi)}

/* ── Campos ── */
.form{display:grid;gap:16px}
.f{display:grid;gap:6px;min-width:0}
.f-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:600 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.f-l em{font-style:normal;letter-spacing:.02em;text-transform:none;color:var(--faint);font-weight:500}
.f-h{font-size:12.5px;line-height:1.35;color:var(--faint)}
.in{width:100%;min-width:0;min-height:46px;padding:11px 12px;font:400 16px/1.3 var(--body);color:var(--paper);background:var(--ink-2);
  border:1.5px solid var(--field);border-radius:var(--r);-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.in::placeholder{color:var(--faint)}
.in:hover{border-color:var(--field-hi)}
.in:focus{border-color:var(--magenta);box-shadow:0 0 0 3px var(--mag-24)}
.in[aria-invalid="true"]{border-color:var(--magenta-hi)}
textarea.in{min-height:96px;resize:vertical;line-height:1.45}
select.in{padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;background-size:6px 6px;background-repeat:no-repeat}
select.in option{background:var(--ink-2)}
.in-ico{position:relative}
.in-ico>.ico{position:absolute;left:13px;top:50%;margin-top:-10px;color:var(--faint);pointer-events:none}
.in-ico>.in{padding-left:42px}
.row2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row3{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:768px){.in{font-size:15px;min-height:42px;padding:9px 12px}}
.err{padding:10px 12px;background:var(--mag-14);box-shadow:inset 3px 0 0 var(--magenta);font-size:14px;line-height:1.4}
.note{padding:10px 12px;background:var(--pur-18);box-shadow:inset 3px 0 0 var(--purple);font-size:13.5px;line-height:1.45;color:var(--soft)}

/* Segmentado en romboide (como en la web) */
.seg{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.seg>button{min-height:42px;padding:6px 4px;text-align:center;font:700 italic 16.5px/1.05 var(--display);text-transform:uppercase;color:var(--soft);
  box-shadow:inset 0 0 0 1.5px var(--line-3);transform:skewX(-10deg);transition:background-color .15s,box-shadow .15s,color .15s}
.seg>button>span{display:block;transform:skewX(10deg)}
.seg>button:hover{box-shadow:inset 0 0 0 1.5px var(--field-hi);color:var(--hi)}
.seg>button[aria-checked="true"],.seg>button.on{background:var(--magenta);box-shadow:none;color:var(--on)}
.seg>button.pur[aria-checked="true"],.seg>button.pur.on{background:var(--purple)}
.seg.seg-s>button{min-height:36px;font-size:15px}
.seg.wrap{display:flex;flex-wrap:wrap}
.seg.wrap>button{padding:6px 14px}

/* Casilla en romboide */
.tg{display:inline-flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;user-select:none;-webkit-user-select:none}
.tg input{position:absolute;opacity:0;width:1px;height:1px}
.tg-b{flex:none;display:grid;place-items:center;width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--line-3);transform:skewX(-10deg);transition:background-color .15s,box-shadow .15s}
.tg-b::after{content:"";width:10px;height:6px;margin-top:-3px;border-left:2.4px solid var(--on);border-bottom:2.4px solid var(--on);transform:skewX(10deg) rotate(-45deg);opacity:0}
.tg input:checked+.tg-b{background:var(--magenta);box-shadow:none}
.tg input:checked+.tg-b::after{opacity:1}
.tg input:focus-visible+.tg-b{outline:2.5px solid var(--magenta);outline-offset:2px}
.tg-t{font-size:14.5px;line-height:1.3}
.tg-t small{display:block;color:var(--faint);font-size:12.5px}

/* Chips de filtro */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;font:500 13.5px/1 var(--body);color:var(--soft);
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-3);border-radius:2px;white-space:nowrap;transition:background-color .15s,box-shadow .15s,color .15s}
.chip b{font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.chip:hover{box-shadow:inset 0 0 0 1px var(--field-hi);color:var(--hi)}
.chip.on{background:var(--mag-08);box-shadow:inset 0 0 0 1.5px var(--magenta-deep);color:var(--hi)}
.chip.on b{color:var(--magenta-ink)}
.chip .dot{width:9px;height:9px}
@media (pointer:coarse){.chip{min-height:38px}}

/* Puntos y estados */
.dot{display:inline-block;flex:none;width:10px;height:10px;transform:skewX(-10deg)}
.dot.st-colaborador{background:var(--magenta)}
.dot.st-dispuesto{box-shadow:inset 0 0 0 2px var(--magenta);background:var(--mag-24)}
.dot.st-hablado{background:var(--purple-hi)}
.dot.st-sin-contactar{box-shadow:inset 0 0 0 1.6px var(--paper)}
.dot.st-no{background:var(--dim)}
/* Puntos de estado de zona (los mismos códigos que el mapa): para las chips de zona del móvil, en lugar del estilo en línea */
.dot.zs-activa{background:var(--magenta)}
.dot.zs-preparando{background:var(--purple-hi)}
.dot.zs-sondeo{box-shadow:inset 0 0 0 1.5px var(--lilac)}
.dot.zs-pausada{box-shadow:inset 0 0 0 1.5px var(--dim)}
/* Pastillas en claro: relleno fuerte con texto blanco para lo conseguido (colabora, activa, categoría), tinte con texto oscuro
   del mismo color para lo que está en marcha (dispuesto, hablado, en lista), contorno para lo pendiente (sin contactar, sondeo)
   y gris para lo que no avanza (no interesado, pausada, antiguo). Etiquetas libres: gris suave. */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 9px 2px;font:600 11.5px/1.1 var(--body);letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;border-radius:2px;color:var(--soft);background:var(--ink-3);box-shadow:none}
.pill.st-colaborador{background:var(--magenta);color:var(--on);box-shadow:none}
.pill.st-dispuesto{background:var(--mag-08);color:var(--magenta-ink);box-shadow:inset 0 0 0 1px var(--magenta-hi)}
.pill.st-hablado{background:var(--pur-30);color:var(--purple-ink);box-shadow:none}
.pill.st-sin-contactar{background:none;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line-3)}
.pill.st-no{background:var(--ink-3);color:var(--faint);box-shadow:none}
.pill.zs-activa{background:var(--magenta);color:var(--on);box-shadow:none}
.pill.zs-preparando{background:var(--purple);color:var(--on);box-shadow:none}
.pill.zs-sondeo{background:none;color:var(--lilac);box-shadow:inset 0 0 0 1px var(--lilac)}
.pill.zs-pausada{background:none;color:var(--faint);box-shadow:none;outline:1px dashed var(--line-3);outline-offset:-1px}
.pill.ps-jugando{background:var(--paper);color:var(--ink);box-shadow:none}
.pill.ps-interesado{background:none;color:var(--lilac);box-shadow:inset 0 0 0 1px var(--lilac)}
.pill.ps-lista{background:var(--pur-30);color:var(--purple-ink);box-shadow:none}
.pill.ps-antiguo{background:var(--ink-3);color:var(--faint);box-shadow:none}
.pill.hot{background:none;color:var(--magenta-hi);box-shadow:inset 0 0 0 1px var(--magenta-hi)}
.pill .ico{width:14px;height:14px}
.pill.cat-m{background:var(--magenta);color:var(--on);box-shadow:none;transform:skewX(-10deg)}
.pill.cat-f{background:var(--purple);color:var(--on);box-shadow:none;transform:skewX(-10deg)}
.pill.cat-x{background:var(--ink-4);color:var(--soft);box-shadow:none;transform:skewX(-10deg)}
.pill.cat-m>span,.pill.cat-f>span,.pill.cat-x>span{display:inline-block;transform:skewX(10deg)}

/* Etiqueta de tipo de ficha (romboide pequeño) */
.tag{display:inline-flex;align-items:center;min-height:21px;padding:2px 8px 1px 7px;font:700 italic 14px/1 var(--display);text-transform:uppercase;
  letter-spacing:.03em;transform:skewX(-10deg);white-space:nowrap}
.tag>span{display:inline-block;transform:skewX(10deg)}
.tag-club{background:var(--magenta);color:var(--on)}
.tag-gerencia{background:var(--paper);color:var(--ink)}
.tag-staff{background:var(--purple);color:var(--on)}
.tag-jugador{background:var(--ink-5);color:var(--paper)}
.tag-contacto{background:var(--ink-4);color:var(--soft)}
.tag-zona{box-shadow:inset 0 0 0 1.5px var(--lilac);color:var(--lilac)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* Avatares */
.av{flex:none;display:grid;place-items:center;width:40px;height:40px;font:700 italic 17px/1 var(--display);text-transform:uppercase;
  background:var(--ink-4);color:var(--soft);border-radius:2px;overflow:hidden}
.av .ico{width:21px;height:21px}
.av-club{background:var(--mag-14);color:var(--magenta-ink)}
.av-club.st-colaborador{background:var(--magenta);color:var(--on)}
.av-club.st-no{background:var(--ink-4);color:var(--faint)}
.av-gerencia{background:var(--ink-2);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}
.av-staff{background:var(--pur-30);color:var(--purple-ink)}
.av-jugador{background:var(--ink-4);color:var(--soft)}
.av-zona{background:var(--ink-2);color:var(--lilac);box-shadow:inset 0 0 0 1.5px var(--lilac)}
.av-zona.zs-activa{background:var(--mag-08);color:var(--magenta-ink);box-shadow:inset 0 0 0 1.5px var(--magenta)}
.av-s{width:28px;height:28px;font-size:13px}
.av-s .ico{width:16px;height:16px}
.av-xs{width:22px;height:22px;font-size:11.5px}

/* Filas de lista */
.rows{display:grid}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 16px;text-align:left;border-bottom:1px solid var(--line);
  transition:background-color .12s}
.row:hover{background:var(--wash)}
.row.sel{background:var(--ink-3);box-shadow:inset 3px 0 0 var(--magenta)}
.row-m{flex:1;min-width:0;display:grid;gap:2px}
.row-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;font-size:15px;color:var(--paper)}
.row-s{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--faint)}
.row-e{flex:none;display:flex;align-items:center;gap:8px}
.row-e .ico{color:var(--dim)}
.row-c{min-height:52px;padding:8px 0;border-bottom:1px solid var(--line)}
.row-c:last-child{border-bottom:0}
.row-c:hover{background:none}
.row-c:hover .row-t{color:var(--magenta-hi)}
mark{background:none;color:var(--magenta-hi);font-weight:700}

/* Bloques de ficha */
.box{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.sec{display:grid;gap:12px;padding:16px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-xs)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.sec-h h2,.sec-h h3{display:flex;align-items:baseline;gap:8px;font:700 italic 18px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.sec-h h2 small,.sec-h h3 small{font:600 13px/1 var(--body);color:var(--faint);letter-spacing:0;text-transform:none}
.sec-e{font-size:13.5px;line-height:1.45;color:var(--faint)}
.kv{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:9px 14px;font-size:14px}
.kv dt{color:var(--faint);font-size:12.5px;letter-spacing:.04em;padding-top:1px}
.kv dd{min-width:0;overflow-wrap:anywhere}
.kv dd a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.kv dd a:hover{text-decoration-color:var(--magenta)}
.empty{display:grid;justify-items:center;gap:10px;padding:44px 20px;text-align:center}
.empty .h-l{max-width:14em}
.empty p{max-width:34ch;color:var(--faint);font-size:14px}
.empty .ico{width:34px;height:34px;color:var(--dim);stroke-width:1.4}
.empty-s{padding:6px 0;font-size:13.5px;color:var(--faint)}
.stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1px;background:var(--line-2);box-shadow:0 0 0 1px var(--line-2)}
.stat{display:grid;gap:4px;padding:12px 12px 11px;background:var(--ink-2)}
.stat b{font:700 italic 30px/.9 var(--display);font-variant-numeric:tabular-nums}
.stat span{font:600 10.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.stat.mag b{color:var(--magenta-hi)}

/* ── Capas: hojas, diálogos, avisos y menús ── */
#layers{position:relative;z-index:1000}
.ov{position:fixed;inset:0;z-index:1000;display:flex;pointer-events:none}
.ov-back{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .22s;pointer-events:auto}
.ov.ov-on .ov-back{opacity:1}
.ov-p:focus{outline:none}
.ov-p{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--ink-2);pointer-events:auto;box-shadow:var(--shadow)}
.ov-h{flex:none;display:flex;align-items:center;gap:6px;min-height:58px;padding:calc(6px + var(--sat)) 10px 6px 6px;border-bottom:1px solid var(--line)}
.ov-h h2{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 italic 21px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;padding-left:4px}
.ov-tools{display:flex;align-items:center;gap:2px}
.ov-b{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ov-b.pad{padding:18px 16px 28px}
.ov-f{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px calc(12px + var(--sab));border-top:1px solid var(--line-2);background:var(--ink-2)}
.ov-f .sp{flex:1}
/* Móvil: todo a pantalla completa, entrando desde la derecha */
.ov .ov-p{position:absolute;inset:0;transform:translateX(100%);transition:transform .26s var(--ease)}
.ov.ov-on .ov-p{transform:none}
.ov.k-dialog{align-items:center;justify-content:center;padding:20px}
.ov.k-dialog .ov-p{position:relative;inset:auto;width:min(420px,100%);max-height:86vh;transform:translateY(12px);opacity:0;transition:transform .2s var(--ease),opacity .2s}
.ov.k-dialog.ov-on .ov-p{transform:none;opacity:1}
.ov.k-dialog .ov-h{padding-top:6px}
.ov.k-sheet{align-items:flex-end}
.ov.k-sheet .ov-p{position:relative;inset:auto;width:100%;max-height:88vh;transform:translateY(100%)}
.ov.k-sheet.ov-on .ov-p{transform:none}
@media (min-width:768px){
  .ov.k-drawer{justify-content:flex-end}
  .ov.k-drawer .ov-p{position:relative;inset:auto;width:min(480px,100%);height:100%;border-left:1px solid var(--line-2)}
  .ov.k-drawer.modeless .ov-back{display:none}
  .ov.k-drawer.modeless{left:auto;width:min(480px,100%)}
  .ov.k-modal{align-items:center;justify-content:center;padding:28px}
  .ov.k-modal .ov-p{position:relative;inset:auto;width:min(var(--w,600px),100%);max-height:min(860px,92vh);transform:translateY(14px);opacity:0;
    transition:transform .2s var(--ease),opacity .2s;box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
  .ov.k-modal.ov-on .ov-p{transform:none;opacity:1}
  .ov.k-sheet{align-items:center;justify-content:center;padding:28px}
  .ov.k-sheet .ov-p{width:min(560px,100%);transform:translateY(14px);opacity:0;transition:transform .2s var(--ease),opacity .2s}
  .ov.k-sheet.ov-on .ov-p{transform:none;opacity:1}
  .ov-h{padding-top:6px}
}
@media (min-width:768px){.ov.k-drawer.modeless{top:calc(var(--top-h) + var(--sat))}}
.dlg-t{padding:20px 20px 6px;font:700 italic 24px/1 var(--display);text-transform:uppercase}
.dlg-p{padding:4px 20px 18px;color:var(--soft);font-size:14.5px;line-height:1.5}
.dlg-f{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px 16px;border-top:1px solid var(--line)}

.toasts{position:fixed;z-index:1200;left:50%;bottom:calc(18px + var(--sab));display:grid;gap:8px;width:min(460px,calc(100% - 24px));transform:translateX(-50%);pointer-events:none}
.app.has-bnav~#layers .toasts,.toasts.up{bottom:calc(var(--bnav-h) + 14px + var(--sab))}
.toast{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 10px 10px 16px;background:var(--ink-3);box-shadow:inset 3px 0 0 var(--magenta),0 14px 32px -14px rgba(10,10,20,.55);
  font-size:14px;line-height:1.35;pointer-events:auto;animation:tin .22s var(--ease)}
.toast.pur{box-shadow:inset 3px 0 0 var(--purple),0 14px 32px -14px rgba(10,10,20,.55)}
.toast p{flex:1;min-width:0}
.toast .btn-txt{flex:none}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}

.menu{position:fixed;z-index:1100;min-width:220px;max-width:min(320px,calc(100vw - 16px));padding:6px;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow);animation:tin .14s var(--ease)}
.menu-i{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 12px;font-size:14.5px;color:var(--soft);text-align:left}
.menu-i:hover,.menu-i:focus-visible{background:var(--ink-3);color:var(--hi);outline:none}
.menu-i .ico{color:var(--faint)}
.menu-i.dng{color:var(--magenta-hi)}
.menu-i.dng .ico{color:var(--magenta-hi)}
.menu-sep{height:1px;margin:6px 4px;background:var(--line)}
.menu-k{padding:8px 12px 4px;font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.spin{width:22px;height:22px;border:2.5px solid var(--line-2);border-top-color:var(--magenta);border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── Arranque y acceso ── */
.boot{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:var(--ink);transition:opacity .3s}
.boot.out{opacity:0;pointer-events:none}
.boot-in{display:grid;justify-items:center;gap:18px}
.boot-logo svg{width:120px;height:auto}
.boot-bar{position:relative;width:120px;height:3px;background:var(--ink-4);overflow:hidden}
.boot-bar i{position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--magenta);animation:bar 1.1s var(--ease) infinite}
@keyframes bar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.boot-t{font-size:13px;color:var(--faint)}
.gate{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:24px 18px calc(24px + var(--sab));background:var(--ink);overflow:auto}
.gate::before{content:"";position:fixed;left:-20%;right:-20%;top:-40%;height:80%;background:radial-gradient(closest-side,rgba(255,20,147,.18),rgba(255,20,147,0));pointer-events:none}
.gate-c{position:relative;display:grid;gap:22px;width:min(420px,100%)}
.gate-logo svg{width:112px;height:auto}
.gate-h{font:700 italic 46px/.88 var(--display);text-transform:uppercase}
.gate-h .rmb{font-size:.86em;margin-top:6px}
.gate-p{color:var(--soft);font-size:15px;line-height:1.5}
.gate-p code{padding:1px 5px;background:var(--ink-3);font-size:13px;color:var(--paper);word-break:break-all}
.gate-f{display:grid;gap:14px;padding:20px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.gate-x{font-size:12.5px;line-height:1.45;color:var(--faint)}
.gate-x a{text-decoration:underline;text-underline-offset:3px}
.demo-band{position:fixed;z-index:900;left:50%;top:calc(var(--top-h) + var(--sat) + 8px);transform:translateX(-50%);padding:6px 12px 5px;background:var(--purple);color:var(--on);
  font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;white-space:nowrap}
@media (max-width:767px){.demo-band{top:auto;bottom:calc(var(--bnav-h) + var(--sab) + 6px);font-size:10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ══════════════════ Estructura ══════════════════ */
.app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--ink)}
.top{flex:none;position:relative;z-index:50;display:flex;align-items:center;gap:6px;height:calc(var(--top-h) + var(--sat));
  padding:var(--sat) calc(10px + var(--sar)) 0 calc(14px + var(--sal));background:var(--ink);border-bottom:1px solid var(--line)}
.top-logo{flex:none;display:flex;align-items:center;gap:9px;height:44px;padding-right:4px}
.top-logo svg{width:56px;height:auto}
.top-logo .rmb{font-size:14.5px;background:var(--magenta-deep)} /* texto pequeño: blanco sobre #C8107A (5,5:1) */
.top-nav{display:flex;align-items:stretch;align-self:stretch;gap:2px;margin-left:18px}
.top-nav a{position:relative;display:flex;align-items:center;gap:8px;padding:0 14px;font:600 14px/1 var(--body);color:var(--mute);transition:color .15s}
.top-nav a .ico{width:18px;height:18px}
.top-nav a:hover{color:var(--hi)}
.top-nav a.on{color:var(--hi)}
.top-nav a.on .ico{color:var(--magenta)}
.top-nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--magenta);transform:skewX(-20deg)}
.top-q{flex:1;max-width:420px;margin-left:auto;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2);color:var(--faint);font-size:14px;transition:box-shadow .15s}
.top-q:hover{box-shadow:inset 0 0 0 1px var(--line-3);color:var(--mute)}
.top-q kbd{margin-left:auto;padding:3px 6px 2px;font:600 11px/1.2 var(--body);color:var(--faint);box-shadow:inset 0 0 0 1px var(--line-2)}
.top-r{flex:none;display:flex;align-items:center;gap:2px;margin-left:8px}
.sync{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;font-size:12.5px;color:var(--faint);white-space:nowrap}
.sync i{width:8px;height:8px;background:var(--mute);transform:skewX(-10deg)}
.sync.ok i{background:var(--paper)}
.sync.saving i{background:var(--magenta);animation:blink 1s infinite}
.sync.off i,.sync.err i{background:none;box-shadow:inset 0 0 0 1.5px var(--magenta-hi)}
.sync.off,.sync.err{color:var(--magenta-hi)}
@keyframes blink{50%{opacity:.25}}
.main{flex:1;min-height:0;position:relative;overflow:hidden}
.view{position:absolute;inset:0;display:none}
.view.on{display:block}
.bnav{flex:none;display:none}
.new-m{display:none}
@media (max-width:767px){
  .top{padding-left:calc(12px + var(--sal));padding-right:calc(4px + var(--sar));gap:0}
  .top-nav,.top-q span,.top-q kbd,.sync span,.top-r .hide-m{display:none}
  .top-q{flex:none;width:44px;height:44px;margin-left:auto;padding:0;justify-content:center;background:none;box-shadow:none;color:var(--soft)}
  .top-q .ico{width:22px;height:22px}
  .sync{padding:0 8px;height:44px}
  .bnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(var(--bnav-h) + var(--sab));padding:0 var(--sar) var(--sab) var(--sal);
    background:var(--ink-2);border-top:1px solid var(--line-2);box-shadow:0 -2px 10px -6px rgba(20,20,40,.12);position:relative;z-index:50}
  .bnav a{position:relative;display:grid;place-items:center;align-content:center;gap:5px;font:600 10.5px/1 var(--body);letter-spacing:.06em;color:var(--faint)}
  .bnav a .ico{width:23px;height:23px}
  .bnav a.on{color:var(--magenta-deep)}
  .bnav a.on .ico{color:var(--magenta-deep)}
  .bnav a.on::before{content:"";position:absolute;left:30%;right:30%;top:-1px;height:3px;background:var(--magenta);transform:skewX(-20deg)}
  .new-m{display:inline-grid}
}

/* ══════════════════ Mapa ══════════════════ */
.v-map .map{position:absolute;inset:0;z-index:0;background:var(--map-bg)}
.leaflet-container{background:var(--map-bg);font:inherit;outline:0;-webkit-tap-highlight-color:transparent}
.leaflet-container a{color:inherit}
.leaflet-control-attribution{background:rgba(255,255,255,.9)!important;color:var(--mute)!important;font:400 10px/1.5 var(--body)!important;padding:1px 6px!important;margin:0!important}
.leaflet-control-attribution a{color:var(--soft)!important;text-decoration:none!important}
.leaflet-control-attribution .leaflet-attribution-flag{display:none!important}
.leaflet-pane.lp-streets{mix-blend-mode:normal}
.leaflet-interactive:focus{outline:none}

/* Panel de zonas (ordenador) */
.mp{position:absolute;z-index:20;left:14px;top:14px;bottom:14px;width:340px;display:flex;flex-direction:column;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
.mp-h{flex:none;display:grid;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.mp-t{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.mp-b{flex:1;min-height:0}
.mp-f{flex:none;padding:10px 16px 12px;border-top:1px solid var(--line)}
.mp-fold{position:absolute;top:10px;right:8px}
.mp.fold{bottom:auto}
.mp.fold .mp-b,.mp.fold .mp-f,.mp.fold .mp-h>*:not(.mp-t){display:none}
.zg{padding:12px 16px 6px;font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.zrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;width:100%;padding:11px 16px 12px;text-align:left;
  border-top:1px solid var(--line);transition:background-color .12s}
.zrow:hover{background:var(--wash)}
.zrow.sel{background:var(--ink-3);box-shadow:inset 3px 0 0 var(--magenta)}
.zrow-t{font:700 italic 19px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.zrow-s{grid-column:1/-1;font-size:12.5px;color:var(--faint)}
.zrow-s b{color:var(--soft);font-weight:600}
.zbar{grid-column:1/-1;display:flex;gap:2px;height:4px;margin-top:2px;background:var(--ink-3)}
.zbar i{display:block;height:100%}
.zbar .st-colaborador{background:var(--magenta)}
.zbar .st-dispuesto{background:var(--mag-40)}
.zbar .st-hablado{background:var(--purple-hi)}
.zbar .st-sin-contactar{background:var(--ink-5)}
.zbar .st-no{background:transparent}
.zsel{display:grid;gap:12px;padding:4px 16px 16px;background:var(--ink-3);box-shadow:inset 3px 0 0 var(--magenta)}
.zsel .row-c{border-color:var(--line-2)}
.zsel-a{display:flex;flex-wrap:wrap;gap:8px}
.lg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--mute)}
.lg span{display:inline-flex;align-items:center;gap:6px}
.lg .ico{width:14px;height:14px}

/* Zonas en chips (móvil y tablet) */
.mz{position:absolute;z-index:20;left:0;right:0;top:10px;padding:0 12px;display:none}
.mz .chips{padding-bottom:2px}
.mz .chip{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-3),var(--shadow-s)}
.mz .chip.on{background:var(--magenta-deep);box-shadow:var(--shadow-s);color:var(--on)}
.mz .chip.on b{color:var(--on)}
@media (max-width:1023px){.v-map>.mp{display:none}.mz{display:block}}

/* Herramientas del mapa */
.mt{position:absolute;z-index:20;right:calc(14px + var(--sar));bottom:calc(88px + var(--sab));display:grid;gap:6px}
.mt .ib{background:var(--ink-2);box-shadow:0 0 0 1px var(--line-2),var(--shadow-s);color:var(--paper);width:44px;height:44px}
.mt .ib:hover{background:var(--ink-3)}
.mt .ib.on{color:var(--magenta-hi);box-shadow:inset 0 0 0 1.5px var(--magenta),var(--shadow-s)}
.mt-g{display:grid;gap:1px;background:var(--line-2);box-shadow:0 0 0 1px var(--line-2),var(--shadow-s)}
.mt-g .ib{box-shadow:none}
@media (min-width:1024px){.mt{bottom:calc(24px + var(--sab))}.v-map .fab{right:calc(72px + var(--sar));bottom:calc(24px + var(--sab))}}
.lm{display:grid;gap:12px;padding:14px;width:250px}
.lm .seg{--n:2}

/* Tarjeta inferior (club o zona seleccionados en móvil y tablet) */
.peek{position:absolute;z-index:26;left:calc(10px + var(--sal));right:calc(10px + var(--sar));bottom:calc(10px + var(--sab));display:grid;gap:12px;padding:14px 14px 12px 16px;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow);animation:tin .2s var(--ease)}
.peek-h{display:flex;align-items:flex-start;gap:12px}
.peek-h .av{width:44px;height:44px}
.peek-m{flex:1;min-width:0;display:grid;gap:4px}
.peek-n{font:700 italic 23px/.95 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.peek-s{font-size:13px;color:var(--faint)}
.peek-a{display:flex;gap:8px}
.peek-a .btn{flex:1}
.peek-x{margin:-8px -8px 0 0}
@media (min-width:1024px){.peek{left:auto;right:calc(72px + var(--sar));width:380px;bottom:calc(88px + var(--sab))}}

/* Modos del mapa: colocar un club y editar los municipios de una zona */
.mbar{position:absolute;z-index:30;left:calc(10px + var(--sal));right:calc(10px + var(--sar));display:grid;gap:10px;padding:12px 14px;background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
.mbar.top{top:10px}
.mbar.bot{bottom:calc(10px + var(--sab))}
.mbar-t{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mbar-t p{font-size:13.5px;line-height:1.35;color:var(--soft)}
.mbar-a{display:flex;gap:8px;justify-content:flex-end}
.mbar-a .btn{flex:1}
.mbar-where{font:700 italic 19px/1 var(--display);text-transform:uppercase}
.mbar-where small{display:block;margin-top:3px;font:500 12.5px/1.2 var(--body);text-transform:none;color:var(--faint)}
@media (min-width:768px){.mbar{left:50%;right:auto;width:520px;transform:translateX(-50%)}.mbar-a .btn{flex:none}}
.cross{position:absolute;z-index:25;left:50%;top:50%;width:0;height:0;pointer-events:none}
.cross::before,.cross::after{content:"";position:absolute;background:var(--magenta);box-shadow:0 0 0 1px #fff,0 0 0 2px rgba(10,10,20,.45)}
.cross::before{left:-18px;top:-1px;width:36px;height:2px}
.cross::after{left:-1px;top:-18px;width:2px;height:36px}
.cross i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border:2px solid var(--black);transform:skewX(-12deg);box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(10,10,20,.3),inset 0 0 0 1px #fff}
.geo-r{display:grid;margin-top:2px;max-height:200px;overflow:auto}
.geo-r button{padding:9px 2px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.35;color:var(--soft);text-align:left}
.geo-r button:hover{color:var(--hi);background:var(--wash)}

/* Pines de club */
.pin-w{background:none;border:0}
.pin{position:relative;width:20px;height:20px;transition:transform .15s var(--ease)}
.pin i{position:absolute;left:3px;top:4px;width:14px;height:12px;transform:skewX(-12deg);background:#fff;box-shadow:inset 0 0 0 2px var(--paper),0 1px 3px rgba(10,10,20,.35)}
.pin.st-colaborador i{background:var(--magenta);box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(10,10,20,.22),0 1px 4px rgba(10,10,20,.4)}
.pin.st-dispuesto i{background:var(--mag-pale);box-shadow:inset 0 0 0 2.4px var(--magenta),0 0 0 1px #fff,0 1px 3px rgba(10,10,20,.35)}
.pin.st-hablado i{background:var(--purple-hi);box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(10,10,20,.2),0 1px 4px rgba(10,10,20,.4)}
.pin.st-no i{left:5px;top:6px;width:10px;height:8px;background:var(--dim);box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(10,10,20,.35)}
.pin.hot::after{content:"";position:absolute;left:-4px;top:-3px;width:28px;height:26px;transform:skewX(-12deg);box-shadow:0 0 0 2px var(--magenta);opacity:0;animation:halo 2.2s var(--ease) infinite}
@keyframes halo{0%{opacity:.9;transform:skewX(-12deg) scale(.6)}80%,100%{opacity:0;transform:skewX(-12deg) scale(1.25)}}
.pin-c{position:absolute;left:4px;top:-9px;width:12px;height:10px;color:var(--black);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)}
.pin-c svg{width:12px;height:10px;fill:currentColor;stroke:none}
.pin.sel{transform:scale(1.45);z-index:2}
.pin.sel i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--magenta),0 2px 8px rgba(10,10,20,.45)}
.pin.dim{opacity:.28}
.pin.cand i{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 2px var(--purple),0 0 0 1px #fff;animation:blink 1.4s infinite}
.pin-l{position:absolute;left:24px;top:0;padding:4px 8px 3px 7px;background:var(--magenta-deep);color:var(--on);font:700 italic 14px/1 var(--display);text-transform:uppercase;
  white-space:nowrap;transform:skewX(-10deg);pointer-events:none;box-shadow:0 0 0 1px #fff,0 3px 10px rgba(10,10,20,.3)}
.pin-l>span{display:inline-block;transform:skewX(10deg)}
.pin.sel .pin-l{transform:skewX(-10deg) scale(.69);transform-origin:0 50%}
.clu-w{background:none;border:0}
.clu{display:grid;place-items:center;width:100%;height:100%;background:#fff;box-shadow:inset 0 0 0 2px var(--paper),0 2px 6px rgba(10,10,20,.3);transform:skewX(-10deg)}
.clu b{display:block;transform:skewX(10deg);font:700 italic 17px/1 var(--display);color:var(--paper)}
.clu.has-col{box-shadow:inset 0 0 0 3px var(--magenta),0 2px 6px rgba(10,10,20,.3)}
.clu.all-col{background:var(--magenta-deep);box-shadow:0 0 0 1.5px #fff,0 2px 6px rgba(10,10,20,.35)}
.clu.all-col b{color:var(--on)}
.marker-cluster{background:none!important}
.marker-cluster div{background:none!important;margin:0!important;border-radius:0!important}

/* Nombres de zona y de municipio sobre el mapa */
.zl-w,.ml-w{background:none;border:0;pointer-events:none!important}
.zl{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:4px;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none;text-align:center}
.zl b{font:700 italic 16px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--paper);text-shadow:var(--halo)}
.zl span{font:600 10.5px/1 var(--body);letter-spacing:.04em;color:var(--soft);text-shadow:var(--halo)}
.zl.zs-preparando b,.zl.zs-sondeo b{color:var(--purple-ink)}
.zl.zs-pausada b{color:var(--faint)}
.zl.sel b{font-size:19px}
.zl.hide{display:none}
.zl.nostat span{display:none}
.ml{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:600 9.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:rgba(20,20,24,.5);white-space:nowrap;text-shadow:var(--halo);pointer-events:none}
.ml.in-zone{color:rgba(20,20,24,.68)}
.ml.hide{display:none}
.v-map.editing .ml{color:var(--paper);font-weight:700}

/* Bienvenida sobre el mapa */
.hello{position:absolute;z-index:24;left:50%;top:50%;width:min(420px,calc(100% - 28px));transform:translate(-50%,-50%);display:grid;gap:14px;padding:20px;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
@media (min-width:1024px){.hello{left:calc(50% + 180px)}}
.hello ol{display:grid;gap:10px;counter-reset:p}
.hello li{position:relative;padding-left:34px;counter-increment:p;font-size:14px;line-height:1.4;color:var(--soft)}
.hello li::before{content:counter(p);position:absolute;left:0;top:-3px;font:700 italic 26px/1 var(--display);color:var(--magenta)}
.hello li b{color:var(--hi)}
.hello-a{display:flex;flex-wrap:wrap;gap:8px}

/* ══════════════════ Fichas ══════════════════ */
.v-dir .dir{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.v-dir .dir{grid-template-columns:420px minmax(0,1fr)}}
.dir-l{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--ink-2);border-right:1px solid var(--line-2)}
.dir-h{flex:none;display:grid;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.dir-ht{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dir-f{display:flex;gap:8px}
.dir-f .in{min-height:38px;padding:6px 34px 6px 10px;font-size:14px}
.dir-f .f{flex:1}
.dir-rows{flex:1;min-height:0}
.dir-more{display:flex;justify-content:center;padding:14px}
.dir-d{display:none;min-height:0;min-width:0}
@media (min-width:1024px){.dir-d{display:block}.v-dir .fab{display:none}}
.dir-d .empty{height:100%;align-content:center}
.lh{position:sticky;top:0;z-index:2;padding:9px 16px 7px;background:var(--wash);font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}

/* Ficha */
.fi{display:grid;gap:14px;max-width:760px;padding:18px 16px 40px}
.fi-h{display:grid;gap:10px}
.fi-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--faint)}
.fi-n{font:700 italic 36px/.92 var(--display);text-transform:uppercase;letter-spacing:-.005em;overflow-wrap:anywhere}
.fi-n small{display:block;margin-top:6px;font:500 15px/1.3 var(--body);text-transform:none;color:var(--mute)}
.fi-m{display:flex;flex-wrap:wrap;gap:6px}
.fi-q{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:6px}
.qa{display:grid;justify-items:center;align-content:center;gap:7px;min-height:66px;padding:10px 4px 9px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-xs);
  font:600 11.5px/1 var(--body);letter-spacing:.02em;color:var(--soft);text-align:center;transition:box-shadow .15s,color .15s}
.qa .ico{width:22px;height:22px;color:var(--paper)}
.qa:hover{box-shadow:inset 0 0 0 1.5px var(--magenta),var(--shadow-xs);color:var(--hi)}
.qa.off{opacity:.4;pointer-events:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.qa.wa .ico{color:var(--magenta-hi)}
.fi-c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.fi-c .btn{width:100%}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.step{display:grid;gap:5px;min-height:56px;padding:9px 6px 8px 10px;text-align:left;background:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-3);transform:skewX(-10deg);transition:background-color .15s,box-shadow .15s}
.step>span{display:grid;gap:4px;transform:skewX(10deg)}
.step b{font:700 italic 15.5px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.step small{font-size:10.5px;line-height:1.2;color:var(--faint)}
.step:hover{box-shadow:inset 0 0 0 1.5px var(--field-hi)}
.step.past{background:var(--mag-08);box-shadow:inset 0 0 0 1.5px var(--magenta)}
.step.cur{background:var(--magenta);box-shadow:none;color:var(--on)}
.step.cur small{color:rgba(255,255,255,.92)}
/* Club «no interesado»: los pasos se apagan con color (no con opacidad) para que el texto siga leyéndose */
.steps.no .step,.steps.no .step.past{background:var(--wash);box-shadow:inset 0 0 0 1.5px var(--line-3)}
.steps.no .step b,.steps.no .step small{color:var(--faint)}
.step-no{justify-self:start}
.seg-com{--n:4}
.ppl{display:grid}
.ppl .row{padding-left:0;padding-right:0;min-height:56px}
.ppl .row:hover{background:none}
.ppl .row:hover .row-t{color:var(--magenta-hi)}
.ppl .row:last-child{border-bottom:0}
.ppl-q{display:flex;gap:2px}
.ppl-q .ib{width:38px;height:38px}
.ppl-q .ib .ico{width:19px;height:19px}
.tl{display:grid}
.tl-i{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;padding:11px 0;border-top:1px solid var(--line);text-align:left;width:100%}
.tl-i:first-child{border-top:0;padding-top:2px}
.tl-ic{grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;background:var(--pur-18);color:var(--purple-ink)}
.tl-ic .ico{width:17px;height:17px}
.tl-t{font-size:14px;line-height:1.4;color:var(--paper);overflow-wrap:anywhere}
.tl-d{font-size:12px;color:var(--faint);white-space:nowrap}
.tl-x{grid-column:2/-1;font-size:13px;line-height:1.45;color:var(--mute);white-space:pre-line;overflow-wrap:anywhere}
.tl-i:hover .tl-t{color:var(--magenta-hi)}
.notes{width:100%;min-height:110px;padding:12px;background:var(--ink-2);border:1.5px solid var(--field);border-radius:var(--r);color:var(--paper);font:400 15px/1.5 var(--body);resize:vertical}
.notes:focus{border-color:var(--magenta);box-shadow:0 0 0 3px var(--mag-24)}
.fi-foot{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding-top:4px;font-size:12px;color:var(--dim)}
.cnt{display:grid;gap:8px}
.cnt-r{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 0;border-bottom:1px solid var(--line)}
.cnt-r:last-child{border-bottom:0}
.cnt-r .ico{color:var(--faint)}
.cnt-r a,.cnt-r span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14.5px}
.cnt-r a:hover{color:var(--magenta-hi)}
.zmun{display:flex;flex-wrap:wrap;gap:6px}
.zmun span{padding:5px 9px 4px;background:var(--ink-3);font-size:13px;color:var(--soft)}

/* Tarjetas de acción (tablero y fichas) */
.kc{position:relative;display:grid;gap:8px;padding:11px 12px 10px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-xs);cursor:pointer;text-align:left;width:100%;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:box-shadow .12s,background-color .12s}
.kc:hover{box-shadow:inset 0 0 0 1px var(--line-3),var(--shadow-s)}
.kc.alta{box-shadow:inset 3px 0 0 var(--magenta),inset 0 0 0 1px var(--line-2),var(--shadow-xs)}
.kc.alta:hover{box-shadow:inset 3px 0 0 var(--magenta),inset 0 0 0 1px var(--line-3),var(--shadow-s)}
.kc-tg{display:flex;flex-wrap:wrap;gap:4px}
.kc-tg span{padding:3px 6px 2px;font:600 10.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);background:var(--ink-4)}
.kc-tg .prio{background:var(--magenta);color:var(--on)}
.kc-t{padding-right:24px;font-weight:550;font-size:14.5px;line-height:1.35;color:var(--paper);overflow-wrap:anywhere}
.kc-ls{display:flex;flex-wrap:wrap;gap:4px}
.lk{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:24px;padding:2px 8px 2px 2px;background:var(--ink-3);font-size:12.5px;color:var(--soft);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lk .av{width:20px;height:20px;font-size:11px}
.lk .av .ico{width:13px;height:13px}
.kc-f{display:flex;align-items:center;gap:10px;min-height:20px;font-size:12px;color:var(--faint)}
.kc-f>span{display:inline-flex;align-items:center;gap:5px}
.kc-f .ico{width:14px;height:14px}
/* Vencida: pastilla rosa con texto magenta oscuro (6,6:1), se ve de lejos en la columna */
.kc-f>.kc-due.over{margin:-2px 0;padding:2px 7px 2px 5px;background:var(--mag-08);box-shadow:inset 0 0 0 1px var(--magenta-hi);color:var(--magenta-ink);font-weight:650}
.kc-due.today{color:var(--hi);font-weight:650}
.kc-own{margin-left:auto}
.kc-own .av{width:22px;height:22px;font-size:11.5px;background:var(--ink-5);color:var(--paper)}
.kc-ok{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:30px;height:30px;color:var(--dim);transition:color .12s,background-color .12s}
.kc-ok:hover{color:var(--on);background:var(--magenta)}
.kc-ok .ico{width:17px;height:17px;stroke-width:2.2}
.kc.done{background:var(--wash)}
.kc.done .kc-t{color:var(--mute)}
.kc.done .kc-ok{color:var(--lilac)}
.kc.drag{opacity:.3}
.kc-ghost{position:fixed;z-index:1300;margin:0;pointer-events:none;transform:rotate(2deg);box-shadow:inset 0 0 0 1.5px var(--magenta),var(--shadow);opacity:.96}
.kc-ph{flex:none;border:1.5px dashed var(--magenta);background:var(--mag-08)}
.kcl{display:grid;gap:8px}
.kcl .kc{background:var(--ink-2)}
.kcl-g{display:grid;gap:8px}
.kcl-g>.kick{padding-top:4px}

/* ══════════════════ Acciones (tablero) ══════════════════ */
.v-board.on{display:flex;flex-direction:column}
.bh{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.bh-t{display:flex;align-items:flex-end;gap:12px;margin-right:auto}
.bh-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bh-f .in{min-height:38px;width:auto;padding:6px 34px 6px 10px;font-size:14px}
.bh-f .in-ico .in{padding-left:38px;width:220px}
.bh-f .in-ico>.ico{left:11px}
.board{flex:1;min-height:0;display:flex;gap:12px;padding:14px 16px calc(14px + var(--sab));overflow-x:auto;overflow-y:hidden}
.col{flex:none;display:flex;flex-direction:column;width:316px;min-height:0;max-height:100%;background:var(--col);box-shadow:none}
.col-h{flex:none;display:flex;align-items:center;gap:10px;padding:12px 10px 10px 14px;box-shadow:inset 0 3px 0 var(--dim)}
.col[data-col="todo"] .col-h{box-shadow:inset 0 3px 0 var(--paper)}
.col[data-col="doing"] .col-h{box-shadow:inset 0 3px 0 var(--magenta)}
.col[data-col="done"] .col-h{box-shadow:inset 0 3px 0 var(--purple)}
.col-h h2{font:700 italic 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.col-h b{font:700 italic 19px/1 var(--display);color:var(--faint);font-variant-numeric:tabular-nums}
.col-h .ib{margin-left:auto;width:34px;height:34px}
.col-l{flex:1;min-height:60px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px 10px 10px}
.col-e{padding:18px 8px;text-align:center;font-size:13px;color:var(--dim)}
.col-a{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;margin:0 10px 10px;padding:0 10px;color:var(--faint);font-size:14px}
.col-a:hover{background:var(--ink-2);color:var(--hi)}
.col-q{flex:none;display:grid;gap:8px;margin:0 10px 10px}
.col-q textarea{min-height:64px}
.col-more{margin:0 10px 10px}
.btabs{display:none}
@media (max-width:767px){
  .bh{padding:12px 14px 10px}
  .bh-f{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .bh-f::-webkit-scrollbar{display:none}
  .bh-f .in-ico{flex:1;min-width:140px}
  .bh-f .in-ico .in{width:100%}
  .btabs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:10px 14px 0}
  .btabs button{display:grid;gap:3px;justify-items:center;min-height:46px;padding:6px 2px;box-shadow:inset 0 0 0 1px var(--line-3);font:700 italic 15px/1 var(--display);text-transform:uppercase;color:var(--mute);transform:skewX(-10deg)}
  .btabs button>span{display:grid;gap:3px;justify-items:center;transform:skewX(10deg)}
  .btabs button b{font:600 11px/1 var(--body);color:var(--faint)}
  .btabs button.on{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-3),inset 0 -3px 0 var(--magenta),var(--shadow-xs);color:var(--hi)}
  .board{padding:10px 0 0;gap:0;scroll-snap-type:x mandatory;scrollbar-width:none}
  .board::-webkit-scrollbar{display:none}
  .col{width:100vw;background:none;box-shadow:none;scroll-snap-align:start;scroll-snap-stop:always}
  .col-h{display:none}
  .col-l{padding:4px 14px 90px}
  .col-a{margin:0 14px 10px}
  .v-board .fab{bottom:calc(16px + var(--sab))}
}

/* ══════════════════ Buscador ══════════════════ */
.ov.k-search{align-items:flex-start;justify-content:center}
.ov.k-search .ov-p{position:relative;inset:auto;width:100%;height:100%;transform:none;opacity:0;transition:opacity .15s}
.ov.k-search.ov-on .ov-p{opacity:1}
@media (min-width:768px){.ov.k-search{padding-top:9vh}.ov.k-search .ov-p{width:min(640px,calc(100% - 40px));height:auto;max-height:72vh;box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}}
.sq{flex:none;display:flex;align-items:center;gap:6px;padding:calc(8px + var(--sat)) 8px 8px 14px;border-bottom:1px solid var(--line)}
@media (min-width:768px){.sq{padding-top:8px}}
.sq .ico{color:var(--magenta)}
.sq input{flex:1;min-width:0;height:48px;padding:0 6px;background:none;border:0;font:400 18px/1 var(--body);color:var(--paper)}
.sq input::placeholder{color:var(--dim)}
.sr{flex:1;min-height:0;overflow:auto;padding-bottom:calc(12px + var(--sab))}
.sr .lh{position:static;background:none;border:0;padding-top:14px}
.sr .row{min-height:56px;border:0}
.sr .row.kb{background:var(--ink-3);box-shadow:inset 3px 0 0 var(--magenta)}
.sr-hint{padding:18px 16px;font-size:13.5px;color:var(--faint)}

/* ══════════════════ Ajustes ══════════════════ */
.v-set.on{display:block;overflow:auto}
.set{display:grid;gap:16px;max-width:780px;margin:0 auto;padding:20px 16px calc(60px + var(--sab))}
.set .sec{gap:14px}
.set-r{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.set-r:first-of-type{border-top:0}
.set-r .row-m{flex:1}
.set-a{display:flex;flex-wrap:wrap;gap:8px}
.lst{display:flex;flex-wrap:wrap;gap:6px}
.lst span{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 4px 0 10px;background:var(--ink-3);font-size:13.5px}
.lst span button{display:grid;place-items:center;width:26px;height:26px;color:var(--faint)}
.lst span button:hover{color:var(--magenta-hi)}
.bk{display:grid}
.bk .set-r{padding:8px 0}
.about{font-size:12.5px;line-height:1.55;color:var(--faint)}
.about a{text-decoration:underline;text-underline-offset:3px}

/* ══════════════════ Importar y descubrir ══════════════════ */
.imp{display:grid;gap:16px}
.imp-p{max-height:300px;overflow:auto;box-shadow:inset 0 0 0 1px var(--line)}
.imp-p table{width:100%;border-collapse:collapse;font-size:13px}
.imp-p th,.imp-p td{padding:7px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.imp-p th{position:sticky;top:0;background:var(--ink-3);font-weight:600;color:var(--soft)}
.imp-p td.dup{color:var(--magenta-hi)}
.imp-map{display:grid;gap:8px}
.imp-map .set-r{padding:6px 0}
.imp-map select{max-width:220px}
.drop{display:grid;justify-items:center;gap:8px;padding:22px;text-align:center;border:1.5px dashed var(--line-3);color:var(--faint);font-size:13.5px}
.drop.on{border-color:var(--magenta);background:var(--mag-08)}
.cand{display:grid}
.cand .tg{width:100%;padding:8px 0;border-top:1px solid var(--line);align-items:flex-start}
.cand .tg-b{margin-top:2px}
.cand .tg.has .tg-t{color:var(--faint)}

/* Utilidades de tamaño de pantalla */
@media (max-width:767px){.hide-m{display:none!important}}
@media (min-width:1024px){.show-t{display:none!important}}
.v-map.placing .mp,.v-map.editing .mp,.v-map.placing .mz,.v-map.editing .mz,.v-map.placing .mt [data-a="list"],.v-map.editing .mt [data-a="list"]{display:none}
.v-map.placing .mt,.v-map.editing .mt{bottom:calc(150px + var(--sab))}
@media (min-width:768px){.v-map.placing .mt,.v-map.editing .mt{bottom:calc(24px + var(--sab))}}
.grow{flex:1}
@media (max-width:420px){.hide-s{display:none}}
/* Filtro quitado: más claro, pero el texto sigue pasando 4,5:1 (la opacidad lo dejaba por debajo) */
.chip.dim{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line-2)}
.chip.dim .dot{opacity:.5}
.chip.dim:hover{color:var(--hi);box-shadow:inset 0 0 0 1px var(--field-hi)}
.chip.dim:hover .dot{opacity:1}

/* Ajustes tras la primera revisión visual */
.demo-tag{flex:none;margin-left:4px;padding:4px 8px 3px;background:var(--purple);color:var(--on);font:600 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:767px){.sync.ok{display:none}}
.v-map.has-peek .mt{bottom:calc(var(--peek-h,150px) + 20px + var(--sab))}
.peek-a .btn{padding:0 12px}
@media (max-width:767px){.dir-rows{padding-bottom:96px}}
@media (min-width:1024px){.dir-h .chips{flex-wrap:wrap;overflow:visible}}
.in.set{border-color:var(--magenta-hi);color:var(--hi);background-color:var(--mag-08)}
@media (min-width:768px){.bh{padding-right:24px}}
@media (min-width:768px){.col{flex:1 1 300px;min-width:290px;max-width:420px}}
@media (max-width:767px){
  .bh-f{flex-wrap:wrap;overflow:visible}
  .bh-f .in-ico{flex:1 1 100%}
  .bh-f select.in{flex:1 1 0;min-width:0}
  .col-a{display:none}
}

/* ── Revisión de diseño ── */
/* Nombres largos: las rejillas de una columna no crecen más que su caja (fichas, tarjetas, importador) */
.fi,.sec,.ppl,.kc,.kcl,.kcl-g,.imp,.imp-map,.zsel,.cnt,.form,.f{grid-template-columns:minmax(0,1fr)}
.kc-tg{padding-right:28px}
/* Fichas enlazadas en las tarjetas: bloque en línea para que el nombre termine en «…» */
.lk{display:inline-block;vertical-align:top;line-height:20px;text-overflow:ellipsis}
.lk>.av{display:inline-grid;vertical-align:top;margin-right:6px}
/* …y en los formularios, con la «×» siempre a la vista */
.lk.lk-ed{display:inline-flex;align-items:center;gap:6px;padding-right:2px}
.lk.lk-ed>.av{margin-right:0}
.lk-n{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lk-x{flex:none;width:22px;height:22px}

/* Barra superior entre 768 y 1023 px: el buscador queda en un icono y el estado de guardado sin texto */
@media (min-width:768px) and (max-width:1023px){
  .top-q span,.top-q kbd,.sync span{display:none}
  .top-q{flex:none;width:40px;padding:0;justify-content:center;background:none;box-shadow:none;color:var(--soft)}
  .top-q:hover{background:var(--ink-3);box-shadow:none;color:var(--hi)}
  .sync{padding:0 8px}
}

/* Teléfonos estrechos: cifras, pasos y botones en dos columnas */
.seg-zs{--n:4}
@media (max-width:420px){
  .fi .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fi-c{grid-template-columns:minmax(0,1fr)}
  .seg-zs{--n:2}
}

/* Vacíos: el título manda */
.empty .h-l{font-size:26px;color:var(--paper)}

/* Ventanas: borde de verdad (el pie ya no tapa la línea) y diálogo con canto */
@media (min-width:768px){.ov.k-modal .ov-p,.ov.k-sheet .ov-p{border:1px solid var(--line-2);box-shadow:var(--shadow)}}
.ov.k-sheet .ov-p{border-top:1px solid var(--line-2)}
.ov.k-dialog .ov-p{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}

/* Mapa: la tarjeta, las barras y «+ Club» dejan ver los créditos (IGN, OSM) */
.peek,.mbar.bot{bottom:calc(26px + var(--sab))}
@media (min-width:1024px){.peek{bottom:calc(88px + var(--sab))}}
@media (max-width:1023px){.v-map .fab{bottom:calc(26px + var(--sab))}}
.v-map.has-peek .mt{bottom:calc(var(--peek-h,150px) + 36px + var(--sab))}
@media (max-width:767px){.v-map.placing .mt,.v-map.editing .mt{bottom:calc(166px + var(--sab))}}

/* Contraste: texto pequeño en blanco sobre magenta oscuro (5,5:1); el #FF1493 queda para los botones grandes */
.pill.st-colaborador,.pill.zs-activa,.pill.cat-m,.kc-tg .prio,.mz .chip.on,.step.cur,.btn-pri.btn-s,
.seg>button[aria-checked="true"]:not(.pur),.seg>button.on:not(.pur){background:var(--magenta-deep)}
.btn-pri.btn-s:hover{background:var(--magenta-ink)}
.step.cur small{color:rgba(255,255,255,.92)}

/* Grises y bordes legibles */
.col-e,.fi-foot,.kc-ok{color:var(--faint)}
.sq input::placeholder,.notes::placeholder{color:var(--faint)}
.notes{border-color:var(--field)}
.tg-b{box-shadow:inset 0 0 0 1.5px var(--field)}

/* Pantallas táctiles: objetivos de 44 px */
@media (pointer:coarse){
  .btn-s,.btn-txt,.seg.seg-s>button,.chip,.dir-f .in,.bh-f .in,.tg{min-height:44px}
  .btn{min-width:44px}
  .kc-ok{top:0;right:0;width:44px;height:44px}
  .kc-t,.kc-tg{padding-right:32px}
  .ppl-q .ib{width:44px;height:44px}
  .lst span{min-height:44px;padding-right:0}
  .lst span button{width:44px;height:44px}
  .lk.lk-ed{min-height:44px;padding-right:0}
  .lk-x{width:44px;height:44px}
  .top-q{height:44px}
}
@media (min-width:768px) and (max-width:1023px) and (pointer:coarse){.top-q{width:44px}}
/* Móvil: la última tarjeta de una columna puede subir por encima de «+ Acción» */
@media (max-width:767px){
  .col-l{padding-bottom:0}
  .col-l::after{content:"";flex:none;height:84px}
}

/* Foco: un solo marco en los campos; en el buscador, toda la fila */
.in:focus-visible,.notes:focus-visible,.sq input:focus-visible{outline:none}
.sq:focus-within{box-shadow:inset 0 -2px 0 var(--magenta)}

/* Fichas › filtros: los desplegables largos tienen sitio (y bajan de fila si no caben) */
.dir-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}

/* Bordes rectos y «Demo» en romboide, como «CRM» */
.chip,.pill,.av{border-radius:0}
.demo-tag{display:inline-flex;align-items:center;padding:.12em .42em .06em .34em;font:700 italic 14.5px/1 var(--display);letter-spacing:.02em;transform:skewX(-10deg)}
.demo-tag>span{display:inline-block;transform:skewX(10deg)}

/* Fichas en el ordenador: la ficha centrada y sus botones alineados con ella */
.dir-d .fi{margin-inline:auto}
.dir-d>div:first-child:not(.empty){max-width:760px;margin-inline:auto}

/* Avisos abajo a la izquierda desde 768 px (no tapan los botones de las ventanas); en el mapa, a la derecha del panel */
@media (min-width:768px){.toasts{left:calc(16px + var(--sal));width:min(380px,calc(100% - 32px));transform:none}}
@media (min-width:1024px){body:has(.v-map.on:not(.placing):not(.editing)>.mp:not(.fold)) .toasts{left:calc(368px + var(--sal))}}

/* Filas de chips en el móvil: de borde a borde para que se note que siguen */
@media (max-width:1023px){
  .mz{padding:0}
  .mz .chips{padding-left:calc(12px + var(--sal))}
  .mz .chips::after{content:"";flex:none;width:calc(6px + var(--sar))}
  .dir-h .chips{margin-inline:-16px;padding-left:16px}
  .dir-h .chips::after{content:"";flex:none;width:10px}
}
.mz .chip.on .dot{display:none}

/* Detalles: los romboides no se salen de su caja, «Capas» en una hoja estrecha, «Añadir acción» pegado a sus tarjetas */
.fi-c,.seg{padding-inline:4px}
.steps{padding-inline:5px}
@media (min-width:768px){.ov.k-sheet .ov-p{width:min(var(--w,560px),100%)}}
.lm{width:auto}
.col-l{flex:0 1 auto}
/* Etiqueta CLUB: texto pequeño, mismo criterio de contraste que las pastillas */
.tag-club{background:var(--magenta-deep)}
/* Buscador: una sola «×» (la nuestra), sin la del navegador */
.sq input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

/* ══════════════════ Tema claro: retoques de conjunto ══════════════════ */
/* Ficha (cajón, pantalla completa y detalle de Fichas): lienzo gris con las secciones en tarjetas blancas */
.ov-b:has(>.fi){background:var(--ink)}
.dir-d{background:var(--ink)}
/* Cabeceras de ventana y cajón: blancas con línea */
.ov-h{background:var(--ink-2);border-bottom-color:var(--line-2)}
/* Zona elegida en el panel: el «hover» de sus botones fantasma no se pierde sobre el gris */
.zsel .btn-ghost:hover{background:var(--ink-2)}
/* Importar clubes desde Google Maps */
.steps-l{display:grid;gap:6px;padding-left:20px;list-style:decimal;font-size:14.5px;line-height:1.45;color:var(--soft)}
.steps-l b{color:var(--paper)}
.g-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.g-row:last-child{border-bottom:0}
.g-row .tg{min-height:44px;align-items:center}
.g-row.has .g-m{opacity:.65}
.g-m{display:grid;gap:4px;min-width:0}
.g-m small{color:var(--faint);font-size:12.5px;line-height:1.35}