/* ════════════════════════════════════════════════
   Núcleo visual · común a todo tools.luckstudio.es
   Lo cargan el inicio, tu perfil y cada herramienta.

   Registro «Estudio» del brandbook de LuckStudio (cap. 04, 05, 12 y 17):
   blanco, negro y gris; el naranja es una señal y marca lo importante.
   Botones en pastilla, bordes de 1,5 px y rellenos que suben en naranja.
   Nada de sombras ni esquinas a medias.
   ════════════════════════════════════════════════ */

/* ══════ TOKENS DE MARCA ══════ */
:root{
  /* Paleta · el amanecer, de la noche a la claridad */
  --white:#FFFFFF; --black:#120D0D; --orange:#FF6600;
  --g1:#9E1B1B; --g2:#FF6600; --g3:#FFEFA6;
  --paper:#F4F2ED; --grey:#6A625A; --grey-dark:#A59D95;
  --cream-note:#FFF6D8; --hover-warm:#FFF3EA;

  /* Papeles en la interfaz */
  --accent:var(--orange);
  --accent-ink:#C24E00;          /* naranja para TEXTO pequeño sobre claro (AA) */
  --off:var(--paper);
  --muted:var(--grey);
  --line:rgba(18,13,13,.14);
  --line-strong:var(--black);
  --danger:#A01D1D; --ok:#1F7A3D;

  /* Degradados: siempre con grano */
  --grad-dawn:linear-gradient(180deg,var(--g3) 0%,var(--g2) 50%,var(--g1) 100%);
  --grad-k:linear-gradient(180deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%);
  --grad-h:linear-gradient(90deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%);
  --grano:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Tres voces + datos */
  --f-display:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Lora","Iowan Old Style",Georgia,serif;
  --f-text:"Mozilla Text","Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* Movimiento · una sola curva, sin rebotes */
  --ease:cubic-bezier(.22,1,.36,1);

  /* Retícula */
  --pad-x:clamp(16px,6vw,96px); --pad-x-sm:clamp(16px,5vw,32px);
  --hdr-h:60px;
  --borde:1.5px solid var(--black);

  /* El color propio del perfil. Se usa con moderación: acentúa lo que es
     tuyo sin repintar la interfaz entera. */
  --pf:var(--accent);

  /* Lo que siempre es de noche (pie, instalar, bandas del amanecer) usa
     estos dos y no cambia con el tema */
  --noche:#120D0D; --dia:#FFFFFF;
  --mesa:#F4F2EE;

  color-scheme:light;
}

/* ══════ MODO OSCURO ══════
   Respeta el sistema y se puede fijar en Configuración. Se invierten el
   blanco y el negro de la interfaz; el naranja y el amanecer se quedan. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --white:#151010; --black:#F2EDE6; --paper:#1F1A17; --mesa:#1A1614;
    --grey:#B7AFA7; --grey-dark:#857C74; --line:rgba(242,237,230,.16);
    --hover-warm:#2A1C12; --cream-note:#2A2418; --accent-ink:#FF8A3D; --danger:#E46A6A; --ok:#5DBB7E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --white:#151010; --black:#F2EDE6; --paper:#1F1A17; --mesa:#1A1614;
  --grey:#B7AFA7; --grey-dark:#857C74; --line:rgba(242,237,230,.16);
  --hover-warm:#2A1C12; --cream-note:#2A2418; --accent-ink:#FF8A3D; --danger:#E46A6A; --ok:#5DBB7E;
  color-scheme:dark;
}

/* ══════ BASE ══════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-text);font-size:16px;line-height:1.55;font-weight:400;
  background:var(--white);color:var(--black);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--hdr-h);
}
/* Base imprescindible. Sin esto, un modal con [hidden] sigue siendo
   display:flex y bloquea los clics de toda la página. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;font-family:inherit;color:inherit;font-size:inherit}
input,select,textarea{font-family:inherit;color:inherit;font-size:inherit}
img{max-width:100%}
::selection{background:var(--orange);color:var(--white)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Logotipo ──
   El color se hereda del contenedor, así el mismo SVG sirve sobre fondo
   claro y oscuro. La K lleva una copia encima con el degradado, que se
   funde al pasar el ratón. */
.ls-logo{display:block;width:auto;color:var(--black)}
.ls-k-luz{opacity:0;transition:opacity .35s var(--ease)}
a:hover > .ls-logo .ls-k-luz,
a:focus-visible > .ls-logo .ls-k-luz{opacity:1}
@media (prefers-reduced-motion:reduce){.ls-k-luz{transition:none}}

/* ══════ TIPOGRAFÍA ══════ */
/* Etiqueta · Host Grotesk 600, mayúsculas solo aquí */
.slabel,.eyebrow,.campo-l,.cfg-l{
  font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.35;color:var(--grey);display:block;
}
.slabel{margin-bottom:1.2rem}
.slabel b,.eyebrow b{color:var(--black);font-weight:700}
/* La señal: un punto naranja delante de la etiqueta del hero */
.eyebrow{margin-bottom:1.3rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--etapa,var(--orange));flex-shrink:0}

/* Acento · Lora itálica, una palabra, casi siempre la última */
.it{font-family:var(--f-serif);font-style:italic;font-weight:500;letter-spacing:-.03em;color:var(--orange)}

.big{font-family:var(--f-display);font-size:clamp(2.2rem,6vw,4.4rem);font-weight:800;letter-spacing:-.05em;line-height:.92;text-wrap:balance}
.big span{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--grey);letter-spacing:-.03em}
.mid{font-family:var(--f-display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;letter-spacing:-.045em;line-height:1;max-width:22ch;text-wrap:balance}
.mid span{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--grey);letter-spacing:-.03em}
.lead{font-family:var(--f-serif);font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.45;color:var(--black);max-width:46ch;margin-top:1.4rem}
.tx{font-size:15px;line-height:1.6;color:var(--grey);max-width:64ch}
.lead b,.tx b{font-weight:700;color:var(--black)}
hr.sep{border:0;border-top:1px solid var(--line);margin:4vh 0 2.4vh}
.empty{padding:1.6rem 0;font-family:var(--f-serif);font-style:italic;font-size:15px;color:var(--grey);line-height:1.8}

