/* ========================================
   ACADEMIA SALA CREATIVA – ESTILOS BASE
   Paleta: fondo oscuro + fucsia & dorado
   ======================================== */

/* ===== Tokens de color ===== */
:root{
  /* Paleta Sala Creativa */
  --bg:#0b0b0d;          /* fondo global */
  --panel:#141417;       /* paneles / header / cards */
  --text:#f5f5f7;        /* texto principal */
  --muted:#b3b3bd;       /* texto secundario */
  --brand:#ff2e86;       /* fucsia Sala Creativa */
  --accent:#f7c948;      /* dorado Sala Creativa */
  --green:#16a34a;       /* CTA tipo WhatsApp */
  --tick:var(--brand);
  --stroke:#26262c;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;

  /* Aliases para compatibilidad con el CSS viejo */
  --ink:var(--text);
  --line:var(--stroke);
  --card:var(--panel);
}

/* ===== Reset mínimo ===== */
*,
*::before,
*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(255,46,134,.18), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
}

/* Contenedor genérico */
.container{max-width:1100px;margin:0 auto;padding:24px}

/* Enlaces y botones */
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Botones base ===== */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--brand);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  transition:.15s;
  background:transparent;
}
.btn:hover{
  background:var(--brand);
  color:#0b0b0d;
}
.btn.disabled,[disabled]{opacity:.55;cursor:not-allowed}

/* Primario fucsia */
.btn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#0b0b0d;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.btn.primary:hover{
  filter:brightness(1.05);
}

/* Secundario dorado / gris */
.btn.secondary{
  background:#1b1b20;
  border:1px solid var(--stroke);
  color:var(--text);
}
.btn.secondary:hover{
  background:#22222a;
}

/* Ghost / neutro */
.btn.ghost{
  background:transparent;
  border:1px solid var(--stroke);
  color:var(--muted);
}
.btn.ghost:hover{
  background:#1a1a20;
  color:var(--text);
}

/* Botones full width (ej: comprar curso) */
.btn.full{width:100%;text-align:center}

/* ===== Header ===== */
.site-header{
  background:var(--panel);
  border-bottom:1px solid var(--stroke);
  position:sticky;
  top:0;
  z-index:10;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
}
.brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--text);
  text-decoration:none;
}
.logo-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--brand);
  display:inline-block;
}
.brand-text{
  letter-spacing:.5px;
}

