/* Cursos Phantom — estilo Whop, modo oscuro. Un solo acento azul de marca para la única acción
   principal por pantalla; el resto vive en negros, grises y el dorado reservado a las estrellas. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  /* Colores (modo oscuro). El nombre de la variable quedó de cuando el acento era naranja; el
     color de marca real es este azul (#1754d7), con una sombra más oscura para el botón 3D. */
  --naranja: #1754d7;
  --naranja-sombra: #0f378c;
  --dorado: #ffb800;
  --fondo: #0a0a0a;
  --superficie: #161616;
  --superficie-2: #1e1e1e;
  --texto: #ffffff;
  --linea: #2a2a2a;
  --gris: #a1a1a6;
  --gris-2: #6e6e73;

  /* Tipografía */
  --f-display: 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --f-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaciado y formas */
  --radio-tarjeta: 20px;
  --radio-boton: 8px;
  --radio-chico: 4px;
  --radio-grande: 16px;
  --ancho-max: 1200px;
  --sombra-boton: 0 3px 0 0 var(--naranja-sombra);
}

* { box-sizing: border-box; }
/* Sin "rebote" al llegar al límite de la página (el hueco vacío que aparece arriba/abajo al
   pasarse con el scroll): overscroll-behavior corta ese efecto elástico ahí mismo. */
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--f-ui); font-size: 16px; line-height: 1.5; letter-spacing: -0.16px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.envoltura { max-width: var(--ancho-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Navegación ---------- */
/* Tres columnas (izquierda | centro | derecha). El buscador ya no vive en el encabezado — ahora
   está arriba de las filas por categoría, en el catálogo — pero se deja la columna central para
   que el logo y la sesión queden igual de acomodados en todas las páginas. Encabezado delgado: 56px. */
.nav { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.nav-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 56px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--texto); }
.logo b { color: inherit; font-weight: inherit; } /* "Phantom" en blanco, igual que "Cursos" */
.nav-links { display: flex; align-items: center; gap: 24px; justify-self: end; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--gris); }
.nav-links a:hover { color: var(--texto); }
.nav-buscador { display: flex; justify-content: center; min-width: 0; } /* columna central: vacía salvo que algo la use */

/* Botón simple de "volver" en el encabezado, en las páginas que no son el catálogo */
.nav-izq { display: flex; align-items: center; gap: 10px; justify-self: start; }
.nav-volver { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: none; border: none; color: var(--gris); flex: none; }
.nav-volver:hover { background: var(--superficie-2); color: var(--texto); }

/* ---------- Botón/avatar de sesión (encabezado) ---------- */
.nav-sesion { display: flex; align-items: center; gap: 18px; }
.nav-avatar { display: flex; width: 36px; height: 36px; border-radius: 999px; overflow: hidden; border: 1px solid var(--linea); flex: none; }

@keyframes girar { to { transform: rotate(360deg); } } /* la usan .btn-spinner y el buscador del catálogo */

/* En pantallas angostas el encabezado se aprieta mucho entre el logo, el botón de volver y la
   sesión — menos relleno a los costados, menos separación entre elementos. "Mis cursos" se sigue
   viendo igual que en escritorio, junto al avatar. */
@media (max-width: 640px) {
  .nav .envoltura { padding: 0 16px; }
  .nav-fila { gap: 10px; }
}

/* En pantallas muy angostas el nombre completo de la marca se achica un poco (en vez de
   esconderse): con el buscador fuera del encabezado ya hay espacio de sobra para que se vea junto
   al ícono, con o sin botón de volver. */
