/* Estilos base AppSports sobre los tokens CPDS — look AppVDN. */
body {
  font-family: var(--cp-font);
  background: var(--cp-bg);
  color: var(--cp-text);
}

h1, h2, h3, h4, h5, h6, .fw-bold, .page-title {
  font-family: var(--cp-font-head);
  letter-spacing: -.01em;
}

/* ── Tarjetas ─────────────────────────────────────────────── */
.cp-card {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-card);
  box-shadow: var(--cp-shadow-sm);
  transition: box-shadow var(--cp-anim) ease, transform var(--cp-anim) ease;
}
.cp-card:hover { box-shadow: var(--cp-shadow-md); }

/* Las tarjetas de Bootstrap adoptan el mismo look que .cp-card (coherencia total) */
.card {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-card);
  box-shadow: var(--cp-shadow-sm);
}
.card .card-header, .card .card-footer { background: transparent; border-color: var(--cp-border); }
.modal-content { border-radius: var(--cp-radius-card); border-color: var(--cp-border); }
.list-group-item { background: var(--cp-card); border-color: var(--cp-border); color: var(--cp-text); }

/* ── Botones ──────────────────────────────────────────────── */
.btn { border-radius: var(--cp-radius-btn); font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--cp-primary);
  --bs-btn-border-color: var(--cp-primary);
  --bs-btn-hover-bg: var(--cp-primary-hover);
  --bs-btn-hover-border-color: var(--cp-primary-hover);
  --bs-btn-active-bg: var(--cp-primary-hover);
}
.btn-outline-primary {
  --bs-btn-color: var(--cp-primary);
  --bs-btn-border-color: var(--cp-primary);
  --bs-btn-hover-bg: var(--cp-primary);
  --bs-btn-hover-border-color: var(--cp-primary);
}

/* ── Formularios ──────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--cp-radius-input);
  background: var(--cp-card);
  border-color: var(--cp-border);
  color: var(--cp-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 .2rem var(--cp-primary-subtle);
}

/* ── Tablas ───────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; color: var(--cp-text); }
.table > thead th {
  font-family: var(--cp-font-head);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cp-text-secondary);
  border-bottom: 1px solid var(--cp-border);
  font-weight: 600;
}
.table > tbody td { border-color: var(--cp-border); vertical-align: middle; }

/* ── Badges ───────────────────────────────────────────────── */
.badge { border-radius: 999px; font-weight: 600; }

.text-secondary-cp { color: var(--cp-text-secondary); }

/* ── App shell: sidebar de marca (mismo look del portal) ──────
   La barra lateral usa el degradado de marca y texto claro, igual que la
   cabecera del portal, para que admin y superadmin se vean como una sola app. */
.app-sidebar {
  background: var(--cp-sidebar);
  color: #fff;
  border-right: 0;
}
.sb-brand {
  background: var(--cp-gradient);
  color: #fff;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
/* Dentro de la barra lateral el brand se funde con el degradado atenuado */
.app-sidebar .sb-brand { background: transparent; }
.sb-brand .text-truncate, .sb-brand span { color: #fff; }

/* Enlaces de navegación sobre el degradado */
.app-sidebar .nav-link {
  color: rgba(255, 255, 255, .82);
  border-radius: var(--cp-radius-btn);
  font-weight: 500;
  position: relative;
  transition: background var(--cp-anim-fast) ease, color var(--cp-anim-fast) ease;
}
.app-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.app-sidebar .nav-link.active {
  background: rgba(255, 255, 255, .20);
  color: #fff;
  font-weight: 600;
}
.app-sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: -6px; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px;
  background: #fff;
}
/* Textos y controles auxiliares legibles sobre el degradado */
.app-sidebar hr { border-color: rgba(255, 255, 255, .18) !important; }
.app-sidebar .text-secondary-cp { color: rgba(255, 255, 255, .72) !important; }
.app-sidebar .badge.text-bg-light {
  background: rgba(255, 255, 255, .22) !important; color: #fff !important;
}
.app-sidebar .nav-link.text-danger { color: #ffe1e1 !important; }
.app-sidebar .nav-link.text-danger:hover { color: #fff !important; background: rgba(255,255,255,.14); }
.app-sidebar .btn-outline-secondary {
  color: #fff; border-color: rgba(255, 255, 255, .4);
}
.app-sidebar .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff;
}

/* Nav-tabs con acento de marca */
.nav-tabs .nav-link.active {
  color: var(--cp-primary);
  border-bottom-color: var(--cp-primary);
  font-weight: 600;
}

/* ── Empty states ─────────────────────────────────────────── */
.empty-state {
  padding: var(--cp-sp-8) var(--cp-sp-4);
  text-align: center;
}
.empty-state i {
  width: 64px; height: 64px;
  color: var(--cp-text-secondary);
  opacity: .5;
  margin-bottom: var(--cp-sp-4);
}
.empty-state p {
  font-weight: 600;
  color: var(--cp-text);
  margin-bottom: var(--cp-sp-1);
}
.empty-state .small {
  color: var(--cp-text-secondary);
}

/* ── Progress bars ────────────────────────────────────────── */
.progress {
  background: var(--cp-primary-subtle);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar { border-radius: 999px; }

/* ── Badges de estado ─────────────────────────────────────── */
.badge.text-bg-success { background: rgba(5,150,105,.12) !important; color: #059669 !important; }
.badge.text-bg-danger { background: rgba(220,38,38,.12) !important; color: #dc2626 !important; }
.badge.text-bg-warning { background: rgba(217,119,6,.12) !important; color: #d97706 !important; }
.badge.text-bg-info { background: rgba(2,132,199,.12) !important; color: #0284c7 !important; }
.badge.text-bg-secondary { background: rgba(107,114,128,.12) !important; color: #6b7280 !important; }

/* ── Modales ──────────────────────────────────────────────── */
.modal-content { border-radius: var(--cp-radius-card); border: none; box-shadow: var(--cp-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--cp-border); padding: var(--cp-sp-4) var(--cp-sp-6); }
.modal-body { padding: var(--cp-sp-6); }
.modal-footer { border-top: 1px solid var(--cp-border); padding: var(--cp-sp-4) var(--cp-sp-6); }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
  border-radius: var(--cp-radius);
  border: none;
  box-shadow: var(--cp-shadow-sm);
}
.alert-success { background: rgba(5,150,105,.1); color: #059669; border-left: 3px solid #059669; }
.alert-danger { background: rgba(220,38,38,.1); color: #dc2626; border-left: 3px solid #dc2626; }
.alert-warning { background: rgba(217,119,6,.1); color: #d97706; border-left: 3px solid #d97706; }
.alert-info { background: rgba(2,132,199,.1); color: #0284c7; border-left: 3px solid #0284c7; }

/* ── Animaciones ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.cp-card { animation: fadeInUp .3s ease forwards; }
.cp-card:nth-child(2) { animation-delay: .05s; }
.cp-card:nth-child(3) { animation-delay: .1s; }
.cp-card:nth-child(4) { animation-delay: .15s; }

/* ── Móvil ────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .btn:not(.btn-sm):not(.btn-close) { min-height: 42px; }
  main { overflow-x: hidden; }
  .cp-card { animation: none; }
}