/* Shell de la app: lo que el sistema de diseño no cubre porque sus referencias
   son maquetas sueltas y no una página entera (fb-shell lleva borde, radio y
   alto fijo de demo) ni traen el drawer móvil ni el toggle de tema.
   Prefijo fbx- para distinguirlo de fb-*, que es del sistema y no se toca.
   Solo tokens: ni un color, tamaño ni sombra a mano. */

/* Dos cosas que daba el CSS viejo y el sistema no, porque sus hojas están
   pensadas para maquetas sueltas y no para una app a pantalla completa. */
*, *::before, *::after { box-sizing: border-box; }
body { padding: 0; }

.fbx-skip {
  position: absolute;
  left: -999px;
  top: var(--space-2);
  z-index: 40;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font: 500 13px/20px var(--font-sans);
  text-decoration: none;
}
.fbx-skip:focus { left: var(--space-2); }

/* Página completa: fb-shell pero a sangre, sin el marco de la maqueta. */
.fbx-shell {
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: var(--text);
  font-family: var(--font-sans);
}

.fbx-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.fbx-main-col { display: flex; flex-direction: column; min-width: 0; }

/* Barra superior: solo en móvil, donde la lateral es drawer. */
.fbx-topbar { display: none; }

.fbx-nav-toggle { display: none; }

.fbx-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 18;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.fbx-sidebar-actions { display: grid; gap: var(--space-2); justify-items: start; }

/* Texto solo para lectores de pantalla (cabeceras de tabla sin rótulo visible). */
.fbx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fbx-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fbx-topbar-brand { flex-wrap: nowrap; gap: var(--space-3); min-width: 0; }

/* Un solo botón de tema: en escritorio vive al pie de la lateral, en móvil
   viaja con ella dentro del drawer. */
.fbx-theme-toggle .fbx-icon-dark { display: none; }
[data-theme="dark"] .fbx-theme-toggle .fbx-icon-dark { display: block; }
[data-theme="dark"] .fbx-theme-toggle .fbx-icon-light { display: none; }

.fbx-stat-suffix { font: 400 var(--body-lg-size)/var(--body-lg-line) var(--font-sans); color: var(--text-muted); letter-spacing: 0; }

.fbx-main { max-width: 1100px; width: 100%; box-sizing: border-box; }

/* Pantallas sin sesión: marca arriba y una tarjeta centrada. */
.fbx-auth {
  min-height: 100vh;
  box-sizing: border-box;
  padding: var(--space-12) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
.fbx-auth-card { width: 100%; max-width: 400px; box-sizing: border-box; padding: var(--space-8); }
.fbx-auth-title { margin: 0; font: 600 24px/32px var(--font-sans); letter-spacing: -.02em; }
.fbx-auth-sub { margin: var(--space-1) 0 var(--space-6); color: var(--text-muted); }
.fbx-auth-form { display: grid; gap: var(--space-4); }
.fbx-auth-submit { width: 100%; height: 40px; }
.fbx-auth-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  font-size: var(--label-size);
}

.fbx-flush { margin-bottom: 0; }

.fbx-flashes { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }

@media (max-width: 680px) {
  .fbx-shell { grid-template-columns: minmax(0, 1fr); }

  .fbx-topbar {
    position: sticky;
    top: 0;
    z-index: 16;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 56px;
    padding: 0 var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .fbx-nav-toggle { display: inline-flex; width: 44px; height: 44px; margin-left: calc(var(--space-2) * -1); }
  .fbx-nav-toggle .fb-icon { width: 20px; height: 20px; }

  .fbx-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    width: 272px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 160ms ease-out;
  }
  .nav-open .fbx-sidebar { transform: translateX(0); }

  .nav-open .fbx-scrim { display: block; }
}