/* ══════════════════════════════════════════════════════════════════════════
   LAB 3D · css/main.css — Tokens, tipografía y estructura general
   Tema CLARO en :root · el tema OSCURO vive en dark.css
   ══════════════════════════════════════════════════════════════════════════ */

:root{
	/* Superficies */
	--bg:#eef2f7;
	--bg-grad:radial-gradient(1200px 600px at 15% -10%,#dbeafe 0%,transparent 60%),
	          radial-gradient(900px 500px at 100% 0%,#e9d5ff 0%,transparent 55%);
	--panel:#ffffff;
	--panel-2:#f6f8fc;
	--panel-3:#eceff5;
	--line:#d7dee9;
	--line-soft:#e6ebf2;

	/* Texto */
	--text:#0f172a;
	--text-2:#334155;
	--dim:#64748b;
	--dim-2:#94a3b8;

	/* Acentos */
	--acc:#0891b2;      --acc-soft:rgba(8,145,178,.12);
	--acc-2:#6366f1;    --acc-2-soft:rgba(99,102,241,.12);
	--ok:#059669;       --ok-soft:rgba(5,150,105,.12);
	--warn:#b45309;     --warn-soft:rgba(180,83,9,.12);
	--bad:#dc2626;      --bad-soft:rgba(220,38,38,.12);
	--info:#2563eb;     --info-soft:rgba(37,99,235,.12);

	/* Niveles de la regla fundamental (verde/amarillo/rojo) */
	--n-sim:#059669;
	--n-prep:#b45309;
	--n-real:#dc2626;

	/* Formas */
	--r-s:8px; --r:14px; --r-l:20px; --r-xl:26px;
	--sh-1:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.05);
	--sh-2:0 4px 12px rgba(15,23,42,.08),0 12px 32px rgba(15,23,42,.07);
	--sh-3:0 20px 60px rgba(15,23,42,.16);
	--ring:0 0 0 3px var(--acc-soft);

	/* Tipografía local (root/font/fonts.css); si falta, cae al sistema */
	--font:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
	--font-t:'Space Grotesk','Sora','Segoe UI',system-ui,sans-serif;
	--font-m:'JetBrains Mono','Consolas','Courier New',monospace;

	--sidebar-w:264px;
	--topbar-h:60px;
	--dur:.22s;
}

/* Reducción de movimiento: respetamos la preferencia del sistema */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;
	color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;
	-webkit-font-smoothing:antialiased;overflow:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--font-t);font-weight:700;line-height:1.25;margin:0 0 .5em}
h1{font-size:1.7rem;letter-spacing:-.02em}
h2{font-size:1.28rem}
h3{font-size:1.06rem}
h4{font-size:.95rem}
p{margin:0 0 .9em}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre{font-family:var(--font-m)}
b,strong{font-weight:800;color:var(--text)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* ───────────────────────── ESTRUCTURA ───────────────────────── */
#app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;
     grid-template-areas:"brand topbar" "side main";height:100vh;height:100dvh}

/* Marca */
#brand{grid-area:brand;display:flex;align-items:center;gap:10px;padding:0 14px;
       border-right:1px solid var(--line);border-bottom:1px solid var(--line);
       background:var(--panel);min-width:0}
#brand .lg{width:34px;height:34px;flex:0 0 auto}
#brand .tt{min-width:0}
#brand .tt b{display:block;font-family:var(--font-t);font-size:1.02rem;letter-spacing:.02em;line-height:1.1}
#brand .tt span{display:block;font-size:.68rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Barra superior */
#topbar{grid-area:topbar;display:flex;align-items:center;gap:10px;padding:0 14px;
        border-bottom:1px solid var(--line);background:var(--panel);position:relative;z-index:30}
#topbar .crumb{font-family:var(--font-t);font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar .sp{flex:1}
#btnMenu{display:none}

/* Buscador */
.search{position:relative;width:min(340px,38vw)}
.search input{width:100%;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);
              color:var(--text);padding:0 34px 0 34px;font-family:var(--font);font-size:.9rem}
.search input:focus{outline:none;border-color:var(--acc);box-shadow:var(--ring);background:var(--panel)}
.search .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.62rem;color:var(--dim);
            border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:var(--panel)}
.search-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);
            border-radius:var(--r);box-shadow:var(--sh-3);max-height:60vh;overflow:auto;z-index:60;padding:6px}
.search-res .it{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-s);cursor:pointer}
.search-res .it:hover,.search-res .it.sel{background:var(--acc-soft)}
.search-res .it .t{font-weight:700;font-size:.88rem}
.search-res .it .d{font-size:.74rem;color:var(--dim)}
.search-res .gh{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim-2);padding:8px 10px 4px;font-weight:800}
.search-res .empty{padding:16px;text-align:center;color:var(--dim);font-size:.85rem}

/* Barra lateral */
#side{grid-area:side;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;
      padding:10px 8px 24px;scrollbar-width:thin}
.nav-g{margin:14px 0 4px;padding:0 10px;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
       color:var(--dim-2);font-weight:800}
.nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;
       color:var(--text-2);font-size:.88rem;font-weight:600;position:relative;transition:background var(--dur),color var(--dur);
       border:none;background:none;width:100%;text-align:left;font-family:var(--font)}
.nav-i .em{font-size:1.02rem;width:20px;text-align:center;flex:0 0 auto}
.nav-i .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-i:hover{background:var(--panel-3);color:var(--text)}
.nav-i.on{background:linear-gradient(90deg,var(--acc-soft),transparent);color:var(--acc);font-weight:800}
.nav-i.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
.nav-i .pip{font-size:.62rem;font-weight:800;padding:1px 6px;border-radius:999px;background:var(--acc-soft);color:var(--acc)}
.nav-i[data-lock="1"]{opacity:.55}
.nav-i[data-lock="1"] .lockic{font-size:.8rem}

/* Contenido */
#main{grid-area:main;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;position:relative}
.view{padding:22px 26px 60px;max-width:1320px;margin:0 auto;animation:vin var(--dur) ease}
.view.wide{max-width:none}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.page-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-h .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;
            background:var(--acc-soft);color:var(--acc);flex:0 0 auto}
.page-h .tx{flex:1;min-width:220px}
.page-h .tx h1{margin:0 0 2px}
.page-h .tx p{margin:0;color:var(--dim);font-size:.9rem}
.page-h .ac{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Rejillas */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.split{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 330px;align-items:start}
.split.l{grid-template-columns:330px minmax(0,1fr)}

/* Utilidades */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.nw{flex-wrap:nowrap}
.col{display:flex;flex-direction:column;gap:8px}
.sp{flex:1}
.mut{color:var(--dim)}
.sm{font-size:.82rem}
.xs{font-size:.72rem}
.center{text-align:center}
.mono{font-family:var(--font-m)}
.hide{display:none!important}
.nowrap{white-space:nowrap}
.mt{margin-top:14px}.mt2{margin-top:24px}.mb{margin-bottom:14px}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Barra de carga superior */
#bar{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc-2));
     z-index:999;transition:width .3s ease,opacity .3s ease;opacity:0}
#bar.on{opacity:1}