/* ═══════════════════════════════════════════════════════════════════════════
   D Intelligence Suite — Design System
   Colores: fondo oscuro #0f1724, sidebar #141c2e, acento verde #2ecc71
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --bg-dark:       #0f1724;
  --bg-sidebar:    #2c3e50;
  --bg-card:       #1e2a3f;
  --bg-card-hover: #253448;
  --bg-surface:    #f5f7fa;
  --bg-white:      #ffffff;
  --accent:        #2ecc71;
  --accent-hover:  #27ae60;
  --accent-light:  rgba(46,204,113,.12);
  --text-primary:  #e8ecf1;
  --text-secondary:#95a5a6;
  --text-dark:     #1a1f2e;
  --border:        rgba(255,255,255,.06);
  --shadow:        0 8px 32px rgba(0,0,0,.25);
  --radius:        12px;
  --sidebar-w:     clamp(180px, 20vw, 250px);
  --sidebar-collapsed-w: 64px;
  --topbar-h:      58px;
  --transition:    .25s cubic-bezier(.4,0,.2,1);
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body { font-family:var(--font); color:var(--text-dark); background:var(--bg-surface); -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
img { max-width:100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.page-login { background:var(--bg-dark); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-wrapper { position:relative; width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-bg { position:absolute; inset:0; overflow:hidden; }

.circuit-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(46,204,113,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,204,113,.05) 1px, transparent 1px);
  background-size:60px 60px;
  animation: gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:.4} 50%{opacity:.8} }

.login-card {
  position:relative; z-index:2; background:var(--bg-card);
  border:1px solid var(--border); border-radius:20px; padding:48px 40px;
  text-align:center; max-width:400px; width:90%; box-shadow:var(--shadow);
}
.login-logo { display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:12px; }
.logo-icon { font-size:48px; color:var(--accent); margin-bottom:8px; }
.login-logo h1 { font-size:22px; font-weight:700; color:var(--text-primary); }
.logo-sub { font-size:32px; font-weight:300; color:var(--text-primary); letter-spacing:4px; }
.login-desc { color:var(--text-secondary); margin-bottom:32px; font-size:13px; }

.btn-login {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 32px; background:var(--accent); color:#fff;
  border-radius:8px; font-weight:600; font-size:15px;
  transition:var(--transition);
}
.btn-login:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 6px 20px rgba(46,204,113,.35); }

.login-footer { margin-top:28px; }
.login-footer span { color:var(--text-secondary); font-size:11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP LAYOUT  (sidebar + main)
   ═══════════════════════════════════════════════════════════════════════════ */

.app-layout { display:flex; min-height:100vh; overflow-x:hidden; }
.app-main {
  flex:1;
  display:flex;
  flex-direction:column;
  margin-left:var(--sidebar-w);
  min-width:0;
  padding-top:var(--topbar-h);
  transition:var(--transition);
}
.sidebar.collapsed ~ .app-main {
  margin-left:var(--sidebar-collapsed-w);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  background:#2c3e50;
  border-right:1px solid #1a252f;
  display:flex;
  flex-direction:column;
  position:fixed;
  left:0;
  top:0;
  height:100dvh;
  min-height:100vh;
  overflow-y:auto;
  transition:width .3s cubic-bezier(.4, 0, .2, 1);
  z-index:100;
}

.sidebar.collapsed { width:var(--sidebar-collapsed-w); }

.sidebar-header {
  padding:.8rem .75rem;
  border-bottom:1px solid #1a252f;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:66px;
}

.sidebar-title {
  font-size:1.24rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  cursor:pointer;
  display:flex;
  align-items:center;
}

.sidebar-brand-image {
  display:block;
  height:18px;
  width:auto;
  max-width:72px;
  object-fit:contain;
}

.sidebar.collapsed .sidebar-title {
  opacity:0;
  width:0;
  overflow:hidden;
}

.submenu {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  background:#253444;
}

.submenu.active { max-height:500px; }

