/* ==============================================================================
   GLOBAL CSS — Variables de diseño y estilos base
   Paleta: #BB8683 (primary), #ABA6A6 (warm gray), #333 (dark), #FDFDFD (bg)
   ============================================================================== */

:root {
  /* Colores */
  --color-primary:       #BB8683;
  --color-primary-80:    rgba(204, 153, 153, 0.80);
  --color-primary-20:    rgba(204, 153, 153, 0.20);
  --color-warm-gray:     #ABA6A6;
  --color-dark:          #333333;
  --color-text:          #444444;
  --color-text-muted:    #777777;
  --color-light:         #FDFDFD;
  --color-white:         #ffffff;
  --color-bg:            #FDFDFD;
  --color-surface:       rgba(217, 217, 217, 0.40);

  /* Tipografía */
  --font-primary:   'Poppins', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;

  /* Espaciado */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Bordes */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   30px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 6px 4px 20px -4px rgba(0, 0, 0, 0.20);

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.5s ease;
}

/* Suavizar scroll en toda la página */
html {
  scroll-behavior: smooth;
}

/* Forzar box-sizing global */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Imágenes responsive por defecto */
img {
  max-width: 100%;
  height: auto;
}

/* ==============================================================================
   TEMA OSCURO GLOBAL — Activado con html.dark
   ============================================================================== */
html.dark {
  --color-bg:          #1a1824;
  --color-text:        #d8d4e4;
  --color-text-muted:  #9a94aa;
  --color-dark:        #d8d4e4;
  --color-white:       #232030;
  --color-light:       #1a1824;
  --color-surface:     rgba(50, 46, 68, 0.60);
}

html.dark body {
  background-color: #1a1824;
  color: #d8d4e4;
}

