/* ============================================================================
   ESPERALOYA — dashboard.css  v6.0
   Diseño completo móvil-first + escritorio profesional
   ============================================================================ */

/* ── Header ──────────────────────────────────────────────────────────────── */
.dash-page-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dash-title {
  font-size: 26px; font-weight: 800;
  color: var(--navy); margin: 0 0 3px; letter-spacing: -.6px;
}
.dash-subtitle { font-size: 13px; color: var(--g400); margin: 0; }

/* ── Alerta caja ─────────────────────────────────────────────────────────── */
.alert-box {
  display: none; align-items: center; gap: 10px;
  background: #FFFBEB; color: #78350F;
  border: 1px solid #FDE68A; border-radius: var(--r-md);
  padding: 13px 16px; font-size: 13px; font-weight: 500;
  margin-bottom: 16px;
}
.alert-box.show { display: flex; }
.alert-box .icon-svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   MÓVIL — grid 2 columnas
   ══════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 12px;
}

.kpi-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 16px 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(226,232,240,.7);
  display: flex; align-items: center; gap: 12px;
  transition: box-shadow var(--t), transform var(--t);
}
.kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi-card--full { grid-column: 1 / -1; }

.kpi-left { flex-shrink: 0; }
.kpi-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon .icon-svg { width: 19px; height: 19px; }
.kpi-icon.blue   { background: var(--blue-light);   color: var(--blue); }
.kpi-icon.green  { background: var(--green-light);  color: var(--green); }
.kpi-icon.red    { background: var(--red-light);    color: var(--red); }
.kpi-icon.purple { background: var(--purple-light); color: var(--purple); }
.kpi-icon.orange { background: var(--orange-light); color: var(--orange); }

.kpi-body { flex: 1; min-width: 0; }
.kpi-label {
  font-size: 10px; color: var(--g400);
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; margin: 0 0 4px;
}
.kpi-value {
  font-size: 18px; font-weight: 800; margin: 0;
  color: var(--navy); letter-spacing: -.4px; line-height: 1.1;
}
.kpi-value--green  { color: var(--green); }
.kpi-value--red    { color: var(--red); }
.kpi-value--orange { color: var(--orange); }
.kpi-value--sm     { font-size: 15px; }
.kpi-card--full .kpi-value { font-size: 22px; }
.kpi-card--full .kpi-icon  { width: 46px; height: 46px; border-radius: 13px; }
.kpi-card--full .kpi-icon .icon-svg { width: 22px; height: 22px; }

/* ── Dash card ───────────────────────────────────────────────────────────── */
.dash-card {
  background: var(--white); border-radius: var(--r-md);
  padding: 20px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(226,232,240,.7); margin-bottom: 16px;
}
.dash-card h3 { font-size: 14px; margin: 0 0 14px; color: var(--navy); font-weight: 700; }

table.dash-table { width: 100%; border-collapse: collapse; font-size: 12px; }
table.dash-table th {
  text-align: left; color: var(--g400); font-weight: 700;
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  padding: 0 8px 10px 0; border-bottom: 1px solid var(--g100);
}
table.dash-table td {
  padding: 11px 8px 11px 0;
  border-bottom: 1px solid var(--g100); color: var(--g700);
}
table.dash-table tr:last-child td { border-bottom: none; }

.ver-todas-link {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g100);
  font-size: 13px; font-weight: 700; color: var(--blue);
  cursor: pointer; transition: opacity var(--t);
}
.ver-todas-link:hover { opacity: .7; }

/* ══════════════════════════════════════════════════════════════════════════
   ESCRITORIO (≥901px) — Diseño profesional completo
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  /* ── Header de escritorio ─────────────────────────────────────────────── */
  .dash-page-header { margin-bottom: 28px; }
  .dash-title { font-size: 32px; letter-spacing: -.8px; }
  .dash-subtitle { font-size: 14px; }

  /* ── Alerta ───────────────────────────────────────────────────────────── */
  .alert-box { border-radius: var(--r-md); font-size: 14px; }

  /* ── Fila 1: 4 KPIs principales en una sola fila ─────────────────────── */
  .kpi-grid--top4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 16px;
  }

  /* ── Utilidad: full width, más prominente ─────────────────────────────── */
  .kpi-card--full {
    padding: 22px 24px;
  }
  .kpi-card--full .kpi-icon  { width: 52px; height: 52px; border-radius: 14px; }
  .kpi-card--full .kpi-icon .icon-svg { width: 24px; height: 24px; }
  .kpi-card--full .kpi-value { font-size: 36px; letter-spacing: -.8px; }
  .kpi-card--full .kpi-label { font-size: 11.5px; margin-bottom: 8px; }

  /* ── Filas de 2: bancos y deuda/facturas ──────────────────────────────── */
  .kpi-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* ── Cards generales en escritorio ───────────────────────────────────── */
  .kpi-card {
    padding: 18px 20px; gap: 16px;
    border-radius: 16px;
  }
  .kpi-icon { width: 44px; height: 44px; border-radius: 12px; }
  .kpi-icon .icon-svg { width: 21px; height: 21px; }
  .kpi-label { font-size: 10.5px; margin-bottom: 6px; letter-spacing: .07em; }
  .kpi-value { font-size: 22px; }
  .kpi-value--sm { font-size: 18px; }

  /* ── Layout inferior: tabla + resumen lado a lado ─────────────────────── */
  .dash-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px; align-items: start;
  }
  .dash-card { margin-bottom: 0; }

  /* ── Tabla más refinada en desktop ───────────────────────────────────── */
  .dash-card h3 { font-size: 15px; margin-bottom: 18px; }
  table.dash-table { font-size: 13px; }
  table.dash-table th { font-size: 11px; padding-bottom: 12px; letter-spacing: .06em; }
  table.dash-table td { padding: 14px 10px 14px 0; }
}

/* ── Dash card header ────────────────────────────────────────────────────── */
.dash-card__header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
}
.dash-card__header h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.dash-card__badge {
  font-size: 11px; font-weight: 600; color: var(--blue);
  background: var(--blue-light); padding: 3px 10px;
  border-radius: 99px;
}

/* ── Panel lateral en móvil: oculto ─────────────────────────────────────── */
.dash-side-panel { display: none; }

/* ── Panel lateral en escritorio ─────────────────────────────────────────── */
@media (min-width: 901px) {

  /* Grid: tabla ocupa 1fr, panel lateral 300px fijo */
  .dash-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
  }
  .dash-card { margin-bottom: 0; }

  /* Panel lateral visible en desktop */
  .dash-side-panel { display: block; }

  .dash-side-kpi { padding: 20px; }
  .dash-side-title {
    font-size: 11px; font-weight: 700; color: var(--g400);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 14px;
  }
  .dash-side-row {
    display: flex; justify-content: space-between;
    align-items: center; padding: 9px 0;
    border-bottom: 1px solid var(--g100);
    font-size: 13px;
  }
  .dash-side-row:last-child { border-bottom: none; }
  .dash-side-row--total {
    border-top: 1px solid var(--g200);
    border-bottom: none !important;
    padding-top: 12px; margin-top: 4px;
    font-weight: 700;
  }
  .dash-side-label { color: var(--g500); font-size: 13px; }
  .dash-side-value { font-weight: 700; font-size: 14px; color: var(--navy); }

  /* Tabla más refinada en desktop */
  .dash-card__header h3 { font-size: 15px; }
  table.dash-table th { font-size: 11px; padding-bottom: 12px; letter-spacing: .06em; }
  table.dash-table td { padding: 14px 10px 14px 0; font-size: 13px; }
}