:root {
  /* ---- Tema claro (por defecto) ---- */
  --bg: #F1F4F8; --bg2: #FFFFFF; --bg3: #EDF1F6;
  --text: #0B1220; --text2: #3B4657; --text3: #6B7686;
  --border: rgba(11,18,32,0.10); --border2: rgba(11,18,32,0.06);
  --kia-red: #57606E; --blue: #2563EB; --green: #16A34A; --amarillo:#D4A017; --ambar:#C67C1E; --naranja:#E2661A; --red: #DC2626;
  --blue-light: rgba(37,99,235,0.10); --red-light: rgba(228,0,43,0.08);
  --radius: 12px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.06);
}
html[data-theme="dark"] {
  --bg: #111827; --bg2: #1F2937; --bg3: #334155;
  --text: #F8FAFC; --text2: #CBD5E1; --text3: #94A3B8;
  --border: rgba(248,250,252,0.12); --border2: rgba(248,250,252,0.07);
  --blue-light: rgba(37,99,235,0.18); --red-light: rgba(228,0,43,0.14);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 13px; transition: background .2s, color .2s; }
.container { max-width: 1500px; margin: 0 auto; padding: 22px 20px 60px; }
a{color:inherit;}
::selection{background:var(--kia-red);color:#fff;}

/* ---------- Header ---------- */
.kia-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.kia-logo-badge { display: inline-block; font-weight: 800; font-size: 24px; letter-spacing: .01em; font-family: Arial, Helvetica, sans-serif; font-style: italic; transform: skewX(-6deg); color: var(--kia-red); }
.kia-logo-img { height: 40px; width: auto; border-radius: 7px; flex-shrink: 0; background:#000; padding:4px 10px; }
.kia-logo-texto { font-size: 11px; color: var(--text3); border-left: 1px solid var(--border); padding-left: 14px; }
.header-actions { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 0 rgba(22,163,74,.6); animation:pulse 2s infinite; margin-right:5px;}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.55);} 70%{box-shadow:0 0 0 7px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }

/* ---------- Banner / notes ---------- */
.banner { background: var(--blue-light); border: 0.5px solid rgba(37,99,235,0.35); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; font-size: 12px; color: var(--text2); }
.banner b { color: var(--text); }
.banner.warn { background: rgba(217,166,46,0.12); border-color: rgba(217,166,46,0.4); }
.banner.danger{ background: var(--red-light); border-color: rgba(220,38,38,.4); }

h1 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.subtitle { font-size: 12px; color: var(--text3); margin-bottom: 18px; }

/* ---------- Alerts ---------- */
.alerts-wrap{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.alert-item{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius); font-size:12px; border:0.5px solid; }
.alert-item.sev-high{background:var(--red-light); border-color:rgba(220,38,38,.4); color:var(--text);}
.alert-item.sev-mid{background:rgba(226,102,26,0.10); border-color:rgba(226,102,26,.4); color:var(--text);}
.alert-item .icon{font-size:15px;}
.alert-item b{font-weight:700;}

/* ---------- KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi-card { background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card); position:relative; }
.kpi-card.risk{border-color:rgba(220,38,38,.35);}
.kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 8px; display:flex; align-items:center; gap:6px; }
.kpi-value { font-size: 23px; font-weight: 700; color: var(--text); }
.kpi-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
.kpi-value.c-red{color:var(--red);} .kpi-value.c-green{color:var(--green);} .kpi-value.c-blue{color:var(--blue);} .kpi-value.c-orange{color:var(--naranja);}
.kpi-remove{position:absolute; top:8px; right:8px; cursor:pointer; color:var(--text3); font-size:11px; background:none; border:none;}
.kpi-remove:hover{color:var(--red);}

/* ---------- Hero strip ---------- */
.hero-strip{ display:flex; gap:22px; flex-wrap:wrap; margin: 4px 0 20px; padding: 14px 18px; background: var(--bg2); border:0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card);}
.hero-stat b{font-size:17px; display:block; color:var(--text);}
.hero-stat span{font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.05em;}

/* ---------- Panels ---------- */
.panel { background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-card); margin-bottom:16px; }
.panel-title{font-size:13px; font-weight:700; color:var(--text2); margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.panel-title .tag{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); background:var(--bg3); padding:2px 8px; border-radius:8px;}
.panel-title .spacer{margin-left:auto;}
.panel-icon-btn{background:none; border:none; color:var(--text3); cursor:pointer; font-size:12px; padding:2px 5px; border-radius:5px;}
.panel-icon-btn:hover{color:var(--text); background:var(--bg3);}
.drag-handle{cursor:grab; color:var(--text3); font-size:13px;}
.drag-handle:active{cursor:grabbing;}
.panel.dragging{opacity:.4;}
.panel.drop-target{outline:2px dashed var(--kia-red); outline-offset:3px;}