/* ══════ CABECERA ══════
   Siempre a mano, nunca estorba. Fondo de la página y borde de 1,5 px. */
.hdr{
  position:fixed;top:0;left:0;width:100%;height:var(--hdr-h);z-index:200;
  background:var(--white);color:var(--black);border-bottom:var(--borde);
  display:flex;align-items:center;gap:1rem;padding:0 var(--pad-x);
}
.hdr-brand{display:flex;align-items:center;flex-shrink:0}
.hdr-brand .ls-marca{font-size:17px}

/* La marca del subdominio: «tools.» en Lora itálica + el logotipo, en una línea */
.ls-marca{display:inline-flex;align-items:baseline;gap:.18em;color:inherit;line-height:1;white-space:nowrap}
.ls-marca .ls-logo{height:1em;width:auto;color:inherit;align-self:center}
.ls-sub{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:1.42em;letter-spacing:-.035em;line-height:.8}
.ls-sub i{font-style:inherit;color:var(--orange)}

/* Secciones de la portada y la pastilla de crear perfil */
.hdr-sec{display:flex;gap:.15rem;margin-left:auto}
.hdr-sec a{
  display:flex;align-items:center;height:36px;padding:0 .9rem;border-radius:999px;
  font-family:var(--f-display);font-weight:600;font-size:.88rem;color:var(--grey);transition:background .25s,color .25s;
}
.hdr-sec a:hover{background:var(--hover-warm);color:var(--black)}
.hdr-crear{
  height:38px;padding:0 1.1rem;border-radius:999px;border:1.5px solid var(--black);background:var(--black);color:var(--white);
  font-family:var(--f-display);font-weight:600;font-size:.86rem;flex-shrink:0;transition:background .3s,border-color .3s;
}
.hdr-crear:hover{background:var(--orange);border-color:var(--orange)}
@media(max-width:900px){.hdr-sec{display:none}.hdr-crear{margin-left:auto}}


/* Navegación por pestañas (la usan las herramientas con varias páginas) */
.nav-wrap{position:relative;display:flex;align-items:stretch;align-self:stretch;flex:1 1 auto;min-width:0}
.hdr-nav{display:flex;align-items:center;gap:.15rem;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;padding:0 .4rem}
.hdr-nav::-webkit-scrollbar{display:none}
.hdr-tab{
  position:relative;display:flex;align-items:center;gap:.4rem;height:36px;padding:0 .9rem;white-space:nowrap;
  border-radius:999px;font-family:var(--f-display);font-weight:600;font-size:.88rem;letter-spacing:-.01em;
  color:var(--grey);transition:color .25s var(--ease),background .25s var(--ease);
}
.hdr-tab:hover{color:var(--black);background:var(--hover-warm)}
.hdr-tab.on{color:var(--black)}
/* Punto naranja en la página activa */
.hdr-tab.on::after{
  content:'';position:absolute;left:50%;bottom:-1px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--orange);
}
.hdr-tab.hecha::before{content:'✓';font-size:.75em;font-weight:700;color:var(--accent-ink)}

/* Flechas de desplazamiento: aparecen solas cuando la barra no cabe */
.nav-fl,.ctrl-fl{
  position:absolute;top:0;bottom:0;width:30px;z-index:5;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;color:var(--grey);transition:color .2s;
}
.nav-fl:hover,.ctrl-fl:hover{color:var(--black)}
.nav-fl-i,.ctrl-fl-i{left:0;background:linear-gradient(90deg,var(--white) 55%,transparent)}
.nav-fl-d,.ctrl-fl-d{right:0;background:linear-gradient(270deg,var(--white) 55%,transparent)}
.ctrl-wrap{position:relative;display:flex;align-items:stretch;flex:1 1 auto;min-width:0}

/* Chip del perfil: ver «MENÚ DEL AVATAR» */
.pf-tx{display:flex;flex-direction:column;line-height:1.15;text-align:left;white-space:nowrap;max-width:150px}
.pf-tx b{font-family:var(--f-display);font-size:.84rem;font-weight:700;letter-spacing:-.01em;color:var(--black);overflow:hidden;text-overflow:ellipsis}
.pf-tx em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--grey)}

@media(max-width:900px){
  .hdr{gap:.6rem;padding:0 var(--pad-x-sm)}
  .hdr-brand .ls-logo{height:14px}
  .hdr-tab{padding:0 .7rem;font-size:.82rem}
  .pf-tx{display:none}
}
@media(max-width:560px){.hdr-brand .ls-marca{font-size:14px}}

/* Código de ejercicio (AUT-001) con la hora de su etapa */
.cod{
  flex-shrink:0;display:inline-flex;align-items:center;height:20px;padding:0 .4rem;border-radius:3px;
  font-family:var(--mono);font-size:10px;background:var(--c,var(--black));color:var(--cx,var(--white));border:1px solid var(--cb,var(--c,var(--black)));
}

/* ══════ HERO Y CUERPO ══════ */
.hero{padding:clamp(48px,10vh,120px) var(--pad-x) clamp(32px,5vh,56px);border-bottom:var(--borde)}
.hero h1{
  font-family:var(--f-display);font-size:clamp(2.3rem,6vw,4.8rem);font-weight:800;
  letter-spacing:-.05em;line-height:.92;max-width:18ch;text-wrap:balance;
}
/* La segunda voz del titular: Lora itálica, más calmada */
.hero h1 span{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.035em;color:var(--grey)}
.hero h1 .it{color:var(--orange);font-weight:500}
.hero p{font-size:17px;line-height:1.55;color:var(--grey);max-width:60ch;margin-top:1.6rem;text-wrap:pretty}
.hero p b{font-weight:700;color:var(--black)}

main{padding:clamp(32px,6vh,72px) var(--pad-x) clamp(48px,8vh,96px);min-height:50vh}

/* ══════ BOTONES ══════
   Pastilla, borde de 1,5 px y relleno que sube en naranja. */
