/* ============================================================
   ADRA FORMACION — Estilos personalizados
   Paleta corporativa ADRA: Verde #007A5E · Verde oscuro #004D38 · Acento #00B386
   ============================================================ */

/* ─── Variables CSS ───────────────────────────────────────── */
:root {
  --adra-verde:        #007A5E;
  --adra-verde-hover:  #005A44;
  --adra-verde-oscuro: #004D38;
  --adra-verde-claro:  #E8F5F0;
  --adra-acento:       #00B386;   /* verde brillante para acentos */
}

/* ─── Navbar ─────────────────────────────────────────────── */
.bg-adra {
  background: linear-gradient(135deg, var(--adra-verde) 0%, var(--adra-verde-oscuro) 100%) !important;
}

/* ─── Colores y utilidades ───────────────────────────────── */
.text-adra       { color: var(--adra-verde) !important; }
.bg-adra-light   { background-color: var(--adra-verde-claro) !important; }
.border-adra     { border-color: var(--adra-verde) !important; }

/* ─── Botones ────────────────────────────────────────────── */
.btn-adra {
  background-color: var(--adra-verde);
  border-color:     var(--adra-verde);
  color: #fff;
  font-weight: 600;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-adra:hover, .btn-adra:focus {
  background-color: var(--adra-verde-hover);
  border-color:     var(--adra-verde-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,122,94,.35);
}
.btn-adra:active { transform: translateY(0); }

/* ─── Hero section ───────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, var(--adra-verde) 0%, var(--adra-verde-oscuro) 60%, #0a1f17 100%);
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%; left: -20%;
  width: 300px; height: 300px;
  background: rgba(0,179,134,.15);
  border-radius: 50%;
}
.text-white-75 { color: rgba(255,255,255,.75); }

/* ─── Tarjetas de curso ──────────────────────────────────── */
.curso-card {
  transition: transform .2s, box-shadow .2s;
  border-radius: 12px !important;
  overflow: hidden;
}
.curso-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
.curso-portada-wrapper { overflow: hidden; }
.curso-portada {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform .3s;
}
.curso-card:hover .curso-portada { transform: scale(1.04); }
.curso-portada-placeholder {
  height: 180px;
}
.bg-gradient-adra {
  background: linear-gradient(135deg, var(--adra-verde), var(--adra-acento));
}
.titulo-curso {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.descripcion-curso {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Panel alumno / progreso ────────────────────────────── */
.progress { border-radius: 10px; overflow: hidden; }

/* ─── Reproductor ────────────────────────────────────────── */
.leccion-item.activa {
  background: #f0faf6 !important;
  border-left: 3px solid var(--adra-verde) !important;
}
.sidebar-lecciones::-webkit-scrollbar { width: 4px; }
.sidebar-lecciones::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* ─── KPI cards ──────────────────────────────────────────── */
.hover-lift { transition: transform .15s, box-shadow .15s; }
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.1) !important;
}

/* ─── Chat ───────────────────────────────────────────────── */
#chat-area::-webkit-scrollbar { width: 4px; }
#chat-area::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* ─── Accordion (módulos) ─────────────────────────────────── */
.accordion-button:not(.collapsed) {
  color: var(--adra-verde);
  background-color: var(--adra-verde-claro);
  box-shadow: none;
}
.accordion-button::after {
  /* flecha verde */
  filter: invert(30%) sepia(80%) saturate(600%) hue-rotate(130deg);
}

/* ─── Badges ─────────────────────────────────────────────── */
.badge.bg-adra {
  background-color: var(--adra-verde) !important;
}

/* ─── Footer links ───────────────────────────────────────── */
footer a { transition: color .15s; }
footer a:hover { color: #fff !important; }

/* ─── Formularios ────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--adra-verde);
  box-shadow: 0 0 0 .2rem rgba(0,122,94,.2);
}
.form-check-input:checked {
  background-color: var(--adra-verde);
  border-color: var(--adra-verde);
}

/* ─── Navbar dropdown ────────────────────────────────────── */
.dropdown-item:active, .dropdown-item:focus {
  background-color: var(--adra-verde-claro);
  color: var(--adra-verde);
}

/* ─── Página de login / registro ─────────────────────────── */
.card.shadow-lg { border-radius: 16px !important; }

/* ─── Animación fade-in suave ────────────────────────────── */
main { animation: fadeIn .3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section { padding: 2rem 0 !important; }
  .hero-section h1 { font-size: 1.8rem; }
  .display-6 { font-size: 1.6rem; }
}

/* ─── Print (certificados) ───────────────────────────────── */
@media print {
  .navbar, footer, .btn, .alert { display: none !important; }
}

/* ─── Modo oscuro — overrides custom ────────────────────── */
/* Bootstrap 5.3 gestiona automáticamente: cards, forms, tables,
   modals, dropdowns. Solo necesitamos sobrescribir componentes
   con colores hardcodeados en nuestro CSS. */

/* Bottom nav */
[data-bs-theme="dark"] .bottom-nav {
  background: #161b22;
  border-top-color: #30363d;
}
[data-bs-theme="dark"] .bottom-nav-item { color: #6e7681; }
[data-bs-theme="dark"] .bottom-nav-item.active { color: #00B386; }
[data-bs-theme="dark"] .bottom-nav-item.active::after { background: #00B386; }
[data-bs-theme="dark"] .bottom-nav-badge { border-color: #161b22; }

/* Overlay de búsqueda mobile */
[data-bs-theme="dark"] .mobile-search-overlay {
  background: #1c2128;
  border-color: #30363d;
}
[data-bs-theme="dark"] .mobile-search-overlay .overlay-header span {
  color: #00B386;
}

/* Hero (ya tiene fondo oscuro, solo ajuste sutil) */
[data-bs-theme="dark"] .hero-section::before { opacity: .08; }
[data-bs-theme="dark"] .text-white-75 { color: rgba(255,255,255,.7); }

/* Tarjeta de curso — placeholder */
[data-bs-theme="dark"] .bg-gradient-adra {
  background: linear-gradient(135deg, #004D38, #00695c) !important;
}
[data-bs-theme="dark"] .curso-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

/* Barra de progreso del reproductor */
[data-bs-theme="dark"] .barra-reproductor {
  background: #0d1117;
  border-bottom-color: #30363d !important;
}
[data-bs-theme="dark"] .sidebar-lecciones {
  background: #161b22 !important;
  border-right-color: #30363d !important;
}
[data-bs-theme="dark"] .leccion-item.activa {
  background: #0d2a1f !important;
}
[data-bs-theme="dark"] .barra-nav-leccion {
  background: #0d1117 !important;
  border-top-color: #30363d !important;
}

/* Filtros sticky mobile */
[data-bs-theme="dark"] .filtros-bar-mobile {
  background: #161b22;
  border-color: #30363d;
}
[data-bs-theme="dark"] .chip-filtro {
  background: #0d2a1f;
  color: #00B386;
  border-color: #00695c;
}
[data-bs-theme="dark"] .chip-filtro:hover { background: #0a3622; color: #00B386; }

/* PWA banner */
[data-bs-theme="dark"] #pwaBanner .card {
  background: #1c2128 !important;
  border-left-color: #00B386 !important;
}

/* Skeleton en modo oscuro */
[data-bs-theme="dark"] .skeleton-portada {
  background: linear-gradient(
    90deg, #21262d 25%, #2d333b 37%, #21262d 63%
  ) !important;
  background-size: 800px 100% !important;
}
[data-bs-theme="dark"] .skeleton-card .sk-img,
[data-bs-theme="dark"] .skeleton-card .sk-line {
  background: linear-gradient(90deg, #21262d 25%, #2d333b 37%, #21262d 63%);
  background-size: 800px 100%;
}

/* Logros desbloqueados */
[data-bs-theme="dark"] .logro-obtenido {
  background: linear-gradient(135deg, #0d2a1f 0%, #161b22 100%) !important;
  border-color: #00695c !important;
}

/* Toggle vista (catálogo) */
[data-bs-theme="dark"] .btn-vista {
  border-color: #30363d;
  color: #8b949e;
}
[data-bs-theme="dark"] .btn-vista.activo,
[data-bs-theme="dark"] .btn-vista:hover {
  background: #00695c;
  border-color: #00695c;
  color: #fff;
}

/* ─── Skeleton shimmer (R5 lazy loading) ─────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-portada {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e4e4e4 37%,
    #f0f0f0 63%
  ) !important;
  background-size: 800px 100% !important;
  animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}
/* La imagen empieza invisible y aparece al cargar */
.lazy-img {
  opacity: 0;
  transition: opacity .4s ease;
}
.lazy-img.img-loaded {
  opacity: 1;
}
/* Skeleton card ghost (antes de que el JS arranque) */
.skeleton-card {
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.skeleton-card .sk-img  {
  height: 170px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-card .sk-line {
  height: .75rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 37%, #f0f0f0 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  margin-bottom: .55rem;
}
.skeleton-card .sk-line.w-75 { width: 75%; }
.skeleton-card .sk-line.w-50 { width: 50%; }
.skeleton-card .sk-line.w-40 { width: 40%; }