/* 06-responsive.css — Adaptabilidad a cualquier pantalla (8k/4k/2k/1080/720/tablet/smartphone). Aditivo: solo actúa en sus breakpoints, el desktop clásico queda intacto. El CRM añade una clase de dispositivo a (dev-xl / dev-lg / dev-md / dev-sm / dev-xs) desde JS para ajustes finos. */ /* ── Base: nunca scroll horizontal accidental; todo lo ancho scrollea DENTRO de su caja ── */ html,body{max-width:100%;overflow-x:hidden} .view{overscroll-behavior:contain} img,video{max-width:100%} /* Tablas anchas (auditoría de mensajes, etc.): scrollean en su propio contenedor, no rompen la página */ .msgtblwrap,.gui-tblwrap,.ovtblwrap{overflow-x:auto} /* Botón hamburguesa (solo aparece en móvil) */ .navburger{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer;margin-right:6px;flex:none} .navburger:hover{border-color:var(--accent2);color:var(--accent2)} .navburger svg,.navburger .chico{width:18px;height:18px} /* ── PANTALLAS ENORMES (2K / 4K / 8K): centra y no deja que el contenido se estire hasta lo absurdo ── */ @media (min-width:2200px){ .shell{max-width:2000px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)} .bar{padding-left:max(18px,calc((100vw - 2000px)/2 + 18px));padding-right:max(14px,calc((100vw - 2000px)/2 + 14px))} } @media (min-width:3400px){ :root{font-size:18px} /* escala general en 4K+ para que no se vea diminuto */ .shell{max-width:2560px;height:calc(100vh - 64px)} } @media (min-width:6000px){ :root{font-size:22px} /* 8K */ .shell{max-width:3400px} } /* ── TABLET / PORTÁTIL PEQUEÑO (≤1100px) ── */ @media (max-width:1100px){ .shell{grid-template-columns:172px 1fr} .app{grid-template-columns:minmax(0,1fr) 340px;gap:10px;padding:12px} /* Bandeja: oculta el panel derecho, chat protagonista */ .app > .col:nth-child(3){display:none} } /* ── MÓVIL (≤720px): nav en cajón deslizante + Bandeja deslizable por paneles ── */ @media (max-width:720px){ .navburger{display:inline-flex} .shell{grid-template-columns:1fr} .nav{position:fixed;top:56px;left:0;bottom:0;width:min(82vw,280px);z-index:9200;transform:translateX(-102%); transition:transform .26s cubic-bezier(.3,.9,.3,1);box-shadow:18px 0 50px rgba(0,0,0,.6)} body.navopen .nav{transform:none} body.navopen .nav-scrim{position:fixed;inset:56px 0 0 0;z-index:9100;background:rgba(4,8,16,.6);backdrop-filter:blur(2px)} /* Bandeja: los 3 paneles en carrusel horizontal con snap (deslizas entre lista / chat / ficha) */ .app{grid-template-columns:none;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding:10px} .app > .col{flex:0 0 88vw;scroll-snap-align:start;min-width:0} .app > .col:nth-child(3){display:flex} /* La barra superior se compacta: oculta lo secundario, deja lo esencial */ .bar{gap:6px;padding:0 10px;overflow-x:auto} .bar .tag{display:none} /* Secciones con cabecera grande: reduce el título para que quepa */ .seq-title{font-size:22px} } /* ── MÓVIL PEQUEÑO (≤430px) ── */ @media (max-width:430px){ .app > .col{flex:0 0 92vw} .seq-title{font-size:19px} .seq-sub{font-size:11.5px} } /* Respeta a quien pide menos movimiento */ @media (prefers-reduced-motion:reduce){ .nav{transition:none} }