/**
 * daisyui-theme.css — DaisyUI-aligned design system for Vantive e-learning.
 * Spacing, typography, and component theming compatible with DaisyUI and scalable.
 * Reference: DaisyUI defaults; Vantive pro site (pro.vantive.com) HTML + CSS.
 *
 * Vantive CSS patterns (from reference stylesheet):
 * - Buttons: .button base uses --font-button, --border-radius-full (pill), --button-padding-block: var(--spacing-102),
 *   --button-padding-inline: var(--spacing-2), box-shadow rgba(48,10,45,0.33). Primary = brand bg, cream fg; hover = plum-dark.
 *   Secondary = white bg, brand fg, sage border; hover = sage bg, plum-dark fg. Text = transparent, plum; hover = sage.
 * - Spacing: Vantive uses --spacing-01 through --spacing-15 (0.0625rem–7.5rem); 102=0.75rem, 106=1rem.
 * - Fonts: --font-acumin-variable, --font-button (Inter); --fs-regular, --fs-bold, --fs-wide-medium, --fs-wide-bold.
 * - Divider: .divider__icons (three diamonds) + .divider__rule (brand color, --divider-size).
 * - Modal/dialogs: brand bg, cream content, border-radius, padding block/inline.
 * - Footer: brand bg, white/cream text; section alt = sage-light.
 *
 * Use: base-100 = main bg, base-200 = section alt (sage-light), base-300 = borders (sage).
 *
 * Jerarquía de botones (homologados):
 * - Todos: 16px border-radius, 8px padding, sin sombra; hover solo color más claro.
 * - btn-primary: morado sólido, texto MAYÚSCULAS (Ver detalle, Comenzar curso).
 * - btn-success: verde oscuro + borde verde, minúsculas (Limpiar filtros, Comprobar respuesta).
 * - btn-outline: borde morado (Volver al catálogo).
 * - btn-circle: solo icono, 100% redondo, sin borde, fondo verde traslúcido (claro sobre claro, más opaco sobre oscuro).
 */

/* ========== Design tokens (DaisyUI / Tailwind aligned) ========== */
:root {
  /* Spacing scale (Tailwind: 1=0.25rem, 2=0.5rem, 3=0.75rem, 4=1rem, 5=1.25rem, 6=1.5rem, 8=2rem, 10=2.5rem, 12=3rem) */
  --daisy-space-1: 0.25rem;
  --daisy-space-2: 0.5rem;
  --daisy-space-3: 0.75rem;
  --daisy-space-4: 1rem;
  --daisy-space-5: 1.25rem;
  --daisy-space-6: 1.5rem;
  --daisy-space-8: 2rem;
  --daisy-space-10: 2.5rem;
  --daisy-space-12: 3rem;
  --daisy-space-16: 4rem;
  /* Section padding: horizontal consistent, vertical by context */
  --daisy-section-px: 1rem;
  --daisy-section-py: 2rem;
  --daisy-section-py-lg: 2.5rem;
  /* Container max-width (match Tailwind max-w-5xl = 64rem, max-w-4xl = 56rem) */
  --daisy-container-sm: 56rem;
  --daisy-container-md: 64rem;
  --daisy-container-lg: 80rem;
  /* Component radius — botones rectangulares 16px; .btn-circle 100% redondo */
  --daisy-radius-box: var(--border-radius, 0.75rem);
  --daisy-radius-btn: 16px;
  --daisy-radius-badge: 9999px;
  /* Button padding — 8px con el texto */
  --daisy-btn-py: 8px;
  --daisy-btn-px: 8px;
  --daisy-btn-sm-py: 8px;
  --daisy-btn-sm-px: 8px;
  --daisy-btn-lg-py: 8px;
  --daisy-btn-lg-px: 16px;
  /* Verde oscuro (pine) para iconos redondos traslúcido */
  --daisy-btn-icon-bg-light: rgba(16, 87, 66, 0.12);
  --daisy-btn-icon-bg-dark: rgba(16, 87, 66, 0.28);
  /* Card body padding (DaisyUI card-body default ~ p-6) */
  --daisy-card-p: 1.5rem;
  --daisy-card-p-sm: 1rem;
  /* Font application: buttons/labels use --font-button, body uses --font-stack */
  --daisy-font-body: var(--font-acumin, var(--font-stack));
  --daisy-font-heading: var(--font-acumin-wide, var(--font-stack));
  --daisy-font-ui: var(--font-button, var(--font-system-stack));
}

