/* ================================================
 * TRACKR — Vista Info / Dashboard
 * Stats, actividad reciente, deadlines, financiero
 * Dependencias: variables.css
 * ================================================ */

/* ── CTA (sin proyectos) ── */
.info-cta{
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:1.5rem;
  margin-bottom:2rem;
}
.info-cta-text{
  color:var(--t2);
  font-size:.88rem;
  margin-bottom:1rem;
  line-height:1.5;
}
.info-cta-actions{
  display:flex;
  gap:.75rem;
}

/* ── Example cards (empty state) ── */
.info-examples{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--b1);
}
.info-examples-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--t3);
  margin-bottom:.75rem;
}
.info-examples-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
}
.info-example-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding:1rem .75rem;
  background:var(--bg3);
  border:1px solid var(--b1);
  border-radius:var(--r);
  cursor:pointer;
  transition:all var(--tr);
  text-align:center;
}
.info-example-card:hover{
  border-color:var(--b2);
  transform:translateY(-2px);
  box-shadow:0 4px 12px color-mix(in srgb,var(--bg) 40%,transparent);
}
.info-example-icon{
  font-size:1.5rem;
  line-height:1;
}
.info-example-name{
  font-size:.88rem;
  font-weight:600;
  color:var(--t1);
}
.info-example-desc{
  font-size:.72rem;
  color:var(--t3);
  line-height:1.3;
}
.info-example-lang{
  font-size:.6rem;
  font-weight:700;
  color:var(--t3);
  background:var(--bg2);
  padding:.1rem .35rem;
  border-radius:3px;
  letter-spacing:.05em;
}

/* ── Stats cards (4-col grid) ── */
.info-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
  margin-bottom:1.5rem;
}
.info-stat-card{
  background:var(--bg2);
  border:1px solid var(--b1);
  border-top:2px solid var(--stat-accent,var(--b1));
  border-radius:var(--r);
  padding:1rem;
  cursor:pointer;
  transition:border-color var(--tr);
}
.info-stat-card:hover{border-color:var(--b2)}
.info-stat-val{
  font-family:'DM Mono',monospace;
  font-size:1.3rem;
  font-weight:500;
  color:var(--t1);
  margin-bottom:.25rem;
}
.info-stat-val small{
  font-size:.75rem;
  font-weight:400;
  color:var(--t2);
  margin-left:.1rem;
}
.info-stat-lbl{
  font-size:.72rem;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.info-stat-alert{border-color:var(--warn)}
.info-stat-alert .info-stat-val{color:var(--warn)}

/* ── Sections (actividad, deadlines) ── */
.info-section{
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:1.1rem;
  margin-bottom:1.25rem;
}
.info-section-title{
  font-size:.72rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--t3);
  margin-bottom:.75rem;
}
.info-act-sep{
  height:1px;
  background:var(--b1);
  margin:.35rem 0;
}

/* ── Deadlines badges ── */
.info-dl-badge{
  font-family:'DM Mono',monospace;
  font-size:.72rem;
  font-weight:500;
  min-width:65px;
  text-align:center;
}
.info-dl-overdue .info-dl-badge{color:var(--bad)}
.info-dl-soon .info-dl-badge{color:var(--warn)}
.info-dl-ok .info-dl-badge{color:var(--t3)}

/* ── Quick actions ── */
.info-quick{
  display:flex;
  gap:.35rem;
  margin-bottom:1.5rem;
}
.info-quick .bt{
  font-size:.72rem;
  padding:.3rem .7rem;
  border:none;
  background:transparent;
  color:var(--t3);
  opacity:.7;
  transition:all var(--tr);
}
.info-quick .bt:hover{opacity:1;color:var(--t2);background:var(--bg3)}
.info-quick .bt-p{color:var(--t2);opacity:.85;background:transparent;border:1px solid var(--b1)}
.info-quick .bt-p:hover{opacity:1;border-color:var(--b2);background:var(--bg3)}

/* ── Resumen financiero en Info ── */
.info-fin{
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:1.25rem;
  margin-bottom:2rem;
}
.info-fin-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1rem;
}
.info-fin-title{
  font-size:.72rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--t3);
}
.info-fin-toggle{
  margin-left:auto;
  display:flex;
  gap:2px;
}
.info-fin-tb{
  padding:.25rem .5rem;
  border:1px solid var(--b1);
  border-radius:var(--r);
  background:transparent;
  color:var(--t3);
  font-family:'Outfit',sans-serif;
  font-size:.72rem;
  cursor:pointer;
  transition:all var(--tr);
}
.info-fin-tb:hover{border-color:var(--b2);color:var(--t1)}
.info-fin-tb.on{border-color:var(--t2);color:var(--t1)}

.info-fin-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.75rem;
  margin-top:1rem;
  padding-top:.75rem;
  border-top:1px solid var(--b1);
}

/* ── Responsive ── */
@media(max-width:768px){
  .info-stats{grid-template-columns:repeat(2,1fr)}
  .info-quick{flex-wrap:wrap}
  .info-examples-grid{grid-template-columns:1fr}
  .info-fin{overflow:hidden}
  .info-fin-header{flex-wrap:wrap}
  .info-fin-toggle{margin-left:0}
}
@media(max-width:480px){
  .info-stats{grid-template-columns:1fr 1fr}
  .info-stat-val{font-size:1.1rem}
}