/* ============================================================
   PLAYBOOKLEAK — PANEL ADMIN (app.playbookleak.com)
   Estructura: claridad tipo Shopify (fila de KPIs, grafica, tablas).
   Piel: la MISMA casa que la landing y el portal (tokens de v2.css).
   Sin librerias, sin CDNs, sin estilos inline (CSP estricta).
   Mobile-first: el dueno lo abre desde el celular.
   ============================================================ */

body.adm{background:var(--paper);color:var(--ink);font-family:var(--serif);min-height:100vh;display:flex;flex-direction:column}
.amain{flex:1 0 auto}
.awrap{max-width:1180px;margin:0 auto;padding:0 4.5vw}
@media(min-width:1240px){.awrap{padding:0 1.2rem}}

/* ---------- cabecera Vault ---------- */
.ahead{background:var(--vault);padding:.95rem 0;position:relative;z-index:5}
.ahbar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.ahbar .wordmark{font-size:.78rem}
.adoc{color:var(--dim-dark);font-size:.72rem;letter-spacing:.16em}
.ahbar .aspacer{flex:1}
.aout{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,236,.85);text-decoration:none;border:1px solid rgba(247,244,236,.35);padding:.5em .85em;white-space:nowrap;transition:color .2s,background-color .2s,border-color .2s}
.aout:hover{color:var(--vault);background:var(--paper);border-color:var(--paper)}
.aout:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
@media(max-width:560px){.adoc{display:none}}

/* ---------- pestanas ---------- */
.atabs{background:var(--field);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:4}
.atabs-in{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.atabs-in::-webkit-scrollbar{display:none}
.atab{font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;color:var(--dim);text-decoration:none;padding:.95rem .85rem;white-space:nowrap;border-bottom:3px solid transparent;transition:color .18s,border-color .18s}
.atab:hover{color:var(--ink)}
.atab.on{color:var(--ink);border-bottom-color:var(--stamp)}
.atab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.atab .dot{display:inline-block;min-width:1.35em;margin-left:.4em;padding:.05em .35em;background:var(--stamp);color:var(--paper);font-family:var(--mono);font-size:.9em;text-align:center}

/* ---------- cuerpo ---------- */
.amain{padding:1.6rem 0 3.4rem}
.apage-head{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.4rem}
.apage-head h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.95;font-size:clamp(1.85rem,6vw,2.6rem);margin:.35rem 0 0}
.alab{display:block;font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--stamp)}
.asub{color:var(--dim);font-size:.95rem;margin-top:.45rem;max-width:62ch}

/* filtros de fecha */
.adates{display:flex;gap:.35rem;flex-wrap:wrap}
.adate{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--dim);border:1px solid var(--line);padding:.5em .8em;background:var(--card);transition:background .18s,color .18s,border-color .18s}
.adate:hover{border-color:var(--ink);color:var(--ink)}
.adate.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.adate:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:1.5rem}
@media(min-width:640px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}}
@media(min-width:1000px){.kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kpi{background:var(--card);border:1px solid rgba(22,24,29,.18);border-top:2px solid var(--ink);padding:.85rem .85rem 1rem;min-width:0;transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){.kpi:hover{transform:translateY(-2px);}}
.kpi-l{display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:.45rem;line-height:1.3}
.kpi-v{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,5.4vw,1.95rem);line-height:1;letter-spacing:.005em;word-break:break-word}
.kpi-v.money{color:var(--ledger)}
.kpi-v.alert{color:var(--stamp)}
.kpi-d{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--dim);margin-top:.5rem}
.kpi-d.up{color:var(--ledger)}
.kpi-d.down{color:var(--stamp)}

