/* ═══════════════════════════════════════════════════════════════
   TRACKWIN WEB — IBM Maximo Application Suite Style
   Principio: blanco/negro/gris dominan. Color = solo información crítica.
   Fuente: IBM Plex Sans. Base: 11px. Compacto, denso, profesional.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --azul:          #0f62fe;
    --azul-hover:    #0353e9;
    --azul-claro:    #edf5ff;
    --gris-texto:    #161616;
    --gris-sub:      #525252;
    --gris-hint:     #8d8d8d;
    --gris-borde:    #e0e0e0;
    --gris-borde2:   #c6c6c6;
    --fondo:         #f4f4f4;
    --fondo-tarjeta: #ffffff;
    --nav-bg:        #161616;
    --nav-hover:     #262626;
    --nav-activo:    #393939;
    --nav-texto:     #8d8d8d;
    --nav-activo-tx: #f4f4f4;
    /* Estados — mínimos, solo para indicar */
    --prod-bg:#edf5ff; --prod-fg:#0043ce;
    --esp-bg:#fdf6dd;  --esp-fg:#684e00;
    --log-bg:#f6f2ff;  --log-fg:#6929c4;
    --fin-bg:#defbe6;  --fin-fg:#044317;
    --anu-bg:#fff1f1;  --anu-fg:#a2191f;
    --gris-bg:#f4f4f4; --gris-fg:#525252;
    --sidebar-w:224px; --topbar-h:40px;
    --radius:2px; --shadow:none; --shadow-md:0 2px 6px rgba(0,0,0,.08);
    --transition:.1s ease;
}

* { box-sizing:border-box; margin:0; padding:0 }
body {
    font-family:'IBM Plex Sans',-apple-system,sans-serif;
    font-size:13px;          /* Maximo: 13-14px base, no 11px */
    color:var(--gris-texto);
    background:var(--fondo);
    line-height:1.42857;
    letter-spacing:0.16px;
}
a { text-decoration:none; color:inherit }

/* ── SHELL ── */
.app-shell { display:flex; height:100vh; overflow:hidden }