.btn-p,.btn-s,.mini,.aviso-b,.ftr-ib,.pv-del{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;
  border-radius:999px;border:1.5px solid var(--noche);
  font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;line-height:1;
  background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;
  transition:background-size .4s var(--ease),color .3s var(--ease),border-color .3s var(--ease),opacity .2s;
}
.btn-p:hover:not(:disabled),.btn-s:hover,.mini:hover,.aviso-b:hover,.ftr-ib:hover{
  background-size:100% 100%;border-color:var(--orange);color:var(--dia);
}
.btn-p{height:48px;padding:0 1.5rem;font-size:.95rem;background-color:var(--black);color:var(--white)}
.btn-p:disabled{background:none;color:var(--grey);border-color:var(--line);cursor:not-allowed}
.btn-s{height:48px;padding:0 1.4rem;font-size:.95rem;background-color:var(--white);color:var(--black)}
.btn-s.dgr:hover,.mini.dgr:hover{background-image:linear-gradient(var(--danger),var(--danger));border-color:var(--danger);color:var(--white)}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:2.2rem}
.mini{height:32px;padding:0 .85rem;font-size:.8rem;border-color:var(--line);background-color:transparent;color:var(--black)}
.mini.go{background-color:var(--black);color:var(--white);border-color:var(--black)}

/* Chips y etiquetas */
.tag{
  display:inline-flex;align-items:center;gap:.4rem;height:26px;padding:0 .7rem;border-radius:999px;
  border:1px solid var(--line);font-family:var(--f-display);font-size:.76rem;font-weight:600;
  letter-spacing:-.005em;color:var(--grey);white-space:nowrap;
}
.tag.acc{border-color:var(--orange);color:var(--accent-ink)}
.tag.txt{border:none;padding:0;font-family:var(--mono);font-weight:400;font-size:.72rem;color:var(--grey)}

/* ══════ AVISOS ══════ */
.aviso{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border-left:3px solid var(--orange);background:var(--paper);padding:1rem 1.2rem;margin-bottom:3vh}
.aviso-t{font-family:var(--f-display);font-size:1rem;font-weight:700;letter-spacing:-.02em}
.aviso-d{font-size:14px;line-height:1.55;color:var(--grey);flex:1;min-width:200px}
.aviso-b{height:34px;padding:0 1rem;font-size:.82rem;background-color:var(--black);color:var(--white)}
.aviso-x{font-family:var(--f-display);font-weight:600;font-size:.82rem;color:var(--grey)}
.aviso-x:hover{color:var(--black)}
.nota{border-left:3px solid var(--orange);background:var(--paper);padding:1.1rem 1.3rem;margin:1.8rem 0;font-size:15px;line-height:1.6;color:var(--black);max-width:60ch}

/* ══════ FORMULARIO ══════
   Línea inferior en vez de cajas. El foco se pinta en naranja. */
.form{margin-top:1.6rem;max-width:520px}
.form input{
  width:100%;font-family:var(--f-display);font-size:1.4rem;font-weight:600;letter-spacing:-.025em;
  padding:.7rem 0;border:none;border-bottom:var(--borde);outline:none;background:none;
  transition:border-color .25s var(--ease);
}
.form input:focus{border-bottom-color:var(--orange)}
.form input::placeholder{color:var(--grey);font-weight:400}
.form-a{display:flex;gap:.6rem;margin-top:1.2rem}
.form-a .btn-p{flex:1}
.campo-l{margin-bottom:.6rem}
.campo-l em{color:var(--grey);font-style:normal;text-transform:none;letter-spacing:0;font-weight:400}

