/* ============================
   Kody Academy · Dashboard Maestro
   Estilos coherentes con la landing
   ============================ */

/* Variables y base (idénticas a la landing) */
:root{
  --primary:#6622CF; /* Morado */
  --accent:#00CCFE;  /* Azul */
  --sun:#FFD24C;     /* Amarillo */
  --ink:#111111;
  --ink-2:#2B2B2B;
  --muted:#6B7280;
  --bg:#0E0E10;      /* fondo profundo */
  --card:#151518;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

html,body{
  background:var(--bg);
  color:#EDEDEE;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Contenedor principal */
.content { padding: 20px 0 32px; }
.container-lg { max-width: 1200px; }

/* Tarjetas base (alineado a .card de landing) */
.card{
  background:var(--card) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}
.card .card-body{ padding:18px; }

/* Top bar (similar a header blur) */
.top-bar-title-only{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 16px;
  backdrop-filter: blur(10px);
  background: rgba(14,14,16,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.back-button{
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#EDEDEE;
}
.back-button:hover{ background:rgba(255,255,255,.08); }
.screen-title{
  margin:0; font-family: Mont, Inter; font-weight:700; letter-spacing:.2px;
  font-size:18px;
}

/* Botones (coherentes con landing) */
.btn{
  border-radius:14px !important;
  font-weight:600 !important;
  box-shadow: var(--shadow);
  transition: transform .05s ease, box-shadow .2s, filter .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--primary) !important; border-color:var(--primary) !important; }
.btn-outline-dark{
  color:#EDEDEE !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:transparent !important;
}
.btn-outline-dark:hover{ background:rgba(255,255,255,.06) !important; }
.btn-dark{ background:#1E1F24 !important; border-color:#1E1F24 !important; }
.btn-warning{
  background:var(--sun) !important; border-color:var(--sun) !important; color:#111 !important;
}

/* Badges/Pills */
.badge{
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.12);
}
.badge[data-variant="primary"]{ background:var(--primary); }
.badge[data-variant="accent"]{ background:var(--accent); color:#05242C; }
.badge[data-variant="sun"]{ background:var(--sun); color:#111; }

/* KPIs */
.kpi-card{
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.kpi-card .h3{ font-family: Mont, Inter; font-weight:800; }
.kpi-card .text-muted{ color:#C8C9CF !important; }

/* Progreso */
.progress{
  background:#0D0D11; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.06);
}
.progress .progress-bar{
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(0,204,254,.35) inset;
  border-radius:999px;
}

/* Listas y tablas rápidas */
.list-group-item{
  background:transparent !important;
  color:#EDEDEE !important;
  border-color: rgba(255,255,255,.08) !important;
}
.list-group-item .small{ color:#C8C9CF !important; }

/* Tarjetas de curso */
.course-card .h6{ font-family: Mont, Inter; font-weight:700; }
.course-card .meta{ color:#C8C9CF; }

/* Buscador / filtros */
.filter-card .form-control{
  background:#0D0D11; color:#EDEDEE; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:10px 12px;
}
.filter-card .form-control:focus{
  outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,204,254,.15);
}
.filter-card label{ color:#B8BAC2; }

/* Enlaces y estados */
a{ color:#EDEDEE; text-decoration:none; }
a:hover{ color:#fff; }
.small, .text-muted{ color:#C8C9CF !important; }

/* Utilidades */
.gap-2{ gap:.5rem; }
.gap-3{ gap:1rem; }
.h6{ font-weight:700; }
.rounded-12{ border-radius:12px; }
.rounded-14{ border-radius:14px; }

/* Responsive tweaks */
@media(max-width: 576px){
  .screen-title{ font-size:16px; }
  .top-bar-title-only{ height:56px; }
  .card .card-body{ padding:16px; }
}

/* Estado vacío */
.empty{
  border:1px dashed rgba(255,255,255,.12);
  background:#111216;
  border-radius:14px;
  padding:24px;
  text-align:center;
  color:#C8C9CF;
}

/* Tooltips (si usas Bootstrap) en dark */
.tooltip-inner{ background:#1E1F24; color:#EDEDEE; border:1px solid rgba(255,255,255,.12); }
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before{ border-top-color:#1E1F24; }

/* Impresión */
@media print{
  .top-bar-title-only, .btn { display:none !important; }
  body{ background:#fff; color:#111; }
  .card{
    background:#fff !important;
    color:#111 !important;
    border:1px solid #ddd !important;
    box-shadow:none !important;
  }
}