/* ============================================
SISAM — Design System v2.0 (COMMAND INDUSTRIAL)
============================================ */
/* ---- SHARED TOKENS (all themes) ---- */
html[data-theme] {
--font-ui: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
/* Accent colors palette */
--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--green-500: #10b981;
--green-600: #059669;
--amber-500: #f59e0b;
--amber-600: #d97706;
--red-500: #ef4444;
--red-600: #dc2626;
--purple-500: #8b5cf6;
--purple-600: #7c3aed;
--pink-500: #f093fb;
--cyan-500: #06b6d4;
/* Typography scale (8 levels) */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 13px;
--fs-md: 14px;
--fs-lg: 15px;
--fs-xl: 18px;
--fs-2xl: 24px;
--fs-3xl: 28px;
/* Sizing + spacing */
--topbar-h: 44px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--gap: 12px;
--pad: 14px;
}
/* ================================================
LIGHT THEME (default)
================================================ */
html[data-theme="light"] {
--bg-app: #f1f5f9;
--bg-panel: #ffffff;
--bg-deep: #f8fafc;
--bg-surface: #f1f5f9;
--bg-elevated: #b0bec5;
--ink: #1e293b;
--ink-2: #475569;
--ink-3: #94a3b8;
--border: rgba(0,0,0,0.28);
--border-light: rgba(0,0,0,0.32);
--border-active: var(--blue-500);
--blue-glow: rgba(59,130,246,0.12);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--row-alt: rgba(0,0,0,0.02);
--row-hover: rgba(59,130,246,0.05);
--stat-card-bg: #ffffff;
--filter-bar-bg: #f8fafc;
--filter-input-bg: #ffffff;
--table-bg: #ffffff;
--table-header-bg: #f8fafc;
--kpi-bg: linear-gradient(135deg, #eff6ff, #dbeafe);
--kpi-border: #bfdbfe;
/* Legacy compatibility */
--brand: var(--blue-600);
--brand-dark: var(--blue-700);
--success: var(--green-600);
--danger: var(--red-600);
--warn: var(--amber-600);
--bg: var(--bg-app);
--panel: var(--bg-panel);
--line: var(--border);
--head: var(--bg-surface);
--text: var(--ink);
--muted: var(--ink-3);
--radius: var(--radius-lg);
--shadow: var(--shadow-md);
--shadow-soft: var(--shadow-sm);
--font: var(--font-ui);
}
/* ================================================
DARK THEME
================================================ */
html[data-theme="dark"] {
--bg-app: #1d2635;
--bg-panel: #1f2a3d;
--bg-deep: #1a2233;
--bg-surface: #232f47;
--bg-elevated: #2a3650;
--ink: #e6edf5;
--ink-2: #94a3b8;
--ink-3: #64748b;
--border: rgba(255,255,255,0.16);
--border-light: rgba(255,255,255,0.22);
--border-active: var(--blue-500);
--blue-glow: rgba(59,130,246,0.15);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
--shadow-md: 0 2px 8px rgba(0,0,0,0.3);
--row-alt: rgba(148,163,184,0.04);
--row-hover: rgba(59,130,246,0.06);
--stat-card-bg: var(--bg-surface);
--filter-bar-bg: var(--bg-surface);
--filter-input-bg: var(--bg-deep);
--table-bg: var(--bg-deep);
--table-header-bg: var(--bg-surface);
--kpi-bg: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(59,130,246,0.04));
--kpi-border: rgba(59,130,246,0.15);
/* Legacy compatibility */
--brand: var(--blue-600);
--brand-dark: var(--blue-700);
--success: var(--green-600);
--danger: var(--red-600);
--warn: var(--amber-600);
--bg: var(--bg-app);
--panel: var(--bg-panel);
--line: var(--border);
--head: var(--bg-surface);
--text: var(--ink);
--muted: var(--ink-3);
--radius: var(--radius-lg);
--shadow: var(--shadow-md);
--shadow-soft: var(--shadow-sm);
--font: var(--font-ui);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow-x:hidden;}
body{
margin:0;
font-family: var(--font-ui);
font-size: var(--fs-base);
line-height: 1.5;
color: var(--ink);
background: var(--bg-app);
transition: background 0.35s ease, color 0.35s ease;
}
/* ============= Topbar + KPIs + Tabs ============= */
.topbar{
position:sticky; top:0; z-index:50;
background: var(--bg-deep);
border-bottom: 1px solid var(--border);
transition: all 0.35s;
}
.topbar__row{
min-height:var(--topbar-h);
display:flex; align-items:center; gap:12px;
padding:0 16px;
}
.brand{
font-weight:700;
font-size: var(--fs-lg);
white-space:nowrap;
color: var(--ink);
}
.spacer{ flex:1 1 auto }
.host{
min-width:340px; max-width:520px; width:100%;
border:1px solid var(--border-light);
border-radius:999px;
padding:8px 12px;
background: var(--bg-surface);
color: var(--ink-2);
transition: all 0.35s;
}
/* KPIs */
.kpis{ display:flex; gap:10px; margin-left:8px }
.kpi{
background: var(--bg-surface);
border:1px solid var(--border);
border-radius:999px;
padding:6px 10px; display:flex; align-items:baseline; gap:6px;
transition: all 0.35s;
}
.kpi{ font-weight:700; font-variant-numeric:tabular-nums }
.kpi__label{ color: var(--ink-2) }
/* Pills genéricas */
.pill{
border:1px solid var(--border);
background: var(--bg-surface);
color: var(--ink-2);
padding:4px 10px; border-radius:999px; font-size: var(--fs-sm);
transition: all 0.35s;
}
/* Tabs junto a los KPI */
.ltabs{
position:sticky; top:var(--topbar-h); z-index:40;
display:flex; gap:4px; align-items:center;
padding:6px 16px;
background: var(--bg-deep);
border-bottom:1px solid var(--border);
transition: all 0.35s;
}
.ltab{
appearance:none; border:none; cursor:pointer;
padding: 7px 14px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink-3);
border:1px solid var(--border-light);
transition:all .2s ease;
font-weight:500;
font-size: var(--fs-md);
font-family: var(--font-ui);
}
.ltab:hover{
background: var(--bg-surface);
border-color: var(--border-active);
color: var(--ink);
}
.ltab.is-active{
background: var(--blue-600);
color:#fff;
border-color: var(--blue-600);
box-shadow:0 2px 8px rgba(37,99,235,0.3);
font-weight: 600;
}
/* ============= Botones ============= */
.btn{
appearance:none;
border-radius: var(--radius-sm);
border:1px solid var(--border-light);
background: transparent;
color: var(--ink);
padding:6px 12px;
cursor:pointer;
font-size: var(--fs-base);
font-family: var(--font-ui);
height:32px;
transition:all .2s ease;
}
.btn:hover{ background: var(--bg-surface); border-color: var(--border-active); }
.btn:active{ transform:scale(0.97) }
.btn:disabled{ opacity:.6; cursor:not-allowed }
/* Mapea variantes que ya usas en el HTML */
.btn.ok, .btn.brand, .btn.btn--neutral{
background:var(--blue-600); color:#fff; border-color:var(--blue-600);
}
.btn.ok:hover, .btn.brand:hover, .btn.btn--neutral:hover{
background:var(--blue-700);
border-color:var(--blue-700);
}
.btn.success{ background:var(--green-600); color:#fff; border-color:var(--green-600) }
.btn.success:hover{ background: var(--green-500); border-color: var(--green-500); }
.btn.danger{ background:var(--red-600); color:#fff; border-color:var(--red-600) }
.btn.danger:hover{ background: var(--red-500); border-color: var(--red-500); }
.btn.ghost{
background:transparent;
color: var(--ink-2);
border-color: var(--border-light);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20);
}
.btn.ghost:hover{
background:#f2f4f7;
border-color:#94a3b8;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}
/* ============= Cards / Contenedores ============= */
main{ padding:14px 16px }
.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:var(--pad);
}
.card + .card{ margin-top:14px }
.card .hd{ display:flex; align-items:center; gap:10px; }
.card .bd{ margin-top:10px }
.card .ft{ margin-top:12px }
.section-title{
font-weight:700;
font-size:15px;
margin-bottom:8px;
padding-bottom:6px;
border-bottom:1px solid var(--border);
color:var(--ink);
}
/* Reducir márgenes globales de cards y panels para diseño más compacto */
section.card[data-panel] {
padding:10px 14px;
}
section.card[data-panel] > .bd {
padding-top:6px;
}
/* Reducir espaciado en formularios */
.card {
padding:10px 14px;
margin-bottom:10px;
}
/* Subtabs compactos */
.subtabs-req, .subpanels-bar {
display:flex;
gap:8px;
margin-bottom:12px;
padding-bottom:8px;
border-bottom:1px solid #e5e7eb;
}
.subtabs-req-btn, .subpanel-btn {
padding:6px 14px;
font-size:13px;
border-radius:4px;
border:1px solid transparent;
background:transparent;
color:#6b7280;
cursor:pointer;
transition:all 0.2s;
}
.subtabs-req-btn:hover, .subpanel-btn:hover {
background:#f3f4f6;
}
.subtabs-req-btn.active, .subpanel-btn.active {
background:#10b981;
color:white;
font-weight:600;
}
/* Form grid compacto */
.form-grid {
display:grid;
gap:10px 12px;
}
.form-grid .field {
min-width:0;
}
.form-grid .field label {
font-size:11px;
margin-bottom:4px;
font-weight:600;
}
/* ============= Form / Inputs ============= */
label{ font-weight:500; font-size:12px; color:var(--ink-2); display:block; margin-bottom:4px }
input[type="text"], input[type="number"], input[type="date"], select, textarea, .inp{
width:100%; padding:6px 10px; border-radius:6px;
border:1px solid var(--line); background:#fff; color:var(--text);
font-size:13px;
height:32px;
}
input:focus, select:focus, textarea:focus{
outline:2px solid rgba(1,118,211,.25);
border-color:var(--brand);
}
.row{ display:flex; gap:8px; align-items:center }
.grid{ display:grid; gap:10px }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.form-grid .field{ min-width:0 }
/* CSV layout */
.grid-csv{ display:grid; gap:14px; grid-template-columns:1.2fr .8fr }
.csv-left, .csv-right{ min-width:0 }
/* ============= Tablas ============= */
.table, .tbl{
width:100%; border-collapse:collapse; background:var(--panel);
border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.table thead th, .tbl thead th{
background:var(--head); text-align:left; font-weight:700;
border-bottom:1px solid var(--line-strong);
padding:8px 10px;
font-size:12px;
color:var(--ink-2);
}
.table tbody td, .tbl tbody td{
padding:8px 10px;
border-bottom:1px solid var(--line);
font-size:13px;
color:var(--text);
}
.table tbody tr:nth-child(odd) td{ background:var(--row-alt) }
.table tbody tr:hover td{ background:var(--row-hover) }
td.qty, td.num{ text-align:right; font-variant-numeric:tabular-nums }
/* ============= Modal simple (whDestModal) ============= */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px; z-index:1100 }
.modal.hidden{ display:none }
.modal .dialog{
width:min(680px, 96vw);
background:#fff; color:var(--text);
border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--line);
overflow:hidden;
}
.modal .dialog .hd{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700 }
.modal .dialog .bd{ padding:14px }
.modal .dialog .ft{ padding:12px 14px; border-top:1px solid var(--line) }
/* ============= Utilidades ============= */
.hidden{ display:none !important }
.muted{ color:var(--muted) }
.mt-1{ margin-top:4px } .mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mt-4{ margin-top:16px }
.right{ margin-left:auto }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#334155; font-size:12px }
.is-installed .badge{ background:#e8fff0; color:#065f46 }
.clickable{ cursor:pointer }
.loading{ opacity:.6; pointer-events:none }
/* ===== Dark theme (Salesforce palette) ===== */
@media (prefers-color-scheme: dark){
:root{
/* base */
--bg:#0b1b2a; /* page */
--panel:#0f2438; /* cards/tables */
--head:#0c2a43; /* table header / chips */
--line:rgba(255,255,255,.10);
--text:#e6eef7;
--muted:#aebfd2;
/* brand */
--brand:#1b96ff;
--brand-dark:#0f6ec5;
/* states */
--success:#39b36b;
--danger:#ff5b6b;
--warn:#ffb25b;
--shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45);
--shadow-soft:0 1px 2px rgba(0,0,0,.25);
}
/* fondos que estaban fijos en claro */
.topbar{ background:var(--panel); box-shadow:0 1px 0 var(--line) }
.ltabs{ background:var(--panel); box-shadow:0 1px 0 var(--line) }
.btn{ background:var(--panel); border-color:var(--line); color:var(--text) }
.btn:hover{ background:#122a41 }
.btn.ghost{ background:transparent; border-color:transparent }
/* .toast{ background:var(--panel); color:var(--text); border-color:var(--line) }*/
.table, .tbl{ background:var(--panel) }
.table thead th, .tbl thead th{ background:var(--head); border-color:var(--line) }
.table tbody td, .tbl tbody td{ border-color:var(--line) }
.table tbody tr:nth-child(odd) td{ background:#112a42 }
.table tbody tr:hover td{ background:#15324f }
.host{ background:#102a43; border-color:var(--line); color:var(--muted) }
.kpi, .pill{ background:var(--head); border-color:var(--line); color:var(--text) }
.modal .dialog{ background:var(--panel); border-color:var(--line) }
}
/* Compat para tus clases antiguas de botón */
.btn.btn--neutral{ background:#fff; color:var(--text); border-color:var(--line) }
.btn.btn--neutral:hover{ background:#f2f4f7 }
.btn.btn--success{ background:var(--success); color:#fff; border-color:var(--success) }
.btn.btn--success:hover{ filter:brightness(.95) }
/* ===== Overrides de visibilidad y layout (añadir al final de lightning.css) ===== */
/* 1) Refuerza líneas y estados en tema claro */
:root{
--line: #475569; /* bordes más visibles - oscurecido +3 tonos */
--line-strong:#334155; /* extra para header de tabla - oscurecido +3 tonos */
--row-alt: #f8fafc; /* zebra */
--row-hover: #eef6ff; /* hover claro */
}
/* Topbar / tabs */
.topbar{ box-shadow:0 1px 0 var(--line); }
.ltabs{ box-shadow:0 1px 0 var(--line); }
/* Tablas más legibles */
.table, .tbl{ border-color:var(--line); }
.table thead th, .tbl thead th{
background: var(--head);
border-bottom:1px solid var(--line-strong);
}
.table tbody td, .tbl tbody td{ border-bottom:1px solid var(--line); }
.table tbody tr:nth-child(odd) td{ background: var(--row-alt); }
.table tbody tr:hover td{ background: var(--row-hover); }
/* Scroll container con borde */
.table-scroll{ overflow:auto; border:1px solid var(--line); border-radius:8px; }
/* Botones homogéneos (sin tocar tus clases existentes) */
.btn{ border-color:var(--line); }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.success{ background:var(--success); border-color:var(--success); color:#fff; }
.btn.btn--neutral{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.btn--neutral:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
/* Inputs: borde más claro y foco visible */
input, select, textarea, .inp{
border:1px solid var(--line);
}
input:focus, select:focus, textarea:focus{
outline:2px solid rgba(1,118,211,.25);
border-color:var(--brand);
}
/* Layout fluido: el main usa alto de viewport menos topbar+tabs */
main{
height: calc(100vh - (var(--topbar-h) + 42px)); /* 42px ≈ alto de .ltabs */
overflow:auto;
}
/* 2) Tema oscuro: mismos conceptos, colores adaptados */
@media (prefers-color-scheme: dark){
:root{
--line: rgba(255,255,255,.15);
--line-strong:rgba(255,255,255,.25);
--row-alt: rgba(148,163,184,.08);
--row-hover: rgba(148,163,184,.16);
}
.topbar, .ltabs{ box-shadow:0 1px 0 var(--line); }
.table, .tbl{ background:var(--panel); border-color:var(--line); }
.table thead th, .tbl thead th{ background:var(--head); border-bottom:1px solid var(--line-strong); }
.table tbody td, .tbl tbody td{ border-bottom:1px solid var(--line); }
.table tbody tr:nth-child(odd) td{ background:#112a42 }
.table tbody tr:hover td{ background:#15324f }
.btn{ background:var(--panel); color:var(--text); border-color:var(--line) }
.btn:hover{ background:#122a41 }
input, select, textarea, .inp{
background:#0b1020; color:var(--text); border:1px solid var(--line);
}
}
/* ===== Fin overrides ===== */
/* ===== Layout fluido: topbar + tabs fijos, contenido elástico ===== */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main.panels {
flex: 1 1 auto;
min-height: 0; /* ← permite que los hijos usen overflow sin romper */
padding: 6px 12px;
}
section.card[data-panel]{
height: 100%;
display: flex;
flex-direction: column;
padding: 6px 10px;
}
section.card[data-panel] .bd{
flex: 1 1 auto;
min-height: 0;
overflow: auto; /* ← un único scroll por panel */
}
/* ===== Tablas: diseño compacto y limpio ===== */
.table, .tbl { border-collapse: collapse; background: var(--panel); }
.table th, .table td, .tbl th, .tbl td { border-bottom: 1px solid var(--line); }
.table thead th, .tbl thead th { background: var(--head); border-bottom-color: var(--line); }
/* Sin zebra - solo hover básico */
.table tbody tr:hover td, .tbl tbody tr:hover td { background: rgba(59,130,246,.08); }
#tblInstalled, #tblInv, #tblReqs {
outline: 1px solid var(--line);
width: 100% !important;
table-layout: auto !important;
}
/* Global compact table sizing - ULTRA COMPACTO */
.table.compact th, .table.compact td,
.tbl.compact th, .tbl.compact td,
.data-table th, .data-table td,
#tblInstalled th, #tblInstalled td,
#tblInv th, #tblInv td,
#tblReqs th, #tblReqs td,
#mm_products_table th, #mm_products_table td,
#mv-table th, #mv-table td {
line-height: 1.2 !important;
}
.table.compact th,
.tbl.compact th,
.data-table th,
#tblInstalled th,
#tblInv th,
#tblReqs th,
#mm_products_table th,
#mv-table th {
padding: 3px 4px !important;
font-size: 10px !important;
font-weight: 600;
}
.table.compact td,
.tbl.compact td,
.data-table td,
#tblInstalled td,
#tblInv td,
#tblReqs td,
#mm_products_table td,
#mv-table td {
padding: 3px 4px !important;
font-size: 11px !important;
color: #1f2937;
}
html[data-theme="dark"] .table.compact td,
html[data-theme="dark"] .tbl.compact td,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] #tblInstalled td,
html[data-theme="dark"] #tblInv td,
html[data-theme="dark"] #tblReqs td,
html[data-theme="dark"] #mm_products_table td,
html[data-theme="dark"] #mv-table td {
color: #e6edf5;
}
/* Code elements in tables - más compacto */
.table code, .tbl code,
#tblInstalled code,
#tblInv code,
#tblReqs code {
font-size: 11px !important;
padding: 0px 3px !important;
background: transparent !important;
border-radius: 2px !important;
font-family: 'Consolas', 'Monaco', monospace !important;
}
/* Números alineados a la derecha */
td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ===== Botones: coherentes en claro/oscuro ===== */
.btn{ background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.btn:hover{ filter: brightness(1.05); }
.btn.ok, .btn.brand, .btn.btn--neutral{ background: var(--brand); color:#fff; border-color: var(--brand); }
.btn.ok:hover, .btn.brand:hover, .btn.btn--neutral:hover{ background: var(--brand-dark); }
.btn.success{ background: var(--success); color:#fff; border-color: var(--success) }
.btn.success:hover{ filter: brightness(.95); }
.btn.danger{ background: var(--danger); color:#fff; border-color: var(--danger) }
.btn.danger:hover{ filter: brightness(.95); }
.btn.ghost{ background: transparent; border-color: transparent; color: var(--text) }
/* ===== KPI y pills con borde más presente ===== */
.kpi, .pill { border-color: rgba(148,163,184,.38); }
/* ===== Tabs fijos debajo del topbar ===== */
.ltabs{
position: sticky; top: var(--topbar-h); z-index: 40;
display:flex; gap:6px; align-items:center;
padding:6px 16px;
background: var(--panel); box-shadow: 0 1px 0 var(--line);
}
.ltab{
appearance:none; border:1px solid #b0bec5;
border-radius: 4px; padding:5px 12px; cursor:pointer;
background: #fff; color: #64748b;
font-weight: 500;
font-size: 0.9em;
transition: all 0.2s ease;
}
.ltab:hover{ background: #f1f5f9; border-color: #90a4ae; color: #475569; }
.ltab.is-active{ background: #2563eb; color: #fff; border-color: #2563eb; box-shadow: 0 2px 4px rgba(37,99,235,0.2); }
/* ===== Tema oscuro “estilo Salesforce” forzado (opcional) ===== */
/* Si quieres SIEMPRE oscuro, añade class="force-dark" al */
body.force-dark{
--bg:#0b1b2a; /* page */
--panel:#0f2438; /* cards/tables */
--head:#0c2a43; /* table header/chips */
--line:rgba(255,255,255,.10);
--text:#e6eef7;
--muted:#aebfd2;
--brand:#1b96ff; --brand-dark:#0f6ec5;
--success:#39b36b; --danger:#ff5b6b; --warn:#ffb25b;
--shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45);
--shadow-soft:0 1px 2px rgba(0,0,0,.25);
}
/* ====== SFDC Dark – capa de coherencia / sobreescritura ===== */
:root{
/* base */
--bg-0:#0e1726; /* fondo app */
--bg-1:#101b2e; /* panel */
--bg-2:#0b1324; /* zonas profundas */
--ink:#e6edf5; /* texto */
--ink-2:#bac6d9; /* texto suave */
--brand:#1b96ff; /* primario */
--brand-2:#74c0ff; /* primario claro */
--ok:#22c55e;
--warn:#f59e0b;
--err:#ef4444;
/* bordes / líneas */
--line:#1f2a44;
--line-2:#273556;
/* fields */
--field:#0b1426;
--field-border:#233352;
--field-focus:#1b96ff;
/* tablas */
--row-alt:rgba(148,163,184,.08);
--row-hover:rgba(148,163,184,.16);
}
/* fondo general gradiente discreto */
html,body{background:linear-gradient(180deg,#14213a, #0e1726) fixed;}
body{color:var(--ink)}
/* topbar + tabs */
.topbar{background:var(--bg-2);border-bottom:1px solid var(--line);backdrop-filter:saturate(110%) blur(4px)}
.ltabs{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ltab{color:#64748b;background:#fff;border:1px solid #b0bec5;border-radius:4px;font-weight:500;font-size:0.9em;transition:all 0.2s ease}
.ltab:hover{background:#f1f5f9;border-color:#90a4ae;color:#475569}
.ltab.is-active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 2px 4px rgba(37,99,235,0.2)}
/* kpis */
.kpi__num{font-weight:700}
.kpi__label{opacity:.8}
/* cards */
.card{background:linear-gradient(180deg,var(--bg-1), color-mix(in srgb,var(--bg-1),#fff 5%));border:1px solid var(--line);border-radius:8px}
.card .section-title,.card-title{color:var(--ink);border-bottom:1px solid var(--line-2)}
/* botones (coherentes) */
.btn{border-radius:8px;border:1px solid var(--line);background:#0e2039;color:var(--ink);padding:.52rem .9rem}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55}
.btn.success{background:#0f2d1f;border-color:#1d5d42;color:#b8ffd7}
.btn.success:hover{background:#164a33}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#00131f}
.btn.danger{background:#2a0e12;border-color:#5f1d25;color:#ffb4b8}
/* inputs coherentes */
input,select,textarea{background:var(--field);border:1px solid var(--field-border);color:var(--ink);border-radius:8px;padding:.48rem .6rem}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--field-focus) 75%, transparent);border-color:var(--field-focus)}
input[readonly],select[disabled],textarea[readonly]{opacity:.75}
/* grid de formularios */
.form-grid .field{display:flex;flex-direction:column;gap:6px}
.form-grid .field > label{font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:4px}
/* helpers para anchos */
.col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-6{grid-column:span 6} .col-12{grid-column:span 12}
/* tabla estándar */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl thead th{position:sticky;top:0;background:linear-gradient(180deg,#0f1830,#0b1426);z-index:1;border-bottom:1px solid var(--line);text-align:left}
/* Padding y font-size ahora están definidos globalmente arriba con !important */
.tbl tbody tr:nth-child(2n){background:var(--row-alt)}
.tbl tbody tr:hover{background:var(--row-hover)}
.tbl td.num{text-align:right}
/* Estilos para filtros de inventario - STICKY HEADER */
/* El wrapper #tblInvWrapper tiene overflow:auto y max-height */
/* Wrapper de la tabla de inventario */
#tblInvWrapper {
position: relative;
max-height: calc(100vh - 310px);
overflow-y: auto;
overflow-x: auto;
border: 1px solid #b0bec5;
border-radius: 4px;
background: #fff;
}
/* Importante: la tabla necesita border-collapse:separate para sticky */
#tblInv {
border-collapse: separate !important;
border-spacing: 0;
width: 100%;
}
/* Header sticky - COMPACTO */
#tblInv thead tr.inv-header th {
position: sticky;
top: 0;
z-index: 20;
background: #f8fafc !important;
color: #374151 !important;
cursor: pointer;
user-select: none;
padding: 7px 6px !important;
font-weight: 600;
font-size: 11px !important;
border-bottom: 1px solid #e5e7eb;
text-align: left;
white-space: nowrap;
}
/* Filters sticky - COMPACTO */
/* header real height: 11px font * 1.2 line-height + 14px padding + 1px border ≈ 28px */
#tblInv thead tr.inv-filters th {
position: sticky;
top: 28px;
z-index: 19;
background: #f1f5f9 !important;
padding: 5px 4px 8px !important;
border-bottom: 2px solid var(--line-strong, #90a4ae);
}
#tblInv .inv-header th:hover {
background: #e5e7eb !important;
}
#tblInv .inv-header th::after {
content: '';
margin-left: 4px;
font-size: 9px;
}
#tblInv .inv-header th.sorted-asc::after {
content: '▲';
color: #3b82f6;
font-size: 8px;
}
#tblInv .inv-header th.sorted-desc::after {
content: '▼';
color: #3b82f6;
font-size: 8px;
}
#tblInv .inv-filters input {
width: 100%;
padding: 3px 6px;
font-size: 11px;
border: 1px solid #d1d5db;
border-radius: 3px;
background: #ffffff;
color: #1e293b;
outline: none;
}
#tblInv .inv-filters input:focus {
border-color: #3b82f6;
background: #ffffff;
}
#tblInv .inv-filters input::placeholder {
color: #9ca3af;
opacity: 1;
font-size: 10px;
}
/* Body de la tabla - COMPACTO y LIMPIO */
#tblInv tbody tr {
background: #fff;
}
#tblInv tbody tr:first-child td {
padding-top: 6px !important;
}
#tblInv tbody tr:hover {
background: #f0f9ff !important;
}
#tblInv tbody td {
padding: 3px 4px !important;
font-size: 11px !important;
border-bottom: 1px solid var(--line);
color: #1f2937;
}
/* ============================================================
Estilos para Filtros Dinámicos de Machine Movements
============================================================ */
#mm_products_table .mm-header th {
cursor: pointer;
user-select: none;
position: relative;
transition: background 0.2s;
}
#mm_products_table .mm-header th:hover {
background: rgba(148,163,184,.15);
}
#mm_products_table .mm-header th::after {
content: '⇅';
opacity: 0.3;
margin-left: 6px;
font-size: 10px;
}
#mm_products_table .mm-header th.sorted-asc::after {
content: '↑';
opacity: 1;
color: var(--brand);
}
#mm_products_table .mm-header th.sorted-desc::after {
content: '↓';
opacity: 1;
color: var(--brand);
}
#mm_products_table .mm-filters th {
padding: 2px 4px;
background: var(--bg-deep);
}
#mm_products_table .mm-filters input {
width: 100%;
padding: 4px 6px;
font-size: 11px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--panel);
color: var(--text);
outline: none;
transition: all 0.2s;
}
#mm_products_table .mm-filters input:focus {
border-color: var(--brand);
background: var(--panel);
box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}
#mm_products_table .mm-filters input::placeholder {
color: var(--muted);
opacity: 0.6;
}
/* Tabla de Movimiento de Máquinas más compacta */
#mv-table th, #mv-table td{
padding:3px 4px;
font-size:11px;
line-height:1.2;
}
#mv-table thead th{
position:sticky;
top:0;
background:linear-gradient(180deg,#0f1830,#0b1426);
z-index:1;
border-bottom:1px solid var(--line);
text-align:left;
}
#mv-table tbody tr:nth-child(2n){
background:var(--row-alt);
}
#mv-table tbody tr:hover{
background:var(--row-hover);
}
/* Tabla de Asignaciones a Salas más compacta */
#as-table th, #as-table td{
padding:.5rem .6rem;
font-size:12px;
line-height:1.4;
}
#as-table thead th{
position:sticky;
top:0;
background:linear-gradient(180deg,#0f1830,#0b1426);
z-index:1;
border-bottom:1px solid var(--line);
text-align:left;
}
#as-table tbody tr:nth-child(2n){
background:var(--row-alt);
}
#as-table tbody tr:hover{
background:var(--row-hover);
}
/* Tabla de Histórico de Solicitudes más compacta */
#tblRequests th, #tblRequests td{
padding:.5rem .6rem;
font-size:12px;
line-height:1.4;
}
/* Tabla del modal de albarán (QI) más compacta */
#albItems th, #albItems td{
padding:.5rem .6rem !important;
font-size:12px !important;
line-height:1.4 !important;
background:transparent !important; /* Desactiva zebra vertical de columnas */
}
#albItems thead th{
position:sticky;
top:0;
background:linear-gradient(180deg,#0f1830,#0b1426) !important;
z-index:1;
border-bottom:1px solid var(--line);
text-align:left;
}
/* Zebra HORIZONTAL (filas) - no vertical */
#albItems tbody tr:nth-child(2n) td{
background:var(--row-alt) !important;
}
#albItems tbody tr:hover td{
background:var(--row-hover) !important;
filter:none !important; /* Desactiva el filter de las reglas de zebra vertical */
}
/* Desactiva zebra vertical de .col-hover en todas las columnas */
#albItems tbody td:nth-child(even),
#albItems tbody td:nth-child(odd),
#albItems tbody td:first-child,
#albItems thead th:nth-child(even),
#albItems thead th:nth-child(odd),
#albItems thead th:first-child{
background:transparent !important;
}
/* Desactiva efecto .col-hover.is-col */
#albItems th.is-col,
#albItems td.is-col{
background:transparent !important;
box-shadow:none !important;
filter:none !important;
}
/* Zebra horizontal tiene prioridad sobre todo */
#albItems tbody tr:nth-child(2n) td,
#albItems tbody tr:nth-child(2n) td:nth-child(even),
#albItems tbody tr:nth-child(2n) td:nth-child(odd),
#albItems tbody tr:nth-child(2n) td:first-child,
#albItems tbody tr:nth-child(2n) td.is-col{
background:var(--row-alt) !important;
}
/* Headers siempre con el mismo gradiente */
#albItems thead th,
#albItems thead th:nth-child(even),
#albItems thead th:nth-child(odd),
#albItems thead th:first-child,
#albItems thead th.is-col{
background:linear-gradient(180deg,#0f1830,#0b1426) !important;
}
/* Inputs dentro de #albItems con formato compacto */
#albItems input{
padding:4px 6px !important;
font-size:12px !important;
line-height:1.4 !important;
border-radius:4px !important;
height:auto !important;
min-height:unset !important;
}
/* paneles de lista grandes con alto dinámico */
.panel-body-scroll{max-height:calc(100vh - 280px);overflow:auto}
.loc-list{max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);padding:6px}
/* mejorar selects de estado/mov/origen/destino */
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%, var(--ink-2) 50%),linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);background-position:calc(100% - 16px) calc(1em + 2px), calc(100% - 11px) calc(1em + 2px);background-size:5px 5px, 5px 5px;background-repeat:no-repeat;padding-right:28px}
/* ===== Fin Lightning look & feel ===== */
/* Lista de locations compacta */
.loc-list,
#locationsPanel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
/* Tabla con cabecera sticky + zebra */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--bg-2) }
.tbl{ width:100%; border-collapse:separate; border-spacing:0 }
.tbl thead th{
position:sticky; top:0; z-index:1;
background:linear-gradient(180deg,#0f1830,#0b1426);
border-bottom:1px solid var(--line);
}
.tbl th,.tbl td{ padding:.55rem .7rem }
.tbl tbody tr:nth-child(2n){ background:rgba(148,163,184,.08) }
.tbl tbody tr:hover{ background:rgba(148,163,184,.16) }
.tbl td.num{text-align:right}
.hidden{ display:none !important }
/* Panel de Locations (inventario) */
#locationsPanel select#invLocations {
max-height: 140px; /* ~4 ítems visibles */
overflow: auto;
}
#locationsPanel .hidden {
display: none !important; /* usamos la clase que togglean desde JS */
}
/* Panel de Requests - filtros */
/* ===== Inventario (toolbar) – layout en grid + locations 30% ===== */
#tabInv #invToolbar > .row{
display: grid;
grid-template-columns: 1fr minmax(220px, 30%) 200px 160px; /* q | locations | categoría | vista */
grid-auto-rows: auto;
gap: 12px;
align-items: start;
}
/* Posicionamiento de cada control dentro del grid */
#tabInv #invToolbar #q { grid-column: 1; }
#tabInv #invToolbar #locationsPanel { grid-column: 2; }
#tabInv #invToolbar #invPartType { grid-column: 3; }
#tabInv #invToolbar #invView { grid-column: 4; }
/* Modo debajo de Categoría (col 3, fila 2) */
#tabInv #invToolbar #invMode { grid-column: 3; grid-row: 2; }
/* Compactar locations panel */
/* #locationsPanel ya no se usa - eliminado del HTML */
/* #locationsPanel {
width:100%;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px;
}
#locationsPanel label {
display:block;
font-size:11px;
font-weight: 500;
color:var(--text);
margin-bottom:4px;
}
#locationsPanel #invLocations {
width:100%;
padding: 6px 8px;
font-size: 13px;
height: 60px;
border: 2px solid var(--primary);
background: white;
color: #000;
border-radius: 6px;
} */
/* ---------- Inventario: toolbar en grilla, locations compacto ---------- */
.inv-toolbar-grid{
display:grid;
grid-template-columns: minmax(260px, 1fr) minmax(260px, .8fr) auto auto;
gap: 8px;
align-items: end;
}
/* Colocación por grid */
#q{ grid-column:1; }
#locationsPanel{ grid-column:2; }
#invPartType{ grid-column:3; }
#invView{ grid-column:4; }
/* Modo debajo de Categoría cuando aplique */
#invMode{
grid-column:3;
grid-row:2;
margin-top: 4px;
}
/* Panel locations compacto: sólo aparece si el buscador tiene texto */
#locationsPanel select{
max-height: 8.5rem; /* ~4 filas con scrollbar */
overflow:auto;
}
/* Estado “oculto” por buscador vacío */
/* #invLocations{ display:none; } */
/* #invLocations.show{ display:block; } */
.invLocAllWrap{ display:none; }
.invLocAllWrap.show{ display:flex; }
/* Reducir visualmente el panel para ahorrar espacio */
#locationsPanel label{ display:block; margin-bottom:4px; font-weight:500; font-size:12px; color:var(--ink-2); }
#locationsPanel input[type="text"]{ width:100%; margin-bottom:6px; }
/* Locations compacto: sólo visible al escribir */
#locationsPanel select{
max-height: 8.5rem; /* ~4 ítems */
overflow:auto;
}
/* #invLocations{ display:none; } */
/* #invLocations.show{ display:block; } */
.invLocAllWrap{ display:none; }
.invLocAllWrap.show{ display:flex; }
#locationsPanel label{ display:block; margin-bottom:4px; font-weight:500; font-size:12px; color:var(--ink-2); }
#locationsPanel input[type="text"]{ width:100%; margin-bottom:6px; }
/* ===== Requests: filtros en grilla ===== */
/* INVENTARIO: rejilla de filtros compacta y sin huecos */
/*#tabInv #invFilters{
display: grid;
grid-template-columns: 1.25fr 1fr 1fr; /* Buscar | Almacenes | Categoría/Vista */
/*column-gap: 16px;
row-gap: 10px;
align-items: start; /* ⬅ alinear arriba para no dejar franjas vacías */
/* grid-auto-rows: min-content; /* ⬅ la altura de cada fila es la del contenido */
/*}*/
/* Etiquetas y controles con altura consistente */
/* Comentado - estilos movidos a la sección principal de #invFilters */
/*
#tabInv #invFilters .field > label{
margin: 0 0 6px;
font-weight: 400;
}
#tabInv #invFilters .field input[type="text"],
#tabInv #invFilters .field select{
height: 36px;
line-height: 36px;
padding: 6px 10px;
}
*/
/* Panel "Almacenes" no reserva altura extra */
#tabInv #locationsPanel{ align-self: start; }
/* Coloca "Modo (solo Warehouse)" justo debajo de Categoría/Vista (columna 3) */
/*#tabInv #invModeBox{
grid-column: 3;
grid-row: 2; /* debajo de la primera fila en la col 3 */
/*}*/
/* (Por si lo necesitas) el listado de locations se muestra solo al escribir,
y su alto es corto. Si ya lo tienes por JS, estas reglas no estorban. */
#tabInv #invLocations{ display: none; max-height: 128px; }
#tabInv #invLocations.show { display: block; }
/* Detalle por material (Inventario > vista Warehouse > modo Agrupado) */
.inv-detail .detail-wrap{
display: grid;
grid-template-columns: 1fr minmax(320px, 0.9fr); /* izq más ancha, der un poco más angosta */
gap: 16px;
align-items: start;
}
/* Responsivo: si no cabe, cae a una sola columna */
@media (max-width: 1200px){
.inv-detail .detail-wrap{ grid-template-columns: 1fr; }
}
/* Cajitas visuales opcionales */
.inv-detail .box{
background: var(--card, #203041);
border: 1px solid var(--border, rgba(255,255,255,.08));
border-radius: 8px;
padding: 12px;
}
.inv-detail .box h4{
margin: 0 0 8px;
font-weight: 600;
font-size: .95rem;
}
/* —— Inventario > Detalle (agrupado): dos columnas —— */
.detail-wrap{
display: grid !important;
grid-template-columns: 1fr minmax(340px, 0.9fr); /* izq más ancha, der un poco más angosta */
gap: 16px;
align-items: start;
}
/* Si no hay ancho suficiente, cae a una columna */
@media (max-width: 1200px){
.detail-wrap{ grid-template-columns: 1fr; }
}
/* Cajitas visuales */
.detail-wrap .box{
background: var(--card, #203041);
border: 1px solid var(--border, rgba(255,255,255,.08));
border-radius: 8px;
padding: 12px;
}
/* Oculta separadores sueltos que se insertaban después del detalle */
.inv-detail td > div:not(.detail-wrap){ display: none !important; }
/* ——— Detalle bajo filas de inventario ——— */
/* Fila de detalle debe ocupar TODO el ancho */
.inv-detail {
width: 100% !important;
}
/* Fondo coherente con el tema (evita "barras" claras) */
.inv-detail td{
background: var(--panel);
padding: 12px !important;
width: 100% !important;
max-width: none !important;
}
/* El drillwrap debe ignorar el grid de .detail-wrap y ocupar TODO el ancho */
.inv-detail td > .drillwrap {
display: block !important;
width: 100% !important;
max-width: none !important;
}
/* Soporta ambos contenedores: .detail-wrap (viejo) y .drillwrap (nuevo) */
.inv-detail td > .detail-wrap,
.inv-detail td > .drillwrap{
display: flex !important;
gap: 16px !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* Hijos a dos columnas iguales */
.inv-detail td > .detail-wrap > div,
.inv-detail td > .drillwrap > .drillcol{
flex: 1 1 0;
min-width: 0;
}
/* Tablas internas del detalle */
.inv-detail .mini{
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* evita que se desboquen y se “extiendan” */
}
.inv-detail .mini th,
.inv-detail .mini td{
padding: 6px 8px;
border-bottom: 1px solid var(--line);
}
/* === Tabla Jerárquica (Estilo Excel) === */
.inv-detail .mini.hierarchical .expandable {
cursor: pointer;
transition: background 0.15s;
}
.inv-detail .mini.hierarchical .expandable:hover {
background: #f8f9fa;
}
.inv-detail .mini.hierarchical .expand-icon {
display: inline-block;
width: 16px;
font-family: monospace;
font-weight: bold;
color: #0176D3;
margin-right: 6px;
}
.inv-detail .mini.hierarchical .level-1 {
background: #f0f4f8;
font-weight: 600;
}
.inv-detail .mini.hierarchical .level-2 {
background: #f8fafb;
}
.inv-detail .mini.hierarchical .level-3 {
background: white;
}
.inv-detail .mini.hierarchical .hidden {
display: none;
}
.inv-detail .mini.hierarchical .level-1 td {
border-bottom: 2px solid #d1d5db;
}
.inv-detail .mini.hierarchical .level-2 td {
border-bottom: 1px solid #e5e7eb;
}
.inv-detail .mini.hierarchical .level-3 td {
border-bottom: 1px solid #f3f4f6;
}
/* Título sobre cada panel del desglose */
.drilltitle{
font-weight: 700;
margin: 6px 0;
width: 100%; /* Asegurar que ocupe todo el ancho */
}
/* En pantallas estrechas, apila verticalmente */
@media (max-width: 1100px){
.inv-detail td > .detail-wrap,
.inv-detail td > .drillwrap{
flex-direction: column;
}
}
/* Contenedor de las dos tablas */
.drillwrap{
display: block !important;
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* Grupo por configuración ocupa todo el ancho */
.config-group {
width: 100% !important;
margin-bottom: 24px;
}
/* Contenedor interno con las dos tablas lado a lado */
.config-group > div[style*="flex"] {
display: flex !important;
gap: 16px !important;
width: 100% !important;
flex-wrap: nowrap !important;
}
/* Cada columna (cada tabla) ocupa 50% del ancho */
.drillcol{
flex: 1 1 50% !important;
min-width: 0 !important;
max-width: 50% !important;
}
/* Encabezado de configuración más visible */
.drillwrap .config-header {
background: #dc2626;
color: #fff;
padding: 8px 12px;
margin-bottom: 12px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3px;
}
/* Separador visual entre grupos de configuración */
.drillwrap .config-group {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 24px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.drillwrap .config-group:not(:last-child) {
margin-bottom: 24px;
}
.drillwrap .config-group > div[style*="display:flex"] {
display: flex !important;
gap: 16px !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
}
.drillwrap .config-group .drillcol {
flex: 1 1 0 !important;
min-width: 0 !important;
margin-bottom: 0 !important;
max-width: none !important;
}
/* Tablas internas */
.inv-detail .mini{
width: 100% !important;
border-collapse: collapse;
table-layout: auto !important;
}
.inv-detail .mini th,
.inv-detail .mini td{
padding: 8px 12px;
border-bottom: 1px solid var(--line);
}
/* En móvil, apilar */
@media (max-width: 820px){
.drillwrap{ flex-direction: column; }
}
/* --- Inventario: dropdown de locations --- */
#invLocDropdown { backdrop-filter: blur(4px); }
#invLocList li { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; cursor:pointer; }
#invLocList li:hover { background: rgba(148,163,184,.12); }
#invLocList .loc-code { font-variant-numeric: tabular-nums; opacity:.8; }
#invLocList .loc-desc { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Contraste y legibilidad del buscador de locations */
#locationsPanel #invLocSearch{
color:#e5e7eb!important; font-weight:500; background:#0b1220!important;
border-color:#1f2a44!important; caret-color:#e5e7eb!important;
}
#locationsPanel #invLocSearch::placeholder{ color:#94a3b8!important; opacity:.9; }
/* Mostrar/ocultar lista con tu clase 'show' (ya existente en tu CSS) */
/* #invLocations{ display:none; } */
#invLocations.show{ display:block; max-height:15rem; overflow:auto; }
.invLocAllWrap{ display:none; }
.invLocAllWrap.show{ display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
/* Inventory: Locations dropdown — asegurar precedencia */
#invLocations.show {
display: block !important;
max-height: 15rem;
overflow: auto;
}
.invLocAllWrap.show {
display: flex !important;
align-items: center;
gap: .5rem;
}
/* Mejorar input */
#locationsPanel #invLocSearch{
color:#e5e7eb!important; font-weight:500;
background:#0b1220!important; border-color:#1f2a44!important;
caret-color:#e5e7eb!important;
}
#locationsPanel #invLocSearch::placeholder{ color:#94a3b8!important; opacity:.9; }
/* ====== Solicitudes: unificar estilo de inputs numéricos ====== */
/* Mismo look que los selects (tema oscuro) */
/*#tabReqs .form-grid .field input[type="number"],
#tabReqs .form-grid .field input[type="text"],
#tabReqs .form-grid .field select::placeholder{
background: var(--ink) !important;
border: 1px solid var(--field-border) !important;
color: var(--text-strong, #111) !important;
height: 36px;
line-height: 36px;
padding: 6px 10px;
border-radius: 8px;
-webkit-text-fill-color: var(--text-strong, #111) !important;
opacity: 1;
}*/
/* Stock actual (readonly) que se vea consistente, no “apagado” de más */
/* Opción recomendada: quita opacity y fuerza color con alta prioridad */
/*#tabReqs .form-grid{
background: color-mix(in srgb, var(--ink) 90%, #fff 10%) !important;
color: var(--text-strong, #111) !important;
-webkit-text-fill-color: var(--text-strong, #111) !important;
opacity: 1;
}
#tabReqs .form-grid::placeholder{
color: #666 !important;
opacity: 1;
}*/
/* (opcional) ocultar flechas de los ) */
.card{
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow-soft);
}
/* Texto general */
label, .label { color: var(--ink-2); }
.section-title, .card-title { color: var(--text); }
.muted { color: var(--muted) }
/* ===== Controles (inputs/selects/textarea) ===== */
input, select, textarea, .inp, .host{
background: var(--panel);
color: var(--text);
border: 1px solid var(--line);
border-radius: 8px;
}
input:focus, select:focus, textarea:focus, .inp:focus, .host:focus{
outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
border-color: var(--brand);
}
/* Disabled legible, sin perder contraste */
:where(input,select,textarea):disabled{
background: #F5F7FA;
color: #6B7A90;
}
/* ===== Botones ===== */
.btn{
background: var(--panel);
color: var(--text);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
.btn:hover{ filter: brightness(1.03); }
.btn.ok, .btn.brand, .btn.btn--neutral{ background: var(--brand); border-color: var(--brand); color:#fff; }
.btn.ok:hover, .btn.brand:hover, .btn.btn--neutral:hover{ background: var(--brand-dark); }
.btn.success{ background: var(--success); border-color: var(--success); color:#fff; }
.btn.danger{ background: var(--danger); border-color: var(--danger); color:#fff; }
.btn.ghost{ background: transparent; border-color: transparent; color: var(--text); }
/* Pills / badges / KPI */
.pill, .kpi{
background: var(--head);
border: 1px solid var(--line);
color: var(--text);
}
.badge{ background: #E6F1FD; color:#1E2D4B; }
/* ===== Tablas (table/tbl) ===== */
.table, .tbl{ background: var(--panel); border-collapse: collapse; }
.table th, .tbl th, .table td, .tbl td{ border-bottom: 1px solid var(--line); }
.table thead th, .tbl thead th{
background: var(--head) !important; /* fuerza frente a gradientes antiguos */
color: var(--text);
border-bottom: 1px solid color-mix(in srgb, var(--line) 90%, #94A3B8);
}
.table tbody tr:nth-child(odd) td, .tbl tbody tr:nth-child(odd) td{ background: var(--row-alt); }
.table tbody tr:hover td, .tbl tbody tr:hover td{ background: var(--row-hover); }
/* ===== Toasts y modales (si los usas) ===== */
/*.toast{ background: var(--panel); color: var(--text); border:1px solid var(--line); box-shadow: var(--shadow); }*/
.modal .dialog{ background: var(--panel); border:1px solid var(--line); box-shadow: var(--shadow); }
/* ===== Compat con tema oscuro forzado ===== */
/* Si está presente, seguirá usando tu paleta oscura actual. */
/* (no tocamos tus reglas de .force-dark existentes) */
/* =========================================================
INVENTORY APP — SLDS LIGHT (alta legibilidad)
Solo COLORES. No cambia layouts ni tamaños.
========================================================= */
:root{
/* Brand */
--brand: #0070D2;
--brand-dark: #005FB2;
/* Feedback */
--success: #2E844A;
--danger: #C23934;
--warn: #DEBD2D;
/* Neutrales claros */
--bg: #F0F4F8; /* fondo app */
--panel: #FFFFFF; /* cards / inputs */
--head: #E6F1FD; /* cabeceras */
--line: #94a3b8; /* bordes visibles - oscurecido +2 */
--text: #1E2D4B; /* texto */
--muted: #576A82; /* texto secundario */
/* Tablas */
--row-alt: #FAFCFF;
--row-hover: #EEF6FF;
/* Sombra suave */
--shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
--shadow-soft: 0 1px 2px rgba(16,24,40,.04);
/* Bordes / radios genéricos */
--radius:12px;
}
/* ---------- Base / tipografía ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
margin:0;
font:12px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
background:var(--bg);
color:var(--text);
}
/* ---------- Topbar, KPI y Tabs ---------- */
.topbar{ position:sticky; top:0; z-index:50; background:var(--panel); box-shadow:0 1px 0 var(--line); }
.topbar__row{ min-height:54px; display:flex; align-items:center; gap:12px; padding:0 16px; }
.brand{ font-weight:700; font-size:16px; white-space:nowrap }
.kpis{ display:flex; gap:10px; margin-left:8px }
.kpi{ background:#F7F9FB; border:1px solid var(--line); border-radius:999px; padding:6px 10px; display:flex; align-items:baseline; gap:6px; font-weight:700; font-variant-numeric:tabular-nums }
.kpi__label{ color:var(--muted) }
.pill{ border:1px solid var(--line); background:#F7F9FB; color:var(--muted); padding:4px 10px; border-radius:999px; font-size:12px }
.ltabs{ position:sticky; top:64px; z-index:40; display:flex; gap:8px; align-items:center; padding:10px 16px; background:var(--panel); box-shadow:0 1px 0 var(--line); }
.ltab{
appearance:none; border:1px solid var(--line); cursor:pointer;
padding:8px 14px; border-radius:999px;
background:#F7F9FB; color:var(--text);
transition:background .15s ease, border-color .15s ease;
}
.ltab:hover{ background:#EEF4FF; border-color:#D6E4FF }
.ltab.is-active{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--shadow-soft); }
/* ---------- Botones ---------- */
.btn{
appearance:none; border-radius:8px; border:1px solid var(--line);
background:var(--panel); color:var(--text);
padding:8px 12px; cursor:pointer;
transition:background .15s, border-color .15s, color .15s, transform .02s;
}
.btn:hover{ filter:brightness(1.03) }
.btn:active{ transform:translateY(1px) }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.btn.ok, .btn.brand, .btn.btn--neutral{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.ok:hover, .btn.brand:hover, .btn.btn--neutral:hover{ background:var(--brand-dark); border-color:var(--brand-dark) }
.btn.success{ background:var(--success); color:#fff; border-color:var(--success) }
.btn.success:hover{ filter:brightness(.95) }
.btn.danger{ background:var(--danger); color:#fff; border-color:var(--danger) }
.btn.danger:hover{ filter:brightness(.95) }
.btn.ghost{ background:transparent; color:var(--text); border-color:transparent; }
.btn.ghost:hover{ background:#F2F4F7 }
/* ---------- Cards / contenedores ---------- */
main{ padding:14px 16px }
.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:14px;
}
.card + .card{ margin-top:14px }
.section-title, .card-title{ font-weight:700; margin-bottom:8px; color:var(--text) }
.card .bd{ margin-top:10px }
/* ---------- Formularios ---------- */
label{ font-weight:500; font-size:12px; color:var(--ink-2); display:block; margin-bottom:4px }
input[type="text"], input[type="number"], input[type="date"], input[type="file"], select, textarea, .inp, .host{
width:100%; padding:8px 10px; border-radius:8px;
border:1px solid var(--line); background:var(--panel); color:var(--text);
}
input::placeholder, textarea::placeholder{ color:#748A9D }
input:focus, select:focus, textarea:focus, .inp:focus, .host:focus{
outline:2px solid color-mix(in srgb, var(--brand) 30%, transparent);
border-color:var(--brand);
}
input[disabled], select[disabled], textarea[disabled]{ background:var(--head); color:var(--ink-3, var(--muted)) }
.row{ display:flex; gap:10px; align-items:center }
.grid{ display:grid; gap:12px }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
/* Grids de formularios existentes */
.form-grid{ display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid .field{ min-width:0 }
/* CSV layout */
.grid-csv{ display:grid; gap:14px; grid-template-columns:1.2fr .8fr }
.csv-left, .csv-right{ min-width:0 }
/* ---------- Tablas ---------- */
.table, .tbl{
width:100%; border-collapse:collapse; background:var(--panel);
border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.table thead th, .tbl thead th{
background:var(--head); text-align:left; font-weight:700;
border-bottom:1px solid var(--line);
padding:10px 12px;
}
.table tbody td, .tbl tbody td{ padding:10px 12px; border-bottom:1px solid var(--line); }
.table tbody tr:nth-child(odd) td{ background:var(--row-alt) }
.table tbody tr:hover td{ background:var(--row-hover) }
td.qty, td.num{ text-align:right; font-variant-numeric:tabular-nums }
/* ---------- Toasts ---------- */
/*.toast-host{ position:fixed; top:calc(64px + 12px); right:16px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
.toast{
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
min-width:260px; max-width:420px;
background:var(--panel); color:var(--text);
border:1px solid var(--line); border-left:4px solid var(--brand);
border-radius:10px; padding:10px 12px; box-shadow:var(--shadow);
}
.toast.success{ border-left-color:var(--success) }
.toast.warn{ border-left-color:var(--warn) }
.toast.error{ border-left-color:var(--danger) }*/
/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.08); display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px; z-index:1100 }
.modal.hidden{ display:none }
.modal .dialog{
width:min(680px, 96vw);
background:var(--panel); color:var(--text);
border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--line);
overflow:hidden;
}
.modal .dialog .hd{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700 }
.modal .dialog .bd{ padding:14px }
.modal .dialog .ft{ padding:12px 14px; border-top:1px solid var(--line) }
/* ---------- Utilidades ---------- */
.hidden{ display:none !important }
.muted{ color:var(--muted) }
.mt-1{ margin-top:4px } .mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mt-4{ margin-top:16px }
.right{ margin-left:auto }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; background:#EEF2FF; color:#334155; font-size:12px }
.badge[data-src="requests"]{ background:#bfdbfe; color:#1e3a8a; }
.badge[data-src="installs_log"]{ background:#bbf7d0; color:#065f46; }
/* =========================================================
ESPECÍFICOS DE LAS PESTAÑAS / PANELES
========================================================= */
/* Layout fluido del main/panel */
main.panels{ height:calc(100vh - (64px + 42px)); overflow:auto; padding:14px 16px; }
section.card[data-panel]{ height:100%; display:flex; flex-direction:column; }
section.card[data-panel] .bd{ flex:1 1 auto; min-height:0; overflow:auto; }
/* ========================================
Inventario – Barra de filtros responsive
======================================== */
#invFilters {
display: flex;
flex-wrap: nowrap;
gap: 10px;
align-items: center;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 8px 12px;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
min-height: 48px;
}
/* Campos de filtro */
#invFilters .inv-field {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
#invFilters .inv-field.inv-search {
flex: 1 1 auto;
min-width: 160px;
max-width: 280px;
}
#invFilters .inv-field label {
font-weight: 600;
font-size: 10px;
color: #6b7280;
margin: 0;
white-space: nowrap;
line-height: 1;
}
#invFilters .inv-field input,
#invFilters .inv-field select {
height: 30px;
padding: 0 10px;
font-size: 13px;
color: #374151;
background: white;
border: 1px solid #d1d5db;
border-radius: 5px;
transition: border-color 0.15s, box-shadow 0.15s;
}
#invFilters .inv-field input {
width: 100%;
}
#invFilters .inv-field select {
width: 110px;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7280' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
#invFilters .inv-field input:hover,
#invFilters .inv-field select:hover {
border-color: #9ca3af;
}
#invFilters .inv-field input:focus,
#invFilters .inv-field select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
#invFilters .inv-field input::placeholder {
color: #9ca3af;
font-size: 12px;
}
/* Separador vertical */
#invFilters .inv-separator {
width: 1px;
height: 32px;
background: #d1d5db;
flex-shrink: 0;
margin: 0 4px;
}
/* Botones */
#invFilters .inv-btn {
flex-shrink: 0;
height: 30px;
padding: 0 12px;
font-size: 12px;
font-weight: 500;
border-radius: 5px;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 4px;
}
#invFilters .inv-btn-blue {
background: #3b82f6;
color: white;
}
#invFilters .inv-btn-blue:hover {
background: #2563eb;
}
#invFilters .inv-btn-orange {
background: #f97316;
color: white;
}
#invFilters .inv-btn-orange:hover {
background: #ea580c;
}
#invFilters .inv-btn-purple {
background: #7c3aed;
color: white;
}
#invFilters .inv-btn-purple:hover {
background: #6d28d9;
}
#invFilters .inv-btn-ghost {
background: white;
color: #374151;
border-color: #d1d5db;
}
#invFilters .inv-btn-ghost:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
/* Responsive: pantallas medianas */
@media (max-width: 1200px) {
#invFilters .inv-field.inv-search {
max-width: 200px;
}
#invFilters .inv-field select {
width: 100px;
}
#invFilters .inv-btn {
padding: 0 8px;
font-size: 11px;
}
}
/* Responsive: pantallas pequeñas */
@media (max-width: 900px) {
#invFilters {
flex-wrap: wrap;
gap: 8px;
}
#invFilters .inv-field.inv-search {
flex: 1 1 100%;
max-width: none;
order: -1;
}
#invFilters .inv-separator {
display: none;
}
}
/* ========================================
Órdenes – Estilos compactos y responsive
======================================== */
/* Panel de órdenes contenedor */
#inv-panel-orders {
font-size: 13px;
}
/* Header compacto */
#inv-panel-orders .orders-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 12px;
}
#inv-panel-orders .orders-header h3 {
font-size: 1.1em;
margin: 0;
}
/* Stats cards compactas */
#inv-panel-orders .orders-stats {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#inv-panel-orders .orders-stats .stat-card {
background: rgba(255,255,255,0.95);
padding: 8px 12px;
border-radius: 6px;
text-align: center;
min-width: 80px;
flex: 1;
}
#inv-panel-orders .orders-stats .stat-card .stat-value {
font-size: 1.4em;
font-weight: 700;
line-height: 1.2;
}
#inv-panel-orders .orders-stats .stat-card .stat-label {
font-size: 0.7em;
color: #6b7280;
font-weight: 600;
}
/* Filtros compactos en una línea */
#inv-panel-orders .orders-filters {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
padding: 10px 12px;
background: #f8fafc;
border-radius: 8px;
margin-bottom: 10px;
border: 1px solid #e5e7eb;
}
#inv-panel-orders .filter-group {
display: flex;
gap: 6px;
align-items: center;
}
#inv-panel-orders .filter-label {
font-size: 10px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
white-space: nowrap;
}
/* Botones de filtro compactos */
.order-filter-btn {
padding: 5px 10px !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 5px !important;
border: none !important;
cursor: pointer;
transition: all 0.15s ease !important;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.order-filter-btn .filter-count {
background: rgba(255,255,255,0.3);
padding: 1px 6px;
border-radius: 8px;
font-size: 10px;
margin-left: 4px;
}
.order-filter-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
.order-filter-btn.active {
box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor !important;
}
/* Búsqueda compacta */
#inv-panel-orders .orders-search {
margin-bottom: 10px;
}
#inv-panel-orders .orders-search input {
width: 100%;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
}
#inv-panel-orders .orders-search input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102,126,234,0.15);
}
/* Tabla de órdenes compacta */
#inv-panel-orders .tbl {
font-size: 12px;
}
#inv-panel-orders .tbl thead th {
padding: 8px 6px !important;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
background: #f1f5f9 !important;
white-space: nowrap;
}
#inv-panel-orders .tbl tbody td {
padding: 6px !important;
vertical-align: middle;
}
#inv-panel-orders .order-row:hover {
background: #f8fafc;
}
/* Badges de estado y prioridad compactos */
.status-badge,
.priority-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
color: white;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
}
.status-badge:hover,
.priority-badge:hover {
transform: scale(1.05);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Botones de acción compactos */
.btn-icon-small {
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
background: #e5e7eb;
}
.btn-icon-small:hover {
transform: scale(1.1);
}
/* Descripción truncada */
#inv-panel-orders .td-description {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tabla de órdenes específica */
.orders-table {
font-size: 11px !important;
}
.orders-table thead {
background: #f1f5f9;
}
.orders-table thead th {
padding: 3px 4px !important;
font-size: 10px !important;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.2px;
white-space: nowrap;
text-align: left;
border-bottom: 1px solid #b0bec5;
}
.orders-table tbody td {
padding: 3px 4px !important;
vertical-align: middle;
border-bottom: 1px solid #f1f5f9;
}
.orders-table tbody tr:hover {
background: #f8fafc;
}
/* Responsive para órdenes */
@media (max-width: 1400px) {
#inv-panel-orders .tbl {
font-size: 10px;
}
#inv-panel-orders .tbl thead th {
padding: 5px 3px !important;
font-size: 9px;
}
#inv-panel-orders .tbl tbody td {
padding: 4px 3px !important;
}
.status-badge,
.priority-badge {
padding: 2px 6px;
font-size: 9px;
}
.btn-icon-small {
width: 22px;
height: 22px;
font-size: 11px;
}
}
@media (max-width: 1100px) {
.order-filter-btn {
padding: 4px 8px !important;
font-size: 10px !important;
}
.order-filter-btn .filter-count {
display: none;
}
}
/* Loading state para el panel de inventario */
#tabInv.loading #tblInvBody::after{
content: "Cargando...";
display: block;
text-align: center;
padding: 20px;
color: #6b7280;
font-size: 12px;
}
/* Empty state */
#tblInvBody:empty::after{
content: "No hay resultados para mostrar";
display: block;
text-align: center;
padding: 30px 20px;
color: #9ca3af;
font-size: 12px;
}
/* Centrar columnas numéricas en tabla de inventario */
#tblInv tbody td.qty {
text-align: right !important;
font-variant-numeric: tabular-nums;
padding-right: 10px !important;
}
/* Panel de Almacenes (Inventario) */
#locationsPanel{
align-self:start;
background:var(--panel); border:1px solid var(--line);
border-radius:12px; padding:.75rem;
}
#locationsPanel label{ display:block; margin-bottom:4px; font-weight:500; font-size:12px; color:var(--ink-2); }
#locationsPanel #invLocSearch{ width:100%; margin-bottom:6px; }
#locationsPanel select{ width:100%; max-height:8.5rem; overflow:auto; background:var(--panel); color:var(--text); border:1px solid var(--line) }
/* /* #invLocations{ display:none; } */ */ /* COMENTADO - ya no ocultamos el select */
/* /* #invLocations.show{ display:block; } */ */
.invLocAllWrap{ display:none; }
.invLocAllWrap.show{ display:flex; align-items:center; gap:.5rem; }
/* Tarjeta de filtros en “Equipos Instalados” que antes quedaba oscura */
#tabInst .hd .card{ background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:var(--shadow); }
/* Tabla con wrapper scroll */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--panel) }
.panel-body-scroll{ max-height:calc(100vh - 280px); overflow:auto; background:var(--panel); border:1px solid var(--line) }
/* Cargar/Editar – grid y controles */
#secCSV .grid-csv{ display:grid; grid-template-columns:2fr 1fr; gap:12px 16px; align-items:end; }
#secCSV .csv-left, #secCSV .csv-right{ display:flex; flex-direction:column; gap:6px; min-width:0; }
#secCSV label.ck input{ transform:translateY(1px); }
@media (max-width:900px){ #secCSV .grid-csv{ grid-template-columns:1fr; } }
#secEditWh .form-grid{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px 18px; align-items:start;
}
#secEditWh .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
#secEditWh .span-2{ grid-column:span 2; }
#secEditWh .span-3{ grid-column:span 3; }
#secEditWh .span-4{ grid-column:1 / -1; }
#secEditWh .actions{ display:flex; gap:8px; justify-content:flex-start; margin-top:12px; }
@media (max-width:1200px){ #secEditWh .form-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px) { #secEditWh .form-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px) { #secEditWh .form-grid{ grid-template-columns:1fr; } }
/* Campos dentro de Cargar/Editar (unificados en claro) */
#secCSV input, #secCSV select,
#whForm input, #whForm select, #whForm textarea,
#secEditWh #e_serial_search, #secEditWh #e_id_search{
background:var(--head) !important; color:var(--text) !important; border:1px solid var(--line) !important;
}
/* Fin — SLDS Light */
/* Títulos de sección en azul SLDS */
.section-title,
.card-title {
color: #1E2D4B !important;
}
/* Labels en azul SLDS */
label,
.label {
color: var(--ink-2) !important;
}
/* Fondo claro (Blue-100) para campos de entrada */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="search"],
input[type="file"],
input[type="password"],
select,
textarea,
.inp {
background-color: var(--field) !important;
}
/* Excluir filter-inputs de tabla instalados del fondo claro */
#tblInstalled .filter-input {
background-color: #313244 !important;
}
/* === Override fuerte: fondo de inputs con var theme-aware === */
:root { --app-input-bg: var(--field); }
/* Prioridad alta por ID/panel y !important */
#secEditWh :is(input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="password"],
input[type="file"], select, textarea, .inp),
#tabUpload :is(input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="password"],
input[type="file"], select, textarea, .inp),
.card :is(input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="password"],
input[type="file"], select, textarea, .inp) {
background-color: var(--field) !important;
background-image: none !important;
}
/* Multi-select y file también */
select[multiple],
input[type="file"] {
background-color: var(--field) !important;
}
/* Chrome autofill (amarillo) */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
-webkit-text-fill-color: inherit !important;
}
/* --- HAZ QUE EL SECTION CREZCA CON EL CONTENIDO --- */
#tabUpload.card[data-panel]{
height: auto !important; /* en vez de 100% */
min-height: 100%; /* al menos llenar el viewport */
display: flex;
flex-direction: column;
}
/* La zona de contenido (.bd) ya NO debe “llenar” con flex, ni scrollear */
#tabUpload.card[data-panel] .bd{
flex: 1 1 auto !important; /* crece para llenar espacio disponible */
min-height: 0 !important;
overflow: auto !important; /* scroll interno si es necesario */
}
/* --- HAZ QUE EL SECTION LLENE EL VIEWPORT COMPLETO --- */
#tabInst.card[data-panel]{
height: 100% !important; /* llena el viewport completo */
display: flex;
flex-direction: column;
}
/* La zona de contenido (.bd) ya NO debe “llenar” con flex, ni scrollear */
#tabInst.card[data-panel] .bd{
flex: 1 1 auto !important; /* crece para llenar espacio disponible */
min-height: 0 !important;
overflow: auto !important; /* scroll interno si es necesario */
}
/*panel-body-scroll{ max-height:calc(100vh - 280px); }*/
#tabUpload #whForm{ margin-bottom: 18px; }
#tabUpload #csvSummary{ margin-bottom: 18px; }
/* fija un ancho concreto al select */
#invPartType{
width: 100px; /* ajusta a gusto */
max-width: 100%;
}
#invView{
width: 100px; /* ajusta a gusto */
max-width: 100%;
}
/* NOTA: Estilos de #invFilters movidos a línea ~2975 (flexbox responsive) */
/*SubTabs de Cargar/Editar */
/* Subtabs (compactos, heredan tu paleta) */
.subtabs{display:flex;gap:8px;align-items:center;margin:8px 0 12px}
.subtab{
appearance:none;cursor:pointer;border-radius:999px;
padding:6px 10px;border:1px solid var(--line); background:var(--head); color:var(--text);
transition:background .15s,border-color .15s,color .15s,transform .02s;
font: inherit;
}
.subtab:hover{ filter:brightness(1.03) }
.subtab.is-active{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--shadow-soft) }
.subpanel[hidden], .subpanel.hidden{ display:none !important; }
/*fin SubTabs de Cargar/Editar */
/* Tabs de Cargar Equipos al Movimiento - Filtros/Asignado/Instalados */
.mm-load-tab.subtab{ font-size: 17px; }
/* SubTabs Movimiento de MAquinas/
/*FIN SubTabs Movimiento de MAquinas*/
/*Modal de Prudctos*/
/* ocupa toda la altura útil de la “dialog” */
#prodModal #prodGrid{ flex:1; min-height:0; }
/* cada columna se comporta como panel con cuerpo scroll */
#prodModal #prodListPanel,
#prodModal #prodFormPanel{ display:flex; flex-direction:column; min-height:0; }
#prodModal #prodListPanel .panel-body,
#prodModal #prodFormPanel .panel-body{ flex:1; min-height:0; overflow:auto; }
/* por si tu lista no usa .panel-body, damos scroll al área de la tabla */
#prodModal #prodTbl{ display:block; max-width:100%; }
#prodModal #prodTbl thead { position:sticky; top:0; background:var(--panel,#fff); z-index:1; }
#prodModal #prodTbl tbody { display:block; }
#prodTableWrap thead { position: sticky; top: 0; background: var(--panel, #fff); z-index: 1; }
#prodForm .row{
display:grid;
grid-template-columns: 140px 1fr;
gap:8px;
align-items:center;
margin-bottom:8px;
}
#prodForm label{ text-align:right; opacity:.9; }
#prodForm input, #prodForm select{
height:36px; line-height:36px;
border:1px solid var(--muted);
border-radius:8px; padding:6px 10px;
background:var(--ink); -webkit-text-fill-color:var(--text-strong,#111);
}
#prodForm input[readonly]{ background:var(--panel); opacity:.8; }
/* Botonera pegada a la derecha */
#prodForm .actions{
display:flex; gap:8px; justify-content:flex-end; margin-top:6px;
}
#prodTableWrap thead th{
position: sticky;
top: 0;
background: var(--panel, #fff);
z-index: 2; /* por encima de las filas */
box-shadow: 0 1px 0 var(--line, rgba(0,0,0,.08)); /* sutil separador */
}
/* Opcional: mejora de tabla dentro de wrapper con scroll */
#prodTableWrap table{ border-collapse: separate; border-spacing: 0; }
/* Asegura contexto para sticky horizontal */
#prodTableWrap{ position: relative; overflow:auto; }
/* Header pegajoso (ya lo tenías) */
#prodTableWrap thead th{
position: sticky;
top: 0;
background: var(--panel, #fff);
z-index: 2;
box-shadow: 0 1px 0 var(--line, rgba(0,0,0,.08));
}
/* ⬅️ Fijar PRIMERA COLUMNA (Material SAP) en scroll horizontal */
#prodTableWrap thead th:first-child,
#prodTableWrap tbody td:first-child{
position: sticky;
left: 0; /* se ancla al lado izquierdo del contenedor con scroll */
z-index: 3; /* por encima del resto de celdas */
background: var(--panel, #fff);
box-shadow: 1px 0 0 var(--line, rgba(0,0,0,.08)); /* separador vertical */
}
/* Si usas dentro de la celda, evita que estire raro */
#prodTableWrap tbody td:first-child code{
display:inline-block; white-space:nowrap;
}
/* Recomendado para que sticky funcione bien dentro del wrapper */
#prodTableWrap table{ border-collapse: separate; border-spacing: 0; }
/* 1) Wrapper de tabla con scroll: separa del buscador y define contexto */
#prodTableWrap{
position: relative;
overflow: auto;
margin-top: 6px; /* despega el header del buscador */
border: 1px solid var(--muted);
border-radius: 8px;
background: var(--panel, #fff);
}
/* 2) Tabla: forzar consistencia de anchos y paddings - COMPACTO */
#prodTableWrap table{
table-layout: fixed; /* respeta */
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
#prodTableWrap th, #prodTableWrap td{
padding: 4px 6px !important;
box-sizing: border-box;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px !important;
}
/* 3) Header sticky pulido - COMPACTO */
#prodTableWrap thead th{
position: sticky;
top: 0;
z-index: 5;
background: #f8fafc !important;
box-shadow: none;
font-size: 11px !important;
padding: 5px 6px !important;
}
/* esquinas redondeadas arriba */
#prodTableWrap thead th:first-child{
border-top-left-radius: 8px;
}
#prodTableWrap thead th:last-child{
border-top-right-radius: 8px;
}
/* 4) Primera columna fija (header + body) sin saltos */
#prodTableWrap thead th:first-child,
#prodTableWrap tbody td:first-child{
position: sticky;
left: 0;
background: var(--panel, #fff);
}
/* z-index escalonado: header > 1ª col > resto */
#prodTableWrap thead th:first-child{ z-index: 7; box-shadow: 1px 0 0 var(--line, rgba(0,0,0,.08)), 0 1px 0 var(--line, rgba(0,0,0,.08)); }
#prodTableWrap tbody td:first-child{ z-index: 6; box-shadow: 1px 0 0 var(--line, rgba(0,0,0,.08)); }
#prodTableWrap tbody td:first-child code{ display:inline-block; }
/* 5) Última columna (acciones) alineada y sin recortes */
#prodTableWrap tbody td:last-child{
text-align: right;
}
/* Consistencia general - COMPACTO */
#prodTableWrap table{
table-layout: fixed; /* respeta */
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
#prodTableWrap th, #prodTableWrap td{
padding: 4px 6px !important;
box-sizing: border-box; /* evita sumar bordes al ancho */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px !important;
line-height: 1.3 !important;
}
/* Header sticky (sin desfasar) - COMPACTO */
#prodTableWrap thead th{
position: sticky;
top: 0;
z-index: 5;
background: #f8fafc !important;
border-bottom: 1px solid #e5e7eb;
box-shadow: none; /* <- quitamos sombras */
font-size: 11px !important;
font-weight: 600;
color: #374151;
padding: 6px 6px !important;
}
/* Sin zebra, solo hover simple */
#prodTableWrap tbody tr {
background: #fff;
}
#prodTableWrap tbody tr:hover {
background: #f0f9ff !important;
}
#prodTableWrap tbody td {
border-bottom: 1px solid #f3f4f6;
}
/* Asegúrate de NO forzar tbody a block en ningún lado */
#prodTableWrap tbody{ display: table-row-group; }
/* Primera columna fija: mismo ancho y un borde, no sombra */
/* Si en dejaste 120px para la 1ª col, repetimos aquí */
#prodTableWrap thead th:first-child,
#prodTableWrap tbody td:first-child{
position: sticky;
left: 0;
z-index: 6; /* por encima del resto */
background: var(--panel, #fff);
width: 120px; /* <- igual que tu ) */
#prodTableWrap thead th:nth-child(1),
#prodTableWrap tbody td:nth-child(1){ width:120px; min-width:120px; max-width:120px; }
#prodTableWrap thead th:nth-child(2),
#prodTableWrap tbody td:nth-child(2){ width:70px; min-width:70px; max-width:70px; }
#prodTableWrap thead th:nth-child(3),
#prodTableWrap tbody td:nth-child(3){ width:120px; min-width:120px; max-width:120px; } /* Código */
/* Descripción: elástica (ocupa el resto) */
#prodTableWrap thead th:nth-child(4),
#prodTableWrap tbody td:nth-child(4){ width:120px; min-width:120px; max-width:140px; }
#prodTableWrap thead th:nth-child(5),
#prodTableWrap tbody td:nth-child(5){ width:140px; min-width:140px; max-width:140px; } /* Tipo */
#prodTableWrap thead th:nth-child(6),
#prodTableWrap tbody td:nth-child(6){ width:92px; min-width:92px; max-width:92px; text-align:right; }
/* Asegura consistencia de caja */
#prodTableWrap th, #prodTableWrap td{ box-sizing:border-box; }
/* Evita que el botón “Editar” rompa el ancho */
#prodTableWrap td:last-child .btn{ max-width:100%; }
/*Termina Modal de Productos*/
/*Rectificacion de los subtabs para Movimiento y Asignacion*/
/* ===== Subtabs: Mov. de Máquinas y Asignaciones (IDs reales) ===== */
#subtab-req-mov .subsec, #subtab-req-assign .subsec{
background: var(--panel); border:1px solid var(--line);
border-radius: 8px; padding: 10px; margin: 8px 0;
}
/* Grids de formularios (3→2→1 columnas) */
#subtab-req-mov .form-grid, #subtab-req-assign .form-grid{
display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px 12px; align-items: start;
}
#subtab-req-mov .field, #subtab-req-assign .field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
#subtab-req-mov .field :where(input,select,textarea),
#subtab-req-assign .field :where(input,select,textarea){ width:100%; }
.span-2{ grid-column: span 2; } .span-3{ grid-column: span 3; }
.form-actions{ display:flex; gap:8px; justify-content:flex-end; }
/* Tablas con wrapper + header sticky y anchos fijos por colgroup */
#subtab-req-mov .table-wrap, #subtab-req-assign .table-wrap{
overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel);
}
#subtab-req-mov table.tbl, #subtab-req-assign table.tbl{
width:100%; border-collapse:separate; border-spacing:0; table-layout: fixed;
}
#subtab-req-mov .tbl th, #subtab-req-assign .tbl th,
#subtab-req-mov .tbl td, #subtab-req-assign .tbl td{
padding:8px 10px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box;
}
#subtab-req-mov .tbl thead th, #subtab-req-assign .tbl thead th{
position:sticky; top:0; z-index:5; background:var(--head);
border-bottom:1px solid var(--line);
}
/* Anchos para cada columna (coinciden con colgroup de los parches HTML) */
#subtab-req-mov col.sel { width: 48px; }
#subtab-req-mov col.sap { width: 140px; }
#subtab-req-mov col.desc { width: auto; }
#subtab-req-mov col.ptype { width: 120px; }
#subtab-req-mov col.loc { width: 140px; }
#subtab-req-mov col.salon { width: 160px; }
#subtab-req-mov col.ns { width: 140px; }
#subtab-req-mov col.nssap { width: 140px; }
#subtab-req-mov col.conf { width: 150px; }
#subtab-req-mov col.stock { width: 70px; }
#subtab-req-mov col.status { width: 110px; }
#subtab-req-mov col.price { width: 110px; }
#subtab-req-assign col.sel { width: 48px; }
#subtab-req-assign col.eq { width: 200px; }
#subtab-req-assign col.ns { width: 140px; }
#subtab-req-assign col.nssap { width: 140px; }
#subtab-req-assign col.loc { width: 140px; }
#subtab-req-assign col.salon { width: 160px; }
#subtab-req-assign col.status{ width: 110px; }
#subtab-req-assign col.conf { width: 150px; }
#subtab-req-assign col.price { width: 110px; }
@media (max-width:1100px){
#subtab-req-mov .form-grid, #subtab-req-assign .form-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:720px){
#subtab-req-mov .form-grid, #subtab-req-assign .form-grid{ grid-template-columns: 1fr; }
.form-actions{ justify-content: stretch; }
}
#subtab-req-assign col.descsap { width: 260px; }
/* Títulos de sección coherentes */
.subsec-title{
font-weight:700;
font-size:14px;
margin: 6px 0 8px 0;
color: var(--text);
}
.subsec{ background: var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px; }
.subsec + .subsec{ margin-top:10px; }
/* Mov. de Máquinas — tabla */
#subtab-req-mov .table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
#subtab-req-mov table.tbl{ width:100%; border-collapse:separate; border-spacing:0; table-layout: fixed; }
#subtab-req-mov .tbl th, #subtab-req-mov .tbl td{
padding:8px 10px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box;
}
#subtab-req-mov .tbl thead th{ position:sticky; top:0; z-index:5; background:var(--head); border-bottom:1px solid var(--line); }
/* Anchos por columna (ajusta si lo deseas) */
#subtab-req-mov col.sel { width:48px; }
#subtab-req-mov col.sap { width:140px; }
#subtab-req-mov col.desc { width:auto; } /* crece */
#subtab-req-mov col.ptype { width:120px; }
#subtab-req-mov col.loc { width:140px; }
#subtab-req-mov col.salon { width:160px; }
#subtab-req-mov col.ns { width:140px; }
#subtab-req-mov col.stock { width:70px; }
#subtab-req-mov col.nssap { width:140px; }
#subtab-req-mov col.conf { width:150px; }
#subtab-req-mov col.status{ width:110px; }
#subtab-req-mov col.price { width:110px; text-align:right; }
/* (Opcional) fija la 1ª columna (checkbox) */
#subtab-req-mov .tbl thead th:first-child,
#subtab-req-mov .tbl tbody td:first-child{
position: sticky; left: 0; z-index: 6; background: var(--panel);
border-right: 1px solid var(--line);
}
/* Handles de resize en el header */
#subtab-req-mov thead th{ position: relative; }
#subtab-req-mov .col-resizer{
position:absolute; right:0; top:0; width:6px; height:100%;
cursor: col-resize; user-select: none;
}
#subtab-req-mov .col-resizer:hover{ background: rgba(0,0,0,.06); }
/* Asignaciones: handles para redimensionar columnas */
#subtab-req-assign thead th{ position: relative; }
#subtab-req-assign .col-resizer{
position:absolute; right:0; top:0; width:6px; height:100%;
cursor: col-resize; user-select: none;
}
#subtab-req-assign .col-resizer:hover{ background: rgba(0,0,0,.06); }
/* === Líneas verticales en tablas de Movimiento y Asignaciones === */
:root{
--gridline: var(--line, rgba(0,0,0,.12)); /* color de línea suave */
}
/* 1) Asegura modo de tabla coherente */
#subtab-req-mov .tbl,
#subtab-req-assign .tbl{
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
/* 2) Bordes verticales entre columnas (header + body) */
#subtab-req-mov .tbl th, #subtab-req-mov .tbl td,
#subtab-req-assign .tbl th,#subtab-req-assign .tbl td{
border-right: 1px solid var(--gridline);
}
/* 3) Evita “doble borde” en el extremo derecho (el wrapper ya tiene borde) */
#subtab-req-mov .tbl th:last-child, #subtab-req-mov .tbl td:last-child,
#subtab-req-assign .tbl th:last-child,#subtab-req-assign .tbl td:last-child{
border-right: 0;
}
/* 4) Línea vertical del primer col (checkbox) alineada con el contorno */
#subtab-req-mov .tbl thead th:first-child,
#subtab-req-mov .tbl tbody td:first-child,
#subtab-req-assign .tbl thead th:first-child,
#subtab-req-assign .tbl tbody td:first-child{
border-left: 1px solid var(--gridline);
}
/* 5) Si tienes la 1ª columna sticky, mantiene su separador visible */
#subtab-req-mov .tbl thead th:first-child,
#subtab-req-mov .tbl tbody td:first-child{
position: sticky; left: 0; z-index: 6; background: var(--panel);
}
/* 6) Header sticky con borde inferior (por si no estaba) */
#subtab-req-mov .tbl thead th,
#subtab-req-assign .tbl thead th{
border-bottom: 1px solid var(--gridline);
}
/* === Zebra vertical (column striping) para tablas de Mov. y Asignaciones === */
/* DESACTIVADO - zebra vertical eliminado
:root{
--col-zebra: color-mix(in oklab, var(--panel) 90%, #000 10%);
}
*/
/* Alterna columnas pares (2,4,6,…) - DESACTIVADO */
/*
#subtab-req-mov .tbl tbody td:nth-child(even),
#subtab-req-assign .tbl tbody td:nth-child(even){
background: var(--col-zebra);
}
*/
/* Mantén coherencia en el header (muy sutil) - DESACTIVADO */
/*
#subtab-req-mov .tbl thead th:nth-child(even),
#subtab-req-assign .tbl thead th:nth-child(even){
background: color-mix(in oklab, var(--head) 90%, #000 10%);
}
*/
/* Si la 1ª columna es sticky, asegúrate de que NO herede rayado raro - DESACTIVADO */
/*
#subtab-req-mov .tbl thead th:first-child,
#subtab-req-mov .tbl tbody td:first-child,
#subtab-req-assign .tbl thead th:first-child,
#subtab-req-assign .tbl tbody td:first-child{
background: var(--panel);
}
*/
/* Rayado respetando selección/hover (si tienes estilos de hover/selected, ponlos después) - DESACTIVADO */
/*
#subtab-req-mov .tbl tbody tr:hover td,
#subtab-req-assign .tbl tbody tr:hover td{
filter: brightness(.98);
}
*/
/* Opcional: desactiva zebra vertical en pantallas angostas (para no recargar) - YA NO APLICA */
/*
@media (max-width: 860px){
#subtab-req-mov .tbl tbody td:nth-child(even),
#subtab-req-assign .tbl tbody td:nth-child(even){
background: transparent;
}
}
*/
/*Termina Rectificacion de los subtabs para Movimiento y Asignacion*/
/* ===== Hover por columna (reutilizable) ===== */
:root{
--col-hover-bg: color-mix(in oklab, var(--panel) 70%, #000 30%); /* sutil, ajusta el % */
--col-hover-border: var(--line, rgba(0,0,0,.18));
}
/* Actívalo añadiendo la clase .col-hover a la tabla */
.col-hover th, .col-hover td{ position: relative; }
/* Pintado de columna bajo el cursor */
.col-hover th.is-col, .col-hover td.is-col{
background: var(--col-hover-bg);
}
/* Mantén líneas verticales visibles por encima del hover */
.col-hover th.is-col, .col-hover td.is-col{
box-shadow:
inset -1px 0 0 var(--col-hover-border), /* borde derecho */
inset 1px 0 0 var(--col-hover-border); /* borde izquierdo */
}
/* Si el header es sticky o la 1ª columna es sticky, no se pierde el efecto */
.col-hover thead th{ z-index: 5; }
.col-hover thead th.is-col{ z-index: 7; }
.col-hover tbody td:first-child.is-col,
.col-hover thead th:first-child.is-col{
z-index: 6;
}
/* Zebra vertical y hover: prioridad al hover - DESACTIVADO */
/* .col-hover tbody td:nth-child(even){ background: var(--col-zebra, transparent); } */
.col-hover tbody td.is-col{ filter: brightness(1); } /* cancela el oscurecido del zebra */
/* Botón principal "ok" ya lo usas, aquí un _hover_ suave */
.btn.ok:hover { filter: brightness(1.03); }
.badge {
display:inline-flex; align-items:center; justify-content:center;
min-width: 18px; height: 18px; padding: 0 6px;
font-size: 12px; line-height: 1; font-weight: 600;
background: #2563eb; color: #fff; border-radius: 999px;
}
/* ========== CSV HELP MODAL (no mueve el layout) ========== */
.csvhelp-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.csvhelp-modal.show{display:flex}
.csvhelp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.csvhelp-card{position:relative;width:min(920px,92vw);max-height:86vh;overflow:auto;background:#fff;color:#111827;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:18px}
.csvhelp-close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:20px;cursor:pointer}
.csvhelp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.csvhelp-tile{padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.csvhelp-pre{white-space:pre-wrap;margin:0 0 6px;color:#111827}
/**/
.subtabs-req{display:flex;gap:.5rem;align-items:center;margin:10px 0 12px}
.subtabs-req-btn{padding:6px 12px;border:1px solid #d1d5db;border-radius:999px;background:#fff;cursor:pointer;font-size:.95rem}
.subtabs-req-btn.active{background:#10b981;color:#fff;border-color:#10b981}
.subtabs-req-panel[hidden]{display:none !important;}
/**/
.bulk-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1100}
.bulk-modal.show{display:flex}
.bulk-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.bulk-card{position:relative;width:min(900px,92vw);max-height:86vh;overflow:auto;background:#fff;color:#111827;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:18px}
.bulk-close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:20px;cursor:pointer}
.bulk-tbl{width:100%;border-collapse:collapse}
.bulk-tbl th,.bulk-tbl td{border-bottom:1px solid #e5e7eb;padding:6px;vertical-align:top}
/* ========== FIN CSV HELP MODAL (no mueve el layout) ========== */
/*=================Toast/Notifications=================*/
/* ===== Toasts contrast fix ===== */
.toast-host { pointer-events: none; }
.toast {
background: #0f172a; /* panel oscuro */
color: #b0bec5; /* texto claro */
border: 1px solid rgba(148,163,184,.25);
box-shadow: 0 10px 32px rgba(0,0,0,.5);
}
.toast.success { background: #14532d; } /* verde oscuro */
.toast.error { background: #7f1d1d; } /* rojo oscuro */
.toast.warn { background: #78350f; } /* ámbar oscuro */
.toast.info { background: #4d77e9; } /* azul oscuro */
.toast .title { font-weight: 600; }
/* ===== Toasts con colores por tipo (tema oscuro) ===== */
:root{
--toast-fg: #e5e7eb; /* texto */
--toast-bg: #0b1220; /* base */
--toast-border: #1f2a44;
--toast-success: #14532d;
--toast-error: #7f1d1d;
--toast-warn: #78350f;
--toast-info: #3a58aa;
}
.toast-host{
position: fixed;
z-index: 9999;
inset: 12px 12px auto auto; /* top-right */
display: grid;
gap: 8px;
}
/* base */
.toast{
position: relative;
background: var(--toast-bg);
color: var(--toast-fg);
border: 1px solid var(--toast-border);
border-radius: 10px;
padding: 10px 14px 10px 14px;
box-shadow: 0 10px 32px rgba(0,0,0,.5);
font-size: 14px;
line-height: 1.25rem;
max-width: 420px;
backdrop-filter: saturate(1.2);
animation: toast-in .18s ease-out;
}
/* barra de acento a la izquierda */
.toast::before{
content:"";
position:absolute; left:0; top:0; bottom:0;
width:4px; border-radius:10px 0 0 10px;
background: var(--toast-border);
}
/* variantes */
.toast.success { background: color-mix(in srgb, var(--toast-success) 85%, #000 15%); border-color: color-mix(in srgb, var(--toast-success) 60%, #000 40%); }
.toast.error { background: color-mix(in srgb, var(--toast-error) 85%, #000 15%); border-color: color-mix(in srgb, var(--toast-error) 60%, #000 40%); }
.toast.warn { background: color-mix(in srgb, var(--toast-warn) 85%, #000 15%); border-color: color-mix(in srgb, var(--toast-warn) 60%, #000 40%); }
.toast.info { background: color-mix(in srgb, var(--toast-info) 85%, #000 15%); border-color: color-mix(in srgb, var(--toast-info) 60%, #000 40%); }
.toast.success::before { background: var(--toast-success); }
.toast.error::before { background: var(--toast-error); }
.toast.warn::before { background: var(--toast-warn); }
.toast.info::before { background: var(--toast-info); }
.toast .title{ font-weight:600; margin-bottom:2px; }
/* entrada suave */
@keyframes toast-in{
from{ transform: translateY(-6px); opacity:0; }
to { transform: translateY(0); opacity:1; }
}
/* ===== Fin Toasts ===== */
/*=================Fin Toast/Notifications=================*/
/*ocultar campos Tipo y Estado delRequest*/
#f_parttype, label[for="f_parttype"],
#f_status, label[for="f_status"] { display: none !important; }
/*-----------------------------------------------------------*/
/* solo el select #f_origin */
/*#requestForm select#f_origin {
width: 200px; /* ajusta a gusto */
/* box-sizing: border-box;
/* si el padre es flex y lo estira, fija el tamaño: */
/* flex: 0 0 auto;
}*/
.qi-alb-cell { color:#0b70ff; text-decoration:underline; cursor:pointer; }
/*=========================================
Estilos para la tabla de Albaranes
=========================================*/
/* ===== Modal de programación CRON ===== */
#sageCronModal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
#titleCron {
color: #e63946; /* rojo suave */
font-weight: bold;
}
#sageCronModal.hidden {
display: none;
}
/* Backdrop (fondo oscuro) */
#sageCronModal .modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
/* Contenido del modal */
#sageCronModal .modal-content {
position: relative;
z-index: 1001;
background: white;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
#sageCronModal .modal-header {
padding: 1rem;
border-bottom: 1px solid #e5e7eb;
}
#sageCronModal .modal-body {
padding: 1rem;
}
#sageCronModal .modal-actions {
padding: 1rem;
border-top: 1px solid #e5e7eb;
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
/* Campos del formulario */
#sageCronModal label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
#sageCronModal input,
#sageCronModal select {
width: 100%;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 6px;
margin-bottom: 1rem;
}
/* Chips de días de la semana */
#cronWeekset {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
#cronWeekset .chip {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 2px solid #d1d5db;
background: white;
cursor: pointer;
transition: all 0.2s;
}
#cronWeekset .chip:hover {
border-color: #10b981;
}
#cronWeekset .chip.on {
background: #10b981;
color: white;
border-color: #10b981;
}
/* Badge de validación */
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.875rem;
font-weight: 500;
background: #e5e7eb;
color: #6b7280;
}
.badge.success {
background: #d1fae5;
color: #065f46;
}
.badge.error {
background: #fee2e2;
color: #991b1b;
}
/* Historico de Maquinas*/
.chip{ display:inline-block; padding:2px 6px; margin:2px 4px 2px 0; border-radius:10px; border:1px solid #b0bec5; }
.chip .before{ opacity:.7 }
.chip .after{ font-weight:600 }
/* ===== Historial de Eventos (tabla compacta) ===== */
/* enlaces "+N más" */
#e_hist_events_body a[data-toggle]{
color:#2563eb; /* azul sutil */
text-decoration:none;
font-weight:500;
cursor:pointer;
}
#e_hist_events_body a[data-toggle]:hover{
text-decoration:underline;
}
/* texto atenuado reutilizable */
#e_hist_events_body .muted{ color:#6b7280; }
/* densidad y alineación */
#e_hist_events_body td{ vertical-align:top; }
#e_hist_events_body td div{ margin:2px 0; line-height:1.2; }
#e_hist_events_body b{ font-weight:600; }
/* ===== Equipos Instalados: Panel de controles reorganizado ===== */
.inst-controls-panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.inst-filters-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: start;
}
.inst-search {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--app-input-bg, #E6F1FD);
font-size: 14px;
}
.inst-mode {
min-width: 180px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--app-input-bg, #E6F1FD);
font-size: 14px;
}
.inst-locations-box {
min-width: 200px;
background: var(--panel);
padding: 10px;
border: 1px solid var(--line);
border-radius: 8px;
}
.inst-locations-box .label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: var(--muted);
font-size: 12px;
}
.inst-locations-box .input {
width: 100%;
margin-bottom: 6px;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--app-input-bg, #E6F1FD);
font-size: 13px;
}
.inst-actions-row {
display: flex;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--line);
justify-content: center;
}
.inst-actions-row .btn {
padding: 8px 16px;
font-size: 14px;
}
/* Responsive: colapsar filtros en pantallas pequeñas */
@media (max-width: 1024px) {
.inst-filters-row {
grid-template-columns: 1fr;
}
.inst-mode,
.inst-locations-box {
width: 100%;
}
}
/* =========================================================
THEME SYSTEM — Manual Dark / Light Toggle
Attribute: data-theme="light" | "dark" on
Persisted: localStorage('sisam-theme')
Default: light
========================================================= */
/* Shared font & sizing tokens */
html[data-theme] {
--font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 13px;
--fs-md: 14px;
--fs-lg: 15px;
--fs-xl: 18px;
--fs-2xl: 24px;
--fs-3xl: 28px;
}
/* ───────────── LIGHT THEME ───────────── */
html[data-theme="light"] {
--bg:#f1f5f9; --panel:#ffffff; --head:#f8fafc; --line:#b0bec5; --line-strong:#90a4ae;
--text:#1e293b; --muted:#64748b; --ink:#1e293b; --ink-2:#475569;
--brand:#2563eb; --brand-dark:#1d4ed8; --brand-2:#60a5fa;
--success:#16a34a; --danger:#dc2626; --warn:#d97706; --ok:#16a34a; --err:#dc2626;
--row-alt:#f8fafc; --row-hover:rgba(59,130,246,.04);
--shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08);
--shadow-soft:0 1px 2px rgba(0,0,0,.04);
--field:#ffffff; --field-border:#b0bec5; --field-focus:#2563eb;
--bg-0:#f1f5f9; --bg-1:#ffffff; --bg-2:#f8fafc;
--surface:#ffffff; --surface-2:#f1f5f9; --border:#b0bec5;
--c-brand:#2563eb; --c-brand-dark:#1d4ed8; --c-brand-light:#60a5fa;
--c-success:#16a34a; --c-danger:#dc2626; --c-warning:#d97706;
--pill-bg:#f1f5f9; --pill-fg:#475569; --placeholder:#94a3b8;
--app-input-bg:#f1f5f9; --gridline:#b0bec5;
--n-100:#ffffff; --n-90:#f1f5f9; --n-80:#b0bec5; --n-70:#90a4ae;
--n-50:#64748b; --n-40:#475569; --n-30:#334155; --n-20:#1e293b;
--blue-100:#eff6ff; --cloud-100:#f0f9ff;
--toast-bg:#ffffff; --toast-fg:#1e293b; --toast-border:#b0bec5;
--toast-success:#dcfce7; --toast-error:#fee2e2; --toast-warn:#fef3c7; --toast-info:#dbeafe;
--col-hover-bg:rgba(59,130,246,.04);
}
/* Light — body */
html[data-theme="light"],
html[data-theme="light"] body {
background: var(--bg) !important;
color: var(--text) !important;
font-family: var(--font-ui) !important;
}
/* Light — topbar + tabs */
html[data-theme="light"] .topbar { background:var(--panel) !important; box-shadow:0 1px 0 var(--line) !important; border-bottom:none !important; backdrop-filter:none !important; }
html[data-theme] .ltab { border-radius: 4px !important; }
html[data-theme="light"] .ltabs { background:var(--panel) !important; box-shadow:0 1px 0 var(--line) !important; border-top:none !important; }
html[data-theme="light"] .ltab { background:#fff !important; color:#64748b !important; border-color:#b0bec5 !important; }
html[data-theme="light"] .ltab:hover { background:#f1f5f9 !important; border-color:#90a4ae !important; color:#475569 !important; }
html[data-theme="light"] .ltab.is-active { background:#2563eb !important; color:#fff !important; border-color:#2563eb !important; }
/* Light — cards */
html[data-theme="light"] .card { background:var(--panel) !important; border-color:var(--line) !important; box-shadow:var(--shadow-soft) !important; }
/* Light — buttons */
html[data-theme="light"] .btn { background:var(--panel) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="light"] .btn:hover { filter:brightness(1.03); }
html[data-theme="light"] .btn.ok,
html[data-theme="light"] .btn.brand,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.btn--neutral { background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
html[data-theme="light"] .btn.success { background:var(--success) !important; color:#fff !important; border-color:var(--success) !important; }
html[data-theme="light"] .btn.danger { background:var(--danger) !important; color:#fff !important; border-color:var(--danger) !important; }
html[data-theme="light"] .btn.ghost { background:transparent !important; border-color:transparent !important; color:var(--text) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20) !important; }
html[data-theme="light"] .btn.ghost:hover { background:#f1f5f9 !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25) !important; }
/* Light — inputs */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .inp,
html[data-theme="light"] .host { background:var(--panel) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus { border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(37,99,235,.12) !important; }
/* Light — tables */
html[data-theme="light"] .table, html[data-theme="light"] .tbl { background:var(--panel) !important; }
html[data-theme="light"] .table thead th, html[data-theme="light"] .tbl thead th { background:var(--head) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="light"] .table tbody tr:nth-child(odd) td { background:var(--row-alt) !important; }
html[data-theme="light"] .table tbody tr:hover td, html[data-theme="light"] .tbl tbody tr:hover td { background:var(--row-hover) !important; }
html[data-theme="light"] .table-wrap { background:var(--panel) !important; border-color:var(--line) !important; }
/* Light — inventory table */
html[data-theme="light"] #tblInvWrapper { background:#fff !important; border-color:#b0bec5 !important; }
html[data-theme="light"] #tblInv thead tr.inv-header th { background:#f8fafc !important; color:#374151 !important; }
html[data-theme="light"] #tblInv thead tr.inv-filters th { background:#f1f5f9 !important; }
html[data-theme="light"] #tblInv .inv-header th:hover { background:#e5e7eb !important; }
/* Light — filter bar */
html[data-theme="light"] #invFilters { background:linear-gradient(135deg,#f8f9fa,#fff) !important; border-color:#e5e7eb !important; }
html[data-theme="light"] #invFilters .inv-field label { color:var(--ink-2) !important; }
/* Light — modals */
html[data-theme="light"] .modal .dialog { background:var(--panel) !important; border-color:var(--line) !important; }
/* Light — user dropdown */
html[data-theme="light"] #user-dropdown { background:var(--panel) !important; border-color:var(--line) !important; }
html[data-theme="light"] .dropdown-item { color:var(--text) !important; }
html[data-theme="light"] .dropdown-item:hover { background:#f1f5f9 !important; }
html[data-theme="light"] #btn-logout { color:#dc2626 !important; }
/* Light — KPI, pills, badges */
html[data-theme="light"] .kpi, html[data-theme="light"] .pill { background:var(--head) !important; border-color:var(--line) !important; color:var(--text) !important; }
html[data-theme="light"] .badge { background:#eff6ff !important; color:#1e40af !important; }
/* Light — subtabs */
html[data-theme="light"] .subtab { background:var(--head) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="light"] .subtab.is-active { background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
html[data-theme="light"] .subtabs-req-btn { background:#fff !important; color:var(--text) !important; border-color:#d1d5db !important; }
html[data-theme="light"] .subtabs-req-btn.active { background:#10b981 !important; color:#fff !important; border-color:#10b981 !important; }
/* Light — labels and titles */
html[data-theme="light"] label, html[data-theme="light"] .label { color:var(--ink-2) !important; }
html[data-theme="light"] label.io-sidebar-checkbox { color:#fff !important; }
html[data-theme="light"] .section-title, html[data-theme="light"] .card-title { color:var(--text) !important; }
/* Light — toasts */
html[data-theme="light"] .toast { background:var(--panel) !important; color:var(--text) !important; border-color:var(--line) !important; box-shadow:0 10px 32px rgba(0,0,0,.12) !important; }
html[data-theme="light"] .toast::before { background:var(--brand) !important; }
html[data-theme="light"] .toast.success { background:#dcfce7 !important; color:#166534 !important; border-color:#bbf7d0 !important; }
html[data-theme="light"] .toast.success::before { background:var(--success) !important; }
html[data-theme="light"] .toast.error { background:#fee2e2 !important; color:#991b1b !important; border-color:#fecaca !important; }
html[data-theme="light"] .toast.error::before { background:var(--danger) !important; }
html[data-theme="light"] .toast.warn { background:#fef3c7 !important; color:#92400e !important; border-color:#fde68a !important; }
html[data-theme="light"] .toast.warn::before { background:var(--warn) !important; }
html[data-theme="light"] .toast.info { background:#dbeafe !important; color:#1e40af !important; }
html[data-theme="light"] .toast.info::before { background:var(--brand) !important; }
/* Light — orders panel */
html[data-theme="light"] .orders-filters { background:#f8fafc !important; border-color:#e5e7eb !important; }
html[data-theme="light"] .orders-stats .stat-card { background:rgba(255,255,255,.95) !important; }
/* Light — prodTableWrap */
html[data-theme="light"] #prodTableWrap { background:#fff !important; border-color:var(--line) !important; }
html[data-theme="light"] #prodTableWrap thead th { background:#f8fafc !important; color:#374151 !important; }
html[data-theme="light"] #prodTableWrap tbody tr { background:#fff !important; }
html[data-theme="light"] #prodTableWrap tbody tr:hover { background:#f0f9ff !important; }
/* Light — CSV help, bulk modals */
html[data-theme="light"] .csvhelp-card, html[data-theme="light"] .bulk-card { background:#fff !important; color:#111827 !important; }
/* ───────────── DARK THEME ───────────── */
html[data-theme="dark"] {
--bg:#1d2635; --panel:#1f2a3d; --head:#232f47; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
--text:#e6edf5; --muted:#94a3b8; --ink:#e6edf5; --ink-2:#94a3b8;
--brand:#3b82f6; --brand-dark:#2563eb; --brand-2:#74c0ff;
--success:#22c55e; --danger:#ef4444; --warn:#f59e0b; --ok:#22c55e; --err:#ef4444;
--row-alt:rgba(148,163,184,.04); --row-hover:rgba(59,130,246,.06);
--shadow:0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
--shadow-soft:0 1px 2px rgba(0,0,0,.2);
--field:#1a2233; --field-border:#324261; --field-focus:#3b82f6;
--bg-0:#1d2635; --bg-1:#1f2a3d; --bg-2:#1a2233;
--surface:#1f2a3d; --surface-2:#232f47; --border:rgba(255,255,255,.10);
--c-brand:#3b82f6; --c-brand-dark:#2563eb; --c-brand-light:#74c0ff;
--c-success:#22c55e; --c-danger:#ef4444; --c-warning:#f59e0b;
--pill-bg:#232f47; --pill-fg:#94a3b8; --placeholder:#64748b;
--app-input-bg:#1a2233; --gridline:rgba(255,255,255,.10);
--n-100:#1f2a3d; --n-90:#1d2635; --n-80:rgba(255,255,255,.10); --n-70:rgba(255,255,255,.15);
--n-50:#64748b; --n-40:#94a3b8; --n-30:#90a4ae; --n-20:#e6edf5;
--blue-100:#2d496e; --cloud-100:#1a2233;
--toast-bg:#1a2233; --toast-fg:#e6edf5; --toast-border:rgba(255,255,255,.10);
--toast-success:#23623c; --toast-error:#8e2c2c; --toast-warn:#87441e; --toast-info:#2d496e;
--col-hover-bg:rgba(59,130,246,.08);
}
/* Dark — body */
html[data-theme="dark"],
html[data-theme="dark"] body {
background: var(--bg) !important;
color: var(--text) !important;
font-family: var(--font-ui) !important;
}
/* Dark — topbar + tabs */
html[data-theme="dark"] .topbar { background:var(--bg-2) !important; box-shadow:none !important; border-bottom:1px solid var(--line) !important; backdrop-filter:saturate(110%) blur(4px) !important; }
/* Dark mode: sombras más sutiles para botones de filtro */
html[data-theme="dark"] .order-filter-btn {
box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2) !important;
}
html[data-theme="dark"] .orders-filters button[onclick*="clearOrdersFilters"] {
background: #374151 !important;
color: #e5e7eb !important;
border-color: #4b5563 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}
/* Dark mode: hover con sombra más intensa */
html[data-theme="dark"] .order-filter-btn:hover {
box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .ltabs { background:var(--bg-2) !important; box-shadow:none !important; border-bottom:1px solid var(--line) !important; }
html[data-theme="dark"] .ltab { background:#1d2f48 !important; color:#94a3b8 !important; border-color:var(--line) !important; }
html[data-theme="dark"] .ltab:hover { background:#233c61 !important; border-color:rgba(59,130,246,.3) !important; color:#e6edf5 !important; }
html[data-theme="dark"] .ltab.is-active { background:#2563eb !important; color:#fff !important; border-color:#2563eb !important; }
/* Dark — cards */
html[data-theme="dark"] .card { background:var(--panel) !important; border-color:var(--line) !important; box-shadow:var(--shadow-soft) !important; }
/* Dark — buttons */
html[data-theme="dark"] .btn { background:#1d2f48 !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .btn:hover { filter:brightness(1.07); }
html[data-theme="dark"] .btn.ok,
html[data-theme="dark"] .btn.brand,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn.btn--neutral { background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
html[data-theme="dark"] .btn.success { background:#1e3c2e !important; color:#b8ffd7 !important; border-color:#2c6c51 !important; }
html[data-theme="dark"] .btn.danger { background:#391d21 !important; color:#ffb4b8 !important; border-color:#6e2c34 !important; }
html[data-theme="dark"] .btn.ghost { background:transparent !important; border-color:transparent !important; color:var(--text) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
html[data-theme="dark"] .btn.ghost:hover { background:rgba(255,255,255,.06) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4) !important; }
/* Dark — inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .inp,
html[data-theme="dark"] .host { background:var(--field) !important; color:var(--text) !important; border-color:var(--field-border) !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(59,130,246,.15) !important; }
/* Dark — tables */
html[data-theme="dark"] .table, html[data-theme="dark"] .tbl { background:var(--panel) !important; }
html[data-theme="dark"] .table thead th, html[data-theme="dark"] .tbl thead th { background:var(--head) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .table tbody tr:nth-child(odd) td { background:#203951 !important; }
html[data-theme="dark"] .table tbody tr:hover td, html[data-theme="dark"] .tbl tbody tr:hover td { background:#24415e !important; }
html[data-theme="dark"] .table-wrap { background:var(--bg-2) !important; border-color:var(--line) !important; }
/* Dark — inventory table */
html[data-theme="dark"] #tblInvWrapper { background:var(--bg-2) !important; border-color:var(--line) !important; }
html[data-theme="dark"] #tblInv thead tr.inv-header th { background:var(--head) !important; color:var(--text) !important; }
html[data-theme="dark"] #tblInv thead tr.inv-filters th { background:var(--bg-2) !important; }
html[data-theme="dark"] #tblInv .inv-header th:hover { background:#2b3f5f !important; }
html[data-theme="dark"] #tblInv .inv-filters input { background:var(--field) !important; color:var(--text) !important; border-color:var(--field-border) !important; }
/* Dark — filter bar */
html[data-theme="dark"] #invFilters { background:var(--panel) !important; border-color:var(--line) !important; background-image:none !important; }
html[data-theme="dark"] #invFilters .inv-field label { color:var(--ink-2) !important; }
html[data-theme="dark"] #invFilters .inv-field input,
html[data-theme="dark"] #invFilters .inv-field select { background:var(--field) !important; color:var(--text) !important; border-color:var(--field-border) !important; }
html[data-theme="dark"] #invFilters .inv-btn-ghost { background:var(--panel) !important; color:var(--text) !important; border-color:var(--line) !important; }
/* Dark — modals */
html[data-theme="dark"] .modal .dialog { background:var(--panel) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .modal { background:rgba(0,0,0,.5) !important; }
/* Dark — user dropdown */
html[data-theme="dark"] #user-dropdown { background:var(--panel) !important; border-color:var(--line) !important; box-shadow:0 4px 12px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] #user-dropdown > div:first-child { border-color:var(--line) !important; }
html[data-theme="dark"] .dropdown-item { color:var(--text) !important; }
html[data-theme="dark"] .dropdown-item:hover { background:rgba(255,255,255,.06) !important; }
html[data-theme="dark"] #btn-logout { color:#ef4444 !important; }
html[data-theme="dark"] #user-full-name { color:var(--text) !important; }
html[data-theme="dark"] #user-role { color:var(--muted) !important; }
/* Dark — KPI, pills, badges */
html[data-theme="dark"] .kpi, html[data-theme="dark"] .pill { background:var(--head) !important; border-color:var(--line) !important; color:var(--text) !important; }
html[data-theme="dark"] .badge { background:#2d496e !important; color:#93c5fd !important; }
/* Dark — subtabs */
html[data-theme="dark"] .subtab { background:var(--head) !important; color:var(--muted) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .subtab.is-active { background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
html[data-theme="dark"] .subtabs-req-btn { background:var(--panel) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .subtabs-req-btn.active { background:#059669 !important; color:#fff !important; border-color:#059669 !important; }
/* Dark — labels and titles */
html[data-theme="dark"] label, html[data-theme="dark"] .label { color:var(--ink-2) !important; }
html[data-theme="dark"] label.io-sidebar-checkbox { color:#fff !important; }
html[data-theme="dark"] .section-title, html[data-theme="dark"] .card-title { color:var(--text) !important; }
/* Dark — toasts */
html[data-theme="dark"] .toast { background:var(--toast-bg) !important; color:var(--toast-fg) !important; border-color:var(--toast-border) !important; box-shadow:0 10px 32px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .toast::before { background:var(--brand) !important; }
html[data-theme="dark"] .toast.success { background:#23623c !important; border-color:#2c6c51 !important; }
html[data-theme="dark"] .toast.success::before { background:var(--success) !important; }
html[data-theme="dark"] .toast.error { background:#8e2c2c !important; border-color:#6e2c34 !important; }
html[data-theme="dark"] .toast.error::before { background:var(--danger) !important; }
html[data-theme="dark"] .toast.warn { background:#87441e !important; border-color:#a14f1d !important; }
html[data-theme="dark"] .toast.warn::before { background:var(--warn) !important; }
html[data-theme="dark"] .toast.info { background:#2d496e !important; color:#93c5fd !important; }
html[data-theme="dark"] .toast.info::before { background:var(--brand) !important; }
/* Dark — orders panel */
html[data-theme="dark"] .orders-filters { background:var(--panel) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .orders-stats .stat-card { background:rgba(255,255,255,.08) !important; }
/* Dark — prodTableWrap */
html[data-theme="dark"] #prodTableWrap { background:var(--panel) !important; border-color:var(--line) !important; }
html[data-theme="dark"] #prodTableWrap thead th { background:var(--head) !important; color:var(--text) !important; }
html[data-theme="dark"] #prodTableWrap tbody tr { background:var(--panel) !important; }
html[data-theme="dark"] #prodTableWrap tbody tr:hover { background:#24415e !important; }
html[data-theme="dark"] #prodTableWrap thead th:first-child,
html[data-theme="dark"] #prodTableWrap tbody td:first-child { background:var(--panel) !important; }
/* Dark — CSV help, bulk modals */
html[data-theme="dark"] .csvhelp-card, html[data-theme="dark"] .bulk-card { background:var(--panel) !important; color:var(--text) !important; }
/* Dark — SAGE CRON modal */
html[data-theme="dark"] #sageCronModal .modal-content { background:var(--panel) !important; color:var(--text) !important; }
html[data-theme="dark"] #sageCronModal .modal-header { border-color:var(--line) !important; }
html[data-theme="dark"] #sageCronModal .modal-actions { border-color:var(--line) !important; }
/* Dark — subsec panels */
html[data-theme="dark"] .subsec { background:var(--panel) !important; border-color:var(--line) !important; }
/* Dark — inst-controls */
html[data-theme="dark"] .inst-controls-panel { background:var(--panel) !important; border-color:var(--line) !important; }
/* Dark — Crear Box (Solicitudes) */
html[data-theme="dark"] #boxForm {
background: var(--panel) !important;
}
/* Section blocks: Ubicaciones (green), Transporte (blue), Productos (yellow) */
html[data-theme="dark"] #secCreateBox .multi-box-section {
background: var(--surface-2) !important;
border-color: var(--line) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] #secCreateBox .multi-box-section h4 {
color: var(--text) !important;
}
html[data-theme="dark"] #secCreateBox .multi-box-section h4 span[style*="background:#fef3c7"],
html[data-theme="dark"] #secCreateBox .multi-box-section h4 span[id="box_product_count"] {
background: rgba(245,158,11,0.2) !important;
color: #fbbf24 !important;
}
/* Collapsible header (transporte) */
html[data-theme="dark"] #secCreateBox .collapsible-header {
background: var(--head) !important;
}
html[data-theme="dark"] #secCreateBox .collapsible-header h4,
html[data-theme="dark"] #secCreateBox .collapsible-header .collapse-icon {
color: var(--text) !important;
}
/* Inner white containers */
html[data-theme="dark"] #secCreateBox div[style*="background:#fff"],
html[data-theme="dark"] #secCreateBox div[style*="background: #fff"] {
background: var(--field) !important;
border-color: var(--field-border) !important;
}
/* Search mode toggle bar */
html[data-theme="dark"] #secCreateBox div[style*="background:linear-gradient(135deg, #f0fdf4"] {
background: var(--head) !important;
border-bottom-color: var(--line) !important;
}
html[data-theme="dark"] #secCreateBox #box_search_mode_sap_label,
html[data-theme="dark"] #secCreateBox #box_search_mode_serial_label,
html[data-theme="dark"] #secCreateBox #box_search_mode_catalog_label {
background: var(--surface) !important;
border-color: var(--field-border) !important;
}
html[data-theme="dark"] #secCreateBox #box_search_mode_sap_label span,
html[data-theme="dark"] #secCreateBox #box_search_mode_serial_label span,
html[data-theme="dark"] #secCreateBox #box_search_mode_catalog_label span,
html[data-theme="dark"] #secCreateBox #box_search_mode_hint {
color: var(--ink-2) !important;
}
/* Readonly description/stock fields */
html[data-theme="dark"] #secCreateBox input[readonly],
html[data-theme="dark"] #secCreateBox input[disabled] {
background: var(--head) !important;
color: var(--ink-2) !important;
border-color: var(--field-border) !important;
}
/* Select backgrounds */
html[data-theme="dark"] #secCreateBox select {
background: var(--field) !important;
color: var(--text) !important;
border-color: var(--field-border) !important;
}
/* Dropdowns (location, SAP, machine) */
html[data-theme="dark"] #secCreateBox .location-dropdown,
html[data-theme="dark"] #secCreateBox div[id$="_dropdown"] {
background: var(--panel) !important;
border-color: var(--field-border) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
/* Checkbox labels */
html[data-theme="dark"] #secCreateBox label[for*="warranty"],
html[data-theme="dark"] #secCreateBox label[for*="returned"] {
color: var(--ink-2) !important;
}
/* Helper text */
html[data-theme="dark"] #secCreateBox div[style*="color:#6b7280"],
html[data-theme="dark"] #secCreateBox div[style*="color:#92400e"],
html[data-theme="dark"] #secCreateBox p[style*="color:#92400e"] {
color: var(--ink-2) !important;
}
/* Dashed info boxes (devolución mode) */
html[data-theme="dark"] #secCreateBox div[style*="background:#fef3c7"] {
background: rgba(245,158,11,0.1) !important;
border-color: rgba(245,158,11,0.3) !important;
}
/* Machine detail panel */
html[data-theme="dark"] #secCreateBox div[id*="machine_detail"] {
background: var(--head) !important;
border-color: var(--line) !important;
}
html[data-theme="dark"] #secCreateBox div[id*="machine_detail"] span {
color: var(--ink-2) !important;
}
/* Accumulated boxes section */
html[data-theme="dark"] #secAccumulatedBoxes {
background: var(--panel) !important;
border-color: var(--line) !important;
}
/* ── Products table container ── */
html[data-theme="dark"] #boxProductsContainer > div {
background: var(--panel) !important;
border-color: var(--field-border) !important;
}
html[data-theme="dark"] #tblBoxProducts thead {
background: var(--head) !important;
}
html[data-theme="dark"] #tblBoxProducts thead th {
color: var(--ink-2) !important;
}
html[data-theme="dark"] #tblBoxProducts tbody tr {
border-bottom-color: var(--line) !important;
}
/* ── Transport section subsections ── */
html[data-theme="dark"] #transportConfigContent > div[style*="background:#f8fafc"],
html[data-theme="dark"] #transportConfigContent > div[style*="background: #f8fafc"] {
background: var(--surface-2) !important;
border-color: var(--field-border) !important;
}
html[data-theme="dark"] #transportConfigContent > div[style*="background:#faf5ff"] {
background: var(--surface-2) !important;
border-color: var(--field-border) !important;
}
html[data-theme="dark"] #transportConfigContent h5[style*="color:#1e40af"] {
color: #93c5fd !important;
}
html[data-theme="dark"] #transportConfigContent h5[style*="color:#6d28d9"] {
color: #c4b5fd !important;
}
/* ── Transport collapsible header gradient ── */
html[data-theme="dark"] #secCreateBox .collapsible-header[style*="background:linear-gradient"] {
background: var(--head) !important;
}
/* ── Contact inputs inside transport ── */
html[data-theme="dark"] #transportConfigContent input[style*="background:#fff"] {
background: var(--field) !important;
color: var(--text) !important;
border-color: var(--field-border) !important;
}
html[data-theme="dark"] #transportConfigContent select {
background: var(--field) !important;
color: var(--text) !important;
border-color: var(--field-border) !important;
}
/* ── Inputs with amber borders (#fbbf24, #fde047, #10b981) ── */
html[data-theme="dark"] #secCreateBox input[style*="border:1px solid #fbbf24"],
html[data-theme="dark"] #secCreateBox input[style*="border: 1px solid #fbbf24"] {
border-color: rgba(251,191,36,0.4) !important;
background: var(--field) !important;
color: var(--text) !important;
}
html[data-theme="dark"] #secCreateBox input[style*="border:1px solid #fde047"] {
border-color: rgba(253,224,71,0.3) !important;
}
html[data-theme="dark"] #secCreateBox input[style*="border:1px solid #10b981"] {
border-color: rgba(16,185,129,0.4) !important;
background: var(--field) !important;
color: var(--text) !important;
}
html[data-theme="dark"] #secCreateBox input[style*="border:1px solid #f59e0b"] {
border-color: rgba(245,158,11,0.4) !important;
background: var(--field) !important;
color: var(--text) !important;
}
/* ── Readonly yellow fields (description, stock) ── */
html[data-theme="dark"] #secCreateBox input[style*="background:#fef9c3"] {
background: var(--head) !important;
color: var(--ink-2) !important;
border-color: var(--field-border) !important;
}
html[data-theme="dark"] #secCreateBox input[style*="background:#f3f4f6"] {
background: var(--head) !important;
color: var(--ink-2) !important;
border-color: var(--field-border) !important;
}
/* ── Select with background:#fff ── */
html[data-theme="dark"] #secCreateBox select[style*="background:#fff"] {
background: var(--field) !important;
color: var(--text) !important;
border-color: var(--field-border) !important;
}
/* ── Machine detail panels (green gradient) ── */
html[data-theme="dark"] #secCreateBox div[style*="background:linear-gradient(135deg, #ecfdf5"] {
background: var(--head) !important;
border-color: var(--field-border) !important;
}
html[data-theme="dark"] #secCreateBox div[style*="background:linear-gradient(135deg, #ecfdf5"] span[style*="color:#047857"] {
color: #6ee7b7 !important;
}
html[data-theme="dark"] #secCreateBox div[style*="background:linear-gradient(135deg, #ecfdf5"] span[style*="color:#1f2937"] {
color: var(--text) !important;
}
html[data-theme="dark"] #secCreateBox div[style*="background:linear-gradient(135deg, #ecfdf5"] span[style*="color:#6b7280"] {
color: var(--ink-2) !important;
}
/* ── Catalog dropdown ── */
html[data-theme="dark"] #box_catalog_dropdown {
background: var(--panel) !important;
border-color: rgba(245,158,11,0.4) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
/* ── Checkbox labels with #92400e ── */
html[data-theme="dark"] #secCreateBox label[style*="color:#92400e"] {
color: #fbbf24 !important;
}
/* ── Section title colors ── */
html[data-theme="dark"] #secCreateBox h4[style*="color:#047857"] {
color: #6ee7b7 !important;
}
html[data-theme="dark"] #secCreateBox h4[style*="color:#1e40af"] {
color: #93c5fd !important;
}
html[data-theme="dark"] #secCreateBox h4[style*="color:#d97706"] {
color: #fbbf24 !important;
}
/* ── Search mode toggle ── */
html[data-theme="dark"] #secCreateBox div[style*="background:linear-gradient(135deg, #f0fdf4 0%, #dcfce7"] {
background: var(--head) !important;
border-bottom-color: var(--line) !important;
}
html[data-theme="dark"] #secCreateBox span[style*="color:#166534"] {
color: #6ee7b7 !important;
}
/* ── Machine selected badge (green) ── */
html[data-theme="dark"] #secCreateBox span[style*="background:#d1fae5"] {
background: rgba(16,185,129,0.2) !important;
color: #6ee7b7 !important;
}
/* ── Devolución dashed border ── */
html[data-theme="dark"] #secCreateBox div[style*="border-top:1px dashed #fcd34d"],
html[data-theme="dark"] #secCreateBox div[style*="border-top: 1px dashed #fcd34d"] {
border-top-color: rgba(252,211,77,0.3) !important;
}
/* ── Muted bottom caption "Común para todos" ── */
html[data-theme="dark"] #secCreateBox div[style*="color:#6b7280"] {
color: var(--muted) !important;
}
/* ── Catalog mode info banner ── */
html[data-theme="dark"] #secCreateBox #box_layout_catalog > div[style*="background:#fef3c7"] {
background: rgba(245,158,11,0.1) !important;
border-color: rgba(245,158,11,0.3) !important;
}
html[data-theme="dark"] #secCreateBox #box_layout_catalog p[style*="color:#92400e"] {
color: #fbbf24 !important;
}
/* ────────────────────────────────────────────
INVENTARIO TAB — ALL PANELS THEME OVERRIDES
──────────────────────────────────────────── */
/* --- KPI Bar (Totales) --- */
html[data-theme="light"] #inv-kpi-bar {
background: linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%) !important;
border-color: #bfdbfe !important;
}
html[data-theme="dark"] #inv-kpi-bar {
background: var(--panel) !important;
border-color: var(--line) !important;
}
html[data-theme="dark"] #inv-kpi-bar span { color: var(--text) !important; }
html[data-theme="dark"] #inv-kpi-bar span[style*="color:#1e40af"],
html[data-theme="dark"] #inv-kpi-bar span[style*="color:#3b82f6"] { color: #60a5fa !important; }
html[data-theme="dark"] #inv-kpi-bar div[style*="color:#64748b"] { color: var(--muted) !important; }
/* --- Subtabs container --- */
html[data-theme="dark"] #tabInv > div[style*="border-bottom"] {
border-bottom-color: var(--line) !important;
}
/* Subtab buttons */
html[data-theme] .inv-subtab-btn { font-family: var(--font-ui) !important; }
html[data-theme="dark"] .inv-subtab-btn {
color: var(--muted) !important;
background: none !important;
}
html[data-theme="dark"] .inv-subtab-btn.active {
color: #60a5fa !important;
background: rgba(59,130,246,0.25) !important;
border-bottom-color: #60a5fa !important;
}
/* ─── Gaming Machines Panel ─── */
/* Header — replace pink gradient with brand gradient */
html[data-theme="light"] #inv-panel-gaming-machines > div:first-child {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25) !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines > div:first-child {
background: linear-gradient(135deg, #2d496e 0%, #263463 100%) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}
/* GM header text + stats */
html[data-theme] #inv-panel-gaming-machines > div:first-child h3 { color: #fff !important; }
html[data-theme] #inv-panel-gaming-machines > div:first-child span[style*="background:rgba(255"] {
background: rgba(255,255,255,0.95) !important;
}
/* GM Excel button — override pink accent */
html[data-theme="light"] #inv-panel-gaming-machines button[onclick*="exportGaming"] {
color: #2563eb !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines button[onclick*="exportGaming"] {
background: rgba(255,255,255,0.12) !important;
color: #fff !important;
}
/* GM Filter bar */
html[data-theme="light"] #inv-panel-gaming-machines > div:nth-child(2) {
background: linear-gradient(135deg, #f5f7fa 0%, #b0bec5 100%) !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines > div:nth-child(2) {
background: var(--head) !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines > div:nth-child(2) span { color: var(--text) !important; }
html[data-theme="dark"] #inv-panel-gaming-machines > div:nth-child(2) select {
background: var(--input) !important; color: var(--text) !important; border-color: var(--line) !important;
}
/* GM Table wrapper */
html[data-theme="dark"] #inv-panel-gaming-machines > div:nth-child(3) {
background: var(--panel) !important;
box-shadow: 0 1px 6px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines thead {
background: var(--head) !important;
border-bottom-color: var(--line) !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines thead th {
color: var(--muted) !important;
background: var(--head) !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines tbody td {
color: var(--text) !important;
}
html[data-theme="dark"] #inv-panel-gaming-machines tbody tr:hover {
background: rgba(59,130,246,0.06) !important;
}
/* GM KPI stats (dynamic JS) — keep colorful gradients */
html[data-theme="dark"] #gm-stats > div > div { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; }
/* ─── Stats Panel ─── */
html[data-theme="dark"] #inv-panel-stats h3,
html[data-theme="dark"] #inv-panel-stats h4 {
color: var(--text) !important;
}
/* Stats sections with .stats-section class */
html[data-theme="dark"] #inv-panel-stats .stats-section {
background: var(--panel) !important;
border-color: var(--border) !important;
}
html[data-theme="dark"] #inv-panel-stats .stats-section h4 {
color: var(--text) !important;
border-color: var(--border-light) !important;
}
html[data-theme="dark"] #inv-panel-stats label { color: var(--text) !important; }
html[data-theme="dark"] #inv-panel-stats select,
html[data-theme="dark"] #inv-panel-stats input {
background: var(--input) !important;
color: var(--text) !important;
border-color: var(--line) !important;
}
html[data-theme="dark"] #inv-panel-stats .stats-table-wrapper {
border-color: var(--border) !important;
}
html[data-theme="dark"] #inv-panel-stats .tbl thead th { background: var(--head) !important; color: var(--muted) !important; }
html[data-theme="dark"] #inv-panel-stats .tbl tbody td { color: var(--text) !important; }
/* ─── Workshop Panel ─── */
/* Workshop header — darken in dark mode */
html[data-theme="dark"] #inv-panel-workshop > div[style*="#f59e0b"] {
background: linear-gradient(135deg, #a14f1d 0%, #87441e 100%) !important;
box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
}
/* Workshop stat counter cards */
html[data-theme="dark"] #inv-panel-workshop div[style*="grid-template-columns:repeat(6"] > div {
background: rgba(255,255,255,0.1) !important;
}
html[data-theme="dark"] #inv-panel-workshop div[style*="grid-template-columns:repeat(6"] > div > div:first-child {
color: var(--muted) !important;
}
/* Workshop — Bad materials section */
html[data-theme="dark"] #ws-bad-materials-section {
background: linear-gradient(135deg, #541919 0%, #8e2c2c 100%) !important;
}
html[data-theme="dark"] #ws-bad-materials-section h4 { color: #fca5a5 !important; }
html[data-theme="dark"] #ws-bad-materials-table-container > div[style*="background:#fff"] {
background: var(--panel) !important;
}
html[data-theme="dark"] #ws-bad-materials-table-container div[style*="background:#fef2f2"] {
background: var(--head) !important;
border-bottom-color: var(--line) !important;
}
html[data-theme="dark"] #ws-bad-materials-table-container input,
html[data-theme="dark"] #ws-bad-materials-table-container select {
background: var(--input) !important; color: var(--text) !important; border-color: var(--line) !important;
}
html[data-theme="dark"] #ws-bad-materials-table thead {
background: var(--head) !important;
}
html[data-theme="dark"] #ws-bad-materials-table thead th { color: #fca5a5 !important; background: var(--head) !important; }
html[data-theme="dark"] #ws-bad-materials-table tbody td { color: var(--text) !important; }
html[data-theme="dark"] #ws-bad-materials-table-container > div[style*="border-left:4px"] {
background: var(--panel) !important; color: var(--muted) !important;
}
/* Workshop — Filters */
html[data-theme="dark"] #inv-panel-workshop > div[style*="#fef3c7"] {
background: var(--head) !important;
}
html[data-theme="dark"] #inv-panel-workshop > div[style*="#fef3c7"] label { color: var(--text) !important; }
html[data-theme="dark"] #inv-panel-workshop > div[style*="#fef3c7"] select,
html[data-theme="dark"] #inv-panel-workshop > div[style*="#fef3c7"] input {
background: var(--input) !important; color: var(--text) !important; border-color: var(--line) !important;
}
/* Workshop — Stats panel */
html[data-theme="dark"] #ws-stats-panel {
background: var(--panel) !important;
}
html[data-theme="dark"] #ws-stats-panel h4,
html[data-theme="dark"] #ws-stats-panel h5 { color: var(--text) !important; }
html[data-theme="dark"] #ws-stats-panel > div > div {
background: var(--head) !important;
}
/* Workshop — Repairs table */
html[data-theme="dark"] #inv-panel-workshop > div[style*="background:#fff"][style*="border-radius:12px"] {
background: var(--panel) !important;
}
html[data-theme="dark"] #ws-repairs-table thead {
background: var(--head) !important;
}
html[data-theme="dark"] #ws-repairs-table thead th { background: var(--head) !important; color: var(--muted) !important; }
html[data-theme="dark"] #ws-repairs-table tbody td { color: var(--text) !important; }
html[data-theme="dark"] #ws-repairs-table tbody tr:hover { background: rgba(245,158,11,0.06) !important; }
/* Workshop — Modals */
html[data-theme="dark"] #ws-repair-modal > div > div { background: var(--panel) !important; }
html[data-theme="dark"] #ws-repair-modal label { color: var(--text) !important; }
html[data-theme="dark"] #ws-repair-modal input,
html[data-theme="dark"] #ws-repair-modal select,
html[data-theme="dark"] #ws-repair-modal textarea {
background: var(--input) !important; color: var(--text) !important; border-color: var(--line) !important;
}
html[data-theme="dark"] #ws-repair-modal input[readonly] { background: var(--head) !important; }
html[data-theme="dark"] #ws-repair-modal div[style*="background:#f3f4f6"],
html[data-theme="dark"] #ws-repair-modal div[style*="background:#fef3c7"] {
background: var(--head) !important;
}
html[data-theme="dark"] #ws-repair-modal div[style*="border-top"] { border-top-color: var(--line) !important; }
html[data-theme="dark"] #ws-repair-modal button[onclick*="closeModal"] {
background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important;
}
/* ─── DBM Panel ─── */
/* DBM header — darken in dark mode */
html[data-theme="dark"] #inv-panel-dbm > section > div:first-child {
background: linear-gradient(135deg, #403d90 0%, #5b2ca4 100%) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
/* DBM filter bar */
html[data-theme="dark"] #inv-panel-dbm div[style*="#f5f7fa"] {
background: var(--head) !important;
}
html[data-theme="dark"] #inv-panel-dbm div[style*="#f5f7fa"] label,
html[data-theme="dark"] #inv-panel-dbm div[style*="#f5f7fa"] span { color: var(--text) !important; }
html[data-theme="dark"] #inv-panel-dbm select,
html[data-theme="dark"] #inv-panel-dbm input[type="text"] {
background: var(--input) !important; color: var(--text) !important; border-color: var(--line) !important;
}
/* DBM table */
html[data-theme="dark"] #inv-panel-dbm div[style*="background:#fff"] {
background: var(--panel) !important;
}
html[data-theme="dark"] #inv-panel-dbm table thead {
background: var(--head) !important;
}
html[data-theme="dark"] #inv-panel-dbm table thead th { background: var(--head) !important; color: var(--muted) !important; }
html[data-theme="dark"] #inv-panel-dbm table tbody td { color: var(--text) !important; }
/* ─── Inventario tblInv — dark row/hover/td ─── */
html[data-theme="dark"] #tblInv tbody tr { background: var(--panel) !important; }
html[data-theme="dark"] #tblInv tbody tr:nth-child(even) { background: var(--bg-2) !important; }
html[data-theme="dark"] #tblInv tbody tr:hover { background: #24415e !important; }
html[data-theme="dark"] #tblInv tbody tr:hover td { color: #fff !important; }
html[data-theme="dark"] #tblInv tbody td { color: var(--text) !important; border-bottom-color: var(--line) !important; }
/* ─── Estadísticas — stat-cards for dark ─── */
html[data-theme="dark"] #inv-panel-stats .stat-card {
background: rgba(255,255,255,0.08) !important;
border-color: var(--border) !important;
opacity: 0.95;
box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}
/* Stats "Cargar Datos" button */
html[data-theme="dark"] #btnLoadStats {
background: #10b981 !important;
color: #fff !important;
}
/* ─── DBM table — full dark theme (.dbm-table inline