/* Sugeridor de Pivots: misma familia que Mis Pivots (solo oscuro). Pantalla de móvil: cabecera arriba, lista, pestañas abajo. */
@font-face{font-family:"Archivo";src:url("fuentes/archivo.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --pizarra:#0F1B25; --panel:#152532; --panel2:#1B2F3F; --linea:#26404F;
  --texto:#E6EEF2; --suave:#8FA6B3; --ambar:#F4B740; --verde:#3DD69A; --rojo:#F2677A; --violeta:#9B8CFF;
  --letra:"Archivo","Segoe UI",system-ui,sans-serif;
  --alto-nav:64px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--pizarra);color:var(--texto)}
body{font-family:var(--letra);font-size:16px;line-height:1.4;font-variant-numeric:tabular-nums;
  padding-top:env(safe-area-inset-top,0px)}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
a{color:var(--ambar)}
.suave{color:var(--suave)} .pequeno{font-size:.8rem}

/* Entrar */
.entrar{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px max(20px,env(safe-area-inset-right,0px)) 40px max(20px,env(safe-area-inset-left,0px));text-align:center}
.entrar img{border-radius:18px}
.entrar h1{margin:6px 0 0;font-size:1.6rem;font-weight:800}
.entrar form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;margin-top:14px;text-align:left}
.entrar label{font-size:.9rem;color:var(--suave)}
.entrar input{font:inherit;font-size:1.1rem;padding:14px;border-radius:12px;border:1px solid var(--linea);background:var(--panel);color:var(--texto)}
.principal{background:var(--ambar);color:#1A1405;border:0;border-radius:12px;padding:14px;font-weight:700;font-size:1.05rem}
.principal:disabled{opacity:.6}
.secundario{background:var(--panel2);border:1px solid var(--linea);border-radius:12px;padding:12px 16px;font-weight:600}
.error{color:var(--rojo);min-height:1.4em;margin:0}

/* Cabecera */
.cabecera{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--pizarra);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--linea)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--pizarra);z-index:10}
.titulo{font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:10px;min-width:0}
.titulo #t-titulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aguja{width:4px;height:1.1em;background:var(--ambar);border-radius:2px;flex:none}
.atras{background:none;border:0;padding:0 6px 0 0;font-size:1.3rem;color:var(--suave)}
.hora{font-size:.78rem;color:var(--suave);white-space:nowrap}
.aviso{margin:10px 16px 0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--rojo) 16%,var(--panel));color:var(--texto);font-size:.9rem}

main{padding:12px max(16px,env(safe-area-inset-right,0px)) calc(var(--alto-nav) + 24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  max-width:720px;margin:0 auto}
.ayuda{color:var(--suave);font-size:.85rem;margin:10px 2px 12px}

/* Filtro */
.filtro,.tfs{display:flex;background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:3px;gap:2px}
.filtro button,.tfs button{flex:1;background:none;border:0;padding:10px 6px;border-radius:9px;font-weight:600;color:var(--suave)}
.filtro button[aria-pressed="true"],.tfs button[aria-pressed="true"]{background:var(--panel2);color:var(--texto)}

/* Tarjetas */
.lista{display:flex;flex-direction:column;gap:8px}
.tarjeta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:12px 14px}
.tarjeta:active{background:var(--panel2)}
.t-arriba{display:flex;align-items:center;gap:8px;min-width:0}
.activo{font-weight:800;font-size:1rem}
.tf{font-size:.72rem;font-weight:700;color:var(--suave);border:1px solid var(--linea);border-radius:20px;padding:1px 7px}
.lado{font-size:.8rem;font-weight:800;letter-spacing:.04em}
.l{color:var(--verde)} .s{color:var(--rojo)}
.precio{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.dist{text-align:right;font-weight:700;font-size:1.05rem}
.tarjeta .dist{grid-row:span 2;grid-column:2}
.dist small{display:block;font-weight:500;font-size:.72rem;color:var(--suave)}
.dist.muy-cerca{color:var(--ambar)}
.t-abajo{grid-column:1 / 3;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--suave)}
.vacio{color:var(--suave);text-align:center;padding:30px 10px}

/* Activos */
.rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ficha{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:2px}
.ficha .activo{font-size:1.05rem}
.ficha .p{color:var(--ambar);font-weight:700}
.ficha .n{font-size:.8rem;color:var(--suave)}

