:root{
  --navy:#2E4C6D; --navy-fill:#2E4C6D; --orange:#E85A2B; --slate:#8497B0;
  --ink:#1F2A37; --ink2:#4B5563; --ink3:#9AA5B1;
  --line:#E5E9F0; --line2:#EEF1F5; --border-soft:#DCE3EC; --tint:#F1F3F6;
  --bg:#F4F6F9; --card:#FFFFFF;
  --good:#2E7D5B; --warn:#E1A73E; --bad:#C0392B;
  --alt-bg:#FFF1E9; --alt-border:#F6C9AE; --alt-ink:#B8461F; --alt-ink-hover:#8F2B20;
  --shadow:rgba(16,24,40,.06); --shadow-strong:rgba(16,24,40,.30);
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --navy:#6FA3DB; --navy-fill:#2E4C6D; --orange:#FF9A5C; --slate:#93A2B8;
  --ink:#E7ECF3; --ink2:#AEB8C7; --ink3:#7C8797;
  --line:#333E50; --line2:#28303F; --border-soft:#3A4557; --tint:#202939;
  --bg:#0F131B; --card:#1B2331;
  --good:#4DCB93; --warn:#F2C066; --bad:#F17A70;
  --alt-bg:#33251B; --alt-border:#6B4A2E; --alt-ink:#F2A874; --alt-ink-hover:#FFC9A0;
  --shadow:rgba(0,0,0,.35); --shadow-strong:rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#6FA3DB; --navy-fill:#2E4C6D; --orange:#FF9A5C; --slate:#93A2B8;
    --ink:#E7ECF3; --ink2:#AEB8C7; --ink3:#7C8797;
    --line:#333E50; --line2:#28303F; --border-soft:#3A4557; --tint:#202939;
    --bg:#0F131B; --card:#1B2331;
    --good:#4DCB93; --warn:#F2C066; --bad:#F17A70;
    --alt-bg:#33251B; --alt-border:#6B4A2E; --alt-ink:#F2A874; --alt-ink-hover:#FFC9A0;
    --shadow:rgba(0,0,0,.35); --shadow-strong:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;}
a{color:var(--navy);text-decoration:none;} a:hover{text-decoration:underline;}
html,body{margin:0;height:100%;}
body{background:var(--bg);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;transition:background-color .18s ease,color .18s ease;}

/* header */
.hdr{display:flex;align-items:center;gap:14px;padding:0 18px;height:54px;flex:none;
     background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;}
.logo{font:700 20px/1 var(--font);letter-spacing:-.01em;}
.logo span{color:var(--navy);} .logo b{color:var(--orange);font-weight:700;}
.hdr-title{border-left:1px solid var(--line);padding-left:14px;}
.hdr-title .t1{font:600 13.5px/1.2 var(--font);}
.hdr-title .t2{font:400 10.5px/1.2 var(--font);color:var(--ink3);}
.hdr-spacer{flex:1;}
.badge{font:600 10px/1 var(--font);color:var(--ink2);background:var(--tint);border:1px solid var(--line);
       border-radius:999px;padding:5px 10px;}
.tabs{display:flex;gap:2px;background:var(--tint);border:1px solid var(--line);border-radius:8px;padding:2px;}
.tabs button{font:600 11px/1 var(--font);color:var(--ink2);background:transparent;border:0;border-radius:6px;
             padding:6px 12px;cursor:pointer;}
.tabs button.on{background:var(--navy-fill);color:#fff;}
.actions{display:flex;gap:6px;}
.btn{font:600 11px/1 var(--font);color:#fff;background:var(--navy-fill);border:1px solid var(--navy-fill);
     border-radius:7px;padding:7px 11px;cursor:pointer;}
.btn.ghost{color:var(--ink2);background:var(--card);border-color:var(--line);}
.btn:hover{filter:brightness(1.05);}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 9px;}
.theme-btn svg{width:15px;height:15px;display:block;}
.theme-btn .ic-sun{display:none;}
[data-theme="dark"] .theme-btn .ic-moon{display:none;}
[data-theme="dark"] .theme-btn .ic-sun{display:block;}

