/* ───────────────────────────────────────────────────────────────── HUB MODULOS JONNY · Componentes compartidos Patrón único de: shell, sidebar, topbar, context bar, KPI strip, cards, pills, tablas, drawers, stepper, role-switch. ───────────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════ SHELL · layout principal ════════════════════════════════════════════════════════════════ */ .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* Cuando se usa la sidebar unificada (sidebar.js inyectó padding-left en ), no necesitamos grid · solo el main column ocupando todo */ .shell-main-only { display: block; min-height: 100vh; } .shell-main-only > .main { width: 100%; } /* Ocultar sidebar legacy si por alguna razón queda en el DOM */ .shell > .sb, body.itorq-sidebar-layout .sb { display: none !important; } /* ════════════════════════════════════════════════════════════════ SIDEBAR ════════════════════════════════════════════════════════════════ */ .sb { background: var(--panel); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; } .sb-brand { padding: 4px 6px 12px; border-bottom: 1px solid var(--line-soft); } .sb-brand .mark { font-size: 22px; font-weight: 950; letter-spacing: -0.02em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .sb-brand .sub { font-size: var(--t-10); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-dim); margin-top: 4px; font-weight: 700; } .sb-section { font-size: var(--t-10); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-soft); padding: 0 6px; font-weight: 800; } .sb-nav { display: flex; flex-direction: column; gap: 4px; } .sb-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-8); font-size: var(--t-12); font-weight: 700; color: var(--text-dim); transition: background .15s, color .15s; border: 1px solid transparent; } .sb-nav a:hover { background: rgba(255,255,255,.04); color: var(--text); } .sb-nav a.active { background: var(--grad-active); color: var(--text-strong); border-color: rgba(56,189,248,.32); } .sb-nav a .ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.9; } .sb-bot { margin-top: auto; padding: 10px; border-radius: var(--r-10); background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); font-size: var(--t-11); color: var(--text-dim); } .sb-bot b { color: var(--text); font-weight: 800; } /* ════════════════════════════════════════════════════════════════ MAIN COLUMN ════════════════════════════════════════════════════════════════ */ .main { display: flex; flex-direction: column; min-width: 0; } /* ════════════════════════════════════════════════════════════════ TOPBAR ════════════════════════════════════════════════════════════════ */ .tb { height: var(--topbar-h); background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 18px; position: sticky; top: 0; z-index: 60; } .tb-title { font-weight: 850; font-size: var(--t-14); letter-spacing: -0.01em; color: var(--text-strong); } .tb-title small { font-weight: 700; font-size: var(--t-10); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-left: 8px; } .tb-spacer { flex: 1; } .tb-btn { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 7px 12px; border-radius: var(--r-8); font-size: var(--t-12); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, background .15s; } .tb-btn:hover { border-color: var(--line-hard); background: var(--panel-3); } .tb-btn.primary { background: var(--grad-brand); border-color: rgba(56,189,248,.5); color: #001828; } /* Role switch (Ejecutiva / Técnica) */ .role-switch { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-8); padding: 3px; gap: 2px; } .role-switch button { background: transparent; border: 0; padding: 5px 12px; font-size: var(--t-11); font-weight: 800; color: var(--text-dim); border-radius: 6px; letter-spacing: 0.05em; text-transform: uppercase; } .role-switch button.active { background: var(--grad-active); color: var(--text-strong); } /* ════════════════════════════════════════════════════════════════ CONTEXT BAR · Cliente · Faena · Equipo · Servicio · Estado ════════════════════════════════════════════════════════════════ */ .cbar { height: var(--contextbar-h); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-bottom: 1px solid var(--line); padding: 0 18px; display: flex; align-items: center; gap: 18px; font-size: var(--t-12); position: sticky; top: var(--topbar-h); z-index: 50; } .cbar-item { display: inline-flex; align-items: center; gap: 6px; } .cbar-item .k { font-size: var(--t-10); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-weight: 700; } .cbar-item .v { color: var(--text-strong); font-weight: 800; } .cbar-divider { width: 1px; height: 18px; background: var(--line); } .cbar-priority { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-11); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--yellow-soft); color: var(--yellow); border: 1px solid var(--yellow-line); } .cbar-priority::before { content: "★"; } .cbar-uptime { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-11); font-weight: 800; padding: 4px 10px; border-radius: 999px; } .cbar-uptime.ok { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-line); } .cbar-uptime.mid { background: var(--yellow-soft); color: var(--yellow); border: 1px solid var(--yellow-line); } .cbar-uptime.low { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); } /* ════════════════════════════════════════════════════════════════ CONTENT ════════════════════════════════════════════════════════════════ */ .content { padding: 18px; display: flex; flex-direction: column; gap: 16px; } /* ════════════════════════════════════════════════════════════════ KPI STRIP ════════════════════════════════════════════════════════════════ */ .kpi-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; } @media (max-width: 1300px) { .kpi-strip { grid-template-columns: repeat(4, 1fr); } } .kpi { background: linear-gradient(145deg, var(--panel), var(--panel-3)); border: 1px solid var(--line); border-radius: var(--r-10); padding: 10px 12px; min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color .15s, transform .15s; cursor: pointer; } .kpi:hover { border-color: var(--line-hard); transform: translateY(-1px); } .kpi .lbl { font-size: var(--t-10); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 800; } .kpi .val { font-size: var(--t-22); font-weight: 900; letter-spacing: -0.02em; color: var(--text-strong); line-height: 1; } .kpi .sub { font-size: var(--t-11); color: var(--text-dim); font-weight: 700; } .kpi.good .val { color: var(--green); } .kpi.warn .val { color: var(--yellow); } .kpi.bad .val { color: var(--red); } .kpi.info .val { color: var(--cyan); } .kpi.exec { min-height: 100px; padding: 14px 16px; border-radius: var(--r-12); } .kpi.exec .val { font-size: var(--t-34); } .kpi.exec .lbl { font-size: var(--t-11); } /* ════════════════════════════════════════════════════════════════ CARDS / PANELS ════════════════════════════════════════════════════════════════ */ .card { background: linear-gradient(145deg, var(--panel), var(--panel-3)); border: 1px solid var(--line); border-radius: var(--r-12); padding: 14px; box-shadow: var(--sh-card); } .card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .card-h h3 { margin: 0; font-size: var(--t-13); font-weight: 900; letter-spacing: -0.01em; color: var(--text-strong); } .card-h .sub { font-size: var(--t-10); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-weight: 800; margin-left: auto; } .card-stack { display: flex; flex-direction: column; gap: 12px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .grid-r-1-3 { display: grid; grid-template-columns: 1fr 3fr; gap: 12px; } .grid-r-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; } .grid-r-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; } .grid-r-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; } /* ════════════════════════════════════════════════════════════════ PILLS / BADGES ════════════════════════════════════════════════════════════════ */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--t-10); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid transparent; } .pill.ok { background: var(--green-soft); color: var(--green); border-color: var(--green-line); } .pill.warn { background: var(--yellow-soft); color: var(--yellow); border-color: var(--yellow-line); } .pill.alert { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-line); } .pill.bad { background: var(--red-soft); color: var(--red); border-color: var(--red-line); } .pill.info { background: var(--cyan-soft); color: var(--cyan); border-color: var(--cyan-line); } .pill.muted { background: var(--gray-soft); color: var(--gray); border-color: var(--line); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); } .dot.ok { background: var(--green); } .dot.warn { background: var(--yellow); } .dot.alert { background: var(--orange); } .dot.bad { background: var(--red); } .dot.info { background: var(--cyan); } /* ════════════════════════════════════════════════════════════════ TABLAS ════════════════════════════════════════════════════════════════ */ .tbl { width: 100%; border-collapse: collapse; font-size: var(--t-12); } .tbl th { text-align: left; font-size: var(--t-10); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); position: sticky; top: 0; } .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text); } .tbl tr:hover td { background: rgba(56,189,248,.04); } .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } .tbl td b { color: var(--text-strong); } /* ════════════════════════════════════════════════════════════════ STEPPER (flow chips) ════════════════════════════════════════════════════════════════ */ .stepper { display: flex; gap: 6px; flex-wrap: wrap; } .step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: var(--t-11); font-weight: 800; letter-spacing: 0.05em; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text-dim); } .step .n { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; align-items: center; justify-content: center; font-size: var(--t-10); background: rgba(255,255,255,.08); font-weight: 900; } .step.done { background: var(--green-soft); border-color: var(--green-line); color: var(--green); } .step.done .n { background: var(--green); color: #002113; } .step.now { background: var(--cyan-soft); border-color: var(--cyan-line); color: var(--cyan); box-shadow: var(--sh-glow-b); } .step.now .n { background: var(--cyan); color: #001828; } .step::after { content: "›"; opacity: .35; margin-left: 6px; } .step:last-child::after { content: ""; margin: 0; } /* ════════════════════════════════════════════════════════════════ SUB-TABS (dentro de un módulo) ════════════════════════════════════════════════════════════════ */ .subtabs { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-10); padding: 4px; gap: 2px; } .subtabs button { background: transparent; border: 0; color: var(--text-dim); padding: 6px 12px; border-radius: 6px; font-size: var(--t-12); font-weight: 800; letter-spacing: 0.02em; } .subtabs button:hover { color: var(--text); } .subtabs button.active { background: var(--grad-active); color: var(--text-strong); } /* ════════════════════════════════════════════════════════════════ CONIC RING (avance por sector) ════════════════════════════════════════════════════════════════ */ .ring { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--green) calc(var(--p,0)*1%), rgba(255,255,255,.08) 0); } .ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); } .ring .pct { position: relative; font-size: var(--t-14); font-weight: 900; color: var(--text-strong); } .ring.warn { background: conic-gradient(var(--yellow) calc(var(--p,0)*1%), rgba(255,255,255,.08) 0); } .ring.bad { background: conic-gradient(var(--red) calc(var(--p,0)*1%), rgba(255,255,255,.08) 0); } .ring.info { background: conic-gradient(var(--cyan) calc(var(--p,0)*1%), rgba(255,255,255,.08) 0); } .ring.lg { width: 96px; height: 96px; } .ring.lg .pct { font-size: var(--t-18); } .ring.lg::before { inset: 9px; } /* ════════════════════════════════════════════════════════════════ DRAWERS / OVERLAYS (sí usamos glass aquí) ════════════════════════════════════════════════════════════════ */ .drawer { position: fixed; right: 18px; bottom: 18px; width: 360px; background: rgba(11,27,44,.85); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-14); box-shadow: var(--sh-pop); padding: 14px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .drawer h4 { margin: 0; font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 800; } /* ════════════════════════════════════════════════════════════════ MILL CARD (vista compacta del molino) ════════════════════════════════════════════════════════════════ */ .mill-card { position: relative; background: radial-gradient(ellipse at center, rgba(56,189,248,.08), transparent 65%), var(--panel); border: 1px solid var(--line); border-radius: var(--r-12); padding: 14px; min-height: 280px; display: flex; flex-direction: column; gap: 10px; } /* ════════════════════════════════════════════════════════════════ ALERT CARDS ════════════════════════════════════════════════════════════════ */ .alert-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-10); background: rgba(255,255,255,.025); border-left: 3px solid var(--gray); margin-bottom: 6px; } .alert-row.bad { border-left-color: var(--red); } .alert-row.alert { border-left-color: var(--orange); } .alert-row.warn { border-left-color: var(--yellow); } .alert-row.info { border-left-color: var(--cyan); } .alert-row .ttl { font-weight: 800; font-size: var(--t-13); color: var(--text-strong); } .alert-row .meta { font-size: var(--t-11); color: var(--text-dim); } /* ════════════════════════════════════════════════════════════════ HUB LANDING — module card ════════════════════════════════════════════════════════════════ */ .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 1100px) { .hub-grid { grid-template-columns: 1fr; } } .hub-mod { position: relative; background: linear-gradient(145deg, var(--panel), var(--panel-3)); border: 1px solid var(--line); border-radius: var(--r-14); padding: 20px; min-height: 260px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, transform .2s, box-shadow .2s; overflow: hidden; } .hub-mod::after { content: ""; position: absolute; top: 0; right: 0; width: 220px; height: 220px; background: radial-gradient(circle, var(--mod-glow, rgba(56,189,248,.16)), transparent 70%); pointer-events: none; } .hub-mod:hover { border-color: var(--line-hard); transform: translateY(-2px); box-shadow: var(--sh-pop); } .hub-mod h2 { margin: 0; font-size: var(--t-22); font-weight: 950; letter-spacing: -0.02em; color: var(--text-strong); line-height: 1.1; } .hub-mod .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--mod-soft, var(--cyan-soft)); color: var(--mod-color, var(--cyan)); border: 1px solid var(--mod-line, var(--cyan-line)); border-radius: 999px; font-size: var(--t-10); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; width: fit-content; } .hub-mod p { margin: 0; font-size: var(--t-13); color: var(--text-dim); line-height: 1.55; } .hub-mod .mod-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; } .hub-mod .mod-kpis div { background: rgba(255,255,255,.025); border: 1px solid var(--line-soft); border-radius: var(--r-8); padding: 8px 10px; } .hub-mod .mod-kpis .k { font-size: var(--t-9); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 800; } .hub-mod .mod-kpis .v { font-size: var(--t-16); font-weight: 900; color: var(--text-strong); } /* ════════════════════════════════════════════════════════════════ UTILIDADES ════════════════════════════════════════════════════════════════ */ .row { display: flex; align-items: center; gap: 8px; } .col { display: flex; flex-direction: column; gap: 8px; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .text-dim { color: var(--text-dim); } .text-strong { color: var(--text-strong); } .uppercase { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; font-size: var(--t-10); } .bold { font-weight: 900; } .flex-grow { flex: 1; } .mono { font-family: var(--font-mono); } .divider { height: 1px; background: var(--line); margin: 4px 0; } .hidden { display: none !important; } /* Animación de aparición desactivada · feedback Diego: al cambiar de pestaña el contenido debe aparecer estático, sin movimiento */ .fade-up { animation: none; }