:root{
  --duo-green: #58CC02;
  --duo-green-dark: #46A302;
  --primary: #2f6bff;
  --primary2: #6a5cff;
}
body:not(.theme-premium){
  background-color: #f8f9fa;
}

h1 {
    color: #2d3e50;
}

/* todo el archivo bootstrap:

/* Ajustes visuales finales para el contenido de teoría */
.teoria-bootstrap {
  font-family: 'Segoe UI', sans-serif;
  background-color: #fff;
  max-width: 800px;
  margin: auto;
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
  padding: 1.5rem 1.5rem;
}

.teoria-bootstrap h2,
.teoria-bootstrap h5 {
  color: #0d6efd;
  margin-bottom: 1rem;
}

.teoria-bootstrap p,
.teoria-bootstrap ul {
  margin-bottom: 0.8rem;
}

.teoria-bootstrap ul {
  padding-left: 1.2rem;
}

.teoria-bootstrap ul li {
  margin-bottom: 0.5rem;
}

.teoria-bootstrap .card {
  margin-bottom: 0.15rem;
  border-radius: 0.5rem;
}

.teoria-bootstrap .card-body {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.teoria-bootstrap .alert {
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
}

.teoria-bootstrap .ratio {
  margin-bottom: 0,5rem;
}

/* Extra: evitar que el padding de .container cause espacios extra grandes */
.container.teoria-bootstrap {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

/* === Estilo para a teoria do verbo SER === */

.teoria-card {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  padding: 1rem;
  border-radius: 12px;
  max-width: 800px;
  margin: auto;
  color: #333;
  font-size: 1rem;
}

.teoria-card h2, .teoria-card h5 {
  color: #0d6efd;
}

.teoria-card p,
.teoria-card ul {
  margin-bottom: 0.8rem;
}

.teoria-card ul {
  padding-left: 1.5rem;
}

.teoria-card ul li {
  margin-bottom: 0.4rem;
}


.teoria-ser {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 12px;
    max-width: 800px;
    margin: auto;
    color: #333;
    line-height: 1.0;
}

.teoria-ser h2 {
    color: #0d6efd;
    margin-bottom: 1rem;
}

.teoria-ser p {
    margin-bottom: 1rem;
}

.teoria-ser .conjugacao,
.teoria-ser .exemplos,
.teoria-ser .dica,
.teoria-ser .resumo {
    background-color: #fff;
    padding: 1rem 1.5rem;
    border-left: 5px solid #0d6efd;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.teoria-ser strong {
    color: #0d6efd;
}

.teoria-ser ul {
    padding-left: 1.2rem;
}

.teoria-ser ul li {
    margin-bottom: 0.5rem;
}
.teoria-ser p {
  margin-bottom: 0.5rem;
}

.teoria-estar {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  padding: 2rem;
  border-radius: 12px;
  max-width: 800px;
  margin: auto;
  color: #333;
  line-height: 1.3; /* más compacto */
}

.grid-termos {
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.grid-termos span {
  background-color: #e7f1ff;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.95rem;
  color: #1a2a4a;
}
/* static/css/main.css */
/* Elementos arrastrables */
.draggable-item {
  display: flex;       /* que respete su ancho/alto */
  font-size: 1.25rem;          /* texto más grande */
  padding: 0.5rem 1rem;        /* relleno interno */
  min-width: 150px;            /* ancho mínimo */
  min-height: 3.5rem;          /* alto mínimo */
  line-height: 2.5rem;         /* para centrar vertical el texto */
  border-radius: 0.25rem;      /* bordes redondeados */
  margin: 0.25rem;             /* espacio entre ítems */
  cursor: move;
   background-color: #f5f5f5; /* cinza bem suave */
  border-radius: 0.5rem;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* sombra sutil */
  text-align: center;
  transition: transform 0.1s ease;
}
.draggable-item:active {
  transform: scale(0.98);
}


.bank-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, auto));
  /*grid-template-columns: repeat(2, 1fr);*/
  gap: 0.75rem;
  max-width: 700px;
  margin: 1rem auto;
}
 .drag-item:active {
    cursor: grabbing;
  }



  /* Placeholder de jQuery UI */
  .ui-state-highlight {
    height: 2rem;
    background: #e9ecef;
    border: 1px dashed #666;
  }

  /* Zonas de caída (huecos) */
  .drop-container,
  .drop-zone {
    min-height: 45px;
    width: block;           /* si solo quieres un ancho fijo en el banco, puedes quitarlo aquí */
    margin: .5rem;
    padding: .5rem;
    background: #7f9879;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: start;
  }




/* Aumenta el mínimo de alto y el padding de cada drag-item */
.drag-item {
  padding: 6px 12px;       /* Ajusta a tu gusto */
  min-height: 40px;        /* Para que sea más alto */
  display: flex;
  align-items: center;
  border-radius: 4px;
  cursor: default;
  width: 250px;

}

