/* ============================================================
   Codex de campaña — sistema de diseño
   Todo sale de la escala de abajo. Si algo necesita un valor
   que no está acá, primero revisá si el token correcto ya existe.
   ============================================================ */

:root{
  /* ---- superficies ---- */
  --bg:#0D1015; --bg2:#11151C; --surf:#171C25; --surf2:#1E242F; --surf3:#28303E;
  --line:#262E3B; --line2:#39445A;

  /* ---- tinta (4 niveles, nada más) ---- */
  --ink:#EDE7DA;      /* títulos y texto principal   */
  --ink2:#D6D0C4;     /* prosa                        */
  --muted:#95A1B4;    /* secundario                   */
  --dim:#68758B;      /* terciario, metadatos         */

  /* ---- acentos por tipo ---- */
  --character:#E0B25C; --location:#4FB795; --item:#B48BD8;
  --faction:#E0696E;   --creature:#6F9AD6; --gold:#E0B25C;
  --gm:#E8C572;        /* el Máster: dorado más claro que el del sistema */

  /* ---- espaciado: múltiplos de 4 ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px;

  /* ---- altura de controles ---- */
  --h-chip:28px;   /* chips informativos, no interactivos */
  --h-sm:32px;     /* botones chicos: filtros, leyenda, segmento */
  --h-ic:36px;     /* botones cuadrados de ícono */
  --h-md:44px;     /* barra superior: atrás, buscador, desplegable */
  --h-lg:48px;     /* botones de ancho completo */

  /* ---- tipografía ---- */
  --disp:'Spectral',Georgia,serif;
  --title:'Cinzel',Georgia,serif;
  --body:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --f-xs:11px;   /* rótulos mono, eyebrows, chips */
  --f-sm:12px;   /* metadatos */
  --f-cap:13px;  /* subtítulos, snippets */
  --f-md:15px;   /* texto de interfaz, botones, nombres */
  --f-base:16px; /* prosa y campos */
  --f-h2:20px;
  --f-h1:28px;
  --lh-tight:1.2; --lh-snug:1.45; --lh-body:1.7;
  --track:.18em;  /* letter-spacing de los rótulos en versalitas */

  /* ---- radios ---- */
  --r1:8px; --r2:12px; --r3:16px; --r4:20px; --rf:999px;

  /* ---- otros ---- */
  --appmax:560px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  /* onda de los rótulos de sección: un período de 18px que se repite en x.
     Va como máscara, así toma el color del rótulo (gris o el del tipo). */
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M0 4.5q4.5-5 9 0t9 0' fill='none' stroke='%23000' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E");
  --navh:calc(72px + env(safe-area-inset-bottom));
  --toph:calc(68px + env(safe-area-inset-top));   /* alto de la barra superior */
  --gut:var(--s4);          /* margen lateral de página */
}
@media(min-width:680px){:root{--appmax:720px;--gut:var(--s6);--f-h1:32px}}
@media(min-width:960px){:root{--appmax:960px}}
@media(min-width:1300px){:root{--appmax:1140px}}

/* los pseudo-elementos también: si no, un ::after con borde mide más de lo que
   declara y termina descentrado respecto de lo que debería acompañar */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:var(--f-base); line-height:var(--lh-snug);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% -180px, rgba(224,178,92,.10), transparent 70%),
    radial-gradient(700px 500px at 110% 100%, rgba(79,183,149,.055), transparent 70%),
    radial-gradient(600px 460px at -10% 60%, rgba(180,139,216,.05), transparent 70%);
}
#app{position:relative;z-index:1;max-width:var(--appmax);margin:0 auto;
  padding-bottom:calc(var(--navh) + var(--s3))}
::selection{background:rgba(224,178,92,.28)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--surf3);border-radius:var(--rf);
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ============ utilidades ============ */
.grow{flex:1;min-width:0}
.push{margin-left:auto}
.stack{display:flex;align-items:center;gap:var(--s3)}

/* ============ base de controles ============
   Altura fija + centrado flex + line-height 1.
   Así el alto no depende de las métricas de la fuente y todo
   lo que va en una misma fila mide exactamente lo mismo.      */
.back,.sfield,.btn,.gbtn,.lgb,.seg button,.gzoom button,.tpb,.gco{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;font-family:var(--body);cursor:pointer;
  border:1px solid transparent;transition:background .16s,border-color .16s,color .16s,transform .12s;
}
.back:active,.btn:active,.gbtn:active,.lgb:active,.gzoom button:active,.tpb:active,.gco:active{
  transform:scale(.97)}

/* ============ iconos ============
   Los de game-icons.net vienen macizos en una caja de 512. Se pintan con
   el color del control que los contiene y cada contexto decide el tamaño:
   así un icono nunca queda con un color o un peso que no le corresponde. */
.gi{display:block;flex:none;fill:currentColor;stroke:none}
.gi.r{transform:rotate(-90deg)}   /* la flecha, apuntando a la derecha */

/* ============ barra superior ============ */
.top{position:sticky;top:0;z-index:20;
  background:linear-gradient(to bottom,rgba(13,16,21,.96),rgba(13,16,21,.86));
  backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.topin{display:flex;gap:var(--s2);align-items:center;
  padding:var(--s3) var(--gut);padding-top:calc(var(--s3) + env(safe-area-inset-top))}
/* botón y campo comparten alto: la barra superior queda pareja */
.back{height:var(--h-md);flex:none;background:var(--surf);border-color:var(--line);
  color:var(--muted);border-radius:var(--r2);padding:0 var(--s4);gap:var(--s2);
  font-size:var(--f-md);font-weight:500}
.back .gi{width:15px;height:15px}
/* con icono el botón arranca antes: el dibujo ya aporta el aire de la izquierda */
.back:has(.gi){padding-left:var(--s3)}
@media(hover:hover){.back:hover{color:var(--ink);border-color:var(--line2);background:var(--surf2)}}
.sfield{height:var(--h-md);width:100%;background:var(--surf);border-color:var(--line);
  color:var(--ink);border-radius:var(--r2);padding:0 var(--s4);font-size:var(--f-base);
  font-family:var(--body);outline:none}
.topin .sfield{flex:1}
/* el buscador lleva la lupa adentro, a la izquierda */
.searchw{position:relative;flex:1;display:flex}
.searchw .gi{position:absolute;left:var(--s4);top:50%;margin-top:-8px;
  width:16px;height:16px;color:var(--dim);pointer-events:none}
.searchw .sfield{padding-left:calc(var(--s4) + 16px + var(--s2))}
.searchw:focus-within .gi{color:var(--gold)}
.tag{flex:none;font-family:var(--mono);font-size:var(--f-xs);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dim);line-height:1}
@media(hover:hover){.sfield:hover{border-color:var(--line2)}}
.sfield:focus{border-color:rgba(224,178,92,.55);box-shadow:0 0 0 3px rgba(224,178,92,.10)}
.sfield::placeholder{color:var(--dim)}
select.sfield{appearance:none;padding-right:var(--s8);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.sfield option{background:var(--surf2);color:var(--ink)}

/* ============ avatares ============ */
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;flex:none;overflow:hidden;isolation:isolate;line-height:1;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c,#95A1B4) 26%,transparent),
                                    color-mix(in srgb,var(--c,#95A1B4) 10%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#95A1B4) 45%,transparent)}
.av.sq{border-radius:28%}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.avi{font-family:var(--mono);font-weight:500;letter-spacing:-.03em;line-height:1;
  color:var(--c,#95A1B4);text-transform:uppercase;user-select:none}
.av.ring{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#95A1B4) 45%,transparent),
  0 0 0 2px var(--bg),0 0 0 3.5px color-mix(in srgb,var(--c,#95A1B4) 55%,transparent)}
.av.big{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#95A1B4) 40%,transparent),
  0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04)}

/* ============ el Máster ============
   Un poco de ceremonia, sin romper el sistema: mismo tamaño y misma forma que
   el resto, pero con un aura que gira despacio y su propio color. */
/* Decoración del Máster, al estilo de las de Discord: un anillo nítido con un
   destello que lo recorre, un halo que respira, y chispas en órbita.
   overflow visible para que todo pueda salir del círculo; como eso deja de
   recortar la foto, la imagen se redondea sola. */
.av.gmring{overflow:visible}
.av.gmring img{border-radius:50%}
.av.gmring .avi{color:var(--gm)}
/* anillo: el conic va enmascarado en aro para que no tape la foto */
.av.gmring::before{content:'';position:absolute;inset:-7%;border-radius:50%;z-index:3;
  background:conic-gradient(from 0deg,transparent 0deg,
    color-mix(in srgb,var(--gm) 60%,transparent) 34deg,#FFF4D6 52deg,
    color-mix(in srgb,var(--gm) 60%,transparent) 70deg,transparent 128deg);
  -webkit-mask:radial-gradient(closest-side,transparent 79%,#000 81%);
          mask:radial-gradient(closest-side,transparent 79%,#000 81%);
  animation:girar 3.6s linear infinite}
/* halo detrás, con latido */
.av.gmring::after{content:'';position:absolute;inset:-26%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,
    rgba(232,197,114,.5),rgba(201,160,232,.22) 55%,transparent 72%);
  animation:latir 3.4s ease-in-out infinite}
/* chispas en órbita */
.orb{position:absolute;inset:-7%;pointer-events:none;z-index:4}
.orb i{position:absolute;left:50%;top:0;width:9%;height:9%;margin-left:-4.5%;
  border-radius:50%;background:#FFF1CE;
  box-shadow:0 0 7px 1.5px rgba(232,197,114,.85);
  transform-origin:50% var(--o,560%);
  animation:orbita var(--d,6s) linear infinite,chispa 2.2s ease-in-out infinite;
  animation-delay:var(--dl,0s),var(--dl,0s)}
@keyframes girar{to{transform:rotate(1turn)}}
@keyframes orbita{to{transform:rotate(1turn)}}
@keyframes latir{0%,100%{opacity:.6;transform:scale(1)}
                 50%{opacity:1;transform:scale(1.07)}}
@keyframes chispa{0%,100%{opacity:.35}50%{opacity:1}}

.gmgrp .grph{color:var(--gm)}

/* ---- la ficha del Máster ----
   Resplandor de fondo, pavesas que suben, y una entrada con destello. */
.page.gmpage{position:relative;isolation:isolate}
/* el :not es necesario: si no, la capa de pavesas pierde su position:absolute,
   pasa a ocupar su alto en el flujo y empuja toda la ficha hacia abajo */
.page.gmpage > :not(.gmfx){position:relative;z-index:1}
.page.gmpage::before{content:'';position:absolute;left:0;right:0;top:0;height:340px;
  pointer-events:none;z-index:0;
  background:radial-gradient(130% 100% at 28% 0%,rgba(232,197,114,.17),transparent 68%)}
.gmfx{position:absolute;left:0;right:0;top:0;height:360px;
  overflow:hidden;pointer-events:none;z-index:0}
.gmfx i{position:absolute;bottom:-8px;left:var(--x,50%);
  width:3px;height:3px;border-radius:50%;background:var(--gm);
  box-shadow:0 0 9px 2px rgba(232,197,114,.55);opacity:0;
  animation:pavesa var(--d,8s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes pavesa{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  12%{opacity:.95}
  50%{transform:translate(14px,-180px) scale(1)}
  88%{opacity:.45}
  100%{transform:translate(-6px,-360px) scale(1.15);opacity:0}}

/* entrada: el retrato aparece con un pequeño empuje */
.page.gmpage .hero{animation:invocar .75s cubic-bezier(.2,.85,.25,1) both}
@keyframes invocar{
  from{opacity:0;transform:translateY(12px) scale(.95)}
  to{opacity:1;transform:none}}

/* el nombre en degradado, con un destello que lo recorre una vez al entrar */
.page.gmpage h1{background:linear-gradient(100deg,
    #F8E8C2 0%,var(--gm) 30%,#FFFDF6 45%,var(--gm) 60%,#D6ADE8 100%);
  background-size:280% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:destello 1.6s ease-out .25s both}
@keyframes destello{from{background-position:100% 0}to{background-position:0 0}}
.btn.sec2.gm.on{border-color:var(--gm);color:var(--gm)}
/* quién sos, en el banner */
.gbtn.yo{gap:var(--s2);padding-left:var(--s1);text-transform:none;letter-spacing:0;
  font-family:var(--body);font-size:var(--f-cap)}
.pickl{margin-top:var(--s4)}
/* con movimiento reducido queda todo quieto, pero sigue distinguiéndose */
@media(prefers-reduced-motion:reduce){
  .av.gmring::before,.av.gmring::after,.orb i,
  .gmfx i,.page.gmpage .hero,.page.gmpage h1{animation:none}
  .orb,.gmfx{display:none}
  .page.gmpage h1{background-position:0 0}}

/* ============ menciones y enlaces del editor ============
   Tanto en la prosa como dentro del editor, una mención es texto: el nombre en
   el color del tipo y subrayado, sin avatar ni píldora. Con subrayado real (no
   un borde) para que parta bien si el nombre cae en el corte de renglón, y sin
   ninguna caja que pueda alterar el interlineado. */
.men,.tok{color:var(--c);font-weight:500;cursor:pointer;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--c) 45%,transparent);
  text-decoration-thickness:1.5px;text-underline-offset:.18em;
  transition:text-decoration-color .15s,background .15s}
@media(hover:hover){.men:hover{text-decoration-color:var(--c)}}
.tok{white-space:nowrap}
/* En el editor el enlace solo toma cuerpo cuando queda marcado, que es el paso
   previo a borrarlo: ahí conviene que se note bien qué está seleccionado. */
.tok.sel{background:color-mix(in srgb,var(--c) 18%,transparent);
  border-radius:.35em;text-decoration-color:var(--c);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 18%,transparent)}
.tok.sel::after{content:'✕';font-family:var(--mono);font-size:.72em;
  opacity:.9;margin-left:.35em;text-decoration:none;display:inline-block}

/* ============ página y tipografía ============ */
.page{padding:var(--s5) var(--gut) var(--s2)}
.page.first{padding-top:calc(var(--s8) + env(safe-area-inset-top))}
h1{font-family:var(--disp);font-size:var(--f-h1);line-height:var(--lh-tight);
  margin:0;font-weight:700;letter-spacing:-.015em}
.eyebrow,.sech,.grph{font-family:var(--title);font-size:var(--f-xs);font-weight:600;
  letter-spacing:var(--track);text-transform:uppercase;line-height:var(--lh-snug)}
.eyebrow{color:var(--muted);margin-bottom:var(--s2)}
/* Rótulo de sección: el título al medio y una onda a cada lado.
   La onda es una máscara, así toma el color del propio rótulo — gris en las
   secciones, el color del tipo en los grupos del índice. */
.sech,.grph{display:flex;align-items:center;justify-content:center;
  gap:var(--s4);text-align:center}
.sech::before,.sech::after,.grph::before,.grph::after{
  content:'';flex:1 1 24px;min-width:14px;height:9px;
  background-color:currentColor;opacity:.42;
  -webkit-mask-image:var(--wave);mask-image:var(--wave);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:center;mask-position:center}
.aka{font-family:var(--mono);font-size:var(--f-sm);color:var(--dim);margin-top:var(--s3)}
.meta{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) 0 var(--s5)}
.aka + .meta{margin-top:var(--s3)}
.chip{display:inline-flex;align-items:center;height:var(--h-chip);padding:0 var(--s3);
  font-family:var(--mono);font-size:var(--f-xs);line-height:1;color:var(--muted);
  background:var(--surf);border:1px solid var(--line);border-radius:var(--rf)}
.chip.acc{color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
  border-color:color-mix(in srgb,var(--c) 30%,transparent)}
/* etiquetas puestas a mano: se leen más fuerte que menciones y conexiones,
   que son números calculados */
.chip.mine{color:var(--ink);background:var(--surf2);border-color:var(--line2)}

/* ---- editor de etiquetas ---- */
.tagbox{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  min-height:var(--h-md);padding:var(--s2);background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r2)}
.tagbox:focus-within{border-color:rgba(224,178,92,.55);
  box-shadow:0 0 0 3px rgba(224,178,92,.10)}
.tagch{display:inline-flex;align-items:center;gap:var(--s1);height:var(--h-chip);
  padding:0 var(--s1) 0 var(--s3);border-radius:var(--rf);
  background:var(--surf3);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--mono);font-size:var(--f-xs);line-height:1;white-space:nowrap}
.tagch button{width:20px;height:20px;padding:0;border:none;background:none;
  color:var(--dim);font-size:var(--f-xs);cursor:pointer;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
@media(hover:hover){.tagch button:hover{color:var(--ink);background:rgba(237,231,218,.12)}}
.taginput{flex:1;min-width:120px;height:var(--h-chip);border:none;background:none;
  color:var(--ink);font-family:var(--body);font-size:var(--f-md);outline:none;padding:0 var(--s2)}
.taginput::placeholder{color:var(--dim)}
.prose{font-size:var(--f-base);line-height:var(--lh-body);color:var(--ink2)}
.prose p{margin:0 0 var(--s4)}
.prose p:last-child{margin:0}
.sec{margin-top:var(--s7)}
.sech{color:var(--muted);margin-bottom:var(--s4)}
.hint{font-family:var(--mono);font-size:var(--f-sm);color:var(--dim);
  line-height:var(--lh-snug);margin:var(--s3) 0 0}
/* separación después de un texto de apoyo, según qué venga a continuación */
.hint + .card,.hint + .cgrid,.hint + .segrow,.hint + .grp,.hint + .empty{margin-top:var(--s6)}

/* ============ portada de campaña, estilo libro ============
   Tapa vertical (2:3) con lomo, canto de hojas y sombra proyectada, como una
   tapa en una mesa de librería. Nada de círculos: el resto de la app usa
   avatares redondos y la portada tiene que leerse distinta. */
.book{--bw:96px;position:relative;flex:none;width:var(--bw);aspect-ratio:2/3;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:2px 7px 7px 2px;
  background:linear-gradient(150deg,var(--surf3),var(--surf));
  box-shadow:0 16px 32px rgba(0,0,0,.5), 0 3px 9px rgba(0,0,0,.42),
             inset 0 0 0 1px rgba(237,231,218,.10)}
.book.sm{--bw:42px;border-radius:1px 4px 4px 1px;
  box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(237,231,218,.10)}
.book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:1}
/* lomo: sombra del pliegue más una luz en el filo */
.book::before{content:'';position:absolute;left:0;top:0;bottom:0;width:9%;z-index:2;
  background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,.1) 44%,
    rgba(255,255,255,.14) 58%,rgba(0,0,0,.18) 74%,transparent)}
/* barniz: un brillo diagonal muy tenue */
.book::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.15),transparent 38%)}
.bkini{font-family:var(--title);font-weight:600;letter-spacing:.08em;
  font-size:calc(var(--bw) * .24);color:rgba(224,178,92,.5);line-height:1}