/* Menú principal */
.topbar .menu{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.topbar .menu a{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  padding:8px 6px;
  line-height:1;
  border-radius:8px;
  opacity:.9;
  text-decoration:none;
  transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.topbar .menu a:hover{
  opacity:1;
  background:rgba(255,46,134,.08);
}
.topbar .menu a.active{
  position:relative;
  color:#fff;
}
.topbar .menu a.active::after{
  content:"";
  position:absolute;
  left:6px;right:6px;bottom:2px;
  height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  border-radius:2px;
}
.topbar .menu a.danger{color:#ff6b6b;}
.topbar .menu a.danger:hover{background:rgba(255,107,107,.12);}

/* Chip usuario */
.user-chip{
  margin-left:8px;
  padding:3px 8px;
  font-size:11px;
  border:1px solid var(--accent);
  background:#000;
  color:#fff;
  border-radius:999px;
  white-space:nowrap;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
@media (max-width:560px){
  .user-chip{display:none;}
}

/* Hamburguesa (mobile) */
.nav-toggle{
  display:none;
  border:1px solid var(--stroke);
  background:#111;
  border-radius:10px;
  padding:8px;
  color:var(--text);
}
@media (max-width:900px){
  .nav-toggle{display:inline-grid;place-items:center}
  .topbar{
    position:absolute;
    right:16px;
    top:58px;
    background:var(--panel);
    border:1px solid var(--stroke);
    border-radius:12px;
    padding:10px;
    display:none;
    box-shadow:var(--shadow);
  }
  .topbar.open{display:block}
  .topbar .menu{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ===== Footer oscuro compacto ===== */
.site-footer{
  background:var(--panel);
  border-top:1px solid var(--stroke);
  padding:10px 0;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  margin-top:40px;
}
.site-footer .container{text-align:center;}
.site-footer .footer-links{
  display:inline-flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.site-footer .footer-links a{
  color:var(--muted);
  text-decoration:none;
}
.site-footer .footer-links a:hover{
  color:var(--text);
  text-decoration:underline;
}
.site-footer .copy{
  margin-top:6px;
  font-weight:600;
  color:var(--text);
}
.site-footer .byline{
  margin-top:4px;
  font-size:12px;
}
.site-footer .byline a.byline-link{
  color:inherit;
  text-decoration:none;
}
.site-footer .byline a.byline-link:hover{
  text-decoration:underline;
}
.site-main{margin-bottom:0;padding-bottom:0}

/* ===== Tarjetas y tipografía ===== */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow);
}
.card--outline{
  border:2px solid var(--stroke);
  border-radius:14px;
  background:var(--panel);
  padding:18px 18px 16px;
  box-shadow:0 2px 0 rgba(0,0,0,0.4);
}
.card--accent{
  border-color:var(--accent);
}
.h1{font-size:28px;margin:12px 0 16px}
.h3{font-size:20px;margin:0 0 8px}
.page-title{
  font-size:32px;
  margin:8px 0 18px;
  font-weight:800;
  letter-spacing:.2px;
}
.muted{color:var(--muted)}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.center{text-align:center}

/* Subtítulos de sección */
.section-title{
  font-size:24px;
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:.2px;
}
.section-title:after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  margin-top:8px;
  border-radius:2px;
}

/* ===== Hero / bienvenida ===== */
.hero.hero-light{
  background:transparent;
  color:var(--text);
  padding:28px 0 12px;
  margin:0 0 20px;
}
.hero-title{font-size:38px;margin:0 0 6px;font-weight:900;}
.hero-sub{color:var(--muted);max-width:900px}

/* ===== Grids ===== */
.cards-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.cards-grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1050px){.cards-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1024px){.cards-grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cards-3{grid-template-columns:1fr}}
@media (max-width:640px){.cards-grid3{grid-template-columns:1fr}}

/* ===== Tarjeta de directo / recursos ===== */
.stream-card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
}
.stream-card .thumb{
  display:block;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:#1c1c22;
  margin-bottom:12px;
}
.stream-card .thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.stream-title{font-size:18px;margin:6px 0 4px;font-weight:700}
.stream-excerpt{margin:0 0 12px;color:var(--muted);line-height:1.45}

/* Badges de estado */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid;
}
.badge.ok{
  background:rgba(22,163,74,.12);
  color:#4ade80;
  border-color:#16a34a;
}
.badge.wait{
  background:rgba(247,201,72,.1);
  color:var(--accent);
  border-color:var(--accent);
}

/* ===== Formularios (login / cuenta) ===== */
form.auth{max-width:420px;margin:28px auto}
label{display:block;margin:10px 0 6px}
input[type="email"],
input[type="password"],
input[type="text"],
select{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:#101013;
  color:var(--text);
}
input::placeholder{color:var(--muted)}

/* Toggle de contraseña (ojo) */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{padding-right:44px}
.pw-toggle{
  position:absolute;
  right:8px;
  height:36px;
  width:36px;
  border:0;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:var(--muted);
}
.pw-toggle:hover{background:rgba(255,255,255,.04)}
.pw-toggle:focus{
  outline:2px solid rgba(247,201,72,.6);
  outline-offset:2px;
}

/* Grid formularios */
.form-grid .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:640px){
  .form-grid .form-row{grid-template-columns:1fr}
}

/* Tablas */
.table-wrap{overflow:auto}
.table{
  width:100%;
  border-collapse:collapse;
  color:var(--text);
}
.table th,.table td{
  padding:12px;
  border-bottom:1px solid var(--stroke);
  text-align:left;
}
.table th{font-weight:700}
.table .btn{padding:6px 10px;border-radius:8px}

/* Avisos */
.notice{
  border-radius:12px;
  padding:12px 14px;
  margin:8px 0;
}
.notice.ok{
  background:rgba(22,163,74,.12);
  color:#4ade80;
  border:1px solid #16a34a;
}
.notice.error{
  background:rgba(239,68,68,.14);
  color:#fecaca;
  border:1px solid #f87171;
}