/* ══════ MODAL ══════ */
.modal{position:fixed;inset:0;z-index:300;background:rgba(18,13,13,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{
  background:var(--white);width:100%;max-width:760px;max-height:92vh;display:flex;flex-direction:column;
  border:var(--borde);border-bottom:none;animation:up .4s var(--ease);
}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem clamp(20px,4vw,40px);border-bottom:var(--borde)}
.sheet-t{font-family:var(--f-display);font-size:1.35rem;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.sheet-x{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--line);font-size:18px;color:var(--black);transition:border-color .2s,background .2s,color .2s;
}
.sheet-x:hover{border-color:var(--black);background:var(--black);color:var(--white)}
.sheet-b{padding:1.6rem clamp(20px,4vw,40px) 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-b p{font-size:15px;line-height:1.6;color:var(--grey);margin-bottom:1.3rem;max-width:62ch}
.sheet-b p b{font-weight:700;color:var(--black)}
.sheet-b textarea{
  width:100%;height:30vh;font-family:var(--mono);font-size:12px;line-height:1.6;padding:1rem;
  border:1.5px solid var(--line);background:var(--paper);resize:none;outline:none;color:var(--black);
}
.sheet-b textarea:focus{border-color:var(--orange)}
.sheet-f{display:flex;gap:.6rem;flex-wrap:wrap;padding:1rem clamp(20px,4vw,40px) calc(1rem + env(safe-area-inset-bottom));border-top:var(--borde)}
.sheet-f .btn-p,.sheet-f .btn-s{flex:1}
@media(min-width:760px){.modal{align-items:center}.sheet{max-height:86vh;border-bottom:var(--borde)}}

.exp-row{display:flex;align-items:flex-start;gap:1rem;width:100%;text-align:left;padding:1.1rem;border:1px solid var(--line);border-bottom:none;transition:background .2s}
.exp-row:last-of-type{border-bottom:1px solid var(--line)}
.exp-row:hover{background:var(--hover-warm)}
.exp-n{font-family:var(--mono);font-size:11px;color:var(--accent-ink);flex-shrink:0;padding-top:3px}
.exp-c{flex:1;min-width:0}
.exp-t{font-family:var(--f-display);font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.25rem;display:block}
.exp-d{font-size:14px;line-height:1.5;color:var(--grey);display:block}
.exp-a{font-size:16px;color:var(--grey);flex-shrink:0;padding-top:2px;transition:color .2s,transform .3s var(--ease)}
.exp-row:hover .exp-a{color:var(--orange);transform:translateX(3px)}

/* ══════ TEXTOS LARGOS DE PANEL ══════ */
.tu-ps{list-style:none;counter-reset:p;margin-bottom:1.6rem}
.tu-ps li{counter-increment:p;position:relative;padding:.8rem 0 .8rem 2.6rem;font-size:15px;line-height:1.6;color:var(--grey);border-bottom:1px solid var(--line)}
.tu-ps li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.95rem;font-family:var(--mono);font-size:11px;color:var(--accent-ink)}
.tu-ps li b{font-weight:700;color:var(--black)}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:var(--borde);margin-bottom:2rem}
.pv-c{padding:1.3rem 1.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pv-c:last-child{border-right:none}
.pv-k{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:.7rem}
.pv-c p{font-size:14px;line-height:1.55;color:var(--grey);margin:0}
.pv-danger{border-top:1.5px solid var(--danger);padding-top:1.6rem;margin-top:2rem}
.pv-del{height:44px;padding:0 1.3rem;font-size:.9rem;border-color:var(--danger);color:var(--danger);background-image:linear-gradient(var(--danger),var(--danger))}
.pv-del:hover{background-size:100% 100%;color:var(--white)}
.cfg-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.cfg-l{flex:0 0 150px}
.cfg-v{flex:1;min-width:180px;font-size:14px;line-height:1.55;color:var(--grey)}
.cfg-v b{font-weight:700;color:var(--black)}

/* ══════ TOAST ══════ */
.toast{
  position:fixed;left:50%;bottom:calc(4vh + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:400;
  background:var(--noche);color:var(--dia);padding:.85rem 1.4rem;border-radius:999px;
  font-family:var(--f-display);font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  animation:up .3s var(--ease);display:flex;align-items:center;gap:1.1rem;max-width:90vw;
}
.toast-b{font-family:var(--f-display);font-size:.9rem;font-weight:700;color:var(--orange)}
.toast-b:hover{color:var(--g3)}

/* ══════ IDENTIDAD ══════ */
.av{
  width:30px;height:30px;flex-shrink:0;overflow:hidden;border-radius:50%;
  background:var(--pf,var(--accent));color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av i{font-style:normal;font-family:var(--f-display);font-size:11px;font-weight:800;letter-spacing:-.02em;line-height:1}
.av-lg{width:52px;height:52px}
.av-lg i{font-size:19px}
.av-xl{width:112px;height:112px}
.av-xl i{font-size:42px}
@media(max-width:700px){.av-xl{width:80px;height:80px}.av-xl i{font-size:30px}}

.pf-colores{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.pf-color{
  width:24px;height:24px;padding:0;border-radius:50%;background:var(--c);
  border:2px solid var(--white);box-shadow:0 0 0 1.5px transparent;transition:transform .25s var(--ease),box-shadow .2s;
}
.pf-color:hover{transform:scale(1.12)}
.pf-color.on{box-shadow:0 0 0 1.5px var(--black)}

/* Lista de perfiles, reutilizada en varios paneles */
.pf-otros{border-top:var(--borde)}
.pf-otro{display:flex;align-items:center;gap:.9rem;padding:.9rem .3rem;border-bottom:1px solid var(--line)}
.pf-otro.on{border-left:3px solid var(--pf,var(--accent));padding-left:.7rem}
.pf-otro-c{flex:1;min-width:0;text-align:left}
.pf-otro-c b{font-family:var(--f-display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em;display:block}
.pf-otro-c em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--grey);display:block;margin-top:.2rem}
.pf-otro-a{display:flex;gap:.35rem;flex-shrink:0}

/* ══════ BARRA DE ACCIONES ══════
   La usan la página de perfil (como pestañas) y cada herramienta.
   No es pegajosa: se queda bajo el hero. Si lo fuera, taparía el contenido
   y los elementos que se pegan bajo la cabecera (índice, diagramas…)
   se meterían por debajo. Las mismas acciones están en el menú. */
.ctrl{
  position:relative;z-index:5;background:var(--white);border-bottom:var(--borde);
  display:flex;align-items:center;gap:.6rem;padding:0 calc(var(--pad-x) - .9rem);min-height:60px;
}
.ctrl-acts{display:flex;align-items:center;gap:.2rem;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;padding:.6rem 0}
.ctrl-acts::-webkit-scrollbar{display:none}
.act{
  display:flex;align-items:center;gap:.5rem;padding:0 .9rem;height:38px;white-space:nowrap;border-radius:999px;
  font-family:var(--f-display);font-size:.88rem;font-weight:600;letter-spacing:-.01em;
  color:var(--grey);transition:background .25s var(--ease),color .25s var(--ease);
}
.act:hover{background:var(--hover-warm);color:var(--black)}
.act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.act.pri{color:var(--black);border:1.5px solid var(--black)}
.act.pri:hover{background:var(--black);color:var(--white)}
.ctrl-meta{
  display:flex;align-items:center;margin-left:auto;padding:0 .9rem;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;color:var(--grey);
}
@media(max-width:900px){
  .act{height:36px;font-size:.82rem;padding:0 .8rem}
  .ctrl-meta{display:none}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.r1{animation:fadeUp .55s var(--ease) .04s both}
.r2{animation:fadeUp .55s var(--ease) .12s both}
.r3{animation:fadeUp .55s var(--ease) .2s both}

/* ══════ LAS HORAS DEL AMANECER ══════
   Cada ejercicio lleva la hora de su etapa: 1 rojo, 2 fuego, 3 crema,
   4 claridad. La usan las fichas, el desplegable y el pie. */
.h-1{--c:var(--g1);--cx:var(--dia)}
.h-2{--c:var(--g2);--cx:var(--dia)}
.h-3{--c:var(--g3);--cx:var(--noche);--cb:var(--noche)}
.h-4{--c:var(--dia);--cx:var(--noche);--cb:var(--noche)}

/* Con perfil o sin él: lo pone app.js en <body data-perfil> */
body:not([data-perfil="si"]) [data-solo="perfil"],
body[data-perfil="si"] [data-solo="nuevo"]{display:none !important}

/* El recorrido: un tramo del amanecer por ejercicio hecho */
.rec{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;max-width:520px}
.rec i{height:6px;border-radius:999px;background:var(--line);transition:background .5s var(--ease)}
.rec i.ok{background:var(--c)}
.rec i.ok.h-3{box-shadow:inset 0 0 0 1px var(--black)}
.rec i.ok.h-4{background:var(--black)}
.rec-t{font-family:var(--mono);font-size:11.5px;color:var(--grey);margin:.6rem 0 1.3rem}


/* ══════ INDICADOR DE VERSIONES ══════
   Un cuadrado con el número. El texto completo sale al pasar por encima. */
.vn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  min-width:24px;height:24px;padding:0 5px;border:1.5px solid var(--black);background:var(--white);
  font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--black);cursor:default;
}
.vn-b::before{content:'';position:absolute;top:-4px;right:-4px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 1.5px var(--white)}
.vn::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);right:-6px;transform:translateY(4px);
  white-space:nowrap;padding:.4rem .65rem;border-radius:999px;background:var(--black);color:var(--white);
  font-family:var(--f-display);font-size:.76rem;font-weight:600;letter-spacing:-.005em;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .25s var(--ease),visibility .2s;z-index:20;
}
.vn:hover::after,.vn:focus-visible::after{opacity:1;visibility:visible;transform:none}
/* Oculto no ocupa sitio: así no ensancha la página en móvil */
.vn:not(:hover):not(:focus-visible)::after{display:none}
.vn-0{font-family:var(--mono);font-size:11px;color:var(--grey)}
.toca{
  display:inline-flex;align-items:center;gap:.35rem;height:24px;padding:0 .6rem;border-radius:999px;
  border:1.5px solid var(--orange);font-family:var(--f-display);font-size:.74rem;font-weight:700;color:var(--accent-ink);white-space:nowrap;
}
.toca::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ══════ FICHA DE EJERCICIO ══════
   Como en Library: ID, extensión con su color y metadatos a la vista. */
