/* Panel de inicio (home.php): tareas del día e indicadores. Ver js/inicio/panel.js */
#panelInicio {
  --pi-ink: #24231f; --pi-ink-2: #5d5a50; --pi-ink-3: #8f8a7b;
  --pi-line: #e4dfd1; --pi-surface: #fff; --pi-surface-2: #f8f6f0; --pi-bg: #f4f1ea;
  --pi-accent: #c68a2e; --pi-ok: #4c6b3c; --pi-warn: #a8701c; --pi-bad: #7a2e2e; --pi-info: #3d4a5c;
  background: var(--pi-bg);
  border-radius: 14px;
  padding: 18px 20px 6px;
  margin: 0 0.75rem 24px;
  color: var(--pi-ink);
}
/* Barra de progreso mientras carga el panel */
#panelInicioCarga {
  --pi-ink-2: #5d5a50; --pi-line: #e4dfd1; --pi-bg: #f4f1ea; --pi-accent: #c68a2e;
  background: var(--pi-bg);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0.75rem 24px;
}
body.tema-gc-oscuro #panelInicioCarga { --pi-ink-2: #b9b4a6; --pi-line: #34343a; --pi-bg: #19191c; --pi-accent: #e3a94e; }
#panelInicioCarga .pic-txt { font-size: 13px; color: var(--pi-ink-2); margin-bottom: 8px; }
#panelInicioCarga .pic-pct { font-variant-numeric: tabular-nums; }
#panelInicioCarga .pic-pista { height: 6px; border-radius: 3px; background: var(--pi-line); overflow: hidden; }
#panelInicioCarga .pic-barra { height: 100%; width: 0; border-radius: 3px; background: var(--pi-accent); transition: width .25s ease-out; }
body.tema-gc-oscuro #panelInicio {
  --pi-ink: #ece8dd; --pi-ink-2: #b9b4a6; --pi-ink-3: #8a8679;
  --pi-line: #34343a; --pi-surface: #222226; --pi-surface-2: #2a2a2f; --pi-bg: #19191c;
  --pi-accent: #e3a94e;
}
#panelInicio .pi-cab { margin-bottom: 10px; min-height: 26px; }
#panelInicio .pi-eyebrow {
  font-family: "IBM Plex Mono", Consolas, monospace; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pi-accent);
}
#panelInicio .pi-bloque { margin-bottom: 14px; }
#panelInicio .pi-tit {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15rem;
  margin: 0 0 8px; color: var(--pi-ink);
}

/* Tareas: lista con contador */
#panelInicio .pi-tareas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px;
}
#panelInicio .pi-tarea {
  display: flex; align-items: center; gap: 12px;
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: 10px;
  padding: 10px 12px; color: var(--pi-ink); transition: border-color .15s, transform .15s;
}
#panelInicio .pi-tarea:hover { border-color: var(--pi-accent); transform: translateY(-1px); }
#panelInicio .pi-tarea.pi-cero { opacity: .65; }
#panelInicio .pi-num {
  min-width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; padding: 0 6px;
}
#panelInicio .pi-num.pi-ok { background: var(--pi-ok); }
#panelInicio .pi-num.pi-warn { background: var(--pi-warn); }
#panelInicio .pi-num.pi-bad { background: var(--pi-bad); }
#panelInicio .pi-num.pi-info { background: var(--pi-info); }
#panelInicio .pi-txt { flex: 1; font-size: 14px; line-height: 1.3; }
#panelInicio .pi-ir { color: var(--pi-ink-3); font-size: 20px; }

/* Indicadores: tarjetas */
#panelInicio .pi-kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px;
}
#panelInicio .pi-kpi {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: 10px;
  padding: 12px 14px; color: var(--pi-ink); transition: border-color .15s;
}
#panelInicio .pi-kpi:hover { border-color: var(--pi-accent); }
#panelInicio .pi-kpi-lbl {
  font-family: "IBM Plex Mono", Consolas, monospace; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pi-ink-3);
}
#panelInicio .pi-kpi-val {
  font-family: "Fraunces", Georgia, serif; font-size: 2rem; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
#panelInicio .pi-kpi-det { font-size: 13px; color: var(--pi-ink-2); }

/* Cabecera con botón de personalizar */
#panelInicio .pi-cab { display: flex; align-items: center; justify-content: space-between; }
#panelInicio .pi-ajustes {
  display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--pi-line);
  border-radius: 999px; padding: 3px 10px; color: var(--pi-ink-2); font-size: 12px; cursor: pointer;
}
#panelInicio .pi-ajustes:hover { border-color: var(--pi-accent); color: var(--pi-ink); }
#panelInicio .pi-ajustes .material-icons { font-size: 16px; }
#panelInicio .pi-prefs {
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: 10px;
  padding: 12px 14px 4px; margin-bottom: 14px;
}
#panelInicio .pi-prefs-grupo { display: inline-block; vertical-align: top; min-width: 260px; margin: 0 24px 8px 0; }
#panelInicio .pi-prefs-grupo p { margin: 4px 0; }
#panelInicio .pi-prefs-grupo label { color: var(--pi-ink); font-size: 14px; }
#panelInicio .pi-prefs-pie { text-align: right; padding-bottom: 8px; }
#panelInicio .pi-prefs-ok { background: var(--pi-ink); color: var(--pi-surface); text-transform: none; border-radius: 8px; height: 32px; line-height: 32px; }
#panelInicio .pi-vacio { color: var(--pi-ink-2); font-size: 14px; }

/* Gráficas */
#panelInicio .pi-grafs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
#panelInicio .pi-graf {
  display: flex; flex-direction: column; gap: 6px; background: var(--pi-surface); border: 1px solid var(--pi-line);
  border-radius: 10px; padding: 12px 14px 8px; color: var(--pi-ink);
}
#panelInicio .pi-graf:hover { border-color: var(--pi-accent); }
#panelInicio .pi-graf svg { width: 100%; height: auto; display: block; }
#panelInicio .pi-bar { fill: #d9cdb2; }
#panelInicio .pi-bar-act { fill: var(--pi-accent); }
#panelInicio .pi-bar-val { font-size: 10px; fill: var(--pi-ink-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
#panelInicio .pi-bar-mes { font-size: 10px; fill: var(--pi-ink-3); text-anchor: middle; text-transform: uppercase; letter-spacing: .05em; }
body.tema-gc-oscuro #panelInicio .pi-bar { fill: #4a4639; }
/* Ranking (barras horizontales) */
#panelInicio .pi-rk { display: grid; grid-template-columns: minmax(0, 42%) 1fr 32px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
#panelInicio .pi-rk-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panelInicio .pi-rk-bar { height: 10px; background: var(--pi-surface-2); border-radius: 5px; overflow: hidden; }
#panelInicio .pi-rk-bar span { display: block; height: 100%; background: var(--pi-accent); border-radius: 5px; }
#panelInicio .pi-rk-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--pi-ink-2); }

@media (prefers-reduced-motion: reduce) {
  #panelInicio .pi-tarea { transition: none; }
  #panelInicio .pi-tarea:hover { transform: none; }
}