/* ==========================================================
   LadyBoss Academia · Tevello · Estilos definitivos v2.7.5
   🔧 Logo 42px/174px escritorio y móvil (+10%)
   ========================================================== */

/* ---------- VARIABLES GLOBALES ---------- */
:root {
  --lb-primary: #9b59b6;
  --lb-primary-dark: #8748a8;
  --lb-primary-light: #ece5f5;
  --lb-text: #2f2f2f;
  --lb-text-secondary: #555;
  --lb-bg-card: #ffffff;
  --lb-shadow: 0 12px 30px rgba(155, 89, 182, .08);
  --lb-shadow-hover: 0 20px 45px rgba(155, 89, 182, .16);
  --lb-radius: 22px;
  --lb-radius-mobile: 16px;
  --lb-font: 'Raleway', sans-serif;
  --lb-transition: .3s cubic-bezier(.25, .46, .45, .94);
}

/* ---------- FORZAR TEMA BLANCO (MODO CLARO SIEMPRE) ---------- */
:root,
html,
body,
[data-theme],
.dark,
.tw-dark,
[class*="dark"]:not(.video-js):not(.plyr):not([class*="player"]):not([class*="vjs"]) {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: var(--lb-text) !important;
}

.tw-card,
.tw-drawer-content,
.community-content,
.course-content,
.lesson-content,
.tw-bg-base-100,
.tw-bg-base-200,
.tw-bg-base-300,
.tw-prose {
  background-color: #ffffff !important;
  color: var(--lb-text) !important;
}

/* ---------- REEMPLAZO DE NOMBRE DE MARCA POR LOGO EN TEVELLO ---------- */
.tevello-brand,
.tevello-header-title,
a.tevello-brand,
.tw-navbar-start a,
.tw-navbar a[href*="tevello"],
.tw-navbar-start .tw-btn-ghost,
header [class*="brand"]:not([class*="account"]):not([class*="user"]):not([class*="login"]),
header [class*="logo"]:not([class*="account"]):not([class*="user"]):not([class*="login"]) {
  font-size: 0 !important;
  color: transparent !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0825/0907/0556/files/Logo_Authority.png?v=1786751640') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  min-width: 174px !important;
  height: 42px !important;
  display: inline-block !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* ---------- RESET Y BASE ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Font-family solo en elementos de texto */
body,
p, span, a, li, td, th,
h1, h2, h3, h4, h5, h6,
input, textarea, select, button,
.tw-card, .tw-card *,
.tw-prose, .tw-prose *,
.lesson-content, .lesson-content *,
.course-content, .course-content *,
.community-content, .community-content * {
  font-family: var(--lb-font) !important;
}

/* ---------- TARJETAS DE CURSOS / COMUNIDADES ---------- */
.tw-card {
  background: var(--lb-bg-card) !important;
  border-radius: var(--lb-radius) !important;
  overflow: visible;
  border: 1px solid var(--lb-primary-light) !important;
  box-shadow: var(--lb-shadow) !important;
  transition: transform var(--lb-transition), box-shadow var(--lb-transition) !important;
  margin-bottom: 1.5rem;
}

.tw-card figure {
  overflow: hidden !important;
  border-radius: var(--lb-radius) var(--lb-radius) 0 0 !important;
}

@media (hover: hover) {
  .tw-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--lb-shadow-hover) !important;
  }
}

/* ---------- IMÁGENES ---------- */
.tw-card figure img {
  border-radius: var(--lb-radius) var(--lb-radius) 0 0 !important;
  width: 100% !important;
  height: auto !important;
  transition: transform var(--lb-transition) !important;
}

@media (hover: hover) {
  .tw-card figure img:hover {
    transform: scale(1.03) !important;
  }
}

/* ---------- TÍTULOS Y TEXTOS DE TARJETAS (escritorio) ---------- */
.tw-card-title {
  font-weight: 700 !important;
  color: var(--lb-text) !important;
  letter-spacing: -0.03em;
  font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
  margin: 0.5rem 0.75rem 0.25rem !important;
  line-height: 1.3;
}

.tw-card-body p {
  font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
  line-height: 1.65 !important;
  color: var(--lb-text-secondary) !important;
  margin: 0 0.75rem 0.75rem !important;
}

