/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body { font-family: 'Plus Jakarta Sans', sans-serif; }

/*
 * Dashboard y componentes compartidos
 * ----------------------------------
 * .chart-container  Contenedor del gráfico dona en el dashboard (tamaño fijo para que el SVG escale bien).
 * .donut-segment    Segmentos del dona (stroke-dasharray/offset se setean en la vista); transición suave al cambiar datos.
 * .table-row        Filas de tablas reutilizadas (ej: movimientos recientes); borde inferior y hover para legibilidad.
 */
.chart-container { position: relative; width: 220px; height: 220px; }
.donut-segment { transition: all 0.5s ease; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.table-row { border-bottom: 1px solid #f8fafc; transition: background-color 0.2s; }
.table-row:hover { background-color: #f8fafc; }
.table-row:last-child { border-bottom: none; }

/* flatpickr month-select plugin
 * .fp-month-grid  Grilla 3×4 de meses que reemplaza el picker de días.
 * .fp-month-item  Celda de mes: hover gris claro, selected navy (marca el mes activo).
 */
.fp-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
}
.fp-month-item {
  cursor: pointer;
  padding: 6px 4px;
  text-align: center;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1a1c1c;
  transition: background 0.15s;
}
.fp-month-item:hover { background: #eeeeed; }
.fp-month-item.selected { background: #1a146b; color: #fff; }

/* Sidebar & scroll */
.sidebar-transition { transition: width 0.3s ease-in-out, transform 0.3s ease-in-out; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }