/* App shell: sidebar (desktop) / drawer + topbar (mobile) ------------------- */

.app { min-height: 100dvh; }

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns .22s var(--ease);
}

/* Collapsing turns the sidebar into an icon rail instead of hiding it, so
   navigation stays one click away. It applies on desktop only - below 900px the
   sidebar is already a drawer. See the media queries at the end of this file. */

/* Sidebar ------------------------------------------------------------------ */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px;
  background: var(--white);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar__head { display: flex; align-items: center; gap: 8px; }
.sidebar__head .brand { margin-right: auto; min-width: 0; }

.sidebar__head .brand, .topbar .brand { padding: 2px 8px 0; }

.nav { display: grid; gap: 4px; }
.nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink-500);
  font-weight: 600;
  font-size: var(--fs-base);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav__link:hover { background: var(--ink-50); color: var(--ink-800); text-decoration: none; }
.nav__link .icon { flex: none; color: currentColor; }
.nav__link[aria-current="page"] { background: var(--purple-50); color: var(--purple-700); }
/* El cuaderno es un boton, no un enlace: se abre encima sin cambiar de pagina. */
.nav__link--action { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.nav__badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--amber-100); color: var(--amber-600);
  font-size: var(--fs-xs); font-weight: 700;
}

.sidebar__spacer { flex: 1 1 auto; }
.sidebar__foot { display: grid; gap: 10px; }

.userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  text-align: left;
  width: 100%;
}
.userchip__avatar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--purple-600); color: var(--white);
  font-weight: 700; font-size: var(--fs-md);
}
.userchip__body { min-width: 0; }
.userchip__name {
  font-weight: 700; color: var(--ink-900); font-size: var(--fs-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.userchip__meta { font-size: var(--fs-xs); color: var(--ink-400); }

.footlinks { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 8px; }
.footlinks a { font-size: var(--fs-xs); color: var(--ink-300); text-decoration: underline; }

/* Topbar (mobile / tablet) -------------------------------------------------- */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 30;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { padding: 0; }
.topbar__spacer { flex: 1; }

.iconbtn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: var(--ink-500);
  border: 1px solid transparent;
}
.iconbtn:hover { background: var(--ink-50); color: var(--ink-800); }

/* Main --------------------------------------------------------------------- */
.main {
  min-width: 0;
  padding: var(--pad-page);
  padding-bottom: 56px;
}
.page { max-width: var(--page-max); margin-inline: auto; min-width: 0; }

.page__head { margin-bottom: 24px; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page__head-main { min-width: 0; flex: 1 1 320px; }
.page__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page__sub { margin-top: 6px; color: var(--ink-400); font-size: var(--fs-base); }
.page__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Reusable grids ----------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--sidecol { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

/* The sidebar eats 240px, so the side column has to fold before the viewport
   itself gets narrow - otherwise the main column is squeezed. */
@media (max-width: 1320px) {
  .grid--sidecol { grid-template-columns: minmax(0, 1fr); }
}

/* Pages whose main column is a wide data table need the side card to fold much
   earlier, or the table is left fighting for room with it. */
@media (max-width: 1599px) {
  .grid--sidecol-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  :root { --pad-page: 24px; }
}

/* Drawer breakpoint --------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --pad-page: 16px; }

  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { display: flex; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(292px, 86vw);
    height: 100dvh;
    transform: translateX(-102%);
    transition: transform .24s var(--ease);
    box-shadow: var(--shadow-lg);
    border-right: 0;
  }
  .sidebar[data-open="true"] { transform: translateX(0); }

  .scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(23, 20, 56, .38);
    opacity: 0; pointer-events: none;
    transition: opacity .24s var(--ease);
  }
  .scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

  .main { padding-bottom: 40px; }
}

@media (min-width: 901px) {
  .scrim { display: none; }
  .sidebar__close { display: none; }

  /* Collapsed rail --------------------------------------------------------- */
  .shell[data-collapsed="true"] { --sidebar-w: 74px; }
  .shell[data-collapsed="true"] .sidebar { padding-inline: 12px; }
  .shell[data-collapsed="true"] .sidebar__head { flex-direction: column; gap: 10px; }
  .shell[data-collapsed="true"] .sidebar__head .brand { margin-right: 0; padding: 0; }

  .shell[data-collapsed="true"] .brand__name,
  .shell[data-collapsed="true"] .nav__label,
  .shell[data-collapsed="true"] .userchip__body,
  .shell[data-collapsed="true"] .sidebar__langfield,
  .shell[data-collapsed="true"] .footlinks { display: none; }

  .shell[data-collapsed="true"] .nav__link,
  .shell[data-collapsed="true"] .userchip {
    justify-content: center;
    padding-inline: 0;
    position: relative;
  }
  .shell[data-collapsed="true"] .nav__badge {
    position: absolute; top: 3px; right: 8px; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  }
}

@media (max-width: 900px) {
  /* The drawer always shows full labels, whatever the desktop state was. */
  .sidebar__toggle { display: none; }
}