/* ---------- TÍTULOS DE LECCIONES (en morado) ---------- */
.lesson-content h1,
.lesson-content h2,
.lesson-content h3,
.course-content h1,
.course-content h2,
.course-content h3,
.tw-prose h1,
.tw-prose h2,
.tw-prose h3,
[class*="lesson"] h1,
[class*="lesson"] h2,
[class*="lesson"] h3,
[class*="course"] h1,
[class*="course"] h2,
[class*="course"] h3 {
  color: var(--lb-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ---------- PROGRESO ---------- */
progress.tw-progress {
  width: 100% !important;
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  accent-color: var(--lb-primary) !important;
  border: none !important;
  background: var(--lb-primary-light) !important;
  margin: 0.25rem 0 !important;
}

progress.tw-progress::-webkit-progress-bar {
  background: var(--lb-primary-light) !important;
}
progress.tw-progress::-webkit-progress-value {
  background: var(--lb-primary) !important;
}
progress.tw-progress::-moz-progress-bar {
  background: var(--lb-primary) !important;
}

/* ---------- BOTONES ---------- */
.tw-card-actions .tw-btn,
.tw-card-actions button {
  background: var(--lb-primary) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
  padding: 0.7rem 1.8rem !important;
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(155, 89, 182, .20) !important;
  transition: transform var(--lb-transition), background .3s !important;
  cursor: pointer !important;
  display: inline-block !important;
  margin: 0.25rem 0.75rem 0.75rem !important;
}

@media (hover: hover) {
  .tw-card-actions .tw-btn:hover,
  .tw-card-actions button:hover {
    transform: translateY(-3px) !important;
    background: var(--lb-primary-dark) !important;
  }
}

/* --- ACCESIBILIDAD: foco visible en botones --- */
.tw-card-actions .tw-btn:focus-visible,
.tw-card-actions button:focus-visible,
.back-to-courses:focus-visible {
  outline: 2px solid var(--lb-primary) !important;
  outline-offset: 2px !important;
}

/* ==========================================================
   🎬 REPRODUCTOR (vídeo / audio) – ESTRUCTURA BASE
   ========================================================== */
.tw-aspect-video,
.video-js,
.plyr,
.tevello-player,
.video-container,
.player-container,
.video-wrapper,
[data-video],
[data-player] {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
  border-radius: var(--lb-radius) !important;
  overflow: hidden !important;
  display: block !important;
  margin: 0.5rem 0 !important;
  position: relative !important;
}

.tw-aspect-video iframe,
.video-js iframe,
.plyr iframe,
.tevello-player iframe,
.video-container iframe,
.player-container iframe,
.video-wrapper iframe,
iframe[src*="youtube"],
iframe[src*="vimeo"],
iframe[src*="tevello"],
iframe[src*="mediadelivery"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
  border-radius: var(--lb-radius) !important;
  display: block !important;
  margin: 0.5rem 0 !important;
}

audio {
  width: 100% !important;
  border-radius: 999px !important;
  margin: 0.5rem 0 !important;
}

/* ---------- ANIMACIÓN DE ENTRADA ---------- */
.tw-card {
  animation: lbFade .5s ease both;
}

@keyframes lbFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-card {
    animation: none !important;
  }
  .tw-card,
  .tw-card figure img,
  .tw-card-actions .tw-btn,
  .tw-card-actions button {
    transition: none !important;
  }
}

/* ==========================================================
   📱 AJUSTES EXCLUSIVOS PARA MÓVIL (max-width: 768px)
   ========================================================== */
@media (max-width: 768px) {

  /* Logo 42px/174px en móvil */
  .tevello-brand,
  .tevello-header-title,
  a.tevello-brand,
  .tw-navbar-start a,
  .tw-navbar a[href*="tevello"],
  .tw-navbar-start .tw-btn-ghost,
  header [class*="brand"]:not([class*="account"]):not([class*="user"]):not([class*="login"]),
  header [class*="logo"]:not([class*="account"]):not([class*="user"]):not([class*="login"]) {
    min-width: 174px !important;
    height: 42px !important;
  }

  .tw-card {
    border-radius: var(--lb-radius-mobile) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: 0 8px 20px rgba(155, 89, 182, .06) !important;
  }

  .tw-card figure {
    border-radius: var(--lb-radius-mobile) var(--lb-radius-mobile) 0 0 !important;
  }

  .tw-card figure img {
    border-radius: var(--lb-radius-mobile) var(--lb-radius-mobile) 0 0 !important;
  }

  .tw-card-title,
  .tw-card h1,
  .tw-card h2,
  .tw-card h3,
  [class*="course"] .tw-card-title,
  [class*="course"] h1,
  [class*="course"] h2,
  [class*="course"] h3,
  [class*="community"] .tw-card-title,
  [class*="community"] h1,
  [class*="community"] h2,
  [class*="community"] h3,
  [class*="collection"] .tw-card-title,
  [class*="collection"] h1,
  [class*="collection"] h2,
  [class*="collection"] h3 {
    font-size: 1.3rem !important;
    margin: 0.3rem 0.5rem 0.1rem !important;
  }

  .tw-card-body p {
    font-size: 0.95rem !important;
    margin: 0 0.5rem 0.75rem !important;
  }

  progress.tw-progress {
    height: 12px !important;
  }

  .tw-card-actions .tw-btn,
  .tw-card-actions button {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 999px !important;
    margin: 0.25rem 0 2rem !important;
    box-shadow: 0 6px 18px rgba(155, 89, 182, .15) !important;
  }

  .tw-aspect-video,
  .video-js,
  .plyr,
  .tevello-player,
  .video-container,
  .player-container,
  .video-wrapper,
  [data-video],
  [data-player] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: var(--lb-radius-mobile) !important;
    margin: 0.25rem 0 !important;
    position: relative !important;
    background: #000 !important;
  }

  .tw-aspect-video iframe,
  .video-js iframe,
  .plyr iframe,
  .tevello-player iframe,
  .video-container iframe,
  .player-container iframe,
  .video-wrapper iframe,
  iframe[src*="youtube"],
  iframe[src*="vimeo"],
  iframe[src*="tevello"],
  iframe[src*="mediadelivery"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 40vw !important;
    border: none !important;
    display: block !important;
  }

  video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: var(--lb-radius-mobile) !important;
    margin: 0.25rem 0 !important;
    display: block !important;
  }

  .video-js .vjs-control-bar,
  .plyr__controls,
  .tevello-player .controls {
    font-size: 14px !important;
    padding: 8px 12px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 0 0 var(--lb-radius-mobile) var(--lb-radius-mobile) !important;
  }

  .video-js .vjs-button,
  .plyr__controls button,
  .tevello-player button {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 18px !important;
  }

  .video-js .vjs-progress-holder,
  .plyr__progress,
  .tevello-player .progress-bar {
    height: 8px !important;
  }

  video::-webkit-media-controls-panel {
    padding: 8px 12px !important;
  }
  video::-webkit-media-controls-play-button,
  video::-webkit-media-controls-mute-button,
  video::-webkit-media-controls-fullscreen-button {
    transform: scale(1.2) !important;
  }
  video::-webkit-media-controls-timeline {
    height: 8px !important;
  }

  .lesson-content h1,
  .lesson-content h2,
  .lesson-content h3,
  .course-content h1,
  .course-content h2,
  .course-content h3,
  .tw-prose h1,
  .tw-prose h2,
  .tw-prose h3,
  [class*="lesson"] h1,
  [class*="lesson"] h2,
  [class*="lesson"] h3,
  [class*="course"] h1,
  [class*="course"] h2,
  [class*="course"] h3 {
    font-size: clamp(0.9rem, 3vw, 1.2rem) !important;
    line-height: 1.3 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .back-to-courses-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
  }

  .back-to-courses-wrapper label {
    flex: 0 0 auto !important;
    order: 1 !important;
    margin-bottom: 0 !important;
  }

  .back-to-courses {
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    line-height: 1.3 !important;
    width: 100% !important;
    padding: 0.3rem 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    font-size: 0.95rem !important;
    flex: 0 0 100% !important;
    order: 2 !important;
  }

  .community-content > h1:first-of-type,
  .community-content .tw-card-title:first-of-type,
  .tw-drawer-content .community-content h1,
  .tw-drawer-content .community-content .tw-card-title {
    margin-top: 2rem !important;
  }

  body,
  .page-wrapper,
  .tw-drawer-content,
  .community-content,
  .course-content,
  .lesson-content {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  .tw-card:hover {
    transform: none !important;
    box-shadow: var(--lb-shadow) !important;
  }

  .tw-card figure img:hover {
    transform: none !important;
  }

  .tw-card-actions .tw-btn:hover,
  .tw-card-actions button:hover {
    transform: none !important;
    background: var(--lb-primary) !important;
  }

  .community-content h2:not(:first-of-type),
  .course-content h2:not(:first-of-type),
  .lesson-content h2:not(:first-of-type) {
    margin-top: 2rem !important;
  }

  /* ==========================================================
     💬 MENCIONES @ EN MÓVIL (Tevello)
     ========================================================== */
  .editorWrapper,
  .ProseMirror,
  .tiptap,
  [contenteditable="true"] {
    overflow: visible !important;
  }

  .tippy-box,
  .tippy-content,
  .mention-list,
  .suggestion-list,
  .mentionSuggestions,
  .mentions-list,
  [data-tippy-root],
  [role="listbox"] {
    z-index: 999999 !important;
    max-width: 92vw !important;
    width: 92vw !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
  }

  .mention-list *,
  .suggestion-list *,
  .mentionSuggestions *,
  .mentions-list *,
  [role="option"] {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
  }

  .community-content,
  .course-content,
  .lesson-content,
  .tw-drawer-content {
    overflow: visible !important;
  }
}