/*
 * css/components/calendar.css — Popup de actividad diaria (heatmap) y grilla de calendario (la reusa el calendario multi-capa).
 *
 * 12-oct, fase 3 del kit de estilo: extraído del <style> de index.html (mismas reglas). El orden
 * de carga (index.html) es base -> components -> views; la verificación comparó los estilos
 * calculados de toda la página antes y después.
 */

/* Popup de actividad diaria (heatmap-calendario) */
.cal-overlay {
  position: fixed; inset: 0; background: rgba(10, 14, 20, 0.5); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px;
  overflow-y: auto;
}
.cal-overlay[hidden] { display: none; }
.cal-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); max-width: 980px; width: 100%;
  padding: 20px; --lc: var(--accent); --lbg: var(--accent-dim);
}
.cal-panel.bronze { --lc: var(--bronze); --lbg: var(--bronze-bg); }
.cal-panel.silver { --lc: var(--silver); --lbg: var(--silver-bg); }
.cal-panel.gold   { --lc: var(--gold);   --lbg: var(--gold-bg); }
.cal-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cal-panel-head h3 { margin: 0; font-size: 1.1rem; color: var(--lc); }
.cal-close-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  border-radius: 7px; width: 30px; height: 30px; font-size: 1rem; cursor: pointer; line-height: 1;
}
.cal-close-btn:hover { color: var(--text); }
.cal-sub { color: var(--text-dim); font-size: 0.8rem; margin-bottom: 14px; }
.cal-months {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 22px;
}
.cal-month .cal-month-label { font-size: 0.78rem; font-weight: 700; color: var(--text); margin-bottom: 6px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-wd { font-size: 0.6rem; color: var(--text-dim); text-align: center; }
.cal-cell { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.cal-cell.pad { background: transparent; }
.cal-cell[data-level="1"] { background: color-mix(in srgb, var(--lc) 25%, var(--lbg)); }
.cal-cell[data-level="2"] { background: color-mix(in srgb, var(--lc) 50%, var(--lbg)); }
.cal-cell[data-level="3"] { background: color-mix(in srgb, var(--lc) 75%, var(--lbg)); }
.cal-cell[data-level="4"] { background: var(--lc); }
.cal-cell[title] { cursor: default; }
.cal-legend { display: flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--text-dim); font-size: 0.75rem; }
.cal-legend .cal-cell { width: 11px; height: 11px; flex: none; }
.cal-empty, .cal-loading, .cal-err { color: var(--text-dim); font-size: 0.85rem; padding: 20px 4px; }
.cal-err { color: var(--err); }