@media (max-width: 480px) {
  .logo { font-size: 19px; gap: 6px; }
}

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radio-boton); padding: 12px 24px; font-size: 16px; font-weight: 500; letter-spacing: -0.011em; white-space: nowrap; }
.btn-primario { background: var(--naranja); color: #fff; box-shadow: var(--sombra-boton); transition: transform .1s; }
.btn-primario:hover { transform: translateY(1px); box-shadow: 0 2px 0 0 var(--naranja-sombra); }
.btn-primario:active { transform: translateY(3px); box-shadow: none; }
/* Spinner dentro de un botón mientras procesa algo (comprar, etc.) — reemplaza el texto del botón */
.btn-spinner { display: inline-block; width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: girar .7s linear infinite; }
.btn-fantasma { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--linea); }
.btn-fantasma:hover { background: #262626; }
.btn-chico { padding: 8px 16px; font-size: 14px; border-radius: var(--radio-boton); }
.btn-ancho { width: 100%; }

/* ---------- Aviso de cookies ---------- */
.cookies-aviso { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; max-width: 460px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 20px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.cookies-txt { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.cookies-txt a { color: var(--texto); text-decoration: underline; }
.cookies-btns { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Modal de inicio de sesión ---------- */
dialog#dLogin { border: none; padding: 0; background: transparent; margin: auto; }
dialog#dLogin::backdrop { background: rgba(0,0,0,.6); }
.login-caja { width: 360px; max-width: calc(100vw - 40px); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 32px; text-align: center; }
.login-caja img { width: 44px; height: 44px; margin: 0 auto 20px; }
.login-caja h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--texto); }
.login-caja p { font-size: 14px; color: var(--gris); margin: 0 0 24px; }
.btn-google { background: #fff; color: #1f1f1f; width: 100%; }
.btn-google:hover { background: #f2f2f2; }
.login-cerrar { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--gris); font-size: 20px; line-height: 1; padding: 4px; }

/* ---------- Estrellas ---------- */
.estrellas { color: var(--dorado); letter-spacing: 1px; font-size: 13px; }
.fila-rating { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gris); margin-bottom: 8px; }
.fila-rating b { color: var(--texto); }

/* ---------- Catálogo ---------- */
/* Sin banner: un título grande (el h1 real de la página, para SEO) directo arriba del buscador —
   sin la caja del banner alrededor, el título necesita su propio peso visual para no verse como un
   subtítulo cualquiera. */
.catalogo-tit { font-family: var(--f-ui); font-weight: 700; font-size: clamp(34px, 5vw, 52px); line-height: 1.1; letter-spacing: -0.02em; margin: 36px 0 28px; color: var(--texto); }

/* ---------- Buscador del catálogo ---------- */
/* Ya no vive en el encabezado ni muestra un dropdown de "recomendaciones": filtra al instante, letra
   por letra, la misma lista de cursos que ya está en pantalla — sin espera ni spinner (son pocos
   cursos, filtrar en el navegador es inmediato). Vive arriba de las filas por categoría. */
.buscador-cat-envoltura { margin: 8px 0 32px; scroll-margin-top: 72px; } /* el margen es para que "Ver cursos" no la deje tapada bajo el encabezado fijo */
/* Mismo ancho que las etiquetas de categoría y la rejilla de cursos (todo el ancho de .envoltura,
   sin un max-width propio que lo achique). Mismas esquinas que las etiquetas (var(--radio-boton)),
   no la píldora redonda: se ve más "serio" y consistente con el resto del branding. */
.buscador-cat { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-boton); padding: 14px 20px; transition: border-color .15s, box-shadow .15s; }
.buscador-cat:focus-within { border-color: var(--naranja); box-shadow: 0 0 0 4px rgba(23,84,215,.18); }
.buscador-cat-icono { flex: none; color: var(--gris-2); }
.buscador-cat input { flex: 1; min-width: 0; background: none; border: none; color: var(--texto); font: inherit; font-size: 15px; }
.buscador-cat input::placeholder { color: var(--gris-2); }
.buscador-cat input:focus { outline: none; }

/* Sugerencias de autocompletado (solo texto: títulos de curso y nombres de autor que coinciden) —
   vive dentro de .buscador-cat, que ya es position:relative, así que no afecta su layout en flex. */
.buscador-cat-sug { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-boton); box-shadow: 0 12px 28px rgba(0,0,0,.35); overflow: hidden; }
.buscador-cat-sug-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 11px 16px; font-size: 14px; color: var(--texto); font-family: var(--f-ui); cursor: pointer; }
.buscador-cat-sug-item:hover, .buscador-cat-sug-item:focus { background: var(--superficie-2); }
@media (max-width: 640px) {
  .buscador-cat { padding: 12px 16px; }
}

/* ---------- Etiquetas de categoría ---------- */
/* De vuelta a una sola lista de cursos filtrada por etiqueta (sin subdividir en filas por
   categoría): esquinas levemente redondeadas en vez de la píldora totalmente redonda, para que se
   vean como filtros "serios" y no como botones — mismo azul de marca cuando está activa. */
