/* ============================================================
   capacitacion-programa.css
   Programa anual, charlas de 5 min, asistencia e indicadores
   (screen-cap-programa) + piezas nuevas de "Mis Cursos" del portal.
   Solo usa los tokens de css/rediseno.css, que css/tema-oscuro.css
   redefine en modo oscuro. Regla de color: fondo claro => letra oscura,
   fondo oscuro => letra clara (contraste >= 4.5:1 medido en ambos temas).
   ============================================================ */

:root {
  --cp-prog:  #2a5ec2;  /* barras "programadas"  (6.04:1 sobre #fff) */
  --cp-ejec:  #1e7a3c;  /* barras "ejecutadas"   (5.38:1 sobre #fff) */
  --cp-linea: #8a5a00;  /* línea % acumulado     (5.93:1 sobre #fff) */
}
html[data-theme="dark"] {
  --cp-prog:  #7aa7f0;  /* 6.00:1 sobre #1e293b */
  --cp-ejec:  #4ade80;  /* 8.40:1 sobre #1e293b */
  --cp-linea: #fbbf24;  /* 8.76:1 sobre #1e293b */
}

.cp-screen { background: var(--c-surface-2); color: var(--c-ink); }
.cp-wrap { padding: 16px clamp(12px, 2vw, 28px) 40px; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }

.cp-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.cp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-tab {
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line);
  border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.cp-tab[aria-selected="true"] { background: var(--c-brand-800); border-color: var(--c-brand-800); color: #fff; }

.cp-card {
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line);
  border-radius: 12px; padding: 16px; margin-bottom: 14px; box-sizing: border-box;
}
.cp-card h2, .cp-card h3 { margin: 0 0 10px; color: var(--c-ink); font-size: 16px; }
.cp-card h3 { font-size: 14px; }
.cp-card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cp-card-head h2, .cp-card-head h3 { margin: 0; }

.cp-hint { color: var(--c-ink-soft); font-size: 13px; margin: 0 0 12px; line-height: 1.45; }
.cp-dim { color: var(--c-ink-soft); font-size: 12px; }
.cp-empty { color: var(--c-ink-soft); text-align: center; padding: 16px !important; }

.cp-filtros, .cp-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 12px; }
.cp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c-ink-soft); min-width: 0; }
.cp-field-inline { flex-direction: row; align-items: center; gap: 8px; }
.cp-field-wide { grid-column: span 2; }
.cp-field-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .cp-field-wide { grid-column: 1 / -1; } }
.cp-field input, .cp-field select, .cp-field textarea, .cp-buscar, .cp-puestos-tools input,
.cp-tabla input, .cp-tabla select {
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line);
  border-radius: 8px; padding: 7px 9px; font-size: 14px; min-height: 36px; box-sizing: border-box; max-width: 100%;
}
.cp-field textarea { resize: vertical; font-family: inherit; }
.cp-buscar { margin-bottom: 8px; width: 100%; max-width: 320px; }

.cp-btn {
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line);
  border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 38px;
}
.cp-btn:hover { background: var(--c-surface-3); }
.cp-btn-primary { background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff; }
.cp-btn-primary:hover { background: var(--c-brand-700); }
.cp-btn-sm { padding: 5px 10px; min-height: 32px; font-size: 12px; }
.cp-btn:disabled { opacity: .6; cursor: default; }
.cp-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.cp-msg { font-size: 13px; font-weight: 600; color: var(--c-ink-soft); }
.cp-msg-ok  { color: var(--c-success); }
.cp-msg-err { color: var(--c-danger); }

.cp-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-tabla th {
  background: var(--c-brand-800); color: #fff; text-align: left; padding: 8px; white-space: nowrap; font-weight: 600;
}
.cp-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--c-line); color: var(--c-ink); vertical-align: middle; }
.cp-tabla tr:nth-child(even) td { background: var(--c-surface-2); }
.cp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Chips de estado: pares token texto/fondo pensados para ambos temas */
.cp-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.cp-chip-ok   { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); }
.cp-chip-warn { background: var(--c-warning-bg); color: var(--c-ink);     border-color: var(--c-warning); }
.cp-chip-bad  { background: var(--c-danger-bg);  color: var(--c-danger);  border-color: var(--c-danger); }
.cp-chip-info { background: var(--c-brand-100);  color: var(--c-ink);     border-color: var(--c-brand-300); }

.cp-puestos { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px; margin: 0; }
.cp-puestos legend, .cp-dias legend { font-size: 12px; font-weight: 700; color: var(--c-ink-soft); padding: 0 4px; }
.cp-puestos-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.cp-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 260px; overflow: auto; }
.cp-checklist label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--c-ink); padding: 3px 0; }
.cp-checklist input { width: 18px; height: 18px; flex: none; }
.cp-dias { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cp-dias label { font-size: 13px; color: var(--c-ink); display: flex; gap: 4px; align-items: center; }

.cp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cp-kpi { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; }
.cp-kpi-num { display: block; font-size: 22px; font-weight: 800; color: var(--c-ink); }
.cp-kpi-lbl { display: block; font-size: 12px; color: var(--c-ink-soft); }
.cp-chart-box { position: relative; height: 280px; max-width: 100%; }

/* ─── Portal: Mis Cursos (instructor) ─── */
.cp-grupo { margin: 12px 0 6px; font-size: 13px; font-weight: 800; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.cp-curso-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.cp-curso-acc input[type="date"] { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 8px; padding: 6px 8px; min-height: 36px; }
.cp-sel-asis { min-width: 128px; }
@media (max-width: 640px) {
  .cp-tabla { font-size: 14px; }
  .cp-sel-asis { min-height: 44px; font-size: 15px; }
}