/* =========================================
   Raga UI — Overlay de diseño no intrusivo
   (cárgalo DESPUÉS de tus estilos actuales)
========================================= */

:root{
  --bg:#0b1220;
  --surface:#0f1629;
  --card:#121a2e;
  --line:#1f2a44;
  --muted:#8ea0c0;
  --text:#e9f1ff;
  --brand:#41ff9d;
  --brand-600:#20e68a;
  --warn:#ffbe3c;
  --danger:#ff5d5d;
  --ok:#66ffa8;

  /* tokens */
  --radius:16px;
  --radius-sm:12px;
  --shadow: 0 6px 18px rgba(0,0,0,.25);
  --shadow-soft: 0 3px 12px rgba(0,0,0,.18);
  --focus: 0 0 0 3px rgba(65,255,157,.25);
}

/* Reset sutil */
html,body { color: var(--text); background: var(--bg); }
img { display:block; max-width:100%; height:auto; }

/* Layout base */
.container{ max-width: 1100px !important; }

/* Header / nav */
header{ background: linear-gradient(0deg, rgba(18,26,46,.6), rgba(18,26,46,.6)); backdrop-filter: blur(6px); }
header .brand{ letter-spacing:.2px; }
header .nav a { transition:.2s ease; }
header .nav a:hover{ transform: translateY(-1px); }

/* Cards */
.card{
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
}
.card h2, .card h3, .card h4 { margin-top: 0; }

/* Grids y “course cards” */
.grid{ gap: 16px !important; }
.course{
  background: var(--surface);
  border: 1px solid #233255 !important;
  border-radius: 14px !important;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.course:hover{
  transform: translateY(-2px);
  border-color: #2f4aa0 !important;
  box-shadow: var(--shadow);
}
.course .img{
  background: #0b1327 !important;
}
.mute{ color: var(--muted) !important; }
.ok{ color: var(--ok) !important; }

/* Botones */
a.btn, button.btn{
  background: var(--brand) !important;
  color:#001e10 !important;
  border:0 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  transition: transform .08s ease, box-shadow .2s ease, filter .15s ease;
}
a.btn:hover, button.btn:hover{ filter: brightness(1.02); }
a.btn:active, button.btn:active{ transform: translateY(1px); }

.ghost{
  background:#16203a !important;
  color:#d7e3ff !important;
  border:1px solid #2a3a5c !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: border-color .2s ease, transform .08s ease;
}
.ghost:hover{ border-color:#3b5794 !important; }
.ghost:active{ transform: translateY(1px); }

/* Botón de peligro (borrar / despublicar) */
.danger{
  background: var(--danger) !important;
  color: #250000 !important;
  border: 0 !important;
}

/* Chips / badges / notices */
.chip{
  background:#16203a !important;
  border:1px solid #2a3a5c !important;
  color:#cfe3ff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}
.notice{
  background:#0f1d36 !important;
  border:1px dashed #2a3a5c !important;
  color:#cfe3ff !important;
  border-radius: 12px !important;
}

/* Inputs y forms */
input[type=text], input[type=file], textarea, select{
  background:#0f1629 !important;
  color:#e8f0ff !important;
  border:1px solid #2a3a5c !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  outline: none;
}
input:focus, textarea:focus, select:focus, .btn:focus, .ghost:focus { box-shadow: var(--focus); }

/* Lista de lecciones */
.list .item{
  background:#0f1629 !important;
  border:1px solid #1f2a44 !important;
  border-radius:12px !important;
}
.item.lock{ opacity:.55; filter: grayscale(60%); }

/* Barra de progreso */
.prog{
  height: 12px !important;
  border-radius: 999px !important;
  overflow:hidden; border:1px solid #1f2a44 !important;
  background:#0f1629 !important;
}
.prog>i{
  background: linear-gradient(90deg,#2df6a1,#8af9d5) !important;
}

/* Modal de quiz (coincide con el que añadimos) */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal.active{ display:flex; }
.modal .box{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(820px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 16px;
  box-shadow: var(--shadow);
}
body.quiz-open{ overflow:hidden; }
body.quiz-open .lesson-content{ filter: blur(2px); opacity:.2; pointer-events:none; user-select:none; }

/* Audio player */
audio{ width:100%; border-radius: 12px; background:#0f1629; }

/* Tablas (si usas en admin) */
table{ width:100%; border-collapse:collapse; }
th,td{ border-bottom:1px solid #233255; padding:10px; }
th{ text-align:left; color:#bcd2ff; font-weight:700; }

/* Helpers */
.stack{ display:flex; gap:8px; flex-wrap: wrap; }
.row{ display:flex; align-items:center; gap:10px; }
.center{ display:flex; align-items:center; justify-content:center; }

/* Links suaves */
a{ color:#b8d3ff; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Responsivo */
@media (max-width: 640px){
  .nav{ gap:6px !important; }
  .container{ padding: 0 12px !important; }
}
.cover{ position:relative; height:160px; background:#0f1629; overflow:hidden }
.cover video,.cover img{ width:100%; height:100%; object-fit:cover; display:block }
.chat-fab{position:fixed; right:18px; bottom:18px; z-index:1100}
.chat-fab .btn{border-radius:999px; padding:12px 14px}
.chat-box{position:fixed; right:18px; bottom:78px; width:min(360px,92vw); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: 0 6px 18px rgba(0,0,0,.25); display:none; z-index:1100}
.chat-box.active{display:block}
.chat-messages{max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:6px}
.msg{background:#0f1629; border:1px solid #1f2a44; border-radius:12px; padding:8px 10px; white-space:pre-wrap}
.msg.user{align-self:flex-end; background:#152447}
.msg.bot{align-self:flex-start}
.chat-input{display:flex; gap:8px; margin-top:8px}
.chat-input input{flex:1}