/* Gioia Analytics — sistema visual "Elite Dark" Misma ADN que la app de Ventas Diarias (Montserrat + Lato + dorado #d9b957), en variante oscura para el holding: Stripe/Linear-dark con acento GIOIA. */ :root { --bg: #0e0f12; --surface: #16181d; --surface-2: #1c1f26; --border: rgba(255, 255, 255, .06); --border-strong: rgba(255, 255, 255, .12); --text: #eef0f3; --text-bright: #e2e8f0; --muted: #8b90a0; --muted-2: #5f6473; --chart-label: rgba(255, 255, 255, .85); --gold: #d9b957; --gold-hover: #b3963c; --gold-soft: rgba(217, 185, 87, .12); --green: #4cae7c; --green-bg: rgba(76, 174, 124, .12); --red: #e5675c; --red-bg: rgba(229, 103, 92, .12); --radius: 14px; --radius-sm: 12px; --transition: 150ms ease; --font-ui: 'Montserrat', sans-serif; --font-body: 'Lato', sans-serif; } /* ===== Estilo Blanco (Light Mode) — activado con data-theme="light" en vía el switch de la barra de navegación. Mismas variables, otra paleta. ===== */ :root[data-theme="light"] { --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eef0f4; --border: rgba(20, 24, 34, .10); --border-strong: rgba(20, 24, 34, .18); --text: #262b38; --text-bright: #1c202b; --muted: #6b7280; --muted-2: #98a0ac; --chart-label: rgba(38, 43, 56, .82); --gold-soft: rgba(217, 185, 87, .16); --green-bg: rgba(76, 174, 124, .14); --red-bg: rgba(229, 103, 92, .14); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-body); } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } html, body { background: var(--bg); color: var(--text); min-height: 100vh; transition: background var(--transition), color var(--transition); } /* Bootstrap 5.3 (CDN) trae su propio --bs-body-color/--bs-emphasis-color en modo claro; en elementos sin clase de Bootstrap (table/td/th "pelados" que usamos en .rank-table) esas variables igual pueden filtrarse a un texto casi negro sobre nuestro fondo oscuro. Se fija el color explícito en cada contenedor de texto en vez de confiar en la herencia. */ table, th, td { color: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold-soft); color: var(--gold); } /* ===================== LOGIN (calcado de la app actual) ===================== */ .gioia-login { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(ellipse at 50% 22%, #2c2a34 0%, #1a1920 52%, #0f0e13 100%); display: flex; align-items: center; justify-content: center; padding: 22px; overflow: auto; } .login-box { width: 100%; max-width: 370px; text-align: center; position: relative; z-index: 2; } .login-emblema { margin: 0 auto 16px; } .login-emblema img { width: 175px; max-width: 60%; } .login-sub { font-family: var(--font-ui); color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; } .login-desc { color: #a9a5b2; font-size: 12.5px; line-height: 1.7; letter-spacing: .5px; margin-bottom: 26px; } .l-campo { position: relative; margin: 11px 0; } .l-campo svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #8d8a95; pointer-events: none; z-index: 1; } .gioia-login label { display: block; text-align: left; color: #8d8a95; font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px; margin: 13px 0 5px 16px; } .gioia-login input { width: 100%; background: rgba(255, 255, 255, .08); border: none; border-radius: 30px; padding: 13px 18px 13px 44px; color: #fff; font-size: 13.5px; font-family: var(--font-body); transition: background var(--transition), box-shadow var(--transition); } .gioia-login input::placeholder { color: #5f5c69; } .gioia-login input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--gold); background: rgba(255, 255, 255, .12); } #l-btn { margin-top: 20px; width: 100%; background: var(--gold); border: none; color: #1a1920; padding: 14px; letter-spacing: 3.5px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .25s; border-radius: 30px; } #l-btn:hover { background: #e8ca70; transform: translateY(-1px); } #l-btn:active { background: var(--gold-hover); } #l-msg { color: #e08a83; font-size: 12.5px; margin-top: 14px; min-height: 17px; } .login-foot { color: #55525e; font-size: 10.5px; margin-top: 36px; letter-spacing: 1.2px; line-height: 1.9; } /* ===================== APP SHELL ===================== */ header.gioia-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .topbar { max-width: 1320px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .brand-block { display: flex; align-items: center; gap: 14px; } #logo-gioia { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .95; } [data-theme="light"] #logo-gioia { filter: none; opacity: 1; } .header-sub { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); letter-spacing: 2.5px; text-transform: uppercase; border-left: 2px solid var(--gold); padding-left: 12px; } nav.gioia-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .nav-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .nav-tabs a, .nav-tabs span.nav-disabled { font-family: var(--font-ui); background: none; border: none; color: var(--muted); padding: 10px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; border-radius: var(--radius-sm); letter-spacing: .4px; transition: all var(--transition); display: inline-flex; align-items: center; gap: 7px; } .nav-tabs a:hover { color: var(--gold); background: var(--surface-2); } .nav-tabs a.active { background: var(--gold-soft); color: var(--gold); } .nav-tabs span.nav-disabled { cursor: default; opacity: .55; } .badge-pronto { font-family: var(--font-ui); font-size: 8.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--border-strong); color: var(--muted); padding: 2px 7px; border-radius: 20px; } /* ===== Switch de tema (Estilo Oscuro / Estilo Blanco) ===== Un solo ícono (luna en oscuro, sol en claro) dentro de la perilla que se desliza — evita el amontonamiento de dos glifos + perilla en 46px que hacía ver el control desordenado. */ .theme-toggle { background: none; border: none; cursor: pointer; padding: 3px; line-height: 0; border-radius: 20px; } .theme-toggle:hover .theme-toggle-track { border-color: var(--gold); } .theme-toggle-track { position: relative; display: inline-block; width: 42px; height: 22px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border-strong); transition: background var(--transition), border-color var(--transition); } .theme-toggle-thumb { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; transition: transform var(--transition) cubic-bezier(.4,0,.2,1), background var(--transition); } [data-theme="light"] .theme-toggle-thumb { transform: translateX(20px); background: #f0c34d; } .tt-icon { position: absolute; width: 11px; height: 11px; color: #1a1920; transition: opacity var(--transition), transform var(--transition); } .tt-icon.tt-sun { opacity: 0; transform: scale(.5) rotate(-45deg); } .tt-icon.tt-moon { opacity: 1; transform: scale(1) rotate(0); } [data-theme="light"] .tt-icon.tt-sun { opacity: 1; transform: scale(1) rotate(0); } [data-theme="light"] .tt-icon.tt-moon { opacity: 0; transform: scale(.5) rotate(45deg); } .nav-user { display: flex; gap: 12px; align-items: center; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--border); } .chip-role { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; white-space: nowrap; background: var(--gold-soft); color: var(--gold); } .chip-role.rol-gerente_local { background: rgba(143, 195, 232, .14); color: #8fc3e8; } .chip-role.rol-ejecutivo { background: rgba(180, 143, 232, .14); color: #b48fe8; } #btn-salir { font-family: var(--font-ui); background: none; border: none; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; cursor: pointer; transition: color var(--transition); } #btn-salir:hover { color: var(--red); } main.gioia-main { max-width: 1320px; margin: 0 auto; padding: 26px 20px 60px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; } .card h2 { font-family: var(--font-ui); font-size: 13px; margin-bottom: 16px; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .card h2 .light { color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: 11.5px; text-transform: none; letter-spacing: 0; } footer.gioia-footer { text-align: center; padding: 22px 16px; margin-top: 30px; color: var(--muted-2); font-size: 10.5px; letter-spacing: .6px; } /* ===================== FILTERS ===================== */ .filters-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 22px; } .filter-group { display: flex; flex-direction: column; gap: 6px; } .filter-group label { font-family: var(--font-ui); font-size: 9.5px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .quick-ranges { display: flex; gap: 6px; flex-wrap: wrap; } .quick-ranges button { font-family: var(--font-ui); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); padding: 9px 14px; border-radius: 20px; font-size: 11.5px; font-weight: 700; cursor: pointer; letter-spacing: .3px; transition: all var(--transition); } .quick-ranges button:hover { border-color: var(--gold); color: var(--gold); } .quick-ranges button.active { background: var(--gold); border-color: var(--gold); color: #1a1920; } .gioia-select, .gioia-input, .gioia-multiselect { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 12px; font-size: 13px; font-family: var(--font-body); transition: border-color var(--transition); } .gioia-select:focus, .gioia-input:focus { outline: none; border-color: var(--gold); } .gioia-multiselect { min-width: 220px; position: relative; } .gioia-multiselect summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .gioia-multiselect summary::-webkit-details-marker { display: none; } /* Posición absoluta: el panel de "Todos los locales" se sobrepone al contenido de abajo en vez de empujarlo — el
nativo, al abrirse, expande el flujo normal del documento si no se lo saca de flujo. */ .gioia-multiselect .ms-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; width: max-content; min-width: 100%; max-width: 320px; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } .gioia-multiselect label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; } .gioia-multiselect input[type=checkbox] { accent-color: var(--gold); } .btn-gold { font-family: var(--font-ui); background: var(--gold); color: #1a1920; border: none; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; letter-spacing: .6px; cursor: pointer; transition: background var(--transition); } .btn-gold:hover { background: var(--gold-hover); } /* ===================== KPIs ===================== */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .kpi .label { font-family: var(--font-ui); font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .kpi .value { font-family: var(--font-ui); font-size: 24px; font-weight: 700; color: var(--text); } .kpi .delta { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 9px; border-radius: 20px; } .kpi .delta.pos { color: var(--green); background: var(--green-bg); } .kpi .delta.neg { color: var(--red); background: var(--red-bg); } .kpi .delta.flat { color: var(--muted); background: var(--border); } .kpi .spark { height: 34px; margin-top: 2px; } /* ===================== CHARTS ===================== */ .chart-card .chart-box { height: 320px; } .charts-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } @media (max-width: 980px) { .charts-row { grid-template-columns: 1fr; } } /* ApexCharts recalcula e inyecta su propio min-height por JS cuando hay muchas categorías (para que las barras/etiquetas no se aprieten), y ese min-height inline le gana a cualquier max-height que le pongamos al mismo elemento. Por eso el límite de altura va en un contenedor ENVOLVENTE distinto (con scroll interno), no en el div que Apex manipula. */ .chart-box-capped { max-height: 420px; overflow-y: auto; overflow-x: hidden; } .heatmap-wrap { overflow-x: auto; } .heatmap-table { border-collapse: collapse; width: 100%; font-size: 10.5px; } .heatmap-table th { font-family: var(--font-ui); font-weight: 700; color: var(--muted); padding: 4px 3px; text-align: center; font-size: 9px; letter-spacing: .3px; } .heatmap-table td.hm-label { font-family: var(--font-ui); font-size: 10.5px; color: var(--text); white-space: nowrap; padding: 3px 10px 3px 0; text-align: right; font-weight: 600; } .heatmap-cell { width: 22px; height: 22px; border-radius: 4px; } /* ===================== RANKING TABLES ===================== */ .rank-table { width: 100%; font-size: 13px; border-collapse: collapse; color: var(--text-bright); } .rank-table th { font-family: var(--font-ui); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 9.5px; color: #aab0c0; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; } .rank-table td { padding: 9px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-bright); } .rank-table tr:last-child td { border-bottom: none; } .rank-table .num { text-align: right; font-family: var(--font-ui); font-weight: 600; color: var(--text-bright); } .rank-bar-wrap { width: 100%; background: var(--surface-2); border-radius: 6px; overflow: hidden; height: 8px; margin-top: 5px; } .rank-bar { height: 100%; background: linear-gradient(90deg, var(--gold-hover), var(--gold)); border-radius: 6px; } .rank-bar.worst { background: linear-gradient(90deg, #6d5a2c, var(--gold)); opacity: .55; } /* ===== Barra costo/margen (dos segmentos): del precio de venta, cuánto es costo de insumos (gris) y cuánto es ganancia (dorado). ===== */ .margin-bar-wrap { display: flex; width: 100%; height: 16px; border-radius: 6px; overflow: hidden; background: var(--surface-2); margin-top: 6px; } .margin-bar-cost { height: 100%; background: var(--muted-2); } .margin-bar-profit { height: 100%; background: linear-gradient(90deg, var(--gold-hover), var(--gold)); } .margin-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--muted); margin-bottom: 12px; } .margin-legend span { display: inline-flex; align-items: center; gap: 5px; } .margin-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .margin-legend .dot.cost { background: var(--muted-2); } .margin-legend .dot.profit { background: var(--gold); } .category-tag { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); background: var(--border); padding: 2px 7px; border-radius: 20px; margin-left: 6px; white-space: nowrap; } /* ===================== LOCALES ===================== */ .locales-group { margin-bottom: 26px; } .locales-group:last-child { margin-bottom: 0; } /* Subtítulo discreto (etiqueta + conteo + línea) en vez de un encabezado dorado en mayúsculas — ese tratamiento competía visualmente con el

"Locales" de la tarjeta y se veía como un título duplicado. */ .locales-group-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; } .locales-group-title { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: .3px; white-space: nowrap; } .locales-group-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; } .locales-group-rule { flex: 1; height: 1px; background: var(--border); } .locales-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .locale-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--transition); } .locale-card:hover { border-color: var(--gold); cursor: pointer; } /* Caja de tamaño fijo (mismo ancho y alto para todas las marcas) con object-fit:contain — sin esto, logos muy angostos (Cosenza, Bakery) se veían desproporcionadamente más grandes que los anchos (Carmine, Osso). */ .locale-card .logo-local { height: 30px; width: 130px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .92; } [data-theme="light"] .locale-card .logo-local { filter: brightness(0) invert(0); opacity: .82; } .locale-card .locale-zone { font-family: var(--font-ui); font-size: 10px; color: var(--muted); letter-spacing: .8px; text-transform: uppercase; } .locale-card .locale-sales { font-family: var(--font-ui); font-size: 19px; font-weight: 700; color: var(--text); } .locale-card .locale-inactive { font-family: var(--font-ui); font-size: 10px; color: var(--muted-2); letter-spacing: .5px; text-transform: uppercase; } /* ===================== EMPTY / SKELETON ===================== */ .empty-state { text-align: center; color: var(--muted); padding: 50px 20px; font-size: 13.5px; } .empty-state .empty-icon { font-size: 30px; margin-bottom: 10px; opacity: .5; } .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); animation: skel-sweep 1.2s infinite; } @keyframes skel-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } #page-loading { position: fixed; inset: 0; z-index: 2000; background: rgba(14, 15, 18, .72); display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); } [data-theme="light"] #page-loading { background: rgba(244, 245, 247, .78); } #page-loading.active { display: flex; } #page-loading .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(217, 185, 87, .25); border-top-color: var(--gold); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .topbar { padding: 10px 14px; } main.gioia-main { padding: 14px 12px 40px; } .card { padding: 14px; border-radius: var(--radius-sm); } .kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi .value { font-size: 18px; } }