/* ---------- Filters ---------- */
.filtro-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; align-items:flex-end; }
.filtro-group label { display: block; font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.filtro-select, .filtro-input { padding: 8px 12px; border: 0.5px solid var(--border); border-radius: 7px; font-size: 12px; background: var(--bg); color: var(--text); min-width: 170px; font-family:inherit; }
.filtro-select:focus, .filtro-input:focus { outline: none; border-color: var(--blue); }

.multiselect { position: relative; min-width: 200px; }
.multiselect-btn { width: 100%; padding: 8px 12px; border: 0.5px solid var(--border); border-radius: 7px; font-size: 12px; background: var(--bg); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: inherit; text-align: left; }
.multiselect-btn:hover { border-color: var(--text3); }
.multiselect-btn .chev { color: var(--text3); font-size: 10px; flex-shrink: 0; }
.multiselect-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 240px; max-width: 320px; background: var(--bg2); border: 0.5px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden; }
.multiselect-panel.open { display: block; }
.multiselect-buscar { width: 100%; padding: 9px 12px; border: none; border-bottom: 0.5px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; font-family: inherit; }
.multiselect-buscar:focus { outline: none; }
.multiselect-acciones { display: flex; justify-content: space-between; padding: 6px 12px; font-size: 11px; border-bottom: 0.5px solid var(--border); }
.multiselect-acciones span { color: var(--blue); cursor: pointer; }
.multiselect-acciones span:hover { text-decoration: underline; }
.multiselect-lista { max-height: 240px; overflow-y: auto; }
.multiselect-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer; }
.multiselect-item:hover { background: var(--bg3); }
.multiselect-item input[type="checkbox"] { cursor: pointer; accent-color: var(--kia-red); flex-shrink: 0; }
.multiselect-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:0.5px solid var(--border); color:var(--text2); padding:4px 10px; border-radius:999px; font-size:11px;}
.chip .x{cursor:pointer; color:var(--text3); font-weight:700;}
.chip .x:hover{color:var(--red);}

/* ---------- Legend ---------- */
.legend-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 11px; color: var(--text2); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ---------- Charts ---------- */
.chart-wrap { position: relative; height: 300px; }
.chart-wrap.h-220{height:220px;}
.chart-wrap.h-260{height:260px;}
.chart-wrap.h-340{height:340px;}
.widgets-grid{display:flex; gap:16px; flex-wrap:wrap;}
.widgets-grid > .panel{flex:1 1 380px; margin-bottom:0;}
.chart-dl{position:absolute; top:14px; right:14px; z-index:5;}

/* ---------- Semaforo ---------- */
.semaforo-wrap{display:flex; flex-direction:column; gap:10px; height:100%; justify-content:center;}
.semaforo-row{display:flex; align-items:center; gap:12px;}
.semaforo-dot{width:16px; height:16px; border-radius:50%; flex-shrink:0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);}
.semaforo-label{flex:1; font-size:12px; color:var(--text2); font-weight:600;}
.semaforo-count{font-size:14px; font-weight:700; color:var(--text);}
.semaforo-bar-bg{flex:1; height:8px; background:var(--bg3); border-radius:5px; overflow:hidden; margin:0 10px;}
.semaforo-bar-fill{height:100%; border-radius:5px;}

/* ---------- Risk card ---------- */
.risk-card{display:flex; flex-direction:column; gap:6px; height:100%; justify-content:center;}
.risk-big{font-size:30px; font-weight:800; color:var(--red);}
.risk-sub{font-size:12px; color:var(--text2);}
.risk-bar-bg{height:10px; background:var(--bg3); border-radius:6px; overflow:hidden; margin-top:6px;}
.risk-bar-fill{height:100%; background:linear-gradient(90deg,var(--naranja),var(--red)); border-radius:6px;}

