/* ── Variables ───────────────────────────────────────── */ /* Paleta base: modo oscuro (default). El modo claro y los temas de color se aplican con atributos en (data-modo, data-tema) — ver theme.js. */ :root { --bg: #0f1117; --bg2: #1a1d27; --bg3: #22263a; --border: #2e3250; --accent: #4f8ef7; --accent-h: #3a7ce0; /* Tono aparte para fondo de botón primario con texto blanco: --accent solo da 3.2:1 de contraste ahí (falla WCAG AA, que pide 4.5:1) — se usa tal cual para texto/enlaces sobre fondo oscuro, donde sí contrasta bien. */ --accent-btn: #1d6fe0; --accent-btn-h: #1857b3; --green: #22c55e; --red: #ef4444; --yellow: #eab308; --orange: #f97316; --purple: #a855f7; --text: #e2e8f0; --muted: #94a3b8; /* 224px (antes 200px): con encabezados de sección y etiquetas largas como "Actividad por sucursal" dejaba de sobrar aire; el modo compacto no usa esta variable (queda fijo en 64px, ver bloque @media min-width:1025px). */ --sidebar-w: 224px; } /* ── Modo claro ──────────────────────────────────────── */ :root[data-modo="claro"] { --bg: #f4f6fb; --bg2: #ffffff; --bg3: #eef1f8; --border: #dbe2f0; --text: #1e293b; --muted: #64748b; --fondo-overlay: rgba(244,246,251,.88); } :root { --fondo-overlay: rgba(15,17,23,.88); } /* ── Temas de color (independientes del modo claro/oscuro) ── "azul" es el default ya definido arriba, no necesita override. */ :root[data-tema="verde"] { --accent: #22c55e; --accent-h: #16a34a; --accent-btn: #15803d; --accent-btn-h: #116830; } :root[data-tema="purpura"] { --accent: #a855f7; --accent-h: #9333ea; --accent-btn: #9333ea; --accent-btn-h: #7e22ce; } :root[data-tema="naranja"] { --accent: #f97316; --accent-h: #ea580c; --accent-btn: #c2410c; --accent-btn-h: #9a3412; } /* ── Ajustes de contraste en modo claro para elementos que en oscuro usan colores oscuros translúcidos como fondo (chips, toasts, botones de estado): en un lienzo blanco esos mismos tonos oscuros se ven sucios, así que se invierten a fondo claro + texto oscuro saturado. */ :root[data-modo="claro"] { --chip-green-bg: #dcfce7; --chip-green-fg: #15803d; --chip-green-bd: #86efac; --chip-red-bg: #fee2e2; --chip-red-fg: #b91c1c; --chip-red-bd: #fca5a5; --chip-yellow-bg:#fef9c3; --chip-yellow-fg:#a16207; --chip-yellow-bd:#fde047; --chip-blue-bg: #dbeafe; --chip-blue-fg: #1d4ed8; --chip-blue-bd: #93c5fd; --chip-purple-bg:#f3e8ff; --chip-purple-fg:#7e22ce; --chip-purple-bd:#d8b4fe; --chip-orange-bg:#ffedd5; --chip-orange-fg:#c2410c; --chip-orange-bd:#fdba74; --hover-tint: #00000008; --banner-warn-bg: #fef3c7; --banner-warn-fg: #92400e; --banner-danger-bg: #fee2e2; --banner-danger-fg: #991b1b; } :root { --chip-green-bg: #14532d44; --chip-green-fg: #4ade80; --chip-green-bd: #4ade8033; --chip-red-bg: #7f1d1d44; --chip-red-fg: #f87171; --chip-red-bd: #f8717133; --chip-yellow-bg:#78350f44; --chip-yellow-fg:#fbbf24; --chip-yellow-bd:#fbbf2433; --chip-blue-bg: #1e3a8a44; --chip-blue-fg: #60a5fa; --chip-blue-bd: #60a5fa33; --chip-purple-bg:#4c1d9544; --chip-purple-fg:#c4b5fd; --chip-purple-bd:#c4b5fd33; --hover-tint: #ffffff05; --banner-warn-bg: #78350f88; --banner-warn-fg: #fde68a; --banner-danger-bg: #7f1d1d88; --banner-danger-fg: #fecaca; --chip-orange-bg:#7c2d1244; --chip-orange-fg:#fb923c; --chip-orange-bd:#fb923c33; } /* ── Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } button { cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 13px; } .hidden { display: none !important; } .w-full { width: 100%; } .px-3 { padding-left: 12px; padding-right: 12px; } .mb-2 { margin-bottom: 8px; } .text-sm { font-size: 12px; } .text-muted { color: var(--muted); } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-yellow { color: var(--yellow); } .text-accent { color: var(--accent); } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .font-bold { font-weight: 700; } /* ── Íconos (SVG en línea, ver js/icons.js) ───────────── 1em × 1em: hereda el font-size del contenedor (botón, ítem de nav, etc.), así que no hace falta una regla de tamaño distinta por cada lugar donde se usa — el mismo comportamiento que tenían los emoji que reemplazan. */ .icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.15em; } .icon-sm { width: .85em; height: .85em; } .icon-lg { width: 1.3em; height: 1.3em; } /* ── Scrollbar ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ── Toast ───────────────────────────────────────────── */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { padding: 12px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; min-width: 240px; max-width: 360px; box-shadow: 0 4px 16px #0006; animation: slideIn .25s ease; pointer-events: auto; display: flex; align-items: center; gap: 10px; } .toast.hide { animation: slideOut .25s ease forwards; } .toast-success { background: #14532d; border: 1px solid var(--green); color: #bbf7d0; } .toast-error { background: #7f1d1d; border: 1px solid var(--red); color: #fecaca; } .toast-info { background: #1e3a8a; border: 1px solid var(--accent); color: #bfdbfe; } .toast-warn { background: #78350f; border: 1px solid var(--yellow); color: #fde68a; } @keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOut { to { opacity: 0; transform: translateX(30px); } } /* ── Modal ───────────────────────────────────────────── */ #modal-overlay { position: fixed; inset: 0; background: #000a; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } #modal-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; } #modal-box.modal-wide { max-width: 820px; } #modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); } #modal-title { font-size: 16px; font-weight: 700; } #modal-close { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px; transition: .15s; } #modal-close:hover { background: var(--bg3); color: var(--text); } #modal-body { padding: 14px; } /* ── Confirm ─────────────────────────────────────────── */ #confirm-overlay { position: fixed; inset: 0; background: #000a; z-index: 1100; display: flex; align-items: center; justify-content: center; } #confirm-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 28px 24px; max-width: 360px; width: 100%; } #confirm-msg { margin-bottom: 20px; font-size: 14px; line-height: 1.6; } .confirm-btns { display: flex; gap: 10px; justify-content: flex-end; } /* ── Login ───────────────────────────────────────────── */ #login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; } .login-layout { width: min(1120px, 100%); min-height: 660px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); overflow: hidden; background: var(--bg2); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 28px 80px #0008; } .login-layout-wide { grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); } .login-layout-wide .login-form-panel { padding: 36px; } .login-visual { position: relative; min-height: 660px; overflow: hidden; isolation: isolate; background: #101725; } .login-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; transition: transform .7s ease; } .login-layout:hover .login-visual img { transform: scale(1.015); } .login-form-panel { display: flex; align-items: center; justify-content: center; padding: 48px; } .login-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 40px 36px; width: 100%; max-width: 380px; } .login-form-panel .login-card { border: 0; border-radius: 0; padding: 0; } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo .login-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto; border-radius: 18px; background: linear-gradient(145deg, var(--accent), var(--accent-btn)); color: #fff; font-size: 30px; box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 30%, transparent); } .login-logo h1 { font-size: 25px; font-weight: 750; margin-top: 16px; letter-spacing: -.025em; } .login-logo p { color: var(--muted); font-size: 13px; margin-top: 5px; } .login-error { background: var(--chip-red-bg); border: 1px solid var(--red); color: var(--chip-red-fg); padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; } .login-ok { background: var(--chip-green-bg); border: 1px solid var(--green); color: var(--chip-green-fg); padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; } .login-card-wide { max-width: 460px; } .login-forgot { text-align: right; margin-top: -8px; } .login-forgot a { font-size: 12px; } .login-switch { text-align: center; font-size: 12px; color: var(--muted); margin-top: 18px; } @media (max-width: 860px) { #login-screen { padding: 0; } .login-layout { min-height: 100vh; grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr); border: 0; border-radius: 0; } .login-visual { min-height: 100vh; } .login-form-panel { padding: 36px 28px; } } @media (max-width: 680px) { #login-screen { align-items: stretch; } .login-layout { display: block; background: var(--bg); } .login-visual { min-height: 220px; height: 30vh; max-height: 280px; } .login-visual img { object-position: center 53%; } .login-form-panel { min-height: 70vh; align-items: flex-start; padding: 34px 24px 40px; } .login-logo { margin-bottom: 24px; } .login-logo .login-icon { width: 50px; height: 50px; border-radius: 15px; font-size: 26px; } .login-logo h1 { margin-top: 12px; font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .login-visual img { transition: none; } } /* ── App Shell ───────────────────────────────────────── */ #app-shell { display: flex; min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────── */ /* overflow NO va acá: #sidebar-footer vive dentro de este contenedor y sus menús desplegables (notificaciones/cuenta) necesitan poder salirse del recuadro del sidebar sin recortarse — el scroll interno del menú de navegación vive en #sidebar-nav en su lugar (mismo patrón que Market). */ #sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .sidebar-logo-text { flex: 1; min-width: 0; } .logo-icon { font-size: 22px; } .logo-title { font-weight: 700; font-size: 14px; } .logo-sub { font-size: 11px; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } #sidebar-compact-toggle { background: none; border: none; color: var(--muted); font-size: 15px; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; } #sidebar-compact-toggle:hover { background: var(--bg3); color: var(--text); } #sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; } /* ── Pie del sidebar: tema, notificaciones y cuenta (estilo Discord/Slack, igual que 1000tonMarket) — antes vivían en el topbar. */ #sidebar-footer { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; flex-shrink: 0; border-top: 1px solid var(--border); } #sidebar-footer #notif-wrap { width: 100%; } #sidebar-footer #notif-btn, #sidebar-footer #theme-toggle-btn { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; font-size: 17px; } #sidebar-footer #notif-btn:hover, #sidebar-footer #theme-toggle-btn:hover { background: var(--bg3); } #sidebar-footer .sidebar-footer-label { font-size: 13px; font-weight: 600; color: var(--text); } #sidebar-footer .notif-badge { position: static; margin-left: auto; transform: none; } #sidebar-footer .user-avatar { width: 30px; height: 30px; font-size: 12px; } /* .nav-item es un