/* ---------- tarjetas / secciones ---------- */
.acard{background:var(--card);border:1px solid rgba(22,24,29,.18);border-top:2px solid var(--ink);padding:1.2rem 1.1rem 1.4rem;margin-bottom:1.5rem}
@media(min-width:720px){.acard{padding:1.6rem 1.7rem 1.8rem}}
.acard>h2,.acard>.ahd h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;margin:.3rem 0 .2rem}
.ahd{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.ahd .anote{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.agrid2{display:grid;gap:1.5rem}
@media(min-width:940px){.agrid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.agrid3{display:grid;gap:1.5rem}
@media(min-width:820px){.agrid3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- grafica SVG propia ---------- */
.achart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.achart{width:100%;min-width:520px;height:auto;display:block;overflow:visible}
.achart .bar{fill:var(--ledger);opacity:.85}
.achart .bar.b2{fill:var(--stamp);opacity:.8}
.achart .bar:hover{opacity:1}
.achart .grid{stroke:rgba(22,24,29,.14);stroke-width:1}
.achart .axis{stroke:rgba(22,24,29,.4);stroke-width:1}
.achart .tick{font-family:'Courier Prime','Courier New',monospace;font-size:12.5px;fill:rgba(22,24,29,.78)}
.achart .line{fill:none;stroke:var(--ink);stroke-width:1.6}
.achart .dot{fill:var(--ink)}
.alegend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.alegend i{display:inline-block;width:.8em;height:.8em;margin-right:.35em;vertical-align:-1px}
.alegend .g1{background:var(--ledger)}
.alegend .g2{background:var(--stamp)}
.alegend .g3{background:var(--ink)}

/* ---------- tablas ---------- */
.atable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.3rem;background:linear-gradient(to right,var(--card) 30%,rgba(251,249,243,0)),linear-gradient(to right,rgba(251,249,243,0),var(--card) 70%) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(22,24,29,.16),transparent),radial-gradient(farthest-side at 100% 50%,rgba(22,24,29,.16),transparent) 100% 0;background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.atable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;min-width:440px}
.atable th{font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--ink);text-align:left;padding:.55rem .7rem .55rem 0;border-bottom:1px solid var(--ink);white-space:nowrap}
.atable td{padding:.62rem .7rem .62rem 0;border-bottom:1px solid var(--line);color:var(--dim);vertical-align:top}
.atable tr:last-child td{border-bottom:none}
.atable td.num,.atable th.num{text-align:right;padding-right:1.1rem}
.atable tr>*:last-child{padding-right:0}
.atable td b{color:var(--ink);font-weight:400}
.atable a{color:var(--stamp);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
@media(hover:hover){.atable tbody tr:hover td{background:rgba(22,24,29,.035)}}
.aempty{font-family:var(--mono);font-size:.8rem;color:var(--dim);padding:1.1rem 0;text-align:center}

/* barra de proporcion dentro de tabla (fuentes / dispositivos) */
.abarcell{display:block;height:6px;background:var(--line);margin-top:.35rem}
.abarcell i{display:block;height:100%;background:var(--stamp)}

/* ---------- badges ---------- */
.badge{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;padding:.28em .55em;border:1px solid currentColor;white-space:nowrap}
.badge.ok{color:var(--ledger)}
.badge.warn{color:#8a6d00}
.badge.bad{color:var(--stamp)}
.badge.mute{color:var(--dim)}

/* ---------- formularios / acciones ---------- */
.aform{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin:0 0 1.1rem}
.afield{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:min(100%,220px)}
.afield label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ainput,.atextarea,.aselect{width:100%;min-height:48px;padding:.65rem .85rem;font-family:var(--mono);font-size:.88rem;border:1px solid rgba(22,24,29,.45);background:#fff;color:var(--ink)}
.atextarea{min-height:96px;line-height:1.5;resize:vertical}
.ainput:focus-visible,.atextarea:focus-visible,.aselect:focus-visible{outline:2px solid var(--stamp);outline-offset:1px}
.abtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.15rem;font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;text-decoration:none;transition:background .18s,color .18s,transform .18s}
.abtn:hover{background:var(--stamp);border-color:var(--stamp);color:var(--paper)}
.abtn:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}
.abtn.ghost{background:transparent;color:var(--ink)}
.abtn.ghost:hover{background:var(--ink);color:var(--paper)}
.abtn.red{background:var(--stamp);border-color:var(--stamp)}
.abtn.red:hover{background:var(--ink);border-color:var(--ink)}
.abtn.sm{min-height:38px;font-size:.7rem;padding:0 .8rem}
.arow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
.acheck{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.8rem;color:var(--ink)}
.acheck input{width:20px;height:20px;accent-color:var(--stamp)}

/* ---------- avisos ---------- */
.anotice{border-left:3px solid var(--ledger);background:rgba(30,107,79,.08);color:#14503b;padding:.85rem 1rem;font-size:.9rem;margin-bottom:1.2rem;font-family:var(--serif)}
.anotice.bad{border-left-color:var(--stamp);background:rgba(192,38,28,.07);color:#8d1c14}
.anotice.info{border-left-color:var(--ink);background:rgba(22,24,29,.05);color:var(--ink)}
.anotice code,.amono{font-family:var(--mono);font-size:.82em;word-break:break-all}

/* bloque "PostHog no conectado" */
.aconnect{border:1px dashed rgba(22,24,29,.35);background:var(--card);padding:1.2rem 1.15rem 1.35rem}
.aconnect h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:1.2rem;line-height:1;margin-bottom:.5rem}
.aconnect ol{margin:.8rem 0 0 1.15rem;font-size:.9rem;line-height:1.65;color:var(--dim)}
.aconnect ol code{font-family:var(--mono);font-size:.82em;background:rgba(22,24,29,.07);padding:.1em .35em}
.aconnect .kicker{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);display:block;margin-bottom:.4rem}

/* definiciones (detalle de pedido / cliente) */
.adl{display:grid;grid-template-columns:1fr;gap:.85rem 1.6rem;margin:0}
@media(min-width:620px){.adl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.adl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.adl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:.25rem}
.adl dd{margin:0;font-family:var(--mono);font-size:.85rem;color:var(--ink);word-break:break-word}
.asep{border:none;border-top:1px solid var(--line);margin:1.4rem 0 1.2rem}

/* login del panel */
.alogin{max-width:460px;margin:2.5rem auto}
.alogin h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,7vw,2.5rem);line-height:.98;margin:.4rem 0 .8rem}
.alogin p{color:var(--dim);font-size:.95rem;line-height:1.6}
.alogin .aform{margin-top:1.3rem}
.alogin .abtn{width:100%}