.etiquetas { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 32px; scrollbar-width: none; scroll-margin-top: 72px; } /* el margen es para que el buscador no quede tapado bajo el encabezado fijo */
.etiquetas::-webkit-scrollbar { display: none; }
.etiqueta { flex: none; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--linea); background: var(--superficie); font-size: 14px; font-weight: 500; color: var(--gris); }
.etiqueta:hover { border-color: #3a3a3a; color: var(--texto); }
.etiqueta.on { background: var(--superficie-2); border-color: #3a3a3a; color: var(--texto); }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; padding-bottom: 80px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.tarjeta:hover { border-color: #3a3a3a; }
.tarjeta-img { aspect-ratio: 16/10; background: var(--superficie-2) center/cover no-repeat; position: relative; }
.tarjeta-etq { position: absolute; top: 12px; left: 12px; background: var(--texto); color: var(--fondo); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tarjeta-etq-prox { background: var(--superficie-2); color: var(--gris); border: 1px solid var(--linea); } /* curso "próximamente": visible, pero todavía no se puede comprar */
.tarjeta-cont { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta-tit { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 0; color: var(--texto); }
.tarjeta-desc { font-size: 13px; color: var(--gris); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-fecha { font-size: 12px; color: var(--gris-2); margin: 0; }

/* Foto del autor a la izquierda de TODO (tarjeta del catálogo): el título y "autor · categoría" van
   apilados a su derecha, las dos líneas juntas, no el título al lado y el resto abajo por separado. */
.tarjeta-fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tarjeta-avatar { flex: none; width: 32px; height: 32px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--gris); }
.tarjeta-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tarjeta-info .tarjeta-tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-autor { font-size: 13px; color: var(--gris); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vacio { text-align: center; padding: 80px 20px; color: var(--gris); }

/* ---------- Visualizador de curso ---------- */
/* padding-top/bottom nada más: como comparte el div con .envoltura, un "padding" en corto le
   quitaría el relleno lateral de los costados (24px) que ya pone esa clase */
.curso-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; padding-top: 40px; padding-bottom: 96px; }

.curso-preview { border-radius: var(--radio-grande); overflow: hidden; background: var(--superficie); aspect-ratio: 16/9; margin-bottom: 28px; position: relative; }
.curso-preview img { width: 100%; height: 100%; object-fit: cover; }
.curso-preview iframe { width: 100%; height: 100%; border: 0; }
.curso-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); }
.curso-play svg { width: 56px; height: 56px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

.curso-tit { font-family: var(--f-ui); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.02em; margin: 20px 0 24px; color: var(--texto); }

.seccion { padding: 40px 0; }
.seccion:first-of-type { padding-top: 0; } /* el título ya trae su propio espacio debajo (margin-bottom) */
.seccion h2 { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--texto); }
.prosa p { margin: 0 0 16px; color: #d4d4d8; }
.prosa p:last-child { margin-bottom: 0; }
.prosa h2 { font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; margin: 28px 0 12px; color: var(--texto); }
.prosa h2:first-child { margin-top: 0; }
.prosa ul { margin: 0 0 16px; padding-left: 20px; color: #d4d4d8; }
.prosa li { margin-bottom: 6px; }
.prosa b { color: var(--texto); font-weight: 600; }

.checklist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.checklist li { display: flex; gap: 10px; font-size: 15px; align-items: flex-start; color: #d4d4d8; }
.checklist li::before { content: "✓"; color: var(--naranja); font-weight: 700; flex: none; }

/* Bloque "Tu instructor" (página de venta del curso): foto, nombre y una sola línea de su bio, con
   un enlace discreto (no un botón llamativo) hacia su página de autor completa. */
.ins { display: flex; gap: 14px; align-items: flex-start; }
.ins-avatar { flex: none; width: 56px; height: 56px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--gris); }
.ins-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-info { min-width: 0; }
.ins-nombre { display: block; font-weight: 600; font-size: 16px; color: var(--texto); }
.ins-nombre:hover { text-decoration: underline; }
.ins-cargo { font-size: 13px; color: var(--gris); margin: 2px 0 0; }
.ins-bio { font-size: 14px; line-height: 1.6; color: #d4d4d8; margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ins-perfil { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 400; color: var(--gris-2); }
.ins-perfil:hover { color: var(--texto); text-decoration: underline; }

/* Contenido del curso (aparece solo tras la compra) */
.curriculo { border: 1px solid var(--linea); border-radius: var(--radio-grande); overflow: hidden; }
.curriculo-mod-tit { padding: 12px 16px; background: var(--superficie-2); font-weight: 600; font-size: 14px; border-top: 1px solid var(--linea); }
.curriculo-mod:first-child .curriculo-mod-tit { border-top: none; }
.curriculo-lec { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: #d4d4d8; border-top: 1px solid var(--linea); }
.curriculo-lec svg { flex: none; color: var(--gris-2); }

.faq-lista { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 4px 20px; transition: border-color .15s; }
.faq details:hover { border-color: #3a3a3a; }
.faq details[open] { border-color: #3a3a3a; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--texto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--superficie-2);
  color: var(--gris); font-weight: 400; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: transform .15s;
}
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0; padding-bottom: 18px; color: var(--gris); font-size: 14px; line-height: 1.6; }

/* Reseñas con barras de distribución, estilo Whop */
.resenas-resumen { display: flex; align-items: center; gap: 32px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.resenas-num { text-align: center; flex: none; }
.resenas-num b { display: block; font-size: 40px; font-family: var(--f-display); line-height: 1; color: var(--texto); }
.resenas-num span { font-size: 13px; color: var(--gris); }
.resenas-barras { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.rb-fila { display: grid; grid-template-columns: 40px 1fr 60px; align-items: center; gap: 10px; font-size: 13px; color: var(--gris); }
.rb-pista { background: var(--superficie-2); border-radius: 999px; height: 6px; overflow: hidden; }
.rb-relleno { background: var(--dorado); height: 100%; }
.resena { display: flex; gap: 12px; border-top: 1px solid var(--linea); padding: 20px 0; }
.resena:first-child { border-top: none; }
.resena-avatar { flex: none; width: 36px; height: 36px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--gris); }
.resena-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Círculo de avatar (encabezado, perfil, reseñas): si la foto de Google falla, se oculta sola y
   aparece esta inicial en su lugar (ver js/avatar.js), en vez del ícono de imagen rota. */
.avatar-inicial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--superficie-2); color: var(--gris); font-weight: 600; }

/* Animación de carga tipo "esqueleto": mucho más rápida de percibir que un texto de "Cargando…" */
.skeleton { background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-2) 37%, var(--superficie) 63%); background-size: 400% 100%; animation: brillo 1.4s ease infinite; border-radius: var(--radio-chico); }
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.resena-cont { flex: 1; min-width: 0; }
.resena-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.resena-nombre { font-weight: 600; font-size: 14px; color: var(--texto); }
.resena-fecha { font-size: 13px; color: var(--gris-2); flex: none; }
.resena p { margin: 6px 0 0; color: var(--gris); font-size: 15px; }

/* Popup con todas las reseñas, cargadas de a poco al hacer scroll */
dialog#dResenas, dialog#dAjuste { border: none; padding: 0; background: transparent; margin: auto; }
dialog#dResenas::backdrop, dialog#dAjuste::backdrop { background: rgba(0,0,0,.6); }
.resenas-modal { width: 560px; max-width: calc(100vw - 32px); max-height: min(80vh, 700px); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); display: flex; flex-direction: column; overflow: hidden; }
.resenas-modal-cab { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--linea); }
.resenas-modal-cab h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--texto); }
.resenas-modal-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.resenas-modal-lista .resena:first-child { border-top: none; }
.resenas-modal-cargando { text-align: center; padding: 16px; color: var(--gris-2); font-size: 13px; }

/* Formulario para dejar/editar una reseña (solo visible a quien compró el curso) */
.resena-form { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 20px; margin-bottom: 24px; }
.resena-form-estrellas { display: flex; gap: 6px; margin-bottom: 12px; }
.resena-estrella { background: none; border: none; padding: 0; font-size: 26px; line-height: 1; color: var(--linea); cursor: pointer; }
.resena-estrella.on { color: var(--dorado); }
.resena-form textarea { width: 100%; min-height: 90px; resize: vertical; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 12px; color: var(--texto); font: inherit; font-size: 14px; }
.resena-form textarea:focus { outline: none; border-color: var(--gris-2); }

/* Tarjeta flotante de compra: la miniatura va pegada a los bordes (mismo formato que la del
   catálogo), sin margen alrededor; el resto del contenido vive en su propio bloque con relleno. */
.compra { position: sticky; top: 96px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); overflow: hidden; }
.compra-portada { width: 100%; aspect-ratio: 16/10; background: var(--superficie-2) center/cover no-repeat; }
.compra-cont { padding: 20px; }
.compra-tit { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--texto); }
.compra-precio { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--texto); }
.compra-precio s { color: var(--gris-2); font-weight: 400; font-size: 15px; margin-left: 8px; }
.compra-botones { display: flex; flex-direction: column; gap: 10px; }
.compra-marca { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; font-size: 12px; color: var(--gris-2); }
.compra-marca b { color: var(--gris); }

/* Bloque de compra en móvil: aparece justo debajo del video, antes de la descripción; en
   escritorio no se muestra porque esa información ya vive en la tarjeta flotante de la derecha. */
.compra-movil { display: none; }
/* La calificación va SOBRE el título en móvil (igual que en la tarjeta de escritorio) */
.compra-movil-rating { display: none; }

/* Barra flotante de compra, fija abajo, solo en móvil */
.compra-flotante { display: none; }

footer { border-top: 1px solid var(--linea); padding: 32px 0; }
.pie-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.pie-fila a { font-size: 13px; color: var(--gris); margin-right: 20px; }
.pie-fila a:hover { color: var(--texto); }

@media (max-width: 860px) {
  .curso-layout { grid-template-columns: 1fr; padding-bottom: 96px; }
  .compra { display: none; } /* en móvil, esta info se muestra con .compra-movil, más arriba en el flujo */
  .compra-movil-rating { display: block; margin: 14px 0 2px; }
  .curso-tit { margin: 6px 0 14px; } /* más ajustado en móvil: la calificación ya da espacio arriba */
  .compra-movil { display: block; margin: 0 0 28px; } /* el título ya trae su propio espacio abajo */
  .checklist { grid-template-columns: 1fr; }
  .resenas-resumen { flex-direction: column; align-items: stretch; text-align: center; }
  /* La barra flotante solo se muestra (con JS, viendo si el botón de arriba salió de la pantalla)
     cuando ya no se ve el "Comprar ahora"/"Ver curso" que está más arriba, para no duplicar el CTA. */
  body.con-barra-flotante { padding-bottom: 76px; }
  .compra-flotante {
    display: none; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--superficie); border-top: 1px solid var(--linea); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  body.con-barra-flotante .compra-flotante { display: flex; }
  .compra-flotante .cf-precio { font-size: 16px; font-weight: 700; white-space: nowrap; }
  .compra-flotante .cf-precio s { color: var(--gris-2); font-weight: 400; font-size: 13px; margin-left: 4px; }
  .compra-flotante .btn { flex: 1; }
}

/* ---------- Visualizador de aprendizaje (aprender.html) ---------- */
/* Encabezado propio de esta página: sin marca ni "Mis cursos"/perfil, solo volver + el título del
   curso, y ocupando el ancho completo de la pantalla (sin el max-width de .envoltura). */
.apr-nav-fila { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 20px; }
.apr-nav-tit { font-family: var(--f-ui); font-weight: 600; font-size: 16px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ocupa toda la pantalla (sin el ancho máximo de .envoltura): a la izquierda el índice, con su
   propio scroll; a la derecha el video. Alto = 100vh menos el encabezado (72px + 1px de borde). */
.apr-layout { display: grid; grid-template-columns: 360px 1fr; height: calc(100vh - 73px); }

.apr-side { border-right: 1px solid var(--linea); height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.apr-scroll-delgado { scrollbar-width: thin; scrollbar-color: #333 transparent; }
.apr-scroll-delgado::-webkit-scrollbar { width: 6px; height: 6px; }
.apr-scroll-delgado::-webkit-scrollbar-track { background: transparent; }
.apr-scroll-delgado::-webkit-scrollbar-thumb { background: #333; border-radius: 999px; }
.apr-scroll-delgado::-webkit-scrollbar-thumb:hover { background: #444; }

.apr-progreso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 20px; margin-bottom: 16px; }
.apr-progreso-cab { font-weight: 700; font-size: 15px; color: var(--texto); margin-bottom: 4px; }
.apr-progreso-txt { margin: 0 0 12px; font-size: 13px; color: var(--gris); }
.apr-progreso-pista { flex: 1; background: var(--superficie-2); border-radius: 999px; height: 6px; overflow: hidden; }
.apr-progreso-relleno { background: var(--naranja); height: 100%; }
.apr-progreso-fila { display: flex; align-items: center; gap: 10px; }
.apr-progreso-pct { font-size: 13px; font-weight: 600; color: var(--texto); flex: none; }

/* Cada módulo es su propia tarjeta, separada de las demás */
.apr-mod-card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); margin-bottom: 12px; overflow: hidden; }
.apr-mod-cab { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: none; border: none; cursor: pointer; text-align: left; color: var(--texto); }
.apr-mod-cab:hover { background: var(--superficie-2); }
.apr-mod-flecha { flex: none; display: flex; transition: transform .15s; color: var(--gris); }
.apr-mod-card:not(.abierto) .apr-mod-flecha { transform: rotate(-90deg); }
.apr-mod-nombre { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apr-mod-check { flex: none; width: 22px; height: 22px; border-radius: 999px; background: rgba(74,222,128,.15); color: #4ade80; display: flex; align-items: center; justify-content: center; }

.apr-mod-lecciones { border-top: 1px solid var(--linea); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.apr-mod-card:not(.abierto) .apr-mod-lecciones { display: none; }

.apr-lec { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; background: none; border: none; border-radius: var(--radio-chico); text-align: left; cursor: pointer; color: var(--texto); }
.apr-lec:hover { background: var(--superficie-2); }
.apr-lec.on { background: var(--superficie-2); }
.apr-lec-thumb { flex: none; position: relative; width: 68px; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; background: var(--superficie-2); }
.apr-lec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apr-lec-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gris-2); }
.apr-lec-check { position: absolute; inset: 0; background: rgba(10,10,10,.55); display: flex; align-items: center; justify-content: center; color: #fff; }
.apr-lec-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apr-lec-tit { font-size: 13px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.apr-lec-sub { font-size: 12px; color: var(--gris-2); }

/* Lección bloqueada: solo se ve así antes de comprar el curso (aparte de la #1, siempre gratis) */
.apr-lec.bloqueada { cursor: not-allowed; opacity: .55; }
.apr-lec.bloqueada:hover { background: none; }
.apr-lec-lock { position: absolute; inset: 0; background: rgba(10,10,10,.45); display: flex; align-items: center; justify-content: center; color: #fff; }

/* Aviso de vista previa gratuita, arriba del reproductor, cuando aún no se compró el curso */
.apr-preview-aviso { display: flex; align-items: center; gap: 8px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px 14px; font-size: 13px; color: var(--gris); margin-bottom: 16px; max-width: 1000px; }
.apr-preview-aviso svg { flex: none; color: var(--naranja); }

.apr-main { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 28px 40px 60px; }
.apr-player { border-radius: var(--radio-grande); overflow: hidden; background: var(--superficie); aspect-ratio: 16/9; max-width: 1000px; }
.apr-player iframe { width: 100%; height: 100%; border: 0; }
.apr-sin-video { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gris-2); font-size: 14px; }
.apr-lec-titulo { font-family: var(--f-ui); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.02em; margin: 20px 0 16px; color: var(--texto); max-width: 1000px; }
.apr-acciones { display: flex; gap: 12px; flex-wrap: wrap; max-width: 1000px; }

@media (max-width: 860px) {
  .apr-layout { grid-template-columns: 1fr; height: auto; }
  /* Sin scroll propio en móvil: crece lo que necesite y se baja con el scroll general de la página */
  .apr-side { border-right: none; border-bottom: 1px solid var(--linea); height: auto; max-height: none; overflow-y: visible; order: 2; }
  .apr-main { order: 1; height: auto; overflow-y: visible; padding: 20px 16px 40px; }
  .apr-player, .apr-lec-titulo, .apr-acciones { max-width: none; }
}

/* ---------- Página de autor (/autor/<slug>/) ---------- */
.autor-banner { width: 100%; aspect-ratio: 6/1; min-height: 90px; object-fit: cover; border-radius: var(--radio-grande); display: block; margin-bottom: 20px; background: var(--superficie-2); }
.autor-cab { display: flex; align-items: center; gap: 16px; }
.autor-foto { flex: none; width: 88px; height: 88px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: var(--gris); }
.autor-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.autor-nombre { font-family: var(--f-ui); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; margin: 0; color: var(--texto); }
.autor-cargo { font-size: 14px; color: var(--gris); margin: 4px 0 0; }
.autor-bio { font-size: 15px; line-height: 1.6; color: #d4d4d8; max-width: 720px; margin: 20px 0 0; }
/* Mismas etiquetas ("yt-tag") para el canal de YouTube y para las demás redes: una fila de píldoras */
.autor-redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.yt-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--gris); }
.yt-tag:hover { color: var(--texto); border-color: #3a3a3a; }
.autor-cursos-tit { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 36px 0 20px; color: var(--texto); }
@media (max-width: 640px) {
  .autor-cab { gap: 12px; }
  .autor-foto { width: 64px; height: 64px; font-size: 22px; }
}

/* ---------- Panel de afiliado ---------- */
/* Minimalista, estilo Whop: el saldo bien grande arriba, una curva real de ganancia acumulada, el
   enlace para copiar, y a un lado las estadísticas — sin relleno ni landing de por medio. */
.afi-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; min-width: 0; }
.afi-saldo-label { font-size: 13px; color: var(--gris); margin-bottom: 6px; }
.afi-saldo { font-family: var(--f-ui); font-weight: 700; font-size: clamp(32px, 6vw, 44px); letter-spacing: -0.02em; margin-bottom: 28px; }
/* El gráfico siempre se ve (aunque no haya ventas todavía: se dibuja una línea plana en $0) */
.afi-grafico { display: block; width: 100%; height: 110px; margin-bottom: 32px; }
.afi-grafico polyline { fill: none; stroke: var(--naranja); stroke-width: 2; }

.afi-link-card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 24px; }
.afi-link-label { font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 10px; }
.afi-link-fila { display: flex; gap: 10px; }
.afi-link-fila input { flex: 1; min-width: 0; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio-boton); padding: 10px 14px; font-size: 14px; color: var(--texto); }
.afi-pct { font-size: 13px; color: var(--gris); margin: 14px 0 0; }
.afi-pct b { color: var(--texto); }

.afi-stats { position: sticky; top: 96px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 24px; }
.afi-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-bottom: 20px; }
.afi-stats-grid div { display: flex; flex-direction: column; gap: 2px; }
.afi-stats-grid b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.afi-stats-grid span { font-size: 12px; color: var(--gris-2); }
.afi-aviso { font-size: 13px; color: var(--gris); margin: 0 0 14px; }

.tabla-w { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.tabla-w table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.tabla-w th, .tabla-w td { padding: 12px 16px; text-align: left; }
.tabla-w th { color: var(--gris); font-weight: 500; border-bottom: 1px solid var(--linea); }
.tabla-w tr:not(:last-child) td { border-bottom: 1px solid var(--linea); }

/* Formulario de retiro: el <select> de método y sus campos dinámicos */
.afi-retiro-campo { margin-top: 14px; }
.afi-retiro-campo label { display: block; font-size: 13px; color: var(--gris); margin-bottom: 6px; }
.afi-retiro-campo input, .afi-retiro-campo textarea, .afi-retiro-campo select {
  width: 100%; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio-boton);
  padding: 10px 12px; font: inherit; color: var(--texto);
}

@media (max-width: 860px) {
  .afi-layout { grid-template-columns: 1fr; gap: 32px; }
  .afi-stats { position: static; }
}
@media (max-width: 480px) {
  .afi-link-fila { flex-direction: column; }
  .afi-link-fila input { width: 100%; }
  .afi-link-fila button { width: 100%; }
  .afi-stats-grid { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .tabla-w table { font-size: 12px; }
  .tabla-w th, .tabla-w td { padding: 10px 12px; }
}

/* ---------- Perfil ---------- */
/* Encabezado: nombre + avatar, sin estilos sueltos en el HTML */
.perfil-cab { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; }
.perfil-avatar { display: flex; width: 72px; height: 72px; border-radius: 999px; overflow: hidden; border: 1px solid var(--linea); flex: none; font-size: 26px; }
.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-nombre { font-family: var(--f-ui); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--texto); }
.perfil-correo { margin: 0; color: var(--gris); font-size: 14px; }

/* Lista de ajustes (Pagos, Seguridad, Notificaciones, Apariencia, Cuenta): tarjetas simples, ícono
   en un círculo (mismo lenguaje que los avatares del resto del sitio) y solo el borde se ilumina al
   pasar el mouse — nada de fondos grises pesados. */
.ajustes-lista { display: flex; flex-direction: column; gap: 10px; }
/* Cada fila es un solo <button> (.ajuste-cab.ajuste-card a la vez): la tarjeta visual Y el botón
   que abre su popup son el mismo elemento, así que sus reglas van juntas para no pisarse entre sí. */
.ajuste-cab.ajuste-card {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; font: inherit;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); color: var(--texto); cursor: pointer;
  transition: border-color .15s;
}
.ajuste-cab.ajuste-card:hover { border-color: #3a3a3a; }
.ajuste-icono { flex: none; width: 42px; height: 42px; border-radius: 999px; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; color: var(--gris); }
.ajuste-info { flex: 1; min-width: 0; }
.ajuste-tit { font-weight: 600; font-size: 15px; margin: 0 0 2px; }
.ajuste-sub { font-size: 13px; color: var(--gris); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajuste-flecha { flex: none; display: flex; color: var(--gris-2); }
.ajuste-tabla-vacio { color: var(--gris); font-size: 14px; margin: 0; }

/* Dentro de cada popup: agrupa varias filas (dato o interruptor) con una línea divisoria fina entre
   ellas — mismo criterio que la lista de reseñas — en vez de quedar todas pegadas sin separación. */
.ajuste-seccion { display: flex; flex-direction: column; }
.ajuste-seccion > * { padding: 14px 0; border-top: 1px solid var(--linea); }
.ajuste-seccion > *:first-child { border-top: none; padding-top: 0; }
.ajuste-seccion + .btn, .ajuste-seccion + p + .btn { margin-top: 18px; }

/* Fila de un dato dentro de un ajuste (correo, método de inicio de sesión, etc.) */
.ajuste-dato { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.ajuste-dato span:first-child { color: var(--gris); }
.ajuste-dato b { text-align: right; font-weight: 600; }

/* Interruptor on/off (Notificaciones, Apariencia) — 100% funcional, guarda al cambiar */
.interruptor-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.interruptor-fila p { margin: 0; font-size: 14px; }
.interruptor-fila span.ajuste-sub { display: block; margin-top: 2px; white-space: normal; }
.interruptor { position: relative; display: inline-flex; align-items: center; width: 40px; height: 22px; flex: none; }
.interruptor input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.interruptor .pista { position: absolute; inset: 0; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 999px; transition: background .15s, border-color .15s; }
.interruptor .bola { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--gris-2); transition: transform .15s, background .15s; }
.interruptor input:checked ~ .pista { background: var(--naranja); border-color: var(--naranja); }
.interruptor input:checked ~ .bola { transform: translateX(18px); background: #fff; }
.interruptor input:disabled ~ .pista { opacity: .5; }

/* Historial de pagos: tarjetas simples (miniatura + curso + fecha/método + monto), no una tabla
   apretada — dentro de un popup de 560px una tabla de 4 columnas quedaba cortada, sobre todo en
   móvil. Mismo lenguaje de "fila con divisor" que .ajuste-seccion. */
.pago-fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.pago-fila:first-child { border-top: none; padding-top: 0; }
.pago-img { flex: none; width: 56px; height: 40px; border-radius: 6px; background: var(--superficie-2) center/cover no-repeat; }
.pago-info { flex: 1; min-width: 0; }
.pago-tit { font-weight: 600; font-size: 14px; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.pago-sub { font-size: 12px; color: var(--gris-2); margin: 0; }
.pago-monto { flex: none; font-weight: 700; font-size: 14px; color: var(--texto); }

/* "Reducir animaciones" (perfil → Apariencia): apaga de verdad todas las transiciones/animaciones
   del sitio en este dispositivo, no solo las decorativas. */
html.sin-animaciones, html.sin-animaciones * { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }

/* ---------- Chat de soporte (solo en la página principal) ---------- */
/* Envoltorio fijo del botón + su insignia de notificación: al posicionar la insignia relativa a
   este envoltorio (no al botón ni con coordenadas propias), siempre queda pegada a su esquina sin
   importar si el botón es una píldora ancha (escritorio) o un círculo (móvil). */
.soporte-lanzador { position: fixed; right: 20px; bottom: 20px; z-index: 65; display: inline-flex; }
/* En escritorio se ve como una píldora con ícono + "Soporte Phantom AI" (para que se entienda que
   es un soporte con IA); en móvil, o mientras el panel está abierto, se reduce a un círculo simple. */
.soporte-boton {
  position: relative; height: 56px; border-radius: 999px; border: none;
  background: var(--naranja); color: #fff; box-shadow: var(--sombra-boton);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 20px 0 18px; cursor: pointer; white-space: nowrap;
  transition: transform .1s, padding .15s;
}
.soporte-boton:hover { transform: translateY(1px); }
.soporte-boton-icono { display: flex; flex: none; width: 22px; height: 22px; align-items: center; justify-content: center; }
.soporte-boton-icono img { width: 100%; height: 100%; object-fit: contain; }
.soporte-boton-texto { font-size: 14px; font-weight: 600; font-family: var(--f-ui); }
.soporte-boton.abierto { width: 56px; padding: 0; justify-content: center; }
.soporte-boton.abierto .soporte-boton-texto { display: none; }

/* Globo de "primer contacto", en escritorio y en móvil — aparece unos segundos después de cargar
   y se esfuma solo, para dar confianza sin interrumpir. Una sola vez por visita. */
.soporte-globo {
  position: fixed; right: 20px; bottom: 82px; z-index: 64; max-width: 220px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px;
  padding: 12px 14px; font-size: 13px; line-height: 1.4; color: var(--texto); font-family: var(--f-ui);
  box-shadow: 0 12px 28px rgba(0,0,0,.4); cursor: pointer;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.soporte-globo::after {
  content: ""; position: absolute; bottom: -6px; right: 26px; width: 12px; height: 12px;
  background: var(--superficie); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  transform: rotate(45deg);
}
.soporte-globo.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Punto de notificación sobre el botón — se enciende junto con el globo y se queda ahí (no se
   apaga con el globo) hasta que se abre el chat, para seguir llamando la atención sin ser el
   mensaje flotante permanentemente en pantalla. */
.soporte-boton-insignia {
  position: absolute; top: -3px; right: -3px; z-index: 66; width: 13px; height: 13px;
  border-radius: 999px; background: #ff3b30; border: 2px solid var(--fondo);
  opacity: 0; transform: scale(.5); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.soporte-boton-insignia.visible { opacity: 1; transform: scale(1); }

/* El panel se abre/cierra con el atributo [hidden] — sin esta regla, "display:flex" de abajo
   pesa más que el "display:none" por defecto del navegador y el popup queda siempre visible. */
.soporte-panel[hidden] { display: none; }
.soporte-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 65;
  width: 380px; height: 600px; max-height: calc(100vh - 108px);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande);
  box-shadow: 0 20px 48px rgba(0,0,0,.45);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .15s, height .15s;
}
.soporte-panel.soporte-grande { width: 440px; height: min(780px, calc(100vh - 108px)); }

/* Encabezado: logo + título + botones de agrandar/cerrar, todo en una sola barra (ya no hay
   pestaña de Inicio: el panel es directamente el chat). */
.sop-cab-mensajes { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
/* El punto verde va en un envoltorio aparte del círculo del logo: el logo necesita "overflow:
   hidden" para recortar la imagen a círculo, y eso mismo recortaba el punto si vivía adentro. */
.sop-cab-avatar { position: relative; flex: none; width: 34px; height: 34px; }
.sop-cab-logo { display: flex; width: 100%; height: 100%; border-radius: 999px; background: var(--superficie-2); align-items: center; justify-content: center; overflow: hidden; }
.sop-cab-logo img { width: 18px; height: 18px; object-fit: contain; }
.sop-cab-estado { position: absolute; bottom: -1px; right: -1px; z-index: 1; width: 11px; height: 11px; border-radius: 999px; background: #22c55e; border: 2px solid var(--superficie); }
.sop-cab-info { flex: 1; min-width: 0; }
.sop-cab-tit { margin: 0; font-family: var(--f-ui); font-weight: 600; font-size: 14.5px; color: var(--texto); }
.sop-cab-sub { margin: 1px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--gris-2); }
.sop-flotantes { flex: none; display: flex; gap: 2px; }
.soporte-icono { width: 30px; height: 30px; border-radius: 999px; border: none; background: none; color: var(--gris); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.soporte-icono:hover { background: var(--superficie-2); color: var(--texto); }

.soporte-msjs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.soporte-msjs::-webkit-scrollbar { width: 6px; }
.soporte-msjs::-webkit-scrollbar-track { background: transparent; }
.soporte-msjs::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 999px; }
.soporte-msj { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.soporte-msj-yo { align-self: flex-end; max-width: 82%; background: var(--naranja); color: #fff; border-bottom-right-radius: 4px; }

/* Mensajes de la IA: van con su "identidad" — un avatar de marca (logo blanco en círculo azul) y
   el nombre arriba, como el remitente de un chat real, no una burbuja suelta sin nadie detrás. */
.soporte-msj-fila { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; }
.soporte-avatar-ia { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--naranja); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 2px; }
.soporte-avatar-ia img { width: 14px; height: 14px; object-fit: contain; }
.soporte-msj-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.soporte-msj-nombre { margin: 0; font-size: 11px; font-weight: 600; color: var(--gris-2); }
.soporte-msj-bot { background: var(--superficie-2); color: var(--texto); border-bottom-left-radius: 4px; }
.soporte-escribiendo { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.soporte-escribiendo span { width: 6px; height: 6px; border-radius: 999px; background: var(--gris); animation: soporte-rebote 1.1s infinite ease-in-out; }
.soporte-escribiendo span:nth-child(2) { animation-delay: .15s; }
.soporte-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes soporte-rebote { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Tarjeta de curso dentro del chat (la IA la sugiere con [[CURSO:slug]]) — mismo componente
   .tarjeta del catálogo, solo que aquí ocupa el ancho completo del chat, no una columna de grilla. */
.soporte-tarjeta-msj { align-self: stretch; max-width: 92%; }
.soporte-tarjeta-msj .tarjeta { width: 100%; }
.soporte-tarjeta-msj .tarjeta-img { aspect-ratio: 16/9; }

/* Tarjeta de "soporte humano" (la IA la muestra con [[SOPORTE_HUMANO]], solo en casos que de
   verdad lo requieren) — botón de WhatsApp en verde, el color que la gente ya asocia a WhatsApp. */
.sop-tarjeta-humano { align-self: stretch; max-width: 92%; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 14px; padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sop-tarjeta-humano-icono { width: 40px; height: 40px; border-radius: 999px; background: var(--superficie); color: var(--gris); display: flex; align-items: center; justify-content: center; }
.sop-tarjeta-humano-tit { margin: 0; font-weight: 600; font-size: 14px; color: var(--texto); }
.sop-btn-whatsapp { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #05210f; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--radio-boton); text-decoration: none; transition: filter .15s; }
.sop-btn-whatsapp:hover { filter: brightness(1.08); }

/* Sin línea divisoria arriba: el input debe sentirse flotando dentro de la sección, no como una
   barra aparte pegada abajo. */
.soporte-compositor { flex: none; padding: 8px 14px 12px; }
.soporte-form { display: flex; align-items: flex-end; gap: 6px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 20px; padding: 5px 5px 5px 16px; transition: border-color .15s; }
.soporte-form:focus-within { border-color: #3a3a3a; }
/* El input crece con el texto (varias líneas) en vez de quedarse en una sola fila fija. */
.soporte-form textarea { flex: 1; resize: none; background: none; border: none; color: var(--texto); font-size: 14px; font-family: var(--f-ui); line-height: 1.4; padding: 9px 0; min-width: 0; max-height: 120px; overflow-y: auto; }
.soporte-form textarea:focus { outline: none; }
.soporte-form textarea::placeholder { color: var(--gris-2); }
.soporte-enviar { flex: none; width: 34px; height: 34px; margin-bottom: 3px; border-radius: 999px; border: none; background: var(--naranja); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s; }
.soporte-enviar:hover { transform: translateY(1px); }
.soporte-aviso { margin: 8px 0 0; text-align: center; font-size: 11px; color: var(--gris-2); }

@media (max-width: 640px) {
  /* Casi toda la pantalla, no un rectángulo pegado a los 4 bordes: se ve la página detrás arriba y
     el botón flotante se asoma abajo, como una hoja/tarjeta grande en vez de una página aparte. */
  .soporte-panel, .soporte-panel.soporte-grande {
    left: 10px; right: 10px; top: 48px; bottom: 86px; width: auto; height: auto; max-height: none;
    border-radius: 22px;
  }
  .soporte-lanzador { right: 16px; bottom: 16px; }
  .soporte-boton { width: 56px; padding: 0; justify-content: center; }
  .soporte-boton-texto { display: none; }
  .soporte-globo { right: 16px; bottom: 78px; }
  #soporteAgrandar { display: none; }
}