:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --muted:#5b6670;
  --accent:#0f766e;
  --danger:#dc2626;
  --ok:#059669;
  --warn:#d97706;
  --pad:10px;
  --radius:10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:14px;
}

html,body{
  height:100%;
  margin:0;
  background:linear-gradient(180deg, #f3f6fb 0%, var(--bg) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#shell{max-width:420px;margin:8px auto;height:calc(100vh - 16px);display:flex;flex-direction:column;gap:8px;padding:0 8px;box-sizing:border-box;}

/* Navbar */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--accent);
  color:#fff;
  padding:8px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(15,118,110,0.08);
}
.nav-left{display:flex;align-items:center;gap:8px}
.logo{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.app-title{font-weight:800;font-size:15px;color:#fff}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-btn{
  background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;padding:8px 10px;border-radius:8px;font-weight:700;font-size:12px;min-height:36px;cursor:pointer;
}
.nav-btn.active{background:#e6fffa;color:#04332e;border-color:transparent}

/* Main app area */
.app-main{background:transparent;flex:1;overflow:hidden;display:flex;flex-direction:column}
.section{display:none;padding:8px 0;height:100%;overflow:auto}
.section.active{display:block}

/* simple panel for placeholders */
.panel{background:var(--card);border-radius:10px;padding:12px;box-shadow:0 8px 24px rgba(14,30,37,0.06);border:1px solid #eef4f6;color:var(--muted)}
.panel h2{margin:0 0 8px 0;color:#0f172a}

/* keep Tracking-QB visuals mostly unchanged */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--accent);
  color:#fff;
  padding:8px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(12, 74, 73, 0.08);
}
.topbar .date{font-weight:600; font-size:12px; margin-left:6px}
.actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.topbar .left{display:flex; align-items:center; gap:8px; flex:1}

.shift-select{
  appearance:none;
  -webkit-appearance:none;
  border-radius:8px;
  padding:6px 8px;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#072a23;
  min-width:84px;
  font-size:13px;
}
.shift-select:focus{outline:none; box-shadow:0 0 0 3px rgba(16,185,129,0.10)}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
  font-size:13px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn.primary{background:#10b981; border-color:transparent; color:#072a23}
.btn.danger{background:transparent; border-color:rgba(255,255,255,0.18); color:#ffd7d7}

.table-wrap{background:transparent;flex:1;overflow:auto}
.cards-grid{display:grid;grid-template-columns: 1fr;gap:10px;padding:6px 0 12px 0}
.card{background:var(--card);border-radius:10px;padding:10px;box-shadow:0 8px 24px rgba(14,30,37,0.06);border:1px solid #eef4f6;display:flex;flex-direction:column;gap:8px}
.card-header{display:flex;align-items:center;justify-content:space-between}
.card-title{font-weight:800;color:#0f172a;font-size:15px;}
.card-vars{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.var-row{display:grid;grid-template-columns: 1fr 160px;align-items:center;gap:8px}
.var-label{font-weight:700;color:var(--muted);font-size:13px;padding-left:4px}
.var-choices{display:flex;gap:8px;justify-content:flex-end}
.choice{min-width:84px;padding:8px 10px;border-radius:8px;border:1px solid #e6eef3;background:#fff;font-weight:700;cursor:pointer;text-align:center}
.choice.active.ok{background:var(--ok); color:#fff; border-color:transparent}
.choice.active.warn{background:var(--warn); color:#fff; border-color:transparent}
.choice.active.bad{background:var(--danger); color:#fff; border-color:transparent}
.comment-wrap{grid-column:1/-1}
.comment{width:100%;min-height:48px;padding:8px;border-radius:8px;border:1px solid #e6eef3;resize:none;font-size:13px;box-sizing:border-box}
.legend{display:flex;gap:8px;justify-content:center;background:transparent;color:var(--muted);font-size:12px;padding:6px 8px}
.chip{display:inline-grid;place-items:center;border-radius:6px;width:28px;height:20px;color:#fff;font-weight:700}
.chip.ok{background:var(--ok)}
.chip.warn{background:var(--warn)}
.chip.bad{background:var(--danger)}

/* status-dot indicator next to card title */
.status-dot{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:8px;
  flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(0,0,0,0.03) inset;
  vertical-align:middle;
}

/* Semáforo Calidad list (HOME) */
.semaforo-list{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto;padding:6px}
.semaforo-item{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:8px;padding:8px;border:1px solid #eef4f6}
.semaforo-left{display:flex;align-items:center;gap:10px}
.semaforo-name{font-weight:800;color:#0f172a}
.semaforo-right{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--muted)}
.semaforo-score{min-width:44px;text-align:right;color:#0f172a}
.semaforo-symbol{font-size:18px}
.semaforo-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,0.03) inset}

/* KPI grid and bar styles - minimalist horizontal bars for fast readability */
.kpi-grid{display:flex;flex-direction:column;gap:8px;padding:6px}
.kpi-overall{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px;border-radius:8px;border:1px solid #eef4f6;background:var(--card)}
.kpi-overall-left{display:flex;align-items:center;gap:10px}
.kpi-overall-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(0,0,0,0.03) inset}
.kpi-overall-text{font-weight:800;font-size:15px}
.kpi-list{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.kpi-row{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:8px;background:var(--card);border:1px solid #eef4f6}
.kpi-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-name{font-weight:800;color:#0f172a;font-size:14px}
.kpi-status{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.kpi-percent{font-weight:900;font-size:18px;min-width:64px;text-align:right;color:var(--muted)}
.kpi-bar-wrap{display:flex;align-items:center;gap:8px}
.kpi-bar{flex:1;height:12px;border-radius:8px;background:#eef4f6;overflow:hidden}
.kpi-bar-fill{height:100%;border-radius:8px;width:0%;transition:width 600ms ease;background:#059669}
.kpi-impact{font-size:12px;color:var(--muted);margin-top:4px}
.kpi-impact.warn{color:#F97316}
.kpi-impact.crit{color:#DC2626}

/* responsive single-column on narrow screens */
@media (max-width:420px){
  .kpi-overall-text{font-size:14px}
  .kpi-percent{font-size:16px;min-width:56px}
}

/* score color classes */
.score-fullgreen{background:#059669}     /* 100% */
.score-lightgreen{background:#6EE7B7}    /* 80-99% */
.score-yellow{background:#FACC15}        /* 60-79% */
.score-orange{background:#F97316}        /* 40-59% */
.score-red{background:#DC2626}           /* <40% */

/* Visual helpers for tracking filter:
   - dimmed rows reduce noise
   - highlight marks the selected variable */
.var-row.dimmed{opacity:0.35}
.var-row.highlight{box-shadow:inset 0 0 0 2px rgba(16,185,129,0.08);border-radius:8px}

@media (max-width:420px){
  .var-row{grid-template-columns: 1fr 140px}
  .choice{min-width:72px;padding:8px}
}