/* ================================================
 * TRACKR — Calendario (mensual + semanal)
 * Grid de días, entradas de horas, navegación, timeline
 * Dependencias: variables.css
 * ================================================ */

/* ── Header: navegación de mes/semana ── */
.cal-hd{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
}
.cal-title{
  font-size:1.1rem;
  font-weight:500;
  margin:0 .5rem;
  min-width:160px;
  text-align:center;
}

/* ── Toggle vista Mes/Semana ── */
.cal-vt{
  display:flex;
  gap:2px;
}
.cal-vb{
  padding:.35rem .7rem;
  border:1px solid var(--b1);
  border-radius:var(--r);
  background:transparent;
  color:var(--t3);
  font-family:'Outfit',sans-serif;
  font-size:.78rem;
  cursor:pointer;
  transition:all var(--tr);
}
.cal-vb:hover{border-color:var(--b2);color:var(--t1)}
.cal-vb.on{border-color:var(--t2);color:var(--t1)}

/* ── Stat: total del periodo ── */
.cal-stat{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  font-size:.82rem;
  color:var(--t3);
}

/* ══════════════════════════════════════
 *  VISTA MENSUAL
 * ══════════════════════════════════════ */

/* ── Grid 7 columnas ── */
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
  background:var(--b1);
  border:1px solid var(--b1);
  border-radius:var(--r);
  overflow:hidden;
}

/* ── Headers día de la semana ── */
.cal-dow{
  background:var(--bg2);
  padding:.4rem;
  text-align:center;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--t3);
  min-width:0;
  overflow:hidden;
}

/* ── Celda de día ── */
.cal-day{
  background:var(--bg2);
  min-height:90px;
  min-width:0;
  padding:.4rem;
  cursor:pointer;
  transition:background var(--tr);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.cal-day:hover{background:var(--bg3)}

/* Fuera del mes actual */
.cal-day.out{opacity:.3}

/* Número del día */
.cal-num{
  font-family:'DM Mono',monospace;
  font-size:.75rem;
  color:var(--t2);
  margin-bottom:.3rem;
}

/* Hoy: círculo invertido en el número */
.cal-day.today .cal-num{
  background:var(--t1);
  color:var(--bg);
  border-radius:50%;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ── Entrada de hora dentro de celda mensual ── */
.cal-entry{
  font-size:.68rem;
  padding:.15rem .3rem;
  border-left:2px solid var(--b2);
  margin-bottom:2px;
  border-radius:0 var(--r) var(--r) 0;
  background:var(--bg3);
  display:flex;
  gap:.3rem;
  align-items:center;
  overflow:hidden;
  white-space:nowrap;
}
.cal-e-ico{
  font-size:.6rem;
  flex-shrink:0;
}
.cal-e-h{
  font-weight:500;
  flex-shrink:0;
  color:var(--t1);
}
.cal-e-p{
  color:var(--t2);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Gasto dentro de celda mensual */
.cal-entry-gasto .cal-e-ico{
  color:var(--warn);
}
.cal-entry-gasto .cal-e-h{
  font-size:.62rem;
}

/* ══════════════════════════════════════
 *  VISTA SEMANAL
 * ══════════════════════════════════════ */

.cal-week{
  border:1px solid var(--b1);
  border-radius:var(--r);
}

/* Header: esquina + 7 días */
.cal-week-hdr{
  display:grid;
  grid-template-columns:50px repeat(7,1fr);
  gap:1px;
  background:var(--b1);
  position:sticky;
  top:0;
  z-index:5;
}
.cal-wc{background:var(--bg2)} /* esquina vacía */
.cal-wh{
  background:var(--bg2);
  padding:.5rem .25rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
}
.cal-wh-dow{
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--t3);
}
.cal-wh-num{
  font-family:'DM Mono',monospace;
  font-size:.85rem;
  color:var(--t2);
}
.cal-wh.today .cal-wh-num{
  background:var(--t1);
  color:var(--bg);
  border-radius:50%;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Body: columna etiquetas + 7 columnas día */
.cal-week-body{
  display:grid;
  grid-template-columns:50px repeat(7,1fr);
  gap:1px;
  background:var(--b1);
}

/* Columna de etiquetas de hora (izquierda) */
.cal-week-tl{
  display:flex;
  flex-direction:column;
}
.cal-tl{
  background:var(--bg2);
  height:var(--slot-h,60px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:.25rem;
  font-family:'DM Mono',monospace;
  font-size:.65rem;
  color:var(--t3);
  flex-shrink:0;
}

/* Columna de día (slots + eventos) */
.cal-wcol{
  position:relative;
  display:flex;
  flex-direction:column;
}

/* Celda slot vacía (30 min = mitad del slot horario) */
.cal-slot{
  background:var(--bg2);
  height:calc(var(--slot-h,60px) / 2);
  cursor:pointer;
  transition:background var(--tr);
  flex-shrink:0;
}
.cal-slot:hover{background:var(--bg3)}

/* Evento posicionado */
.cal-evt{
  position:absolute;
  left:2px;
  right:2px;
  border-left:3px solid var(--ec,var(--b2));
  background:color-mix(in srgb, var(--ec,var(--b2)) 15%, var(--bg2));
  border-radius:0 var(--r) var(--r) 0;
  padding:.2rem .35rem;
  overflow:hidden;
  cursor:pointer;
  pointer-events:auto;
  transition:background var(--tr);
  display:flex;
  flex-direction:column;
  gap:.1rem;
  z-index:1;
}
.cal-evt:hover{
  background:color-mix(in srgb, var(--ec,var(--b2)) 25%, var(--bg2));
}
.cal-evt-t{
  font-family:'DM Mono',monospace;
  font-size:.68rem;
  font-weight:500;
  color:var(--t1);
}
.cal-evt-n{
  font-size:.62rem;
  color:var(--t2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Eventos cortos (≤0.5h): nombre inline a la derecha del tiempo */
.cal-evt.cal-evt-sm{
  flex-direction:row;
  align-items:center;
  gap:.35rem;
}
.cal-evt.cal-evt-sm .cal-evt-t{
  flex-shrink:0;
}
.cal-evt.cal-evt-sm .cal-evt-n{
  min-width:0;
  flex:1;
}

/* Drag preview al crear hora */
.cal-drag-pv{
  position:absolute;
  left:2px;
  right:2px;
  background:color-mix(in srgb,var(--t2) 18%,transparent);
  border-left:3px solid var(--t2);
  border-radius:0 var(--r) var(--r) 0;
  pointer-events:none;
  z-index:2;
  transition:height .05s ease;
}

/* Sección "sin hora asignada" debajo del grid semanal */
.cal-nt{
  margin-top:1rem;
}
.cal-nt-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--t3);
  margin-bottom:.5rem;
}

/* Estadísticas de proyectos del periodo */
.cal-ps{margin-top:1.25rem}
.cal-ps-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--t3);
  margin-bottom:.5rem;
}
.cal-ps-list{display:flex;flex-wrap:wrap;gap:.5rem}
.cal-ps-item{
  display:flex;
  align-items:center;
  gap:.4rem;
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:.35rem .65rem;
  font-size:.78rem;
}
.cal-ps-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cal-ps-click{cursor:pointer;transition:all var(--tr)}
.cal-ps-click:hover{border-color:var(--b2);background:var(--bg3)}
.cal-ps-name{color:var(--t2)}
.cal-ps-h{color:var(--t1);font-size:.72rem}

/* ── Weekly segmented bar (objetivos mes) ── */
.cal-wseg{display:flex;gap:2px}
.cal-wseg-item{display:flex;flex-direction:column;align-items:center;min-width:0}
.cal-wseg-bar{width:100%;height:8px;border-radius:4px;background:var(--bg3);position:relative;overflow:hidden}
.cal-wseg-fill{position:absolute;left:0;top:0;height:100%;background:var(--t2);border-radius:4px;transition:width .3s ease}
.cal-wseg-lbl{font-size:.58rem;color:var(--t3);margin-top:2px;white-space:nowrap}

/* ══════════════════════════════════════
 *  MOBILE WEEK (stacked day list)
 * ══════════════════════════════════════ */

/* Hidden on desktop, shown on mobile via responsive.css */
.cal-week-mobile{display:none}

.cal-mday{
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:.6rem .75rem;
  margin-bottom:.4rem;
  cursor:pointer;
  transition:background var(--tr);
}
.cal-mday:hover{background:var(--bg3)}
.cal-mday.today{border-color:var(--t2)}
.cal-mday-hdr{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.25rem;
}
.cal-mday-dow{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--t3);
  min-width:28px;
}
.cal-mday-num{
  font-family:'DM Mono',monospace;
  font-size:.9rem;
  color:var(--t1);
}
.cal-mday.today .cal-mday-num{
  background:var(--t1);
  color:var(--bg);
  border-radius:50%;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cal-mday-total{
  margin-left:auto;
  font-size:.78rem;
  color:var(--t2);
}
.cal-mday-entries{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:.3rem;
}
.cal-mday-entry{
  font-size:.75rem;
  padding:.2rem .4rem;
  border-left:2px solid var(--b2);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--bg3);
  display:flex;
  gap:.4rem;
  align-items:center;
}
.cal-mday-pn{
  color:var(--t2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.cal-mday-time{
  font-family:'DM Mono',monospace;
  font-size:.68rem;
  color:var(--t3);
  flex-shrink:0;
}