/* ========== Global: apply body font to DaisyUI content ========== */
[data-theme="vantive"] .card-body,
[data-theme="vantive"] .hero-content,
[data-theme="vantive"] .collapse-content,
[data-theme="vantive"] .stat,
[data-theme="vantive"] .alert {
  font-family: var(--daisy-font-body);
}

/* ========== Contraste y legibilidad (WCAG AA) ========== */
/* Sobre fondo primary (morado): todo el texto e iconos en color claro; nunca verde/pine ni primary */
[data-theme="vantive"] .bg-primary,
[data-theme="vantive"] .hero.bg-primary {
  color: var(--color-primary-content, var(--color-cream));
}

[data-theme="vantive"] .bg-primary .text-primary,
[data-theme="vantive"] .hero.bg-primary .text-primary,
[data-theme="vantive"] .bg-primary .stat-value,
[data-theme="vantive"] .hero.bg-primary .stat-value {
  color: var(--color-primary-content, var(--color-cream)) !important;
}

[data-theme="vantive"] .bg-primary h1,
[data-theme="vantive"] .bg-primary h2,
[data-theme="vantive"] .hero.bg-primary h1,
[data-theme="vantive"] .hero.bg-primary h2,
[data-theme="vantive"] .bg-primary .slide-title,
[data-theme="vantive"] .hero.bg-primary .slide-title {
  color: var(--color-primary-content, var(--color-cream));
}

[data-theme="vantive"] .bg-primary p,
[data-theme="vantive"] .hero.bg-primary p {
  color: var(--color-primary-content, var(--color-cream));
  opacity: 1;
}

[data-theme="vantive"] .bg-primary .opacity-90,
[data-theme="vantive"] .bg-primary .opacity-95,
[data-theme="vantive"] .hero.bg-primary .opacity-90,
[data-theme="vantive"] .hero.bg-primary .opacity-95 {
  opacity: 0.95;
}

