/* =========================
   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; } }

.topbar, .topnav { overflow: visible !important; }
.dropdown-menu { z-index: 3000; }


/* =========================
   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);
}

.fc-pill{ border-radius:999px !important; }
.fc-avatar{
  width:32px;height:32px;border-radius:50%;
  background:#0d6efd;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;
}




/* =========================
   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; }

/* Más ancho en pantallas grandes */
@media (min-width: 1400px) {
  .container-xxl { max-width: 1440px; }
}

/* Dropdown usuario en topbar: visible y arriba de todo */
.topbar, .topnav { overflow: visible !important; }
.topbar .dropdown { position: relative; }

.topbar .dropdown-menu{
  display: none;                 /* se muestra con .show */
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 220px;
  z-index: 5000 !important;

  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,.12);
  padding: 6px;
}

.topbar .dropdown-menu.show{ display:block; }

.topbar .dropdown-item{
  color: inherit !important;
  border-radius: 8px;
  font-weight: 500;
}

.topbar .dropdown-item:hover{ background: rgba(0,0,0,.04); }
.topbar[data-scheme="dark"] .dropdown-item:hover{ background: rgba(255,255,255,.06); }

.topbar .dropdown-menu {
  opacity: 0;
  transform: translateY(6px);
  transition: all .18s ease;
  display: block; /* importante */
  pointer-events: none;
}

.topbar .dropdown.show .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}