/* Grafica */
.marco{position:relative;background:var(--panel);border:1px solid var(--linea);border-radius:14px;overflow:hidden;margin:10px 0}
.grafica{height:300px;width:100%}
.capa{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
.leyenda{display:flex;flex-wrap:wrap;gap:12px;font-size:.75rem;color:var(--suave);margin:-2px 2px 8px}
.leyenda i{display:inline-block;width:14px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.c-bloque{background:color-mix(in srgb,var(--suave) 40%,transparent);border:1px solid var(--suave)}
.c-imb{background:color-mix(in srgb,var(--violeta) 40%,transparent);border:1px solid var(--violeta)}
.c-piv{background:var(--ambar);height:3px!important}
.c-ahora{background:var(--texto);height:2px!important}

/* Escalera de un activo */
.escalera{display:flex;flex-direction:column;gap:6px}
.peldano{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:10px 12px}
.peldano .precio{font-size:1.1rem}
.ahora-fila{display:flex;align-items:center;gap:10px;color:var(--ambar);font-weight:700;padding:4px 2px}
.ahora-fila::before,.ahora-fila::after{content:"";flex:1;height:2px;background:var(--ambar);opacity:.6}

/* Hoja */
.hoja{position:fixed;inset:0;z-index:20;background:rgba(5,10,14,.6);display:flex;align-items:flex-end;justify-content:center}
.hoja-dentro{width:100%;max-width:720px;max-height:92vh;overflow:auto;background:var(--pizarra);border-top:1px solid var(--linea);
  border-radius:18px 18px 0 0;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.hoja-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.h-titulo{font-size:1.35rem;font-weight:800}
.cerrar{background:var(--panel2);border:1px solid var(--linea);border-radius:50%;width:40px;height:40px;flex:none}
.explica{font-size:.95rem;line-height:1.5;margin:6px 0 12px}
.botones{display:flex;flex-direction:column;gap:8px}
.copiar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--linea);border-radius:12px;padding:12px 14px;width:100%;text-align:left}
.copiar b{font-size:1.15rem}
.copiar span.acc{color:var(--ambar);font-weight:700;font-size:.9rem}

/* Ajustes */
.caja{background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.caja h2{font-size:1.05rem;margin:0 0 8px}
.reglas{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:.92rem}

/* Pestañas */
.pestanas{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;background:var(--panel);border-top:1px solid var(--linea);
  padding:0 max(0px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(0px,env(safe-area-inset-left,0px))}
.pestanas button{flex:1;height:var(--alto-nav);background:none;border:0;color:var(--suave);font-size:.78rem;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pestanas button span{font-size:1.25rem;line-height:1}
.pestanas button[aria-current="page"]{color:var(--ambar)}

.tostada{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--alto-nav) + 16px + env(safe-area-inset-bottom,0px));z-index:30;
  background:var(--texto);color:var(--pizarra);font-weight:700;padding:10px 16px;border-radius:24px;font-size:.9rem;max-width:90vw}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Tendencia y opiniones */
.c-tend{background:repeating-linear-gradient(90deg,var(--texto) 0 4px,transparent 4px 7px);height:2px!important}
.chip{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid var(--linea);color:var(--suave);background:none}
.chip.espera{border-color:var(--suave)}
.chip.vale{border-color:var(--verde);color:var(--verde)}
.chip.novale{border-color:var(--rojo);color:var(--rojo)}
.chip.suele{border-color:var(--ambar);color:var(--ambar)}
.chip.nosuele{border-color:var(--suave);color:var(--suave)}
.esperando{opacity:.62}
.seccion{font-size:.85rem;color:var(--suave);font-weight:700;margin:16px 2px 2px;text-transform:uppercase;letter-spacing:.05em}
.seccion small{font-weight:500;text-transform:none;letter-spacing:0}
.ver-ocultas{background:none;border:1px dashed var(--linea);border-radius:12px;padding:12px;color:var(--suave);margin-top:6px}
.opinion{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.opinion h3{margin:0;font-size:1.05rem}
.votos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.voto{border-radius:12px;padding:14px;font-weight:800;font-size:1.05rem;background:var(--panel);border:2px solid var(--linea)}
.voto.si{color:var(--verde)} .voto.no{color:var(--rojo)}
.voto.si[aria-pressed="true"]{background:color-mix(in srgb,var(--verde) 18%,var(--panel));border-color:var(--verde)}
.voto.no[aria-pressed="true"]{background:color-mix(in srgb,var(--rojo) 18%,var(--panel));border-color:var(--rojo)}
.motivos{display:flex;flex-wrap:wrap;gap:6px}
.chip.motivo{font-size:.85rem;padding:8px 12px;font-weight:600}
.chip.motivo[aria-pressed="true"]{border-color:var(--rojo);color:var(--texto);background:color-mix(in srgb,var(--rojo) 15%,transparent)}
.otro-precio{display:flex;flex-direction:column;gap:6px}
.otro-precio label{font-size:.9rem;color:var(--suave)}
.otro-precio div{display:flex;gap:8px}
.otro-precio input{flex:1;min-width:0;font:inherit;font-size:1.05rem;padding:12px;border-radius:12px;border:1px solid var(--linea);background:var(--panel);color:var(--texto)}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem;margin:6px 0}
.tabla td{padding:6px 4px;border-bottom:1px solid var(--linea)}
.tabla td.num{white-space:nowrap;color:var(--suave);text-align:right}
.tabla td:last-child{width:35%}
.barra{display:block;height:8px;border-radius:4px;background:var(--panel2);overflow:hidden}
.barra i{display:block;height:100%;background:var(--verde)}

.c-res{background:var(--rojo);height:3px!important}
.c-sop{background:var(--verde);height:3px!important}