/* Iconos SVG oscuros sobre hero primary: volver claros para contraste */
[data-theme="vantive"] .hero.bg-primary .hero-content img[src*="health-icons"],
[data-theme="vantive"] .bg-primary .hero-content img[src*="health-icons"] {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Texto sobre fondos claros: asegurar contraste mínimo (no texto gris muy bajo) */
[data-theme="vantive"] .text-base-content {
  color: var(--color-text, var(--color-pine));
}

[data-theme="vantive"] .text-base-content\/80,
[data-theme="vantive"] .text-base-content\/70,
[data-theme="vantive"] .text-base-content\/60 {
  color: var(--color-pine-dark, #142128);
  opacity: 0.9;
}

/* ========== Navbar ========== */
.navbar {
  min-height: 4rem;
  padding-left: var(--daisy-space-4);
  padding-right: var(--daisy-space-4);
}
.navbar-start,
.navbar-center,
.navbar-end {
  gap: var(--daisy-space-2);
}
.navbar .btn {
  font-family: var(--daisy-font-ui);
  font-weight: var(--fw-medium, 500);
  padding: var(--daisy-btn-sm-py) var(--daisy-btn-px);
}

/* ========== Buttons — forma y jerarquía (Vantive) ========== */
/* Todos: 16px radius, 8px padding; sin sombra; hover solo color más claro */
.btn {
  font-family: var(--daisy-font-ui);
  font-weight: var(--fw-bold, 700);
  padding: var(--daisy-btn-py) var(--daisy-btn-px);
  border-radius: var(--daisy-radius-btn);
  min-height: 2.5rem;
  gap: var(--daisy-space-2);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: none;
}
.btn:hover {
  box-shadow: none;
}
.btn-sm {
  padding: var(--daisy-btn-sm-py) var(--daisy-btn-sm-px);
  min-height: 2.25rem;
  font-size: 0.9375rem;
}
.btn-lg {
  padding: var(--daisy-btn-lg-py) var(--daisy-btn-lg-px);
  min-height: 2.75rem;
  font-size: 1rem;
}
/* Solo icono: 100% redondo, sin borde, fondo verde traslúcido */
.btn-circle {
  border-radius: 50%;
  border: none;
  padding: 8px;
  min-width: 2.25rem;
  min-height: 2.25rem;
  box-shadow: none;
}
[data-theme="vantive"] .btn-circle.btn-ghost {
  background-color: var(--daisy-btn-icon-bg-light);
  color: var(--color-pine, #105742);
}
[data-theme="vantive"] .btn-circle.btn-ghost:hover {
  background-color: rgba(16, 87, 66, 0.22);
  color: var(--color-pine-dark, #142128);
}
/* Iconos redondos sobre fondo oscuro (barra inferior, portada morada) */
[data-theme="vantive"] .course-bottom-nav .btn-circle.btn-ghost,
[data-theme="vantive"] .bg-neutral .btn-circle.btn-ghost,
[data-theme="vantive"] .bg-primary .btn-circle,
[data-theme="vantive"] .slide-cover .btn-circle {
  background-color: var(--daisy-btn-icon-bg-dark);
  color: var(--color-cream, #fffaeb);
  border: none;
}
[data-theme="vantive"] .course-bottom-nav .btn-circle.btn-ghost:hover:not(:disabled),
[data-theme="vantive"] .bg-neutral .btn-circle.btn-ghost:hover,
[data-theme="vantive"] .bg-primary .btn-circle:hover,
[data-theme="vantive"] .slide-cover .btn-circle:hover {
  background-color: rgba(16, 87, 66, 0.45);
  color: var(--color-cream, #fffaeb);
}
[data-theme="vantive"] .slide-cover .btn-circle img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* Primario = CTA principal: morado sólido, MAYÚSCULAS */
[data-theme="vantive"] .btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: none;
}
[data-theme="vantive"] .btn-primary:hover {
  box-shadow: none;
  background-color: var(--color-plum-light, #8d3a71);
  border-color: var(--color-plum-light, #8d3a71);
}
/* Secundario = borde morado */
.btn-outline {
  border-width: 2px;
  box-shadow: none;
}
[data-theme="vantive"] .btn-outline {
  border-color: var(--color-brand, #72256b);
  background-color: transparent;
  color: var(--color-brand, #72256b);
}
[data-theme="vantive"] .btn-outline:hover {
  background-color: var(--color-plum-lightest, #ecb6bc);
  border-color: var(--color-brand, #72256b);
  color: var(--color-plum-dark, #490a4d);
}
/* Success = interacción UI: verde oscuro, borde verde, minúsculas */
[data-theme="vantive"] .btn-success {
  background-color: var(--color-pine, #105742);
  border: 2px solid var(--color-pine, #105742);
  color: var(--color-cream, #fffaeb);
  text-transform: none;
  box-shadow: none;
}
[data-theme="vantive"] .btn-success:hover:not(:disabled) {
  box-shadow: none;
  background-color: var(--color-pine-light, #356962);
  border-color: var(--color-pine-light, #356962);
  color: var(--color-cream, #fffaeb);
}
/* Ghost = navegación; minúsculas */
.btn-ghost {
  box-shadow: none;
  text-transform: none;
}
.btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
[data-theme="vantive"] .btn-ghost:hover {
  background-color: var(--color-sage-light, #f0f7f3);
}

/* ========== Cards ========== */
.card {
  border-radius: var(--daisy-radius-box);
  overflow: hidden;
}
.card-body {
  padding: var(--daisy-card-p);
  gap: var(--daisy-space-3);
}
.card-actions {
  margin-top: var(--daisy-space-3);
  gap: var(--daisy-space-2);
}
/* Context: base-100 card on base-200 section = contrast; theme colors from DaisyUI */

/* ========== Hero ========== */
.hero {
  padding-top: var(--daisy-space-10);
  padding-bottom: var(--daisy-space-10);
}
@media (min-width: 768px) {
  .hero {
    padding-top: var(--daisy-space-12);
    padding-bottom: var(--daisy-space-12);
  }
}
.hero-content {
  padding-left: var(--daisy-space-4);
  padding-right: var(--daisy-space-4);
  max-width: 48rem;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* ========== Stats ========== */
.stats {
  border-radius: var(--daisy-radius-box);
  padding: 0;
}
.stat {
  padding: var(--daisy-space-4) var(--daisy-space-5);
  gap: var(--daisy-space-1);
}
.stat-title {
  font-family: var(--daisy-font-ui);
  font-size: 0.875rem;
  font-weight: var(--fw-medium, 500);
}
.stat-value {
  font-family: var(--daisy-font-heading);
  font-weight: var(--fw-bold, 700);
}
.stat-desc {
  font-size: 0.8125rem;
  opacity: 0.85;
}

/* ========== Form controls (select, label, input) ========== */
.form-control {
  gap: var(--daisy-space-1);
}
.label {
  padding-top: 0;
  padding-bottom: var(--daisy-space-1);
}
.label-text {
  font-family: var(--daisy-font-ui);
  font-size: 0.875rem;
  font-weight: var(--fw-medium, 500);
}
.select,
.input {
  padding: var(--daisy-btn-sm-py) var(--daisy-space-3);
  min-height: 2.5rem;
  border-radius: var(--daisy-radius-btn);
  font-family: var(--daisy-font-body);
}

/* ========== Alerts ========== */
.alert {
  padding: var(--daisy-space-4);
  border-radius: var(--daisy-radius-box);
  gap: var(--daisy-space-3);
}
/* Alert variants use DaisyUI theme; we only enforce padding and radius */
.alert-success { border-width: 1px; }
.alert-error { border-width: 1px; }
.alert-info { border-width: 1px; }

/* ========== Badge ========== */
.badge {
  font-family: var(--daisy-font-ui);
  font-weight: var(--fw-medium, 500);
  padding: var(--daisy-space-1) var(--daisy-space-3);
  border-radius: var(--daisy-radius-badge);
}
.badge-sm {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}
.badge-lg {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
}

/* ========== Breadcrumbs ========== */
.breadcrumbs {
  padding: var(--daisy-space-2) 0;
  font-size: 0.875rem;
  gap: var(--daisy-space-2);
}
.breadcrumbs > li > a:hover {
  opacity: 0.9;
}

/* ========== Steps ========== */
.steps {
  padding: var(--daisy-space-2) 0;
  gap: var(--daisy-space-2);
}
.step {
  font-family: var(--daisy-font-ui);
  font-size: 0.875rem;
}

/* ========== Join (button groups) ========== */
.join .btn:not(.btn-circle) {
  border-radius: 0;
}
.join .btn:not(.btn-circle):first-child {
  border-radius: var(--daisy-radius-btn) 0 0 var(--daisy-radius-btn);
}
.join .btn:not(.btn-circle):last-child {
  border-radius: 0 var(--daisy-radius-btn) var(--daisy-radius-btn) 0;
}
.join-vertical .btn:not(.btn-circle):first-child {
  border-radius: var(--daisy-radius-btn) var(--daisy-radius-btn) 0 0;
}
.join-vertical .btn:not(.btn-circle):last-child {
  border-radius: 0 0 var(--daisy-radius-btn) var(--daisy-radius-btn);
}

/* ========== Collapse (accordion) ========== */
.collapse {
  border-radius: var(--daisy-radius-box);
}
.collapse-title {
  padding: var(--daisy-space-4) var(--daisy-space-5);
  font-family: var(--daisy-font-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold, 600);
  min-height: 3.5rem;
}
.collapse-content {
  padding: 0 var(--daisy-space-5) var(--daisy-space-4);
  padding-top: 0;
}
.collapse-content > * {
  padding-top: var(--daisy-space-2);
}

/* ========== Menu ========== */
.menu {
  padding: var(--daisy-space-2);
  border-radius: var(--daisy-radius-box);
}
.menu li {
  border-radius: var(--daisy-radius-btn);
}
.menu li > * {
  padding: var(--daisy-space-3) var(--daisy-space-4);
  font-family: var(--daisy-font-body);
}
.menu-title {
  padding: var(--daisy-space-2) var(--daisy-space-4);
  font-family: var(--daisy-font-ui);
  font-weight: var(--fw-semibold, 600);
  font-size: 0.875rem;
}

/* ========== Tabs ========== */
.tabs {
  padding: var(--daisy-space-1);
  gap: var(--daisy-space-1);
}
.tabs-boxed .tab {
  padding: var(--daisy-space-2) var(--daisy-space-4);
  border-radius: var(--daisy-radius-btn);
  font-family: var(--daisy-font-ui);
  font-weight: var(--fw-medium, 500);
}

/* ========== Chat (testimonials) ========== */
.chat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0 0.75rem;
  max-width: 100%;
}

.chat .chat-image {
  grid-column: 1;
  grid-row: 1 / -1;
}

.chat .chat-header,
.chat .chat-bubble {
  grid-column: 2;
  min-width: 0;
}

/* chat-end: avatar a la derecha, header y bubble a la izquierda */
.chat-end {
  grid-template-columns: 1fr auto;
}

.chat-end .chat-image {
  grid-column: 2;
}

.chat-end .chat-header,
.chat-end .chat-bubble {
  grid-column: 1;
}

.chat .chat-header {
  margin-bottom: var(--daisy-space-1);
}

.chat-bubble {
  padding: var(--daisy-space-4);
  border-radius: var(--daisy-radius-box);
  max-width: 85%;
  position: relative;
}

/* Piquito (tail) pegado a la burbuja: quitar margen que separa el triángulo del texto */
.chat-start .chat-bubble::before {
  margin-right: 0 !important;
}

.chat-end .chat-bubble::before {
  margin-left: 0 !important;
}

/* ========== Footer ========== */
.footer {
  padding: var(--daisy-space-8) var(--daisy-space-4);
}
.footer-center .aside > * {
  font-family: var(--daisy-font-body);
  font-size: 0.875rem;
}
/* Footer uses neutral bg (dark) by default; keep content readable */
.footer.bg-neutral {
  color: var(--n-c, rgba(255,255,255,0.9));
}

/* ========== Swap (card flip) ========== */
.swap .swap-on,
.swap .swap-off {
  padding: var(--daisy-card-p);
}

/* ========== Diff ========== */
.diff {
  border-radius: var(--daisy-radius-box);
}
.diff-item-1,
.diff-item-2 {
  padding: var(--daisy-space-4);
}

/* ========== Timeline ========== */
.timeline {
  padding: var(--daisy-space-4) 0;
}
.timeline-start,
.timeline-end {
  padding: var(--daisy-space-3);
}
.timeline-middle {
  padding: var(--daisy-space-2);
}

/* ========== Drawer (course sidebar) ========== */
.drawer-content {
  min-height: 100vh;
}
.drawer-side .menu {
  padding: var(--daisy-space-4);
}

/* ========== Section wrappers (utility) ========== */
.daisy-section {
  padding: var(--daisy-section-py) var(--daisy-section-px);
}
@media (min-width: 768px) {
  :root {
    --daisy-section-px: 1.5rem;
    --daisy-section-py: 2.5rem;
    --daisy-section-py-lg: 3rem;
  }
}
.daisy-section--alt {
  border-bottom: 1px solid var(--b3, rgba(0,0,0,0.1));
}
.daisy-container {
  max-width: var(--daisy-container-md);
  margin-left: auto;
  margin-right: auto;
}
.daisy-container--narrow {
  max-width: var(--daisy-container-sm);
}