/* ==========================================================================
   Maderatti Hub — Dashboard (HUB_SPEC §7.3 / §7.4 / §7.5)

   Estilos específicos de las secciones del dashboard M3:
     - KPIs (4 cards)
     - Acciones rápidas (4 botones)
     - Feed de alertas (lista compacta con scroll interno)
     - Placeholder de Proyectos (M4)

   Los tokens y primitivas base (card, btn, badge) viven en tokens.css /
   app.css. Acá solo las piezas específicas del dashboard.
   ========================================================================== */

/* ---------- Secciones ---------- */

.dash-section {
  margin: 32px 0;
}

.dash-section-title {
  font-size: var(--md-fs-label);
  color: var(--md-text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 12px;
  font-weight: 500;
}

/* ---------- KPIs (spec 7.3) ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.kpi-card .kpi-label {
  color: var(--md-text-muted);
  font-size: var(--md-fs-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.kpi-card .kpi-value {
  font-size: var(--md-fs-kpi);
  font-weight: 700;
  color: var(--md-text);
  line-height: 1.1;
}

/* Cuotas vencidas > 0 se pinta en rojo (spec 7.3) */
.kpi-card .kpi-value.alert {
  color: var(--md-danger);
}

/* ---------- Acciones rápidas (spec 7.4) ---------- */

.acciones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.accion-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background: var(--md-bg);
  border: 0.5px solid var(--md-border-subtle);
  border-radius: var(--md-radius-card);
  padding: var(--md-pad-card);
  color: inherit;
  transition: border-color var(--md-transition), background var(--md-transition);
  min-height: 92px;
}

.accion-card:hover {
  border-color: var(--md-gold);
  background: var(--md-surface);
}

.accion-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--md-text);
  font-size: var(--md-fs-body);
  font-weight: 500;
}

.accion-label .accion-arrow {
  color: var(--md-gold);
  font-size: 14px;
}

.accion-sub {
  color: var(--md-text-muted);
  font-size: var(--md-fs-label);
}

/* ---------- Feed de alertas (spec 7.5) ---------- */

.alertas-card {
  padding: 0; /* el contenido interno maneja padding propio */
}

.alertas-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px;
  border-bottom: 1px solid var(--md-border-subtle);
}

.alertas-header-title {
  font-size: var(--md-fs-h3);
  font-weight: 500;
}

.alertas-count {
  color: var(--md-text-muted);
  font-size: var(--md-fs-label);
}

.alertas-list {
  max-height: 360px; /* ~10 filas antes de scroll (spec 7.5) */
  overflow-y: auto;
}

.alertas-empty {
  color: var(--md-text-muted);
  font-size: var(--md-fs-body);
  text-align: center;
  padding: 28px 16px;
  font-style: italic;
}

.alerta-row {
  display: grid;
  grid-template-columns: 10px 100px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--md-border-subtle);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--md-transition);
}
.alerta-row:last-child { border-bottom: none; }
.alerta-row:hover,
.alerta-row:focus-visible {
  background: rgba(201, 168, 76, .04);
  outline: none;
}

.alerta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.alerta-dot.nivel-rojo  { background: var(--md-danger); }
.alerta-dot.nivel-ambar { background: var(--md-warn); }
.alerta-dot.nivel-azul  { background: var(--md-info); }

.alerta-cot {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--md-gold);
  font-size: 12px;
}

.alerta-desc {
  color: var(--md-text);
}

.alerta-origen {
  color: var(--md-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.alertas-footer {
  padding: 10px 16px;
  text-align: center;
  color: var(--md-text-muted);
  font-size: 11px;
  border-top: 1px solid var(--md-border-subtle);
}

/* ---------- Placeholder de Proyectos (M4) ---------- */

.proyectos-placeholder {
  padding: 72px 16px;
  text-align: center;
  color: var(--md-text-muted);
  font-size: var(--md-fs-body);
  font-style: italic;
}

/* ---------- Error en dashboard ---------- */

.dash-error {
  background: var(--md-danger-bg);
  color: var(--md-danger);
  padding: 14px 16px;
  border-radius: var(--md-radius-card);
  font-size: 13px;
  margin-bottom: 24px;
}

/* ---------- Responsivo ---------- */

@media (max-width: 960px) {
  .kpi-grid, .acciones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .kpi-grid, .acciones-grid {
    grid-template-columns: 1fr;
  }
  .alerta-row {
    grid-template-columns: 10px 1fr;
    grid-template-areas:
      "dot cot"
      "dot desc"
      "dot origen";
    gap: 2px 12px;
  }
  .alerta-cot    { grid-area: cot; }
  .alerta-desc   { grid-area: desc; }
  .alerta-origen { grid-area: origen; }
}