/* ── Navbar ── */
html.dark .header,
html.dark .navbar { background-color: #1e1b28 !important; }
html.dark .header-dashbord-container-logo h2 { color: #d8d4e4; }
html.dark .navbar-nav .dropdown-menu { background-color: #232030; border-color: #BB8683; }
html.dark .dropdown-item { color: #d8d4e4; }
html.dark .navbar-toggler { border-color: rgba(187,134,131,.4); }
html.dark .navbar-toggler-icon { filter: invert(1); }
html.dark .dropdown-menu .dropdown-divider { border-top-color: #2e2b3a; }

/* ── Páginas de contenido ── */
html.dark .main,
html.dark .main-dashboard { background-color: #1a1824 !important; color: #d8d4e4; }

/* ── Dashboard banner ── */
html.dark .dash-banner { background: linear-gradient(135deg, #1e1b28 0%, #241e30 100%); border-color: #2e2b3a; }
html.dark .dash-banner__phrase { color: #d8d4e4; }
html.dark .dash-banner__sub { color: #9a94aa; }
html.dark .dash-banner__bear,
html.dark .dash-banner__bull { color: rgba(187,134,131,.18); }
html.dark .dash-banner__quote-icon { color: rgba(187,134,131,.35); }

/* ── Tarjetas de cursos ── */
html.dark .course-card { background: #232030; }
html.dark .course-card__title { color: #d8d4e4; }
html.dark .course-card__desc,
html.dark .course-card__mentor,
html.dark .course-card__date { color: #9a94aa; }
html.dark .course-card__track { background: #3a3648; }
html.dark .course-card__stats { color: #9a94aa; }
html.dark .course-card__pct { color: #BB8683; }
html.dark .courses-section__title { color: #d8d4e4; }
html.dark .empty-state h3 { color: #d8d4e4; }
html.dark .empty-state p { color: #9a94aa; }

/* ── Anuncios ── */
html.dark .anuncio-card { background: #232030; border-color: rgba(187,134,131,.25); }
html.dark .anuncio-card__titulo { color: #d8d4e4; }
html.dark .anuncio-card__contenido { color: #b0aabf; }
html.dark .anuncio-card__fecha { color: #9a94aa; }
html.dark .anuncio-dismiss { color: #9a94aa; }
html.dark .anuncio-dismiss:hover { color: #BB8683; }

/* ── Admin cards ── */
html.dark .admin-card { background: #232030; }
html.dark .admin-card__header { background: rgba(187,134,131,.12); border-bottom-color: rgba(187,134,131,.2); }
html.dark .admin-card__header h3 { color: #d8d4e4; }
html.dark .admin-page-title { color: #d8d4e4; }

/* ── Tablas ── */
html.dark .table { color: #d8d4e4; border-color: #2e2b3a; }
html.dark .table thead th { background: rgba(187,134,131,.15); border-color: #2e2b3a; }
html.dark .table tbody td { border-color: #2e2b3a; }
html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(50,46,68,.5); }
html.dark .dataTables_wrapper { color: #d8d4e4; }
html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select { background: #2d2a3a; color: #d8d4e4; border-color: #3a3648; }
html.dark .dataTables_paginate .paginate_button { color: #d8d4e4 !important; }
html.dark .dataTables_paginate .paginate_button.current { background: rgba(187,134,131,.2) !important; color: #BB8683 !important; }

/* ── Formularios ── */
html.dark .form-control,
html.dark .form-select { background: #2d2a3a !important; border-color: #3a3648 !important; color: #d8d4e4 !important; }
html.dark .form-control::placeholder { color: #6b6580 !important; }
html.dark .form-label { color: #d8d4e4; }
html.dark .text-muted { color: #9a94aa !important; }

/* ── Footer ── */
html.dark .dash-footer { background-color: #141220; border-top-color: #2e2b3a; }
html.dark .dash-footer p { color: #9a94aa; }
html.dark .dash-footer a { color: #9a94aa; }

/* ── Reproductor de cursos (sidebar + navbar interna) ── */
html.dark .main-container,
html.dark .content { background-color: #1a1824 !important; }
html.dark .sidebar { background-color: #1e1b28 !important; }
html.dark .sidebar li label,
html.dark .sidebar .modulo-info span { color: #c8c4d4 !important; }
html.dark .header-box { border-color: #2e2b3a !important; }
html.dark .navbar.bg-light { background: #1e1b28 !important; }
html.dark .container-nav { border-top-color: #2e2b3a !important; border-bottom-color: #2e2b3a !important; }
html.dark .atras { border-right-color: #2e2b3a !important; }
html.dark .atras span,
html.dark .adelante span { color: #c8c4d4 !important; }
html.dark .videoContainer span { color: #c8c4d4 !important; }
html.dark .videoContainer span:nth-child(2) { color: #e0dce8 !important; }
html.dark .botones-completado form button { background: #252234 !important; color: #BB8683 !important; border-color: #BB8683 !important; box-shadow: 0 4px 12px rgba(187,134,131,.15); }
html.dark .botones-completado form button:disabled { background: #1e1b28 !important; opacity: .5; }
html.dark .Comentarios-container .card-header { border-bottom-color: #2e2b3a !important; }
html.dark .Comentarios-container .card-body .card-text { color: #b0aabf !important; }
html.dark .Comentarios-container .card-text span,
html.dark .Comentarios-container .card-text p,
html.dark .Comentarios-container .card-text * { color: #b0aabf !important; }
html.dark .btn-admin-secondary { background: #252234 !important; }

/* ── Botones de interfaz en nav (tema + refresh) ── */
html.dark .ui-tool-btn { color: #BB8683; border-color: rgba(187,134,131,.25); }
html.dark .ui-tool-btn:hover { background: rgba(187,134,131,.15); border-color: #BB8683; }

/* ── Botones de herramienta en viewer (volver) ── */
html.dark .vc-tool-btn { color: #a09ab4; border-color: rgba(187,134,131,.25); background: transparent; }
html.dark .vc-tool-btn:hover { background: rgba(187,134,131,.15); color: #BB8683; }