/* tapa sin imagen: un recuadro grabado, como una encuadernación lisa */
.book.ph{background:linear-gradient(150deg,#242C3A,#151A22)}
.book.ph .bkini{padding:calc(var(--bw) * .1) calc(var(--bw) * .07);
  box-shadow:0 0 0 1px rgba(224,178,92,.22),0 0 0 4px rgba(224,178,92,.07)}
.book.sm.ph .bkini{box-shadow:0 0 0 1px rgba(224,178,92,.22)}

.banner{position:relative;overflow:hidden;padding:var(--s6) var(--gut);
  border-bottom:1px solid var(--line);
  background:linear-gradient(150deg,var(--surf2),var(--surf))}
/* el fondo es la misma portada, ampliada y desenfocada */
.banner::before{content:'';position:absolute;inset:-12%;
  background-image:var(--cover);background-size:cover;background-position:center;
  filter:blur(30px) saturate(140%);opacity:.5}
.banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,16,21,.9),rgba(13,16,21,.55))}
/* sin portada: apenas un resplandor, sin degradado que oscurezca de más */
.banner:not(.has)::before{inset:0;filter:none;opacity:1;
  background:radial-gradient(120% 100% at 20% 0%,rgba(224,178,92,.13),transparent 65%)}
.banner:not(.has)::after{background:none}
.bnin{position:relative;z-index:1;display:flex;gap:var(--s5);align-items:flex-end}
.bntx{min-width:0;flex:1}
.bntx h1{text-shadow:0 2px 20px rgba(13,16,21,.75)}
.bntx .hint{margin-top:var(--s2)}
.bnact{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.gbtn.glass{background:rgba(13,16,21,.62);backdrop-filter:blur(10px);
  border-color:rgba(237,231,218,.22);color:var(--ink)}
@media(hover:hover){.gbtn.glass:hover{background:rgba(13,16,21,.82);border-color:rgba(237,231,218,.4)}}
@media(min-width:680px){.banner .book{--bw:132px}}

/* ============ ficha ============ */
.hero{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s4)}
.hero .eyebrow{margin-bottom:var(--s1)}
.avbtn{background:none;border:none;padding:0;cursor:zoom-in;display:block;line-height:0;flex:none}
.ours{background:linear-gradient(135deg,var(--surf),rgba(23,28,37,.5));
  border:1px solid var(--line);border-left:2px solid var(--location);
  border-radius:0 var(--r2) var(--r2) 0;padding:var(--s4) var(--s5);
  font-size:var(--f-base);line-height:var(--lh-body);color:var(--ink2)}