.toggle-sidebar {
  width:28px;
  height:28px;
  background:transparent;
  border:1px solid #1a252f;
  border-radius:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#95a5a6;
}

.toggle-sidebar:hover {
  background:#34495e;
  color:#fff;
}

.nav-menu { flex:1; padding:.7rem 0; }
.nav-section { margin-bottom:1rem; }

.sidebar-footer {
  border-top:1px solid #1a252f;
  padding:.75rem .6rem;
  text-align:center;
  color:#95a5a6;
  font-size:.66rem;
  letter-spacing:.02em;
}

.nav-section-title {
  padding:.4rem .8rem;
  font-size:.6rem;
  font-weight:700;
  color:#7f8c8d;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.nav-item {
  display:flex;
  align-items:center;
  padding:.95rem 1.1rem;
  color:#bdc3c7;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  font-size:1.02rem;
}

.nav-item:hover {
  background:#34495e;
  color:#fff;
}

.nav-item.active {
  background:rgb(0, 0, 0);
  color:#ffffff;
  font-weight:600;
}

.nav-item.active::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:#00D084;
}

.nav-icon {
  width:20px;
  margin-right:.7rem;
  text-align:center;
  font-size:1.08rem;
}

.sidebar .submenu-arrow {
  margin-left:auto;
  font-size:.68rem;
  transition:transform .3s;
}

.nav-item.open .submenu-arrow { transform:rotate(180deg); }

.submenu-item {
  display:flex;
  align-items:center;
  padding:.74rem 1.1rem .74rem 2.5rem;
  color:#bdc3c7;
  text-decoration:none;
  font-size:.95rem;
}

.submenu-icon {
  width:14px;
  margin-right:.45rem;
  text-align:center;
  font-size:.82rem;
  opacity:.85;
}

.submenu-item:hover {
  background:#34495e;
  color:#fff;
}

.submenu-item.active {
  color:#ffffff;
  font-weight:500;
}

