/* ============================================================================
   SISCREDI - METRIC CARD COMPONENT STYLES
   ============================================================================
   Estilos para el componente Metric Card (KPIs)
   Versión: 3.0.0

   Características:
   - Dos layouts: vertical (dashboard) y horizontal (páginas de detalle)
   - Totalmente basado en tokens.css y Bootstrap 5.3
   - Transiciones suaves y efectos hover optimizados
   - Tipografía monospace para valores numéricos
   - Responsive design mobile-first

   Dependencias:
   - tokens.css (variables CSS de Bootstrap)
   - card.css (estilos base de cards)
   - Bootstrap 5.3+
   - Bootstrap Icons
   ============================================================================ */

/* ==========================================================================
   BASE METRIC CARD - Estilos compartidos
   ========================================================================== */

.metric-card {
  /* Heredar estilos base de card.css */
  transition: var(--bs-transition-base);
  position: relative;
}

/* Efecto hover suave - Solo para cards clickeables */
.metric-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow);
}

/* ==========================================================================
   METRIC CARD VERTICAL - Layout para dashboards
   ========================================================================== */

.metric-card-vertical {
  /* Estilos específicos ya definidos en el HTML con clases Bootstrap */
  /* Este selector existe para futuros overrides si se requieren */
}

/* Icono decorativo de fondo - ajustes adicionales */
.metric-card-vertical .position-absolute.opacity-10 {
  pointer-events: none;
  /* No interferir con clics */
  user-select: none;
  /* No seleccionable */
}

/* ==========================================================================
   METRIC CARD HORIZONTAL - Layout para páginas de detalle
   ========================================================================== */

.metric-card-horizontal {
  /* Altura mínima para consistencia */
  min-height: 88px;
}

/* Efecto hover mejorado para horizontal - Solo si es clickeable */
.metric-card-horizontal.metric-card-clickable:hover {
  background: rgba(var(--bs-primary-rgb), 0.02);
}

/* Icono en layout horizontal - Solo si es clickeable */
.metric-card-horizontal.metric-card-clickable:hover i {
  transform: scale(1.05);
  transition: var(--bs-transition-base);
}

/* ==========================================================================
   ELEMENTOS INTERNOS - Label, Value, Prefix, Suffix
   ========================================================================== */

/* Label (etiqueta descriptiva) */
.metric-card-label {
  font-size: 16px;
  font-weight: var(--bs-font-weight-medium);
  color: var(--bs-secondary-color);
  letter-spacing: 0.025em;
  line-height: var(--bs-line-height-sm);
}

/* Value (valor principal) */
.metric-card-value {
  font-size: 40px;
  font-weight: var(--bs-font-weight-bold);
  line-height: 1.2;
  color: var(--bs-emphasis-color);
  font-family: var(--bs-font-sans-serif);
  letter-spacing: -0.02em;
}

/* Kerning ajustado para números */


/* Prefix y Suffix */
.metric-card-prefix,
.metric-card-suffix {
  font-size: 0.85em;
  /* Ligeramente más pequeño que el valor */
  font-weight: var(--bs-font-weight-semibold);
  opacity: 0.9;
}

.metric-card-prefix {
  margin-right: 0.15em;
}

.metric-card-suffix {
  margin-left: 0.15em;
}

/* ==========================================================================
   TENDENCIAS - Indicadores de cambio (up, down, stable)
   ========================================================================== */

/* Contenedor de tendencia */
.metric-card .d-flex.align-items-center.gap-1 {
  font-size: var(--bs-body-font-size-sm);
}

/* Iconos de tendencia */
.metric-card .bi-arrow-up-short,
.metric-card .bi-arrow-down-short,
.metric-card .bi-dash {
  transition: transform var(--bs-transition-base);
}

/* Animación sutil en hover */
.metric-card:hover .bi-arrow-up-short {
  transform: translateY(-2px);
}

.metric-card:hover .bi-arrow-down-short {
  transform: translateY(2px);
}

/* ==========================================================================
   RESPONSIVE - Ajustes por breakpoint
   ========================================================================== */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {

  /* Reducir tamaño de valor en mobile para layout horizontal */
  .metric-card-horizontal .metric-card-value {
    font-size: 1.15rem;
  }

  /* Reducir tamaño de icono en horizontal */
  .metric-card-horizontal > .card-body > i {
    font-size: 1.25rem;
  }

  /* Ajustar padding en mobile */
  .metric-card-horizontal .card-body {
    padding: 0.75rem;
    gap: 0.75rem;
  }
}

/* Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .metric-card-horizontal .metric-card-value {
    font-size: 1.25rem;
  }
}

/* Desktop (≥ 768px) */
@media (min-width: 768px) {

  /* Aumentar ligeramente el efecto hover en desktop - Solo para clickeables */
  .metric-card-clickable:hover {
    transform: translateY(-3px);
  }
}

/* ==========================================================================
   VARIANTES DE COLOR - Overrides específicos
   ========================================================================== */

/* Variant Primary */
.metric-card.border-primary:hover {
  border-left-color: var(--bs-primary);
}

/* Variant Success */
.metric-card.border-success:hover {
  border-left-color: var(--bs-success);
}

/* Variant Danger */
.metric-card.border-danger:hover {
  border-left-color: var(--bs-danger);
}

/* Variant Warning */
.metric-card.border-warning:hover {
  border-left-color: var(--bs-warning);
}

/* Variant Info */
.metric-card.border-info:hover {
  border-left-color: var(--bs-info);
}

/* ==========================================================================
   ACCESIBILIDAD - Mejoras A11Y
   ========================================================================== */

/* Asegurar contraste suficiente en hover - Solo para clickeables */
.metric-card-clickable:hover .metric-card-label {
  color: var(--bs-body-color);
}

/* Focus visible para navegación por teclado - DESHABILITADO
.metric-card:focus-within {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
*/

/* Reducir movimiento para usuarios con preferencias */
@media (prefers-reduced-motion: reduce) {

  .metric-card-clickable,
  .metric-card-clickable *,
  .metric-card-clickable:hover,
  .metric-card-clickable:hover * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   DARK MODE - Ajustes para modo oscuro
   ========================================================================== */

[data-bs-theme="dark"] .metric-card-horizontal.metric-card-clickable:hover {
  background: rgba(var(--bs-primary-rgb), 0.05);
}

[data-bs-theme="dark"] .metric-card-clickable:hover {
  box-shadow: var(--bs-box-shadow-lg);
}

/* ==========================================================================
   PRINT - Estilos para impresión
   ========================================================================== */

@media print {

  /* Eliminar efectos decorativos en impresión */
  .metric-card {
    box-shadow: none !important;
    transform: none !important;
    border: 1px solid var(--bs-border-color) !important;
  }

  /* Ocultar iconos decorativos de fondo */
  .metric-card-vertical .position-absolute.opacity-10 {
    display: none;
  }

}

/* ==========================================================================
   UTILITIES - Clases de utilidad adicionales
   ========================================================================== */

/* Variante compacta (para grids densos) */
.metric-card-compact .card-body {
  padding: 0.75rem;
}

.metric-card-compact .metric-card-value {
  font-size: 1rem;
}

/* Variante expandida (para destacar métricas importantes) */
.metric-card-expanded .card-body {
  padding: 2rem;
}

.metric-card-expanded .metric-card-value {
  font-size: 2.5rem;
}

/* Loading state (skeleton) — usa .sc-skeleton de sc-spinner.css */
.metric-card.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.metric-card.is-loading .metric-card-value,
.metric-card.is-loading .metric-card-label {
  color: transparent;
  border-radius: var(--bs-border-radius-sm);
}

/* ==========================================================================
   CLICKABLE CARDS - Estilos para cards con navegación
   ========================================================================== */

/* Wrapper <a> sin estilos de link */
a:has(.metric-card-clickable) {
  text-decoration: none;
  color: inherit;
}

/* Card clickeable - cursor pointer y efectos mejorados */
.metric-card-clickable {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover mejorado para cards clickeables */
.metric-card-clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Focus visible para accesibilidad - DESHABILITADO
a:focus .metric-card-clickable {
  outline: 3px solid var(--bs-primary);
  outline-offset: 3px;
}
*/

/* Eliminar outline en focus para metric cards clickeables */
a:focus .metric-card-clickable,
a:focus-visible .metric-card-clickable,
.metric-card-clickable:focus,
.metric-card-clickable:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   FIN DEL ARCHIVO
   ========================================================================== */