.ours p{margin:0 0 var(--s3)}.ours p:last-child{margin:0}

.rail{position:relative;padding-left:var(--s7);margin-top:var(--s2)}
/* La línea de tiempo no lleva ningún estado: ni hover ni activo. En pantallas
   táctiles el :hover queda pegado después de tocar, y el punto se veía
   encendido sin motivo. El toque abre la ficha y con eso alcanza. */
.bl{position:relative;padding:var(--s3) 0;cursor:pointer}
.bl::before{content:'';position:absolute;left:calc(var(--s7) * -1);top:0;bottom:0;width:2px;
  background:currentColor;opacity:.25;border-radius:2px}
.bl:first-child::before{top:var(--s5)}
.bl:last-child::before{bottom:calc(100% - var(--s6) - 4px)}
/* el punto mide 14 y la línea 2: para que compartan eje, el punto arranca
   6px antes ((14-2)/2) */
.bl::after{content:'';position:absolute;left:calc(var(--s7) * -1 - 6px);top:var(--s5);
  width:14px;height:14px;border-radius:50%;background:var(--bg);
  border:2px solid currentColor}
.blsrc{display:flex;align-items:center;gap:var(--s2);
  font-size:var(--f-md);font-weight:600;margin-bottom:var(--s1)}
.blnote{font-size:var(--f-sm);font-weight:400;opacity:.55}
.blsnip{font-size:var(--f-cap);color:var(--muted);line-height:var(--lh-snug)}
.blsnip em{color:var(--ink);font-style:normal;font-weight:500}

/* ============ listas y cards ============ */
.grp{margin-bottom:var(--s6)}
.grph{margin-bottom:var(--s3)}
.grph .ct{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);
  letter-spacing:0;font-weight:400}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden}
.row{display:flex;gap:var(--s3);align-items:center;cursor:pointer;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);transition:background .14s}
.row:last-child{border-bottom:none}
@media(hover:hover){.row:hover{background:var(--surf2)}}
.row:active{background:var(--surf3)}
.rn{font-size:var(--f-md);font-weight:500;line-height:var(--lh-snug)}
.rs{font-size:var(--f-cap);color:var(--muted);line-height:var(--lh-snug);margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc{font-family:var(--mono);font-size:var(--f-sm);color:var(--dim);flex:none}
.rc .gi{width:11px;height:11px;opacity:.75}
/* el crédito de los iconos: obligatorio por la licencia, pero al fondo */
.credits{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--f-sm);line-height:var(--lh-snug);color:var(--dim);text-align:center}
.credits a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media(hover:hover){.credits a:hover{color:var(--ink)}}
.campn{font-family:var(--disp);font-size:var(--f-h2);font-weight:600;line-height:var(--lh-tight)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}

.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:var(--s3)}
.ccard{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:var(--s3);cursor:pointer;overflow:hidden;
  padding:var(--s5) var(--s3) var(--s4);
  background:linear-gradient(160deg,var(--surf2),var(--surf));
  border:1px solid var(--line);border-radius:var(--r3);
  transition:transform .16s,border-color .16s,box-shadow .16s}
