/* =========================================================
   ARCHIVO — mismos tokens y componentes que ignasi.site
   Negro/blanco + acento azul, Space Grotesk + Inter, modo oscuro
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0f0f10; --ink-body:#4d4d4d; --paper:#fbfbfa; --paper-2:#f1f1ef; --line:#e2e2df;
  --accent:#155efc; --accent-2:#35c3ff; --accent-dark:#0a2fa8; --accent-soft:#eaf2ff;
  --accent-gradient:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  --accent-gradient-deep:linear-gradient(150deg,var(--accent-dark) 0%,var(--accent) 55%,var(--accent-2) 100%);
  --muted:#6b6b68; --surface:#fff; --bad:#c0392b;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif;
  --gutter:clamp(20px,5vw,64px);
  --radius-lg:24px; --radius:16px; --radius-sm:10px; --nav-h:88px;
}
[data-theme="dark"]{
  --ink:#f2f2f0; --ink-body:#c7c7c4; --paper:#121212; --paper-2:#1a1a1a; --line:#2e2e2e;
  --muted:#9a9a96; --accent-soft:#132241; --surface:#1c1c1c; --bad:#ff7a6b;
}
[data-theme="dark"] .primary,[data-theme="dark"] .toast{color:var(--paper)}

*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;padding-top:var(--nav-h);background:var(--paper);color:var(--ink-body);
  font:16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-.01em;color:var(--ink)}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input,textarea,select,button{font:inherit;color:inherit}
input,textarea,select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;transition:border-color .15s ease}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
button{background:none;border:0;cursor:pointer}

/* ===== Botones (pill, como .btn de la web) ===== */
.primary,.up{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:999px;
  font-weight:600;font-size:.92rem;text-decoration:none;cursor:pointer;border:1px solid var(--ink);transition:all .15s ease}
.primary{background:var(--ink);color:#fff}
.primary:hover{background:var(--accent-gradient);border-color:var(--accent);color:#fff}
.up{background:transparent;color:var(--ink);margin-top:14px}
.up:hover{background:var(--ink);color:var(--paper)}.up input{display:none}

/* ===== Navegación ===== */
.site-nav{position:fixed;top:0;left:0;width:100%;z-index:50;background:var(--accent-gradient-deep);box-shadow:0 8px 30px rgba(10,47,168,.25)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--nav-h);max-width:1400px;margin:0 auto;padding:0 var(--gutter)}
.nav-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.nav-brand img{width:60px;height:60px;object-fit:contain;flex:none}
.nav-brand-text{display:flex;flex-direction:column;line-height:1.2}
.nav-name{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:#fff}
.nav-role{font-weight:600;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:3px}
.nav-links{position:relative;display:flex;align-items:center;gap:2px;list-style:none;margin:0 0 0 auto;padding:6px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 26px rgba(3,11,60,.2)}
.nav-links a{display:inline-block;text-decoration:none;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.78);
  padding:10px 20px;border-radius:999px;white-space:nowrap;transition:color .35s cubic-bezier(.65,0,.35,1),background .35s cubic-bezier(.65,0,.35,1)}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.16)}
