@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Urbanist', system-ui, sans-serif;
  background: #fafbfd;
  color: #334155;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100vh;
  background: var(--sb-bg, #0C1117);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 1.25rem 1.25rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  outline: 2px solid rgba(34,197,94,.18);
  outline-offset: 1.5px;
}

.sidebar-logo-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: #64748b;
  letter-spacing: -.01em;
  line-height: 1;
}
.sidebar-logo-text b {
  font-weight: 800;
  color: #f1f5f9;
}
.sidebar-logo-tld {
  font-size: .72rem;
  font-weight: 500;
  color: #374151;
}

.sidebar-nav {
  flex: 1;
  padding: .5rem 0;
  overflow-y: auto;
}

.sidebar-section-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #3f5060;
  padding: 1.1rem 1.25rem .35rem;
}

.sidebar-item {
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.25rem;
  text-decoration: none;
  color: #94a3b8;
  font-size: .8rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
  position: relative;
}

.sidebar-item:hover {
  background: var(--sb-item-hover-bg, rgba(255,255,255,.05));
  color: #cbd5e1;
}
.sidebar-item:hover svg { color: #94a3b8; }

.sidebar-item.active {
  background: var(--sb-active-bg, rgba(37,99,235,.14));
  color: #fff;
  border-left-color: var(--sb-active-border, #2563eb);
  font-weight: 600;
}

.sidebar-item.active svg {
  color: var(--sb-active-icon, #60a5fa);
}

.sidebar-item svg {
  flex-shrink: 0;
  color: #4b5563;
  transition: color .15s;
}

/* ── Sidebar notification badge ──────────────────────────────────────────── */
.sidebar-notif-badge {
  display: none;
  position: absolute;
  top: 6px;
  right: 10px;
  background: #ef4444;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.sidebar-notif-badge.has-count { display: flex; }

/* ── Sidebar user section ─────────────────────────────────────────────────── */
.sidebar-user {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--avatar-from, #2563eb), var(--avatar-to, #1e40af));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .63rem;
  font-weight: 500;
  color: #64748b;
  text-transform: capitalize;
}

.sidebar-user-logout {
  color: #94a3b8;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s;
  display: flex;
  align-items: center;
  padding: .25rem;
}

.sidebar-user-logout:hover { color: #ef4444; }

/* ── Sidebar collapse toggle ──────────────────────────────────────────────── */
.sidebar { transition: width .22s ease; overflow: hidden; }

.sidebar-toggle {
  margin-left: auto;
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.08); color: #94a3b8; }
.sidebar-toggle svg { display: block; transition: transform .22s; }
.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* ── Sidebar collapsed state ──────────────────────────────────────────────── */
@media (min-width: 769px) {
  .sidebar-collapsed .sidebar { width: 56px; }
  .sidebar-collapsed .main-column { margin-left: 56px; }
  .sidebar-collapsed .sidebar-logo-text,
  .sidebar-collapsed .sidebar-logo-img,
  .sidebar-collapsed .sidebar-section-label,
  .sidebar-collapsed .sidebar-notif-badge { display: none; }
  .sidebar-collapsed .sidebar-logo { justify-content: center; padding: 1.25rem .5rem 1.1rem; }
  .sidebar-collapsed .sidebar-item { justify-content: center; padding: .6rem; font-size: 0; gap: 0; }
  .sidebar-collapsed .sidebar-item svg { flex-shrink: 0; }
  .sidebar-collapsed .sidebar-item.active svg { color: var(--sb-active-icon, #60a5fa); }
  .sidebar-collapsed .sidebar-toggle { margin-left: 0; }
}

/* ── Main column ─────────────────────────────────────────────────────────── */
.main-column {
  margin-left: 220px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--clr-body-bg, #fafbfd);
  transition: margin-left .22s ease;
}

/* ── Main topbar (zona usuario + futuras notificaciones) ──────────────────── */
.main-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .55rem 2rem;
  background: linear-gradient(var(--sb-active-bg, rgba(37,99,235,.14)), var(--sb-active-bg, rgba(37,99,235,.14))), var(--sb-bg, #0C1117);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  gap: .75rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.main-topbar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
}
@media (max-width: 768px) { .main-topbar { display: none; } }

/* Avatar image in sidebar */
.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Sidebar logo image */
.sidebar-logo-img {
  max-height: 18px;
  max-width: 100px;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ── Site footer ─────────────────────────────────────────────────────────── */
.site-footer {
  padding: 1.25rem 2rem;
  border-top: 1px solid #e4e2e9;
  text-align: center;
  font-size: .75rem;
  color: #b0b3bc;
  flex-shrink: 0;
  margin-top: auto;
}

/* ── Impersonation banner ────────────────────────────────────────────────── */
.impersonate-banner {
  background: #4f46e5; color: #fff;
  padding: .4rem 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  font-size: .8rem; font-weight: 600;
}
.impersonate-banner svg { flex-shrink: 0; opacity: .8; }
.impersonate-role {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  background: rgba(255,255,255,.2); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.impersonate-stop {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4);
  color: #fff; border-radius: 5px; padding: .2rem .65rem;
  font-size: .75rem; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .12s;
}
.impersonate-stop:hover { background: rgba(255,255,255,.28); }

/* ── Tool page wrapper ───────────────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 1.5rem 2rem;
}

/* ── Base card ───────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: none;
  padding: 2rem;
  width: 100%;
}

/* ── Legacy header-user styles (kept for compatibility) ──────────────────── */
.header-user {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.header-user--push { margin-left: auto; }

.header-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.header-user-name {
  font-size: .78rem;
  font-weight: 700;
  color: #1e3d5a;
  white-space: nowrap;
}

.header-user-role {
  font-size: .68rem;
  font-weight: 600;
  color: #9296a0;
  text-transform: capitalize;
}

.header-user-link {
  display: flex;
  align-items: center;
  color: #94a3b8;
  text-decoration: none;
  transition: color .15s;
}
.header-user-link:hover { color: #1e3d5a; }

.header-user-logout:hover { color: #b91c1c; }

/* ── Notification badge (legacy top-bar, kept for compat) ────────────────── */
.notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  color: #94a3b8;
  text-decoration: none;
  transition: color .15s;
}
.notif-btn:hover { color: #1e3d5a; }

.notif-count {
  display: none;
  position: absolute;
  top: -5px;
  right: -7px;
  background: #ef4444;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.notif-count.has-count { display: flex; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.top-bar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: .75rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.top-bar-title {
  font-size: .875rem;
  font-weight: 600;
  color: #1e2d3d;
}

.top-bar-breadcrumb {
  font-size: .78rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.top-bar-breadcrumb span { color: #94a3b8; }
.top-bar-breadcrumb span.current { color: #334155; font-weight: 600; }

/* ================================================================
   MOBILE LAYOUT  (drawer sidebar + top bar + bottom nav)
   ================================================================ */

/* Overlay para el drawer del sidebar */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 94;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  -webkit-tap-highlight-color: transparent;
}
.mob-overlay.open { opacity: 1; pointer-events: all; }

/* Barra superior sticky (hidden on desktop) */
.mob-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 79;
  height: 52px;
  background: var(--sb-bg, #0C1117);
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top, 0px);
  flex-shrink: 0;
  gap: .75rem;
  transition: transform .28s ease;
  will-change: transform;
}
.mob-topbar.nav-hidden {
  transform: translateY(-100%);
}

/* Botón hamburguesa */
.mob-ham {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,.08);
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
  padding: 0;
}
.mob-ham:active { background: rgba(255,255,255,.14); }
.mob-ham span {
  display: block;
  width: 18px;
  height: 2px;
  background: #94a3b8;
  border-radius: 2px;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s;
  transform-origin: center;
}
.mob-ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mob-ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Marca en topbar móvil */
.mob-brand {
  flex: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 400;
  color: #64748b;
  letter-spacing: -.01em;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-brand b { font-weight: 800; color: #f1f5f9; }
.mob-brand-tld { font-size: .68rem; color: #374151; }
.mob-brand-logo { height: 18px; max-width: 110px; object-fit: contain; vertical-align: middle; }

/* Avatar en topbar móvil */
.mob-topbar-av {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--avatar-from,#2563eb), var(--avatar-to,#1e40af));
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}
.mob-topbar-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }

/* Barra de navegación inferior */
.mob-botnav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: var(--sb-bg, #0C1117);
  border-top: 1px solid rgba(255,255,255,.07);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform .28s ease;
  will-change: transform;
}
.mob-botnav.nav-hidden {
  transform: translateY(100%);
}
.mob-botnav-inner {
  display: flex;
  height: 58px;
}
.mob-botnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #4b5563;
  font-size: .57rem;
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s;
  position: relative;
  padding-bottom: 2px;
  min-width: 0;
}
.mob-botnav-item.active { color: var(--sb-active-icon, #60a5fa); }
.mob-botnav-item svg { transition: color .12s; flex-shrink: 0; }
.mob-bn-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
.mob-bn-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 17px);
  background: #ef4444;
  color: #fff;
  font-size: .5rem;
  font-weight: 800;
  min-width: 13px;
  height: 13px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  line-height: 1;
}
.mob-bn-badge.has-count { display: flex; }

/* ── @media (max-width: 768px) ─────────────────────────────── */
@media (max-width: 768px) {
  /* Activar elementos móviles */
  .mob-topbar  { display: flex; }
  .mob-botnav  { display: block; }
  .mob-overlay { display: block; }

  /* Sidebar → drawer lateral */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 95;
    width: 272px;
    will-change: transform;
  }
  .sidebar.mob-open { transform: translateX(0); }

  /* Columna principal: ancho completo + espacio para la barra inferior */
  .main-column {
    margin-left: 0;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* Contenido de página */
  .page-content { padding: .875rem 1rem; }
  .top-bar { padding: .6rem 1rem; }

  /* Banner de impersonación */
  .impersonate-banner {
    padding: .3rem .75rem;
    font-size: .72rem;
    flex-wrap: wrap;
    gap: .35rem;
  }

  /* Tarjeta base */
  .card { padding: 1.25rem 1rem; }

  /* Footer oculto en móvil (el bottom nav lo sustituye) */
  .site-footer { display: none; }

  /* Top bar de página */
  .top-bar-title { font-size: .8rem; }
}

@media (max-width: 480px) {
  .page-content { padding: .75rem; }
  .card { padding: 1rem .75rem; }
}

/* ── Sidebar submenu ─────────────────────────────────────────────────────── */
.sidebar-subitem {
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.25rem .45rem 2.95rem;
  text-decoration: none;
  color: #64748b;
  font-size: .76rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  position: relative;
}
.sidebar-subitem::before {
  content: '';
  position: absolute;
  left: 1.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3f5060;
}
.sidebar-subitem:hover {
  background: var(--sb-item-hover-bg, rgba(255,255,255,.05));
  color: #cbd5e1;
}
.sidebar-subitem.active {
  background: var(--sb-active-bg, rgba(37,99,235,.14));
  color: #fff;
  border-left-color: var(--sb-active-border, #2563eb);
  font-weight: 600;
}
.sidebar-subitem.active::before { background: #60a5fa; }

/* Colapsar subitem junto al sidebar */
.sidebar-collapsed .sidebar-subitem { display: none; }