/* ---------- Heatmap ---------- */
.heatmap-scroll{overflow-x:auto;}
table.heatmap{border-collapse:separate;border-spacing:4px;width:100%;font-size:11px;}
table.heatmap th{font-weight:700;color:var(--text3);text-align:center;padding:.3rem;font-size:9px;text-transform:uppercase;letter-spacing:.04em;}
table.heatmap td.rowlabel{text-align:left;font-weight:600;color:var(--text2);white-space:nowrap;padding-right:10px;font-size:11px;}
table.heatmap td.cell{text-align:center;border-radius:6px;padding:8px 4px;font-weight:700;min-width:52px;color:#0B1220;}

/* ---------- Tables ---------- */
.table-toolbar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.table-search{padding:7px 11px; border-radius:7px; border:0.5px solid var(--border); background:var(--bg); color:var(--text); font-size:12px; min-width:220px;}
.table-search:focus{outline:none; border-color:var(--blue);}
.tabla-wrap{overflow-x:auto;}
table.tabla-kia{width:100%; border-collapse:collapse; font-size:12px;}
table.tabla-kia thead th{
  text-align:left; font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--text3);
  border-bottom:1px solid var(--border); padding:8px 10px; white-space:nowrap; cursor:pointer; user-select:none;
}
table.tabla-kia thead th:hover{color:var(--text);}
table.tabla-kia thead th .arrow{opacity:.5; font-size:9px; margin-left:3px;}
table.tabla-kia tbody td{padding:8px 10px; border-bottom:0.5px solid var(--border2); white-space:nowrap;}
table.tabla-kia tbody tr:hover{background:rgba(37,99,235,0.04);}
.badge-abierta{background:rgba(37,99,235,0.12); color:#1D4ED8; padding:2px 8px; border-radius:8px; font-weight:700; font-size:10px;}
html[data-theme="dark"] .badge-abierta{color:#60A5FA;}
.badge-cerrada{background:rgba(22,163,74,0.12); color:#15803D; padding:2px 8px; border-radius:8px; font-weight:700; font-size:10px;}
html[data-theme="dark"] .badge-cerrada{color:#4ADE80;}
.badge-rango{padding:2px 8px; border-radius:8px; font-weight:700; font-size:10px;}
.pager{display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:10px; font-size:11px; color:var(--text3);}
.pager button{background:var(--bg3); border:0.5px solid var(--border); color:var(--text); border-radius:6px; padding:5px 10px; cursor:pointer; font-family:inherit; font-size:11px;}
.pager button:disabled{opacity:.35; cursor:default;}

/* ---------- Tabs ---------- */
.tabs-row{display:flex; gap:4px; border-bottom:0.5px solid var(--border); margin-bottom:14px;}
.tab-btn{background:none; border:none; color:var(--text3); font-weight:600; font-size:12px; padding:9px 14px; cursor:pointer; font-family:inherit; border-bottom:2px solid transparent;}
.tab-btn:hover{color:var(--text2);}
.tab-btn.active{color:var(--text); border-bottom-color:var(--kia-red);}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ---------- Buttons ---------- */
.btn-primary { background: var(--kia-red); color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: #414952; }
.btn-secondary { background: var(--bg3); color: var(--text); border: 0.5px solid var(--border); border-radius: 8px; padding: 9px 16px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-secondary:hover { filter:brightness(0.95); }
.btn-danger { background: rgba(220,38,38,0.10); color: var(--red); border: 0.5px solid rgba(220,38,38,0.35); border-radius: 8px; padding: 9px 16px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-danger:hover { background: rgba(220,38,38,0.18); }
.btn-ghost{background:transparent; border:0.5px solid var(--border); color:var(--text2); border-radius:8px; padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;}
.btn-ghost:hover{border-color:var(--text3); color:var(--text);}
.btn-icon{width:34px; height:34px; border-radius:8px; border:0.5px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;}
.btn-icon:hover{border-color:var(--text3);}

/* ---------- Assumption note ---------- */
.assumption-note{background:rgba(217,166,46,0.08); border:1px dashed rgba(217,166,46,0.5); color:#8A5F16; font-size:11px; border-radius:var(--radius); padding:12px 16px; margin-top:6px;}
html[data-theme="dark"] .assumption-note{color:#E7C077;}

/* ---------- Artifacts drawer ---------- */
.artifacts-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1998; display:none;}
.artifacts-drawer{position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100vh; background:var(--bg2); border-left:0.5px solid var(--border); z-index:1999; box-shadow:-20px 0 50px rgba(0,0,0,.25); transition:right .25s ease; display:flex; flex-direction:column;}
.artifacts-drawer.open{right:0;}
.artifacts-header{background:var(--bg); padding:16px 18px; display:flex; align-items:center; gap:10px; border-bottom:0.5px solid var(--border);}
.artifacts-body{padding:16px 18px; overflow-y:auto; flex:1;}
.artifacts-body label{display:block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); margin:14px 0 6px;}
.artifacts-body label:first-child{margin-top:0;}
.artifact-item{border:0.5px solid var(--border); border-radius:8px; padding:9px 11px; display:flex; align-items:center; gap:10px; margin-bottom:8px; background:var(--bg);}
.artifact-item .meta{flex:1; min-width:0;}
.artifact-item .meta b{font-size:12px; display:block; color:var(--text);}
.artifact-item .meta span{font-size:10px; color:var(--text3);}
.switch{position:relative; width:36px; height:20px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch .slider{position:absolute; inset:0; background:var(--bg3); border-radius:999px; cursor:pointer; transition:.15s;}
.switch .slider::before{content:""; position:absolute; width:15px; height:15px; left:2.5px; top:2.5px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .slider{background:var(--kia-red);}
.switch input:checked + .slider::before{transform:translateX(16px);}

/* ---------- Toast ---------- */
.toast-kia{position:fixed; bottom:20px; right:20px; background:var(--text); color:var(--bg2); border-radius:8px; padding:12px 16px; font-size:12px; box-shadow:var(--shadow-card); z-index:2050; opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none;}
.toast-kia.show{opacity:1; transform:translateY(0);}

/* ---------- Misc ---------- */
.footer-note{color:var(--text3); font-size:11px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; margin-top:20px; flex-wrap:wrap; gap:8px;}
.upload-input{display:none;}

@media (max-width:768px){
  .filtro-row{gap:10px;}
  .filtro-select,.filtro-input,.multiselect{min-width:140px;}
}