.nav-links a.active,.nav-links a.active:hover{color:var(--accent-dark);background:#fff}
.nav-toggle{display:none}
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s ease}
.theme-toggle:hover{background:rgba(255,255,255,.2)}
.theme-toggle svg{width:18px;height:18px;display:block}.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media(max-width:860px){
  .nav-brand-text{display:none}
  .nav-links{position:fixed;inset:calc(var(--nav-h) + 10px) 16px auto 16px;background:var(--accent-dark);backdrop-filter:none;flex-direction:column;
    gap:4px;padding:10px;border-radius:26px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;box-shadow:0 20px 50px rgba(0,0,0,.25)}
  .nav-links.open{opacity:1;pointer-events:auto;transform:none}
  .nav-links li,.nav-links a{display:block}.nav-links a{padding:14px 18px;font-size:1rem;border-radius:16px}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
  .nav-toggle span{width:22px;height:2px;background:#fff;display:block}.nav-links{margin:0}
}

/* ===== Layout de sección ===== */
.cols{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - var(--nav-h))}
aside{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:auto;padding:20px;background:var(--paper-2);border-right:1px solid var(--line)}
.tools{display:flex;gap:10px;margin-bottom:14px}.tools input{flex:1;min-width:0}.tools .primary{padding:10px 18px;white-space:nowrap}
#list{list-style:none;margin:0;padding:0}
#list li{position:relative;padding:14px 16px;margin-bottom:6px;border-radius:var(--radius-sm);cursor:pointer;transition:background .3s ease,padding-left .3s ease}
#list li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--accent-gradient);opacity:0;transition:opacity .3s ease}
#list li:hover,#list li.on{background:var(--surface);padding-left:22px}
#list li:hover::before,#list li.on::before{opacity:1}
#list b{display:block;font:600 1rem var(--font-display);color:var(--ink)}#list small{color:var(--muted)}
main{padding:clamp(24px,4vw,48px) clamp(20px,4vw,56px) 80px;max-width:980px}
@media(max-width:860px){.cols{grid-template-columns:1fr}aside{position:static;height:auto;max-height:42vh}}