.sidebar-overlay {
  display:none;
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .submenu-arrow {
  opacity:0;
  width:0;
  overflow:hidden;
}

.sidebar.collapsed .sidebar-footer {
  padding:.7rem .4rem;
}

.sidebar.collapsed .sidebar-footer span {
  display:none;
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .submenu-item {
  padding-left:1.1rem;
  padding-right:1.1rem;
}

.sidebar.collapsed .nav-icon { margin-right:0; }
.sidebar.collapsed .submenu { display:none !important; }
.sidebar.collapsed .nav-section-title { padding-left:0; padding-right:0; }
.sidebar.collapsed .nav-item::before { display:none; }
.sidebar.collapsed .nav-item { justify-content:center; }
.sidebar.collapsed .toggle-sidebar { margin:0 auto; }
.sidebar.collapsed .sidebar-header { justify-content:center; }
.sidebar.collapsed .nav-section { margin-bottom:1rem; }
.sidebar.collapsed .nav-item.has-children .submenu-arrow { display:none; }

.nav-item:focus-visible {
  outline:2px solid #ffffff;
  outline-offset:-2px;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
  background:transparent;
  border-bottom:none;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
  position:fixed;
  top:0;
  left:var(--sidebar-w);
  width:calc(100% - var(--sidebar-w));
  z-index:1000;
  box-shadow:none;
}

.sidebar.collapsed ~ .app-main .navbar {
  left:var(--sidebar-collapsed-w);
  width:calc(100% - var(--sidebar-collapsed-w));
}

.navbar-left,
.navbar-right {
  display:flex;
  align-items:center;
  gap:.75rem;
}

.navbar-logo {
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
}

.navbar-logo-icon {
  width:36px;
  height:36px;
  background:var(--accent);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  font-weight:800;
  color:#fff;
  box-shadow:0 0 12px rgba(46,204,113,.4);
}

.navbar-logo-text {
  font-size:.95rem;
  font-weight:600;
  color:var(--text-primary);
  letter-spacing:.01em;
}

.navbar-home-link {
  width:34px;
  height:34px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent) !important;
  font-size:18px;
  transition:var(--transition);
}

.navbar-home-link i {
  color:var(--accent) !important;
}

.navbar-home-link:hover {
  background:var(--accent-light);
  color:var(--accent-hover) !important;
}

.navbar-home-link:hover i {
  color:var(--accent-hover) !important;
}

.user-dropdown { position:relative; }

.user-button {
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.35rem .75rem .35rem .35rem;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:40px;
  cursor:pointer;
  transition:var(--transition);
}

.user-button:hover {
  background:transparent;
  border-color:rgba(255,255,255,.4);
}

.user-avatar-placeholder,
.user-avatar-photo {
  width:34px;
  height:34px;
  border-radius:50%;
  flex-shrink:0;
}

.user-avatar-photo {
  object-fit:cover;
  display:block;
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.user-avatar-placeholder {
  background:linear-gradient(135deg, #2ecc71 0%, #1a8a4a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  outline:2px solid rgba(46,204,113,.5);
  outline-offset:2px;
}

.user-info {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:200px;
}

.user-name {
  font-size:.82rem;
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}

.user-email {
  font-size:.71rem;
  color:var(--text-secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}

.user-dropdown-arrow {
  color:var(--text-secondary);
  font-size:.85rem;
  transition:transform var(--transition);
}

.user-button[aria-expanded="true"] .user-dropdown-arrow {
  transform:rotate(180deg);
}

/* ── User dropdown menu ──────────────────────────────────────────────────── */
.user-dropdown-menu {
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:210px;
  background:#1e2533;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  z-index:2000;
  overflow:hidden;
  animation:dropdownFadeIn .15s ease;
}

.user-dropdown-menu.is-open { display:block; }

@keyframes dropdownFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.user-dropdown-header {
  padding:.75rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.udm-name {
  font-size:.83rem;
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.udm-email {
  font-size:.72rem;
  color:var(--text-secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-dropdown-divider {
  height:1px;
  background:rgba(255,255,255,.06);
  margin:0;
}

.user-dropdown-item {
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.65rem 1rem;
  font-size:.84rem;
  color:var(--text-secondary);
  text-decoration:none;
  transition:var(--transition);
  cursor:pointer;
}

.user-dropdown-item:hover {
  background:rgba(255,255,255,.05);
  color:var(--text-primary);
}

.user-dropdown-item--danger {
  color:#f87171;
}

.user-dropdown-item--danger:hover {
  background:rgba(239,68,68,.1);
  color:#ef4444;
}

/* ── Content ─────────────────────────────────────────────────────────────── */
.app-content { flex:1; overflow-y:auto; }

.home-content {
  min-height:calc(100dvh - var(--topbar-h));
  background:#0b1728 url('/static/dashboard/Gemini_Generated_Image_r585svr585svr585_cropped.png') top center / cover no-repeat;
  position:relative;
  padding:34px 34px 30px;
  display:flex;
  flex-direction:column;
  gap:34px;
}

.page-dashboard .home-content {
  margin-top:calc(-1 * var(--topbar-h));
  padding-top:calc(34px + var(--topbar-h));
}

.page-dashboard .user-name,
.page-dashboard .user-email,
.page-dashboard .user-dropdown-arrow,
.page-dashboard .btn-logout {
  color:#ffffff;
}

.page-dashboard .user-button {
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.page-dashboard .user-button:hover {
  background:rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.5);
}

.page-dashboard .user-name,
.page-dashboard .user-email {
  text-shadow:0 1px 2px rgba(0, 0, 0, .45);
}

.page-dashboard .btn-logout {
  border:1px solid rgba(255, 255, 255, .38);
  background:rgba(6, 20, 38, .52);
  box-shadow:0 4px 16px rgba(0, 0, 0, .22);
}

.page-dashboard .btn-logout:hover {
  border-color:rgba(255, 255, 255, .68);
  background:rgba(6, 20, 38, .75);
  color:#ffffff;
}

/* ── Hero Section ────────────────────────────────────────────────────────── */
.hero-section {
  position:relative;
  overflow:hidden;
  padding:18px 8px 0;
}
.hero-bg { position:absolute; inset:0; opacity:.55; pointer-events:none; }
.hero-content { position:relative; z-index:2; text-align:center; }
.hero-logo { display:inline-flex; align-items:center; gap:16px; }
.logo-diamond {
  width:52px;
  height:52px;
  background:#1f8f67;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:26px;
  box-shadow:none;
}
.hero-brand {
  color:#b8c3d1;
  font-size:1.55rem;
  font-weight:500;
  letter-spacing:.05em;
  display:block;
  text-align:left;
}
.hero-title {
  color:#eef2f7;
  font-size:3.2rem;
  font-weight:300;
  letter-spacing:.13em;
  line-height:1;
  text-align:left;
}

/* ── Main Module ─────────────────────────────────────────────────────────── */
.home-module-section {
  display:flex;
  justify-content:center;
}
.modules-grid {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:24px;
}
.module-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  background:transparent;
  border:0;
  transition:var(--transition);
  text-align:center;
}
.module-card:hover {
  transform:translateY(-3px);
}
.module-icon-wrap {
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  color:#6fc4a2;
  text-shadow:none;
}
.module-name {
  color:#d7e0ec;
  font-weight:500;
  font-size:2rem;
}

/* ── KPI Cards ───────────────────────────────────────────────────────────── */
.home-kpi-section {
  margin-top:auto;
}
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:18px;
}
.kpi-card {
  position:relative;
  padding:18px 26px;
  border-radius:12px;
  background:rgba(22, 36, 56, .9);
  border:1px solid rgba(154, 170, 191, .35);
  box-shadow:none;
  overflow:hidden;
}
.kpi-head {
  color:#b8c5d8;
  font-size:1.6rem;
  font-weight:500;
  letter-spacing:.02em;
}
.kpi-value {
  color:#ffffff;
  font-size:4rem;
  font-weight:700;
  line-height:1;
  margin-top:6px;
}
.kpi-sub {
  color:#c7d2df;
  font-size:1.8rem;
  margin-top:6px;
}
.kpi-line {
  position:absolute;
  right:16px;
  bottom:18px;
  width:44%;
  height:38px;
  border-top:3px solid rgba(176, 190, 209, .8);
  border-radius:50% 40% 0 0;
  filter:none;
  opacity:.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERROR PAGES
   ═══════════════════════════════════════════════════════════════════════════ */
.page-error { background:var(--bg-dark); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.error-wrapper { text-align:center; }
.error-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:20px;
  padding:48px 40px; max-width:420px; box-shadow:var(--shadow);
}
.error-icon { font-size:56px; color:#ef4444; margin-bottom:16px; }
.error-icon.success { color:var(--accent); }
.error-card h1 { color:var(--text-primary); font-size:22px; margin-bottom:8px; }
.error-card p { color:var(--text-secondary); margin-bottom:28px; font-size:14px; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; background:var(--accent); color:#fff;
  border-radius:8px; font-weight:600; transition:var(--transition);
}
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════════════
   MFE IFRAME / EMBED
   ═══════════════════════════════════════════════════════════════════════════ */
.mfe-wrapper {
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  margin:0;
  padding:0;
  max-width:none;
  height:calc(100dvh - var(--topbar-h));
  min-height:calc(100vh - var(--topbar-h));
  overflow:hidden;
}

.mfe-frame {
  flex:1;
  width:100%;
  min-width:100%;
  max-width:none;
  height:100%;
  min-height:0;
  border:none;
  display:block;
}

/* ── Overlay (siempre disponible) ────────────────────────────────────────── */
.sidebar-overlay {
  display:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.5);
  z-index:998;
}
.sidebar-overlay.active { display:block; }

/* ── Navbar hamburger (mobile only) ─────────────────────────────────────── */
.navbar-hamburger {
  display:none;
  width:36px;
  height:36px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  color:#1f2937;
  border:1px solid #d7dde5;
  background:#fff;
  cursor:pointer;
  margin-right:.5rem;
  transition:var(--transition);
}
.navbar-hamburger:hover { background:#f3f5f7; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ───────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  :root { --sidebar-w: clamp(160px, 18vw, 210px); }

  .nav-item { padding:.72rem 1rem; font-size:.9rem; }
  .submenu-item { padding:.58rem 1rem .58rem 2rem; font-size:.84rem; }
  .nav-icon { width:17px; margin-right:.5rem; font-size:.95rem; }
  .sidebar-title { font-size:1rem; }
  .sidebar-header { min-height:56px; padding:.8rem 1rem; }

  /* Topbar: ocultar texto largo del logo */
  .navbar-logo-text { font-size:.9rem; }
}

/* ── Mobile (≤768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar es un drawer — siempre fuera de pantalla por defecto */
  .sidebar {
    left:-100vw;
    top:0;
    width: min(260px, 78vw);
    z-index:999;
    transition:left .3s cubic-bezier(.4,0,.2,1);
    height:100dvh;
    min-height:100vh;
  }
  .sidebar.mobile-open {
    left:0;
    box-shadow:0 10px 40px rgba(0,0,0,.45);
  }
  /* collapsed no afecta el drawer en móvil */
  .sidebar.collapsed { width: min(260px, 78vw); left:-100vw; }
  .sidebar.collapsed.mobile-open { left:0; }

  /* Contenido ocupa todo el ancho */
  .app-main { margin-left:0 !important; }
  .sidebar.collapsed ~ .app-main { margin-left:0 !important; }

  /* Navbar full-width */
  .navbar { left:0 !important; width:100% !important; padding:0 .75rem; }
  .sidebar.collapsed ~ .app-main .navbar { left:0 !important; width:100% !important; }

  /* Hamburguesa visible, toggle interno oculto */
  .navbar-hamburger { display:inline-flex; }
  .toggle-sidebar { display:none; }
  .user-info { display:none; }

  /* Hero / dashboard */
  .hero-title { font-size:1.8rem; letter-spacing:.06em; }
  .hero-brand { font-size:1.1rem; }
  .modules-grid { gap:12px; }
  .module-card { padding:18px 12px; }
  .module-name { font-size:1.2rem; }
  .kpi-grid { grid-template-columns:1fr; gap:12px; }
  .kpi-value { font-size:2.6rem; }
  .kpi-head { font-size:1.1rem; }
}

/* ── Landscape muy pequeño (altura ≤500px, ancho >1024px — ej. TV/monitor rotado) */
@media (max-height: 500px) and (min-width: 1025px) {
  .sidebar { width: var(--sidebar-collapsed-w); }
  .sidebar .nav-text,
  .sidebar .nav-section-title,
  .sidebar .submenu-arrow,
  .sidebar .sidebar-title { opacity:0; width:0; overflow:hidden; }
  .sidebar .sidebar-footer span { display:none; }
  .sidebar .nav-item,
  .sidebar .submenu-item { padding-left:1rem; padding-right:1rem; }
  .sidebar .nav-icon { margin-right:0; }
  .sidebar .nav-item { justify-content:center; }
  .sidebar .sidebar-header { justify-content:center; }
  .sidebar .submenu { display:none !important; }
  .app-main { margin-left: var(--sidebar-collapsed-w); }
  .navbar { left: var(--sidebar-collapsed-w) !important; width: calc(100% - var(--sidebar-collapsed-w)) !important; }
}

/* ── Mostrar user-info en desktop ───────────────────────────────────────── */
@media (min-width: 769px) {
  .user-info { display:flex; }
  .navbar-hamburger { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.loading-overlay {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:80px; color:var(--text-secondary);
}
.spinner {
  width:40px; height:40px; border:4px solid #e2e8f0;
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Bouncing dots */
.dots { display:flex; gap:6px; }
.dots span {
  width:12px; height:12px; border-radius:50%; background:var(--accent);
  animation:bounce 1.4s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay:.2s; }
.dots span:nth-child(3) { animation-delay:.4s; }
@keyframes bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }