/* ============================================================ INVENTORY IT — main.css ============================================================ */ /* ============================================================ 1. VARIABLES DE COLOR — MODO CLARO ============================================================ */ :root{ /* Fondos */ --bg:#F5F4EF; /* fondo principal de la página */ --surface:#fff; /* fondo de cards, modales, sidebar */ --s2:#EFEDE5; /* fondo secundario, hover, headers de tabla */ --border:#DCD8CC; /* bordes generales */ /* Texto */ --text:#1F1D17; /* texto principal */ --t2:#534E40; /* texto secundario */ --t3:#8B8475; /* texto terciario (placeholders, hints) */ --acc:#1F1D17; /* acento (botones primarios) */ /* Estados — Info */ --ib:#E6F1FB; /* fondo info */ --it:#0C447C; /* texto info */ /* Estados — Warning */ --wb:#FAEEDA; /* fondo warning */ --wt:#633806; /* texto warning */ --ws:#854F0B; /* texto warning fuerte */ /* Estados — Danger */ --db:#FCEBEB; /* fondo danger */ --dt:#A32D2D; /* texto danger */ --ds:#F09595; /* borde danger suave */ /* Estados — Success */ --ok:#639922; /* dot/borde success */ --ot:#3B6D11; /* texto success */ --ob:#EAF3DE; /* fondo success */ /* Categorías de equipo */ --cd:#378ADD; /* Desarrollo */ --ca:#7F77DD; /* Apple */ --cv:#1D9E75; /* Device */ /* Divisiones */ --ms:#534AB7; /* Making Sense */ --dp:#1D9E75; /* Doppler */ --ho:#D85A30; /* Holding */ --vi:#BA7517; /* Viallion */ /* Fuentes */ --fs:'Inter',-apple-system,system-ui,sans-serif; --fm:ui-monospace,'SF Mono',Monaco,monospace; /* Radios */ --r:6px; --rl:10px; } /* ============================================================ 2. VARIABLES DE COLOR — MODO OSCURO Se activan agregando data-dark al ============================================================ */ [data-dark]{ --bg:#1a1917; --surface:#242320; --s2:#2e2c28; --border:#3d3a34; --text:#f0ede6; --t2:#b5b0a6; --t3:#7a7670; --acc:#f0ede6; --ib:#0d2540; --it:#7ab8f5; --wb:#2e1f07; --wt:#e8b76a; --ws:#f0c070; --db:#2e0d0d; --dt:#f09595; --ds:#7a2020; --ok:#7ab842; --ot:#a0d060; --ob:#162810; } /* ============================================================ 3. RESET Y BASE ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} body{ background:var(--bg); color:var(--text); font-family:var(--fs); font-size:13px; line-height:1.5; transition:background .2s,color .2s; } a{color:inherit;text-decoration:none} /* ============================================================ 4. LAYOUT PRINCIPAL DE LA APP Sidebar a la izquierda + main a la derecha ============================================================ */ .app-layout{display:flex;min-height:100vh} /* ============================================================ 5. SIDEBAR — siempre oscuro independiente del modo ============================================================ */ .sb{ width:220px; background:var(--surface); border-right:1px solid var(--border); padding:18px 0; flex-shrink:0; transition:width .2s; position:relative; display:flex; flex-direction:column; } /* Sidebar colapsado (solo iconos) */ .sb.col{width:56px} /* Botón circular de colapsar */ .cbtn{ position:absolute;top:20px;right:-11px; width:22px;height:22px;border-radius:50%; background:var(--surface);border:1px solid #3d3a34; display:flex;align-items:center;justify-content:center; z-index:5;padding:0;cursor:pointer; } .cbtn i{font-size:12px;color:var(--t2)} /* Brand del sidebar (logo + nombre) */ .sbrand{ padding:0 16px 14px; border-bottom:1px solid var(--border); margin-bottom:10px; } .bname{font-size:15px;font-weight:600;color:var(--text)} .btag{ font-size:11px;color:var(--t3);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Nav del sidebar */ .snav{display:flex;flex-direction:column;gap:2px;padding:0 8px;flex:1} .sb-footer{padding:8px;border-top:1px solid var(--border);margin-top:auto} /* Items del nav */ .ni{ display:flex;align-items:center;gap:10px; padding:8px 10px;font-size:13px;border-radius:var(--r); color:var(--t2);cursor:pointer; } .ni:hover{background:var(--s2);color:var(--text)} .ni.on{background:var(--s2);font-weight:500;color:var(--text)} .ni i{font-size:16px;flex-shrink:0} .ni .bdg{ margin-left:auto;font-size:10px;padding:1px 7px; border-radius:10px;background:#E24B4A;color:#fff;font-weight:500; } /* Grupos del nav (Setup, Administration) */ .grp{padding:8px 10px} .gh{ display:flex;align-items:center;gap:10px; font-size:13px;font-weight:500;margin-bottom:4px;color:var(--text); } .gc{padding-left:24px;display:flex;flex-direction:column;gap:1px} .si{ font-size:12px;padding:5px 8px;border-radius:var(--r); color:var(--t2);cursor:pointer; } .si:hover{background:var(--s2);color:var(--text)} .si.on{background:var(--s2);font-weight:500;color:var(--text)} /* Sidebar colapsado: ocultar textos */ .sb.col .bname, .sb.col .btag, .sb.col .ni span:not(.bdg), .sb.col .gh span, .sb.col .gc{display:none} .sb.col .sbrand{padding:0 8px 14px;text-align:center} .sb.col .ni{justify-content:center;padding:8px;position:relative} .sb.col .ni .bdg{position:absolute;top:2px;right:2px;font-size:9px;padding:1px 4px} .sb.col .gh{justify-content:center;padding:8px} .sb.col .grp{padding:0 8px} .sb.col .snav{padding:0 6px} /* ============================================================ 6. MAIN (área de contenido a la derecha del sidebar) ============================================================ */ .main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden} /* Topbar */ .topbar{ background:var(--surface); border-bottom:1px solid var(--border); padding:10px 22px; display:flex;align-items:center;justify-content:space-between; flex-shrink:0; } .main-content{padding:20px 22px;overflow-y:auto;flex:1;min-height:0} /* Chip de usuario */ .uc{ display:inline-flex;align-items:center;gap:8px; padding:5px 11px;background:var(--ib); border-radius:var(--r);font-size:11px;color:var(--it); white-space:nowrap; } .sso-pill{ font-size:9px;padding:1px 5px;border-radius:6px; background:var(--ob);color:var(--ot);font-weight:500; } /* Botón modo oscuro */ .dtbtn{ height:28px;padding:0 11px;display:flex;align-items:center;gap:5px; font-size:11px;cursor:pointer;border:1px solid var(--border); border-radius:var(--r);background:var(--surface);color:var(--t2); } /* ============================================================ 7. FORMULARIOS — Inputs, selects, textareas, buttons ============================================================ */ input,select,textarea,button{ font-family:var(--fs);font-size:12px;color:var(--text); border:1px solid var(--border);border-radius:var(--r); background:var(--surface);padding:0 10px; } input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], select{height:32px} textarea{padding:8px 10px;resize:vertical;font-size:12px} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--t2); } /* Labels de formulario */ label{font-size:11px;color:var(--t2);display:block;margin-bottom:3px} /* ============================================================ 8. BOTONES ============================================================ */ button{ cursor:pointer;height:32px;padding:0 12px; background:var(--surface);transition:background .15s; } button:hover{background:var(--s2)} /* Botón primario */ .btn-pri,button.pri{ background:var(--acc);color:var(--surface); border-color:var(--acc);font-weight:500; } .btn-pri:hover,button.pri:hover{opacity:.9;background:var(--acc)} /* Botón danger */ .btn-dng,button.dng{color:var(--dt);border-color:var(--ds)} .btn-dng:hover,button.dng:hover{background:var(--db)} /* Botón cuadrado para íconos */ button.ib{ width:28px;padding:0; display:inline-flex;align-items:center;justify-content:center; } /* Botón de login con Google */ .btn-google{ display:flex;align-items:center;justify-content:center;gap:8px; width:100%;height:36px;font-size:12px; border:1px solid var(--border);border-radius:var(--r); background:var(--surface);color:var(--text);cursor:pointer; } .btn-google:hover{background:var(--s2)} .btn-google i{font-size:16px} /* ============================================================ 9. CARDS Y CONTENEDORES ============================================================ */ .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r);padding:14px 16px; } .ct{font-size:12px;font-weight:500;margin-bottom:10px} /* ============================================================ 10. BADGES (etiquetas chiquitas de status, rol, etc.) ============================================================ */ .bx{ display:inline-block;font-size:10px;padding:2px 8px; border-radius:10px;font-weight:500; } /* Status de equipo */ .bn{background:var(--ob);color:var(--ot)} /* New */ .bu{background:var(--ib);color:var(--it)} /* Used */ .bl{background:#E1F5EE;color:#0F6E56} /* Like new */ .bna{background:var(--wb);color:var(--ws)} /* Non-acceptable */ .br{background:var(--db);color:var(--dt)} /* In Repair */ /* Roles */ .broot{background:#EEEDFE;color:#3C3489} /* root */ .badm{background:var(--ib);color:var(--it)} /* admin */ .bviw{background:var(--s2);color:var(--t2)} /* viewer */ /* ============================================================ 11. TABLAS ============================================================ */ table{width:100%;border-collapse:collapse;font-size:12px} thead tr{background:var(--s2);border-bottom:1px solid var(--border)} th{ text-align:left;padding:9px 12px; font-weight:500;color:var(--t2); } td{padding:10px 12px;border-bottom:1px solid var(--border)} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--s2)} /* ============================================================ 12. TOOLBAR (filtros + acciones arriba de las tablas) ============================================================ */ .tb{ display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:12px; } /* Search input */ .si-w{position:relative;flex:1;max-width:380px} .si-w i{ position:absolute;left:10px;top:50%;transform:translateY(-50%); font-size:14px;color:var(--t3); } .si-w input{width:100%;padding-left:32px} .kbd{ position:absolute;right:10px;top:50%;transform:translateY(-50%); font-size:10px;color:var(--t3);background:var(--s2); padding:2px 6px;border-radius:4px; } /* ============================================================ 13. CHIPS (filtros rápidos) ============================================================ */ .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .chip{ font-size:11px;padding:3px 10px;border-radius:12px; background:var(--s2);color:var(--t2);cursor:pointer; } .chip:hover{background:var(--border)} .chip.on{ background:var(--surface);border:1px solid var(--t3); font-weight:500;color:var(--text); } /* ============================================================ 14. LOGIN SCREEN ============================================================ */ .login-screen{ min-height:100vh; display:flex;align-items:center;justify-content:center; padding:40px 20px;background:var(--bg); } .lcard{ background:var(--surface); border-radius:var(--rl);border:1px solid var(--border); padding:36px;width:100%;max-width:340px; } .llogo{text-align:center;margin-bottom:24px} .lsq{ width:44px;height:44px;border-radius:var(--r);background:var(--acc); display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px; } .lsq i{font-size:22px;color:var(--surface)} .lbrand{font-size:16px;font-weight:600} .ltag{font-size:12px;color:var(--t3);margin-top:2px} .lf{margin-bottom:14px} .lf label{font-size:12px;color:var(--t2);margin-bottom:4px} .lf input{width:100%;height:36px;font-size:13px} /* Separador "o" entre login interno y SSO */ .login-divider{ display:flex;align-items:center;gap:10px; margin:14px 0;color:var(--t3);font-size:11px; } .login-divider::before, .login-divider::after{ content:'';flex:1;height:1px;background:var(--border); } /* ============================================================ 15. FLASH MESSAGES (avisos arriba del contenido) ============================================================ */ .flash{ padding:10px 12px;border-radius:var(--r); font-size:12px;margin-bottom:12px; } .flash-error,.flash-danger{background:var(--db);color:var(--dt)} .flash-success{background:var(--ob);color:var(--ot)} .flash-info{background:var(--ib);color:var(--it)} .flash-warning{background:var(--wb);color:var(--wt)} /* ============================================================ 16. UTILS ============================================================ */ .text-mono{font-family:var(--fm)} .text-muted{color:var(--t3)} .mb-0{margin-bottom:0} /* ============================================================ TABLE WRAPPER — scroll horizontal + vertical con thead fijo El wrapper tiene altura fija para que el scroll funcione. main-content NO debe tener overflow para que no compita. ============================================================ */ #table-wrapper { overflow: auto; max-height: calc(100vh - 280px); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--t3) var(--s2); } #table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; } #table-wrapper::-webkit-scrollbar-track { background: var(--s2); } #table-wrapper::-webkit-scrollbar-thumb { background: var(--t3); border-radius: 3px; } #table-wrapper::-webkit-scrollbar-corner { background: var(--s2); } /* Thead sticky — funciona porque el overflow está en #table-wrapper */ #eq-table thead th { position: sticky; top: 0; z-index: 10; background: var(--s2); white-space: nowrap; } /* Logo sidebar */ #sidebar-logo { width:170px; height:22px; object-fit:contain; object-position:left; } [data-dark] #sidebar-logo { filter: brightness(0) invert(1); } /* Logo sidebar colapsado */ .sb.col #sidebar-logo { width: 32px; height: 32px; object-fit: contain; object-position: center; } /* Logo colapsado */ .sb.col #sidebar-logo { display: none !important; } .sb.col #sidebar-logo-collapsed { display: inline-block !important; } /* Logo colapsado */ .sb.col #sidebar-logo { display: none !important; } .sb.col #sidebar-logo-collapsed { display: inline-block !important; } /* Grupos colapsados — mostrar ícono clickeable */ .sb.col .grp { padding: 0 6px; } .sb.col .gh { justify-content: center; padding: 8px; border-radius: var(--r); cursor: pointer; } .sb.col .gh:hover { background: var(--s2); } /* Popover flotante para grupos colapsados */ .grp-popover { position: absolute; left: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 6px; min-width: 180px; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.15); display: none; } .grp-popover.open { display: block; } .grp-popover a { display: block; padding: 6px 10px; font-size: 12px; border-radius: var(--r); color: var(--t2); } .grp-popover a:hover { background: var(--s2); color: var(--text); } .grp-popover .pop-title { font-size: 11px; font-weight: 500; color: var(--t3); padding: 4px 10px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }