/* ============================================================================
   Dell MXC Inbound Ground (views/InboundGround.html). Paleta azul #024B75, la
   misma de la pantalla de COSY. Prefijo "ig-" en todo para no chocar con
   Phoenix / Bootstrap ni con ui-compact.css.
   ============================================================================ */
.ig-root {
    --ig-primary-dark: #013a5c;
    --ig-primary: #024b75;
    --ig-primary-mid: #036193;
    --ig-tint-100: #e3eef7;
    --ig-bg: #eef2f6;
    --ig-surface: #ffffff;
    --ig-border: #d8e2ea;
    --ig-border-soft: #e6ecf2;
    --ig-text: #1e2a35;
    --ig-text-muted: #5d6f7f;
    --ig-text-faint: #93a3b1;

    padding: 12px;
    border-radius: 8px;
    background: var(--ig-bg);
    color: var(--ig-text);
    font-family: var(--ui-font, "Segoe UI", system-ui, sans-serif);
}

/* ---------------- Header ---------------- */
.ig-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-radius: 8px; color: #ffffff;
    background: linear-gradient(135deg, var(--ig-primary-dark) 0%, var(--ig-primary) 55%, var(--ig-primary-mid) 100%);
}
.ig-title { display: flex; align-items: center; gap: 12px; }
.ig-title > .fas, .ig-title > svg { font-size: 22px; opacity: .9; }
.ig-title h2 { margin: 0; font-size: 18px; font-weight: 600; color: #ffffff; }
.ig-sub { font-size: 12px; opacity: .85; }
.ig-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ig-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }

.ig-select {
    height: 28px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px;
    background: rgba(255, 255, 255, .12); color: #ffffff; font-size: 12px;
}
/* la lista la pinta el sistema operativo: las opciones llevan su propio color */
.ig-select option, .ig-select optgroup { background: #ffffff; color: var(--ig-text); }
.ig-select-light { background: var(--ig-surface); color: var(--ig-text); border-color: var(--ig-border); }

.ig-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; background: rgba(255, 255, 255, .12);
    color: #ffffff; font-size: 12px; font-weight: 500; cursor: pointer;
}
.ig-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.ig-btn-ghost:disabled { opacity: .6; cursor: default; }
.ig-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; margin-left: 6px;
    border: 1px solid var(--ig-border); border-radius: 6px; background: var(--ig-surface);
    color: var(--ig-primary); font-size: 12px; cursor: pointer;
}

/* ---------------- Tabs ---------------- */
.ig-tabs { display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--ig-border); }
.ig-tabs > button {
    padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent;
    color: var(--ig-text-muted); font-size: 13px; font-weight: 500; cursor: pointer;
}
.ig-tabs > button:hover { color: var(--ig-text); }
.ig-tabs > button.active { color: var(--ig-primary); border-bottom-color: var(--ig-primary); font-weight: 600; }

#igBody { padding-top: 12px; }
.ig-state { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 50px 0; color: var(--ig-text-muted); font-size: 13px; }
.ig-alert {
    display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid #f3c9c9;
    border-radius: 6px; background: #fdecec; color: #c53030; font-size: 13px;
}
.ig-help { margin: 0; font-size: 11px; color: var(--ig-text-muted); }

/* ---------------- Dashboard ---------------- */
.ig-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding-bottom: 12px; }
.ig-dash-title { grid-column: span 12; font-size: 17px; color: #666666; }
.ig-card { grid-column: span 12; min-width: 0; padding: 12px 14px; border: 1px solid var(--ig-border); border-radius: 8px; background: var(--ig-surface); }
.ig-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ig-text); }
.ig-half { grid-column: span 6; }
.ig-third { grid-column: span 4; }
@media (max-width: 1200px) { .ig-half, .ig-third { grid-column: span 12; } }
.ig-chart { width: 100%; }
.ig-note { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--ig-text-muted); }

.ig-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 6px; font-size: 12px; color: var(--ig-text-muted); }
.ig-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ig-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }

/* rango de Multi-week (From + atajos) */
.ig-range {
    grid-column: span 12; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 12px; border: 1px solid var(--ig-border); border-radius: 8px; background: var(--ig-surface);
}
.ig-range-label { font-size: 12px; color: var(--ig-text-muted); }
.ig-range-sep { width: 1px; height: 18px; background: var(--ig-border); margin: 0 4px; }
.ig-chip {
    height: 24px; padding: 0 10px; border: 1px solid var(--ig-border); border-radius: 12px; background: var(--ig-surface);
    color: var(--ig-text-muted); font-size: 12px; cursor: pointer;
}
.ig-chip.on { border-color: var(--ig-primary); background: var(--ig-primary); color: #ffffff; }

/* tiles de KPIs */
.ig-tiles { display: grid; grid-template-columns: 140px repeat(5, minmax(0, 1fr)); gap: 12px; grid-column: span 12; }
.ig-tile { padding: 10px 14px; border: 1px solid var(--ig-border); border-radius: 8px; background: var(--ig-surface); cursor: context-menu; min-width: 0; }
.ig-tile span { display: block; font-size: 12px; font-weight: 600; color: var(--ig-text-muted); }
.ig-tile b { display: block; margin-top: 4px; font-size: 28px; font-weight: 700; color: var(--ig-text); font-variant-numeric: tabular-nums; }
.ig-tile-chart { height: 74px; margin-top: 4px; }
.ig-week { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ig-primary); color: #ffffff; font-size: 34px; font-weight: 700; }
@media (max-width: 1200px) { .ig-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------- Menu de clic derecho (vive en <body>) ---------------- */
.ig-menu {
    position: fixed; z-index: 2000; width: 270px; padding: 4px 0;
    border: 1px solid #c8c8c8; border-radius: 4px; background: #f7f7f7;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .2); font-size: 13px; color: #1e2a35;
}
.ig-menu-head { padding: 4px 12px 6px; margin-bottom: 4px; font-size: 11px; color: #5d6f7f; border-bottom: 1px solid #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px;
    border: 0; background: transparent; color: #1e2a35; font-size: 13px; text-align: left; cursor: pointer;
}
.ig-menu button .fas, .ig-menu button svg { width: 16px; color: #5d6f7f; }
.ig-menu button:hover:not(:disabled) { background: #cce4f7; }
.ig-menu button:disabled { color: #a0a0a0; cursor: default; }
.ig-menu hr { margin: 4px 0; border: 0; border-top: 1px solid #e0e0e0; opacity: 1; }

/* ---------------- View data (vive en <body>) ---------------- */
.ig-modal-back { position: fixed; inset: 0; z-index: 2001; align-items: center; justify-content: center; background: rgba(15, 25, 35, .35); }
.ig-modal {
    display: flex; flex-direction: column; width: min(1400px, calc(100vw - 48px)); max-height: calc(100vh - 80px);
    border-radius: 8px; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    font-family: var(--ui-font, "Segoe UI", system-ui, sans-serif);
}
.ig-modal-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #d8e2ea; }
.ig-modal-tools h3 { margin: 0; font-size: 15px; font-weight: 600; color: #1e2a35; }
.ig-modal-tools span { font-size: 12px; color: #5d6f7f; }
.ig-modal-body { flex: 1; min-height: 0; overflow: auto; margin: 10px 16px 16px; }
.ig-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ig-table thead th {
    position: sticky; top: 0; z-index: 1; padding: 6px 8px; background: #024b75;
    color: #ffffff; font-weight: 600; text-align: left; white-space: nowrap;
}
.ig-table thead th.ig-keyh { background: #b7791f; }
.ig-table td { padding: 4px 8px; border-bottom: 1px solid #e6ecf2; color: #1e2a35; white-space: nowrap; }
.ig-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ig-table .ig-empty { color: #93a3b1; font-style: italic; }