.afoot{padding:1.5rem 0;background:var(--vault);color:var(--dim-dark)}
.afoot .fgrid{align-items:center}
.afoot .mono{font-size:.68rem;letter-spacing:.12em}

/* enlaces sueltos */
.alink{color:var(--stamp);text-decoration:underline;text-underline-offset:3px;font-family:var(--mono);font-size:.78rem;word-break:break-word}
.aside-list{list-style:none;font-family:var(--mono);font-size:.78rem;color:var(--dim)}
.aside-list li{padding:.5rem 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem}
.aside-list li:first-child{border-top:none}
.aside-list b{color:var(--ink);font-weight:400}

@media(prefers-reduced-motion:reduce){.kpi,.abtn,.atab,.adate{transition:none}.kpi:hover{transform:none}}

/* ============================================================
   GLOBO DE VISITANTES EN VIVO
   Mapa: SVG propio (/static/img/world.svg, Natural Earth 110m
   proyectado equirectangular y recortado a lat 84..-58).
   Puntos: SVG superpuesto, generado por el servidor y refrescado
   por /static/js/admin.js cada 20 s. Cero librerias, cero CDNs.
   ============================================================ */
.aglobe-card{background:var(--vault);border-top-color:var(--stamp);color:var(--paper);box-shadow:6px 6px 0 rgba(13,14,18,.18)}
.aglobe-card .ahd h2{color:var(--paper)}
.aglobe-card .alab{color:var(--signal)}
.aglobe-card .anote{color:rgba(247,244,236,.55)}
.ahsmall{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,236,.6);display:inline-block;vertical-align:middle;margin-left:.3rem}
.aglobe-wrap{display:grid;gap:1.1rem}
@media(min-width:900px){.aglobe-wrap{grid-template-columns:minmax(0,1fr) 250px;gap:1.6rem;align-items:center}}
.aglobe{position:relative;width:100%;line-height:0;background:var(--vault);border:1px solid rgba(247,244,236,.09)}
.aglobe-map{width:100%;height:auto;display:block;opacity:.95}
.aglobe-dots{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.aglobe-dots .gd{fill:var(--signal)}
.aglobe-dots .gd.d1{fill:var(--signal);opacity:.75}
.aglobe-dots .gd.d2{fill:var(--signal);opacity:.45}
.aglobe-dots .gh{fill:var(--signal);opacity:.13}
.aglobe-dots .gh.d1{opacity:.07}
.aglobe-dots .gh.d2{opacity:.04}
.aglobe-dots .gd.d0{animation:apulse 2.4s ease-in-out infinite}
.aglobe-dots .gh.d0{animation:ahalo 2.4s ease-in-out infinite}
@keyframes apulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes ahalo{0%{opacity:.20;transform:scale(.7)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0;transform:scale(1.25)}}
.aglobe-dots .d0{transform-box:fill-box;transform-origin:center}
.aglobe-side .alab{color:var(--signal);margin-bottom:.6rem}
.aloc{list-style:none;margin:0;font-family:var(--mono);font-size:.78rem}
.aloc li{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding:.5rem 0;border-top:1px solid rgba(247,244,236,.12)}
.aloc li:first-child{border-top:none}
.aloc .lname{color:var(--paper);min-width:0;overflow-wrap:anywhere}
.aloc .lname em{display:block;font-style:normal;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,244,236,.5);margin-top:.15rem}
.aloc .lnum{color:var(--signal);font-variant-numeric:tabular-nums;font-size:.95rem}
.aloc .lempty .lname{color:rgba(247,244,236,.55);font-size:.72rem;line-height:1.5}
@media(max-width:760px){.aglobe-dots .gd{r:5}.aglobe-dots .gh{r:15}}
@media(prefers-reduced-motion:reduce){.aglobe-dots .gd.d0,.aglobe-dots .gh.d0{animation:none}}

