/**
 * Dashboard Corporativo
 * Estilos para la vista de dashboard con diseño corporativo
 *
 * Basado en el diseño de referencia de proyectoDesign
 * Fecha: 2025-10-09
 */

/* ========================================
   TÍTULOS Y ENCABEZADOS
   ======================================== */

/* Título principal del dashboard */
.title-dashboard {
  font-size: var(--font-size-title-large);
  font-weight: 600;
  color: var(--corporate-blue);
  margin-bottom: var(--spacing-lg);
}

/* Títulos de cards */
.card-title {
  font-size: var(--font-size-title-small);
  color: var(--corporate-purple);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

/* ========================================
   CARDS Y CONTENEDORES
   ======================================== */

/* Card de resumen (summary card) */
.summary-card,
.card-summary {
  background-color: white;
  border-radius: var(--border-radius-card);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-card);
  border: var(--border-card);
  max-height: 180px;
}

/* Card estándar con estilos corporativos */
.card {
  box-shadow: var(--shadow-subtle);
  border: var(--border-card);
  border-radius: var(--border-radius-card);
}

/* Header de card */
.card-header {
  background-color: rgba(127, 71, 144, 0.05);
  border-bottom: 1px solid rgba(30, 30, 30, 0.1);
  max-height: fit-content;
}

/* Body de card summary */
.card-body-summary {
  padding: 0px 40px;
}

/* ========================================
   MÉTRICAS Y ESTADÍSTICAS
   ======================================== */

/* Números grandes en métricas */
.card-body .h3,
.card-body .h5 {
  color: var(--corporate-purple);
  font-weight: bold;
}

/* Separadores en cards de métricas */
.card-body hr {
  border-color: rgba(30, 30, 30, 0.15);
  margin: var(--spacing-sm) 0;
}

/* Texto de métricas */
.card-body span {
  color: var(--corporate-black);
}

/* Porcentajes y texto secundario */
.card-body .text-muted {
  color: rgba(30, 30, 30, 0.6) !important;
}

/* ========================================
   FILTROS Y CONTROLES
   ======================================== */

/* Dropdown de filtros */
.details-dropdown {
  position: relative;
}

.details-dropdown summary {
  list-style: none;
  color: var(--corporate-blue);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
}

.details-dropdown summary:hover {
  color: var(--corporate-purple);
}

.details-dropdown summary::-webkit-details-marker {
  display: none;
}

/* Botones de filtro */
#btn-apply {
  border-color: var(--corporate-blue);
  background-color: transparent;
  color: var(--corporate-blue);
  transition: all 0.3s ease;
}

#btn-apply:hover {
  background-color: var(--corporate-blue);
  color: white;
}

#btn-clear {
  border: none;
  background-color: transparent;
  color: rgba(30, 30, 30, 0.6);
  font-weight: bold;
  transition: color 0.3s ease;
}

#btn-clear:hover {
  color: var(--corporate-purple);
}

/* ========================================
   GRÁFICOS
   ======================================== */

/* Contenedor de gráficos */
.card-body canvas {
  max-height: 400px;
}

/* Leyenda de gráficos */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-small);
  color: var(--corporate-black);
}

.chart-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ========================================
   LISTAS Y DATOS
   ======================================== */

/* Listas de datos en cards */
.card-body .d-flex {
  padding: var(--spacing-xs) 0;
}

.card-body .d-flex span:first-child {
  color: var(--corporate-blue);
  font-weight: 500;
}

.card-body .d-flex span:last-child {
  color: var(--corporate-black);
  font-weight: 600;
}

/* ========================================
   ESPACIADO Y LAYOUT
   ======================================== */

/* Contenido principal */
.content {
  padding-top: 24px;
}

/* Márgenes entre filas */
.row.mb-3 {
  margin-bottom: var(--spacing-lg) !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .title-dashboard {
    font-size: 24px;
  }

  .summary-card,
  .card-summary {
    max-height: none;
    margin-bottom: var(--spacing-md);
  }

  .card-body-summary {
    padding: 0px var(--spacing-md);
  }

  .card-body canvas {
    max-height: 300px;
  }
}

@media (max-width: 576px) {
  .title-dashboard {
    font-size: 20px;
  }

  .card-title {
    font-size: var(--font-size-body);
  }

  .card-body .h3 {
    font-size: 1.5rem;
  }
}

/* ========================================
   ESTADOS Y ANIMACIONES
   ======================================== */

/* Loading state para gráficos */
.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--corporate-blue);
}

/* Transiciones suaves */
.card,
.summary-card,
.card-summary {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover,
.summary-card:hover,
.card-summary:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  z-index: 5; /* Asegurar que la card en hover quede por encima de otras */
}

/* Evitar que cards con hover interfieran con dropdowns (tanto details como Bootstrap) */
.card:has(.details-dropdown[open]),
.summary-card:has(.details-dropdown[open]),
.card-summary:has(.details-dropdown[open]),
.card:has(.dropdown-menu.show),
.summary-card:has(.dropdown-menu.show),
.card-summary:has(.dropdown-menu.show) {
  /* Remover transform cuando hay un dropdown abierto para evitar stacking context issues */
  transform: none !important;
  /* El z-index debe ser lo suficientemente alto para superar a otras cards en hover */
  z-index: 10;
}

/* ========================================
   COMPATIBILIDAD CON LIVEWIRE
   ======================================== */

/* Wire loading states */
[wire\:loading] {
  opacity: 0.6;
  pointer-events: none;
}

[wire\:loading]:not(.no-global-spinner)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 3px solid var(--corporate-purple);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ========================================
   SELECTORES LIVEWIRE - Z-INDEX FIX
   ======================================== */

/* Asegurar que los dropdowns de selectores siempre aparezcan por encima de todo */
.details-dropdown[open] > div.position-absolute,
.details-dropdown > div.position-absolute {
  z-index: 9999 !important;
  /* Asegurar que el dropdown tenga un stacking context propio */
  isolation: isolate;
}

/* Asegurar que el summary tenga un z-index apropiado */
.details-dropdown summary {
  position: relative;
  z-index: 1;
}

/* Cuando el dropdown está abierto, asegurar que todo el componente tenga prioridad */
.details-dropdown[open] {
  z-index: 9998;
  position: relative;
}