/* ============================================================
   DANGOFE OS — Estadísticas y reportes (Fase 3C.4.1)
   Panel ejecutivo con pestañas, tarjetas KPI comparadas,
   gráficas Chart.js, drill-down y reportes exportables.
   Respeta tema claro/oscuro y responsive 1920→360.
   ============================================================ */

.est-vista { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Encabezado, rango y acciones ---------- */
.est-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.est-head h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.est-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }
.est-rango { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.est-head-acciones { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.est-btn,
.est-btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.est-btn {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-border);
  color: var(--action-primary-text);
}
.est-btn:hover,
.est-btn-sec:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.est-btn:focus-visible,
.est-btn-sec:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.est-btn[disabled],
.est-btn-sec[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.est-btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.est-btn-mini:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* ---------- Pestañas ---------- */
.est-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-border);
}
.est-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.est-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.est-tab.activa {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.est-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Contenido general ---------- */
.est-contenido { display: flex; flex-direction: column; gap: var(--space-4); }
.est-muted { color: var(--text-muted); font-size: var(--fs-sm); }
.est-error { color: var(--color-danger); font-size: var(--fs-sm); }
.est-ok { color: var(--color-success); font-size: var(--fs-sm); }

/* ---------- Tarjetas KPI (Resumen ejecutivo) ---------- */
.est-resumen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.est-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.est-card {
  position: relative;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.est-card:hover,
.est-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  outline: none;
}
.est-card:focus-visible { border-color: var(--accent); }
.est-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.est-card-titulo {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  font-weight: 600;
}
.est-card-valor {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.est-card-hero { border-width: 2px; }
/* Fase 3D.1 — distribución del resumen: fila 1 (2 destacadas) y fila 2 (5). */
.est-kpis-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-3); }
.est-kpis-fila2 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.est-card-hero .est-card-valor { font-size: var(--fs-2xl); }
.est-card-cmp { font-size: var(--fs-xs); color: var(--text-muted); }
.est-card-cmp b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Estado del indicador respecto al período anterior */
.est-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.est-favorable .est-badge,
.est-badge.est-favorable {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.est-desfavorable .est-badge,
.est-badge.est-desfavorable {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.est-estable .est-badge,
.est-badge.est-estable {
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

/* Meta mensual dentro de la tarjeta */
.est-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.est-meta-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-hover);
  overflow: hidden;
  margin-top: 4px;
}
.est-meta-barra > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.est-meta-barra > i.est-meta-ok { background: var(--color-success); }
.est-meta-barra > i.est-meta-mal { background: var(--color-danger); }

/* Mini-gráfica de tendencia (sparkline SVG) */
.est-spark { width: 100%; height: 34px; display: block; margin-top: 2px; }
.est-spark polyline { fill: none; stroke-width: 2; stroke: var(--accent); }
.est-spark-bien polyline { stroke: var(--color-success); }
.est-spark-mal polyline { stroke: var(--color-danger); }

/* ---------- Paneles de gráficas ---------- */
.est-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.est-panel {
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.est-panel[data-detalle] { cursor: pointer; }
.est-panel[data-detalle]:hover { box-shadow: var(--shadow-card); }
.est-panel-ancho { grid-column: 1 / -1; }
.est-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.est-panel-head h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}
.est-panel-acciones { display: flex; align-items: center; gap: 6px; }
.est-panel-cuerpo { min-width: 0; }
.est-chart-wrap { position: relative; height: 280px; min-width: 0; }
.est-chart-wrap canvas { max-width: 100%; }
.est-tabla-alt { max-height: 300px; overflow-y: auto; }
.est-panel-nota { font-size: var(--fs-xs); color: var(--text-muted); }

/* Panel de cifras (totales, ITBIS, inventario) */
.est-cifras {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.est-cifras > div {
  flex: 1 1 140px;
  min-width: 130px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.est-cifras > div[role="button"] { cursor: pointer; }
.est-cifras > div[role="button"]:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.est-cifras span { font-size: var(--fs-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.est-cifras b { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.est-cifras small { font-size: var(--fs-xs); color: var(--text-muted); }
.est-cifra-total { border-color: var(--accent) !important; }
.est-cifra-total b { color: var(--accent); }

.est-export-botones { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Tablas ---------- */
.est-tabla-wrap { overflow-x: auto; border-radius: var(--radius-md); }
.est-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.est-tabla th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 1;
}
.est-tabla td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.est-tabla tbody tr:hover { background: var(--bg-hover); }
.est-num,
.est-tabla th.est-num,
.est-tabla td.est-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Modal (drill-down y formularios) ---------- */
.est-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(10, 12, 18, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.est-modal {
  width: min(860px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.est-modal-form .est-modal { width: min(520px, 100%); }
.est-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.est-modal-head h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.est-modal-cerrar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.est-modal-cerrar:hover { color: var(--text-primary); border-color: var(--border-strong); }
.est-modal-body { overflow-y: auto; min-height: 80px; }
.est-det-pie { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* ---------- Formularios (correo, metas, filtros) ---------- */
.est-form { display: flex; flex-direction: column; gap: var(--space-2); }
.est-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 600;
}
.est-form input,
.est-form textarea {
  font: inherit;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.est-form input:focus,
.est-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.est-form-acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.est-form-msj { font-size: var(--fs-sm); min-height: 1.2em; }

/* Filtros guardados */
.est-filtros { display: flex; flex-direction: column; gap: var(--space-2); }
.est-filtros-lista { display: flex; flex-direction: column; gap: 6px; }
.est-filtros-lista > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.est-filtros-lista b { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); }
.est-fechas { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.est-filtro-aplicar,
.est-filtro-borrar,
.est-filtro-guardar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.est-filtro-aplicar:hover { color: var(--color-success); border-color: var(--color-success); }
.est-filtro-borrar:hover { color: var(--color-danger); border-color: var(--color-danger); }
.est-filtro-guardar { align-self: flex-start; padding: 8px 14px; font-size: var(--fs-sm); font-weight: 600; }
.est-filtro-guardar:hover { color: var(--text-primary); border-color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .est-grid { grid-template-columns: 1fr; }
  .est-kpis-fila2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .est-kpis, .est-kpis-fila2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est-chart-wrap { height: 240px; }
  .est-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 640px) {
  .est-head { flex-direction: column; align-items: stretch; }
  .est-kpis, .est-kpis-hero, .est-kpis-fila2 { grid-template-columns: 1fr; }
  .est-chart-wrap { height: 210px; }
  .est-cifras > div { flex-basis: 100%; }
  .est-modal-overlay { padding: var(--space-2); }
  .est-modal { max-height: 92vh; padding: var(--space-3); }
  .est-filtros-lista > div { flex-wrap: wrap; }
}


/* ------------------------------------------------------------
   Fase 3D.1 · Resumen: parte inferior y alertas ejecutivas
   ------------------------------------------------------------ */
.est-resumen-inferior { margin-top: var(--space-4); }
.est-panel-alertas { padding-bottom: var(--space-3); }
.est-alertas-vacio { padding: var(--space-4); }
.est-alertas {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.est-alerta {
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--color-warning, #ff9f0a);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.est-alerta:hover, .est-alerta:focus-visible { background: var(--bg-hover); border-color: var(--border-strong); }
.est-alerta-critico { border-left-color: var(--color-danger, #ff453a); }
.est-alerta-cab { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.est-alerta-cab b { color: var(--text-primary); font-size: var(--fs-sm); }
.est-alerta-n {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.est-alerta-m { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.est-alerta-desc { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }