:root{--orange:#F39200;--orange-dark:#D47E00;--orange-light:#FFA933;--orange-deep:#c47600;--grey:#5b656f;--grey-light:#8a949e;--grey-mid:#6e7a84;--grey-dark:#4a545e;--white:#ffffff;--bg:#f4f5f7;--text:#2c2c2c;--border:#e0e3e7;--tr:all .25s ease}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;font-size:14px}

/* HEADER */
.header{position:fixed;top:0;left:0;right:0;z-index:600;background:linear-gradient(135deg,#3C3C3C 0%,var(--grey-dark) 100%);color:var(--white);padding:12px 28px 12px 14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;height:50px}
.header-left{display:flex;align-items:center;gap:14px}
.header-logo{height:26px;width:auto;object-fit:contain;flex-shrink:0}
.header-divider{width:1px;height:22px;background:rgba(255,255,255,.2);flex-shrink:0}
.header-left h1{font-size:.95rem;font-weight:600;white-space:nowrap}
.header-left h1 span{color:var(--orange)}
.header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-upload-area{display:flex;align-items:center;gap:8px}
.file-upload-area label{background:rgba(255,255,255,.12);color:var(--white);border:1px dashed rgba(255,255,255,.35);padding:6px 16px;border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:500;transition:var(--tr);display:flex;align-items:center;gap:6px}
.file-upload-area label:hover{background:rgba(243,146,0,.2);border-color:var(--orange)}
.file-upload-area input{display:none}
.file-status{color:rgba(255,255,255,.6);font-size:.72rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-status.loaded{color:var(--orange-light)}
.file-status.error{color:#c62828;font-weight:600}
.header-badge{background:var(--orange);color:var(--white);padding:3px 10px;border-radius:12px;font-size:.68rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.header-btn{background:rgba(255,255,255,.12);color:var(--white);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:.76rem;font-weight:500;transition:var(--tr);display:flex;align-items:center;gap:5px;font-family:inherit}
.header-btn:hover{background:rgba(243,146,0,.2);border-color:var(--orange)}
.header-btn.loaded{background:rgba(76,175,80,.25);border-color:#4caf50;color:#a5d6a7}
.header-btn.loaded:hover{background:rgba(76,175,80,.35)}
.header-btn svg{width:14px;height:14px}
.file-upload-area label.loaded{background:rgba(76,175,80,.25);border-color:#4caf50;color:#a5d6a7}
.file-upload-area label.loaded:hover{background:rgba(76,175,80,.35)}

/* SIDEBAR */
.sidebar{position:fixed;top:50px;left:0;bottom:0;width:52px;background:linear-gradient(180deg,#3C3C3C 0%,var(--grey-dark) 100%);z-index:500;display:flex;flex-direction:column;transition:width .25s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:2px 0 12px rgba(0,0,0,.15)}
.sidebar:hover,.sidebar.open{width:240px}
.sidebar-logo-spacer{min-height:6px;flex-shrink:0}
.sidebar-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}
.sidebar-body::-webkit-scrollbar{width:4px}.sidebar-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.sidebar-group{margin-bottom:4px}
.sidebar-group-title{padding:10px 16px 4px;font-size:.55rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.35);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;user-select:none}
.sidebar:hover .sidebar-group-title,.sidebar.open .sidebar-group-title{opacity:1}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .15s,color .15s;color:rgba(255,255,255,.6);white-space:nowrap;position:relative;font-size:.8rem;font-weight:500;border-left:3px solid transparent}
.sidebar-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9)}
.sidebar-item.active{color:var(--orange);background:rgba(243,146,0,.08);border-left-color:var(--orange)}
.sidebar-item svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.8}
.sidebar-item .sb-label{opacity:0;transition:opacity .2s;white-space:nowrap}
.sidebar:hover .sb-label,.sidebar.open .sb-label{opacity:1}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}

/* MAIN */
.main{padding:20px 28px;max-width:1400px;margin-left:52px;margin-top:50px;margin-right:0}
.section{display:none}.section.active{display:block}

/* EMPTY STATE / LOADING */
.empty-state{text-align:center;padding:80px 20px;background:var(--white);border-radius:14px;border:1px solid var(--border);margin-top:30px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.empty-state h3{margin-bottom:8px;color:var(--text);font-size:1.1rem}
.empty-state p{font-size:.85rem;color:var(--grey-light);line-height:1.6}
.loading-spinner{position:relative;width:90px;height:90px;margin:0 auto 20px}
.spinner-ring{position:absolute;inset:0;border:3px solid var(--border);border-top-color:var(--orange);border-radius:50%;animation:spin 1.2s linear infinite}
.spinner-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:auto;object-fit:contain}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-progress{width:260px;max-width:80%;height:4px;background:var(--border);border-radius:4px;margin:16px auto 0;overflow:hidden}
.loading-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),#FFA933);border-radius:4px;transition:width .4s ease}
/* When data loaded, hide spinner animation */
.empty-state.no-loading .loading-spinner{display:none}
.empty-state.no-loading .loading-progress{display:none}
.empty-state.no-loading{border:2px dashed var(--border);box-shadow:none}

/* KPI ROW (matching client HTML style) */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light))}
.kpi-label{font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--grey-light);font-weight:600;margin-bottom:2px}
.kpi-value{font-size:1.6rem;font-weight:800}
.kpi-sub{font-size:.7rem;color:var(--grey-light);margin-top:2px}