@media(hover:hover){.ccard:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 12px 28px rgba(0,0,0,.35)}}
.ccard:active{transform:translateY(0)}
.ccn{font-size:var(--f-cap);font-weight:500;line-height:var(--lh-snug)}
.ccc{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);line-height:1}

/* ============ botones ============ */
.segrow{display:flex;justify-content:flex-end;margin-bottom:var(--s5)}
.seg{display:inline-flex;gap:var(--s1);padding:var(--s1);
  background:var(--surf);border:1px solid var(--line);border-radius:var(--rf)}
.seg button{height:var(--h-sm);padding:0 var(--s4);border-radius:var(--rf);
  background:none;color:var(--dim);
  font-family:var(--mono);font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.06em}
@media(hover:hover){.seg button:hover{color:var(--ink)}}
.seg button.on{background:var(--surf3);color:var(--ink)}

.btn{width:100%;height:var(--h-lg);padding:0 var(--s5);border-radius:var(--r2);
  font-size:var(--f-md);font-weight:600;white-space:nowrap;gap:var(--s2)}
.btn .gi{width:16px;height:16px;opacity:.85}
.btn.pri{background:linear-gradient(160deg,#F0D9A8,var(--gold));color:#20180A;
  box-shadow:0 8px 22px rgba(224,178,92,.20)}
@media(hover:hover){.btn.pri:hover{filter:brightness(1.07)}}
.btn.sec2{background:var(--surf);border-color:var(--line);color:var(--muted)}
@media(hover:hover){.btn.sec2:hover{color:var(--ink);border-color:var(--line2);background:var(--surf2)}}
.btn.sec2.on{border-color:var(--gold);color:var(--gold)}
.btn + .btn{margin-top:var(--s2)}
.btnrow + .btn,.hint + .btn,.sfield + .btn{margin-top:var(--s4)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.narrow{max-width:280px;margin-inline:auto}
/* El guardar queda pegado arriba de la navegación mientras se scrollea, en vez
   de esperar al final de un formulario largo. Al llegar al fondo se despega y
   apoya en su lugar natural. El degradado evita que el texto de atrás se
   confunda con el botón. */
.savebar{position:sticky;bottom:var(--navh);z-index:15;
  margin-top:var(--s6);padding:var(--s5) 0 var(--s3);
  background:linear-gradient(to top,var(--bg) 70%,transparent)}
.savebar .btn{margin:0}

.btnrow{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.btnrow.even{flex-wrap:nowrap}
.btnrow.even > .btn{flex:1;margin:0;min-width:0;padding:0 var(--s3)}
.gbtn,.gco,.tpb,.lgb{height:var(--h-sm);border-radius:var(--rf);
  font-family:var(--mono);font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap}
.gbtn{padding:0 var(--s4);background:var(--surf);border-color:var(--line);color:var(--muted)}
@media(hover:hover){.gbtn:hover{color:var(--ink);border-color:var(--line2);background:var(--surf2)}}
.gbtn.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tpb{padding:0 var(--s3);border-color:color-mix(in srgb,var(--c) 45%,transparent);
  color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
@media(hover:hover){.tpb:hover{background:color-mix(in srgb,var(--c) 22%,transparent)}}

/* ============ editor ============ */
.imgrow{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s6)}
.imgrow .grow{display:flex;flex-direction:column}
.eyebrow.mt{margin-top:var(--s6)}
.ed{background:var(--surf);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);min-height:184px;font-size:var(--f-base);line-height:var(--lh-body);
  color:var(--ink2);outline:none;white-space:pre-wrap;word-break:break-word;
  transition:border-color .16s,box-shadow .16s}
.ed.short{min-height:132px}
@media(hover:hover){.ed:hover{border-color:var(--line2)}}
.ed:focus{border-color:rgba(224,178,92,.5);box-shadow:0 0 0 3px rgba(224,178,92,.09)}
.ed:empty::before{content:attr(data-ph);color:var(--dim)}
.acwrap{position:relative}
.ac{position:absolute;left:0;right:0;top:calc(100% + var(--s2));z-index:40;
  background:var(--surf2);border:1px solid var(--line2);border-radius:var(--r3);
  overflow:hidden auto;max-height:46vh;box-shadow:var(--shadow)}
.acr{display:flex;gap:var(--s3);align-items:center;cursor:pointer;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.acr:last-child{border-bottom:none}
@media(hover:hover){.acr:hover{background:var(--surf3)}}
.acn{font-size:var(--f-md);font-weight:500;line-height:var(--lh-snug)}
.acs{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);
  letter-spacing:.05em;margin-top:2px;line-height:1}
.acnew{color:var(--location);font-size:var(--f-md);font-weight:500}
.ac .hint{margin:0;padding:var(--s4)}
.tp{display:flex;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) var(--s4)}
.tpq{width:100%;font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);
  padding-top:var(--s1);line-height:var(--lh-snug)}

