/* ============================================================================
   SISCREDI - CARD COMPONENT STYLES
   ============================================================================
   Estilos optimizados para componente Card reutilizable
   Hereda completamente de tokens.css y Bootstrap 5.3 estándar

   Características:
   - Bordes redondeados optimizados
   - Dimensiones responsive
   - Efectos hover suaves con elevación
   - Totalmente basado en variables CSS de tokens.css
   ============================================================================ */

/* ==========================================================================
   BASE CARD - Sobrescribiendo Bootstrap con tokens
   ========================================================================== */

.card {
  /* Variables heredadas de tokens.css */
  --card-border-radius: var(--bs-card-border-radius);
  --card-spacer-x: var(--bs-card-spacer-x);
  --card-spacer-y: var(--bs-card-spacer-y);
  --card-bg: var(--bs-tertiary-bg);
  --card-border-color: var(--bs-card-border-color);
  --card-border-width: var(--bs-card-border-width);
  --card-box-shadow: var(--bs-card-box-shadow);

  /* Aplicación de estilos base */
  background-color: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);

  /* Transición suave para hover */
  transition: var(--bs-transition-base);

  /* Dimensiones responsive heredadas */
  width: 100%;
  height: var(--bs-card-height);
}

/* ==========================================================================
   CARD HEADER - Estilos optimizados
   ========================================================================== */

.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  background-color: var(--bs-card-cap-bg);
  color: var(--bs-card-cap-color);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
  font-weight: var(--bs-font-weight-semibold);
  font-size: var(--bs-font-size-lg);
  line-height: var(--bs-line-height-tight);
}

.card-subtitle {
  margin-top: calc(var(--bs-card-title-spacer-y) * -0.5);
  margin-bottom: 0;
  color: var(--bs-card-subtitle-color);
  font-size: var(--bs-font-size-sm);
  font-weight: var(--bs-font-weight-normal);
}

/* ==========================================================================
   CARD BODY - Padding responsive
   ========================================================================== */

.card-body {
  padding: var(--card-spacer-y) var(--card-spacer-x);
  color: var(--bs-card-color);
  flex: 1 1 auto;
}

/* ==========================================================================
   CARD FOOTER - Estilos consistentes
   ========================================================================== */

.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

/* ==========================================================================
   HOVER EFFECT - Elevación y shadow mejorado
   ========================================================================== */

.card[data-hover="true"] {
  cursor: pointer;
  position: relative;

  /* Estado inicial con sombra base */
  box-shadow: var(--bs-box-shadow-sm);

  /* Transiciones suaves */
  transition:
    transform var(--bs-transition-duration-normal) var(--bs-transition-timing-smooth),
    box-shadow var(--bs-transition-duration-normal) var(--bs-transition-timing-smooth),
    border-color var(--bs-transition-duration-fast) var(--bs-transition-timing-smooth);
}

.card[data-hover="true"]:hover {
  /* Elevación sutil con transform */
  transform: translateY(-4px);

  /* Sombra más pronunciada en hover */
  box-shadow: var(--bs-box-shadow-lg);

  /* Borde más visible en hover */
  border-color: var(--bs-primary-border-subtle);

  /* Z-index para aparecer sobre otros cards */
  z-index: 10;
}

/* Focus visible para accesibilidad */
.card[data-hover="true"]:focus-visible {
  outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow-lg);
}

/* Active state (al hacer clic) */
.card[data-hover="true"]:active {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow-md);
}

/* ==========================================================================
   CARD VARIANTS - Estilos contextuales
   ========================================================================== */

/* Card Metric - Para métricas y estadísticas */
.card-metric {
  border-left: 4px solid var(--bs-primary);
  background: linear-gradient(
    135deg,
    var(--bs-primary-bg-subtle) 0%,
    var(--card-bg) 50%
  );
}

.card-metric .card-title {
  color: var(--bs-primary);
  font-size: var(--bs-font-size-2xl);
  font-weight: var(--bs-font-weight-bold);
}