/* FILTER BAR */
.filter-bar{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:16px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.filter-group{display:flex;flex-direction:column;gap:3px}
.filter-group label{font-size:.68rem;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.5px}
.filter-group.grow{flex:1;min-width:180px}

/* PREDICTIVE SEARCH */
.search-wrapper{position:relative}
.search-wrapper input{width:100%;padding:7px 10px 7px 32px;border:1px solid var(--border);border-radius:7px;font-size:.82rem;font-family:inherit;transition:var(--tr);background:var(--bg);height:34px;box-sizing:border-box}
.search-wrapper input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(243,146,0,.1)}
.search-wrapper .search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--grey-light)}
.search-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 7px 7px;max-height:260px;overflow-y:auto;z-index:100;box-shadow:0 8px 20px rgba(0,0,0,.12);display:none}
.search-dropdown.show{display:block}
.search-item{padding:7px 12px;font-size:.8rem;cursor:pointer;transition:background .15s}
.search-item:hover,.search-item.highlighted{background:rgba(243,146,0,.08)}
.search-item .code{font-weight:700;color:var(--orange-dark)}
.search-item .name{color:var(--grey);margin-left:6px;font-size:.75rem}
.proj-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:600;background:var(--orange);color:var(--white);white-space:nowrap;cursor:default;position:relative}
.pl-warn-icon{display:inline-block;cursor:pointer;transition:transform .15s}.pl-warn-icon:hover{transform:scale(1.2)}

/* SUB-TABS */
.sub-tabs{display:flex;gap:0}
.sub-tab{padding:6px 16px;font-size:.78rem;font-weight:600;font-family:inherit;border:1px solid var(--border);background:var(--bg);cursor:pointer;transition:var(--tr);color:var(--grey)}
.sub-tab:first-child{border-radius:7px 0 0 7px}
.sub-tab:last-child{border-radius:0 7px 7px 0;border-left:none}
.sub-tab.active{background:var(--orange);color:var(--white);border-color:var(--orange)}

/* DATE RANGE PICKER */
.date-range-picker{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--bg)}
.date-range-picker input{border:none;padding:7px 10px;font-size:.82rem;font-family:inherit;background:transparent;min-width:120px;outline:none}
.date-range-picker input:focus{background:rgba(243,146,0,.05)}
.date-range-picker .sep{color:var(--grey-light);font-size:.85rem;padding:0 2px;user-select:none}