/* barra de proporcion (SVG, sin estilos inline) */
.abar{display:block;width:100%;height:6px;margin-top:.35rem}
.abar .bg{fill:rgba(22,24,29,.14)}
.abar .fg{fill:var(--stamp)}

/* tickets */
.aticket{border-top:1px solid var(--line);padding:.2rem 0}
.aticket:first-of-type{border-top:none}
.aticket summary{cursor:pointer;padding:.75rem 0;list-style:none;font-family:var(--mono);font-size:.8rem}
.aticket summary::-webkit-details-marker{display:none}
.aticket summary:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.tsum{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}
.tsum b{color:var(--ink);font-weight:400}
.tsum em{font-style:normal;color:var(--dim)}
.tago{color:var(--dim);font-size:.72rem;margin-left:auto}
.tbody{font-family:var(--serif);font-size:.92rem;line-height:1.6;color:var(--dim);white-space:pre-wrap;padding:.2rem 0 .4rem;border-left:2px solid var(--line);padding-left:.9rem;margin:.3rem 0 .6rem}

/* Barra de origen del trafico: botones para ver solo quien llega de un sitio.
   Se desplaza en horizontal en el movil en vez de romper la tarjeta. */
.asrcbar{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;padding-bottom:.2rem}
.asrcbar .adate{padding:.45em .75em}
.asrcbar .adate.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:620px){
  .asrcbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
           scrollbar-width:thin;margin-right:-4.5vw;padding-right:4.5vw}
  .asrcbar .adate{white-space:nowrap;flex:0 0 auto}
}

/* Hilo de la conversacion dentro del tique, en el panel. */
.ahilo{display:grid;gap:.7rem;margin:.9rem 0 1.2rem}
.amsg{border:1px solid rgba(22,24,29,.16);border-left:3px solid rgba(22,24,29,.3);padding:.7rem .85rem;background:var(--card);max-width:90%}
.amsg.amine{margin-left:auto;background:var(--field);border-left-color:var(--stamp)}
.amsg .awho{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:.35rem}
.amsg p{margin:0;white-space:pre-wrap;line-height:1.55;font-size:.92rem}
@media (max-width:600px){ .amsg{max-width:100%} }

/* Fila de avisos: solo aparece cuando hay algo que atender. */
.kpis-alert .kpi{border-left:3px solid var(--stamp)}
/* Acciones que no tienen vuelta atras: se ven distintas a proposito. */
.arow-danger{align-items:center;gap:.9rem;flex-wrap:wrap}
.abtn.danger{background:var(--card);color:var(--stamp);border:1px solid var(--stamp)}
.abtn.danger:hover{background:var(--stamp);color:var(--paper)}
.ainline{display:inline}

/* Devolucion: el motivo va pegado al boton, no en otro sitio. */
.arefund{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.arefund label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.arefund .aselect{width:auto;min-width:14rem}