.ficha{
  position:relative;display:flex;flex-direction:column;gap:.55rem;background:var(--white);border:var(--borde);
  padding:1.05rem 1.1rem 1rem;color:var(--black);transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
a.ficha:hover{box-shadow:0 14px 30px rgba(18,13,13,.14)}
.f-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-family:var(--mono);font-size:11px;color:var(--grey)}
.ext{
  display:inline-flex;align-items:center;height:20px;padding:0 .45rem;border-radius:3px;
  background:var(--c,var(--orange));color:var(--cx,var(--white));border:1px solid var(--cb,var(--c,var(--orange)));
  font-family:var(--mono);font-size:10.5px;font-weight:500;
}
.f-n{font-family:var(--f-display);font-weight:800;font-size:1.45rem;letter-spacing:-.045em;line-height:1}
.f-s{font-family:var(--f-serif);font-style:italic;color:var(--grey);font-size:.98rem;line-height:1.3}
.f-d{font-size:14px;color:var(--grey);line-height:1.5}
.f-pie{
  display:flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--grey);
}
.f-pie .f-est{margin-left:auto;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.f-go{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--black);display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--black);transition:background .3s var(--ease),border-color .3s,color .3s,transform .3s var(--ease);
}
a.ficha:hover .f-go{background:var(--orange);border-color:var(--orange);color:var(--white);transform:translateX(3px)}

/* ══════ PIE ══════
   Negro con grano y franja de amanecer. Las tres casas de la marca en una
   fila: tools (donde estás), sus ejercicios, library y luckstudio. */
.ftr{
  --accent-ink:var(--orange);
  position:relative;background:var(--noche);color:var(--dia);padding:clamp(64px,10vh,120px) var(--pad-x) 0;overflow:hidden;
}
.ftr::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--grano);background-size:180px;opacity:.09;mix-blend-mode:screen}
.ftr::after{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad-h)}
.ftr > *{position:relative;z-index:1}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.ftr-msg{
  font-family:var(--f-display);font-size:clamp(2.2rem,5.6vw,4.6rem);font-weight:800;
  letter-spacing:-.05em;line-height:.92;max-width:16ch;text-wrap:balance;
}
.ftr-msg span{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--grey-dark);letter-spacing:-.035em}
.ftr-inspira{border-left:3px solid var(--orange);padding:.2rem 0 .2rem 1.3rem}
.ftr-il{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:.7rem}
.ftr-inspira p{font-size:15px;line-height:1.6;color:#B7AFA7;margin-bottom:1.2rem}
.ftr-acts{display:flex;gap:.5rem;flex-wrap:wrap}
.ftr-ib{height:42px;padding:0 1.1rem;font-size:.88rem;border-color:var(--dia);color:var(--dia);background-color:transparent}
.ftr-ib-l{border-color:rgba(255,255,255,.3)}
body.instalada [data-solo-web]{display:none}
@media(max-width:820px){.ftr-top{grid-template-columns:1fr}}

.ftr-casas{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(56px,9vh,96px);
  border-top:1px solid rgba(255,255,255,.18);
}
.ftr-casa{padding:1.6rem 1.4rem 1.8rem 0;display:flex;flex-direction:column;gap:.55rem}
.ftr-casa + .ftr-casa{padding-left:1.4rem;border-left:1px solid rgba(255,255,255,.12)}
.ftr-dom{font-family:var(--mono);font-size:11.5px;color:var(--grey-dark)}
.ftr-dom em{font-style:normal;margin-left:.4rem;padding:.1rem .45rem;border-radius:999px;background:var(--orange);color:var(--dia)}
.ftr-nom{display:inline-flex;align-items:baseline;color:var(--dia);font-size:24px;min-height:36px;transition:color .25s}
.ftr-nom .ls-sub{font-size:1.5em}
.ftr-nom .ls-logo{height:18px;color:inherit}
.ftr-nom-s{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;align-items:center}
.ftr-nom-s em{font-family:var(--mono);font-style:normal;font-weight:400;font-size:11px;color:var(--grey-dark);margin-left:.5rem}
a.ftr-nom:hover{color:var(--g3)}
.ftr-casa p{font-family:var(--f-serif);font-style:italic;color:#B7AFA7;font-size:1rem;line-height:1.35}
.ftr-casa ul{list-style:none;display:grid;gap:.15rem;margin-top:.4rem}
.ftr-casa li a,.ftr-casa li button,.ftr-casa li > span{
  display:inline-flex;align-items:center;gap:.5rem;padding:.25rem 0;text-align:left;
  font-family:var(--f-display);font-weight:600;font-size:.92rem;letter-spacing:-.01em;color:#E9E3DC;transition:color .2s;
}
.ftr-casa li a:hover,.ftr-casa li button:hover{color:var(--orange)}
.ftr-casa li a span{font-size:.8em;color:var(--grey-dark)}
.ftr-ej i{
  flex-shrink:0;white-space:nowrap;font-style:normal;display:inline-flex;align-items:center;height:18px;padding:0 .35rem;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;background:var(--c);color:var(--cx);
}
@media(max-width:760px){
  .ftr-casas{grid-template-columns:1fr}
  .ftr-casa,.ftr-casa + .ftr-casa{padding:1.4rem 0 1.6rem;border-left:none}
  .ftr-casa + .ftr-casa{border-top:1px solid rgba(255,255,255,.12)}
}

.ftr-firma{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:clamp(40px,6vh,64px)}
.ftr-firma img{width:130px;height:auto;opacity:.92}
.ftr-firma p{font-family:var(--f-serif);font-style:italic;font-size:1.1rem;color:#E9E3DC}
.ftr-firma p span{color:var(--grey-dark)}

.ftr-bar{
  margin-top:clamp(32px,5vh,56px);padding:1.4rem 0 calc(1.6rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.ftr-brand{color:var(--grey-dark);transition:color .25s}
.ftr-brand .ls-marca{font-size:15px}
.ftr-brand:hover{color:var(--dia)}
.ftr-note{font-family:var(--mono);font-size:11.5px;color:var(--grey-dark)}

/* ══════ AVISO DE INSTALAR (abajo, una sola vez) ══════ */
.inst{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:350;
  width:min(620px,calc(100vw - 24px));display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;
  padding:1rem 1.1rem;background:var(--noche);color:var(--dia);border:1.5px solid var(--noche);
  box-shadow:8px 8px 0 var(--orange);animation:up .45s var(--ease);
}
.inst-t{font-family:var(--f-display);font-weight:800;font-size:1.05rem;letter-spacing:-.03em}
.inst-d{flex:1 1 260px;font-size:14px;line-height:1.45;color:#B7AFA7}
.inst-b{height:38px;padding:0 1.1rem;border-radius:999px;background:var(--orange);color:var(--dia);font-family:var(--f-display);font-weight:600;font-size:.88rem}
.inst-x{font-family:var(--f-display);font-weight:600;font-size:.84rem;color:var(--grey-dark)}
.inst-x:hover{color:var(--dia)}

/* ══════ MENÚ DEL MÓVIL ══════
   Por debajo de 900 px la cabecera se queda en marca, avatar y «Menú». El
   menú ocupa la pantalla y es un amanecer: arriba en claro, dónde estás y a
   dónde ir; abajo en negro, lo tuyo (ajustes, copia, perfiles, privacidad). */
.hdr-menu{
  display:none;align-items:center;gap:.55rem;height:40px;padding:0 1rem 0 .85rem;border-radius:999px;flex-shrink:0;
  background:var(--black);color:var(--white);font-family:var(--f-display);font-weight:600;font-size:.9rem;
}
.hdr-menu-i{display:flex;flex-direction:column;gap:4px}
.hdr-menu-i i{display:block;width:15px;height:1.5px;background:currentColor}
.hdr-menu-i i:last-child{width:10px}

@media(max-width:900px){
  .nav-wrap,.hdr-sec,.hdr-crear{display:none !important}
  .hdr > .hdr-brand{margin-right:auto}
  .cuenta-b{border:none;padding:0;height:auto}
  .cuenta-b .pf-tx,.cuenta-b .cuenta-fl{display:none}
  .cuenta-b .av{width:34px;height:34px}
  .hdr-menu{display:inline-flex}
}
@media(min-width:901px){.menu{display:none !important}}

body.menu-abierto{overflow:hidden}
.menu{
  position:fixed;inset:0;z-index:450;display:flex;flex-direction:column;background:var(--white);color:var(--black);
  animation:menuEntra .4s var(--ease);
}
@keyframes menuEntra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--hdr-h);flex-shrink:0;
  padding:0 var(--pad-x-sm);border-bottom:var(--borde);
}
.menu-top .ls-marca{font-size:14px}
.menu-x{
  display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 1rem;border-radius:999px;border:1.5px solid var(--black);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;
}
.menu-x span{font-size:1.2rem;line-height:1}
.menu-cuerpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.2rem var(--pad-x-sm) 2rem;display:flex;flex-direction:column;gap:1.8rem}

/* Tu perfil, arriba del todo */
.menu-pf{
  display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;padding:.9rem 1rem;
  border:var(--borde);background:var(--white);transition:background .25s;
}
.menu-pf:hover,.menu-pf[aria-current]{background:var(--hover-warm)}
.menu-pf .av{width:46px;height:46px}
.menu-pf .av i{font-size:17px}
.menu-pf-nuevo .av{background:var(--black)}
.menu-pf-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.menu-pf-c b{font-family:var(--f-display);font-weight:800;font-size:1.25rem;letter-spacing:-.035em;line-height:1.1}
.menu-pf-c em{font-style:normal;font-size:13px;color:var(--grey)}

/* Secciones */
.menu-l{display:block;margin-bottom:.6rem;font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.menu-l b{color:var(--black)}
.menu-l .ls-sub{font-size:1.9rem;text-transform:none;letter-spacing:-.035em;color:var(--black)}
.menu-lista{list-style:none;border-top:var(--borde)}
.menu-i{
  position:relative;display:flex;align-items:center;gap:.8rem;min-height:60px;padding:.7rem .2rem .7rem .4rem;
  border-bottom:1px solid var(--line);transition:background .2s;
}
.menu-i:active,.menu-i:hover{background:var(--hover-warm)}
.menu-i .cod{flex-shrink:0;min-width:64px;justify-content:center}
.menu-i-n{flex:1;min-width:0;display:flex;flex-direction:column;font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:-.025em;line-height:1.15}
.menu-i-n em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:.9rem;letter-spacing:0;color:var(--grey)}
.menu-i.hecha .menu-i-n::after{content:'✓ empezado';font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:0;color:var(--accent-ink);margin-top:.2rem}
.menu-a{flex-shrink:0;font-size:16px;color:var(--grey)}
/* Dónde estás: barra naranja y punto, nunca solo color */
.menu-i[aria-current="page"]{background:var(--hover-warm);box-shadow:inset 3px 0 0 var(--orange)}
.menu-i[aria-current="page"] .menu-a{font-size:0}
.menu-i[aria-current="page"] .menu-a::before{content:'aquí';font-family:var(--mono);font-size:10.5px;color:var(--white);background:var(--orange);padding:.15rem .45rem;border-radius:999px}
.menu-lista-g{border-top:var(--borde)}
.menu-g{
  display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:800;font-size:1.45rem;letter-spacing:-.04em;
}
.menu-g::after{content:'→';font-weight:400;font-size:16px;color:var(--grey)}
.menu-g[aria-current="page"]{color:var(--accent-ink)}
.menu-i-s{min-height:52px;padding-left:1rem}
.menu-i-s .menu-i-n{font-size:1rem}

/* Lo tuyo, abajo y en negro, tras la franja del amanecer */
.menu-pie{
  position:relative;flex-shrink:0;background:var(--noche);color:var(--dia);
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:1.3rem var(--pad-x-sm) calc(1rem + env(safe-area-inset-bottom));
}
.menu-pie::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:var(--grad-h)}
.menu-b{
  display:flex;align-items:center;gap:.6rem;height:50px;padding:0 1rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.3);font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--white);
  transition:background .25s,border-color .25s;
}
.menu-b:hover,.menu-b:active{background:var(--orange);border-color:var(--orange)}
.menu-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.menu-nota{grid-column:1/-1;margin-top:.3rem;font-family:var(--mono);font-size:11px;color:var(--grey);text-align:center}
@media (prefers-reduced-motion:reduce){.menu{animation:none}}

