html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Header arriba ancho completo; sidebar misma altura que el contenido (debajo del header) */
.app-main.layout-header-full .app-sidebar {
  top: var(--app-header-height);
  height: calc(100vh - var(--app-header-height));
}
.app-main.layout-header-full .app-wrapper {
  margin-inline-start: var(--app-sidebar-width);
}

/* Sidebar estilo Figma: bg-white border-r gray-200 w-64 transition */
.app-main.layout-sidebar-figma .app-sidebar.sidebar-figma {
  width: 205px; /* Tailwind w-64 */
  background-color: #fff;
  border-inline-end: 1px solid #e5e7eb; /* gray-200 */
  box-shadow: none;
  transition: width 0.3s, background-color 0.3s, border-color 0.3s;
}
.app-main.layout-sidebar-figma .app-wrapper {
  margin-inline-start: 205px;
}
.sidebar-nav {
  --sidebar-link-color: #374151; /* gray-700 */
  --sidebar-link-active-bg: #1e3a8a; /* blue-900 */
  --sidebar-link-hover-bg: #eff6ff; /* blue-50 */
}
.sidebar-link {
  transition: background-color 0.2s, color 0.2s;
  color: var(--sidebar-link-color);
}
.sidebar-link:hover {
  background-color: var(--sidebar-link-hover-bg);
  color: var(--sidebar-link-color);
}
.sidebar-link-active,
.sidebar-link.sidebar-link-active:hover {
  background-color: var(--sidebar-link-active-bg);
  color: #fff;
}
.sidebar-heading {
  color: #6b7280; /* gray-500 */
  font-size: 0.875rem;
}
.app-header-content-wrapper {
  min-height: 0;
}
/* Header estilo Figma: sticky top-0 z-40, border-b gray-200, shadow-md */
.app-header {
  z-index: 40;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e5e7eb; /* Tailwind gray-200 */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Tailwind shadow-md */
}