/* src/styles/cards.css — Sistema de tarjetas unificado */

/* ── BASE COMPARTIDA ──────────────────────────────────────────── */
.corp-card,
.h-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Card vertical — la variante más común */
.corp-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Card horizontal — lista, items de resumen */
.h-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--color-primary-500);
}

/* ── INTERACCIÓN HOVER ────────────────────────────────────────── */
.corp-card:hover,
.h-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-default);
}

/* ── IMAGEN EN CARD ───────────────────────────────────────────── */
.card-img-container {
  width: 100%;
  height: 180px;
  background: var(--surface-sunken);
  overflow: hidden;
  position: relative;
}

.card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
}

.corp-card:hover .card-img-container img {
  transform: scale(1.06);
  transition: transform var(--transition-slow);
}

/* ── BODY DE CARD ─────────────────────────────────────────────── */
.card-body-content {
  padding: var(--space-6);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.card-title-main {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-primary-700);
  margin-bottom: var(--space-3);
}

.card-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* ── VARIANTES DE CARD ────────────────────────────────────────── */

/* Card informativa — dato destacado con borde izquierdo */
.card-info {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--color-primary-500);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}

/* Card compacta — para listas densas */
.card-compact {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
}

.card-compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Card de dashboard — superficie elevada con acento sutil */
.card-dashboard {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Card interactiva — hover más pronunciado */
.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ── ZOOM HINT EN IMAGEN ──────────────────────────────────────── */
.card-img-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(89, 37, 130, 0);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition-base), background var(--transition-base);
  pointer-events: none;
}

.card-img-container:hover .card-img-zoom-hint {
  background: rgba(89, 37, 130, 0.42);
  opacity: 1;
}

/* ── DARK MODE ────────────────────────────────────────────────── */
.dark-mode-active .corp-card,
.dark-mode-active .h-card {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.dark-mode-active .card-img-container {
  background: var(--surface-sunken);
}

.dark-mode-active .card-title-main {
  color: var(--color-secondary-400);
}

.dark-mode-active .card-body-content {
  background: var(--surface-card);
}

.dark-mode-active .card-info,
.dark-mode-active .card-compact,
.dark-mode-active .card-dashboard {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}

.dark-mode-active .card-info {
  border-left-color: var(--color-secondary-500);
}

/* ── CARD MORADA DE AUTENTICACIÓN (Login / FlujoSoporte) ─────────
   Reemplaza el .card/.card-purple heredado de Bootstrap. Sin hover:
   estas cards son estáticas, a diferencia de .corp-card. ────────── */
.login-card-purple {
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}