/* ══════ MENÚ DEL AVATAR ══════
   Se abre al pulsar (nunca al pasar): tu perfil, configuración, copia y,
   si hay más de un perfil en este navegador, a cuál cambiar. */
.cuenta{position:relative;flex-shrink:0}
.cuenta-b{
  display:flex;align-items:center;gap:.55rem;height:40px;padding:0 .7rem 0 4px;
  border:1.5px solid var(--line);border-radius:999px;transition:border-color .25s var(--ease);
}
.cuenta-b:hover,.cuenta-b[aria-expanded="true"]{border-color:var(--black)}
.cuenta-b .av{width:30px;height:30px}
.cuenta-fl{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.cuenta-b[aria-expanded="true"] .cuenta-fl{transform:rotate(180deg)}
.cuenta-menu{
  position:absolute;top:calc(100% + 10px);right:0;width:300px;z-index:300;background:var(--white);border:var(--borde);
  box-shadow:8px 8px 0 var(--black);animation:up .3s var(--ease);
}
.cuenta-yo{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-bottom:var(--borde)}
.cuenta-yo b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.035em;line-height:1.1}
.cuenta-yo em{display:block;font-family:var(--f-serif);font-style:italic;font-size:.9rem;color:var(--grey);line-height:1.3;margin-top:.15rem}
.cuenta-yo .av{width:44px;height:44px}
.cuenta-lista{display:flex;flex-direction:column;padding:.35rem 0}
.cuenta-i{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.65rem 1.1rem;
  font-family:var(--f-display);font-weight:600;font-size:.95rem;transition:background .2s;
}
.cuenta-i:hover{background:var(--hover-warm)}
.cuenta-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--grey)}
.cuenta-otros{border-top:1px solid var(--line);padding:.5rem 0 .4rem}
.cuenta-l{display:block;padding:.35rem 1.1rem .3rem;font-family:var(--f-display);font-weight:600;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.cuenta-otro{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.5rem 1.1rem;transition:background .2s}
.cuenta-otro:hover{background:var(--hover-warm)}
.cuenta-otro > span:not(.av){flex:1;min-width:0}
.cuenta-otro b{display:block;font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:-.02em}
.cuenta-otro em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--grey)}
.cuenta-otro i{font-style:normal;color:var(--grey)}
.cuenta-nuevo{
  display:block;width:100%;text-align:left;padding:.8rem 1.1rem;border-top:var(--borde);background:var(--noche);color:var(--dia);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;transition:background .3s var(--ease);
}
.cuenta-nuevo:hover{background:var(--orange)}

/* En móvil el menú del avatar ocupa el ancho, bajo la cabecera */
@media(max-width:900px){.cuenta-menu{position:fixed;top:calc(var(--hdr-h) + 6px);left:8px;right:8px;width:auto;box-shadow:6px 6px 0 var(--black)}}

/* ══════ TRAER UN ARCHIVO ══════
   Antes de importar se ve qué trae el archivo frente a lo que hay aquí, y se
   elige cómo traerlo. Las diferencias nunca dependen solo del color: cada
   una lleva su número y su nombre. */
.imp-arch{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border:var(--borde);margin-bottom:1.4rem}
.imp-arch-i{flex-shrink:0;font-family:var(--mono);font-size:11px;padding:.3rem .5rem;border-radius:3px;background:var(--noche);color:var(--dia)}
.imp-arch b{display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;word-break:break-all}
.imp-arch em{display:block;font-style:normal;font-size:13.5px;color:var(--grey);margin-top:.2rem}
.imp-l{display:block;margin:1.4rem 0 .6rem;font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.imp-tabla{width:100%;border-collapse:collapse;border-top:var(--borde)}
.imp-tabla thead th{padding:.5rem .6rem;text-align:left;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--grey);border-bottom:1px solid var(--line)}
.imp-tabla th[scope="row"],.imp-tabla td{padding:.7rem .6rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.imp-tabla th[scope="row"]{padding-left:0}
.imp-tabla b{display:block;font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.imp-tabla td b{font-weight:800;font-size:1.25rem;letter-spacing:-.04em}
.imp-tabla em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--grey);margin-top:.15rem}
.imp-solo{background:var(--paper)}

.imp-dif{list-style:none;display:grid;gap:.35rem;margin-top:.9rem}
.imp-dif li{display:flex;align-items:baseline;gap:.7rem;font-size:14px;line-height:1.4;color:var(--grey)}
.imp-dif li b{flex-shrink:0;min-width:2.2rem;text-align:center;padding:.1rem .4rem;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:500;border:1.5px solid currentColor}
.imp-dif strong{color:var(--black);font-weight:700}
.imp-d-n b{color:var(--ok)}
.imp-d-a b{color:var(--accent-ink)}
.imp-d-l b{color:var(--black)}
.imp-d-i b{color:var(--grey)}
.imp-d-s b{color:var(--danger)}