/* ── SIDEBAR — negro, compacto ── */
.sidebar {
    width:var(--sidebar-w); background:var(--nav-bg);
    display:flex; flex-direction:column; flex-shrink:0; overflow:hidden;
}
.sidebar-logo {
    height:var(--topbar-h); display:flex; align-items:center;
    padding:0 12px; gap:8px; border-bottom:1px solid #393939;
}
.logo-box {
    width:24px; height:24px; background:#dc2626;
    border-radius:2px; display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:600; color:white; flex-shrink:0; letter-spacing:.3px;
}
.logo-text { font-size:11px; font-weight:500; color:#f4f4f4 }
.logo-sub  { font-size:9px; color:#6f6f6f; display:block; margin-top:-1px }

.sidebar-nav { flex:1; padding:2px 0; overflow-y:auto }
.nav-section {
    font-size:9px; font-weight:400; color:#6f6f6f;
    text-transform:uppercase; letter-spacing:1px; padding:10px 12px 2px;
}
.nav-item {
    display:flex; align-items:center; gap:8px;
    padding:7px 12px; color:var(--nav-texto);
    cursor:pointer; border-left:2px solid transparent;
    transition:all var(--transition); text-decoration:none;
    font-size:11px; font-weight:400;
}
.nav-item:hover  { background:var(--nav-hover); color:#c6c6c6 }
.nav-item.active { background:var(--nav-activo); color:#f4f4f4; border-left-color:#dc2626; font-weight:500 }
.nav-icon  { font-size:14px; width:16px; text-align:center; flex-shrink:0 }
.nav-label { flex:1 }

.sidebar-footer { padding:4px 0; border-top:1px solid #393939 }
.user-card { display:flex; align-items:center; gap:7px; padding:6px 12px; cursor:pointer }
.user-card:hover { background:var(--nav-hover) }
.user-av {
    width:22px; height:22px; border-radius:50%; background:#dc2626;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:500; color:white; flex-shrink:0;
}
.user-name { font-size:11px; font-weight:400; color:#c6c6c6 }
.user-role { font-size:9px; color:#6f6f6f }

/* ── MAIN ── */
.main-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden }

/* ── TOPBAR — negro ── */
.topbar {
    height:var(--topbar-h); background:var(--nav-bg);
    border-bottom:1px solid #393939;
    display:flex; align-items:center; padding:0 14px; gap:8px; flex-shrink:0;
}
.topbar-title { font-size:11px; font-weight:400; color:#f4f4f4; flex:1 }
.topbar-actions { display:flex; align-items:center; gap:4px }
.search-bar { position:relative; max-width:240px; flex:1 }
.search-bar input {
    width:100%; padding:4px 8px 4px 24px;
    border:none; border-bottom:1px solid #525252;
    font-size:11px; outline:none;
    font-family:'IBM Plex Sans',sans-serif;
    background:#262626; color:#f4f4f4; letter-spacing:.16px;
}
.search-bar input:focus { border-bottom-color:#0f62fe; background:#2d2d2d }
.search-bar input::placeholder { color:#6f6f6f }
.search-bar .si { position:absolute; left:6px; top:50%; transform:translateY(-50%); color:#6f6f6f; pointer-events:none }

/* ── PAGE BODY ── */
.page-body { flex:1; overflow-y:auto; padding:14px }

/* ── CARDS ── */
.card { background:var(--fondo-tarjeta); border:1px solid var(--gris-borde); border-radius:var(--radius) }
.card-header {
    padding:7px 12px; border-bottom:1px solid var(--gris-borde);
    display:flex; align-items:center; gap:8px; background:var(--fondo);
}
.card-title { font-size:11px; font-weight:500; color:var(--gris-texto); flex:1 }
.card-body  { padding:12px }

/* ── KPI — Maximo: número 300, label pequeño, sin sombra ── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--gris-borde); border:1px solid var(--gris-borde); margin-bottom:12px }
.kpi-card {
    background:var(--fondo-tarjeta); padding:10px 12px;
    cursor:pointer; border-left:3px solid transparent;
}
.kpi-card:hover { background:#fafafa }
.kpi-card.kf-prod { border-left-color:#0043ce }
.kpi-card.kf-esp  { border-left-color:#b28600 }
.kpi-card.kf-log  { border-left-color:#6929c4 }
.kpi-card.kf-fin  { border-left-color:#198038 }
.kpi-card.kf-anu  { border-left-color:#da1e28 }
.kpi-card.active-kf { background:var(--azul-claro) }
.kpi-card.kf-prod.active-kf { background:#edf5ff }
.kpi-card.kf-esp.active-kf  { background:#fdf6dd }
.kpi-card.kf-log.active-kf  { background:#f6f2ff }
.kpi-card.kf-fin.active-kf  { background:#defbe6 }
.kpi-card.kf-anu.active-kf  { background:#fff1f1 }
.kpi-label { font-size:11px; font-weight:400; color:var(--gris-sub); letter-spacing:.16px; margin-bottom:4px }
.kpi-val   { font-size:24px; font-weight:300; font-family:'IBM Plex Mono',monospace; line-height:1 }
.kpi-val.c-all  { color:var(--gris-texto) }
.kpi-val.c-prod { color:#0043ce }
.kpi-val.c-esp  { color:#b28600 }
.kpi-val.c-log  { color:#6929c4 }
.kpi-val.c-fin  { color:#198038 }
.kpi-val.c-anu  { color:#da1e28 }
.kpi-sub { font-size:10px; color:var(--gris-hint); margin-top:2px }

/* ── BUTTONS ── */
.btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:5px 12px; border-radius:var(--radius);
    font-size:12px; font-weight:400; border:1px solid transparent;
    cursor:pointer; transition:all var(--transition);
    font-family:'IBM Plex Sans',sans-serif; white-space:nowrap; letter-spacing:.16px;
}
.btn-primary { background:var(--azul); color:white }
.btn-primary:hover { background:var(--azul-hover) }
.btn-danger  { background:#da1e28; color:white }
.btn-danger:hover  { background:#a2191f }
.btn-success { background:#198038; color:white }
.btn-success:hover { background:#0e6027 }
.btn-outline { background:white; color:var(--gris-texto); border-color:var(--gris-borde2) }
.btn-outline:hover { background:var(--fondo) }
.btn-ghost   { background:transparent; color:var(--gris-sub) }
.btn-ghost:hover { background:var(--fondo); color:var(--gris-texto) }
.btn-sm  { padding:3px 8px; font-size:10px }
.btn-lg  { padding:7px 16px; font-size:12px }
.btn:disabled { opacity:.5; cursor:not-allowed }

/* ── BADGES — punto de color + texto (IBM Maximo exacto) ── */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:400 }
.badge::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0 }
.badge-produccion { color:#0043ce }  .badge-produccion::before { background:#0043ce }
.badge-espera     { color:#684e00 }  .badge-espera::before     { background:#f1c21b }
.badge-logistica  { color:#6929c4 }  .badge-logistica::before  { background:#8a3ffc }
.badge-finalizado { color:#044317 }  .badge-finalizado::before { background:#24a148 }
.badge-anulado    { color:#a2191f }  .badge-anulado::before    { background:#da1e28 }

/* ── TABLE — compacta, Maximo ── */
.tw-table { width:100%; border-collapse:collapse }
.tw-table thead tr { background:var(--fondo) }
.tw-table thead th {
    padding:8px 12px; text-align:left;
    font-size:12px; font-weight:500; color:var(--gris-sub);
    border-bottom:1px solid var(--gris-borde2);
    letter-spacing:.16px; white-space:nowrap;
}
.tw-table tbody tr { border-bottom:1px solid var(--gris-borde); cursor:pointer }
.tw-table tbody tr:hover { background:var(--azul-claro) }
.tw-table tbody tr.ott-alt { background:#fafafa }
.tw-table tbody tr.ott-alt:hover { background:var(--azul-claro) }
.tw-table tbody tr.ott-sep td { border-top:1px solid var(--gris-borde2) }
.tw-table td { padding:8px 12px; font-size:13px; vertical-align:middle; color:var(--gris-texto) }
.ott-code { font-weight:500; color:#0f62fe; font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; letter-spacing:.3px }
.ott-code:hover { text-decoration:underline }
.desc-cell { max-width:380px; white-space:pre-line; line-height:1.4 }

/* ── FORMS — borde inferior solo, Maximo ── */
.form-group { margin-bottom:10px }
.form-label { display:block; font-size:11px; font-weight:400; color:var(--gris-sub); margin-bottom:3px; letter-spacing:.16px }
.form-label .req { color:#da1e28; margin-left:2px }
.form-control {
    width:100%; padding:6px 8px;
    border:none; border-bottom:1px solid var(--gris-borde2); border-radius:0;
    font-size:13px; color:var(--gris-texto); background:#f4f4f4; outline:none;
    transition:border-color var(--transition);
    font-family:'IBM Plex Sans',sans-serif; letter-spacing:.16px;
}
.form-control:focus { border-bottom-color:var(--azul); background:white; box-shadow:0 1px 0 var(--azul) }
.form-control[readonly],.form-control:disabled { background:#f4f4f4; color:var(--gris-sub) }
textarea.form-control { resize:vertical; min-height:56px }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
.form-grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px }

/* ── FILTER PILLS ── */
.filter-pills { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:10px }
.pill {
    padding:2px 9px; border-radius:var(--radius);
    font-size:10px; font-weight:400; border:1px solid var(--gris-borde);
    cursor:pointer; background:white; color:var(--gris-sub);
}
.pill:hover { border-color:var(--azul); color:var(--azul) }
.pill.active { background:var(--azul); color:white; border-color:var(--azul) }

/* ── TABS ── */
.tab-nav { display:flex; border-bottom:1px solid var(--gris-borde); margin-bottom:12px }
.tab-btn {
    padding:6px 12px 7px; font-size:11px; font-weight:400;
    color:var(--gris-sub); cursor:pointer; border:none; background:none;
    border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:all var(--transition); font-family:'IBM Plex Sans',sans-serif;
}
.tab-btn:hover { color:var(--gris-texto) }
.tab-btn.active { color:var(--gris-texto); border-bottom-color:var(--azul) }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:999; animation:fadeIn .1s ease }
.modal { background:white; border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.15); width:100%; display:flex; flex-direction:column; max-height:92vh; animation:slideUp .12s ease }
.modal-sm { max-width:480px } .modal { max-width:820px } .modal-lg { max-width:1080px }
.modal-header { padding:9px 14px; border-bottom:1px solid var(--gris-borde); display:flex; align-items:center; gap:8px; background:var(--fondo) }
.modal-title  { font-size:12px; font-weight:500; flex:1; color:var(--gris-texto) }
.modal-close  { width:22px; height:22px; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--gris-sub); font-size:15px; line-height:1 }
.modal-close:hover { background:var(--gris-borde) }
.modal-body   { padding:14px; overflow-y:auto; flex:1 }
.modal-footer { padding:9px 14px; border-top:1px solid var(--gris-borde); display:flex; justify-content:flex-end; gap:5px; background:var(--fondo) }

/* ── SECTION LABEL ── */
.section-lbl { font-size:10px; font-weight:500; color:var(--gris-sub); letter-spacing:.5px; padding-bottom:5px; border-bottom:1px solid var(--gris-borde); margin-bottom:10px }

/* ── DATE ROWS ── */
.date-row { display:flex; align-items:center; padding:3px 0; border-bottom:1px solid #f0f0f0 }
.date-row:last-child { border-bottom:none }
.date-lbl { font-size:10px; color:var(--gris-sub); min-width:175px }
.date-val { font-size:11px; color:var(--gris-texto) }
.date-val.empty   { color:#a8a8a8; font-style:italic }
.date-val.highlight { color:#b28600; font-weight:500 }

/* ── SEGUIMIENTO ── */
.seg-list { display:flex; flex-direction:column }
.seg-item { display:flex; gap:7px; padding:6px 0; border-bottom:1px solid #f0f0f0 }
.seg-item:last-child { border-bottom:none }
.seg-dot  { width:6px; height:6px; border-radius:50%; margin-top:4px; flex-shrink:0 }
.seg-dot.nota      { background:var(--gris-hint) }
.seg-dot.tentativa { background:#f1c21b }
.seg-dot.llegada   { background:#24a148 }
.seg-dot.repuesto  { background:#0f62fe }
.seg-content { flex:1 }
.seg-meta    { font-size:10px; color:var(--gris-sub); margin-bottom:2px }
.seg-tipo    { display:inline-block; font-size:9px; font-weight:500; padding:1px 5px; border-radius:var(--radius); margin-right:3px; letter-spacing:.32px }
.seg-tipo.nota      { background:var(--fondo); color:var(--gris-sub) }
.seg-tipo.tentativa { background:#fdf6dd; color:#684e00 }
.seg-tipo.llegada   { background:#defbe6; color:#044317 }
.seg-tipo.repuesto  { background:#edf5ff; color:#0043ce }
.seg-obs  { font-size:11px; color:var(--gris-texto); line-height:1.4 }
.seg-ft   { font-size:10px; color:#b28600; font-weight:500; margin-top:2px }

/* ── DESC TABLE ── */
.desc-table { width:100%; border-collapse:collapse }
.desc-table th { padding:5px 10px; background:var(--fondo); font-size:10px; font-weight:500; color:var(--gris-sub); border-bottom:1px solid var(--gris-borde2); letter-spacing:.32px }
.desc-table td { padding:5px 10px; font-size:11px; border-bottom:1px solid var(--gris-borde) }
.desc-table tr:last-child td { border-bottom:none }
.desc-table tr.sel td { background:var(--azul-claro) }
.desc-table tr:hover td { background:#f8f8f8; cursor:pointer }

/* ── INDICACIONES ── */
.ind-box  { background:#fdf6dd; border-left:2px solid #f1c21b; padding:7px 10px; margin:4px 10px }
.ind-lbl  { font-size:9px; font-weight:500; color:#684e00; letter-spacing:.32px; margin-bottom:2px }
.ind-txt  { font-size:11px; color:var(--gris-texto); white-space:pre-line; line-height:1.5 }

/* ── ALERTS ── */
.alert { padding:7px 10px; font-size:11px; margin-bottom:10px; border-left:2px solid }
.alert-error   { background:#fff1f1; border-color:#da1e28; color:#a2191f }
.alert-success { background:#defbe6; border-color:#24a148; color:#044317 }
.alert-info    { background:#edf5ff; border-color:var(--azul); color:#0043ce }

/* ── LOADING / EMPTY ── */
.loading-wrap { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--gris-sub); gap:7px; font-size:11px }
.spinner { width:14px; height:14px; border:2px solid var(--gris-borde); border-top-color:var(--azul); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0 }
.empty-state { text-align:center; padding:32px; color:var(--gris-sub) }
.empty-icon  { font-size:24px; margin-bottom:5px; opacity:.35 }

/* ── UTILS ── */
.text-muted { color:var(--gris-sub) } .text-sm { font-size:10px }
.font-bold { font-weight:500 } .text-primary { color:var(--azul) }
.text-danger { color:#da1e28 } .text-center { text-align:center }
.text-right { text-align:right }
.mt-3 { margin-top:10px } .mb-3 { margin-bottom:10px }
.flex { display:flex } .flex-1 { flex:1 } .items-center { align-items:center }
.gap-2 { gap:6px } .gap-3 { gap:10px }

/* ── SCROLLBAR — Maximo style ── */
::-webkit-scrollbar { width:3px; height:3px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:#c6c6c6 }
::-webkit-scrollbar-thumb:hover { background:#8d8d8d }

/* ── ANIMATIONS ── */
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes spin    { to { transform:rotate(360deg) } }

@media(max-width:768px) {
    .sidebar { display:none }
    .form-grid-2,.form-grid-3,.form-grid-4 { grid-template-columns:1fr }
    .kpi-grid { grid-template-columns:repeat(2,1fr) }
}