:root{
    /* Tinta de biblioteca · Marfil de códice · Oro viejo */
    --bg:#0f1116; --panel:#161923; --panel2:#131620; --edge:#272c3a; --edge2:#323848;
    --ink:#e9e6da; --mut:#8e93a6;
    --acc:#c9a34e; --acc-ink:#171308;
    --core:#6ea8ff; --canon:#9a8cff; --ok:#57b87f; --no:#d96459;
    --seal:#c9a34e;
    --r:10px; --rs:7px;
    --display:"Cinzel",Georgia,serif;
    --body:"Alegreya Sans",system-ui,Segoe UI,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html{color-scheme:dark}
  body{margin:0;font:16px/1.55 var(--body);background:var(--bg);color:var(--ink);
       display:grid;grid-template-columns:0 minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
  body:has(#tabs:not(.hidden)){grid-template-columns:212px minmax(0,1fr)}

  /* ── Índice del grimorio (navegación lateral) ─────────────────────────── */
  nav#tabs{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;gap:2px;
    padding:18px 12px;background:var(--panel2);border-right:1px solid var(--edge);
    position:sticky;top:0;height:100vh;overflow-y:auto}
  nav .brand{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.14em;
    color:var(--acc);padding:2px 10px 14px;user-select:none}
  nav .grp{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--mut);
    text-transform:uppercase;margin:14px 10px 4px;user-select:none}
  nav .grp:first-of-type{margin-top:2px}
  nav button{display:block;width:100%;text-align:left;background:transparent;border:none;
    border-left:2px solid transparent;border-radius:0 var(--rs) var(--rs) 0;
    color:var(--mut);padding:8px 12px;font-size:15px}
  nav button:hover{color:var(--ink);background:rgba(255,255,255,.03)}
  nav button.on{color:var(--ink);border-left-color:var(--acc);
    background:linear-gradient(90deg,rgba(201,163,78,.12),transparent 70%);font-weight:500}

  /* ── Cabecera fina, sellada por el mundo activo ───────────────────────── */
  header{grid-column:2;display:flex;align-items:center;gap:14px;padding:10px 22px;
    background:var(--panel);border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:5}
  header::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
    background:linear-gradient(90deg,var(--seal),transparent 55%);opacity:.9}
  header h1{display:none}
  .ai-eng{font-family:var(--mono);font-size:11.5px;padding:3px 9px;border-radius:999px;
    border:1px solid var(--edge);cursor:default;white-space:nowrap;user-select:none}
  .ai-eng.opt{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--edge))}
  .ai-eng.free{color:#e0b24a;border-color:#7a5c1e}
  .ai-eng.loc{color:var(--mut)}
  .grow{flex:1}
  #who{font-family:var(--mono);font-size:12.5px;color:var(--mut)}
  #worldbox label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--mut)}
  .seal{width:11px;height:11px;background:var(--seal);border-radius:2px;
    transform:rotate(45deg);box-shadow:0 0 0 3px color-mix(in srgb,var(--seal) 22%,transparent);
    flex:0 0 auto}
  .seal.pulse{animation:seal .5s ease}
  @keyframes seal{40%{box-shadow:0 0 0 8px color-mix(in srgb,var(--seal) 30%,transparent)}}

  .sysgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
  @media (max-width:820px){.sysgrid{grid-template-columns:1fr}}

  /* Elegir foto/dibujo de un mapa de ciudad (§1.2, F1 09-08-2026): dos columnas en
     escritorio, una sola en móvil — mismo criterio que .sysgrid de arriba. */
  .locvistagrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  @media (max-width:820px){.locvistagrid{grid-template-columns:1fr}}

  /* ── Controles ────────────────────────────────────────────────────────── */
  select,input,textarea,button{font:inherit;color:var(--ink);background:var(--panel2);
    border:1px solid var(--edge);border-radius:var(--rs);padding:7px 11px}
  input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--mut) 70%,transparent)}
  select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
    outline:2px solid var(--acc);outline-offset:1px}
  button{cursor:pointer;background:#1d2230;transition:border-color .12s,background .12s}
  button:hover{border-color:var(--edge2)}
  button.acc{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:700}
  button.acc:hover{background:#d6b263}
  button.ok{background:var(--ok);color:#08130c;border-color:var(--ok);font-weight:600}
  button.no{background:var(--no);color:#170a08;border-color:var(--no);font-weight:600}
  button:disabled{opacity:.5;cursor:default}

  /* ── Escenario ────────────────────────────────────────────────────────── */
  main{grid-column:2;padding:26px clamp(20px,3vw,48px) 60px;
    width:100%;margin:0}
  /* Rejilla adaptativa: las tarjetas fluyen en 1·2·3 columnas según el ancho */
  .grid-cards{display:grid;gap:12px;
    grid-template-columns:repeat(auto-fill,minmax(420px,1fr));align-items:start}
  .grid-cards .card{margin:0}
  .grid-cards .empty{grid-column:1/-1}
  .view{animation:enter .18s ease}
  @keyframes enter{from{opacity:0;transform:translateY(4px)}}
  h2.vt{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:.1em;
    color:var(--ink);margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--edge);
    text-transform:uppercase}
  h2.vt small{display:block;font-family:var(--body);font-size:13.5px;letter-spacing:0;
    text-transform:none;color:var(--mut);font-weight:400;margin-top:2px}
  .panel{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);
    padding:18px;margin:16px 0}
  .mut{color:var(--mut)}
  /* Arrastrar lugares en el árbol de Localizaciones (10-08-2026) — resalta la fila sobre
     la que se puede soltar; `[draggable]` de la propia fila ya trae el cursor de agarre. */
  [draggable="true"]{cursor:grab}
  .loc-drop-ok{outline:2px solid var(--acc);outline-offset:-2px;background:color-mix(in srgb,var(--acc) 10%,transparent)}
  .pill{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:20px;
    border:1px solid var(--edge2);color:var(--mut)}
  .core{color:var(--core);border-color:color-mix(in srgb,var(--core) 55%,transparent)}
  .canon{color:var(--canon);border-color:color-mix(in srgb,var(--canon) 55%,transparent)}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .card{border:1px solid var(--edge);border-left:2px solid var(--edge2);
    border-radius:var(--rs);padding:11px 14px;margin:9px 0;background:var(--panel2)}
  .card:hover{border-left-color:var(--acc)}
  /* Pasos numerados del editor de campañas (15-08-2026) — señalización visual del orden
     premisa→esquema→biblia→arco→progreso, sin ocultar ningún paso (spec/Canonhold-panel-
     campanas-pasos-numerados-diseno-2026-08-15.md). */
  .camps-step{border-top:1px solid var(--edge);padding-top:10px;margin-top:12px}
  .camps-step:first-child{border-top:none;padding-top:0;margin-top:0}
  .camps-step-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .camps-step-num{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
    color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 45%,var(--edge));
    border-radius:20px;padding:2px 9px}
  .camps-step-status.is-done{color:var(--ok)}
  .camps-step-status.is-empty{color:var(--mut)}
  .card h3{margin:0 0 4px;font-size:16px;font-weight:700}
  .tag{font-family:var(--mono);font-size:10.5px;color:var(--mut);margin-right:6px}
  .k{color:var(--mut);font-size:12.5px}
  a.link{color:var(--core);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  code{font-family:var(--mono);font-size:.86em;background:#0c0e13;padding:1px 5px;
    border-radius:4px;color:var(--acc)}
  label{color:var(--mut)}

  /* ── Chat: la mesa habla ──────────────────────────────────────────────── */
  .msg{margin:10px 0;padding:11px 14px;border-radius:var(--r);max-width:min(80ch,82%);line-height:1.55}
  .me{background:linear-gradient(180deg,#20293e,#1b2334);margin-left:auto;
    border:1px solid #2c3854;border-bottom-right-radius:3px}
  .bot{background:var(--panel2);border:1px solid var(--edge);border-left:2px solid var(--acc);
    border-bottom-left-radius:3px}

  /* ── Chat compacto: a todo el ancho (08-08-2026, se quitó la columna de contexto —
     repetía entidades que ya son clicables dentro del propio texto de la respuesta) ── */
  #v-chat:not(.hidden){display:flex;flex-direction:column}
  #v-chat .chat-shell{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
  #v-chat .chat-main{display:flex;flex-direction:column;margin:16px 0 0}
  #v-chat #chatlog{min-height:240px;max-height:62vh;overflow-y:auto;margin:12px 0;padding-right:4px}
  #v-chat .chat-input{flex:0 0 auto}

  .hidden{display:none}
  #loginbox.hidden{display:none}

  /* Estados vacíos: una invitación a actuar, no un hueco */
  .empty{border:1px dashed var(--edge2);border-radius:var(--r);padding:26px 18px;
    margin:10px 0;text-align:center;color:var(--mut)}
  .empty::before{content:"";display:block;width:9px;height:9px;margin:0 auto 12px;
    background:var(--edge2);transform:rotate(45deg);border-radius:2px}
  .empty b{display:block;color:var(--ink);font-weight:700;margin-bottom:3px}
  .empty button{margin-top:12px}
  #chatlog:empty{border:1px dashed var(--edge2);border-radius:var(--r);
    display:flex;align-items:center;justify-content:center;color:var(--mut);
    padding:26px 18px;text-align:center}
  #chatlog:empty::before{content:"El mundo espera tu primera pregunta — por un personaje, un lugar, una regla o un resumen de la campaña."}

  /* Subbloque secundario dentro de un panel (p.ej. crear mesa) */
  .sub{border-top:1px solid var(--edge);margin-top:14px;padding-top:12px}
  .sub .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--mut);margin-right:4px}
  .mdbody{margin:6px 0}
  .mdbody p{margin:7px 0;line-height:1.55}
  .mdbody .mdh{font-weight:700;margin:13px 0 4px;line-height:1.3}
  .mdbody .mdh1,.mdbody .mdh2{font-size:1.07em;letter-spacing:.02em}
  .mdbody .mdh3,.mdbody .mdh4,.mdbody .mdh5,.mdbody .mdh6{font-size:1em;color:var(--acc)}
  .mdbody ul,.mdbody ol{margin:6px 0 6px 22px;padding:0}
  .mdbody li{margin:4px 0;line-height:1.5}
  .mdbody strong{color:#f4f1e6}

  /* ── Portada (login) ──────────────────────────────────────────────────── */
  #loginbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(60% 50% at 50% 32%,#181c28 0%,var(--bg) 70%)}
  #loginbox .gate{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
    padding:34px 36px 30px;width:min(360px,92vw);text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,.45)}
  #loginbox .gate::before{content:"";display:block;width:13px;height:13px;margin:0 auto 16px;
    background:var(--acc);transform:rotate(45deg);border-radius:2px;
    box-shadow:0 0 0 4px rgba(201,163,78,.18)}
  #loginbox h1{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.2em;
    color:var(--acc);margin:0 0 2px;display:block}
  #loginbox .sub{color:var(--mut);font-size:14px;margin-bottom:20px}
  #loginbox input{display:block;width:100%;margin:9px 0;padding:10px 12px}
  #loginbox button{width:100%;margin-top:12px;padding:10px}

  /* ── Móvil: el índice pasa a raíl superior ────────────────────────────── */
  @media (max-width:860px){
    body,body:has(#tabs:not(.hidden)){grid-template-columns:1fr}
    nav#tabs{grid-column:1;grid-row:2;flex-direction:row;align-items:center;height:auto;
      position:sticky;top:0;overflow-x:auto;padding:8px 10px;border-right:none;
      border-bottom:1px solid var(--edge);gap:4px}
    nav .brand,nav .grp{display:none}
    nav button{width:auto;white-space:nowrap;border-left:none;border-bottom:2px solid transparent;
      border-radius:var(--rs) var(--rs) 0 0}
    nav button.on{border-left:none;border-bottom-color:var(--acc);background:transparent}
    header{grid-column:1;grid-row:1;flex-wrap:wrap;row-gap:6px}
    main{grid-column:1;grid-row:3;padding:16px 14px 50px}
    .msg{max-width:94%}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  /* Lore oficial del sistema (no propio del mundo): se pinta de otro color en el chat */
  .lore-off{color:var(--offlore,#79b8ff)}
  .lore-off strong,.lore-off em,.lore-off li,.lore-off p,.lore-off b{color:inherit}
  /* Nombre de una entidad del Core mencionado en el texto del chat: clicable, abre el
     popup de ficha+relaciones (graphPopup), "ver en el grafo" (05-08-2026, encargo de Luis). */
  .entlink{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
  .entlink:hover{color:var(--core,#7ee787)}

  /* ── Diagrama de árbol (CAMPAÑA y MISIÓN suelta) ───────────────────────────
     web/app-arbol.js genera un bloque Mermaid y lo renderiza con la librería Mermaid
     (CDN, index.html) — hace su propio layout de grafo; aquí solo el contenedor del
     SVG que devuelve, que puede salir más ancho que el panel. */
  .arbol-mermaid{overflow-x:auto}
  .arbol-mermaid svg{max-width:none}

  /* ── Papel ────────────────────────────────────────────────────────────────
     Canonhold no se toca durante la partida, así que lo que produce tiene que
     poder salir en papel. En vez de pelearse con el CSS de la aplicación panel
     por panel, se pinta una copia limpia en #printbox (oculto en pantalla) y se
     imprime solo eso: tinta negra sobre blanco, sin menús ni botones. */
  #printbox{display:none}
  @media print{
    @page{margin:18mm 16mm}
    html{background:#fff;color-scheme:light}
    body{display:block!important;background:#fff;color:#000}
    /* Se oculta TODO hijo directo de <body> y se reabre solo la hoja: así un panel,
       un aviso o una ventana flotante que se añada mañana no se cuela en el papel. */
    body>*{display:none!important}
    body>#printbox{display:block!important}
    #printbox{font:11.5pt/1.45 var(--body);color:#000}
    #printbox h1{font-family:var(--display);font-size:20pt;line-height:1.2;margin:0 0 2mm;color:#000}
    #printbox .pmeta{font-size:9.5pt;color:#444;border-bottom:.6pt solid #999;padding-bottom:2mm;margin-bottom:5mm}
    #printbox .mdh{font-family:var(--display);font-weight:600;color:#000;
      margin:5mm 0 1.5mm;page-break-after:avoid;break-after:avoid}
    #printbox .mdh1{font-size:15pt} #printbox .mdh2{font-size:13pt}
    #printbox .mdh3{font-size:11.5pt} #printbox .mdh4,#printbox .mdh5,#printbox .mdh6{font-size:11pt}
    #printbox p{margin:0 0 2.5mm;orphans:3;widows:3}
    #printbox ul,#printbox ol{margin:0 0 2.5mm 7mm;padding:0}
    #printbox li{margin:0 0 1mm}
    /* En pantalla las negritas y los subtítulos van en marfil y oro; en papel eso
       sale gris pálido y casi no se lee. Todo a tinta negra. */
    #printbox strong,#printbox b,#printbox em,#printbox i,#printbox code{color:#000}
    #printbox code{font-family:var(--mono);font-size:.92em}
    #printbox .lore-off{color:#000;font-style:italic}
    #printbox .pfoot{margin-top:7mm;border-top:.6pt solid #999;padding-top:2mm;
      font-size:8.5pt;color:#555}
  }