/* ══════════════════════════════════════════════════════════════════════════
   LAB 3D · css/responsive.css — Computador, tablet, pantalla táctil y móvil
   ══════════════════════════════════════════════════════════════════════════ */

/* Pantallas medianas: el panel lateral se estrecha */
@media (max-width:1180px){
	:root{--sidebar-w:224px}
	.split{grid-template-columns:minmax(0,1fr) 290px}
	.split.l{grid-template-columns:290px minmax(0,1fr)}
}

/* Tablet y menos: el panel lateral se convierte en cajón deslizante */
@media (max-width:900px){
	#app{grid-template-columns:1fr;grid-template-areas:"topbar" "main";grid-template-rows:var(--topbar-h) 1fr}
	#brand{display:none}
	#btnMenu{display:inline-flex}
	#side{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:120;transform:translateX(-100%);
	      transition:transform .24s cubic-bezier(.2,.85,.3,1);box-shadow:var(--sh-3);padding-top:8px}
	#side.open{transform:none}
	#side .side-brand{display:flex;align-items:center;gap:10px;padding:10px 12px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
	#scrim{position:fixed;inset:0;background:rgba(5,10,20,.5);z-index:110;opacity:0;pointer-events:none;transition:opacity .24s}
	#scrim.on{opacity:1;pointer-events:auto}
	.view{padding:16px 14px 60px}
	.split,.split.l{grid-template-columns:minmax(0,1fr)}
	.search{width:auto;flex:1}
	.search kbd{display:none}
	.page-h .tx{min-width:150px}
}

/* Móvil */
@media (max-width:620px){
	body{font-size:14.5px}
	h1{font-size:1.35rem}
	.view{padding:14px 11px 70px}
	.g2,.g3,.g4{grid-template-columns:1fr}
	.grid{gap:11px}
	.card{padding:13px 14px;border-radius:var(--r)}
	.modal{width:100%;max-height:92vh;border-radius:var(--r-l)}
	.modal-f{border-radius:0}
	.page-h{gap:10px}
	.page-h .ic{width:38px;height:38px;font-size:1.15rem}
	#toasts{left:12px;right:12px;max-width:none}
	.stage{min-height:260px}
	.tbl{font-size:.8rem}
	.tbl th,.tbl td{padding:6px 8px}
	.tl-i{width:132px}
	.bar-r{grid-template-columns:96px 1fr 28px}
	.kv{grid-template-columns:1fr;gap:1px 0}
	.kv dd{margin-bottom:7px}
}

/* Pantalla táctil grande / tablero digital: objetivos táctiles más amplios */
@media (pointer:coarse){
	.btn{height:40px;padding:0 16px}
	.btn.sm{height:34px}
	.btn.ico{width:40px}
	.nav-i{padding:11px 10px}
	.chip{padding:8px 14px}
	.chk .st{width:36px;height:36px}
	.qz-op{padding:14px}
	.search input{height:40px}
}

/* Pantallas muy anchas */
@media (min-width:1700px){
	.view{max-width:1520px}
}

/* Impresión: hojas limpias para entregar en papel */
@media print{
	#side,#topbar,#brand,#toasts,#bar,.no-print{display:none!important}
	#app{display:block;height:auto}
	#main{overflow:visible;height:auto}
	body{background:#fff;color:#000;overflow:visible}
	.view{padding:0;max-width:none}
	.card,.stat{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
	.tile{break-inside:avoid}
	a[href^="http"]::after{content:' (' attr(href) ')';font-size:.7em;color:#555}
}