/* public/themes/modern-white/assets/css/course-platform.css
   Feature CSS: Studium 360
   (sin inline styles en vistas)
*/

/* ===== Utils locales (prefijo cp-) ===== */
.cp-muted{ color: var(--muted); }
.cp-kicker{
  color: var(--muted);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:8px;
}
.cp-title{ margin:0 0 8px 0; }
.cp-subtitle{ margin:0; color: var(--muted); max-width:72ch; }

.cp-mt4{ margin-top: var(--space-4); }
.cp-mb4{ margin-bottom: var(--space-4); }

/* Layouts */
.cp-hero{ margin-bottom: var(--space-4); }
.cp-hero-head{
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  align-items:flex-start;
  flex-wrap:wrap;
}
.cp-pill{
  font-size:12px;
  color: var(--muted);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
}

.cp-grid{
  display:grid;
  gap:var(--space-4);
}

.cp-grid--learn{
  grid-template-columns: 1fr 2fr;
}

.cp-grid--2{ grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px){
  .cp-grid--2{ grid-template-columns: 1fr; }
}

/* ✅ Lo que te falta para instructor/dashboard */
.cp-grid--3{
  grid-template-columns: repeat(3, 1fr);
}

/* ✅ Admin dashboards */
.cp-grid--4{
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px){
  .cp-grid--4{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .cp-grid--4{ grid-template-columns: 1fr; }
}

.cp-kpi{
  padding: var(--space-4);
}

.cp-kpi__num{
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin: 8px 0 0 0;
}

.cp-kpi__actions{ margin-top: 12px; }

.cp-role{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(0,0,0,.03);
  color: var(--muted);
}
.cp-role--admin{ background: rgba(17,24,39,.10); border-color: rgba(17,24,39,.20); color: var(--text); }
.cp-role--instructor{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.22); color: var(--text); }
.cp-role--student{ background: rgba(15,118,110,.10); border-color: rgba(15,118,110,.22); color: var(--text); }

