/* =========================
   Tarjetas y textos básicos
   ========================= */
.auth-card{
  max-width:520px; margin:48px auto; padding:28px;
  background:#fff; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.auth-title{ font-weight:700; margin-bottom:8px; }
.auth-subtitle{ color:#666; margin-bottom:20px; }

/* =========================
   Offset del header fino
   ========================= */
:root{ --topbar-h: 64px; }
body.has-sticky-offset{ padding-top: var(--topbar-h) !important; }
body.no-offset{ padding-top:0 !important; margin-top:0 !important; }
@media (max-width: 991px){ :root{ --topbar-h:56px; } }

/* =========================
   Panel ancho (dashboard)
   ========================= */
body.dashboard .auth-card.dashboard-card{
  max-width:1280px; margin:32px auto; padding:28px;
}
@media (min-width:1200px){
  body.dashboard .auth-card.dashboard-card{ padding:32px 36px; }
}
body.dashboard .offers-grid .card{
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* =========================
   Cursos (listado ancho)
   ========================= */
body.courses .auth-card.courses-card{
  max-width:1200px; margin:40px auto; padding:28px;
}
@media (min-width:1400px){
  body.courses .auth-card.courses-card{ max-width:1320px; }
}
body.courses .table td, body.courses .table th{
  vertical-align:middle; white-space:nowrap;
}
body.courses .table td:nth-child(1){ white-space:normal; }

/* =========================
   Header moderno (topbar)
   ========================= */

/* Paleta por defecto (claro) */
:root{
  --tb-bg:#ffffff;
  --tb-fg:#263238;
  --tb-link:#263238;
  --tb-link-hover:#0f4c81;   /* azul institucional */
  --tb-border:rgba(0,0,0,.08);
  --tb-dd-bg:rgba(255,255,255,.98);
  --tb-dd-fg:#263238;
  --tb-dd-border:rgba(0,0,0,.08);
}

.topbar{
  position:sticky; top:0; z-index:1200;
  background:var(--tb-bg);
  border-bottom:1px solid var(--tb-border);
  backdrop-filter:saturate(160%) blur(6px);
  -webkit-backdrop-filter:saturate(160%) blur(6px);
}
.topbar .container{ padding-top:.35rem; padding-bottom:.35rem; }

.topnav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topnav .brand{ display:flex; align-items:center; }
.topnav .brand img{ height:52px; width:auto; display:block; }

/* Menú desktop */
.topmenu{
  display:flex; align-items:center; gap:18px;
  margin:0; padding:0; list-style:none;
}
.topmenu > li > a{
  color:var(--tb-link); text-decoration:none; font-weight:600;
  letter-spacing:.01em; padding:8px 4px; display:inline-block;
}
.topmenu > li > a:hover,
.topmenu > li > a:focus{ color:var(--tb-link-hover); }

/* Dropdown */
.topmenu li.has-sub{ position:relative; }
.topmenu li.has-sub > a::after{
  content:"▾"; font-size:.8em; margin-left:.35rem; opacity:.8;
}
.topmenu .sub-menu{
  position:absolute; top:100%; left:0; margin-top:8px; min-width:220px;
  background:var(--tb-dd-bg); color:var(--tb-dd-fg);
  border:1px solid var(--tb-dd-border);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:6px; opacity:0; transform:translateY(6px);
  pointer-events:none; transition:.18s ease;
}
.topmenu .sub-menu li{ list-style:none; }
.topmenu .sub-menu a{
  display:block; padding:8px 10px; border-radius:8px; color:inherit; text-decoration:none; font-weight:500;
}
.topmenu .sub-menu a:hover{ background:rgba(0,0,0,.04); }

/* Mostrar dropdown al hover en desktop */
@media (min-width:992px){
  .topmenu > li.has-sub:hover > .sub-menu,
  .topmenu > li.has-sub.open   > .sub-menu{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
}

/* Botones del encabezado */
.menu-trigger, .theme-toggle{
  background:transparent; border:0; padding:.35rem .5rem; line-height:1;
  color:var(--tb-link); font-size:1.1rem; cursor:pointer;
}
.menu-trigger:hover, .theme-toggle:hover{ color:var(--tb-link-hover); }

/* Chip usuario */
.user-chip{ color:var(--tb-fg); opacity:.85; }
.user-dni{ opacity:.8; font-size:.9em; }

/* compat con algun markup antiguo */
.nav .user-dni{ font-size:.85em; color:rgba(31,41,55,.7); margin-left:.35rem; }

/* Mobile */
.menu-trigger{ display:none; }
@media (max-width:991px){
  .menu-trigger{ display:inline-block; }
  .topmenu{
    position:absolute; left:0; right:0; top:100%;
    background:var(--tb-bg); border-bottom:1px solid var(--tb-border);
    display:none; flex-direction:column; gap:6px; padding:10px 12px;
  }
  .topmenu.open{ display:flex; }
  .topmenu .sub-menu{
    position:static; transform:none; opacity:1; pointer-events:auto;
    background:transparent; border:0; box-shadow:none; padding:0; margin:4px 0 0 8px;
  }
  .topmenu .sub-menu a{ padding:6px 8px; }
}

/* Tema oscuro (cuando <header class="topbar" data-scheme="dark">) */
.topbar[data-scheme="dark"]{
  --tb-bg:rgba(18,24,33,.82);
  --tb-fg:#e9eef2;
  --tb-link:#ffffff;
  --tb-link-hover:#ffd166;
  --tb-border:rgba(255,255,255,.06);
  --tb-dd-bg:rgba(18,24,33,.95);
  --tb-dd-fg:#e9eef2;
  --tb-dd-border:rgba(255,255,255,.08);
  color:var(--tb-fg);
}
/* Tarjetas de noticias */
.news-card img { object-fit: cover; height: 200px; }
.news-view .content img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; }

.news-card img { object-fit: cover; height: 200px; }

<style>
  .badge-cursando{
    position:absolute;
    left:.5rem;
    top:.5rem;
    z-index:3;
    /* opcional: un poco más chico */
    font-weight:600;
    padding:.35rem .6rem;
  }
</style>
/* Más ancho en pantallas grandes */
@media (min-width: 1400px) {
  .container-xxl { max-width: 1440px; } /* podés subir a 1600px si te gusta más ancho */
}