/* Estilos de Metal Globe. Extraidos de index.html sin cambios: mismo orden,
   mismas reglas. El unico objetivo es que el HTML deje de tener 900 lineas
   de CSS embebido. */
  :root{
    /* ===== base oscura gótica — NO cambia entre temas ===== */
    --bg:#08080a;
    --panel:rgba(18,16,20,0.62);
    --panel-solid:#100e12;
    --bone-dim:#8a857c;
    --silver:#8a9099;

    /* ===== ENTRADAS DE TEMA (por defecto: "Tarja" / Symphonic Gold) =====
       cada tema sólo redefine estas 7 variables -> todo lo demás se deriva */
    --accent-rgb:232,184,75;     /* acento principal #E8B84B (en canales para rgba) */
    --accent-bright:#FFD700;     /* acento brillante / hot */
    --accent-2:#B8860B;          /* secundario */
    --text-hi:#F5F0E1;           /* texto destacado */
    --select:#FFD700;            /* selección/iluminación de país */
    --select-rgb:255,215,0;
    --bg-warm:#16100a;           /* tinte cálido muy oscuro del fondo (gótico) */

    /* ===== derivados de tema (compartidos por todos los temas) ===== */
    --accent:rgb(var(--accent-rgb));
    --gold:var(--accent);
    --gold-bright:var(--accent-bright);
    --fire:var(--accent);
    --fire-hot:var(--accent-bright);
    --blood:var(--accent-2);
    --bone:var(--text-hi);
    --line:rgba(var(--accent-rgb),0.16);
    --line-strong:rgba(var(--accent-rgb),0.34);

    --font-disp:'Cinzel',serif;
    --font-display:'Cinzel',serif;   /* fuente display SELECCIONABLE (solo títulos grandes) */
    --font-ui:'Oswald',sans-serif;
    --font-mono:'JetBrains Mono',monospace;
  }
  /* ===== PALETAS (selector de temas en vivo) — sólo cambian acentos/selección ===== */
  html[data-theme="tarja"]       {--accent-rgb:232,184,75; --accent-bright:#FFD700; --accent-2:#B8860B; --text-hi:#F5F0E1; --select:#FFD700; --select-rgb:255,215,0; --bg-warm:#16100a;}
  html[data-theme="amaranth"]    {--accent-rgb:196,30,58;  --accent-bright:#FF2D2D; --accent-2:#6B0F1A; --text-hi:#D9D9E3; --select:#FF2D2D; --select-rgb:255,45,45; --bg-warm:#160a0c;}
  html[data-theme="fallen"]      {--accent-rgb:79,168,232; --accent-bright:#5DCFFF; --accent-2:#1B3A5C; --text-hi:#C8D8E8; --select:#5DCFFF; --select-rgb:93,207,255; --bg-warm:#0a0f16;}
  html[data-theme="floor"]       {--accent-rgb:176,190,197;--accent-bright:#ECEFF1; --accent-2:#37474F; --text-hi:#FFFFFF; --select:#ECEFF1; --select-rgb:236,239,241; --bg-warm:#101316;}
  html[data-theme="necronomicon"]{--accent-rgb:107,155,55; --accent-bright:#9FE83A; --accent-2:#2D3B1F; --text-hi:#E8E4D0; --select:#9FE83A; --select-rgb:159,232,58; --bg-warm:#0d1109;}
  html[data-theme="imaginaerum"] {--accent-rgb:155,89,182; --accent-bright:#C77DFF; --accent-2:#3D2B5C; --text-hi:#E0D0F0; --select:#C77DFF; --select-rgb:199,125,255; --bg-warm:#110a16;}
  *{margin:0;padding:0;box-sizing:border-box}
  html{height:100%}
  /* SCROLL de página habilitado para el dashboard debajo del globo (héroe = 1ª pantalla) */
  body{
    min-height:100%;width:100%;overflow-x:hidden;overflow-y:auto;
    font-family:var(--font-ui);
    color:var(--bone);
    background:
      radial-gradient(ellipse 70% 60% at 50% 52%, var(--bg-warm) 0%, rgba(8,8,10,0) 60%),
      var(--bg);
  }
  /* HÉROE: el globo ocupa la 1ª pantalla completa, EXACTAMENTE como estaba */
  .am-hero{position:relative;height:100vh;width:100%}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

  /* ---------- TOPBAR ---------- */
  .am-top{
    position:relative;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 26px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(12,11,14,0.85), rgba(12,11,14,0.0));
  }
  .am-brand{display:flex;flex-direction:column;gap:2px}
  .am-eyebrow{
    font-family:var(--font-mono);font-size:10px;letter-spacing:.42em;
    color:var(--gold);text-transform:uppercase;opacity:.85;
  }
  .am-wordmark{
    font-family:var(--font-display);font-weight:900;font-size:25px;
    letter-spacing:.18em;color:var(--bone);line-height:1;
    text-transform:uppercase;
  }
  .am-wordmark b{color:var(--gold-bright);font-weight:900}
  /* ---------- BUSCADOR UNIVERSAL ---------- */
  .am-search{position:relative;flex:1;max-width:420px;margin:0 28px;z-index:90}
  .am-search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);
    font-size:15px;color:var(--gold);pointer-events:none;opacity:.8}
  #am-search-in{
    width:100%;background:rgba(12,11,14,0.72);border:1px solid var(--line-strong);
    color:var(--bone);font-family:var(--font-ui);font-weight:300;font-size:13px;
    letter-spacing:.04em;padding:9px 32px 9px 34px;outline:none;transition:border-color .16s,background .16s;
  }
  #am-search-in::placeholder{color:var(--bone-dim);letter-spacing:.06em}
  #am-search-in:focus{border-color:var(--gold);background:rgba(12,11,14,0.92)}
  .am-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    background:transparent;border:none;color:var(--bone-dim);font-size:13px;cursor:pointer;padding:4px}
  .am-search-clear:hover{color:var(--gold-bright)}
  .am-search-drop{
    position:absolute;left:0;right:0;top:calc(100% + 6px);
    background:var(--panel-solid);border:1px solid var(--line-strong);
    box-shadow:0 16px 44px rgba(0,0,0,0.6);max-height:62vh;overflow-y:auto;display:none;
  }
  .am-search-drop.show{display:block}
  .am-search-drop::-webkit-scrollbar{width:6px}
  .am-search-drop::-webkit-scrollbar-thumb{background:var(--line-strong)}
  .am-sug{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
    border-bottom:1px solid var(--line);text-align:left}
  .am-sug:last-child{border-bottom:none}
  .am-sug:hover,.am-sug.active{background:rgba(var(--accent-rgb),0.12)}
  .am-sug.active{box-shadow:inset 2px 0 0 var(--fire-hot)}
  .am-sug-tag{flex:none;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
    text-transform:uppercase;padding:3px 6px;border:1px solid var(--line-strong);
    color:var(--bone-dim);min-width:52px;text-align:center}
  .am-sug-tag.pais{color:var(--gold);border-color:var(--line-strong)}
  .am-sug-tag.ciudad{color:var(--silver)}
  .am-sug-tag.banda{color:var(--fire-hot);border-color:var(--line-strong)}
  .am-sug-main{flex:1 1 auto;min-width:0;font-family:var(--font-ui);font-size:13.5px;
    color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .am-sug.active .am-sug-main{color:var(--fire-hot)}
  .am-sug-sub{flex:none;font-family:var(--font-mono);font-size:10.5px;color:var(--bone-dim);
    white-space:nowrap;max-width:42%;overflow:hidden;text-overflow:ellipsis}
  .am-sug-count{flex:none;font-family:var(--font-mono);font-size:10px;color:#9aa0a8}
  .am-search-note{padding:9px 12px;font-family:var(--font-mono);font-size:10px;
    color:var(--bone-dim);letter-spacing:.03em}

  .am-kpis{display:flex;gap:30px;align-items:flex-end}
  .am-kpi{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
  .am-kpi .v{font-family:var(--font-mono);font-size:22px;color:#e8ecf0;font-weight:600;
    text-shadow:0 0 12px rgba(180,192,205,0.20)}
  .am-kpi .v.hot{color:var(--fire-hot);text-shadow:0 0 12px rgba(var(--accent-rgb),0.35)}
  .am-kpi .l{font-family:var(--font-ui);font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--bone-dim);margin-top:5px}
  /* foco: el valor puede ser nombre de género o "≈N"; la etiqueta (mezcla) no debe romper el layout */
  #kpi-focus{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  #kpi-focus-l{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}

  /* ---------- MAIN GRID ---------- */
  .am-stage{
    position:absolute;inset:0;top:64px;
    display:grid;
    grid-template-columns:248px 1fr var(--right-w,312px);
    gap:0;
  }
  .am-col{position:relative;min-height:0;display:flex;flex-direction:column}
  .am-col.left{border-right:1px solid var(--line)}
  .am-col.right{border-left:1px solid var(--line)}
  /* tirador para ENSANCHAR el panel derecho (arrastrar el borde izquierdo) */
  .am-resizer{position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:col-resize;z-index:16}
  .am-resizer::before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);
    width:3px;height:46px;border-radius:3px;background:var(--line-strong);transition:background .15s,height .15s}
  .am-resizer:hover::before,.am-resizer.drag::before{background:var(--gold-bright);height:80px}

  .am-panelhead{
    padding:16px 18px 10px;
  }
  .am-panelhead h2{
    font-family:var(--font-display);font-weight:700;font-size:15px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  }
  .am-panelhead p{
    font-family:var(--font-ui);font-weight:300;font-size:11.5px;
    letter-spacing:.04em;color:var(--bone-dim);margin-top:4px;
  }

  /* ---------- GENRE FILTER LIST ---------- */
  .am-genres{overflow-y:auto;padding:4px 12px 18px;flex:1}
  .am-genres::-webkit-scrollbar{width:6px}
  .am-genres::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:0}
  .am-allbtn{
    width:100%;text-align:left;cursor:pointer;
    background:transparent;border:1px solid var(--line-strong);
    color:var(--gold-bright);font-family:var(--font-ui);font-weight:500;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    padding:9px 12px;margin:0 0 10px;transition:all .18s;
  }
  .am-allbtn:hover{background:rgba(var(--accent-rgb),0.08);border-color:var(--gold)}
  .am-allbtn.muted{color:var(--bone-dim);border-color:var(--line)}
  /* toggle Combinar + switch O/Y */
  .am-modebar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
  .am-modebtn{flex:1;background:transparent;border:1px solid var(--line-strong);color:var(--bone-dim);
    font-family:var(--font-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    padding:7px 8px;cursor:pointer;transition:all .15s}
  .am-modebtn:hover{border-color:var(--gold);color:var(--bone)}
  .am-modebtn.on{background:rgba(var(--accent-rgb),0.14);border-color:var(--fire-hot);color:var(--gold-bright)}
  .am-boolsw{display:flex;border:1px solid var(--line-strong)}
  .am-boolbtn{background:transparent;border:none;color:var(--bone-dim);font-family:var(--font-mono);
    font-size:12px;font-weight:600;width:30px;padding:6px 0;cursor:pointer}
  .am-boolbtn.on{background:var(--fire-hot);color:#0a0908}
  .am-allbtn.am-expandall{font-size:11px;letter-spacing:.1em;color:var(--bone);border-color:var(--line);margin-top:-4px}
  .am-allbtn.am-expandall:hover{color:var(--gold-bright);border-color:var(--gold)}
  .am-grow{
    display:flex;align-items:center;gap:10px;cursor:pointer;
    padding:8px 10px;border:1px solid transparent;
    transition:background .15s,border-color .15s;position:relative;
  }
  .am-grow:hover{background:rgba(var(--accent-rgb),0.07)}
  .am-grow.active{background:rgba(var(--accent-rgb),0.12);border-color:var(--fire-hot)}
  .am-grow .gname{
    flex:1 1 auto;min-width:0;font-family:var(--font-ui);font-weight:400;font-size:13.5px;
    letter-spacing:.06em;color:var(--bone);text-transform:capitalize;
    text-align:left!important;text-align-last:left;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  .am-grow.active .gname{color:var(--fire-hot);font-weight:500}
  .am-grow .gcount{font-family:var(--font-mono);font-size:11.5px;color:#b9c0c8;font-weight:500}
  .am-grow.active .gcount{color:var(--fire-hot)}
  .am-grow .gbar{
    position:absolute;left:0;bottom:0;height:2px;background:var(--fire);
    opacity:.5;transition:width .3s;
  }
  .am-grow.active .gbar{background:var(--fire-hot);opacity:1;height:3px}
  /* caret de expansión del árbol */
  .am-grow .gcaret{
    flex:none;width:14px;text-align:center;font-size:9px;color:var(--bone-dim);
    transition:transform .18s,color .15s;user-select:none;
  }
  .am-grow:hover .gcaret{color:var(--gold)}
  .am-grow.expanded .gcaret{transform:rotate(90deg);color:var(--gold-bright)}
  .am-grow.active .gcaret{color:var(--fire-hot)}
  /* sublista de subgéneros (colapsada por defecto) */
  .am-subs{display:none;margin:0 0 6px 0;border-left:1px solid var(--line);
    padding-left:6px;margin-left:14px}
  .am-subs.open{display:block;animation:subIn .18s ease}
  @keyframes subIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
  .am-srow{
    display:flex;align-items:center;justify-content:flex-start;gap:8px;cursor:pointer;
    padding:6px 9px;border:1px solid transparent;transition:background .14s,border-color .14s;
    text-align:left;                 /* sin justificado heredado */
  }
  .am-srow:hover{background:rgba(var(--accent-rgb),0.07)}
  .am-srow.active{background:rgba(var(--accent-rgb),0.14);border-color:var(--fire-hot)}
  .am-srow .sname{
    flex:1 1 auto;min-width:0;font-family:var(--font-ui);font-weight:300;font-size:12px;
    letter-spacing:normal;color:var(--bone-dim);
    /* nombre COMPLETO a la izquierda, una sola línea; nunca justificado/estirado */
    text-align:left!important;text-align-last:left;white-space:nowrap;word-spacing:normal;
    overflow:hidden;text-overflow:ellipsis;
  }
  .am-srow:hover .sname{color:var(--bone)}
  .am-srow.active .sname{color:var(--fire-hot);font-weight:500}
  .am-srow .scount{flex:none;font-family:var(--font-mono);font-size:10.5px;color:#8f969e}
  .am-srow.active .scount{color:var(--fire-hot)}
  .am-srow.otros .sname{font-style:italic;opacity:.85}
  /* grupo "Otros" expandible + su lista (cola de subgéneros raros, scrollable) */
  .am-srow.otros-group{cursor:pointer}
  .am-srow .scaret{flex:none;width:11px;text-align:center;font-size:8px;color:var(--bone-dim);
    transition:transform .18s,color .15s;user-select:none}
  .am-srow.otros-group:hover .scaret{color:var(--gold)}
  .am-srow.otros-group.open-otros .scaret{transform:rotate(90deg);color:var(--gold-bright)}
  .am-subs-tail{display:none;margin-left:11px;border-left:1px solid var(--line);
    max-height:260px;overflow-y:auto}
  .am-subs-tail.open{display:block;animation:subIn .18s ease}
  .am-subs-tail::-webkit-scrollbar{width:5px}
  .am-subs-tail::-webkit-scrollbar-thumb{background:var(--line-strong)}
  .am-subs-tail .am-srow{padding-left:11px}
  .am-subs-tail .sname{font-size:11.5px}

  /* ---------- BUSCADOR + MULTISELECCIÓN DE GÉNEROS ---------- */
  .am-gfilter{padding:0 12px 8px;border-bottom:1px solid var(--line)}
  .am-gsearch-wrap{position:relative}
  .am-gsearch-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);
    font-size:14px;color:var(--gold);opacity:.85;pointer-events:none}
  .am-gsearch{width:100%;background:rgba(12,11,14,0.72);border:1px solid var(--line-strong);
    color:var(--bone);font-family:var(--font-ui);font-weight:300;font-size:12.5px;
    letter-spacing:.03em;padding:8px 26px 8px 26px;outline:none;transition:border-color .16s,background .16s}
  .am-gsearch::placeholder{color:var(--bone-dim)}
  .am-gsearch:focus{border-color:var(--gold);background:rgba(12,11,14,0.92)}
  .am-gsearch-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:transparent;border:none;color:var(--bone-dim);font-size:12px;cursor:pointer;padding:3px}
  .am-gsearch-clear:hover{color:var(--gold-bright)}
  .am-gdrop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:80;
    background:var(--panel-solid);border:1px solid var(--line-strong);
    box-shadow:0 14px 38px rgba(0,0,0,0.6);max-height:54vh;overflow-y:auto;display:none}
  .am-gdrop.show{display:block}
  .am-gdrop::-webkit-scrollbar{width:6px}
  .am-gdrop::-webkit-scrollbar-thumb{background:var(--line-strong)}
  .am-gdrop .am-sug.on{box-shadow:inset 3px 0 0 var(--gold-bright)}
  .am-gdrop .am-sug.on .am-sug-main{color:var(--gold-bright)}
  .am-gdrop .am-sug-count{color:#9aa0a8}
  /* chips de filtros activos */
  .am-genchips{display:none;flex-wrap:wrap;gap:6px;margin-top:8px}
  .am-genchips.show{display:flex}
  .am-chip{display:inline-flex;align-items:center;gap:5px;
    background:rgba(var(--accent-rgb),0.14);border:1px solid var(--fire-hot);
    color:var(--fire-hot);font-family:var(--font-ui);font-size:11.5px;font-weight:500;
    letter-spacing:.02em;padding:3px 4px 3px 8px;max-width:100%}
  .am-chip.sub{background:rgba(var(--accent-rgb),0.12);border-color:var(--gold);color:var(--gold-bright)}
  .am-chip .cx-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .am-chipx{background:transparent;border:none;color:inherit;cursor:pointer;font-size:11px;
    line-height:1;padding:1px 3px;opacity:.8}
  .am-chipx:hover{opacity:1;color:var(--gold-bright)}
  .am-chipclear{background:transparent;border:1px solid var(--line-strong);color:var(--bone-dim);
    font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    padding:3px 8px;cursor:pointer}
  .am-chipclear:hover{color:var(--gold-bright);border-color:var(--gold)}

  /* ---------- P4: barra de filtros (breadcrumb + chips + contador) sobre el globo ---------- */
  .am-fbar{position:absolute;left:0;right:0;top:0;z-index:7;display:none;align-items:center;gap:12px;
    padding:8px 16px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;
    background:linear-gradient(180deg,rgba(12,11,14,0.94),rgba(12,11,14,0.78));
    border-bottom:1px solid var(--line);font-family:var(--font-ui);font-size:12px;color:var(--bone)}
  .am-fbar::-webkit-scrollbar{display:none}
  .has-fbar .am-fbar{display:flex}
  .has-fbar .am-controls, .has-fbar .am-legend{top:58px}
  @media(min-width:769px){ .has-fbar .am-ctx{top:162px} }   /* escritorio: debajo de barra + controles */
  .fb-bc{display:flex;align-items:center;gap:4px;flex-shrink:0}
  .fb-crumb{background:none;border:none;padding:2px 3px;color:var(--bone-dim);font:inherit;cursor:pointer;
    letter-spacing:.04em}
  button.fb-crumb:hover{color:var(--gold-bright);text-decoration:underline}
  .fb-crumb.cur{color:var(--gold-bright);font-weight:600;cursor:default}
  .fb-sep{color:var(--line-strong)}
  .fb-chips{display:flex;align-items:center;gap:6px;flex-shrink:0}
  .fb-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 9px;
    border:1px solid var(--line-strong);background:rgba(18,16,20,0.9);color:var(--bone);font-size:11.5px}
  .fb-chip.gen{border-color:var(--fire-hot);color:var(--fire-hot);background:rgba(var(--accent-rgb),0.14)}
  .fb-chip.gen.sub{border-color:var(--gold);color:var(--gold-bright);background:rgba(var(--accent-rgb),0.10)}
  .fb-chip .fb-l{max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .fb-x{background:none;border:none;color:inherit;opacity:.75;cursor:pointer;font-size:11px;padding:1px 4px;line-height:1}
  .fb-forja{color:inherit;opacity:.6;text-decoration:none;font-size:11px;padding:1px 2px;line-height:1}
  .fb-forja:hover,.fb-forja:focus-visible{opacity:1;color:var(--gold-bright);outline:none}
  .fb-x:hover,.fb-x:focus-visible{opacity:1;color:var(--gold-bright)}
  .fb-op{background:transparent;border:1px solid var(--gold);color:var(--gold-bright);cursor:pointer;
    font-family:var(--font-mono);font-size:11px;padding:2px 8px}
  .fb-count{margin-left:auto;flex-shrink:0;color:var(--bone-dim);font-size:11.5px}
  .fb-count b{color:var(--bone);font-weight:600}
  .fb-clear{flex-shrink:0;background:transparent;border:1px solid var(--line-strong);color:var(--bone-dim);cursor:pointer;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px}
  .fb-clear:hover{color:var(--gold-bright);border-color:var(--gold)}
  #d-genres .am-drow[data-root]{cursor:pointer}
  #d-genres .am-drow[data-root]:hover .n, .am-rootlink:hover{color:var(--gold-bright)}
  .am-rootlink{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
  .am-bsentinel{height:1px;flex-shrink:0}
  @media (prefers-reduced-motion:no-preference){ .fb-chip{animation:fbIn .18s ease-out} }
  @keyframes fbIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
  /* panel derecho: resultados de la combinación */
  .am-comboh{padding:10px 14px 8px;font-family:var(--font-ui);font-size:13px;color:var(--bone);
    border-bottom:1px solid var(--line)}
  .am-comboh .cbc{font-family:var(--font-mono);font-size:11px;color:var(--fire-hot);margin-left:6px}
  #am-combobands{flex:1;min-height:0;overflow-y:auto;padding:4px 6px}
  #am-combobands::-webkit-scrollbar{width:6px}
  #am-combobands::-webkit-scrollbar-thumb{background:var(--line-strong)}
  .am-combo-empty{padding:18px 16px;font-family:var(--font-ui);font-size:12.5px;
    line-height:1.6;color:var(--bone-dim)}
  a.bn-link{cursor:pointer;color:var(--bone);text-decoration:none}
  a.bn-link:hover{color:var(--fire-hot)}

  /* ---------- GLOBE ---------- */
  .am-globe-wrap{position:relative;flex:1;min-height:0}
  #am-canvas{display:block;width:100%;height:100%}
  #am-labels{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
  .am-clabel{
    position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
    font-family:var(--font-ui);font-weight:500;letter-spacing:.08em;
    text-transform:uppercase;color:var(--bone);
    text-shadow:0 0 6px #000,0 0 2px #000;transition:opacity .25s;
  }
  .am-clabel .n{font-size:11px}
  .am-clabel .c{font-family:var(--font-mono);font-size:9px;color:var(--fire-hot);margin-left:6px}
  a.am-band{text-decoration:none;cursor:pointer}
  .am-controls{position:absolute;left:20px;top:16px;z-index:6;display:flex;gap:8px}
  .am-ctrl{
    display:flex;align-items:center;gap:8px;cursor:pointer;
    background:rgba(12,11,14,0.82);border:1px solid var(--line-strong);
    color:var(--bone);font-family:var(--font-ui);font-weight:500;font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;transition:all .16s;
  }
  .am-ctrl:hover{border-color:var(--gold);color:var(--gold-bright)}
  .am-ctrl .ic{font-size:9px;color:var(--fire-hot);letter-spacing:0;line-height:1}
  .am-ctrl.on{border-color:var(--fire-hot);color:var(--gold-bright);background:rgba(var(--accent-rgb),0.12)}
  .am-ctrl.am-clear{border-color:var(--fire-hot);color:var(--fire-hot);background:rgba(var(--accent-rgb),0.10)}
  .am-ctrl.am-clear:hover{background:rgba(var(--accent-rgb),0.20);color:var(--gold-bright)}
  .am-ctrl.paused .ic{color:var(--gold-bright)}
  .am-flag{display:inline-block;vertical-align:middle;border:1px solid rgba(0,0,0,0.5)}
  .am-overlay{
    position:absolute;left:20px;bottom:18px;z-index:5;pointer-events:none;
    max-width:340px;
  }
  .am-status{
    font-family:var(--font-disp);font-weight:700;font-size:14px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--bone);
    margin-bottom:7px;
  }
  .am-status b{color:var(--fire-hot)}
  .am-hint{
    font-family:var(--font-mono);font-size:10.5px;color:var(--bone-dim);
    letter-spacing:.03em;line-height:1.6;
  }
  .am-legend{
    position:absolute;right:18px;top:16px;z-index:5;pointer-events:none;
    text-align:right;
  }
  .am-legend .lt{font-family:var(--font-ui);font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--bone-dim);margin-bottom:8px}
  .am-ramp{
    width:150px;height:7px;margin-left:auto;
    background:linear-gradient(90deg,var(--silver),var(--fire-hot),var(--fire));
  }
  .am-ramp-labels{display:flex;justify-content:space-between;width:150px;margin-left:auto;
    margin-top:5px;font-family:var(--font-mono);font-size:9px;color:var(--bone-dim)}

  /* ---------- RIGHT PANEL: TREEMAP / DETAIL ---------- */
  .am-right-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  #am-tree{flex:1;min-height:0;width:100%}
  .am-tree-note{
    padding:10px 18px 16px;font-family:var(--font-mono);font-size:10px;
    color:var(--bone-dim);letter-spacing:.02em;border-top:1px solid var(--line);
  }

  /* country detail */
  .am-detail{display:none;flex-direction:column;height:100%;overflow-y:auto}
  .am-detail.show{display:flex}
  .am-detail::-webkit-scrollbar{width:6px}
  .am-detail::-webkit-scrollbar-thumb{background:var(--line-strong)}
  .am-back{
    display:flex;align-items:center;gap:7px;cursor:pointer;
    font-family:var(--font-ui);font-weight:400;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gold);background:transparent;border:none;
    padding:14px 18px 6px;
  }
  .am-back:hover{color:var(--gold-bright)}
  .am-dhead{padding:2px 18px 14px;border-bottom:1px solid var(--line)}
  .am-dflag{font-family:var(--font-mono);font-size:11px;color:var(--fire-hot);
    letter-spacing:.2em;margin-bottom:4px}
  .am-dname{font-family:var(--font-display);font-weight:900;font-size:26px;
    letter-spacing:.06em;color:var(--bone);text-transform:uppercase;line-height:1}
  .am-dtotal{font-family:var(--font-mono);font-size:12px;color:var(--bone-dim);margin-top:8px}
  .am-dtotal b{color:#e8ecf0;font-weight:700;font-size:15px;
    text-shadow:0 0 10px rgba(180,192,205,0.18)}
  .am-dsec{padding:14px 18px;border-bottom:1px solid var(--line)}
  .am-dsec h3{font-family:var(--font-ui);font-weight:500;font-size:10.5px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--gold);margin-bottom:11px}
  .am-drow{display:flex;align-items:center;gap:9px;margin-bottom:8px;text-align:left}
  .am-drow .n{flex:1 1 auto;min-width:0;font-family:var(--font-ui);font-size:13px;color:var(--bone);text-transform:capitalize;
    text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .am-drow .c{font-family:var(--font-mono);font-size:12.5px;color:#cdd3da;font-weight:600;min-width:40px;text-align:right}
  .am-drow .b{height:6px;background:var(--fire);max-width:96px;flex-shrink:0}
  .am-drow.on{background:rgba(var(--accent-rgb),0.12);box-shadow:inset 2px 0 0 var(--fire-hot);
    padding:3px 7px;margin-left:-7px;margin-right:-7px}
  .am-drow.on .n{color:var(--fire-hot);font-weight:600}
  .am-drow.on .b{background:var(--fire-hot)}
  .am-drow.on .c{color:var(--fire-hot);text-shadow:0 0 10px rgba(var(--accent-rgb),0.4)}
  .am-cnum{font-family:var(--font-mono);color:#cdd3da;font-weight:600}
  .bcount{font-family:var(--font-mono);font-size:11px;color:var(--fire-hot);font-weight:600}
  .d-cityclear{font-family:var(--font-ui);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gold);cursor:pointer}
  .d-cityclear:hover{color:var(--gold-bright)}
  .am-note{font-family:var(--font-mono);font-size:9.5px;line-height:1.55;
    color:var(--bone-dim);letter-spacing:.02em;opacity:.9;margin-top:10px}
  .am-bands{display:flex;flex-direction:column;max-height:300px;overflow-y:auto;
    border:1px solid var(--line)}
  .am-bands::-webkit-scrollbar{width:6px}
  .am-bands::-webkit-scrollbar-thumb{background:var(--line-strong)}
  .am-band{
    display:flex;align-items:center;gap:8px;
    font-family:var(--font-ui);font-weight:400;font-size:12.5px;letter-spacing:.02em;
    color:var(--bone);padding:5px 10px;border-bottom:1px solid var(--line);
  }
  .am-band:last-child{border-bottom:none}
  .am-band:hover{background:rgba(var(--accent-rgb),0.05)}
  .am-band .bn{flex:1 1 auto;min-width:0;color:var(--bone);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* nombre como botón (abre la ficha) cuando trae data-id: reset nativo, resto igual que el span */
  button.am-band .bn, .am-band button.bn{background:none;border:none;padding:0;margin:0;
    text-align:left;font:inherit;letter-spacing:inherit;cursor:pointer}
  .am-band .bn[data-id]:hover{color:var(--gold-bright);text-decoration:underline}
  /* ciudad: ENCOGIBLE y truncable -> nunca empuja los botones fuera de la fila */
  .am-band .bcity{font-family:var(--font-mono);font-size:10px;color:var(--bone-dim);
    flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}
  /* género de la banda: dorado sobrio, encogible y truncable (full en title); nunca empuja los botones */
  .am-band .bgen{font-family:var(--font-ui);font-size:10px;color:var(--accent,#c9a44a);opacity:.82;
    flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
  /* accesos: MA + Spotify + YouTube — SIEMPRE presentes; sobrios plata, se encienden al hover */
  .am-band .bplay{flex:none;display:flex;align-items:center;gap:3px}
  .am-band .bp{display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;color:var(--silver);opacity:.55;text-decoration:none;
    transition:color .15s,opacity .15s,transform .12s}
  .am-band .bp svg{width:14px;height:14px;fill:currentColor;display:block}
  .am-band .bp:hover{opacity:1;transform:scale(1.14)}
  .am-band .bp.ma:hover{color:var(--gold-bright)} /* dorado Metal Archives */
  .am-band .bp.sp:hover{color:#1DB954}             /* verde Spotify */
  .am-band .bp.yt:hover{color:#FF0033}             /* rojo YouTube */
  /* botón "ir al globo" (es un <button>, reseteamos su estilo nativo) */
  .am-band .bp.globe{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--silver)}
  .am-band .bp.globe:hover{color:var(--gold-bright)}
  /* bandera/código del país de origen, antes del nombre (discreto, gótico) */
  .am-band .bflag{flex:none;display:inline-flex;align-items:center;gap:3px}
  .am-band .bflag .am-flag{height:11px;width:auto;box-shadow:0 0 0 1px rgba(0,0,0,0.55)}
  .am-band .bflag .bcc{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;
    color:var(--bone-dim);min-width:15px}
  .am-bsearch{width:100%;margin-bottom:8px;background:rgba(12,11,14,0.6);
    border:1px solid var(--line-strong);color:var(--bone);font-family:var(--font-ui);
    font-size:12px;padding:7px 10px;outline:none}
  .am-bsearch:focus{border-color:var(--gold)}
  .am-bsearch::placeholder{color:var(--bone-dim)}
  .am-moreb{width:100%;margin-top:9px;cursor:pointer;background:transparent;
    border:1px solid var(--line-strong);color:var(--gold-bright);font-family:var(--font-ui);
    font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    padding:9px;transition:all .16s}
  .am-moreb:hover{background:rgba(var(--accent-rgb),0.08);border-color:var(--gold)}
  .am-moreb:disabled{opacity:.6;cursor:default}
  .am-cities{font-family:var(--font-ui);font-size:13px;color:var(--bone-dim);line-height:1.8}
  .am-cities b{color:var(--bone);font-weight:400}
  /* insight de localidad (sección inferior cuando hay una ciudad seleccionada) */
  .am-cinsight{font-family:var(--font-ui);font-size:13px;color:var(--bone);margin-bottom:7px;
    padding:7px 9px;border:1px solid var(--line);background:rgba(var(--accent-rgb),0.05)}
  .am-cinsight.on{border-color:var(--fire-hot);background:rgba(var(--accent-rgb),0.12)}
  .am-cinsight b{color:var(--gold-bright);font-weight:600}
  .am-cinsight .lbl{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--bone-dim);margin-bottom:3px}
  .am-cinsight .pct{font-family:var(--font-mono);font-size:11px;color:var(--fire-hot);margin-left:4px}
  .am-cothers{margin-top:8px;font-family:var(--font-ui);font-size:12.5px;color:var(--bone-dim);line-height:1.8}
  .am-cothers .lbl{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--bone-dim);margin-bottom:3px}
  .am-cothers b{color:var(--bone);font-weight:400}
  /* desagregación por localidad (lista clickeable en la ficha de país) */
  .am-locnote{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--bone-dim);margin:2px 0 6px}
  .am-loc{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;
    padding:5px 8px;border:1px solid transparent;border-bottom:1px solid var(--line)}
  .am-loc:hover{background:rgba(var(--accent-rgb),0.08);border-color:var(--fire-hot)}
  .am-loc .ln{flex:1 1 auto;min-width:0;font-family:var(--font-ui);font-size:13px;color:var(--bone);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .am-loc:hover .ln{color:var(--gold-bright)}
  .am-loc .lg{flex:none;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
    color:var(--bone-dim);text-transform:uppercase}
  .am-loc .lc{flex:none;font-family:var(--font-mono);font-size:11.5px;color:#cdd3da;font-weight:500;min-width:34px;text-align:right}
  .am-loc .lb{position:absolute;left:0;bottom:0;height:2px;background:var(--fire);opacity:.5}

  .am-mockchip{
    position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
    color:var(--bone-dim);background:rgba(12,11,14,0.78);
    border:1px solid var(--line);padding:7px 16px;text-transform:uppercase;
    pointer-events:none;
  }
  .am-mockchip b{color:var(--gold)}
  /* crédito de fuente: metadato discreto en el header, a la derecha del título */
  .am-srccredit{align-self:center;font-family:var(--font-ui);font-weight:300;font-size:10.5px;
    letter-spacing:.04em;color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:240px;margin:0 6px 0 18px;flex:0 1 auto;min-width:0}
  .am-srccredit b{color:var(--gold);font-weight:500}

  /* ---------- PANEL DE AJUSTES (Tema + Fuente) — arrastrable y colapsable ---------- */
  .am-tools{
    position:fixed;right:14px;bottom:14px;z-index:46;
    display:flex;flex-direction:column;gap:6px;align-items:stretch;
    /* fondo SÓLIDO (sin backdrop-filter): en Chrome real, fixed + backdrop-filter
       en el mismo nodo hace que scrollee con la página (bug de compositing). */
    background:rgba(14,12,16,0.97);border:1px solid var(--line-strong);
    padding:6px;box-shadow:0 8px 28px rgba(0,0,0,0.55);
    max-width:74vw;transition:opacity .25s ease,transform .25s ease;
  }
  /* fuera del héroe (al bajar al dashboard) NO sigue: se oculta; reaparece arriba */
  .am-tools.am-tools-away{opacity:0;pointer-events:none;transform:translateY(10px)}
  .am-tools-grip{
    display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:grab;
    font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold);opacity:.9;user-select:none;padding:2px 4px;touch-action:none;
  }
  .am-tools-grip:active{cursor:grabbing}
  .am-tools-grip .gt{display:flex;align-items:center;gap:7px}
  .am-tools-grip .dots{letter-spacing:1px;color:var(--bone-dim)}
  .am-tools-grip .col{cursor:pointer;color:var(--bone-dim);font-size:11px;padding:0 4px}
  .am-tools-grip .col:hover{color:var(--gold-bright)}
  .am-tools.collapsed .am-tools-body{display:none}
  .am-tools-body{display:flex;flex-direction:column;gap:6px}
  /* ---------- SELECTOR DE FUENTE DISPLAY (discreto) ---------- */
  .am-fontpick{
    position:static;
    display:flex;align-items:center;gap:8px;
    background:rgba(12,11,14,0.6);border:1px solid var(--line);padding:6px 8px;
  }
  .am-fontpick label{font-family:var(--font-ui);font-size:9px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);opacity:.85}
  .am-fontpick select{background:rgba(18,16,20,0.92);border:1px solid var(--line-strong);
    color:var(--bone);font-family:var(--font-ui);font-size:12px;letter-spacing:.03em;
    padding:5px 8px;outline:none;cursor:pointer}
  .am-fontpick select:hover,.am-fontpick select:focus{border-color:var(--gold)}
  /* selector de TEMA (paleta) — dentro del panel de ajustes arrastrable */
  .am-themepick{
    position:static;
    display:flex;align-items:center;gap:8px;
    background:rgba(12,11,14,0.6);border:1px solid var(--line);padding:6px 8px;
  }
  .am-themepick label{font-family:var(--font-ui);font-size:9px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);opacity:.85}
  .am-themepick .sw{width:11px;height:11px;flex:none;border:1px solid rgba(0,0,0,0.6);
    background:var(--select);box-shadow:0 0 8px var(--select)}
  .am-themepick select{background:rgba(18,16,20,0.92);border:1px solid var(--line-strong);
    color:var(--bone);font-family:var(--font-ui);font-size:12px;letter-spacing:.03em;
    padding:5px 8px;outline:none;cursor:pointer}
  .am-themepick select:hover,.am-themepick select:focus{border-color:var(--gold)}
  .am-cpick{width:24px;height:24px;padding:0;border:1px solid var(--line-strong);background:none;cursor:pointer;flex:none}
  .am-cpick::-webkit-color-swatch-wrapper{padding:2px}
  .am-cpick::-webkit-color-swatch{border:none}
  .am-cpick:hover{border-color:var(--gold-bright)}
  /* selector de SKIN de la Tierra */
  .am-skinpick{position:static;display:flex;align-items:center;gap:8px;
    background:rgba(12,11,14,0.6);border:1px solid var(--line);padding:6px 8px}
  .am-skinpick label{font-family:var(--font-ui);font-size:9px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);opacity:.85}
  .am-skinpick select{background:rgba(18,16,20,0.92);border:1px solid var(--line-strong);
    color:var(--bone);font-family:var(--font-ui);font-size:12px;letter-spacing:.03em;
    padding:5px 8px;outline:none;cursor:pointer}
  .am-skinpick select:hover,.am-skinpick select:focus{border-color:var(--gold)}

  /* ---------- RADIO METAL: TV CRT flotante (widget arrastrable, mini/grande) ---------- */
  .am-tv{position:fixed;z-index:120;display:none;flex-direction:column;
    top:78px;right:18px;width:300px;box-shadow:0 18px 40px rgba(0,0,0,0.6)}
  .am-tv.show{display:flex}
  .am-tv.big{width:560px}
  .am-tv-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:grab;
    background:rgba(10,9,12,0.94);border:1px solid rgba(var(--accent-rgb),0.45);border-bottom:none;
    padding:5px 8px;border-radius:11px 11px 0 0;user-select:none;touch-action:none}
  .am-tv-bar:active{cursor:grabbing}
  .am-tv-title{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
  .am-tv-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 7px 1px rgba(var(--accent-rgb),0.85);animation:tvblink 2.2s ease-in-out infinite}
  .am-tv-bargrp{display:flex;align-items:center;gap:4px}
  .am-tv-bargrp button,.am-tv-bargrp a{background:transparent;border:none;color:var(--bone-dim);
    cursor:pointer;font-size:13px;line-height:1;text-decoration:none;padding:3px 5px}
  .am-tv-bargrp button:hover,.am-tv-bargrp a:hover{color:var(--gold-bright)}
  .am-tv-bezel{position:relative;display:flex;gap:12px;
    background:linear-gradient(157deg,#2b2723 0%,#1a1714 55%,#100d0b 100%);
    border:3px solid rgba(var(--accent-rgb),0.55);border-radius:4px;padding:10px;
    box-shadow:inset 0 2px 10px rgba(255,255,255,0.06), inset 0 -10px 26px rgba(0,0,0,0.6)}
  .am-tv.big .am-tv-bezel{padding:16px;gap:14px}
  .am-tv-screen{position:relative;flex:1 1 auto;min-width:0;aspect-ratio:16/9;background:#000;border-radius:10px;
    overflow:hidden;border:2px solid #050505;
    box-shadow:inset 0 0 40px rgba(0,0,0,0.95), inset 0 0 6px rgba(var(--accent-rgb),0.5)}
  .am-tv-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
  .am-tv-scan{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.45;
    background:repeating-linear-gradient(rgba(0,0,0,0.20) 0 1px, transparent 1px 3px)}
  .am-tv-scan::after{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,0.5) 100%)}  /* viñeta CRT */
  .am-tv-noscreen{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;
    color:var(--accent);font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;font-size:11px;text-align:center;
    background:#0a0a0c}
  .am-tv-noscreen.show{display:flex}
  .am-tv-side{flex:none;width:40px;display:none;flex-direction:column;align-items:center;gap:13px;padding-top:4px}
  .am-tv.big .am-tv-side{display:flex}      /* las perillas/luz sólo en grande (mini = compacto) */
  .am-tv-light{width:12px;height:12px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 10px 2px rgba(var(--accent-rgb),0.85);animation:tvblink 2.2s ease-in-out infinite}
  @keyframes tvblink{0%,100%{opacity:1}50%{opacity:.45}}
  .am-tv-knob{width:30px;height:30px;border-radius:50%;
    background:radial-gradient(circle at 34% 30%,#5e5852,#1b1815);
    border:2px solid rgba(var(--accent-rgb),0.6);box-shadow:inset 0 0 7px #000, 0 1px 2px rgba(0,0,0,0.6);position:relative}
  .am-tv-knob::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:8px;background:rgba(var(--accent-rgb),0.8);transform:translateX(-50%)}
  .am-tv-knob.small{width:22px;height:22px}
  .am-tv-vent{width:26px;flex:1;min-height:22px;border-radius:3px;margin-top:2px;
    background:repeating-linear-gradient(#0000 0 3px,#000 3px 5px), #2a2520;opacity:.7}
  .am-tv-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;
    background:rgba(10,9,12,0.94);border:1px solid rgba(var(--accent-rgb),0.45);border-top:none;
    padding:6px;border-radius:0 0 11px 11px}
  .am-tv-chip{background:rgba(18,16,20,0.92);border:1px solid var(--line-strong);color:var(--bone);
    font-family:var(--font-ui);font-size:11px;letter-spacing:.03em;padding:3px 8px;cursor:pointer;border-radius:3px;transition:all .14s}
  .am-tv-chip:hover{border-color:var(--gold)}
  .am-tv-chip.on{background:rgba(var(--accent-rgb),0.20);border-color:var(--fire-hot);color:var(--gold-bright);font-weight:500}
  .am-band .bp.yt:hover{color:#FF0033}
  @media(max-width:768px){
    .am-tv{right:8px;width:min(86vw,300px)}
    .am-tv.big{width:min(94vw,560px)}
  }

  /* ---------- FICHA DE CONTEXTO (lugar seleccionado) ---------- */
  /* default: arriba, despejada de los paneles laterales (izq Géneros 248px / der 312px) */
  /* sin backdrop-filter (rompe position:fixed con GPU en Chrome): fondo translúcido sólido */
  .am-ctx{position:fixed;left:264px;top:70px;z-index:115;display:none;width:190px;
    background:rgba(11,10,13,0.72);border:1px solid rgba(var(--accent-rgb),0.5);
    box-shadow:0 12px 34px rgba(0,0,0,0.55);padding:0 0 6px;
    font-family:var(--font-ui);transition:opacity .25s ease,transform .25s ease}
  .am-ctx.show{display:block}
  /* igual que Ajustes: queda en el héroe y se desvanece al bajar al dashboard */
  .am-ctx.am-ctx-away{opacity:0;pointer-events:none;transform:translateY(10px)}
  .am-ctx-head{display:flex;align-items:center;gap:8px;cursor:grab;user-select:none;touch-action:none;
    padding:7px 9px;border-bottom:1px solid rgba(var(--accent-rgb),0.28);
    background:linear-gradient(180deg,rgba(var(--accent-rgb),0.10),transparent)}
  .am-ctx-head:active{cursor:grabbing}
  .am-ctx-name{flex:1;min-width:0;font-family:var(--font-display);font-size:14px;letter-spacing:.06em;color:var(--bone);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
  .am-ctx-btns{display:flex;align-items:center;gap:1px;flex:none}
  .am-ctx-b{background:transparent;border:none;color:var(--bone-dim);cursor:pointer;font-size:12px;line-height:1;padding:3px 4px}
  .am-ctx-b:hover{color:var(--gold-bright)}
  .am-ctx-row{display:flex;align-items:center;gap:8px;padding:5px 11px;font-size:12.5px;color:var(--bone)}
  .am-ctx-k{flex:1;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
  .am-ctx-clock{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--accent);letter-spacing:.04em}
  .am-ctx-wx{gap:7px}
  .am-ctx-ico{font-size:17px;line-height:1}
  .am-ctx-temp{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--bone)}
  .am-ctx-credit{flex:1;text-align:right;font-family:var(--font-mono);font-size:8px;letter-spacing:.04em;color:var(--bone-dim);opacity:.8}
  .am-ctx-dom{font-family:var(--font-ui);font-size:12.5px;color:var(--gold-bright);font-weight:500}
  #am-ctx-bands{font-family:var(--font-mono);font-size:12.5px;color:#cdd3da;font-weight:500}
  /* COLAPSADA: solo encabezado (bandera + nombre + reloj); oculta clima/bandas/dominante */
  .am-ctx.collapsed{padding-bottom:0}
  .am-ctx.collapsed .am-ctx-more{display:none!important}
  @media(max-width:768px){ .am-ctx{left:8px;top:auto;bottom:calc(70px + env(safe-area-inset-bottom,0px))} }

  /* ---------- DASHBOARD scrollytelling (debajo del globo) ---------- */
  .am-scrolldown{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:8;
    display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
    background:rgba(12,11,14,0.6);border:1px solid var(--line-strong);border-radius:20px;
    padding:7px 14px;color:var(--bone);font-family:var(--font-mono);font-size:9px;
    letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(3px);animation:sdBounce 2.4s ease-in-out infinite}
  .am-scrolldown:hover{border-color:var(--gold);color:var(--gold-bright)}
  .am-scrolldown .sd-arrow{font-size:12px;color:var(--accent)}
  @keyframes sdBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}
  @media(max-width:768px){ .am-scrolldown{bottom:64px} }

  .am-dash{position:relative;z-index:1;background:
      radial-gradient(ellipse 80% 50% at 50% 0%, var(--bg-warm) 0%, rgba(8,8,10,0) 55%), var(--bg);
    padding:0 0 60px;border-top:1px solid var(--line-strong)}
  .am-toglobe{position:sticky;top:14px;margin:14px auto 0;display:block;z-index:10;
    background:rgba(14,12,16,0.96);border:1px solid var(--line-strong);color:var(--gold-bright);
    font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    padding:8px 16px;cursor:pointer}
  .am-toglobe:hover{border-color:var(--gold);background:rgba(var(--accent-rgb),0.10)}
  .dash-sec{min-height:62vh;display:flex;align-items:center;justify-content:center;padding:54px 22px;
    opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
  .dash-sec.in{opacity:1;transform:none}
  .dash-in{width:100%;max-width:920px;margin:0 auto}
  .dash-eyebrow{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,4vw,40px);
    letter-spacing:.06em;color:var(--bone);text-transform:uppercase;margin-bottom:6px;
    text-shadow:0 0 18px rgba(var(--accent-rgb),0.25)}
  .dash-sub{font-family:var(--font-ui);font-weight:300;font-size:14px;color:var(--bone-dim);margin-bottom:26px;letter-spacing:.03em}
  .dash-h{font-family:var(--font-ui);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--bone);margin-bottom:14px}
  .dash-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--accent);
    border:1px solid var(--line-strong);padding:2px 6px;margin-left:6px;vertical-align:middle}
  /* KPIs grandes */
  .dash-kpis{display:flex;flex-wrap:wrap;gap:38px;margin-top:18px}
  .dash-kpi .v{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,7vw,76px);line-height:1;
    color:var(--accent);text-shadow:0 0 26px rgba(var(--accent-rgb),0.3)}
  .dash-kpi .l{font-family:var(--font-ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--bone-dim);margin-top:8px}
  /* columnas */
  .dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px}
  @media(max-width:768px){ .dash-cols{grid-template-columns:1fr;gap:28px} }
  /* barras */
  .dash-bars{display:flex;flex-direction:column;gap:7px}
  .dash-bar{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:13px}
  .dash-bar .bl{flex:none;width:118px;display:flex;align-items:center;gap:7px;color:var(--bone);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-bar .bt{flex:1;height:16px;background:rgba(255,255,255,0.04);position:relative;overflow:hidden}
  .dash-bar .bf{position:absolute;left:0;top:0;bottom:0;
    background:linear-gradient(90deg, rgba(var(--accent-rgb),0.5), var(--accent));transition:width .9s ease}
  .dash-bar .bv{flex:none;width:62px;text-align:right;font-family:var(--font-mono);font-size:11.5px;color:#cdd3da}
  /* ADN chips */
  .dash-adn{display:flex;flex-wrap:wrap;gap:8px}
  .dash-chip{display:flex;align-items:center;gap:8px;background:rgba(18,16,20,0.7);
    border:1px solid var(--line-strong);padding:7px 11px}
  .dash-chip .cc{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--bone-dim)}
  .dash-chip .cg{font-family:var(--font-ui);font-size:13px;color:var(--gold-bright);font-weight:500}
  .dash-chip .cn{font-family:var(--font-mono);font-size:10px;color:var(--bone-dim)}
  /* joyas / placeholder */
  .dash-joyas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
  .dash-jcard{background:rgba(18,16,20,0.7);border:1px solid var(--line-strong);padding:12px 13px}
  .dash-jcard .jn{font-family:var(--font-ui);font-size:14px;color:var(--bone);font-weight:500}
  .dash-jcard .jc{font-family:var(--font-mono);font-size:10px;color:var(--bone-dim);margin:3px 0 8px}
  .dash-jcard .jm{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:#cdd3da}
  .dash-jcard .jm b{color:var(--accent)}
  /* clickeable -> vuela al globo (cursor, hover, ícono ↗ discreto) */
  .dash-clk{cursor:pointer}
  .dash-clk:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
  .dash-go{color:var(--bone-dim);transition:color .15s,opacity .15s}
  .dash-bar.dash-clk{padding:0 5px;border-radius:2px;transition:background .15s,transform .15s}
  .dash-bar.dash-clk:hover{background:rgba(var(--accent-rgb),0.09);transform:translateX(3px)}
  .dash-bar .dash-go{flex:none;width:13px;text-align:center;font-size:11px;opacity:0}
  .dash-bar.dash-clk:hover .dash-go{opacity:1;color:var(--gold-bright)}
  .dash-chip.dash-clk{transition:border-color .15s,transform .15s,background .15s}
  .dash-chip.dash-clk:hover{border-color:var(--fire-hot);background:rgba(var(--accent-rgb),0.10);transform:translateY(-2px)}
  .dash-chip .dash-go{margin-left:1px;font-size:10px;opacity:.5}
  .dash-chip.dash-clk:hover .dash-go{opacity:1;color:var(--gold-bright)}
  .dash-jcard.dash-clk{position:relative;transition:border-color .15s,transform .15s,box-shadow .15s}
  .dash-jcard.dash-clk:hover{border-color:var(--fire-hot);transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,0.4)}
  .dash-jcard .dash-go{position:absolute;top:8px;right:9px;font-size:12px;opacity:.45}
  .dash-jcard.dash-clk:hover .dash-go{opacity:1;color:var(--gold-bright)}
  /* scatter bandas vs oyentes (SVG a mano) */
  .dash-scatter{width:100%;height:auto;display:block;margin-top:8px;overflow:visible}
  .dash-scatter .ax{stroke:rgba(255,255,255,0.12);stroke-width:1}
  .dash-scatter .grid{stroke:rgba(255,255,255,0.05);stroke-width:1}
  .dash-scatter .axlbl{fill:var(--bone-dim);font-family:var(--font-mono);font-size:9px;letter-spacing:.07em}
  .dash-pt circle{fill:rgba(var(--accent-rgb),0.45);stroke:rgba(var(--accent-rgb),0.7);stroke-width:1;transition:fill .15s,stroke .15s}
  .dash-pt.out circle{fill:var(--accent);stroke:var(--accent-bright,var(--accent))}
  .dash-pt .ptl{fill:var(--bone);font-family:var(--font-ui);font-size:10.5px;paint-order:stroke;stroke:rgba(0,0,0,0.7);stroke-width:2.4px}
  .dash-pt.dash-clk{cursor:pointer}
  .dash-pt.dash-clk:hover circle{fill:var(--fire-hot);stroke:var(--gold-bright)}
  .dash-pt.dash-clk:hover .ptl{fill:var(--gold-bright)}
  .dash-read{font-family:var(--font-ui);font-weight:300;font-size:12.5px;color:var(--bone-dim);margin-top:16px;letter-spacing:.02em;line-height:1.5}
  .dash-read b{color:var(--accent);font-weight:500}
  /* podio top 3 bandas */
  .dash-podio-top{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  @media(max-width:768px){ .dash-podio-top{grid-template-columns:1fr} }
  /* podio: filas compactas (puesto 4 en adelante) */
  .dash-poditems{display:flex;flex-direction:column;gap:6px;margin-top:12px}
  .dash-prow{display:flex;align-items:center;gap:12px;font-family:var(--font-ui);font-size:13px;
    background:rgba(18,16,20,0.55);border:1px solid var(--line-strong);padding:8px 12px;
    transition:border-color .15s,transform .15s,background .15s}
  .dash-prow .prk{flex:none;width:26px;text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--accent)}
  .dash-prow .prn{flex:1;min-width:0;color:var(--bone);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-prow .prc{flex:none;width:150px;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;
    color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-prow .prv{flex:none;width:80px;text-align:right;font-family:var(--font-mono);font-size:12px;color:#cdd3da}
  .dash-prow .dash-go{flex:none;width:13px;text-align:center;font-size:11px;opacity:0;color:var(--bone-dim)}
  .dash-prow.dash-clk:hover{border-color:var(--fire-hot);background:rgba(var(--accent-rgb),0.09);transform:translateX(3px)}
  .dash-prow.dash-clk:hover .dash-go{opacity:1;color:var(--gold-bright)}
  @media(max-width:768px){ .dash-prow .prc{width:84px} .dash-prow .prv{width:64px} }
  .dash-pcard{position:relative;background:rgba(18,16,20,0.7);border:1px solid var(--line-strong);
    padding:20px 16px;text-align:center;transition:border-color .15s,transform .15s,box-shadow .15s}
  .dash-pcard .pr{font-family:var(--font-display);font-weight:900;font-size:34px;line-height:1}
  .dash-pcard .pn{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--bone);margin:8px 0 5px;letter-spacing:.02em}
  .dash-pcard .pc2{font-family:var(--font-mono);font-size:10px;color:var(--bone-dim);display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px}
  .dash-pcard .pv{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--accent)}
  .dash-pcard .pvl{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);margin-top:3px}
  .dash-pcard.g1{border-color:rgba(212,175,55,0.55)} .dash-pcard.g1 .pr{color:#d4af37}
  .dash-pcard.g2{border-color:rgba(200,204,210,0.45)} .dash-pcard.g2 .pr{color:#c8ccd2}
  .dash-pcard.g3{border-color:rgba(184,115,51,0.45)} .dash-pcard.g3 .pr{color:#b87333}
  .dash-pcard.dash-clk:hover{border-color:var(--fire-hot);transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,0.4)}
  .dash-pcard .dash-go{position:absolute;top:8px;right:9px;font-size:12px;opacity:.45}
  .dash-pcard.dash-clk:hover .dash-go{opacity:1;color:var(--gold-bright)}
  /* "Ver más / Ver menos" incremental */
  .dash-more{display:flex;gap:10px;align-items:center;margin-top:14px}
  .dash-morebtn{font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    background:rgba(var(--accent-rgb),0.10);border:1px solid rgba(var(--accent-rgb),0.45);color:var(--gold-bright);
    padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s,border-color .15s,transform .15s}
  .dash-morebtn i{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--bone-dim)}
  .dash-morebtn span{font-size:13px}
  .dash-morebtn:hover{background:rgba(var(--accent-rgb),0.18);border-color:var(--accent);transform:translateY(-1px)}
  .dash-morebtn:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
  .dash-morebtn.ghost{background:transparent;border-color:var(--line-strong);color:var(--bone-dim)}
  .dash-morebtn.ghost:hover{border-color:var(--bone-dim);color:var(--bone)}
  /* barra de raíz (sin bandera): muestra un punto de color de acento */
  .dash-rootbar .bl{gap:9px}
  .dash-rootbar .rdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 8px rgba(var(--accent-rgb),0.6)}
  .dash-soon{border:1px dashed var(--line-strong);padding:26px;text-align:center;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
  .dash-soon b{color:var(--accent)}
  .dash-end{text-align:center}
  .dash-end-quote{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3.4vw,34px);
    color:var(--bone);letter-spacing:.04em;margin-bottom:16px}
  .dash-credit{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--bone-dim)}

  /* tooltip */
  #am-tip{
    position:fixed;z-index:60;pointer-events:none;display:none;
    background:var(--panel-solid);border:1px solid var(--line-strong);
    padding:9px 13px;min-width:120px;
  }
  #am-tip .tn{font-family:var(--font-disp);font-weight:700;font-size:13px;
    letter-spacing:.08em;color:var(--bone);text-transform:uppercase}
  #am-tip .tv{font-family:var(--font-mono);font-size:11px;color:var(--fire-hot);margin-top:3px}

  /* ---------- ELEMENTOS MÓVILES (ocultos en escritorio) ---------- */
  #am-canvas{touch-action:none}           /* el navegador no roba drag/pinch del globo */
  .am-mobnav{display:none}
  .am-sheet-handle{display:none}
  .am-sheet-close{display:none}
  .am-backdrop{display:none}
  .am-genwrap{display:contents}           /* en escritorio es transparente: layout idéntico */

  /* ---------- MÓVIL (≤768px): globo a full + paneles como bottom sheets ---------- */
  @media (max-width:768px){
    .am-stage{display:block;top:96px}   /* topbar de 2 líneas (marca/KPIs + buscador) */
    .am-col.center{position:absolute;inset:0;border:none}
    .am-resizer{display:none}            /* móvil: el panel es bottom-sheet, sin redimensionar */
    .am-col.left, .am-col.right{
      position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;
      height:76vh;max-height:76vh;
      background:var(--panel-solid);border:1px solid var(--line-strong);border-bottom:none;
      border-radius:16px 16px 0 0;transform:translateY(101%);
      transition:transform .34s cubic-bezier(.4,0,.2,1);
      box-shadow:0 -14px 44px rgba(0,0,0,0.66);overflow:hidden;
      display:flex;flex-direction:column;
    }
    .am-col.left.sheet-open, .am-col.right.sheet-open{transform:translateY(0)}
    .am-sheet-handle{display:block;width:42px;height:4px;border-radius:3px;
      background:var(--line-strong);margin:9px auto 0;flex-shrink:0}
    .am-sheet-close{display:flex;align-items:center;justify-content:center;
      position:absolute;right:10px;top:10px;width:34px;height:34px;z-index:2;
      background:rgba(18,16,20,0.9);border:1px solid var(--line-strong);border-radius:50%;
      color:var(--bone);font-size:18px;cursor:pointer}

    .am-backdrop{display:block;position:fixed;inset:0;z-index:50;
      background:rgba(0,0,0,0.55);opacity:0;pointer-events:none;transition:opacity .3s}
    .am-backdrop.show{opacity:1;pointer-events:auto}

    /* barra inferior de navegación */
    .am-mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;
      padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
      background:linear-gradient(0deg,rgba(8,8,10,0.96),rgba(8,8,10,0.25))}
    .am-mobnav button{flex:1;padding:13px 10px;background:rgba(18,16,20,0.92);
      border:1px solid var(--line-strong);color:var(--bone);font-family:var(--font-ui);
      font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
      display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
    .am-mobnav button .ic{color:var(--gold);font-size:13px}
    .am-mobnav button:active{background:rgba(var(--accent-rgb),0.14);border-color:var(--gold)}

    /* topbar compacta: marca+KPIs arriba, buscador a lo ancho en una 2ª línea */
    .am-top{padding:8px 14px;flex-wrap:wrap;row-gap:8px}
    .am-eyebrow{font-size:8px;letter-spacing:.28em}
    .am-wordmark{font-size:16px;letter-spacing:.12em}
    .am-kpis{gap:14px}
    .am-kpi .v{font-size:15px}
    .am-kpi .l{font-size:8px;letter-spacing:.14em}
    .am-search{order:3;flex-basis:100%;max-width:none;margin:0}
    .am-search-drop{max-height:70vh}
    .am-srccredit{display:none}   /* header compacto en móvil: el crédito queda en el cierre del dashboard */

    /* controles del globo más grandes/táctiles */
    .am-controls{left:10px;top:10px;gap:8px;flex-wrap:wrap;max-width:62vw}
    .am-ctrl{padding:12px 14px;font-size:12px}
    .am-legend{display:none}
    .am-overlay{left:10px;bottom:78px;max-width:64vw}
    .am-hint{font-size:9px;line-height:1.5}
    .am-mockchip{bottom:auto;top:54px;left:auto;right:10px;transform:none;font-size:8px;padding:5px 9px}
    /* selector de fuente: arriba de la barra inferior, sin el rótulo (ahorra espacio) */
    .am-tools{right:8px;bottom:calc(70px + env(safe-area-inset-bottom,0px));padding:5px}
    .am-fontpick label,.am-themepick label{display:none}
    .am-fontpick,.am-themepick{gap:6px;padding:5px 6px}
    .am-tools select{font-size:12px}

    /* paneles: contenido scrollable dentro del sheet */
    .am-panelhead{padding:6px 18px 8px}
    /* sheet de Géneros = UN solo scroll (lista + nota juntas), sin scroll anidado */
    .am-genwrap{display:flex;flex-direction:column;flex:1;min-height:0;
      overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:66px}
    .am-genres{flex:none;overflow:visible;max-height:none;padding-bottom:6px}
    .am-grow{padding:12px 12px}
    .am-grow .gname{font-size:15px}
    .am-grow .gcount{font-size:13px}
    .am-right-body{flex:1;min-height:0}
    #am-tree{min-height:300px}
    /* la ficha es UN solo contenedor de scroll (evita el scroll anidado que
       atrapaba el dedo en la lista de bandas y ocultaba ciudades) */
    .am-detail{height:100%;-webkit-overflow-scrolling:touch;padding-bottom:66px}  /* deja ver lo último sobre la nav */
    .am-bands{max-height:none;overflow:visible}      /* bandas fluyen inline */
    .am-band{padding:8px 10px}                        /* filas más altas: dedo */
    .am-band .bp{width:34px;height:34px;opacity:.7}   /* botones escuchar tocables */
    .am-band .bp svg{width:16px;height:16px}
    .am-genres{-webkit-overflow-scrolling:touch}
    .am-bsearch{position:sticky;top:0;z-index:1}      /* buscador queda a mano al expandir */
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important}
  }

  /* ===== FICHA DE BANDA (Prompt 3): drawer ancho en escritorio, sheet en móvil ===== */
  .am-ficha{
    position:fixed;top:0;right:0;height:100%;width:min(540px,92vw);
    background:var(--panel-solid);border-left:1px solid var(--line-strong);
    box-shadow:-28px 0 60px rgba(0,0,0,0.6);z-index:120;
    transform:translateX(102%);opacity:0;pointer-events:none;
    transition:transform .2s ease,opacity .2s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:18px 22px 40px;
  }
  .am-ficha.show{transform:translateX(0);opacity:1;pointer-events:auto}
  .am-ficha .am-sheet-handle{display:none}
  .am-ficha-close{position:sticky;top:0;float:right;z-index:2;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    background:rgba(18,16,20,0.92);border:1px solid var(--line-strong);border-radius:50%;
    color:var(--bone);font-size:16px;cursor:pointer}
  .am-ficha-close:hover{color:var(--gold-bright);border-color:var(--line-strong)}
  .am-ficha-body{clear:both}
  .fb-name{font-family:var(--font-disp);font-weight:700;font-size:22px;line-height:1.25;
    color:var(--text-hi);letter-spacing:.02em;white-space:normal;overflow-wrap:break-word;
    margin:2px 0 6px}
  .fb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px;
    font-family:var(--font-ui);font-size:12.5px;color:var(--bone-dim)}
  .fb-meta .am-flag{height:13px;width:auto;box-shadow:0 0 0 1px rgba(0,0,0,0.55)}
  .fb-citybtn{background:none;border:1px solid var(--line);border-radius:4px;color:var(--bone);
    font-family:var(--font-ui);font-size:12px;padding:3px 9px;cursor:pointer}
  .fb-citybtn:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
  .fb-status{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;padding:2px 8px;border:1px solid var(--line-strong);border-radius:3px;
    color:var(--accent)}
  .fb-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
  .fb-chip{background:rgba(var(--accent-rgb),0.1);border:1px solid var(--line-strong);
    color:var(--accent);font-family:var(--font-ui);font-size:11.5px;letter-spacing:.02em;
    padding:4px 10px;border-radius:20px;cursor:pointer}
  .fb-chip:hover{background:rgba(var(--accent-rgb),0.22);color:var(--gold-bright)}
  .fb-links{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
  .fb-links a,.fb-links button{display:inline-flex;align-items:center;gap:6px;color:var(--silver);
    text-decoration:none;border:1px solid var(--line);border-radius:4px;padding:5px 10px;
    font-family:var(--font-ui);font-size:12px;transition:color .15s,border-color .15s;
    background:none;cursor:pointer;line-height:1}
  .fb-links a:hover,.fb-links button:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
  .fb-links a svg,.fb-links button svg{width:13px;height:13px;fill:currentColor;display:block}
  .fb-sec{border-top:1px solid var(--line);padding:14px 0}
  .fb-sec:first-of-type{border-top:none}
  .fb-sec h3{font-family:var(--font-disp);font-weight:700;font-size:13px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--bone);margin:0 0 8px}
  .fb-line{font-family:var(--font-ui);font-size:13px;color:var(--bone);margin:0 0 6px}
  .fb-line b{color:var(--accent)}
  .fb-source{font-family:var(--font-mono);font-size:9.5px;color:var(--bone-dim);
    letter-spacing:.04em;margin-top:2px}
  .fb-bars{display:flex;flex-direction:column;gap:5px}
  .fb-bar-row{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:11.5px}
  .fb-bar-label{flex:0 0 auto;min-width:90px;color:var(--bone-dim);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fb-bar-track{flex:1;height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden}
  .fb-bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--gold-bright))}
  .fb-bar-n{flex:0 0 auto;font-family:var(--font-mono);font-size:10.5px;color:var(--bone-dim)}
  .am-ficha .am-bands{max-height:220px}
  @media (max-width:768px){
    .am-ficha{left:0;right:0;top:auto;bottom:0;width:auto;height:auto;max-height:88vh;
      border-left:none;border-top:1px solid var(--line-strong);border-radius:16px 16px 0 0;
      transform:translateY(102%);padding-top:0}
    .am-ficha.show{transform:translateY(0)}
    .am-ficha .am-sheet-handle{display:block;width:42px;height:4px;border-radius:3px;
      background:var(--line-strong);margin:9px auto 8px}
    .am-ficha-close{position:absolute;top:10px;right:10px}
  }

  /* =====================================================================
     P5 — LAYOUT A (tríptico): header · barra de filtros a todo el ancho ·
     riel de géneros | globo | panel con pestañas (Resumen / Banda) · dock.
     Decisiones y cómo revertirlas: docs/DECISIONES.md.
     --z escala los paneles en pantallas ≥2560 px (con 14 px a 1× no se lee).
     ===================================================================== */
  :root{--z:1;--left-w:248px;--right-w:400px;--gl:248px;--gt:106px;--gr:400px;--gb:0px}
  @media (min-width:2560px){ :root{--z:1.3;--right-w:520px} }
  .am-overlay{display:none}                     /* estado = barra de filtros; ayuda = "?" del dock */
  .am-railtog,.am-rtabs,.am-dock,.am-help{display:none}
  .am-ctrl .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

  /* Ajustes vive en el dock: cerrado por defecto, abre/cierra con transform+opacity */
  .am-tools{transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s}
  .am-tools:not(.dk-open){opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.97);
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}

  /* orden de la lista de bandas + nombres completos (sin "An…") */
  .am-bsort{display:flex;align-items:center;gap:4px;margin:0 0 6px;font-family:var(--font-ui);font-size:11px;color:var(--bone-dim)}
  .am-bsort span{margin-right:2px}
  .am-bsort button{background:none;border:1px solid var(--line);color:var(--bone-dim);font:inherit;padding:2px 8px;cursor:pointer}
  .am-bsort button:hover{color:var(--bone);border-color:var(--line-strong)}
  .am-bsort button.on{color:var(--gold-bright);border-color:var(--gold)}
  .am-band{content-visibility:auto;contain-intrinsic-size:auto 30px}   /* miles de filas: solo pinta lo visible */
  .am-band .bn{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

  @media (min-width:769px){
    .am-top{height:64px;padding-top:0;padding-bottom:0;zoom:var(--z)}
    .am-search{max-width:640px;margin:0 auto 0 28px}
    #am-search-in{padding-top:11px;padding-bottom:11px;font-size:14px}

    /* barra de filtros: fila propia a todo el ancho, siempre visible */
    .am-fbar{display:flex;position:absolute;left:0;right:0;top:64px;height:42px;zoom:var(--z);
      z-index:19;background:rgba(8,8,10,0.94)}
    .am-stage{top:calc(106px * var(--z));grid-template-columns:var(--left-w) 1fr var(--right-w);
      transition:grid-template-columns .22s ease}
    .am-col.left,.am-col.right{zoom:var(--z)}
    .has-fbar .am-controls{top:12px}
    .has-fbar .am-legend{top:auto}

    /* riel de géneros plegable a iniciales */
    .am-railtog{display:flex;align-items:center;gap:8px;flex:none;padding:10px 16px;background:none;border:0;
      border-top:1px solid var(--line);color:var(--bone-dim);font-family:var(--font-ui);font-size:12px;
      letter-spacing:.06em;cursor:pointer;text-align:left}
    .am-railtog:hover{color:var(--gold-bright)}
    .am-railtog .ic{font-size:14px;color:var(--gold)}
    .rail-min .am-col.left .am-panelhead,.rail-min .am-gfilter,.rail-min .am-allbtn,.rail-min .am-modebar,
    .rail-min .am-subs,.rail-min .am-col.left .am-note,.rail-min .am-railtog .lb{display:none!important}
    .rail-min .am-railtog{justify-content:center;padding:10px 0}
    .rail-min .am-genres{padding:8px 6px;scrollbar-width:none}
    .rail-min .am-grow{justify-content:center;padding:4px 0}
    .rail-min .am-grow>*{display:none}
    .rail-min .am-grow::before{content:attr(data-ab);width:34px;height:34px;display:grid;place-items:center;
      border:1px solid var(--line-strong);font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--gold)}
    .rail-min .am-grow.active::before{border-color:var(--fire-hot);color:var(--fire-hot);background:rgba(var(--accent-rgb),0.12)}

    /* controles del globo: columna de íconos arriba a la derecha; leyenda abajo a la derecha */
    .am-controls{left:auto;right:12px;top:12px;flex-direction:column;gap:2px}
    .am-ctrl{width:38px;height:38px;padding:0;justify-content:center}
    .am-ctrl .ic{font-size:14px}
    .am-legend{top:auto;bottom:14px;right:14px}

    /* dock de widgets (abajo a la izquierda del globo) */
    .am-globe-wrap{container:globe/inline-size}
    .am-dock{display:flex;position:absolute;left:12px;bottom:12px;z-index:9;zoom:var(--z);
      background:rgba(12,11,14,0.88);border:1px solid var(--line-strong)}
    .am-dk{position:relative;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:none;border:0;
      color:var(--bone-dim);font-family:var(--font-ui);font-size:12px;letter-spacing:.06em;cursor:pointer;white-space:nowrap}
    .am-dk+.am-dk{border-left:1px solid var(--line)}
    .am-dk .ic{font-size:14px;color:var(--gold)}
    .am-dk:hover:not(:disabled),.am-dk.on{color:var(--gold-bright)}
    .am-dk.on::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;
      background:var(--fire-hot);transform:translateX(-50%)}
    .am-dk:disabled{opacity:.45;cursor:default}
    #dk-ctx-l{max-width:190px;overflow:hidden;text-overflow:ellipsis}
    @container globe (max-width:900px){ .am-dk .lb{display:none} }

    .am-help{display:block;position:absolute;left:12px;bottom:58px;z-index:12;width:340px;max-width:calc(100% - 24px);zoom:var(--z);
      background:rgba(12,11,14,0.96);border:1px solid var(--line-strong);padding:14px 16px 10px;
      box-shadow:0 14px 40px rgba(0,0,0,0.6);font-family:var(--font-ui);font-size:12.5px;color:var(--bone);line-height:1.5;
      opacity:0;visibility:hidden;transform:translateY(8px);
      transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
    .am-help.show{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
    .am-help h3{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
    .am-help ul{margin:0;padding-left:16px}
    .am-help li{margin:0 0 5px}
    .am-help b{color:var(--gold-bright);font-weight:500}

    /* widgets flotantes: por defecto dentro del área del globo, nunca en el centro */
    body .am-ctx:not([data-snap]){left:calc(var(--gl) + 12px);top:calc(var(--gt) + 12px);right:auto;bottom:auto}
    .am-tools{left:calc(var(--gl) + 12px);bottom:calc(var(--gb) + 58px);right:auto;top:auto}
    .am-tv{top:calc(var(--gt) + 12px);right:calc(var(--gr) + 60px)}
    .am-ctx[data-snap],.am-tools[data-snap],.am-tv[data-snap]{top:auto!important;left:auto!important;right:auto!important;bottom:auto!important}
    .am-ctx[data-snap=tl],.am-tools[data-snap=tl],.am-tv[data-snap=tl]{left:calc(var(--gl) + 12px)!important;top:calc(var(--gt) + 12px)!important}
    .am-ctx[data-snap=tr],.am-tools[data-snap=tr],.am-tv[data-snap=tr]{right:calc(var(--gr) + 60px)!important;top:calc(var(--gt) + 12px)!important}
    .am-ctx[data-snap=bl],.am-tools[data-snap=bl],.am-tv[data-snap=bl]{left:calc(var(--gl) + 12px)!important;bottom:calc(var(--gb) + 58px)!important}
    .am-ctx[data-snap=br],.am-tools[data-snap=br],.am-tv[data-snap=br]{right:calc(var(--gr) + 12px)!important;bottom:calc(var(--gb) + 72px)!important}

    /* panel derecho: pestañas Resumen / Banda; la ficha de banda ocupa la columna, no el globo */
    .am-rtabs{display:flex;flex:none;border-bottom:1px solid var(--line)}
    .am-rtab{flex:1;min-width:0;background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px 6px;
      color:var(--bone-dim);font-family:var(--font-ui);cursor:pointer;text-align:center}
    .am-rtab .k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
    .am-rtab small{display:block;font-size:11px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
    .am-rtab:hover:not(:disabled){color:var(--bone)}
    .am-rtab.on{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}
    .am-rtab:disabled{opacity:.4;cursor:default}
    .am-ficha{top:calc((106px + 47px) * var(--z));bottom:0;height:auto;width:var(--right-w);
      box-shadow:none;border-left:1px solid var(--line);z-index:30;transform:translateX(24px)}
    .am-ficha.show{transform:none}
    body.ficha-tab-off .am-ficha.show{opacity:0;pointer-events:none;transform:translateX(24px)}
    .am-ficha-body,.am-ficha-close{zoom:var(--z)}
  }

  @media (min-width:769px){ .am-controls,.am-legend,.am-scrolldown{zoom:var(--z)} }
  @media (max-width:768px){
    /* el header móvil mide ~130 px (marca + buscador): globo, chips y controles empiezan debajo */
    .am-stage{top:var(--top-h,130px)}
    .am-fbar{top:var(--top-h,130px);z-index:19}
    /* ficha de banda (patrón B): hoja hasta el 58 % de alto, sobre la barra inferior; el globo sigue a la vista */
    .am-ficha{bottom:calc(58px + env(safe-area-inset-bottom,0px));max-height:52vh;z-index:72}
    /* una sola hoja a la vez: con la ficha de banda arriba, la hoja del país se esconde;
       tocar Géneros / Ficha / Mundo en la barra baja la ficha (ficha-tab-off) y muestra esa hoja */
    body.ficha-on .am-col.right.sheet-open{transform:translateY(101%)}
    body.ficha-on .am-backdrop{opacity:0;pointer-events:none}
    body.ficha-tab-off .am-ficha.show{transform:translateY(102%);pointer-events:none}
    /* hora y clima: arriba a la izquierda del globo, nunca sobre las hojas de abajo */
    body .am-ctx{left:8px;right:auto;bottom:auto;top:calc(var(--top-h,130px) + 8px)}
    .has-fbar .am-ctx{top:calc(var(--top-h,130px) + 50px)}
    .am-controls{left:auto;right:10px;top:10px;flex-direction:column;gap:4px;max-width:none}
    .am-ctrl{width:44px;height:44px;padding:0;justify-content:center}
    .am-ctrl .ic{font-size:15px}
    .has-fbar .am-controls{top:54px}
    /* barra inferior (patrón B): géneros, ficha, mundo + los widgets del dock */
    .am-mobnav{gap:2px;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));background:rgba(8,8,10,0.97);
      border-top:1px solid var(--line-strong)}
    .am-mobnav button{flex-direction:column;gap:2px;padding:6px 2px;font-size:9.5px;letter-spacing:.06em;border:0;background:none;min-width:0}
    .am-mobnav button .ic{font-size:16px}
    .am-mobnav button.on{color:var(--gold-bright)}
    .am-mobnav button:disabled{opacity:.4}
    .am-help{display:block;position:fixed;left:8px;right:8px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:75;
      background:rgba(12,11,14,0.97);border:1px solid var(--line-strong);padding:12px 14px 8px;
      font-family:var(--font-ui);font-size:13px;color:var(--bone);line-height:1.5;
      opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
    .am-help.show{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
    .am-help h3{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
    .am-help ul{margin:0;padding-left:16px}
    .am-help b{color:var(--gold-bright);font-weight:500}
    .am-tools{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
    .am-scrolldown{bottom:66px}
  }

  /* =====================================================================
     P5b — clúster de pines (insignia con nº de localidades) y abanico
     ===================================================================== */
  .am-pcl{position:absolute;left:0;top:0;min-width:22px;height:22px;margin:-11px 0 0 -11px;padding:0 5px;
    border-radius:11px;border:1px solid var(--gold);background:rgba(10,9,12,0.86);color:var(--gold-bright);
    font-family:var(--font-ui);font-size:11px;font-weight:600;line-height:20px;text-align:center;cursor:pointer;
    pointer-events:auto;box-shadow:0 0 0 3px rgba(0,0,0,0.35);transition:opacity .15s ease}
  .am-pcl:hover,.am-pcl:focus-visible{background:var(--gold);color:#0a090c;outline:none}
  .am-spider{position:absolute;inset:0;pointer-events:none}
  .am-spider-l{position:absolute;left:0;top:0}
  .am-spider-l line{stroke:var(--gold);stroke-width:1;stroke-opacity:.7}
  .am-spider-b{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;margin:-12px 0 0 -6px;height:24px;
    padding:0 8px 0 4px;background:rgba(10,9,12,0.92);border:1px solid var(--line-strong);color:var(--bone);
    font-family:var(--font-ui);font-size:12px;white-space:nowrap;cursor:pointer;pointer-events:auto}
  .am-spider-b.r{flex-direction:row-reverse;padding:0 4px 0 8px;translate:calc(-100% + 12px) 0}
  .am-spider-b i{width:8px;height:8px;border-radius:50%;background:var(--fire-hot);box-shadow:0 0 6px var(--fire-hot);flex:none}
  .am-spider-b b{font-weight:500;color:var(--gold-bright)}
  .am-spider-b:hover,.am-spider-b:focus-visible{border-color:var(--gold);color:var(--gold-bright);outline:none}
  @media (max-width:768px){ .am-pcl{min-width:28px;height:28px;margin:-14px 0 0 -14px;line-height:26px;font-size:12px}
    .am-spider-b{height:32px;margin-top:-16px;font-size:13px} }

  /* =====================================================================
     P6 — integración con ichisieben.dev: "← IchiSieben" primero, GitHub, pie del demo
     ===================================================================== */
  .am-eyebrow .am-hub{color:var(--gold-bright);text-decoration:none;padding:6px 0;margin:-6px 0}
  .am-eyebrow .am-hub:hover,.am-eyebrow .am-hub:focus-visible{text-decoration:underline;text-underline-offset:3px;outline:none}
  .am-gh{align-self:center;display:grid;place-items:center;width:30px;height:30px;flex:none;color:var(--bone-dim);
    border:1px solid var(--line-strong);border-radius:6px;opacity:.85}
  .am-gh:hover,.am-gh:focus-visible{color:var(--gold-bright);border-color:var(--gold);opacity:1;outline:none}
  .dash-demo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;margin-top:18px;
    font-family:var(--font-ui);font-size:13px;letter-spacing:.04em}
  .dash-demo a{color:var(--bone-dim);text-decoration:none;border-bottom:1px solid var(--line-strong);padding:4px 0}
  .dash-demo a:hover,.dash-demo a:focus-visible{color:var(--gold-bright);border-color:var(--gold);outline:none}
  .dash-demo .dash-beta{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
    border:1px solid var(--gold);padding:1px 6px}
  @media (max-width:768px){ .am-gh{width:34px;height:34px} .am-eyebrow .am-hub{padding:10px 0;margin:-10px 0} }
  .fb-share{flex-shrink:0;background:transparent;border:1px solid var(--line-strong);color:var(--bone-dim);cursor:pointer;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;margin-right:6px}
  .fb-share:hover,.fb-share:focus-visible{color:var(--gold-bright);border-color:var(--gold);outline:none}
  .fb-share.ok{color:var(--gold-bright);border-color:var(--gold)}
  @media (max-width:768px){ .fb-share{display:none} }   /* en el teléfono se comparte con el menú del navegador */

  /* ===== P7: tutorial de entrada (componente compartido ./tutorial/) con la paleta del sitio ===== */
  .ic7-tutorial-root{--tut-bg:#0d0c0b;--tut-fg:var(--bone,#e8e2d6);--tut-dim:var(--bone-dim);--tut-line:var(--line-strong);
    --tut-accent:var(--accent,#c9a44a);--tut-font:var(--font-ui);--tut-mono:var(--font-mono);--tut-z:200}
  .ic7-tutorial-spot{box-shadow:0 0 0 9999px rgb(0 0 0 / .62),0 0 22px rgba(var(--accent-rgb),.32)}
  .ic7-tutorial-title{font-family:var(--font-display);font-weight:700;letter-spacing:.03em;color:var(--gold-bright)}
  .ic7-tutorial-body p{margin:0 0 6px}
  .ic7-tutorial-body b{color:var(--gold-bright);font-weight:500}
  .ic7-tutorial-next{color:#0a0908 !important}
  .am-help-tour{margin-top:10px;background:transparent;border:1px solid var(--line-strong);color:var(--gold-bright);cursor:pointer;
    font-family:var(--font-ui);font-size:12px;letter-spacing:.06em;padding:5px 12px;border-radius:4px}
  .am-help-tour:hover,.am-help-tour:focus-visible{border-color:var(--gold);background:rgba(var(--accent-rgb),.1);outline:none}

  /* tooltips de controles no obvios: un globo fijo (js/onboarding.js) */
  .am-dtip{position:fixed;left:0;top:0;z-index:150;max-width:260px;pointer-events:none;
    background:#0d0c0b;border:1px solid var(--line-strong);color:var(--bone);border-radius:4px;
    font-family:var(--font-ui);font-weight:300;font-size:12px;line-height:1.4;padding:6px 9px;
    opacity:0;visibility:hidden;transition:opacity .12s ease}
  .am-dtip.show{opacity:1;visibility:visible}
  .am-legend[data-tip]{pointer-events:auto;cursor:help}
  .am-legend:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
  @media (prefers-reduced-motion:reduce){ .am-dtip{transition:none} }
  /* en el teléfono la tarjeta del tour es hoja inferior: se apoya SOBRE la barra de navegación, no encima */
  @media (max-width:560px){ .ic7-tutorial-card{bottom:calc(68px + env(safe-area-inset-bottom,0px))} }

  /* ===== P8b: pestaña Escena en la ficha de país ===== */
  .am-dtabs{display:flex;gap:2px;margin:0 18px;border-bottom:1px solid var(--line)}
  .am-dtabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--bone-dim);
    font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;padding:9px 6px 7px;cursor:pointer}
  .am-dtabs button:hover{color:var(--bone)}
  .am-dtabs button.on{color:var(--gold);border-bottom-color:var(--gold)}
  .am-dtabs button:focus-visible{outline:1px solid var(--gold);outline-offset:-2px}
  .am-detail.esc-on > .am-dsec{display:none}
  .am-escena{padding:4px 18px 18px;font-family:var(--font-ui);color:var(--bone);font-size:13px;line-height:1.5}
  .am-escena[hidden]{display:none}
  .esc-cov{margin:12px 0 4px;padding:10px 12px;border:1px solid var(--line);border-left:2px solid var(--gold);background:rgba(var(--accent-rgb),.04)}
  .esc-cov p{margin:0 0 6px;font-size:12px;color:var(--bone-dim)}
  .esc-cov p:last-child{margin:0}
  .esc-cov b{color:var(--bone);font-weight:500}
  .esc-sec{padding:14px 0 4px;border-bottom:1px solid var(--line)}
  .esc-sec:last-of-type{border-bottom:0}
  .esc-sec h3{font-family:var(--font-ui);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
  .esc-badge{font-family:var(--font-mono);font-size:9px;letter-spacing:0;text-transform:none;color:var(--bone-dim);
    border:1px solid var(--line-strong);padding:0 5px;margin-left:6px;vertical-align:1px}
  .esc-mom{list-style:none;margin:0;padding:0 0 0 2px;border-left:1px solid var(--line-strong)}
  .esc-mom li{display:flex;gap:10px;padding:0 0 9px 12px;position:relative}
  .esc-mom li::before{content:"";position:absolute;left:-4px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
  .esc-y{font-family:var(--font-mono);font-size:11px;color:var(--gold);min-width:38px;padding-top:1px}
  .esc-t{flex:1}
  .esc-b{background:none;border:0;padding:0;color:var(--bone);font:inherit;font-weight:500;cursor:pointer;
    text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
  .esc-b:hover,.esc-b:focus-visible{color:var(--gold-bright);text-decoration-color:currentColor}
  .esc-tl{width:100%;height:auto;display:block}
  .esc-grid{stroke:var(--line);stroke-width:1}
  .esc-ax{font-family:var(--font-mono);font-size:8.5px;fill:var(--bone-dim)}
  .esc-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 2px;font-size:11px;color:var(--bone-dim)}
  .esc-leg i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px}
  .esc-note{font-family:var(--font-mono);font-size:9.5px;line-height:1.55;color:var(--bone-dim);margin:6px 0 8px}
  .esc-pio{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px}
  .esc-pio h4{margin:0 0 4px;font-weight:500;font-size:12px;color:var(--bone)}
  .esc-pio h4 small{color:var(--bone-dim);font-weight:400;font-size:10px;margin-left:4px}
  .esc-pio ol{list-style:none;margin:0;padding:0}
  .esc-pio li{display:grid;grid-template-columns:34px 1fr;gap:6px;align-items:baseline;font-size:12px;padding:1px 0}
  .esc-pio li small{color:var(--bone-dim);font-size:10.5px}
  .esc-ce{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 8px;font-size:12px}
  .esc-ce dt{font-family:var(--font-mono);color:var(--gold);font-size:11px}
  .esc-ce dd{margin:0;color:var(--bone)}
  .esc-ce b{color:var(--bone-dim);font-weight:400}
  .esc-est{display:flex;height:10px;gap:1px;margin:2px 0 8px}
  .esc-est span{min-width:2px}
  .esc-est .a,.esc-estl i.a{background:var(--gold)}
  .esc-est .s,.esc-estl i.s{background:#7A1F1A}
  .esc-est .p,.esc-estl i.p{background:#8C6A3F}
  .esc-est .c,.esc-estl i.c{background:#6E737A}
  .esc-est .u,.esc-estl i.u{background:#3A3632}
  .esc-estl{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;font-size:12px;color:var(--bone-dim)}
  .esc-estl i{display:inline-block;width:8px;height:8px;margin-right:6px}
  .esc-estl b{color:var(--bone);font-weight:500}
  .esc-estl small{font-size:10px;white-space:nowrap}
  .esc-temas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
  .esc-temas li{border:1px solid var(--line-strong);padding:2px 8px;font-size:12px}
  .esc-temas b{color:var(--gold);font-weight:500;font-size:11px;margin-left:3px}
  .esc-src,.esc-load,.esc-empty,.esc-fall{font-size:12px;color:var(--bone-dim);margin:12px 0 0}
  .esc-fall{margin:10px 0 0;padding:6px 10px;border:1px dashed var(--line-strong)}
  .esc-src{font-family:var(--font-mono);font-size:9.5px}

/* P12 — ficha de género */
  .am-genrecard{padding:10px 14px;border-bottom:1px solid var(--line);max-height:46%;overflow-y:auto;flex-shrink:0;
    font-family:var(--font-ui);font-size:12.5px;color:var(--bone);background:var(--panel)}
  .am-genrecard[hidden]{display:none}
  .fg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .fg-tit{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-hi);min-width:0;overflow-wrap:anywhere}
  .fg-toggle{flex-shrink:0;background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--font-ui);font-size:11px;
    letter-spacing:.08em;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
  .fg-toggle:hover{color:var(--accent-bright)}
  .fg-en{font-size:11.5px;font-weight:300;color:var(--bone-dim);margin-top:2px}
  .fg-meta{font-size:11.5px;font-weight:300;letter-spacing:.04em;color:var(--bone-dim);margin-top:4px}
  .fg-figs{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 6px;font-size:12px;color:var(--bone-dim)}
  .fg-figs b{font-family:var(--font-mono);font-weight:600;color:var(--text-hi)}
  .fg-top{margin:4px 0 8px}
  .fg-row{cursor:pointer}
  .fg-row:hover .n{color:var(--accent-bright)}
  .fg-row:focus-visible,.fg-chip:focus-visible,.fg-toggle:focus-visible,.fg-forja:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
  .fg-lin{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:6px}
  .fg-k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
  .fg-chips{display:flex;flex-wrap:wrap;gap:5px}
  .fg-chip{font-family:var(--font-ui);font-size:11.5px;line-height:1.3;color:var(--bone);background:none;
    border:1px solid var(--line-strong);border-radius:999px;padding:2px 9px}
  button.fg-chip{cursor:pointer}
  button.fg-chip:hover{background:rgba(var(--accent-rgb),.14);color:var(--text-hi)}
  .fg-chip.off{opacity:.55;cursor:default}
  .fg-toks{margin:8px 0 0}
  .fg-forja{font-size:11.5px;letter-spacing:.04em;color:var(--accent);text-underline-offset:3px}
  .fg-forja:hover{color:var(--accent-bright)}
  .fg-sem{margin-top:8px;font-size:12px;color:var(--bone)}
  .fg-sem .fg-k{display:block;margin-bottom:2px}
  .fg-desc{margin:8px 0 0;font-weight:300;font-size:12.5px;line-height:1.5;color:var(--bone)}
  .fg-src{margin-top:8px;font-size:11px;color:var(--bone-dim)}
  .fg-src a{color:var(--accent);text-underline-offset:3px}
  .fg-src a:hover{color:var(--accent-bright)}
  .fg-conf{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--line-strong);border-radius:999px;
    font-family:var(--font-mono);font-size:10px;color:var(--bone-dim)}
  @media (max-width:480px){
    .am-genrecard{padding:8px 12px}
    .fg-tit{font-size:13.5px;letter-spacing:.1em}
  }