.cp-table{
  width:100%;
  border-collapse: collapse;
}
.cp-table th,
.cp-table td{
  text-align:left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cp-table th{ color: var(--muted); font-size: 12px; letter-spacing: .10em; text-transform: uppercase; }

.cp-tabs{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.cp-scroll{ overflow:auto; }

/* ✅ Responsive */
@media (max-width: 900px){
  .cp-grid--learn{ grid-template-columns: 1fr; }
  .cp-grid--3{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .cp-consent{ padding: var(--space-2); }
}


.cp-stack{
  display: grid;
  gap: var(--space-4);
}

@media (max-width: 520px){
  .cp-stack{
    gap: var(--space-3);
  }
}

/* Sidebar */
.cp-sidebar-title{
  margin: 0 0 var(--space-2) 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.cp-section-list{
  display: grid;
  gap: 4px;
}

.cp-btn-row{
  width: 100%;
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);

  padding: 8px 10px;

  border: 1px solid transparent;
  border-radius: var(--radius-sm);

  background: transparent;
  color: var(--text);

  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;

  box-shadow: none;
}

.cp-btn-row:hover{
  background: var(--surface-2);
  border-color: var(--border);
}

.cp-btn-row--disabled{
  opacity: .48;
  cursor: not-allowed;
  pointer-events: none;
}

.cp-nav-active{
  outline: 0;
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
  color: var(--tone-info-text);
  box-shadow: none;
}

.cp-badge-count{
  margin-left: auto;

  min-width: 1.6rem;
  height: 1.35rem;
  padding: 0 0.45rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 999px;

  background: var(--surface-2);
  color: var(--muted);

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.cp-nav-active .cp-badge-count{
  background: rgba(37,99,235,.10);
  color: inherit;
}

/* Progreso (sidebar) */
.cp-progress{
  margin: 0 0 var(--space-3) 0;
}

.cp-progress-bar{
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  border: 0;
}

.cp-progress-value{
  height: 100%;
  background: var(--primary);
  opacity: .55;
}

.cp-progress-label{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.75rem;
}


/* Assessment spacing polish */
.cp-assess-q{padding:18px 20px}
.cp-assess-q .cp-md{margin-top:10px}
.cp-assess-body{margin-top:14px;display:grid;gap:12px}
.cp-assess-body .cp-choice.cp-answer{padding:12px 14px;box-sizing:border-box}
.cp-assess-body .cp-answer--correct, .cp-assess-body .cp-answer--incorrect{padding:14px 16px}
.cp-assess-body .cp-callout{margin:0}
.cp-assess-body .cp-callout + .cp-callout{margin-top:10px}
.cp-match-row{padding:12px 14px;border:1px solid var(--border);border-radius:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 720px){ .cp-match-row{ grid-template-columns: 1fr; } }

/* Barra de acciones consistente (assessment) */
.cp-actions-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.cp-actions-bar .btn{white-space:nowrap}

/* Feedback visual: bordes correct/incorrect */
.cp-answer{border-radius:12px}
.cp-choice.cp-answer{border:1px solid var(--border);padding:10px 12px}
.cp-choice.cp-answer input{margin-right:8px}
.cp-answer--correct{border:2px solid rgba(34,197,94,.55) !important;background:rgba(34,197,94,.05)}
.cp-answer--incorrect{border:2px solid rgba(239,68,68,.55) !important;background:rgba(239,68,68,.04)}

@media (max-width: 520px){
  .cp-actions-bar{flex-direction:column;align-items:stretch}
  .cp-actions-bar .btn{width:100%}
}

/* Blocks */
.cp-block-title{
  font-weight:900;
  margin:0 0 20px 0;
}
.cp-block-meta{
  font-size:12px;
  color: var(--muted);
  margin:0 0 10px 0;
}
.cp-code{
  margin:0;
  white-space:pre-wrap;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  background:#fbfcff;
  font-size:13px;
  line-height:1.5;
  overflow:auto;
}

/* Prose (muy básico, sin meter framework) */
.cp-prose p{ margin:0 0 10px 0; }
.cp-prose ul{ margin:0 0 10px 18px; padding:0; }
.cp-prose li{ margin:6px 0; }

/* ===== Auth ===== */
.cp-auth-wrap{
  max-width:520px;
  margin:0 auto;
}
.cp-alert{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.03);
}
.cp-alert--danger{
  border-color:rgba(220,38,38,.35);
  background:rgba(220,38,38,.07);
}

/* Active state en sidebar */
.cp-nav-active{
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* ============================================================
   Cookie consent banner
   ============================================================ */

.cp-consent{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 14px;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}

.cp-consent__inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  flex-wrap: wrap;
}

.cp-consent__text{ min-width: 260px; }
.cp-consent__title{ font-weight: 900; margin-bottom: 4px; }
.cp-consent__desc{ margin: 0; color: var(--muted); font-size: 14px; }

.cp-consent__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.cp-block{
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  min-width:0;
}

.cp-block--bordered,
.cp-block--framed{
  padding:0;
}


.cp-block--embedded{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.cp-callout{
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%);
}
.cp-callout ul{ margin:0; padding-left:18px; }
.cp-callout--warning{ border-color: rgba(234,179,8,.35); background: rgba(234,179,8,.08); }
.cp-callout--success{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }
.cp-callout--danger{ border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.08); }
.cp-callout--info{ border-color: rgba(37,99,235,.25); background: rgba(37,99,235,.06); }

.cp-prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
  background: rgba(244, 246, 247, 0.04);
  padding: 2px 6px;
  border-radius: 8px;
}
.cp-prose pre{
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  overflow:auto;
  background:#fbfcff;
}

/* ===== Blocks UI ===== */
.cp-block{
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
}
.cp-block .cp-block-meta { margin: 0 0 var(--space-2); }

.cp-inline-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%);
}

/* Callouts */
/* ==========================================================================
   CALLOUT v3 — token-first
   ========================================================================== */

.cp-callout{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--surface-2);
  color: var(--text);
}