/* DATE PRESET PICKER */
.date-preset-wrapper{position:relative}
.date-preset-btn{padding:7px 12px;border:1px solid var(--border);border-radius:7px;font-size:.82rem;font-family:inherit;background:var(--bg);cursor:pointer;display:flex;align-items:center;gap:6px;min-width:180px;transition:var(--tr);color:var(--text)}
.date-preset-btn:hover,.date-preset-btn:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(243,146,0,.1)}
.date-preset-btn svg{width:14px;height:14px;color:var(--grey-light);flex-shrink:0}
.date-preset-btn .arrow{margin-left:auto;font-size:.6rem;color:var(--grey-light)}
.date-preset-panel{position:absolute;top:100%;left:0;min-width:340px;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.15);z-index:200;display:none;overflow:hidden}
.date-preset-panel.show{display:flex}
.date-presets-list{width:160px;padding:6px 0;border-right:1px solid var(--border);max-height:360px;overflow-y:auto}
.date-presets-list .preset-item{padding:7px 14px;font-size:.78rem;cursor:pointer;transition:background .15s;color:var(--text)}
.date-presets-list .preset-item:hover,.date-presets-list .preset-item.active{background:rgba(243,146,0,.08);color:var(--orange-dark)}
.date-custom-cal{padding:12px;min-width:280px}
.date-custom-cal .cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.date-custom-cal .cal-header button{background:none;border:none;cursor:pointer;padding:4px 8px;font-size:.85rem;color:var(--grey);border-radius:4px}
.date-custom-cal .cal-header button:hover{background:var(--bg);color:var(--orange)}
.date-custom-cal .cal-header span{font-size:.82rem;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.cal-grid .cal-dow{font-size:.6rem;font-weight:600;color:var(--grey-light);text-transform:uppercase;padding:4px 0}
.cal-grid .cal-day{font-size:.75rem;padding:5px 2px;cursor:pointer;border-radius:4px;transition:background .15s}
.cal-grid .cal-day:hover{background:rgba(243,146,0,.1)}
.cal-grid .cal-day.empty{cursor:default}.cal-grid .cal-day.empty:hover{background:transparent}
.cal-grid .cal-day.selected{background:var(--orange);color:var(--white);font-weight:600}
.cal-grid .cal-day.in-range{background:rgba(243,146,0,.12)}
.cal-grid .cal-day.today{font-weight:700;box-shadow:inset 0 0 0 1px var(--orange)}
.cal-grid .cal-day.other-month{color:var(--grey-light);opacity:.5}
.cal-range-info{text-align:center;font-size:.72rem;color:var(--grey);margin-top:8px;min-height:18px}
.cal-range-info strong{color:var(--orange-dark)}

/* SELECT */
select{padding:7px 10px;border:1px solid var(--border);border-radius:7px;font-size:.82rem;font-family:inherit;background:var(--bg);transition:var(--tr);min-width:100px;height:34px;box-sizing:border-box}
select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(243,146,0,.1)}
.filter-group select{min-width:0}

