/* ============================================================================
   ExpedienteGine — Design System
   Sistema de diseño base. Usa variables CSS del tema activo.
   ============================================================================ */

/* ── Reset y base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Tamaños de fuente por preferencia */
body[data-font-size="sm"] { font-size: 15px; }
body[data-font-size="md"] { font-size: 17px; }
body[data-font-size="lg"] { font-size: 19px; }

/* ── Tipografía ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { color: var(--color-text-secondary); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-accent-dark, var(--color-accent)); opacity: 0.85; }

/* ── App Shell ────────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: 260px;
  min-width: 260px;
  background-color: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh; /* dvh = alto real del viewport; evita que la barra de URL móvil tape las opciones inferiores */
  padding-top: env(safe-area-inset-top, 0px); /* no esconder el brand bajo el notch en PWA */
  z-index: 1000;
  transition: width 0.25s ease, transform 0.25s ease;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* impide que el scroll encadene al body y rebote (rubber-band) */
  -webkit-overflow-scrolling: touch; /* scroll con momentum en iOS */
}

/* FIX colapso: incluir min-width o `width: 68px` no aplica (queda 260px). */
.sidebar.collapsed { width: 68px; min-width: 68px; max-width: 68px; flex-basis: 68px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-section-title { display: none; }
.sidebar.collapsed .nav-icon { margin-right: 0; }
/* Grupo "Más" se oculta al colapsar: a 68px no caben sus etiquetas/disclosure. */
.sidebar.collapsed .sidebar-more { display: none; }
.sidebar.collapsed .sidebar-brand {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 68px;
  padding: 12px 8px;
}
.sidebar.collapsed .sidebar-brand-mark {
  width: 44px;
  height: 44px;
}
.sidebar.collapsed .sidebar-brand-logo-img {
  width: 38px;
  height: 38px;
}

.sidebar-brand {
  display: block;
  padding: 16px 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: 98px;
  background: rgba(255,255,255,0.035);
}

.sidebar-brand .brand-logo {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.sidebar.collapsed .sidebar-brand .brand-logo {
  grid-template-columns: 1fr;
  justify-items: center;
}

.sidebar-brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.sidebar-brand-logo-img {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
}

.sidebar-brand-icon {
  width: 42px;
  height: 42px;
  background: var(--color-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.sidebar-brand-name {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.brand-logo {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: inherit;
}

.brand-logo--icon {
  grid-template-columns: auto;
}

.brand-logo--sm .brand-logo-mark {
  width: 40px;
  height: 40px;
}

.brand-logo--sm .brand-logo-img,
.brand-logo--sm .brand-logo-placeholder {
  width: 32px;
  height: 32px;
  font-size: .78rem;
}

.brand-logo--lg {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.brand-logo--lg .brand-logo-mark {
  width: 74px;
  height: 74px;
}

.brand-logo--lg .brand-logo-img,
.brand-logo--lg .brand-logo-placeholder {
  width: 62px;
  height: 62px;
  font-size: 1rem;
}

.brand-logo--lg .brand-logo-title {
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  justify-content: center;
}

.brand-logo--lg .brand-logo-subtitle {
  color: var(--color-text-secondary);
  opacity: 1;
}

.sidebar-brand-sub {
  font-size: 0.66rem;
  color: var(--color-sidebar-text);
  opacity: 0.7;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sidebar-nav {
  /* El nav NO crece: el footer (Asistente IA / Apariencia / Cerrar sesión) queda
     pegado al final del menú en lugar de anclarse al fondo del sidebar. Anclarlo
     al fondo dejaba un gran hueco blanco bajo "Más" cuando hay pocos ítems (se veía
     como un "cuadro blanco" en pantallas anchas). Si el menú es muy largo, el propio
     sidebar (overflow-y:auto) desplaza. */
  flex: 0 0 auto;
  padding: 12px 0;
}

.sidebar-section-title {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-sidebar-text);
  opacity: 0.5;
  padding: 12px 20px 6px;
}

.nav-item {
  margin: 2px 8px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--color-sidebar-text) !important;
  font-size: 0.875rem;
  font-weight: 450;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.nav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
}

.nav-link.active {
  background: rgba(255,255,255,0.12);
  color: var(--color-sidebar-active) !important;
  font-weight: 500;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.8;
}

.nav-link.active .nav-icon,
.nav-link:hover .nav-icon { opacity: 1; }

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── Contenido principal ──────────────────────────────────────────────────── */
.main-wrapper {
  flex: 1;
  /* min-width:0 es CLAVE: sin esto, un flex item conserva min-width:auto y se
     niega a encogerse bajo el min-content de su contenido (p.ej. el título
     nowrap del topbar), forzando a .main-wrapper -y por herencia a
     .content-area- a crecer más ancho que el viewport en iPhone. */
  min-width: 0;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.25s ease;
}

.main-wrapper.sidebar-collapsed { margin-left: 68px; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
  background-color: var(--color-topbar-bg);
  border-bottom: 1px solid var(--color-border);
  /* PWA con viewport-fit=cover: el inset superior evita que el topbar quede
     bajo la barra de estado / notch en iPhone (env() = 0 en navegador normal) */
  height: calc(64px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  padding: 0 24px;
  padding-top: env(safe-area-inset-top, 0px);
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 0 var(--color-border);
}

.topbar-toggle {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.topbar-toggle:hover { background: var(--color-bg-secondary); }

.topbar-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.topbar-search {
  display: flex;
  align-items: center;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 12px;
  gap: 8px;
  min-width: 220px;
}

.topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  width: 100%;
}

.topbar-search input::placeholder { color: var(--color-text-secondary); opacity: 0.7; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.topbar-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
}
.user-chip:hover { background: var(--color-bg-secondary); border-color: var(--color-accent); }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-action, #007aff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.user-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.user-role {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.content-area {
  flex: 1;
  min-width: 0; /* permite que los hijos flex/grid se encojan en vez de empujar el ancho */
  padding: 28px 28px 40px;
  background: var(--color-bg-primary);
  /* Red de seguridad contra el desbordamiento lateral en móvil/iPhone:
     - overflow-wrap se hereda y rompe tokens largos de notas dictadas/URLs
     - overflow-x: clip recorta cualquier elemento ancho sin crear un scroller
       (a diferencia de overflow:hidden, no fuerza overflow-y:auto ni rompe el
       topbar sticky); un hijo con su propio overflow-x:auto sigue desplazándose */
  overflow-wrap: break-word;
  overflow-x: clip;
}

body[data-compact="true"] .content-area { padding: 16px; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  transition: box-shadow 0.2s ease;
}

.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.card-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.card-body { color: var(--color-text-secondary); }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.stat-icon.accent  { background: var(--color-accent-soft); color: var(--color-accent); }
.stat-icon.success { background: var(--color-success-soft, #E6F7F0); color: var(--color-success); }
.stat-icon.warning { background: var(--color-warning-soft, #FFF3E0); color: var(--color-warning); }
.stat-icon.error   { background: var(--color-error-soft, #FFF0EE); color: var(--color-error); }

.stat-value {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: 3px;
}

/* ── Badges de estado ────────────────────────────────────────────────────────*/
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-activo    { background: var(--color-secondary-soft); color: var(--color-success); }
.badge-inactivo  { background: var(--color-bg-secondary); color: var(--color-text-secondary); }
.badge-pendiente { background: #FFF8E1; color: var(--color-warning); }
.badge-urgente   { background: #FFF0EE; color: var(--color-error); }
.badge-validado  { background: var(--color-secondary-soft); color: var(--color-success); }
.badge-borrador  { background: var(--color-accent-soft); color: var(--color-accent); }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

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

.btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-border); }

.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline:hover { background: var(--color-accent-soft); }

.btn-danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}
.btn-danger:hover { opacity: 0.9; }

.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
.btn-lg { padding: 11px 22px; font-size: 1rem; }
.btn-icon { padding: 8px; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  padding: 8px 12px;
  font-size: 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 185, 167, 232), 0.18);
}

.form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
  display: block;
}

.form-error {
  font-size: 0.78rem;
  color: var(--color-error);
  margin-top: 4px;
}

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.alert-success { background: var(--color-secondary-soft); color: var(--color-success); border-left: 3px solid var(--color-success); }
.alert-warning { background: #FFF8E1; color: var(--color-warning); border-left: 3px solid var(--color-warning); }
.alert-danger  { background: #FFF0EE; color: var(--color-error); border-left: 3px solid var(--color-error); }
.alert-info    { background: var(--color-accent-soft); color: var(--color-accent); border-left: 3px solid var(--color-accent); }

/* ── Advertencia clínica ──────────────────────────────────────────────────── */
.clinical-warning {
  background: #FFF8E1;
  border: 1px solid #F6C90E;
  border-left: 4px solid var(--color-warning);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.clinical-warning-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.clinical-warning-title { font-weight: 600; font-size: 0.875rem; color: var(--color-warning); }
.clinical-warning-text  { font-size: 0.8rem; color: #6B4C10; margin-top: 3px; }

/* ── Paciente header ─────────────────────────────────────────────────────── */
.patient-header {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.patient-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--color-accent);
  font-weight: 600;
}

.patient-name { font-size: 1.1rem; font-weight: 600; color: var(--color-text-primary); }
.patient-meta { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 3px; }
.patient-actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Section header ──────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.section-subtitle {
  font-size: 0.825rem;
  color: var(--color-text-secondary);
  margin-top: 3px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-secondary);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.4;
}

.empty-state-title { font-size: 1.1rem; font-weight: 500; color: var(--color-text-primary); margin-bottom: 8px; }
.empty-state-text  { font-size: 0.875rem; max-width: 360px; margin: 0 auto 20px; }

/* ── Selector de tema ────────────────────────────────────────────────────── */
.theme-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { border-color: var(--color-text-primary); transform: scale(1.1); }

/* ── Toast notifications ──────────────────────────────────────────────────── */
.toast-container-fixed {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Tabla clínica ────────────────────────────────────────────────────────── */
.table-clinical {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-clinical th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.table-clinical td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: middle;
}

.table-clinical tr:hover td { background: var(--color-bg-secondary); }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  list-style: none;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  margin-right: 4px;
  opacity: 0.5;
}

.breadcrumb-item a { color: var(--color-text-secondary); }
.breadcrumb-item.active { color: var(--color-text-primary); font-weight: 500; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  /* Deja respiro al final para que el footer no quede bajo la barra inferior/home de iOS */
  .sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* En el drawer móvil (alto = 100vh) el footer no debe anclarse al fondo:
     dejaría un hueco grande bajo "Más". Que el nav no crezca lo pega al menú. */
  .sidebar-nav { flex: 0 0 auto; }
  /* Sobreescribir `.main-wrapper.sidebar-collapsed { margin-left: 68px }` que
     es más específica: en móvil el sidebar es overlay y el contenido principal
     siempre debe ocupar todo el ancho. */
  .main-wrapper,
  .main-wrapper.sidebar-collapsed { margin-left: 0; }
  .content-area { padding: 16px; }
  .topbar-search { display: none; }
  .patient-header { flex-direction: column; text-align: center; }
  .patient-actions { margin-left: 0; }
}

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.text-accent   { color: var(--color-accent) !important; }
.text-success  { color: var(--color-success) !important; }
.text-warning  { color: var(--color-warning) !important; }
.text-danger   { color: var(--color-error) !important; }
.text-muted    { color: var(--color-text-secondary) !important; }
.text-primary  { color: var(--color-text-primary) !important; }

.bg-accent-soft  { background: var(--color-accent-soft) !important; }
.bg-secondary-soft { background: var(--color-secondary-soft) !important; }
.bg-surface      { background: var(--color-surface) !important; }

.border-accent { border-color: var(--color-accent) !important; }

.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }

.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }

/* ── Ajustes responsivos adicionales para evitar textos apretados en las barras ── */
@media (max-width: 1200px) {
  .topbar-btn span { display: none !important; }
  .topbar-search { min-width: 140px; }
  .topbar { gap: 10px; padding: 0 16px; padding-top: env(safe-area-inset-top, 0px); }
}
@media (max-width: 1024px) {
  .user-chip .d-none.d-md-block { display: none !important; }
  .user-chip { padding: 4px; }
}