.cp-callout__list{
  margin: 0;
  padding-left: 1.125rem;
}

.cp-callout__list li + li{
  margin-top: var(--space-1);
}

.cp-callout--info{
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
  color: var(--tone-info-text);
}

.cp-callout--success{
  background: var(--tone-success-bg);
  border-color: var(--tone-success-border);
  color: var(--tone-success-text);
}

.cp-callout--warning{
  background: var(--tone-warning-bg);
  border-color: var(--tone-warning-border);
  color: var(--tone-warning-text);
}

.cp-callout--danger{
  background: var(--tone-danger-bg);
  border-color: var(--tone-danger-border);
  color: var(--tone-danger-text);
}

.cp-callout__list code,
.cp-callout__list strong{
  color: inherit;
}

/* Assessment ref card */
.cp-assess{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: #fff;
}
.cp-assess-row{
  display:flex;
  align-items:center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cp-assess-spacer{ flex: 1; }

/* -------------------------------------------------------------------------
   Instructor: menu de acciones por curso
   ------------------------------------------------------------------------- */

.cp-row-actions{display:flex;align-items:center;gap:8px}

.cp-menu{position:relative;display:inline-block}
.cp-menu > summary{list-style:none;cursor:pointer}
.cp-menu > summary::-webkit-details-marker{display:none}

.cp-menu-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background: #fff;
}
.cp-menu-btn:hover{background: color-mix(in srgb, var(--bg) 96%, var(--text) 4%)}

.cp-menu-panel{
  position:absolute;
  right:0;
  top: calc(100% + 6px);
  min-width: 190px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 6px;
  z-index: 10;
}
.cp-menu-panel a,
.cp-menu-panel button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  font: inherit;
}
.cp-menu-panel a:hover,
.cp-menu-panel button:hover{background: color-mix(in srgb, var(--bg) 94%, var(--text) 6%)}

.cp-menu-panel .cp-menu-sep{height:1px;background: var(--border);margin: 6px 6px;}

.q-panel {
  display: none;
}

/* -------------------------------------------------------------------------
   Admin UI helpers (modern-white)
   ------------------------------------------------------------------------- */

.cp-actions-wrap{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.cp-actions-wrap form{ display:inline; margin:0; }

/* Lists (cards / rows) */
.cp-list{ margin: 12px 0 0; padding: 0; }
.cp-list__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--space-4);
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.cp-list__row:first-child{ border-top: 0; padding-top: 0; }
.cp-list__main{ min-width: 0; }
.cp-list__title{ font-weight: 800; margin:0; }
.cp-list__meta{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.cp-list__actions{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

/* Course catalog cards */
.cp-grid--cards{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px){ .cp-grid--cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .cp-grid--cards{ grid-template-columns: 1fr; } }

.cp-course-card{ padding: var(--space-5); }
.cp-course-card__title{ margin: 0 0 6px 0; font-size: 18px; }
.cp-course-card__desc{ margin: 0 0 14px 0; color: var(--muted); }
.cp-course-card__meta{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; margin: 10px 0 0; }
/* Sidebar refresh loading */
.cp-sidebar--loading{opacity:.65;filter:saturate(.85)}

/* Toasts */
.cp-toast-wrap{position:fixed;right:16px;bottom:16px;z-index:9999;display:grid;gap:10px;max-width:360px}
.cp-toast{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.10)}
.cp-toast__title{font-weight:800;margin:0 0 4px 0;font-size:14px}
.cp-toast__text{margin:0;color:var(--muted);font-size:13px;line-height:1.35}
.cp-toast--success{border-color:rgba(34,197,94,.35)}
.cp-toast--warning{border-color:rgba(245,158,11,.35)}
.cp-toast--error{border-color:rgba(239,68,68,.35)}

/* ------------------------------------------------------------
   Footer (Professional)
------------------------------------------------------------ */
.cp-footer{
  margin-top: 40px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.6);
}

.cp-footer__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 24px;
}