/* ============ grafo ============ */
.gwrap{position:relative;overflow:hidden;touch-action:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,rgba(224,178,92,.05),transparent 60%),
             linear-gradient(to bottom,var(--bg2),var(--bg))}
.gwrap.full{position:fixed;inset:0;z-index:70;border:none;background:var(--bg)}
canvas{display:block;width:100%;touch-action:none;cursor:grab}
canvas.grabbing{cursor:grabbing}
canvas.pointing{cursor:pointer}
.ghint{position:absolute;left:var(--gut);bottom:var(--s3);pointer-events:none;
  font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);letter-spacing:.04em}
.gzoom{position:absolute;top:var(--s3);right:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.gzoom button{width:var(--h-ic);height:var(--h-ic);padding:0;border-radius:var(--r2);
  background:rgba(30,36,47,.85);backdrop-filter:blur(8px);
  border-color:var(--line2);color:var(--muted)}
@media(hover:hover){.gzoom button:hover{color:var(--ink);background:var(--surf3)}}
.gzoom .gi{width:17px;height:17px}
/* la mira es de trazo fino: al mismo tamaño se ve más floja que el resto */
.gzoom [data-act="fit"] .gi{width:20px;height:20px}
/* los dos rieles de control comparten margen y separación */
.gctl,.glegend{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  padding:0 var(--gut)}
.gctl{padding-top:var(--s4)}
.glegend{padding-top:var(--s2)}
.gctl .spacer{flex:1}
.lgb{gap:var(--s2);padding:0 var(--s3) 0 var(--s2);
  background:var(--surf);border-color:var(--line);color:var(--muted)}
@media(hover:hover){.lgb:hover{border-color:var(--line2);color:var(--ink)}}
.lgb .sw{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.lgb.off{opacity:.38}
.lgb.off .sw{background:var(--dim);box-shadow:none}
.gcard{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);
  display:flex;gap:var(--s3);align-items:center;max-width:520px;margin:0 auto;
  padding:var(--s3) var(--s4);border:1px solid var(--line2);border-radius:var(--r3);
  background:rgba(30,36,47,.94);backdrop-filter:blur(14px);box-shadow:var(--shadow);
  animation:rise .18s ease-out}
.gcn{font-size:var(--f-md);font-weight:600;line-height:var(--lh-snug);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcs{font-family:var(--mono);font-size:var(--f-xs);color:var(--muted);
  line-height:var(--lh-snug);margin-top:3px;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gco{flex:none;padding:0 var(--s4);background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gcx{flex:none;width:var(--h-sm);height:var(--h-sm);padding:0;border:none;background:none;
  color:var(--dim);font-size:var(--f-md);cursor:pointer;border-radius:var(--rf);line-height:1}
@media(hover:hover){.gcx:hover{color:var(--ink);background:var(--surf3)}}

/* ============ diálogo ============ */
.dlgwrap{position:fixed;inset:0;z-index:85;display:flex;align-items:center;
  justify-content:center;padding:var(--s5);
  background:rgba(8,10,14,.82);backdrop-filter:blur(8px);animation:fade .18s ease-out}
.dlg{width:100%;max-width:420px;max-height:86vh;overflow-y:auto;
  padding:var(--s6);border:1px solid var(--line2);border-radius:var(--r4);
  background:var(--surf2);box-shadow:var(--shadow);animation:rise .2s ease-out}
.dlgh{font-family:var(--disp);font-size:var(--f-h2);font-weight:600;
  line-height:var(--lh-tight);margin:0 0 var(--s3)}
.dlgtx{font-size:var(--f-md);line-height:var(--lh-snug);color:var(--ink2)}
.dlgbox{margin-top:var(--s4);padding:var(--s3) var(--s4);
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r2)}
.dlgl{font-family:var(--mono);font-size:var(--f-xs);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s1)}
.dlgv{font-size:var(--f-md);color:var(--ink);line-height:var(--lh-snug)}
.dlg .btn{margin-top:var(--s3)}
.dlg .hint{margin-bottom:var(--s5)}

/* ============ historial ============ */
.row.hrow{cursor:default}
@media(hover:hover){.row.hrow:hover{background:none}}
.row.hrow .gbtn{flex:none}
.hwhen{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);
  margin-top:var(--s2);line-height:1}
.hmarks{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.hchip{font-family:var(--mono);font-size:10px;line-height:1;color:var(--muted);
  background:var(--surf2);border:1px solid var(--line);border-radius:var(--rf);
  padding:4px 8px}
.hchip.acc{color:var(--gold);border-color:rgba(224,178,92,.35);
  background:rgba(224,178,92,.10)}

/* ============ lightbox ============ */
.lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:var(--s6);
  background:rgba(8,10,14,.88);backdrop-filter:blur(8px);animation:fade .18s ease-out}
.lightbox img{width:min(420px,84vw);height:min(420px,84vw);object-fit:cover;
  border-radius:var(--r4);box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(237,231,218,.12)}
.lbx{position:absolute;top:calc(var(--s5) + env(safe-area-inset-top));right:var(--s5);
  width:var(--h-ic);height:var(--h-ic);border-radius:50%;font-size:var(--f-md);
  background:var(--surf2);border:1px solid var(--line2);color:var(--ink);cursor:pointer;line-height:1}

/* ============ toasts ============ */
/* Arriba y no abajo: abajo chocaban con el botón de guardar y con la barra de
   navegación. Quedan justo debajo de la barra superior, sin taparle los
   controles, y entran de arriba hacia abajo. */
.toasts{position:fixed;left:50%;transform:translateX(-50%);
  top:calc(var(--toph) + var(--s3));z-index:90;
  display:flex;flex-direction:column;gap:var(--s2);align-items:center;
  pointer-events:none;width:max-content;max-width:90vw}
.toast{display:flex;align-items:center;min-height:var(--h-md);
  padding:var(--s3) var(--s5);border-radius:var(--rf);
  background:var(--surf3);color:var(--ink);border:1px solid var(--line2);
  font-size:var(--f-md);font-weight:500;line-height:var(--lh-snug);text-align:center;
  box-shadow:var(--shadow);animation:drop .2s ease-out}
.toast.ok{background:linear-gradient(160deg,#5FCBA6,var(--location));color:#08201A;border-color:transparent}
.toast.err{background:linear-gradient(160deg,#EE8388,var(--faction));color:#2A0C0E;border-color:transparent}

/* ============ nav inferior ============ */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:30;
  background:linear-gradient(to top,rgba(13,16,21,.99),rgba(13,16,21,.88));
  backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.navin{max-width:var(--appmax);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.nb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s1);padding:var(--s3) var(--s1);background:none;border:none;cursor:pointer;
  color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;transition:color .15s}
.nb .gi{width:22px;height:22px}
@media(hover:hover){.nb:hover{color:var(--muted)}}
.nb.on{color:var(--gold)}
.nb.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2px;border-radius:0 0 3px 3px;background:var(--gold);
  box-shadow:0 0 12px var(--gold)}

/* ============ estados vacíos y carga ============ */
.skel{border-radius:var(--r1);
  background:linear-gradient(90deg,var(--surf) 25%,var(--surf2) 37%,var(--surf) 63%);
  background-size:400% 100%;animation:sh 1.4s ease-in-out infinite}
.empty{text-align:center;padding:var(--s9) var(--s6);color:var(--muted)}
.empty .ei{line-height:1;margin-bottom:var(--s4);opacity:.5;color:var(--muted)}
.empty .ei .gi{width:44px;height:44px;margin:0 auto}
.empty .et{font-family:var(--disp);font-size:var(--f-h2);color:var(--ink);
  line-height:var(--lh-tight);margin-bottom:var(--s2)}
.empty .es{font-size:var(--f-md);line-height:var(--lh-snug);max-width:34ch;margin:0 auto}
.empty .btn{margin-top:var(--s6)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .ccard:hover{transform:none}
}