/* Si quieres forzar el fondo gris y texto blanco: */
.drag-item.bg-secondary {
  background: #e9ecef;
  color: #ad8686   ;
}
.drag-item {
  padding: 6px 12px;     /* Espacio suficiente para que el texto se lea */
  min-height: 40px;       /* Alto mínimo para no verse “chiquito” */
  background-color: #f0f2f5; /* Gris secundario de Bootstrap */
                /* Texto blanco */
  border-radius: 4px;
  cursor: default;
  width: 100%;               /* Ocupa todo el ancho del contenedor */
  text-align: center;        /* Centrar el texto dentro del rectángulo */
}
drop-container {
  min-height: 60px;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background-color: transparent; /* ya no queda gris siempre */
}
.drop-over {

  border-color: #007bff;
}
.sidebar-ejercicios {
  position: sticky;
  top: 80px; /* ajustá según navbar */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* Hover suave para los ejercicios de la lista */
.sidebar-ej-item {
  border-left: 3px solid transparent;
  transition: all 0.15s ease-in-out;
}

.sidebar-ej-item:hover {
  background-color: #f3f6ff;
  border-left-color: #6420FF;
}
/* 🧱 Sidebar de ejercicios: fija y con scroll interno */
.sidebar-ejercicios {
  position: sticky;
  top: 1rem;                         /* distancia desde el top */
  max-height: calc(100vh - 2rem);    /* ocupa casi toda la altura de la ventana */
  overflow-y: auto;                  /* scroll solo dentro de la columna */
}

/* Tarjetas dentro de la sidebar */
.sidebar-card {
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* Header de las tarjetas de la sidebar */
.sidebar-card-header {
  background: linear-gradient(135deg, #00C4CC, #6420FF);
  color: #fff;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Ítems de la lista de ejercicios */
.sidebar-ej-item {
  border: none;
  border-radius: 0.5rem;
  margin-bottom: 2px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.sidebar-ej-item:hover {
  background-color: #f3f7ff;
  transform: translateX(2px);
}

/* Título y tipo del ejercicio en la sidebar */
.sidebar-ej-title {
  font-size: 0.8rem;
  line-height: 1.25;
}

.sidebar-ej-tipo {
  font-size: 0.7rem;
}

/* Ícono de estado a la derecha (circulito) */
.sidebar-ej-item i {
  font-size: 0.75rem;
}

.tr {
  cursor: help;
  border-bottom: 1px dotted #6c757d;
}
/* ====== THEME PRO (forzado) ====== */
:root{
  --bg: #f4f7ff;
  --card: #ffffff;
  --text: #0b1220;
  --muted: #5b6b83;
  --border: rgba(15, 23, 42, 0.10);

  --primary: #2f6bff;
  --primary2: #6a5cff;
  --success: #18a957;

  --radius: 18px;
  --shadow: 0 16px 40px rgba(15,23,42,.08);
}

body.ui-pro{
  background:
    radial-gradient(1000px 500px at 8% 0%, rgba(47,107,255,.14), transparent 60%),
    radial-gradient(800px 450px at 100% 0%, rgba(106,92,255,.12), transparent 55%),
    var(--bg) !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  color: var(--text) !important;
}

/* =========================
   NAVBAR PRO (global)
========================= */
.navbar{
  background: #ffffff !important;                 /* blanco real, no gris */
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* Si querés efecto “glass” SOLO en claro (opcional) */
/*
.navbar{
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(10px);
}
*/

.card, .card-soft{
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(47,107,255,.18);
}
.btn-primary:hover{ filter: brightness(.98); }

.progress{ border-radius: 999px !important; height: 18px; }
.progress-bar{ border-radius: 999px !important; }

.pill-badge{
  border-radius: 999px !important;
  padding: .35rem .8rem !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  background: rgba(47,107,255,.10) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(47,107,255,.18) !important;
}

/* ===============================
   DASHBOARD COLORIDO (DUOLINGO)
   (SOLO dentro de .ui-duolingo)
   =============================== */

.ui-duolingo{
  --duo-bg: #EAF4FF;
  --duo-card: #ffffff;
  --duo-text: #102A43;
  --duo-muted: #627D98;

  --duo-green: #58CC02;
  --duo-green-dark: #46A302;
  --duo-blue: #1CB0F6;
  --duo-purple: #6A5CFF;
  --duo-yellow: #FFD000;

  --radius: 20px;
  --shadow: 0 18px 45px rgba(16,42,67,.14);
  --shadow-soft: 0 10px 26px rgba(16,42,67,.10);
  --border: rgba(16,42,67,.10);
}

/* Fondo con blobs (más color) SOLO para el dashboard */
body{
  /* no lo toco global acá */
}

body:has(.ui-duolingo){
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(28,176,246,.28), transparent 60%),
    radial-gradient(850px 520px at 100% 10%, rgba(88,204,2,.22), transparent 58%),
    radial-gradient(650px 420px at 55% 90%, rgba(255,208,0,.22), transparent 60%),
    linear-gradient(180deg, #F7FBFF, #ECF4FF) !important;
  color: var(--duo-text) !important;
}

/* Top bar más pro */
.top-bar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(16,42,67,.10) !important;
}

.brand{
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--duo-purple) !important;
}

/* Cards más vivas */
.ui-duolingo .card-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* Cards de niveles */
.ui-duolingo .level-card{
  border-radius: 18px !important;
  border: 1px solid rgba(16,42,67,.10) !important;
  box-shadow: var(--shadow-soft) !important;
  background:
    radial-gradient(220px 120px at 30% 0%, rgba(28,176,246,.22), transparent 70%),
    radial-gradient(260px 130px at 95% 10%, rgba(106,92,255,.16), transparent 70%),
    #ffffff !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.ui-duolingo .level-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(16,42,67,.16) !important;
}

/* Progreso */
.ui-duolingo .progress{
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(16,42,67,.08) !important;
}
.ui-duolingo .progress-bar{
  border-radius: 999px !important;
}

/* ✅ Botón principal VERDE Duolingo (solo dashboard) */
.ui-duolingo .btn.btn-primary{
  background: var(--duo-green) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 0 var(--duo-green-dark) !important;
  transition: transform .08s ease, filter .12s ease !important;
}
.ui-duolingo .btn.btn-primary:hover{
  filter: brightness(.98) !important;
}
.ui-duolingo .btn.btn-primary:active{
  transform: translateY(2px) !important;
  box-shadow: 0 6px 0 var(--duo-green-dark) !important;
}

/* Badge más color */
.ui-duolingo .pill-badge{
  background: rgba(106,92,255,.14) !important;
  color: #3b2fff !important;
  border: 1px solid rgba(106,92,255,.22) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* Bloque de nivelamento: destacarlo más */
.ui-duolingo .card.shadow-sm.border-primary{
  border: 1px solid rgba(28,176,246,.25) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background:
    radial-gradient(320px 180px at 0% 0%, rgba(28,176,246,.18), transparent 70%),
    radial-gradient(320px 180px at 100% 100%, rgba(255,208,0,.16), transparent 70%),
    #ffffff !important;
}

.ui-duolingo .text-muted{ color: var(--duo-muted) !important; }

/* ==========================
   DASHBOARD DARK + FIGURES
   solo cuando body tiene .ui-dark
   ========================== */

.ui-dark{
  --bg0: #070B18;          /* base */
  --bg1: #0B1635;          /* azul profundo */
  --stroke: rgba(255,255,255,.10);
  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.12);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --duo-green: #58CC02;
  --duo-green-dark: #46A302;
  --duo-blue: #1CB0F6;
  --duo-purple: #6A5CFF;
  --duo-yellow: #FFD000;

  --radius: 20px;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow-soft: 0 12px 30px rgba(0,0,0,.35);
}

/* Fondo oscuro con figuras */
body.ui-dark{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(106,92,255,.35), transparent 60%),
    radial-gradient(820px 520px at 100% 10%, rgba(28,176,246,.28), transparent 58%),
    radial-gradient(650px 420px at 55% 95%, rgba(88,204,2,.20), transparent 60%),
    radial-gradient(520px 340px at 20% 95%, rgba(255,208,0,.18), transparent 65%),
    linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
  color: var(--text) !important;
}

/* Texto muted en oscuro */
body.ui-dark .text-muted,
body.ui-dark small.text-muted{
  color: var(--muted) !important;
}

/* Top bar estilo “glass” */
body.ui-dark .top-bar{
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke) !important;
}

/* Marca */
body.ui-dark .brand{
  color: var(--duo-blue) !important;
  font-weight: 900;
}

/* Cards (card-soft, .card) estilo glass */
body.ui-dark .card-soft,
body.ui-dark .card{
  background: linear-gradient(180deg, var(--glass2), var(--glass)) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* Card-body un poco más aire */
body.ui-dark .card-body{ color: var(--text) !important; }

/* Progreso visible en fondo oscuro */
body.ui-dark .progress{
  background: rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  height: 18px !important;
}
body.ui-dark .progress-bar{
  border-radius: 999px !important;
}

/* ✅ Botón principal verde Duolingo */
body.ui-dark .btn.btn-primary{
  background: var(--duo-green) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 0 var(--duo-green-dark) !important;
  transition: transform .08s ease, filter .12s ease !important;
}
body.ui-dark .btn.btn-primary:hover{ filter: brightness(.98) !important; }
body.ui-dark .btn.btn-primary:active{
  transform: translateY(2px) !important;
  box-shadow: 0 6px 0 var(--duo-green-dark) !important;
}

/* Botón outline en oscuro (logout / ver planes) */
body.ui-dark .btn-outline-secondary,
body.ui-dark .btn-outline-primary{
  color: var(--text) !important;
  border-color: rgba(255,255,255,.22) !important;
}
body.ui-dark .btn-outline-secondary:hover,
body.ui-dark .btn-outline-primary:hover{
  background: rgba(255,255,255,.10) !important;
}

/* NIVELES: cards más “app” */
body.ui-dark .level-card{
  background:
    radial-gradient(220px 120px at 30% 0%, rgba(28,176,246,.22), transparent 70%),
    radial-gradient(260px 130px at 95% 10%, rgba(106,92,255,.18), transparent 70%),
    rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
body.ui-dark .level-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
}

/* Títulos azules de bootstrap: en oscuro quedan mejor claros */
body.ui-dark .text-primary{ color: rgba(255,255,255,.95) !important; }
body.ui-dark .border-primary{ border-color: rgba(28,176,246,.35) !important; }

/* Bloque de nivelamento: que destaque */
body.ui-dark .card.shadow-sm.border-primary{
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(28,176,246,.20), transparent 70%),
    radial-gradient(420px 220px at 100% 100%, rgba(255,208,0,.14), transparent 70%),
    rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: var(--shadow) !important;
}

/* ==========================
   FIX: bloques demasiado blancos (ui-dark)
   ========================== */

/* Biblioteca: la columna derecha tiene bg-light */
body.ui-dark .bg-light{
  background: rgba(255,255,255,.06) !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
}

/* Biblioteca: texto y emoji más integrados */
body.ui-dark .bg-light .fw-semibold{
  color: rgba(255,255,255,.90) !important;
}
body.ui-dark .bg-light [style*="font-size:60px"]{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  opacity: .95;
}

/* Certificados: list-group en oscuro */
body.ui-dark .list-group{
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: transparent !important;
}

/* Cada item (antes blanco) */
body.ui-dark .list-group-item{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.90) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Separadores más suaves */
body.ui-dark .list-group-item + .list-group-item{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Small dentro del item */
body.ui-dark .list-group-item small{
  color: rgba(255,255,255,.70) !important;
}

/* Card-title en oscuro */
body.ui-dark .card-title{
  color: rgba(255,255,255,.95) !important;
}

/* Si hay párrafos muted dentro de cards */
body.ui-dark .card p.text-muted{
  color: rgba(255,255,255,.72) !important;
}

/* ==========================
   LEVEL CARDS – colores por nivel
   ========================== */

.level-card{
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
  box-shadow: 0 14px 35px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}

.level-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(0,0,0,.20);
}

/* Textos dentro */
.level-card .level-title{
  font-weight: 900 !important;
  letter-spacing: .02em;
}

.level-card .level-sub{
  opacity: .95;
}

/* Barra superior decorativa */
.level-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 6px;
  background: rgba(255,255,255,.55);
}

/* --- Paleta por nivel (agradable tipo app) --- */
.lvl-a1{ background: linear-gradient(135deg, #5AC8FA, #007AFF) !important; }
.lvl-a2{ background: linear-gradient(135deg, #34D399, #10B981) !important; }
.lvl-b1{ background: linear-gradient(135deg, #FBBF24, #F59E0B) !important; }
.lvl-b2{ background: linear-gradient(135deg, #FB7185, #E11D48) !important; }
.lvl-c1{ background: linear-gradient(135deg, #A78BFA, #6D28D9) !important; }
.lvl-c2{ background: linear-gradient(135deg, #94A3B8, #334155) !important; }

/* Texto blanco en tarjetas color */
.lvl-a1 .level-title, .lvl-a2 .level-title, .lvl-b1 .level-title,
.lvl-b2 .level-title, .lvl-c1 .level-title, .lvl-c2 .level-title{
  color: rgba(255,255,255,.95) !important;
}
.lvl-a1 .level-sub, .lvl-a2 .level-sub, .lvl-b1 .level-sub,
.lvl-b2 .level-sub, .lvl-c1 .level-sub, .lvl-c2 .level-sub{
  color: rgba(255,255,255,.88) !important;
}

/* Si estás en modo oscuro (ui-dark), subimos contraste un poquito */
body.ui-dark .level-card::before{
  background: rgba(255,255,255,.35);
}

/* FORZADO: colores por nivel (pegar al FINAL) */
.card.level-card.lvl-a1{ background: linear-gradient(135deg,#5AC8FA,#007AFF) !important; }
.card.level-card.lvl-a2{ background: linear-gradient(135deg,#34D399,#10B981) !important; }
.card.level-card.lvl-b1{ background: linear-gradient(135deg,#FBBF24,#F59E0B) !important; }
.card.level-card.lvl-b2{ background: linear-gradient(135deg,#FB7185,#E11D48) !important; }
.card.level-card.lvl-c1{ background: linear-gradient(135deg,#A78BFA,#6D28D9) !important; }
.card.level-card.lvl-c2{ background: linear-gradient(135deg,#94A3B8,#334155) !important; }

.card.level-card .level-title,
.card.level-card .level-sub{
  color: rgba(255,255,255,.92) !important;
}

.card.level-card{
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.12) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.card.level-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 55px rgba(0,0,0,.20) !important;
}
.dashboard-footer{
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.12);
}
body.ui-dark .dashboard-footer .text-muted{ color: rgba(255,255,255,.70) !important; }
body.ui-dark .dashboard-footer a{ color: rgba(255,255,255,.92) !important; }


/* ==========================
   ELEGIR TEMA – UI PRO
   ========================== */

.page-temas .tema-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.page-temas .tema-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
}

.page-temas .badge{
  border-radius: 999px;
  font-weight: 800;
}

.page-temas .progress{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

.page-temas .progress-bar{
  border-radius: 999px;
}

/* ==========================
   PAGE WRAPPER (igual dashboard)
   ========================== */

.ui-dark.page-temas{
  min-height: 100vh;
  padding-bottom: 1rem;

  background:
    radial-gradient(900px 500px at 10% 0%, rgba(88,204,2,.14), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(28,176,246,.18), transparent 60%),
    radial-gradient(1000px 650px at 50% 120%, rgba(255,208,0,.10), transparent 65%),
    #0b1220;
  color: rgba(255,255,255,.92);
}

/* Card soft igual dashboard */
.ui-dark.page-temas .card-soft,
.ui-dark.page-temas .card{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
}

/* Muted en dark */
.ui-dark.page-temas .text-muted{
  color: rgba(255,255,255,.70) !important;
}

/* Inputs y alert light en dark */
.ui-dark.page-temas .alert-light{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.88) !important;
}

/* Botones */
.ui-dark.page-temas .btn-primary{
  background: #58CC02 !important;
  border: none !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 0 rgba(70,163,2,.35) !important;
}
.ui-dark.page-temas .btn-primary:hover{ filter: brightness(.98); }
.ui-dark.page-temas .btn-primary:active{ transform: translateY(1px); }

.ui-dark.page-temas .btn-outline-secondary{
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.20) !important;
}
.ui-dark.page-temas .btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Progress */
.ui-dark.page-temas .progress{
  background: rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
}
.ui-dark.page-temas .progress-bar{
  border-radius: 999px !important;
}

/* ==========================
   TEMA CARDS – DARK FIX
   ========================== */

/* Forzar color claro dentro del card */
.ui-dark.page-temas .card,
.ui-dark.page-temas .card *{
  color: rgba(255,255,255,.92) !important;
}

/* Títulos un poco más brillantes */
.ui-dark.page-temas .card-title{
  color: #ffffff !important;
}

/* Texto secundario */
.ui-dark.page-temas .card-text{
  color: rgba(255,255,255,.75) !important;
}

/* Hover animado */
.ui-dark.page-temas .card{
  transition: transform .18s ease, box-shadow .18s ease !important;
  cursor: pointer;
}

.ui-dark.page-temas .card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(0,0,0,.55) !important;
}

/* Badge en dark */
.ui-dark.page-temas .badge{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* Progress en dark */
.ui-dark.page-temas .progress{
  background: rgba(255,255,255,.12) !important;
}

/* Badge "Tema XX" destacado (azul) */
.ui-dark.page-temas .tema-badge{
  background: rgba(28,176,246,.20) !important;   /* azul tipo Duolingo */
  border: 1px solid rgba(28,176,246,.35) !important;
  color: #EAF7FF !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  border-radius: 999px !important;
  padding: .35rem .7rem !important;
  box-shadow: 0 10px 24px rgba(28,176,246,.18) !important;
}

/* ===== Ejercicios: layout premium ===== */
.ej-layout { gap: 1.25rem; }

.ej-main .card{
  border: 1px solid rgba(31,41,55,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(17,24,39,.08) !important;
}

.ej-main .card:hover{
  transform: translateY(-2px);
  transition: .15s ease;
  box-shadow: 0 18px 40px rgba(17,24,39,.12) !important;
}

.ej-main .card-footer{
  background: rgba(255,255,255,.65) !important;
  border-top: 1px solid rgba(31,41,55,.08) !important;
}

.badge-soft{
  border-radius: 999px;
  font-weight: 800;
  padding: .35rem .6rem;
}

/* ====== Ejercicios: tema aplicado correctamente SOLO si body tiene ui-duolingo ====== */
body.ui-duolingo{
  --duo-bg: #F3F8FF;
  --duo-card: #ffffff;
  --duo-text: #1f2937;
  --duo-muted: #6b7280;
  --duo-border: rgba(31,41,55,.10);
  --duo-green: #58CC02;
  --duo-green-dark: #46A302;
  --duo-blue: #1CB0F6;

  background:
    radial-gradient(900px 500px at 10% 0%, rgba(28,176,246,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(88,204,2,.14), transparent 55%),
    var(--duo-bg) !important;
  color: var(--duo-text) !important;
}

/* cards premium en la columna derecha */
body.ui-duolingo .ej-main .card{
  border-radius: 18px !important;
  border: 1px solid var(--duo-border) !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.08) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
body.ui-duolingo .ej-main .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(17,24,39,.12) !important;
}

/* botones: verde duolingo */
body.ui-duolingo .btn-primary{
  background: var(--duo-green) !important;
  border: none !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 0 rgba(70,163,2,.35) !important;
}
body.ui-duolingo .btn-primary:hover{ filter: brightness(.98); }
body.ui-duolingo .btn-primary:active{ transform: translateY(1px); }

/* =========================
   DARK THEME (Ejercicios)
   Activa con: body.ui-duolingo.ui-dark
========================= */
body.ui-duolingo.ui-dark{
  --bg0: #0b1020;
  --bg1: #0f1730;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --text: #eaf0ff;
  --muted: rgba(234,240,255,.72);

  --duo-green: #58CC02;
  --duo-blue: #1CB0F6;

  background:
    radial-gradient(900px 520px at 10% 0%, rgba(28,176,246,.20), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, rgba(88,204,2,.16), transparent 55%),
    radial-gradient(700px 420px at 50% 120%, rgba(106,92,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0)) !important;

  color: var(--text) !important;
}

body.ui-duolingo.ui-dark .text-muted,
body.ui-duolingo.ui-dark small.text-muted{
  color: var(--muted) !important;
}

body.ui-duolingo.ui-dark .card,
body.ui-duolingo.ui-dark .sidebar-card,
body.ui-duolingo.ui-dark .accordion-item{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
}

body.ui-duolingo.ui-dark .card-header,
body.ui-duolingo.ui-dark .accordion-button{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

body.ui-duolingo.ui-dark .accordion-button:not(.collapsed){
  background: rgba(28,176,246,.12) !important;
}

body.ui-duolingo.ui-dark .list-group-item{
  background: rgba(255,255,255,.05) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

body.ui-duolingo.ui-dark .btn-primary{
  background: var(--duo-green) !important;
  border: none !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 0 rgba(70,163,2,.35) !important;
}

body.ui-duolingo.ui-dark .btn-outline-primary{
  color: var(--duo-blue) !important;
  border-color: rgba(28,176,246,.45) !important;
}
body.ui-duolingo.ui-dark .btn-outline-primary:hover{
  background: rgba(28,176,246,.14) !important;
}

body.ui-duolingo.ui-dark .form-control,
body.ui-duolingo.ui-dark .form-select{
  background: rgba(255,255,255,.06) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.ui-duolingo.ui-dark .form-control::placeholder{
  color: rgba(234,240,255,.55) !important;
}

/* =========================
   TEORÍA + ACORDEÓN (dark)
   Para ejercicios.html
========================= */

body.ui-duolingo.ui-dark #accordionTeoria .accordion-item{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

body.ui-duolingo.ui-dark #accordionTeoria .accordion-button{
  background: rgba(255,255,255,.06) !important;
  color: #eaf0ff !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

body.ui-duolingo.ui-dark #accordionTeoria .accordion-button:not(.collapsed){
  background: rgba(28,176,246,.12) !important;
}

body.ui-duolingo.ui-dark #accordionTeoria .accordion-button::after{
  filter: invert(1) brightness(1.2); /* ícono flecha visible */
}

body.ui-duolingo.ui-dark #accordionTeoria .accordion-body{
  color: #eaf0ff !important;
}

/* ✅ Este es el principal: mata el fondo blanco de teoria-bootstrap */
body.ui-duolingo.ui-dark .teoria-bootstrap{
  background: transparent !important;
  color: #eaf0ff !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Si tu teoría trae headings/links/listas */
body.ui-duolingo.ui-dark .teoria-bootstrap h1,
body.ui-duolingo.ui-dark .teoria-bootstrap h2,
body.ui-duolingo.ui-dark .teoria-bootstrap h3,
body.ui-duolingo.ui-dark .teoria-bootstrap h4,
body.ui-duolingo.ui-dark .teoria-bootstrap h5{
  color: #9bdcff !important;
}

body.ui-duolingo.ui-dark .teoria-bootstrap p,
body.ui-duolingo.ui-dark .teoria-bootstrap li,
body.ui-duolingo.ui-dark .teoria-bootstrap span{
  color: #eaf0ff !important;
}

body.ui-duolingo.ui-dark .teoria-bootstrap a{
  color: #1CB0F6 !important;
  text-decoration: underline;
}

/* Bloques internos tipo card/alert dentro de la teoría */
body.ui-duolingo.ui-dark .teoria-bootstrap .card,
body.ui-duolingo.ui-dark .teoria-bootstrap .alert,
body.ui-duolingo.ui-dark .teoria-bootstrap .conjugacao,
body.ui-duolingo.ui-dark .teoria-bootstrap .exemplos,
body.ui-duolingo.ui-dark .teoria-bootstrap .dica,
body.ui-duolingo.ui-dark .teoria-bootstrap .resumo{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #eaf0ff !important;
}

/* Tablas (si aparecen) */
body.ui-duolingo.ui-dark .teoria-bootstrap table{
  color: #eaf0ff !important;
}
body.ui-duolingo.ui-dark .teoria-bootstrap table td,
body.ui-duolingo.ui-dark .teoria-bootstrap table th{
  border-color: rgba(255,255,255,.12) !important;
}

/* =========================
   BOTÓN CORREGIR PREMIUM
========================= */

body.ui-duolingo.ui-dark .btn-correct{
  background: linear-gradient(135deg, #58CC02, #46A302);
  border: none;
  color: white;
  font-weight: 800;
  border-radius: 14px;
  padding: 6px 18px;
  box-shadow: 0 6px 0 rgba(70,163,2,.45);
  transition: all .15s ease;
}

body.ui-duolingo.ui-dark .btn-correct:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(70,163,2,.55);
}

body.ui-duolingo.ui-dark .btn-correct:active{
  transform: translateY(1px);
  box-shadow: 0 4px 0 rgba(70,163,2,.45);
}

/* =========================
   DRAG & DROP PREMIUM
========================= */

/* Banco de opciones */
body.ui-duolingo.ui-dark .bank-container{
  background: rgba(28,176,246,.08);
  border: 1px dashed rgba(28,176,246,.4);
  padding: 12px;
  border-radius: 14px;
}

/* Palabras arrastrables */
body.ui-duolingo.ui-dark .draggable-item{
  background: linear-gradient(135deg, #1CB0F6, #0ea5e9);
  color: white !important;
  font-weight: 600;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: grab;
  box-shadow: 0 4px 0 rgba(14,165,233,.5);
  transition: transform .1s ease;
}

body.ui-duolingo.ui-dark .draggable-item:active{
  cursor: grabbing;
  transform: scale(1.05);
}

/* Zona donde se suelta */
body.ui-duolingo.ui-dark .drop-container{
  min-height: 42px;
  background: rgba(88,204,2,.08);
  border: 2px dashed rgba(88,204,2,.4);
  border-radius: 12px;
  padding: 6px;
  transition: background .2s ease;
}

body.ui-duolingo.ui-dark .drop-container.ui-state-highlight{
  background: rgba(88,204,2,.18);
}

/* =========================
   FIX CARD FOOTER (dark)
========================= */

body.ui-duolingo.ui-dark .card-footer{
  background: rgba(255,255,255,.04) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
  border-radius: 0 0 18px 18px;
}

body.ui-duolingo.ui-dark .card-footer{
  background: rgba(255,255,255,.04) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
  border-radius: 0 0 18px 18px;
}

/* ====== Drag & Drop: separación y orden ====== */

/* Banco (contenedor) con más aire */
body.ui-duolingo .bank-container{
  gap: 12px !important;         /* antes 0.75rem */
  margin-top: 12px !important;
}

/* Ítems arrastrables: más espacio y tamaño parejo */
body.ui-duolingo .draggable-item{
  margin: 0 !important;         /* el gap ya separa */
  padding: .65rem .9rem !important;
  min-height: 48px !important;
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
  border-radius: 14px !important;
}

/* Drop zones: que no queden pegadas */
body.ui-duolingo .drop-container{
  margin: 10px 0 !important;
  padding: 10px !important;
  min-height: 60px !important;
  border-radius: 14px !important;
}

/* Relacionar: tarjetas con más espacio entre sí */
body.ui-duolingo .row.row-cols-1.row-cols-md-2.g-3.mb-4{
  row-gap: 14px;
}

body.ui-duolingo .bank-container{
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}

/* ====== DROP ZONES más compactas ====== */
body.ui-duolingo .drop-container,
body.ui-duolingo .drop-zone{
  min-height: 42px !important;      /* antes 60 */
  padding: 6px 8px !important;      /* antes 10 */
  margin: 6px 0 !important;         /* menos aire */
  border-radius: 12px !important;
}

/* Cuando ya hay una palabra dentro del drop: que NO sea ladrillo */
body.ui-duolingo .drop-container .draggable-item,
body.ui-duolingo .drop-container .drag-item{
  padding: 6px 10px !important;
  min-height: 32px !important;
  font-size: .95rem !important;
  line-height: 1.15 !important;
  border-radius: 10px !important;
  width: 100% !important;           /* ocupa el drop sin agrandar */
  box-shadow: 0 4px 10px rgba(0,0,0,.06) !important;
}

/* Relacionar: cards internas más compactas */
body.ui-duolingo .row.row-cols-1.row-cols-md-2.g-3.mb-4 .card-body{
  padding: .85rem !important;
}

/* Si el banco también está alto, bajalo un toque */
body.ui-duolingo .bank-container{
  gap: 10px !important;
  margin: 10px 0 !important;
}




/* ===========================
   FIX: colores por nivel (dashboard)
   (pegar al FINAL del CSS)
=========================== */

/* 1) Deja de forzar blanco en las cards de nivel */
body.ui-duolingo .level-card{
  background: transparent !important; /* libera el fondo */
}

/* 2) Ahora sí: aplica el color por nivel (más específico + !important) */
body.ui-duolingo .card.level-card.lvl-a1{ background: linear-gradient(135deg,#58CC02,#46A302) !important; }
body.ui-duolingo .card.level-card.lvl-a2{ background: linear-gradient(135deg,#1CB0F6,#0b78c8) !important; }
body.ui-duolingo .card.level-card.lvl-b1{ background: linear-gradient(135deg,#ffb020,#ff7a00) !important; }
body.ui-duolingo .card.level-card.lvl-b2{ background: linear-gradient(135deg,#8b5cf6,#6d28d9) !important; }
body.ui-duolingo .card.level-card.lvl-c1{ background: linear-gradient(135deg,#ff4d4f,#c81d25) !important; }
body.ui-duolingo .card.level-card.lvl-c2{ background: linear-gradient(135deg,#111827,#374151) !important; }

/* 3) Texto blanco dentro (usa tus clases reales: level-badge y level-sub) */
body.ui-duolingo .level-card .level-badge,
body.ui-duolingo .level-card .level-sub{
  color: rgba(255,255,255,.95) !important;
}

/* ============================= */
/* TUTOR IA MODAL */
/* ============================= */

body.ui-duolingo .modal-content {
  border-radius: 20px;
  border: none;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  overflow: hidden;
}

body.ui-duolingo .modal-header {
  background: linear-gradient(135deg, var(--duo-green), #4CAF50);
  color: white;
  border-bottom: none;
}

body.ui-duolingo .modal-title {
  font-weight: 700;
}

body.ui-duolingo .btn-close {
  filter: invert(1);
}

/* Chat box */
#aiChatBox {
  border-radius: 16px;
  background: #f4f6f8 !important;
  border: none !important;
}

/* Mensajes */
.ai-msg-user {
  background: var(--duo-green);
  color: white;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  margin-bottom: 10px;
  max-width: 80%;
  align-self: flex-end;
}

.ai-msg-bot {
  background: white;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 4px;
  margin-bottom: 10px;
  max-width: 80%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Input */
#aiInput {
  border-radius: 14px;
  border: 1px solid #ddd;
}

#aiSend {
  border-radius: 14px;
  font-weight: 600;
}

/* Avatar */
.ai-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--duo-green);
  position: relative;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.ai-avatar::after {
  content: "";
  width: 14px;
  height: 14px;
  background: #00ff6a;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  right: 4px;
  border: 2px solid white;
}

/* Animación suave */
.ai-avatar.idle {
  animation: pulse 2.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(40,167,69,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(40,167,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}

/* ============================= */
/* MODO OSCURO */
/* ============================= */

body.ui-dark .modal-content {
  background-color: #1e1f24;
  color: #eaeaea;
}

body.ui-dark #aiChatBox {
  background: #2b2d33 !important;
}

body.ui-dark .ai-msg-bot {
  background: #34363d;
  color: #eaeaea;
}

body.ui-dark #aiInput {
  background: #2b2d33;
  color: white;
  border: 1px solid #444;
}

body.ui-dark .modal-header {
  background: linear-gradient(135deg, #1abc9c, #16a085);
}

.site-footer{
  background: rgba(255,255,255,.70);
  border-top: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
}
.footer-link{ text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }
body.ui-dark .site-footer{
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(255,255,255,.10);
}
body.ui-dark .site-footer,
body.ui-dark .site-footer .text-muted{
  color: rgba(255,255,255,.80) !important;
}
body.ui-dark .site-footer a{ color: rgba(255,255,255,.92) !important; }

/* =========================
   NAVBAR PRO (FINAL)
========================= */

.navbar{
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
}

/* Links */
.navbar .nav-link{
  font-weight: 700;
  border-radius: 12px;
  padding: .55rem .8rem;
  color: rgba(15,23,42,.78) !important;
}

.navbar .nav-link:hover{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.95) !important;
}

.navbar .nav-link.active{
  background: rgba(47,107,255,.14);
  color: var(--primary) !important;
}

/* ===== MODO OSCURO ===== */
body.ui-dark .navbar{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

body.ui-dark .navbar .nav-link{
  color: rgba(255,255,255,.80) !important;
}

body.ui-dark .navbar .nav-link:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95) !important;
}

body.ui-dark .navbar .nav-link.active{
  background: rgba(28,176,246,.18);
  color: #ffffff !important;
}

/* Arregla el layout de 2 columnas aunque algún estilo lo pise */
.ej-layout{
  display: flex !important;
  flex-wrap: wrap !important;
}

.ej-layout > .col-12{
  /* asegura que las columnas sigan el ancho bootstrap */
  flex: 0 0 auto;
}

.dropdown-menu { z-index: 2000 !important; }

/* Hace legible el dropdown aunque el sitio tenga texto blanco/global */


.dropdown-menu .dropdown-item {
  color: #111 !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: #f2f2f2 !important;
  color: #111 !important;
}

/* Precio más visible */
.dropdown-menu .plan-price {
  color: #111 !important;
  font-weight: 700;
}

/* FIX: tus items son <button>, esto evita texto “blanco” heredado */
.dropdown-menu button.dropdown-item,
.dropdown-menu .plan-option {
  color: #111 !important;
  background: transparent !important;
}

/* Asegura que los textos internos no queden lavados por estilos globales */
.dropdown-menu button.dropdown-item * {
  color: inherit;
}

/* Mantén hover/focus legible */
.dropdown-menu button.dropdown-item:hover,
.dropdown-menu button.dropdown-item:focus {
  background: #f2f2f2 !important;
  color: #111 !important;
}

/* ===== Select moneda en modo oscuro (dashboard) ===== */
.currency-dark{
  background: rgba(18, 24, 40, .85) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}

/* placeholder / opción seleccionada */
.currency-dark:focus{
  border-color: rgba(28,176,246,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(28,176,246,.18) !important;
}

/* Opciones del desplegable (cuando el navegador lo permite) */
.currency-dark option{
  background: #151a2b !important;
  color: rgba(255,255,255,.92) !important;
}

/* ===== PRICING MODAL DARK GLASS (DEFINITIVO) ===== */
#pricingModal .modal-content{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(106,92,255,.35), transparent 60%),
    radial-gradient(820px 520px at 100% 10%, rgba(28,176,246,.28), transparent 58%),
    radial-gradient(650px 420px at 55% 95%, rgba(88,204,2,.18), transparent 60%),
    linear-gradient(180deg, #0B1635, #070B18) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 20px;
}

#pricingModal .modal-header,
#pricingModal .modal-footer{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
}

#pricingModal .btn-close{ filter: invert(1) !important; }
#pricingModal .text-muted{ color: rgba(255,255,255,.70) !important; }

#pricingModal .price-card{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(28,176,246,.45) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px);
}

#pricingModal .carousel-control-prev-icon,
#pricingModal .carousel-control-next-icon{
  filter: invert(1);
  opacity: .9;
}
/* Forzado total SOLO para el modal */
#pricingModal .modal-content{
  background: linear-gradient(180deg, #0B1635, #070B18) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
#pricingModal .text-muted{ color: rgba(255,255,255,.70) !important; }

#pricingModal .price-card{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(28,176,246,.45) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#pricingModal .price-card *{ color: rgba(255,255,255,.90) !important; }

#pricingModal .carousel-control-prev-icon,
#pricingModal .carousel-control-next-icon{ filter: invert(1); }

/* FORZAR TACHADO + OPACIDAD DEL PRECIO VIEJO */
#pricingModal .priceOld{
  text-decoration: line-through !important;
  text-decoration-thickness: 2px;
  opacity: .55 !important;
}

#pricingModal .priceNow{
  font-weight: 900 !important;
}

/* Flechas visibles y clickeables */
#pricingModal #pricingCarousel{
  position: relative;
}

#pricingModal .carousel-control-prev,
#pricingModal .carousel-control-next{
  width: 56px;
  opacity: 1 !important;
  z-index: 10;
}

#pricingModal .carousel-control-prev-icon,
#pricingModal .carousel-control-next-icon{
  filter: invert(1);
  opacity: 1 !important;
  width: 2.25rem;
  height: 2.25rem;
}

/* “Botoncito” tipo glass atrás del icono */
#pricingModal .carousel-control-prev-icon,
#pricingModal .carousel-control-next-icon{
  border-radius: 999px;
  background-color: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

/* Un poco de aire para que no tape la sombra del card */
#pricingModal .carousel-inner{
  padding: 8px 54px; /* deja lugar a flechas */
}

/* Header/footer siempre visibles dentro del modal */
#pricingModal .modal-header{
  position: sticky;
  top: 0;
  z-index: 10;
}

#pricingModal .modal-footer{
  position: sticky;
  bottom: 0;
  z-index: 10;
}

#pricingModal .carousel-control-prev,
#pricingModal .carousel-control-next{
  width: 10%;
  min-width: 52px;
  opacity: 1;
}

#pricingModal .carousel-control-prev-icon,
#pricingModal .carousel-control-next-icon{
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background-size: 55% 55%;
  background-color: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

#pricingModal .price-old{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,255,255,.7);
  opacity: .7;
}

/* CONTADOR PRINCIPAL */
.pricing-countdown {
  display: inline-block;
  font-size: 2rem;              /* tamaño grande */
  font-weight: 900;
  letter-spacing: 2px;
  padding: 10px 18px;
  border-radius: 14px;
  color: #ffffff;

  background: linear-gradient(135deg, #ff4d4d, #ff9900);
  box-shadow: 0 12px 30px rgba(255, 77, 77, 0.35);

  text-align: center;
  min-width: 140px;
}

/* Cuando faltan menos de 24h */
.pricing-countdown.is-urgent {
  background: linear-gradient(135deg, #ff0000, #ff4d00);
  box-shadow: 0 15px 35px rgba(255, 0, 0, 0.45);
  animation: pulseCountdown 1s infinite;
}

/* Cuando terminó */
.pricing-countdown.is-ended {
  background: #444;
  box-shadow: none;
  opacity: 0.7;
}

/* Animación de urgencia */
@keyframes pulseCountdown {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* =========================
   THEME PREMIUM (INDEX)
   Activalo con: <body class="theme-premium">
   ========================= */

.theme-premium{
  background: #070b14; /* base oscura */
  color: rgba(255,255,255,.92);
}

/* Links y texto suave */
.theme-premium a{ color: inherit; }
.theme-premium .text-muted{ color: rgba(255,255,255,.65) !important; }

/* ===== HERO (mismo vibe del modal header) ===== */
.theme-premium .hero{
  background: radial-gradient(900px 400px at 15% 0%, rgba(0,196,204,.25), transparent 55%),
              radial-gradient(900px 400px at 85% 0%, rgba(100,32,255,.22), transparent 55%),
              linear-gradient(135deg, #00C4CC, #6420FF);
  color: #fff;
}

/* Divider más visible en oscuro */
.theme-premium .divider{
  background: linear-gradient(to right, #00C4CC 33%, #F5D000 33% 66%, #6420FF 66%);
  opacity: .95;
}

/* ===== Secciones (matices) ===== */
.theme-premium section.py-5.bg-white{
  background: #0b1220 !important;
}
.theme-premium section.py-5.bg-light{
  background: #070b14 !important;
}

/* ===== Cards del index (plan-card + cards de niveles) ===== */
.theme-premium .plan-card,
.theme-premium .card.h-100.text-start.p-3{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: #0b1220;
  color: #fff;
  box-shadow: 0 16px 36px rgba(2,6,23,.35);
  position: relative;
  overflow: hidden;
}

/* “glow” como tus price-card */
.theme-premium .plan-card::before,
.theme-premium .card.h-100.text-start.p-3::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 260px at 10% 0%, rgba(0,196,204,.18), transparent 55%),
    radial-gradient(700px 260px at 90% 0%, rgba(100,32,255,.16), transparent 55%);
  pointer-events:none;
}

.theme-premium .plan-card > *,
.theme-premium .card.h-100.text-start.p-3 > *{
  position: relative;
}

/* Hover premium */
.theme-premium .plan-card:hover,
.theme-premium .card.h-100.text-start.p-3:hover{
  transform: translateY(-6px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 22px 55px rgba(2,6,23,.50);
}

/* ===== Botones (reusar tus gradientes del modal) ===== */
.theme-premium .btn-primary{
  background: linear-gradient(135deg, #00C4CC, #6420FF);
  border: 0;
  font-weight: 800;
}
.theme-premium .btn-primary:hover{ filter: brightness(1.05); }

.theme-premium .btn-success{
  background: linear-gradient(135deg, #F5D000, #00C4CC);
  border: 0;
  color:#111827;
  font-weight: 900;
}
.theme-premium .btn-success:hover{ filter: brightness(1.03); }

/* Botones outline para oscuro */
.theme-premium .btn-outline-primary,
.theme-premium .btn-outline-secondary,
.theme-premium .btn-outline-light{
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.92);
}
.theme-premium .btn-outline-primary:hover,
.theme-premium .btn-outline-secondary:hover,
.theme-premium .btn-outline-light:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
}

/* ===== Badges en oscuro ===== */
.theme-premium .badge.text-bg-secondary{
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14);
}
.theme-premium .badge.text-bg-warning{
  background: linear-gradient(135deg, #F5D000, #FF7A00) !important;
  color: #111827 !important;
  border: 0;
  font-weight: 900;
}
.theme-premium .badge.text-bg-success{
  background: rgba(34,197,94,.18) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(34,197,94,.25);
}

/* ===== Tipografías / títulos ===== */
.theme-premium h1, .theme-premium h2, .theme-premium h3, .theme-premium h4, .theme-premium h5{
  color: #fff;
}
.theme-premium p{
  color: rgba(255,255,255,.78);
}

/* ===== Footer: mantenelo premium oscuro ===== */
.theme-premium footer.bg-dark{
  background: #060913 !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* =========================
   FIX: evitar “zonas blancas”
   ========================= */

/* 1) Asegurá que el body premium gane SIEMPRE */
body.theme-premium{
  background: #070b14 !important;
  color: rgba(255,255,255,.92);
}

/* 2) Cualquier section sin clase bg-* que quede oscura */
body.theme-premium section{
  background: transparent;
}

/* 3) Tus secciones “normales” (py-5 sin bg) -> panel oscuro */
body.theme-premium section.py-5{
  background: #070b14;
}

/* 4) Contenedores blancos típicos (Bootstrap) */
body.theme-premium .bg-white{ background: #0b1220 !important; }
body.theme-premium .bg-light{ background: #070b14 !important; }

/* 5) Texto Bootstrap que en oscuro queda mal */
body.theme-premium .text-dark,
body.theme-premium .link-dark{
  color: rgba(255,255,255,.92) !important;
}

body.theme-premium .text-muted{
  color: rgba(255,255,255,.65) !important;
}

/* 6) Bloquequotes / testimonios */
body.theme-premium blockquote,
body.theme-premium .blockquote,
body.theme-premium .blockquote p{
  color: rgba(255,255,255,.86) !important;
}

body.theme-premium .blockquote-footer{
  color: rgba(255,255,255,.60) !important;
}

/* 7) Cards genéricas que te quedaron blancas */
body.theme-premium .card{
  background: #0b1220 !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

/* 8) Listas / textos pequeños */
body.theme-premium li,
body.theme-premium .small{
  color: rgba(255,255,255,.78) !important;
}

/* 9) Íconos de bootstrap (si los ves apagados) */
body.theme-premium .bi{
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

/* =========================
   THEME PREMIUM (INDEX) - FINAL
========================= */
body.theme-premium{
  background: #070b14 !important;
  color: rgba(255,255,255,.92) !important;
}

/* Bootstrap pisa con bg-white/bg-light (traen !important) */
body.theme-premium .bg-white{ background: #0b1220 !important; }
body.theme-premium .bg-light{ background: #070b14 !important; }

/* Secciones sin bg-* (como tu “Descripción” y “Testimonios”) */
body.theme-premium section{ background: transparent !important; }
body.theme-premium section.py-5{ background: #070b14 !important; }

/* Texto típico */
body.theme-premium p,
body.theme-premium li{ color: rgba(255,255,255,.78) !important; }
body.theme-premium .text-muted{ color: rgba(255,255,255,.65) !important; }

/* Testimonios */
body.theme-premium .blockquote,
body.theme-premium .blockquote p{ color: rgba(255,255,255,.86) !important; }
body.theme-premium .blockquote-footer{ color: rgba(255,255,255,.60) !important; }

/* Footer */
body.theme-premium footer{
  background: #060913 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* ===== PREMIUM: fondo con colores (no tan negro) ===== */
body.theme-premium{
  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(0,196,204,.30), transparent 60%),
    radial-gradient(900px 520px at 88% 5%, rgba(100,32,255,.28), transparent 58%),
    radial-gradient(800px 520px at 50% 105%, rgba(245,208,0,.16), transparent 60%),
    linear-gradient(180deg, #070b14, #0b1635) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Secciones con “panel” suave para que no sea todo negro */
body.theme-premium section.py-5{
  background: rgba(255,255,255,.03) !important;
}
body.theme-premium .bg-white{
  background: rgba(255,255,255,.04) !important;
}
body.theme-premium .bg-light{
  background: rgba(255,255,255,.02) !important;
}

body.theme-premium .hero{
  padding: 96px 0 !important;
}
body.theme-premium .hero .lead{
  color: rgba(255,255,255,.82) !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   HERO PRO (solo esta sección)
========================= */

.hero.hero-pro{
  padding: 92px 0;
  color: #fff;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(0,196,204,.32), transparent 60%),
    radial-gradient(900px 520px at 88% 5%, rgba(100,32,255,.30), transparent 58%),
    radial-gradient(800px 520px at 50% 110%, rgba(245,208,0,.16), transparent 60%),
    linear-gradient(180deg, #070b14, #0b1635);
}

/* Título + texto */
.hero.hero-pro .hero-title{
  color: #fff;
}

.hero.hero-pro .hero-lead{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255,255,255,.82);
}

/* Divider más premium */
.hero.hero-pro .hero-divider{
  height: 4px;
  width: 150px;
  border-radius: 999px;
  margin: 1rem auto;
  background: linear-gradient(to right, #00C4CC, #F5D000, #6420FF);
  opacity: .95;
}

/* Botones */
.hero.hero-pro .btn{
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}

/* CTA principal naranja (pro) */
.btn-cta-orange{
  border: 0 !important;
  color: #111827 !important;
  background: linear-gradient(135deg, #FF7A00, #FFD000) !important;
  box-shadow: 0 14px 35px rgba(255,122,0,.22) !important;
}
.btn-cta-orange:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* CTA verde (opcional) */
.btn-cta-green{
  border: 0 !important;
  color: #07110a !important;
  background: linear-gradient(135deg, #58CC02, #22C55E) !important;
  box-shadow: 0 14px 35px rgba(34,197,94,.22) !important;
}
.btn-cta-green:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* Botón secundario “ghost” elegante */
.btn-cta-ghost{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
}
.btn-cta-ghost:hover{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.35) !important;
  transform: translateY(-1px);
}

/* =========================
   HERO VIDEO BACKGROUND
   ========================= */

.hero-video {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}

/* Video */
.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Overlay oscuro profesional */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 12, 24, 0.85) 0%,
    rgba(6, 12, 24, 0.75) 50%,
    rgba(6, 12, 24, 0.90) 100%
  );
  z-index: 1;
}

/* Contenido encima */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

/* Texto más elegante */
.hero-title {
  letter-spacing: -0.02em;
}

.hero-lead {
  color: rgba(255,255,255,.85);
  font-size: 1.2rem;
}
/* =========================
   TOP CTA BAR
   ========================= */

.top-cta-bar{
  background: linear-gradient(90deg, #FF7A00, #FFB020);
  color: #111827;
  padding: 8px 0;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  z-index: 1000;
}

.top-cta-text{
  letter-spacing: .3px;
}

.btn-top-cta{
  background: #111827;
  color: #fff !important;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 800;
  border: none;
  transition: all .2s ease;
}

.btn-top-cta:hover{
  background: #000;
  transform: translateY(-1px);
}

/* =========================
   CERT SECTION (tipo LH)
========================= */

.cert-section{
  padding: 90px 0;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255,122,0,.10), transparent 60%),
    radial-gradient(900px 520px at 100% 20%, rgba(0,196,204,.12), transparent 60%),
    linear-gradient(180deg, #0b1220, #070b14);
  color: rgba(255,255,255,.92);
}

.cert-kicker{
  display:inline-block;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .78rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.cert-title{
  margin-top: 14px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 950;
  line-height: 1.05;
}

.cert-accent{
  background: linear-gradient(135deg, #FFB020, #FF7A00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cert-text{
  margin-top: 18px;
  font-size: 1.08rem;
  color: rgba(255,255,255,.78);
  max-width: 560px;
}

.cert-list{
  margin: 18px 0 0;
  padding-left: 0;
  list-style: none;
  color: rgba(255,255,255,.82);
}
.cert-list li{
  padding: .5rem 0;
  display:flex;
  align-items:flex-start;
}
.cert-list i{
  color: #FFB020;
  margin-top: 2px;
}

/* Botones */
.btn-cert-primary{
  border: 0 !important;
  color: #111827 !important;
  font-weight: 950 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #FFB020, #FF7A00) !important;
  box-shadow: 0 16px 36px rgba(255,122,0,.22);
}
.btn-cert-primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }

.btn-cert-secondary{
  border-radius: 16px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(10px);
}

/* Visual (mock certificado) */
.cert-visual{
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.cert-img{
  border-radius: 16px;
  display:block;
}