/* BTN */
.btn{padding:7px 16px;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;border:none;transition:var(--tr);font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--orange);color:var(--white)}.btn-primary:hover{background:var(--orange-dark)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--grey)}.btn-outline:hover{border-color:var(--orange);color:var(--orange)}
.btn-calc{background:var(--grey-dark);color:var(--white);padding:8px 20px}.btn-calc:hover{background:var(--grey)}
.btn-icon{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:var(--grey-light);transition:var(--tr);display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{color:#c62828;background:rgba(198,40,40,.08)}

/* SLIDERS */
.inc-slider-wrap{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg);border-radius:8px;border:1px solid var(--border);margin-bottom:12px;flex-wrap:wrap}
.inc-slider-label{font-size:.72rem;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.inc-slider-group{display:flex;align-items:center;gap:6px;flex:1;min-width:200px}
.inc-slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none;flex:1;min-width:120px}
.inc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#5b656f;cursor:pointer;border:2px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.inc-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#5b656f;cursor:pointer;border:2px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.inc-slider.is-ref::-webkit-slider-thumb{background:var(--orange)}
.inc-slider.is-ref::-moz-range-thumb{background:var(--orange)}
.inc-slider-val{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:2px 6px;border-radius:5px;font-size:.78rem;font-weight:700;background:#5b656f;color:var(--white)}
.inc-slider-val.is-ref{background:var(--orange)}
.inc-slider-ref{font-size:.62rem;color:var(--grey-light);white-space:nowrap}

/* INCIDENCIAS */
#inc-tbody tr:hover{background:rgba(243,146,0,.04)}
#inc-tbody input[type="checkbox"]{width:16px;height:16px;accent-color:var(--orange);cursor:pointer}
#inc-check-all{width:16px;height:16px;accent-color:var(--orange);cursor:pointer}
#btn-notificar{display:flex;align-items:center;gap:6px}

/* TABLES */
.table-container{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.table-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.table-header h3{font-size:.95rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.table-scroll{overflow-x:auto}
.pl-sticky-col{position:sticky;left:0;z-index:2;background:inherit}
thead .pl-sticky-col{background:var(--bg);z-index:3}
#pl-tbody tr .pl-sticky-col{background:var(--white)}
#pl-tbody tr:hover .pl-sticky-col{background:rgba(243,146,0,.03)}
#pl-tbody .totals-row .pl-sticky-col{background:var(--bg)}
table{width:100%;border-collapse:collapse;font-size:.78rem}
thead th{background:var(--bg);padding:8px 10px;text-align:left;font-weight:600;color:var(--grey);text-transform:uppercase;font-size:.65rem;letter-spacing:.5px;border-bottom:2px solid var(--border);white-space:nowrap}
tbody td{padding:8px 10px;border-bottom:1px solid #eef0f2;white-space:nowrap}
tbody tr:hover{background:rgba(243,146,0,.03)}
.r{text-align:right}.nw{white-space:nowrap}
.text-bold{font-weight:600}.text-orange{color:var(--orange-dark)}.text-grey{color:var(--grey-light)}
.tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:.66rem;font-weight:500;background:rgba(243,146,0,.1);color:var(--orange-dark);white-space:nowrap}
.totals-row{background:var(--bg)}.totals-row td{border-top:3px solid var(--orange);font-weight:700}
.clickable-row:hover{background:#FFF3E0 !important}.clickable-row:hover td{transition:background .15s}
.res-alert-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
/* Sortable table headers */
.sortable-th{cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s}
.sortable-th:hover{color:var(--orange)}
.price-input{width:80px;padding:4px 6px;border:1px solid var(--border);border-radius:5px;text-align:right;font-size:.82rem;font-family:inherit}
.price-input:focus{outline:none;border-color:var(--orange)}

/* CHARTS */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.chart-container{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.chart-container h3{font-size:.88rem;font-weight:700;margin-bottom:14px;padding-left:10px;border-left:3px solid var(--orange)}
.bar-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.bar-lbl{width:110px;text-align:right;font-size:.72rem;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.bar-track{flex:1;height:20px;background:var(--bg);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding-left:6px;font-size:.64rem;font-weight:600;color:var(--white);min-width:fit-content}
.bar-val{width:50px;font-size:.72rem;text-align:right;color:var(--grey);flex-shrink:0}
.donut-container{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.donut-legend{display:flex;flex-direction:column;gap:4px}
.donut-legend-item{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--grey)}
.donut-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* MODAL */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{background:var(--white);border-radius:14px;padding:28px;max-width:500px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal h3{margin-bottom:12px;font-size:1rem}.modal p{margin-bottom:18px;font-size:.85rem;color:var(--grey)}
/* FILTER SECTIONS (collapsible) */
.filter-section{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.filter-section-header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;background:var(--bg);user-select:none}
.filter-section-header:hover{background:#eee}
.filter-section-body{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 12px}
.filter-section-body.open{max-height:500px;padding:8px 12px 12px 12px}
.filter-arrow{transition:transform .3s;transform:rotate(-90deg)}
.filter-arrow.open{transform:rotate(0deg)}
/* INCIDENCIA BLOCKS (collapsible) */
.inc-block{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--white)}
.inc-block-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:var(--bg);user-select:none;flex-wrap:wrap;gap:8px}
.inc-block-header:hover{background:#eee}
.inc-block-body{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease;padding:0 16px}
.inc-block-body.open{max-height:5000px;padding:12px 16px 16px}
.btn-sq{padding:6px 8px!important;min-width:0!important}
.btn-sm{padding:5px 12px!important;font-size:.78rem!important}

/* CONFIG PANEL */
.config-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}
.config-overlay.show{opacity:1;pointer-events:auto}
.config-panel{background:var(--white);border-radius:14px;padding:32px;max-width:520px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.config-panel h3{font-size:1.05rem;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.config-panel h3 svg{color:var(--orange)}
.config-panel .subtitle{font-size:.8rem;color:var(--grey-light);margin-bottom:20px}
/* Config section tabs */
.cfg-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--border);padding-bottom:0}
.cfg-tab{display:flex;align-items:center;gap:5px;padding:8px 14px;font-size:.78rem;font-weight:600;color:var(--grey);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color .2s,border-color .2s;font-family:inherit}
.cfg-tab:hover{color:var(--text)}
.cfg-tab.active{color:var(--orange);border-bottom-color:var(--orange)}
.cfg-tab svg{opacity:.6}
.cfg-tab.active svg{opacity:1;stroke:var(--orange)}
.cfg-section{animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* Roles matrix table */
.roles-matrix{width:100%;border-collapse:collapse;font-size:.75rem}
.roles-matrix th{background:var(--bg);padding:8px 6px;font-weight:600;text-align:center;border-bottom:2px solid var(--border);white-space:nowrap;position:sticky;top:0}
.roles-matrix th:first-child{text-align:left;padding-left:12px}
.roles-matrix td{padding:6px;text-align:center;border-bottom:1px solid var(--border)}
.roles-matrix td:first-child{text-align:left;padding-left:12px;font-weight:500;font-size:.78rem}
.roles-matrix tr:hover{background:#fafafa}
.roles-matrix input[type="checkbox"]{width:16px;height:16px;accent-color:var(--orange);cursor:pointer}
/* User role list */
.user-role-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border);font-size:.82rem}
.user-role-row:last-child{border-bottom:none}
.user-role-row .user-name{flex:1;font-weight:500}
.user-role-row .user-dept{flex:0 0 120px;font-size:.72rem;color:var(--grey)}
.user-role-row select{padding:4px 8px;border:1px solid var(--border);border-radius:5px;font-size:.78rem;font-family:inherit;background:var(--bg)}
.config-field{margin-bottom:16px}
.config-field label{display:block;font-size:.72rem;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.config-field input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:.85rem;font-family:inherit;transition:var(--tr);background:var(--bg)}
.config-field input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(243,146,0,.1)}
.config-field .token-input{font-family:monospace;font-size:.75rem}
.conn-status{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;font-size:.82rem;font-weight:500;margin-bottom:16px}
.conn-status.idle{background:#f8f9fa;color:var(--grey)}
.conn-status.testing{background:#fff8e6;color:#b08330}
.conn-status.load{background:#fff8e6;color:#b08330}
.conn-status.ok{background:#e8f5e9;color:#2e7d32}
.conn-status.err{background:#fde8e8;color:#c62828}
.conn-status .dot{width:8px;height:8px;border-radius:50%}
.conn-status.idle .dot{background:var(--grey-light)}
.conn-status.testing .dot{background:#b08330;animation:pulse 1s infinite}
.conn-status.load .dot{background:#b08330;animation:pulse 1s infinite}
.conn-status.ok .dot{background:#2e7d32}
.conn-status.err .dot{background:#c62828}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.config-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.config-info{font-size:.72rem;color:var(--grey-light);margin-top:8px;line-height:1.5}
.api-date-range{display:flex;gap:8px;align-items:center}
.api-date-range input{flex:1}
.api-date-range span{color:var(--grey-light);font-size:.85rem}

/* INSTANT TOOLTIPS */
#tip-box{position:fixed;background:rgba(44,44,44,.92);color:#fff;padding:4px 10px;border-radius:5px;font-size:.7rem;white-space:nowrap;z-index:9999;pointer-events:none;max-width:420px;overflow:hidden;display:none}
#tip-box .tip-inner{display:inline-block;white-space:nowrap}
#tip-box.scrolling .tip-inner{animation:tipScroll var(--scroll-dur,10s) linear infinite}
@keyframes tipScroll{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--scroll-dist))}}
/* Disable native tooltip delay with custom CSS */
.tip{position:relative;cursor:default}
.tip .tiptext{visibility:hidden;opacity:0;background:rgba(44,44,44,.92);color:#fff;padding:4px 10px;border-radius:5px;font-size:.7rem;white-space:nowrap;position:absolute;bottom:110%;left:50%;transform:translateX(-50%);z-index:999;pointer-events:none;transition:opacity .05s;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.tip:hover .tiptext{visibility:visible;opacity:1}

/* CHART TOGGLE */
.chart-toggle{display:inline-flex;gap:0;margin-left:auto;font-size:.68rem}
.chart-toggle button{padding:3px 10px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-family:inherit;font-size:.68rem;font-weight:600;color:var(--grey);transition:var(--tr)}
.chart-toggle button:first-child{border-radius:5px 0 0 5px}
.chart-toggle button:last-child{border-radius:0 5px 5px 0;border-left:none}
.chart-toggle button.active{background:var(--orange);color:var(--white);border-color:var(--orange)}
.export-menu{position:absolute;top:100%;right:0;background:var(--white);border:1px solid var(--border);border-radius:7px;box-shadow:0 8px 20px rgba(0,0,0,.12);z-index:100;min-width:120px;display:none;overflow:hidden;margin-top:4px}
.export-menu.show{display:block}
.export-menu-item{padding:8px 16px;font-size:.8rem;cursor:pointer;transition:background .15s;font-weight:500;color:var(--text)}
.export-menu-item:hover{background:rgba(243,146,0,.08);color:var(--orange-dark)}

/* STICKY FIRST COLUMN (ofertas Estado) */
#ofer-table th.ofer-sticky-col,
#ofer-table td.ofer-sticky-col{position:-webkit-sticky !important;position:sticky !important;left:0 !important;z-index:2}
#ofer-table td.ofer-sticky-col{background:#fff}
#ofer-table thead th.ofer-sticky-col{background:var(--bg);z-index:3}
#ofer-table .totals-row td.ofer-sticky-col{background:#f9fafb}
#ofer-table tr:hover td.ofer-sticky-col{background:#fef7ec}
#ofer-table .ofer-sticky-col::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;background:linear-gradient(to right,rgba(0,0,0,.06),transparent);pointer-events:none}

/* AUTOCOMPLETE DROPDOWN */
.ofer-autocomplete-list{position:absolute;left:0;right:0;top:100%;z-index:50;background:#fff;border:1px solid var(--border);border-radius:0 0 7px 7px;max-height:180px;overflow-y:auto;box-shadow:0 6px 16px rgba(0,0,0,.1)}
.ofer-autocomplete-list .ac-item{padding:7px 10px;font-size:.82rem;cursor:pointer;transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofer-autocomplete-list .ac-item:hover,.ofer-autocomplete-list .ac-item.ac-active{background:rgba(243,146,0,.1);color:var(--orange-dark)}
.ofer-autocomplete-list .ac-item .ac-match{font-weight:700;color:var(--orange)}
.ofer-autocomplete-list .ac-empty{padding:8px 10px;font-size:.78rem;color:var(--grey-light);font-style:italic}

/* MODAL ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* RESPONSIVE */
@media(max-width:900px){.charts-grid{grid-template-columns:1fr}.filter-bar{flex-direction:column;align-items:stretch}.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.header{padding:10px 16px}.main{padding:14px 16px;margin-left:52px}.kpi-row{grid-template-columns:1fr}.bar-lbl{width:70px}}