:root{
    /* Paleta de marca (logo +Pewes, 2026-09-08): azul marino + naranjo. bg/card/edge/muted se
       tiñen de marino en vez de gris neutro; --accent pasa de verde lima a naranjo. Los colores
       de tipo de zona (topo/boulder/gym) NO cambian -- son información real (qué roca es cada
       zona), no identidad de marca. */
    --bg:#0f1a2b; --card:#16263d; --ink:#eef2f7; --muted:#8fa2b8; --edge:#26405e;
    --topo:#5f9257; --boulder:#cf9a3e; --gym:#6f869a; --accent:#f2701c; --accent-ink:#2b1206;
    --shadow:0 6px 22px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);overflow:hidden}
  /* Cabecera fija */
  header{position:fixed;top:0;left:0;right:0;height:54px;background:rgba(15,26,43,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge);display:flex;align-items:center;gap:10px;padding:0 14px;z-index:1000}
  .logo{font-weight:800;letter-spacing:-.3px;font-size:19px;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}
  .logo .m{color:var(--accent)}
  .grow{flex:1}
  .hbtn{border:1px solid var(--edge);background:var(--card);color:var(--ink);border-radius:999px;height:34px;padding:0 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px}
  .hbtn:active{transform:scale(.96)}
  /* En pantallas angostas los 4 botones del header + el logo no entraban en una sola
     línea y el logo se envolvía en 2 líneas, empujando la altura real del header más
     allá de sus 54px fijos. Achica logo y botones para que siempre quepan en una fila. */
  @media (max-width:400px){
    .logo{font-size:16px}
    .hbtn{padding:0 8px}
  }
  /* Vistas */
  main{position:absolute;inset:54px 0 62px 0}
  .view{display:none;height:100%;overflow:auto}
  .view.on{display:block}
  /* Una roca real distinta de fondo por pestaña (generadas con ComfyUI, no dibujadas a
     mano) -- degradado oscuro encima para que el texto del encabezado se lea bien, las
     tarjetas de vidrio hacen el resto del trabajo de contraste. */
  #v-registrar,#v-comunidad,#v-retos,#v-ranking{background-size:cover;background-position:center;background-repeat:no-repeat}
  #v-registrar{background-image:linear-gradient(180deg,rgba(10,11,13,.55),rgba(10,11,13,.82) 45%),url('/img/roca-granito.webp')}
  #v-comunidad{background-image:linear-gradient(180deg,rgba(10,11,13,.55),rgba(10,11,13,.82) 45%),url('/img/roca-andesita.webp')}
  #v-retos{background-image:linear-gradient(180deg,rgba(10,11,13,.55),rgba(10,11,13,.82) 45%),url('/img/roca-pizarra.webp')}
  #v-ranking{background-image:linear-gradient(180deg,rgba(10,11,13,.55),rgba(10,11,13,.82) 45%),url('/img/roca-arenisca.webp')}
  #map{height:100%;width:100%;background:#0f1114}
  /* Filtros flotantes sobre el mapa */
  .filtros{position:absolute;top:64px;left:52px;right:10px;z-index:800;display:flex;gap:7px;flex-wrap:wrap;align-items:center;pointer-events:none}
  .chip{pointer-events:auto;background:var(--card);border:1px solid var(--edge);border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;box-shadow:var(--shadow);display:flex;align-items:center;gap:6px;user-select:none}
  .chip.off{opacity:.45}
  .chip .dot{width:10px;height:10px;border-radius:50%}
  .contador{pointer-events:auto;margin-left:auto;background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:999px;padding:7px 12px;font-size:12px;box-shadow:var(--shadow)}
  /* Menú abanico: un botón junta los 3 filtros de tipo. Se saca del flujo del flex de
     .filtros (top:100px;left:-42px son relativos al origen de .filtros, 64/52) para que
     quede debajo del cluster de zoom+compass nativo de MapLibre (~3 botones, ~120px alto),
     no apretado al lado -- y con fondo naranjo de marca siempre visible (no un círculo
     oscuro que se pierde contra el mapa), no solo cuando está abierto. */
  .filtro-wrap{position:absolute;top:100px;left:-42px;width:42px;height:42px;pointer-events:none}
  .filtro-fab{pointer-events:auto;width:42px;height:42px;padding:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:1px solid var(--edge);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:2;transition:transform .2s}
  .filtro-fab.on{transform:rotate(45deg)}
  .filtro-fan{position:absolute;top:0;left:0;width:0;height:0}
  .filtro-op{pointer-events:none;position:absolute;top:0;left:0;width:38px;height:38px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(0,0) scale(.3);transition:transform .3s cubic-bezier(.2,1.4,.4,1),opacity .2s}
  .filtro-op .cic{margin:0}
  .filtro-op .cic svg{width:17px;height:17px}
  .filtro-fan.open .filtro-op{opacity:1;pointer-events:auto}
  .filtro-fan.open .filtro-op.off{opacity:.4}
  .filtro-fan.open .filtro-op:nth-of-type(1){transform:translate(56px,8px) scale(1);transition-delay:.02s}
  .filtro-fan.open .filtro-op:nth-of-type(2){transform:translate(40px,40px) scale(1);transition-delay:.06s}
  .filtro-fan.open .filtro-op:nth-of-type(3){transform:translate(8px,56px) scale(1);transition-delay:.1s}
  /* Panels de contenido (comunidad/retos/ranking/registrar) */
  .wrap{max-width:640px;margin:0 auto;padding:18px 16px 30px}
  .h1{font-size:22px;font-weight:800;margin-bottom:4px}
  .sub{color:var(--muted);font-size:14px;margin-bottom:18px}
  /* Vidrio muy transparente: se ve la roca de fondo de la pestaña a través de la
     tarjeta (blur real, no un color sólido tapando todo). Mismo tratamiento en
     tarjeta/reto/logro/rank-row -- las 4 tarjetas que viven sobre roca. */
  .tarjeta{background:rgba(30,33,38,.32);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
  .tarjeta h3{font-size:15px;margin-bottom:6px}
  .tarjeta p{color:var(--muted);font-size:14px;line-height:1.5}
  .badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--edge);color:var(--muted);margin-left:6px}
  .badge.pronto{background:rgba(242,112,28,.18);color:#ffb066}
  /* Nav inferior */
  nav{position:fixed;bottom:0;left:0;right:0;height:62px;background:rgba(15,26,43,.94);backdrop-filter:blur(8px);border-top:1px solid var(--edge);display:flex;z-index:1000;padding-bottom:env(safe-area-inset-bottom)}
  nav button{flex:1;background:none;border:0;color:var(--muted);font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding-top:8px}
  nav button .ic{font-size:20px;line-height:1}
  nav button.on{color:var(--accent);font-weight:700}
  nav button .navbadge{position:absolute;top:6px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:#e2544a;border:2px solid #0f1a2b}
  /* Conversor de grados */
  .conv-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .conv-col{flex:1;min-width:120px}
  .conv-col label{font-size:12px;color:var(--muted);display:block;margin-bottom:5px}
  select,input{width:100%;padding:11px;border:1px solid var(--edge);border-radius:12px;background:var(--card);color:var(--ink);font-size:15px}
  .conv-out{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .conv-out .cell{background:var(--edge);border-radius:12px;padding:10px 12px;cursor:pointer;border:none;text-align:left;font-family:inherit;width:100%}
  .conv-out .cell:active{opacity:.75}
  .conv-out .cell b{display:block;font-size:11px;color:var(--muted);font-weight:600}
  .conv-out .cell span{font-size:18px;font-weight:700;color:var(--ink)}
  .conv-hint{font-size:11.5px;color:var(--muted);margin-top:8px}
  .sect-chips{display:flex;flex-wrap:wrap;gap:6px}
  .sect-chip{background:var(--edge);border-radius:999px;padding:4px 11px;font-size:12.5px}
  .seg{display:flex;background:var(--edge);border-radius:12px;padding:3px;margin-top:12px}
  .seg button{flex:1;border:0;background:none;padding:8px;border-radius:9px;font-size:13px;cursor:pointer;color:var(--muted)}
  .seg button.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
  /* Popup MapLibre */
  .maplibregl-popup-content{border-radius:14px;padding:12px;background:var(--card)!important;color:var(--ink)}
  .maplibregl-popup-tip{border-top-color:var(--card)!important;border-bottom-color:var(--card)!important}
  .maplibregl-popup-close-button{color:var(--muted)!important;font-size:18px;padding:4px 8px}
  .maplibregl-ctrl-attrib{font-size:10px}
  .capas-fab{position:absolute;left:10px;bottom:56px;z-index:850;background:var(--card);color:var(--ink);border:1px solid var(--edge);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:600;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;gap:6px}
  .capas-sheet{position:absolute;left:10px;bottom:100px;z-index:851;background:var(--card);border:1px solid var(--edge);border-radius:14px;box-shadow:var(--shadow);width:180px;overflow:hidden;max-height:0;opacity:0;pointer-events:none;transition:max-height .22s ease,opacity .18s ease}
  .capas-sheet.open{max-height:220px;opacity:1;pointer-events:auto}
  .capas-row{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:13px;cursor:pointer;color:var(--ink)}
  .capas-row:hover{background:var(--bg)}
  .capas-row.on{color:var(--accent);font-weight:700}
  .capas-div{height:1px;background:var(--edge);margin:2px 8px}
  .zp{min-width:210px}
  .zp .zt{font-weight:800;font-size:16px;margin-bottom:2px}
  .zp .zk{font-size:12px;color:var(--muted);margin-bottom:8px}
  .zp .zrow{font-size:13px;margin:3px 0}
  .zp .zrow b{color:var(--muted);font-weight:600}
  .zp .ztag{display:inline-block;font-size:11px;font-weight:700;color:#fff;padding:2px 8px;border-radius:999px;margin-bottom:8px}
  .foot{font-size:11px;color:var(--muted);text-align:center;padding:18px 0 4px}
  /* Progreso (gamificación) */
  .prog{position:absolute;left:10px;bottom:12px;z-index:800;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;box-shadow:var(--shadow)}
  /* Panel de grabación de ruta */
  .grabpanel{position:absolute;left:10px;right:10px;bottom:12px;z-index:900;background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:12px 14px;box-shadow:0 6px 24px rgba(40,36,28,.18);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .grabpanel .rec{display:inline-block;width:10px;height:10px;background:#d14;border-radius:50%;margin-right:6px;animation:pulse 1s infinite}
  @keyframes pulse{50%{opacity:.3}}
  .gbtn{border:1px solid var(--edge);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
  .gbtn.ok{background:var(--topo);color:#fff;border-color:var(--topo)}
  .pbtn{display:inline-block;margin-top:8px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer}
  .pbtn.sec{background:var(--bg);color:var(--ink);border:1px solid var(--edge)}
  nav button .ic svg{display:block}
  .hbtn.activo{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .hbtn svg,.cerca-fab svg,.sherpa-fab svg{display:block}
  .cic{display:inline-flex;align-items:center;margin-right:5px}
  .cic svg{width:15px;height:15px}
  .cerca-fab{position:absolute;right:12px;bottom:144px;z-index:850;width:48px;height:48px;border-radius:50%;background:var(--card);color:var(--ink);border:1px solid var(--edge);font-size:20px;box-shadow:0 6px 18px rgba(0,0,0,.4);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .reto{background:rgba(30,33,38,.32);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;margin-bottom:9px}
  .reto.ok{border-color:var(--accent)}
  .reto-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
  .reto-h .rp{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
  .reto-d{font-size:12px;color:var(--muted);margin:3px 0 8px}
  .reto-bar{height:8px;background:var(--bg);border:1px solid var(--edge);border-radius:999px;overflow:hidden}
  .reto-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .5s}
  .sech{font-size:16px;font-weight:800;margin:4px 0 10px}
  .tut-hdr{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .tut-badge{width:48px;height:48px;border-radius:0;background:none;border:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
  /* Logros */
  .logros-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .logro{background:rgba(30,33,38,.32);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px;text-align:center;box-shadow:var(--shadow);opacity:.6;filter:grayscale(.6);transition:.25s}
  .logro.on{opacity:1;filter:none;border-color:var(--topo)}
  .logro-ic{display:flex;justify-content:center;margin-bottom:8px}
  .logro-ic svg{width:32px;height:32px}
  .logro-t{font-size:13px;font-weight:800;margin-bottom:3px}
  .logro-d{font-size:11px;color:var(--muted);line-height:1.4}
  .logros-hdr{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
  .logros-bar{flex:1;height:8px;background:#e7e3d8;border-radius:999px;overflow:hidden}
  .logros-bar i{display:block;height:100%;background:var(--topo);border-radius:999px;transition:width .5s}
  /* Pop de desbloqueo */
  .logro-pop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(38,36,28,0);pointer-events:none;transition:.35s}
  .logro-pop.on{background:rgba(38,36,28,.45)}
  .lp-card{background:var(--card);border-radius:22px;padding:26px 30px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);transform:scale(.8) translateY(12px);opacity:0;transition:.35s cubic-bezier(.2,1.3,.4,1);border:2px solid var(--topo)}
  .logro-pop.on .lp-card{transform:scale(1) translateY(0);opacity:1}
  .lp-ic{display:flex;justify-content:center;margin-bottom:10px}
  .lp-ic svg{width:46px;height:46px}
  .lp-tag{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--boulder);text-transform:uppercase}
  .lp-t{font-size:19px;font-weight:800;margin:4px 0}
  .lp-d{font-size:13px;color:var(--muted);max-width:230px}
  /* La bitácora es el corazón de la app (protagonista, no una tarjeta más): borde
     superior de acento, insignia propia y números más grandes que el resto de tarjetas. */
  .bita-hero{border:1px solid var(--edge);position:relative;overflow:hidden;padding-top:19px}
  .bita-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--topo))}
  .bita-hdr{display:flex;align-items:center;gap:10px;margin-bottom:2px}
  .bita-hdr h3{font-size:17px;margin:0}
  .bita-badge{width:34px;height:34px;border-radius:50%;background:rgba(242,112,28,.18);border:1.5px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
  .bita-badge svg{display:block}
  .bita-vacio{display:none;text-align:center;padding:16px 4px 4px}
  .bita-vacio p{color:var(--muted);font-size:13px;margin-bottom:14px;line-height:1.5}
  .bita-stats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
  .bita-stats .s{background:var(--bg);border:1px solid var(--edge);border-radius:12px;padding:8px 12px;flex:1;min-width:66px;text-align:center}
  .bita-stats .s b{display:block;font-size:24px;font-weight:800;color:var(--accent)}
  .bita-stats .s span{font-size:11px;color:var(--muted)}
  .bita-pir{margin:6px 0 12px}
  .bita-pir .row{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:12px}
  .bita-pir .row .g{width:42px;font-weight:700;text-align:right}
  .bita-pir .row .bar{flex:1;height:14px;background:var(--bg);border-radius:999px;overflow:hidden}
  .bita-pir .row .bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
  .bita-pir .row .c{width:20px;color:var(--muted)}
  .bita-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--edge);font-size:13px}
  .bita-item .est{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--muted);flex:none}
  .bita-item .est.send{background:#3a2410;color:#ffb066}
  .bita-ejemplo{background:var(--bg);border:1px dashed var(--edge);border-radius:12px;padding:8px 12px;margin-bottom:14px;text-align:left}
  .bita-ejemplo .bita-item{border-top:0;padding-top:2px;opacity:.9}
  .bita-ejemplo-tag{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.03em;margin-bottom:2px}
  .bita-nivel{background:rgba(242,112,28,.12);border:1px solid rgba(242,112,28,.3);border-radius:12px;padding:8px 12px;font-size:13px;margin:0 0 10px}
  .bita-sector{margin-top:6px}
  .bita-sector-hdr{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding-top:12px;display:flex;align-items:center;gap:6px}
  .bita-sector-hdr .n{background:var(--bg);border-radius:999px;padding:1px 8px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0}
  /* bitácora por disciplina y carpetas región → zona (2026-10-04) */
  .bita-tabs{display:flex;gap:6px;margin:12px 0 4px}
  .bita-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 4px;border:1px solid var(--edge);border-radius:12px;background:var(--bg);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
  .bita-tabs button.on{border-color:var(--accent);color:var(--ink);background:rgba(242,112,28,.12)}
  .bita-tabs .n{font-size:11px;font-weight:700;color:var(--muted)}
  .bita-proy{background:rgba(230,208,45,.1);border:1px solid rgba(230,208,45,.35);border-radius:12px;padding:8px 12px;font-size:12px;margin:0 0 10px;line-height:1.5}
  .bita-proy span{color:var(--muted)}
  .bita-pir-tit{font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
  .bita-vacio-disc{color:var(--muted);font-size:13px;text-align:center;margin:14px 0 10px}
  .bita-region{border:1px solid var(--edge);border-radius:12px;margin:8px 0;background:var(--bg)}
  .bita-region>summary{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;font-weight:700;font-size:14px;list-style:none}
  .bita-region>summary::-webkit-details-marker,.bita-zona>summary::-webkit-details-marker{display:none}
  .bita-region>summary::after,.bita-zona>summary::after{content:"\203A";margin-left:6px;color:var(--muted);transition:transform .15s}
  .bita-region[open]>summary::after,.bita-zona[open]>summary::after{transform:rotate(90deg)}
  .bita-region .meta,.bita-zona .meta{margin-left:auto;font-size:11px;font-weight:400;color:var(--muted);text-align:right}
  .bita-zona{border-top:1px solid var(--edge);padding:0 12px}
  .bita-zona>summary{display:flex;align-items:center;gap:8px;padding:9px 0 9px 6px;cursor:pointer;font-size:13px;font-weight:700;list-style:none}
  .bita-zona .bita-item{padding-left:6px}
  .bita-respaldo{margin-top:14px;padding-top:10px;border-top:1px solid var(--edge);font-size:12px;color:var(--muted)}
  .bita-respaldo code{background:var(--bg);border:1px solid var(--edge);border-radius:6px;padding:2px 6px;color:var(--ink);font-size:11px}
  .bita-respaldo .mini{border:1px solid var(--edge);background:var(--bg);color:var(--ink);border-radius:8px;padding:2px 9px;font-size:11px;cursor:pointer}
  .bita-respaldo-nota{margin-top:4px;line-height:1.4}
  .topo-leyenda{margin-top:8px;display:flex;flex-direction:column;gap:6px}
  .topo-leyenda-fila{display:flex;align-items:center;gap:8px;font-size:13px}
  .topo-leyenda-num{flex:none;width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .topo-leyenda-nom{flex:1;min-width:0}
  .topo-leyenda-fila .mini{flex:none;border:1px solid var(--edge);background:var(--bg);color:var(--ink);border-radius:8px;padding:3px 9px;font-size:11px;cursor:pointer}
  .topo-edit-fila{display:flex;gap:6px;align-items:center;margin:4px 0}
  .topo-edit-fila input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:6px 8px;color:var(--ink);font-size:13px}
  .topo-edit-fila input.g{flex:0 0 64px}
  .modal{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);align-items:flex-end}
  .modal .sheet2{background:var(--card);width:100%;max-width:520px;margin:0 auto;border-radius:20px 20px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
  .modal h3{font-size:17px;margin-bottom:6px}
  .reg-ejemplo{font-size:12px;color:var(--muted);background:var(--bg);border:1px dashed var(--edge);border-radius:10px;padding:8px 10px;margin-bottom:4px;line-height:1.4}
  .reg-ejemplo b{color:var(--ink)}
  .modal label{font-size:12px;color:var(--muted);display:block;margin:11px 0 4px}
  .seg2{display:flex;background:var(--bg);border-radius:12px;padding:3px;flex-wrap:wrap;gap:2px}
  .seg2 button{flex:1;min-width:68px;border:0;background:none;padding:8px 4px;border-radius:9px;font-size:12px;color:var(--muted);cursor:pointer}
  .seg2 button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
  .modal .acts{display:flex;gap:8px;margin-top:16px}
  .modal .acts button{flex:1;border:0;border-radius:12px;padding:12px;font-size:14px;font-weight:700;cursor:pointer}
  .modal .acts .save{background:var(--accent);color:var(--accent-ink)}
  .modal .acts .cancel{background:var(--bg);color:var(--ink);border:1px solid var(--edge)}
  .search{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:850;width:min(90%,360px);display:none}
  .search input{width:100%;padding:11px 14px;border-radius:14px;border:1px solid var(--edge);background:var(--card);color:var(--ink);font-size:14px;box-shadow:var(--shadow)}
  .search-res{background:var(--card);border:1px solid var(--edge);border-radius:12px;margin-top:6px;overflow:hidden;max-height:230px;overflow-y:auto}
  .search-res div{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--edge)}
  .tag2{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#fff;padding:3px 10px;border-radius:999px;margin-bottom:6px}
  .fzt{font-size:21px;font-weight:800;letter-spacing:-.01em}
  .fzk{font-size:12px;color:var(--muted);margin-bottom:4px}
  .fsec{border-top:1px solid var(--edge);padding:10px 0}
  .fst{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px}
  .fsv{font-size:14px;line-height:1.45}
  .fsv img{width:100%;border-radius:12px;margin-top:4px}
  .facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .sherpa-fab{position:absolute;right:12px;bottom:80px;z-index:850;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none;box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .sherpa-msgs{max-height:46vh;overflow:auto;margin:10px 0;display:flex;flex-direction:column;gap:8px}
  .sh-m{padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.4;max-width:88%}
  .sh-m.u{background:var(--accent);color:var(--accent-ink);align-self:flex-end;font-weight:600}
  .sh-m.b{background:var(--bg);border:1px solid var(--edge);align-self:flex-start;white-space:pre-wrap}
  .sh-in{display:flex;gap:8px}
  .sh-in input{flex:1;padding:11px;border:1px solid var(--edge);border-radius:12px;background:var(--bg);color:var(--ink);font-size:15px}
  .sh-in button{border:0;background:var(--accent);color:var(--accent-ink);border-radius:12px;padding:0 16px;font-weight:800;font-size:16px;cursor:pointer}
  .sh-sug{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
  .sh-sug .sug{border:1px solid var(--edge);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer}
  .rank-row{display:flex;align-items:center;gap:10px;background:rgba(30,33,38,.32);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;margin-bottom:7px}
  .rank-row .pos{width:28px;font-weight:800;color:var(--accent);text-align:center;font-size:15px}
  .rank-row .nk{flex:1;font-weight:600}
  .rank-row .nk small{display:block;color:var(--muted);font-weight:400;font-size:11px}
  .rank-row .pt{font-size:14px;font-weight:800}
  .rank-row.me{border-color:var(--accent);background:rgba(242,112,28,.16)}
  .pf-s{flex:1;background:var(--bg);border:1px solid var(--edge);border-radius:12px;padding:8px;text-align:center}
  .pf-s b{display:block;font-size:19px;font-weight:800;color:var(--accent)}.pf-s span{font-size:10px;color:var(--muted)}
  /* Splash de presentación: se muestra solo al abrir la app -- el video real generado
     con IA (logo entrando + wordmark, con su propio audio), a pantalla completa para
     que no se note ninguna diferencia de tono con el fondo. Se retira sola al terminar. */
  /* El video fuente es horizontal (1280x720) y el logo+texto ocupan casi todo ese ancho,
     asi que con object-fit:cover un celular vertical recorta el "+PEWES" y deja solo
     letras sueltas -- por eso "se veía mal" en el teléfono. Con "contain" siempre se ve
     el video completo; el fondo #182238 es el mismo tono oscuro del video, asi que las
     franjas arriba/abajo en vertical se notan como parte del diseño, no como un error. */
  #splash{position:fixed;inset:0;z-index:5000;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease}
  #splash.out{opacity:0;pointer-events:none}
  #splash video{width:100%;height:100%;object-fit:contain}

  /* ---------- seguridad comunitaria (seguridad.js): bloquear, reportar a Sherpa, aceptar normas ---------- */
  .seg-modal{z-index:2100}
  .seg-hoja{transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column;gap:8px}
  .seg-modal.on .seg-hoja{transform:translateY(0)}
  .seg-asa{width:36px;height:4px;border-radius:4px;background:var(--edge);align-self:center;margin-bottom:4px}
  .seg-hoja h3{margin:0;text-wrap:balance}
  .seg-p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
  .seg-opcion{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--ink);font-size:14.5px;padding:11px 8px;border-radius:12px;cursor:pointer;text-align:left;width:100%}
  .seg-opcion:hover,.seg-opcion:focus-visible{background:var(--bg)}
  .seg-opcion.peligro{color:#ff8c8c}
  .seg-opcion small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
  .modal .acts .seg-peligro{background:#e24b4b;color:#fff}
  .modal .acts .save:disabled{opacity:.45;cursor:not-allowed}
  .seg-mas{margin-left:4px;border:0;background:transparent;color:var(--muted);width:32px;height:32px;border-radius:9px;display:inline-grid;place-items:center;cursor:pointer;flex:none}
  .seg-mas:hover,.seg-mas:focus-visible{background:var(--card);color:var(--ink)}
  .sh-m.seg-con-mas{display:flex;align-items:flex-start;gap:2px}
  .sh-m.seg-con-mas span{flex:1}
  .sh-m.seg-con-mas .seg-mas{width:26px;height:26px;margin:-4px -6px -4px 0}
  .seg-ocultos{font-size:12px;color:var(--muted);text-align:center;padding:7px;border:1px dashed var(--edge);border-radius:10px;margin-top:6px}
  .seg-pf{margin:8px 0 4px;border-top:1px solid var(--edge);padding-top:9px}
  .seg-pf-t{font-size:12px;color:var(--muted);margin-bottom:6px}
  .seg-pf-fila{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0}
  .seg-pf-fila span{flex:1}
  .seg-pf-fila .pbtn{margin-top:0}
  .seg-pf-vacio{font-size:12px;color:var(--muted)}
  .seg-bajo-resp{display:flex;align-items:center;margin-top:-4px;padding-left:4px}
  .seg-rep-ia{border:0;background:transparent;color:var(--muted);font-size:11.5px;display:flex;align-items:center;gap:5px;cursor:pointer;padding:4px 2px;border-radius:6px}
  .seg-rep-ia:hover,.seg-rep-ia:focus-visible{color:var(--ink)}
  .seg-etq-rep{font-size:11.5px;color:#e0a33a;display:flex;align-items:center;gap:5px}
  .sh-m.b.seg-reportada{border-color:#e0a33a}
  .seg-motivos{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0}
  .seg-motivo{border:1px solid var(--edge);background:var(--bg);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:13px;cursor:pointer}
  .seg-motivo.sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
  .seg-puntos{display:flex;flex-direction:column;gap:11px;margin:4px 0}
  .seg-punto{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.45}
  .seg-punto svg{margin-top:2px;flex:none}
  .seg-punto b{display:block;color:var(--ink);font-size:14px}
  .seg-punto.alerta svg{color:#e0a33a}
  .seg-enlace{font-size:13px;color:var(--accent);align-self:flex-start}
  .seg-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);z-index:2200;background:#0b1422;color:var(--ink);border:1px solid var(--edge);border-radius:12px;padding:11px 14px;font-size:13.5px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;width:max-content;max-width:calc(100% - 32px)}
  .seg-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .seg-deshacer{margin-left:8px;border:0;background:none;color:var(--accent);font-weight:800;font-size:13.5px;cursor:pointer}
  @media (prefers-reduced-motion: reduce){ .seg-hoja,.seg-toast{transition:none} }

  /* ---------- zona cerrada (nucleo.js: avisoCierreHtml) ---------- */
  .aviso-cierre{display:flex;gap:9px;align-items:flex-start;margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(226,91,91,.13);border:1px solid rgba(226,91,91,.55);color:#ffc2c2;font-size:13.5px;line-height:1.45}
  .aviso-cierre svg{flex:none;margin-top:1px;color:#ff8a8a}
  .aviso-cierre b{color:#ffd9d9}
  .aviso-cierre a{color:#ffb1b1;text-decoration:underline}