.imp-ops{display:grid;gap:.5rem}
.imp-op{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border:1.5px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s}
.imp-op:hover{border-color:var(--black)}
.imp-op:has(input:checked){border-color:var(--black);background:var(--hover-warm);box-shadow:inset 3px 0 0 var(--orange)}
.imp-op-p:has(input:checked){box-shadow:inset 3px 0 0 var(--danger);background:#FBEFEF}
.imp-op input{margin-top:.25rem;accent-color:var(--orange);width:18px;height:18px;flex-shrink:0}
.imp-op-c{display:flex;flex-direction:column;gap:.2rem}
.imp-op-c > b{font-family:var(--f-display);font-weight:800;font-size:1.05rem;letter-spacing:-.025em}
.imp-op-c > b i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:0;margin-left:.4rem;padding:.1rem .45rem;border-radius:999px;background:var(--orange);color:var(--white);vertical-align:2px}
.imp-op-c > span{font-size:14px;line-height:1.5;color:var(--grey)}
.imp-op-c > span b{color:var(--black)}
.imp-op-p .imp-op-c > span b{color:var(--danger)}
.imp-nota{margin-top:1rem;font-size:13.5px !important;color:var(--grey)}
.imp-copia{font-family:var(--f-display);font-weight:700;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* ── Ajustes del modo oscuro ── */
:root[data-theme="dark"] .nota-lucks .firma{filter:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nota-lucks .firma{filter:none}}
:root[data-theme="dark"] .mesa,:root[data-theme="dark"] .in-ej{background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mesa,:root:not([data-theme="light"]) .in-ej{background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px)}}

/* ── Selector de tema y secciones de Configuración ── */
.cfg-sec{padding:1.1rem 0 1.3rem;border-bottom:1px solid var(--line)}
.cfg-sec:last-child{border-bottom:none}
.cfg-sec > .cfg-l{margin-bottom:.7rem}
.cfg-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cfg-fila-b{justify-content:flex-start;gap:.4rem}
.cfg-ayuda{margin-top:1rem;padding:1rem 1.1rem;background:var(--paper);font-size:14px;line-height:1.55;color:var(--grey)}
.cfg-ayuda > b{display:block;color:var(--black);margin-bottom:.4rem;font-family:var(--f-display)}
.cfg-ayuda p{margin:0 0 .8rem !important;font-size:14px !important}
.tema{display:inline-flex;padding:4px;border:1.5px solid var(--line);border-radius:999px;gap:2px}
.tema button{height:36px;padding:0 1rem;border-radius:999px;font-family:var(--f-display);font-weight:600;font-size:.88rem;color:var(--grey);transition:background .25s,color .25s}
.tema button[aria-checked="true"]{background:var(--black);color:var(--white)}

/* ══════ ANCHOS ══════
   Dos medidas: lectura (los textos ya van a ~65 caracteres) y trabajo.
   El contenido de trabajo se centra para no quedarse pegado a la izquierda
   en pantallas grandes. Cabeceras, bandas y pie siguen a todo el ancho. */
main{max-width:calc(1180px + 2 * var(--pad-x));margin-inline:auto}

/* ══════ CARGA SIN PARPADEO ══════
   Hasta saber si hay perfil no se enseña ninguno de los dos estados (así
   quien tiene perfil no ve un instante «Crea tu perfil»). Mientras, los
   huecos que esperan datos brillan en cálido: nunca un spinner. */
body:not([data-perfil]) [data-solo]{visibility:hidden}
body[data-perfil] [data-solo]{animation:aparece .35s var(--ease)}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes brillo{from{background-position:100% 0}to{background-position:-100% 0}}
.pf-tarjeta:empty,#inTicket:empty,#pfZona > .empty:only-child,#zona > .empty:only-child{
  min-height:140px;color:transparent;
  background:linear-gradient(90deg,var(--paper) 25%,var(--hover-warm) 50%,var(--paper) 75%);background-size:200% 100%;
  animation:brillo 1.4s linear infinite;
}
@media (prefers-reduced-motion:reduce){.pf-tarjeta:empty,#inTicket:empty,#pfZona > .empty:only-child,#zona > .empty:only-child{animation:none}}

/* ══════ PASO ENTRE PÁGINAS ══════
   «Nunca hacer esperar»: lo que había sale fundido y entra lo nuevo. La
   ficha que pulsas en la portada crece hasta ser el panel del ejercicio,
   como «la ficha se levanta» de Library. Sin movimiento si se pide reducirlo. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease)}
::view-transition-group(ficha-ej){animation-duration:.5s;animation-timing-function:var(--ease)}
.ej-hora{view-transition-name:ficha-ej}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ══════ ICONOS ══════
   Un solo trazo para todos (brandbook cap. 06: 2 px, rejilla de 24). */
.act svg,.cuenta-i svg,.menu-b svg,.pf-bia svg,.vl-ia svg,.cuenta-fl,.btn-s .ico,.hdr-menu-i i,.pf-forma-i svg,.pf-leyenda svg{stroke-width:2}

/* ══════ ACCESIBILIDAD ══════ */
/* Saltar al contenido: invisible hasta que llega el foco del teclado */
.saltar{
  position:fixed;top:8px;left:8px;z-index:600;padding:.7rem 1rem;border-radius:999px;background:var(--black);color:var(--white);
  font-family:var(--f-display);font-weight:600;transform:translateY(-160%);transition:transform .25s var(--ease);
}
.saltar:focus{transform:none}
main:focus{outline:none}
/* Las páginas a todo el ancho también tienen su <main> */
main.main-libre{max-width:none;padding:0;min-height:0;margin:0}
/* En pantallas táctiles, nada que se pulse mide menos de 44 px */
@media (max-width:900px), (pointer:coarse){
  .mini,.nav-b,.pf-bia,.vl-ia,.chip,.modo,.sopt,.cfg-b,.tema button,.campo-add,.sugs-x,.aviso-b,.act,.ej-intro{min-height:44px;height:auto}
  .ej-ruta a{display:inline-flex;align-items:center;min-height:32px}
  .vl-mas summary,.sheet-x,.reglas summary i{width:44px;height:44px}
  .punto{width:12px;height:12px}
  button.punto{padding:0;margin:0 2px}
  .ftr-casa li a,.ftr-casa li button{min-height:40px}
}