/* ===================================================================
   EPL LEARNING - Base / Global
   =================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.15; }
p { color: var(--ink-2); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ---- Scrollbars oscuros ---- */
* { scrollbar-width: thin; scrollbar-color: #33415C transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #33415C; border-radius: 20px; }
*::-webkit-scrollbar-thumb:hover { background: #45537a; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---- Contenido util ---- */
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 clamp(28px, 5vw, 88px); position: relative; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.hidden { display: none !important; }

.display-none { display: none !important; }
.grid-y-center { display: flex; align-items: center; }
.gap { gap: 10px; }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; white-space: nowrap;
  background: rgba(255,255,255,.08); color: var(--ink);
  border: 1px solid transparent; transition: all var(--t) var(--ease);
}
.btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }

.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent-hi); }

.btn-ghost { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }

.btn-outline { border-color: var(--line); background: rgba(0,0,0,.3); }
.btn-outline:hover { background: rgba(0,0,0,.45); }

.btn.icon { padding: 10px; border-radius: 50%; width: 44px; height: 44px; justify-content: center; }
.btn.icon.sm { width: 36px; height: 36px; padding: 8px; }

.btn-lg { padding: 14px 30px; font-size: 17px; border-radius: var(--radius); }

.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Inputs ---- */
.input,
.field-input {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  color: var(--ink); font-size: 15px; font-family: inherit;
  transition: border var(--t) var(--ease), background var(--t) var(--ease);
}
.input::placeholder, .field-input::placeholder { color: var(--ink-3); }
.input:focus, .field-input:focus {
  outline: none; border-color: var(--accent);
  background: rgba(255,255,255,.1);
}
select.field-input, select.input option { background: var(--bg-4); color: var(--ink); }

textarea.field-input { min-height: 120px; resize: vertical; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.badge-new    { background: var(--accent); color: #fff; }
.badge-top    { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; }
.badge-info   { background: rgba(44,156,232,.16); color: var(--info); }
.badge-ok     { background: rgba(33,208,122,.16); color: var(--success); }
.badge-nivel  { background: rgba(255,255,255,.12); color: var(--ink-2); }

/* ---- Toast ---- */
.toast-stack { position: fixed; top: 20px; right: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--radius);
  background: var(--bg-elev); color: var(--ink);
  box-shadow: var(--shadow-3); border-left: 4px solid var(--accent);
  animation: toast-in var(--t) var(--ease);
  font-size: 14px; max-width: 360px;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px);} to { opacity:1; transform:none; } }

/* ---- Utilidades de grid para catálogo ---- */
.row-label {
  font-size: 20px; font-weight: 700; margin: 0 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.row-label small { font-weight: 400; color: var(--ink-3); font-size: 14px; }

.section { margin: 40px 0; }

/* ---- Link de contraseña / links ---- */
.link { color: var(--accent-hi); cursor: pointer; }
.link:hover { text-decoration: underline; }

/* ---- Separador ---- */
.divider { height: 1px; background: var(--line); border: 0; margin: 20px 0; }