/* shell-critical.css — Capa 1 del App Shell (anti-FOUC). Carga síncrona en ; cacheable. Mínimo inline en dashboard.html como red de seguridad. */ :root { --bg-body: #060607; --bg-elevated: #1a1a20; --bg-surface: #121215; --text-primary: #fafafa; --text-muted: #71717a; --primary: #60a5fa; --text-link: #60a5fa; --primary-soft: rgba(96, 165, 250, 0.15); --border: rgba(255, 255, 255, 0.08); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: #060607; color: #fafafa; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; /* El rebote de scroll (iOS/macOS/Chrome) descubre el fondo de por encima y por debajo del contenido. Con `contain` deja de propagarse y el borde negro al llegar arriba o abajo desaparece. */ overscroll-behavior-y: contain; } /* El fondo de arriba es oscuro y estaba fijo, asi que en tema claro las superficies eran blancas pero seguia casi negro: al hacer scroll hasta el tope aparecia una franja negra arriba, y otra abajo al volver. Lo pone licitia-theme.js con `theme-light` en , antes de pintar. */ html.theme-light, html.theme-light body { background: #f4f5f7; color: #111827; } /* Que el navegador pinte tambien sus propios elementos —barras de scroll, autofill de formularios, controles nativos— en el modo correcto. */ html { color-scheme: dark; } html.theme-light { color-scheme: light; } html.licitia-boot-pending, body.licitia-boot-pending { overflow: hidden; background: #060607; } /* El overlay de arranque tambien: si no, la pantalla de carga sale negra en tema claro y luego salta a blanco de golpe. */ html.theme-light.licitia-boot-pending, html.theme-light body.licitia-boot-pending { background: #f4f5f7; } body.licitia-boot-pending > *:not(#bootOverlay) { visibility: hidden; opacity: 0; pointer-events: none; } #bootOverlay { visibility: visible !important; opacity: 1 !important; z-index: 10000; } .licitia-boot-spinner { width: 42px; height: 42px; margin: 0 auto 14px; border: 3px solid rgba(96, 165, 250, 0.2); border-top-color: #60a5fa; border-radius: 50%; animation: licitia-boot-spin 0.75s linear infinite; } @keyframes licitia-boot-spin { to { transform: rotate(360deg); } } .licitia-boot-retry { margin-top: 12px; padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.12); color: #60a5fa; font-size: 12px; font-weight: 700; cursor: pointer; } .licitia-boot-retry:hover { background: rgba(96, 165, 250, 0.2); } .licitia-boot-slow { font-size: 11px; line-height: 1.45; margin: 8px 0 0; color: #71717a; } /* Layout shell mínimo (sin Tailwind CDN) */ .lic-shell-body, body.flex { display: flex; flex-direction: row; min-height: 100vh; } .lic-shell-sidebar, aside.sidebar { display: none; width: 18rem; flex-shrink: 0; flex-direction: column; } .lic-shell-main, main.flex-grow { flex: 1 1 auto; min-width: 0; width: 100%; padding: 1rem; padding-bottom: 88px; } .lic-shell-mobheader, #licMobHeader { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .lic-shell-mobheader__title { font-size: 1.5rem; font-weight: 900; color: #60a5fa; } .lic-shell-avatar, #mobAvatarInitial { width: 2.25rem; height: 2.25rem; max-width: 2.25rem; max-height: 2.25rem; border-radius: 9999px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 900; color: #fff; background: linear-gradient(to top right, #2563eb, #22c55e); } #avatarInitial.lic-shell-avatar--sm { width: 2rem; height: 2rem; max-width: 2rem; max-height: 2rem; } .lic-shell-mobnav, #mobBottomNav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; justify-content: space-around; background: #1a1a20; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 4px 16px; } .mob-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 4px; border: none; border-radius: 12px; background: transparent; color: #71717a; font-size: 11px; font-weight: 700; cursor: pointer; } .mob-nav-btn i { font-size: 18px; max-height: 22px; overflow: hidden; } @media (min-width: 768px) { .lic-shell-sidebar, aside.sidebar { display: flex; } .lic-shell-mobheader, #licMobHeader { display: none; } .lic-shell-mobnav, #mobBottomNav { display: none !important; } } .section { display: none !important; } .section.active { display: block !important; } .hidden { display: none; }