/* body layout */
.body{flex:1;display:flex;min-height:0;}
.rail{width:210px;flex:none;background:var(--card);border-right:1px solid var(--line);
      padding:14px 12px;overflow:auto;display:flex;flex-direction:column;gap:12px;}
.rail-h{font:700 9px/1 var(--font);letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;}
.fgroup label{display:block;font:600 10px/1 var(--font);color:var(--ink2);margin-bottom:5px;}
.fgroup select{width:100%;font:400 11px/1 var(--font);color:var(--ink);border:1px solid var(--border-soft);
               border-radius:7px;padding:6px 8px;background:var(--card);}
.chk{display:flex;flex-direction:column;gap:5px;}
.chk label{display:flex;align-items:center;gap:7px;font:400 11px/1.2 var(--font);color:var(--ink);cursor:pointer;margin:0;}
.chk input{accent-color:var(--navy-fill);width:13px;height:13px;}
.rail-foot{margin-top:auto;border-top:1px solid var(--line2);padding-top:10px;
           font:400 10px/1.5 var(--font);color:var(--ink3);}

.main{flex:1;min-width:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
.kpi{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;
     box-shadow:0 1px 10px var(--shadow);padding:9px 12px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.kpi.muted{border-left-color:var(--slate);}
.kpi .kl{font:600 9px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);}
.kpi .kv{font:600 22px/1.1 var(--font);color:var(--navy);}
.kpi .kd{font:600 10px/1.1 var(--font);display:flex;align-items:center;gap:4px;color:var(--ink3);}
.kpi .kd svg{width:8px;height:8px;}

/* barra de búsqueda (pestaña Fallas) */
.kwbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
       border-radius:10px;box-shadow:0 1px 10px var(--shadow);padding:10px 14px;margin-bottom:12px;}
.kwbar label{font:600 11px/1 var(--font);color:var(--ink2);}
.kwbar input{font:600 13px/1 var(--font);color:var(--navy);border:1px solid var(--border-soft);border-radius:7px;
             padding:7px 10px;min-width:180px;}
.kwbar input:focus{outline:2px solid var(--border-soft);border-color:var(--navy);}
.kwbar .kwhint{font:400 10px/1.3 var(--font);color:var(--ink3);}
.detchip{font:600 12px/1 var(--font);color:var(--navy);background:var(--tint);border:1px solid var(--border-soft);
         border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:8px;}
.detchip.alt{color:var(--alt-ink);background:var(--alt-bg);border-color:var(--alt-border);}
.detchip a{color:var(--bad);text-decoration:none;font-weight:700;}
.detchip a:hover{color:var(--alt-ink-hover);}
/* pista de que las barras son clicables */
#c-cat,#c-prio,#c-rankgrupo,#c-slagrupo,#c-tipo,#c-fallapp,#c-fallcli,#c-detbreak{cursor:pointer;}

/* cards / grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 10px var(--shadow);
      padding:12px 14px;display:flex;flex-direction:column;min-width:0;}
.card.sp2{grid-column:span 2;} .card.sp3{grid-column:span 3;}
.chd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
.chd h3{margin:0;font:600 12px/1.2 var(--font);color:var(--ink);}
.chd span{font:400 10px/1 var(--font);color:var(--ink3);}
.chart{width:100%;height:246px;}
#c-heat{height:230px;}

/* table */
.tablewrap{overflow:auto;}
table.det{width:100%;border-collapse:collapse;font:400 10.5px/1.3 var(--font);}
table.det th{background:var(--navy-fill);color:#fff;font-weight:600;text-align:right;padding:6px 12px;white-space:nowrap;position:sticky;top:0;}
table.det th:first-child{text-align:left;}
table.det td{padding:5px 12px;text-align:right;border-bottom:1px solid var(--line2);}
table.det td:first-child{text-align:left;}
table.det tr:nth-child(even) td{background:var(--tint);}
table.det tr.tot td{font-weight:700;background:var(--tint);border-top:1.5px solid var(--border-soft);}
.dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:5px;vertical-align:middle;}
table.det td a{font-weight:600;white-space:nowrap;}

.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
         background:var(--bg);font:600 13px var(--font);color:var(--ink2);z-index:60;}
.loading.hidden{display:none;}

/* ventana flotante Detalle */
.detwin{position:fixed;left:224px;right:18px;top:66px;bottom:18px;background:var(--bg);
        border:1px solid var(--line);border-radius:14px;z-index:50;
        box-shadow:0 30px 90px var(--shadow-strong),0 0 0 1px var(--shadow);
        display:flex;flex-direction:column;overflow:hidden;}
.detwin[hidden]{display:none!important;}
.detwin-head{display:flex;align-items:center;justify-content:space-between;
            padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);flex:none;}
.detwin-head h2{margin:0;font:600 14px/1 var(--font);color:var(--ink);}
.detwin-x{width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:8px;
          font:600 14px/1 var(--font);color:var(--ink2);cursor:pointer;}
.detwin-x:hover{background:var(--tint);color:var(--bad);}
.detwin-body{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;}
@media (max-width:1180px){ .detwin{left:8px;right:8px;top:58px;bottom:8px;} }
@media print{ .detwin{display:none!important;} }

/* animaciones */
@keyframes detwin-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes det-fadeup{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
@keyframes det-chip-in{ from{ opacity:0; transform:scale(.75); } to{ opacity:1; transform:none; } }
.detwin.anim-in{ animation:detwin-in 220ms cubic-bezier(.2,.85,.25,1); }
#det-kpis .kpi{ animation:det-fadeup 240ms ease both; }
#det-kpis .kpi:nth-child(2){ animation-delay:30ms; }
#det-kpis .kpi:nth-child(3){ animation-delay:55ms; }
#det-kpis .kpi:nth-child(4){ animation-delay:80ms; }
#det-kpis .kpi:nth-child(5){ animation-delay:105ms; }
#det-kpis .kpi:nth-child(6){ animation-delay:130ms; }
#t-detalle table{ animation:det-fadeup 200ms ease both; }
.detchip.alt{ animation:det-chip-in 220ms cubic-bezier(.2,1.5,.4,1); }
@media (prefers-reduced-motion:reduce){
  .detwin.anim-in,#det-kpis .kpi,#t-detalle table,.detchip.alt{ animation:none!important; }
}

@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid{grid-template-columns:1fr;}
  .card.sp2,.card.sp3{grid-column:auto;}
}

@media print{
  /* el PDF siempre sale en claro, sin importar el tema activo en pantalla */
  :root,:root[data-theme="dark"]{
    --navy:#2E4C6D; --navy-fill:#2E4C6D; --orange:#E85A2B; --slate:#8497B0;
    --ink:#1F2A37; --ink2:#4B5563; --ink3:#9AA5B1;
    --line:#E5E9F0; --line2:#EEF1F5; --border-soft:#DCE3EC; --tint:#F1F3F6;
    --bg:#F4F6F9; --card:#FFFFFF;
    --good:#2E7D5B; --warn:#E1A73E; --bad:#C0392B;
    --alt-bg:#FFF1E9; --alt-border:#F6C9AE; --alt-ink:#B8461F; --alt-ink-hover:#8F2B20;
  }
  .hdr .actions,.tabs,.rail,.loading{display:none!important;}
  .body{display:block;}
  .main{overflow:visible;padding:0;}
  .page{display:block!important;page-break-after:always;padding-top:10px;}
  .card{break-inside:avoid;box-shadow:none;}
  .kpis{grid-template-columns:repeat(6,1fr);}
}