/* ============================================================
   DANGOFE OS LIQUID V2 — dashboard.css
   Estructura del dashboard: hero, tarjetas de estadística,
   gráfica, gauge, panel derecho, paneles inferiores
   ============================================================ */

/* ------------------------------------------------------------
   1. GRID GENERAL DEL DASHBOARD
   Columnas: contenido principal (fluido) + panel derecho fijo
   ------------------------------------------------------------ */
.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-3);
  align-items: start;
}

.dashboard__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* ------------------------------------------------------------
   2. HERO (bienvenida + búsqueda + acciones)
   ------------------------------------------------------------ */
.hero {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-5);
  text-align: center;
}
.hero__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.hero__date {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin-top: -10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Fase 3C.1 — En claro el saludo y la fecha se leen en NEGRO */
[data-theme='light'] .hero__title {
  color: #16181d;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}
[data-theme='light'] .hero__date {
  color: rgba(22, 24, 29, 0.78);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.hero__actions .search-bar {
  width: min(300px, 70vw);
}

/* ------------------------------------------------------------
   3. TARJETAS DE ESTADÍSTICA (fila 1)
   ------------------------------------------------------------ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.stat-card {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 118px;
}
.stat-card__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stat-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.stat-card__value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.stat-card__spark {
  width: 90px;
  height: 36px;
  flex-shrink: 0;
}
.stat-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

/* Mini tarjetas secundarias (Pendiente, ITBIS, Proyectos) */
.stat-row--mini {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-mini {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 62px;
}
.stat-mini__name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stat-mini__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   4. FILA GRÁFICA + GAUGE
   ------------------------------------------------------------ */
.chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.panel {
  padding: var(--space-4);
}
.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.panel__title {
  font-size: var(--fs-md);
  font-weight: 600;
}
.panel__legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.panel__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.panel__legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.chart-wrap {
  position: relative;
  height: 220px;
}
.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ------------------------------------------------------------
   5. GAUGE SALUD FINANCIERA
   ------------------------------------------------------------ */
.gauge-panel {
  display: flex;
  flex-direction: column;
}
.gauge-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
}
.gauge-wrap svg {
  width: min(230px, 100%);
  height: auto;
}
.gauge-value {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.gauge-value strong {
  font-size: var(--fs-3xl);
  font-weight: 700;
  display: block;
  line-height: 1;
}
.gauge-value small {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}
.gauge-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}
.gauge-legend span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gauge-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.gauge-legend b {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.gauge-panel .btn {
  align-self: center;
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------
   6. PANELES INFERIORES (Top Clientes, Servicios, Actividad)
   ------------------------------------------------------------ */
.bottom-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.list-item:last-child {
  border-bottom: none;
}
.list-item__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.list-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  color: var(--accent);
}
.list-item__icon svg {
  width: 16px;
  height: 16px;
}
.list-item__text {
  min-width: 0;
}
.list-item__text strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item__text small {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.list-item__value {
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   7. PANEL DERECHO (agenda / calendario / novedades)
   ------------------------------------------------------------ */
.right-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  min-width: 0;
}

.right-panel__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Cabecera de mes */
.calendar__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.calendar__month .btn--icon {
  width: 30px;
  min-height: 30px;
}
.calendar__month .btn--icon svg {
  width: 14px;
  height: 14px;
}

/* Franja de días */
.calendar__days {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}
.calendar__day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--space-2) 0;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  transition: background var(--t-fast);
}
.calendar__day b {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 600;
}
.calendar__day:hover {
  background: var(--bg-hover);
}
/* Fase 3C.1: día activo neutro por tema (sin naranja fijo) */
.calendar__day.is-active {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.28);
}
.calendar__day.is-active b {
  color: var(--action-primary-text);
}

/* Tarjetas de agenda / actividad */
.agenda-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.agenda-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.agenda-card__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-card__time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--lava-yellow);
  white-space: nowrap;
}
.agenda-card__time svg {
  width: 12px;
  height: 12px;
}
.agenda-card__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.agenda-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-1);
}

.right-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  max-height: 560px;
  padding-right: 2px;
}

/* Cobros vencidos: acento rojo */
.agenda-card--danger {
  border-left: 3px solid var(--color-danger);
}



/* ------------------------------------------------------------
   9. FASE 1B — calendario funcional, gauge y estados vacíos
   ------------------------------------------------------------ */

/* Punto indicador de eventos en el día */
.calendar__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.calendar__dot--empty {
  background: transparent;
}
.calendar__day.is-active .calendar__dot {
  background: var(--action-primary-text);
}

/* Día de hoy (cuando no está seleccionado) */
.calendar__day.is-today:not(.is-active) b {
  color: var(--accent);
}

/* Estado vacío de las listas del panel derecho */
.right-panel__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Botón (i) del gauge y su popover */
.gauge-panel .panel__header .btn--icon {
  width: 30px;
  min-height: 30px;
}
.gauge-wrap .info-popover {
  top: 8px;
  right: 0;
}


/* ----------------------------------------------------------
   Señalización del origen de datos por widget (Fase 2B.1)
   Aditivo: no altera el diseño existente. Solo aparece cuando
   el Dashboard usa datos demo o hay un error de carga real.
   ---------------------------------------------------------- */
[data-widget] {
  position: relative;
}

/* Insignia discreta "DEMO" (modo demostración) */
.widget-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1205;
  background: var(--color-warning); /* Fase 3C.1: insignia = advertencia */
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
/* En filas de tarjetas la insignia se separa del borde superior */
.stat-row .widget-badge,
.stat-row--mini .widget-badge {
  top: -8px;
}
/* Fase 3E.1: los widgets con datos de demostración se señalan SOLO con la
   etiqueta «DEMO» (.widget-badge); se elimina el contorno punteado. */
.widget--demo {
  border-radius: var(--radius-sm);
}

/* Aviso de error (producción sin datos reales disponibles) */
.widget-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--color-danger);
  background: rgba(255, 90, 78, 0.10);
  border: 1px solid rgba(255, 90, 78, 0.30);
  border-radius: var(--radius-sm);
}
.widget-error svg {
  flex: 0 0 auto;
}
.widget--error {
  outline: 1px solid rgba(255, 90, 78, 0.25);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}



/* ------------------------------------------------------------
   Fase 3A.3 — Búsqueda global del hero, menú de período,
   subtítulo del modal de rendimiento.
   ------------------------------------------------------------ */

/* Popover de resultados de la búsqueda global (posición fija vía JS). */
.hero-search-pop {
  position: fixed;
  z-index: 900;
  display: none;
  max-height: 340px;
  overflow-y: auto;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.hero-search-pop.is-open { display: block; }
.hero-search-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--t-fast);
}
.hero-search-item:hover,
.hero-search-item:focus-visible { background: var(--bg-hover); outline: none; }
.hero-search-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-search-item__main strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-search-item__main small { font-size: var(--fs-xs); color: var(--text-muted); }
.hero-search-empty {
  padding: 14px 12px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

/* Menú desplegable de período de las tarjetas principales. */
.period-menu {
  z-index: 950;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.period-menu__item {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.period-menu__item:hover,
.period-menu__item:focus-visible { background: var(--bg-hover); outline: none; }

.period-select { cursor: pointer; }

/* Subtítulo del modal de rendimiento promedio. */
.rg-modal__sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.rg-metrics--cmp { margin-bottom: 0; }

/* Fase 3C.1 — selector de fechas del Dashboard */
.dash-rango { margin-bottom: var(--space-3, 12px); }