/* ===== Layout con sidebar (páginas de curso) ===== */
.layout-with-sidebar{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:24px;
  max-width:1200px;
  margin:32px auto;
}
.made-sidebar{
  background:#101013;
  border-radius:16px;
  padding:24px 16px;
  border:1px solid var(--stroke);
}
.made-sidebar .sidebar-logo{
  font-size:18px;
  margin-bottom:16px;
  font-weight:700;
}
.made-sidebar nav a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  margin-bottom:4px;
  text-decoration:none;
  color:var(--muted);
  font-size:14px;
}
.made-sidebar nav a.active{
  background:rgba(255,46,134,.12);
  color:var(--text);
  font-weight:600;
}
.made-main{min-height:400px;}

@media (max-width:960px){
  .layout-with-sidebar{
    grid-template-columns:1fr;
    margin:20px auto;
  }
}

/* ===== Página de curso ===== */
.course-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:24px;
  margin-bottom:24px;
}
.course-sidebar-card{
  border-radius:16px;
  background:#101013;
  padding:16px;
  box-shadow:var(--shadow);
  border:1px solid var(--stroke);
}
.course-thumb img{
  width:100%;
  border-radius:12px;
  display:block;
}
.course-price-box{
  margin-top:12px;
  text-align:center;
}
.course-price-box .price-main{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}
.course-tabs{
  margin-top:16px;
  border-bottom:1px solid var(--stroke);
}
.course-tabs .tab-link{
  border:none;
  background:transparent;
  padding:8px 16px;
  font-size:14px;
  cursor:pointer;
  color:var(--muted);
}
.course-tabs .tab-link.active{
  border-bottom:2px solid var(--brand);
  font-weight:600;
  color:var(--text);
}
.tab-content{display:none;margin-top:16px;}
.tab-content.active{display:block;}

.course-progress-bar{margin:16px 0 24px;}
.progress-bar.big{
  height:10px;
  border-radius:999px;
  background:#1d1d23;
  overflow:hidden;
}
.progress-bar.big span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand),var(--accent));
}

/* Secciones y lecciones */
.course-sections .course-section{
  border:1px solid var(--stroke);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  background:#101013;
}
.section-header{background:#141419;}
.section-toggle{
  width:100%;
  border:none;
  background:none;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  color:var(--text);
}
.section-body{
  display:none;
  padding:8px 14px 12px;
}
.course-section.open .section-body{display:block;}
.lesson-list{list-style:none;margin:0;padding:0;}
.lesson-item{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid var(--stroke);
}
.lesson-item:last-child{border-bottom:none;}
.lesson-title{
  font-weight:500;
  font-size:14px;
}

/* ===== EN VIVO (player + chat) ===== */
.live-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
  align-items:start;
}
.live-player{
  aspect-ratio:16/9;
  position:relative;
  background:#000;
  border-radius:12px;
  overflow:hidden;
}
.live-player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.live-chat{
  min-height:420px;
}
.live-chat iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
}
.live-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:16px 0;
}

/* Responsive EN VIVO */
@media (max-width:900px){
  .live-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .live-chat{min-height:320px;}
  .live-actions{
    flex-direction:column;
  }
  .live-actions .btn{
    width:100%;
    text-align:center;
  }
}
@media (max-width:640px){
  .live-chat{display:none;}
  .live-player{aspect-ratio:16/9;}
}

/* ===== Mensajes flotantes tipo OK/ERROR ya definidos arriba ===== */

/* ===== WhatsApp flotante (opcional) ===== */
.wa-support{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:999;
  opacity:0;
  pointer-events:none;
  transform:translateY(15px);
  transition:opacity .25s ease, transform .25s ease;
}
.wa-support.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.wa-support a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:#25D366;
  color:#0b0b0d;
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}
.wa-support a:hover{filter:brightness(1.05);}
.wa-bubble-icon{
  width:20px;height:20px;border-radius:999px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
@media (max-width:640px){
  .wa-support{right:14px;bottom:14px;}
}