.cp-footer__brandRow{
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-footer__logo{
  height: 34px;
  width: auto;
  display: block;
}

.cp-footer__name{
  font-weight: 700;
  line-height: 1.1;
}

.cp-footer__tagline{
  font-size: 0.92rem;
  opacity: .8;
}

.cp-footer__meta{
  margin-top: 12px;
  font-size: 0.92rem;
  opacity: .8;
}

.cp-footer__cols{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.cp-footer__title{
  font-weight: 700;
  margin-bottom: 10px;
}

.cp-footer__link{
  display: block;
  padding: 6px 0;
  text-decoration: none;
  opacity: .9;
}

.cp-footer__link:hover{
  text-decoration: underline;
  opacity: 1;
}

@media (max-width: 900px){
  .cp-footer__inner{
    grid-template-columns: 1fr;
  }
  .cp-footer__cols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .cp-footer__cols{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Brand / Academy header
   ========================================================= */

.brand--academy{
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo{
  height: 64px;          /* controla tamaño aquí */
  width: auto;
  display: block;
}

.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-title{
  font-size: 2rem;       /* Academy grande */
  font-weight: 900;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-subtitle{
  font-size: 0.75rem;    /* by INFOCCO discreto */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* Ajustes responsive */
@media (max-width: 520px){
  .brand-title{ font-size: 1.6rem; }
  .brand-logo{ height: 48px; }
}


/* =========================================================
   Learning Player: sidebar colapsable + drawer mobile
   ========================================================= */

.cp-grid--learn{
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

.cp-learn-content{ min-width:0; }
.cp-learn-sidebar{ min-width:0; }

/* Desktop collapse (reduce a 1 col) */
.cp-grid--learn.is-sidebar-collapsed{
  grid-template-columns: minmax(0, 1fr);
}
.cp-grid--learn.is-sidebar-collapsed .cp-learn-sidebar{
  display:none;
}

/* Topbar */
.cp-learn-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.cp-sidebar-toggle{ min-width:44px; padding:10px 12px; }
.cp-learn-topbar__meta{ min-width:0; }
.cp-learn-topbar__title{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Drawer overlay (mobile) */
.cp-drawer{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}
.cp-drawer.is-open{ display:block; }

.cp-drawer__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.cp-drawer__panel{
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(380px, 88vw);
  background: #fff;
  border-right: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 14px;
  overflow: auto;
}

/* en mobile, el grid es 1 col; el sidebar vive en drawer */
@media (max-width: 900px){
  .cp-grid--learn{ grid-template-columns: 1fr; }
  .cp-learn-sidebar{ display:none; }
}

/* =========================================================
   Blocks: columns (2 cols)
   ========================================================= */

/* base: 2 cols */
.cp-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:start;
}

/* gaps */
.cp-cols--gap-sm{ gap:12px; }
.cp-cols--gap-md{ gap:16px; }
.cp-cols--gap-lg{ gap:24px; }

/* ✅ cuando el sidebar está abierto, colapsa más pronto */
@media (max-width: 1280px){
  [data-player-root][data-sidebar="open"] .cp-cols{
    grid-template-columns: 1fr;
  }
}

/* ✅ cuando está colapsado, permitimos 2 cols hasta más abajo */
@media (max-width: 900px){
  [data-player-root][data-sidebar="collapsed"] .cp-cols{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Assessment view: SIEMPRE sin sidebar (full width)
   ========================================================= */

.cp-grid--learn.cp-grid--learn--no-sidebar{
  grid-template-columns: minmax(0, 1fr) !important;
}

/* por si alguna regla deja 2 columnas, el contenido debe abarcar todo */
.cp-grid--learn.cp-grid--learn--no-sidebar > section{
  grid-column: 1 / -1;
}

/* si por accidente quedara un aside */
.cp-grid--learn.cp-grid--learn--no-sidebar aside{
  display: none !important;
}

/* ==========================================================================
   Instructor block editor: layout helpers (sin inline styles)
   ========================================================================== */

.cp-panel-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.cp-panel-mt{
  margin-top: var(--space-2);
}