/* ===== Ficha ===== */
.kicker{display:block;margin:0 0 8px;font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--accent)}
.title{font:600 clamp(1.6rem,3vw,2.2rem)/1.2 var(--font-display);color:var(--ink);border:0;background:none;padding:0;margin-bottom:22px;border-radius:0}
.title:focus{border:0;outline:0;box-shadow:0 2px 0 var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
label{display:block;color:var(--muted);font-size:.82rem;font-weight:500}label input,label select{margin-top:6px;color:var(--ink)}
.links{display:flex;gap:20px;flex-wrap:wrap;margin:16px 0 0}.links a{color:var(--accent);font-weight:600;text-decoration:none}.links a:hover{text-decoration:underline}
.bodyhead{display:flex;justify-content:space-between;align-items:center;margin-top:26px;font-size:.82rem;font-weight:600;color:var(--muted)}
.bodyhead button{padding:6px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-weight:500}.bodyhead button:hover{background:var(--surface)}
main textarea{min-height:340px;margin-top:10px;resize:vertical;line-height:1.65;border-radius:var(--radius)}
.read{max-width:68ch;margin-top:10px;font-size:1rem;line-height:1.7}.read img{max-width:100%;border-radius:var(--radius)}
.read h1,.read h2,.read h3{margin:1.4em 0 .5em}.read a{color:var(--accent)}
main h3{margin:34px 0 12px;font-size:1.1rem}
.files{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.files li{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 6px 5px 6px;font-size:.88rem}
.files li button:first-child{color:var(--ink);padding:4px 10px;font-weight:500}.files li button:first-child:hover{color:var(--accent)}
.files li button:last-child{color:var(--muted);font-size:.8rem;padding:4px 10px;border-radius:999px}.files li button:last-child:hover{background:var(--paper-2)}
.del{display:block;margin-top:40px;color:var(--muted);text-decoration:underline;font-size:.88rem}.del:hover{color:var(--bad)}
.empty{color:var(--muted);padding:32px 0;max-width:46ch}

/* ===== Visor de archivos ===== */
dialog{width:92vw;height:92vh;padding:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg)}
dialog::backdrop{background:rgba(10,10,11,.85)}
#close{padding:6px 16px;border:1px solid var(--line);border-radius:999px;margin-bottom:8px}#close:hover{background:var(--paper-2)}
#vbody{height:calc(100% - 3rem);display:flex}
#vbody iframe,#vbody img,#vbody video{width:100%;height:100%;object-fit:contain;border:0;border-radius:var(--radius);background:#fff}

/* ===== Footer ===== */
.site-footer{padding:30px var(--gutter);background:var(--accent-gradient-deep);color:#fff}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:30px;height:30px;object-fit:contain}
.footer-name{font:600 .95rem var(--font-display);color:#fff}.footer-meta{font-size:.82rem;color:rgba(255,255,255,.75)}

/* ===== Toast ===== */
.toast{position:fixed;top:calc(var(--nav-h) + 14px);right:20px;z-index:200;background:var(--ink);color:#fff;font-weight:600;font-size:.88rem;
  padding:13px 20px;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.28);display:flex;align-items:center;gap:8px;
  transform:translateY(-14px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.65,0,.35,1),opacity .3s ease}
.toast::before{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent);font-size:.7rem;color:#fff}
.toast.visible{transform:none;opacity:1}

/* ===== Login ===== */
.login-page{padding-top:0;min-height:100vh;display:grid;place-items:center;background:var(--accent-gradient-deep)}
.login{width:min(380px,90vw);background:var(--surface);border-radius:var(--radius-lg);padding:36px;box-shadow:0 30px 80px rgba(3,11,60,.35)}
.login img{height:64px;margin-bottom:14px}.login h1{font-size:1.8rem;margin-bottom:4px}
.login .sub{color:var(--muted);margin:0 0 20px;font-size:.92rem}.login input{margin-bottom:12px}
.login .primary{width:100%;justify-content:center}.login .msg{color:var(--bad);min-height:1.4rem;margin:12px 0 0;font-size:.88rem}

/* ===== Mejoras: resumen, etiquetas, avisos, móvil ===== */
.sum{font-size:.85rem;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.sum input{width:4.5rem;padding:.15rem .3rem}
.sum progress{width:100%;height:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.4rem 0}
.chips button{font-size:.75rem;padding:.1rem .5rem;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;opacity:.7;cursor:pointer}
.chips button.on{opacity:1;font-weight:600}
.badge{float:right;font-size:.7rem;padding:.05rem .4rem;border-radius:999px;border:1px solid currentColor}
.read input[type=checkbox]{cursor:pointer;margin-right:.4rem}
.back{display:none;margin-bottom:.5rem}
@media (max-width:800px){
  .cols:not(.show-detail) main{display:none}
  .cols.show-detail aside{display:none}
  .back{display:inline-block}
}

/* ===== Inicio y navegación móvil ===== */
.home{max-width:760px;margin:0 auto;padding:16px 16px 24px;display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h2{margin:0 0 6px;font-size:1rem;font-family:var(--font-display)}
.home ul{list-style:none;margin:0;padding:0}
.home li a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.home li:first-child a{border-top:0}
.home li.muted,.home p.muted{color:var(--muted);padding:8px 0}
.home .badge{float:none;white-space:nowrap}.home small{color:var(--muted)}.home progress{width:100%}
.qc{display:grid;gap:8px}
.qc textarea{width:100%;min-height:76px;box-sizing:border-box;font:inherit;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.qc .primary{justify-content:center;min-height:48px}
@media (max-width:860px){
  :root{--nav-h:60px}
  input,textarea,select{font-size:16px}
}
@media (min-width:861px){.home{grid-template-columns:1fr 1fr;max-width:1000px}.qc{grid-column:1/-1}}

/* ===== Canvas ===== */
#board{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:10;display:flex;flex-direction:column;background:var(--paper-2)}
#board[hidden],#lw[hidden]{display:none}
.bbar{display:flex;gap:8px;align-items:center;padding:8px;border-bottom:1px solid var(--line);background:var(--surface)}
.btitle{flex:1;min-width:0}
#stage{flex:1;position:relative;overflow:hidden;touch-action:none;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:24px 24px}
#world{position:absolute;left:0;top:0;transform-origin:0 0}
.node{position:absolute;box-sizing:border-box;user-select:none}
.node img{width:100%;display:block;pointer-events:none;border-radius:4px}
.node.txt{background:#fff8c6;color:#222;padding:10px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.25);min-height:40px;font-size:16px;white-space:pre-wrap}
.node.txt textarea{width:100%;min-height:80px;box-sizing:border-box;font:inherit;background:transparent;color:inherit;border:0;outline:0;resize:none}
.node.sel{outline:2px solid var(--accent)}
.rs{position:absolute;right:-10px;bottom:-10px;width:24px;height:24px;border-radius:50%;background:var(--accent);display:none;touch-action:none}
.node.sel .rs{display:block}
.tbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.tbar button,.bbar button{padding:10px 14px;border-radius:999px;border:0;background:none;color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}

/* ===== iOS / app instalada ===== */
html{-webkit-tap-highlight-color:transparent}
body{touch-action:manipulation;overscroll-behavior-y:none}
.site-nav{padding-top:env(safe-area-inset-top)}
body{padding-top:calc(var(--nav-h) + env(safe-area-inset-top))}
#board{top:calc(var(--nav-h) + env(safe-area-inset-top))}

/* ===== Ajustes iOS: sin menú desplegable, cabecera limpia, tabbar fija ===== */
html{height:100%;background:var(--paper);overscroll-behavior-y:none}
body{min-height:100vh;min-height:100dvh}
@media (min-width:861px){.acct{display:none}}
@media (max-width:860px){
  .nav-links,.nav-toggle{display:none}
  .site-nav{box-shadow:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .site-nav .wrap{padding:0 16px}
  .nav-brand img{width:44px;height:44px}
  .theme-toggle{margin-left:auto}
}

/* =========================================================
   Tab bar — cristal flotante estilo iOS 26 (Liquid Glass)
   ========================================================= */
:root{
  --tab-h:66px;
  --tab-bottom:max(8px,calc(env(safe-area-inset-bottom,0px) - 8px));
  --tab-space:calc(var(--tab-h) + var(--tab-bottom) + 14px);
  --glass-bg:rgba(255,255,255,.55); --glass-edge:rgba(255,255,255,.75); --glass-shadow:rgba(20,30,60,.18);
  --glass-active:rgba(0,0,0,.07); --tab-idle:#5f5f5c; --tab-on:#155efc;
}
[data-theme="dark"]{
  --glass-bg:rgba(44,44,46,.5); --glass-edge:rgba(255,255,255,.14); --glass-shadow:rgba(0,0,0,.55);
  --glass-active:rgba(0,0,0,.38); --tab-idle:#b4b4b0; --tab-on:#4b86ff;
}
.tabbar{display:none}
@media (max-width:860px){
  body{padding-bottom:var(--tab-space)}
  #board{bottom:var(--tab-space)}
  .tabbar{
    display:flex;align-items:stretch;gap:2px;
    position:fixed;z-index:60;left:12px;right:12px;bottom:var(--tab-bottom);height:var(--tab-h);
    max-width:460px;margin:0 auto;padding:5px;border-radius:999px;
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
    border:1px solid var(--glass-edge);
    box-shadow:0 12px 32px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06)}
  .tabbar a{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border-radius:999px;color:var(--tab-idle);text-decoration:none;font-size:.62rem;font-weight:500;letter-spacing:.01em;
    -webkit-user-select:none;user-select:none;transition:background .25s ease,color .25s ease,transform .15s ease}
  .tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar a:active{transform:scale(.93)}
  .tabbar a.active{color:var(--tab-on);font-weight:600;background:var(--glass-active);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tabbar{background:var(--surface)}
}

/* ===== Móvil: cabecera limpia (sin degradado oscuro) y fix de barra en páginas sin scroll ===== */
@media (max-width:860px){
  .site-nav{background:linear-gradient(100deg,#1a66ff 0%,#2f9bff 55%,#35c3ff 100%)}
  /* iOS standalone coloca mal los elementos fixed en páginas que no hacen scroll (Canvas):
     garantizamos que el documento siempre sea un poco más alto que la pantalla */
  html{height:auto;min-height:100%}
  body{min-height:calc(100dvh + 2px)}
  body[data-kind="canvas"]{overscroll-behavior:none}
}

/* ===== Teléfono / app instalada: sin footer, cabecera sólida, tabbar sin salto visible ===== */
@media (max-width:860px){
  .site-footer{display:none!important}
  .site-nav,[data-theme="dark"] .site-nav{background:#1a66ff!important;background-image:none!important;box-shadow:none}
  .tabbar{opacity:0}
  .tabbar.ready{opacity:1;transition:opacity .25s ease}
}
@media (display-mode:standalone){.site-footer{display:none!important}}