/* Card Highlight - Para destacar contenido importante */
.card-highlight {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}

.card-highlight .card-header {
  background-color: var(--bs-primary);
  color: white;
  border-color: var(--bs-primary);
}

/* Border variants con colores de tokens */
.card.border-success {
  border-color: var(--bs-success-border-subtle);
  border-left-width: 4px;
}

.card.border-warning {
  border-color: var(--bs-warning-border-subtle);
  border-left-width: 4px;
}

.card.border-danger {
  border-color: var(--bs-danger-border-subtle);
  border-left-width: 4px;
}

.card.border-info {
  border-color: var(--bs-info-border-subtle);
  border-left-width: 4px;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS - Mobile First
   ========================================================================== */

/* Móviles (hasta 576px) */
@media (max-width: 575.98px) {
  .card {
    border-radius: var(--bs-border-radius); /* 6px - más compacto */
  }

  .card-body {
    padding: var(--bs-spacer-4) var(--bs-spacer-3);
  }

  .card-header,
  .card-footer {
    padding: var(--bs-spacer-3) var(--bs-spacer-3);
  }

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

  /* Hover menos pronunciado en móviles */
  .card[data-hover="true"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-box-shadow-md);
  }
}

/* Tablets (576px - 991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .card {
    border-radius: var(--bs-border-radius-lg); /* 12px - estándar */
  }

  .card-body {
    padding: var(--bs-spacer-5) var(--bs-spacer-4);
  }
}

/* Desktop (992px+) */
@media (min-width: 992px) {
  .card {
    border-radius: var(--bs-border-radius-xl); /* 16px - más generoso */
  }

  .card-body {
    padding: var(--bs-spacer-6) var(--bs-spacer-6);
  }

  /* Hover más pronunciado en desktop */
  .card[data-hover="true"]:hover {
    transform: translateY(-6px);
    box-shadow: var(--bs-box-shadow-xl);
  }
}

/* XL Desktop (1200px+) */
@media (min-width: 1200px) {
  .card-title {
    font-size: var(--bs-font-size-xl);
  }
}

/* ==========================================================================
   DARK MODE - Soporte automático
   ========================================================================== */

[data-bs-theme="dark"] .card {
  /* Los tokens ya manejan dark mode automáticamente */
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
}

[data-bs-theme="dark"] .card[data-hover="true"]:hover {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4); /* Sombra más oscura en dark mode */
}

/* ==========================================================================
   LIST GROUP DENTRO DE CARDS - Fondo sólido
   ========================================================================== */

.list-group-item {
  --bs-list-group-bg: var(--bs-secondary-bg);
  background-color: var(--bs-secondary-bg);
}

/* ==========================================================================
   PRINT STYLES - Optimización para impresión
   ========================================================================== */

@media print {
  .card {
    border: 1px solid #000;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .card[data-hover="true"]:hover {
    transform: none;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY - Mejoras de accesibilidad
   ========================================================================== */

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card[data-hover="true"] {
    transition: none;
  }

  .card[data-hover="true"]:hover {
    transform: none;
  }
}

/* Mejorar contraste en modo high contrast */
@media (prefers-contrast: high) {
  .card {
    border-width: 2px;
    border-color: currentColor;
  }
}

/* ==========================================================================
   UTILITIES - Clases helper adicionales
   ========================================================================== */

/* Card sin sombra */
.card-flat {
  box-shadow: none;
}

/* Card con sombra extra */
.card-elevated {
  box-shadow: var(--bs-box-shadow-lg);
}

/* Card con borde completo destacado */
.card-bordered {
  border-width: 2px;
}

/* Card sin bordes */
.card-borderless {
  border: none;
}

/* Card con altura completa (útil en grids) */
.card-full-height {
  height: 100%;
}

/* Card compacto (padding reducido) */
.card-compact .card-body {
  padding: var(--bs-spacer-3);
}

/* Card espacioso (padding aumentado) */
.card-spacious .card-body {
  padding: var(--bs-spacer-8);
}