/* Solparquet Gestión · 3/5 LAYOUT: barra superior, menú lateral (plegable), cajón móvil, barra inferior, contenido. */

/* ---------- Barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: var(--s-3); height: var(--topbar-h); padding: 0 var(--s-4); background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(43, 36, 30, .02) }
.topbar .logo { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-1); border-radius: var(--r-sm) }
.topbar .logo img { height: 30px; width: auto; display: block }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: var(--tap); min-height: var(--tap); padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; font: inherit }
.iconbtn:hover { background: var(--cream) }
.iconbtn[aria-expanded="true"], .iconbtn[aria-pressed="true"] { background: var(--cream-2) }
.topbar-menu { display: none }
.gsearch-btn { flex: 1 1 auto; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: .6rem; min-height: var(--tap); padding: 0 .9rem; border: 1px solid var(--field-border); border-radius: var(--r-full); background: var(--surface); color: var(--ink-soft); font: 16px var(--font-body); cursor: pointer; text-align: left }
.gsearch-btn:hover { border-color: var(--ink-soft); color: var(--ink) }
.gsearch-btn .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
kbd { font: 600 .72rem var(--font-body); color: var(--ink-soft); background: var(--cream); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: .1rem .4rem }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2) }
.usermenu-btn { display: flex; align-items: center; gap: .55rem; min-height: var(--tap); padding: .2rem .5rem .2rem .25rem; border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--ink); cursor: pointer; font: inherit }
.usermenu-btn:hover, .usermenu-btn[aria-expanded="true"] { background: var(--cream); border-color: var(--line) }
.avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--terra-700); color: #FFFFFF; font: 600 .85rem var(--font-head); letter-spacing: .02em }
.usermenu-btn .who { display: flex; flex-direction: column; line-height: 1.15; text-align: left }
.usermenu-btn .who b { font-weight: 600; font-size: .9rem } .usermenu-btn .who span { font-size: .75rem; color: var(--ink-soft) }

/* ---------- Estructura ---------- */
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)) }
.main { flex: 1; min-width: 0; width: 100%; max-width: var(--maxw); padding: var(--s-6) clamp(var(--s-4), 3vw, var(--s-8)) var(--s-12); margin: 0 auto }
.main:focus { outline: none }
.foot { text-align: center; padding: var(--s-2) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom)); color: var(--ink-faint); font-size: var(--fs-sm) }
.foot a { color: var(--ink-soft) }

/* ---------- Menú lateral ---------- */
.side { width: var(--side); flex: 0 0 var(--side); position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; background: var(--paper); border-right: 1px solid var(--line); transition: width var(--dur), flex-basis var(--dur) }
.side-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3) var(--s-3) var(--s-4) }
.side-foot { border-top: 1px solid var(--line); padding: var(--s-2) var(--s-3) }
.nav-list { list-style: none; margin: 0; padding: 0 }
.nav-link { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 42px; padding: .45rem .7rem; margin: 1px 0; border-radius: 10px; color: var(--ink); font-size: .95rem; text-decoration: none }
.nav-link .i { color: var(--ink-soft); width: 1.2em; height: 1.2em }
.nav-link:hover { background: var(--cream); color: var(--ink); text-decoration: none }
.nav-link[aria-current="page"] { background: var(--terra-tint); color: var(--terra-700); font-weight: 600 }
.nav-link[aria-current="page"] .i { color: var(--terra-700) }
.nav-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--terra) }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.nav-count { min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: var(--r-full); display: inline-grid; place-items: center; background: var(--terra); color: #FFFFFF; font: 700 .75rem/1 var(--font-body) }
.nav-count.neutro { background: var(--cream-2); color: var(--ink) }
.nav-group { margin-top: var(--s-3) }
.nav-group-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 36px; padding: .25rem .7rem; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font: 600 .72rem var(--font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint) }
.nav-group-btn:hover { color: var(--ink); background: var(--cream) }
.nav-group-btn .i { width: 1rem; height: 1rem; transition: transform var(--dur) }
.nav-group-btn[aria-expanded="false"] .i { transform: rotate(-90deg) }
.nav-group-btn[aria-expanded="false"] + .nav-list { display: none }

/* Menú plegado (solo escritorio): iconos con la etiqueta como tooltip */
@media (min-width: 1025px) {
  html.side-mini .side { width: var(--side-mini); flex-basis: var(--side-mini) }
  html.side-mini .side .nav-label, html.side-mini .side .nav-group-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
  html.side-mini .side .nav-group-btn { justify-content: center; padding: 0; min-height: 14px }
  html.side-mini .side .nav-group-btn .i { display: none }
  html.side-mini .side .nav-group-btn::after { content: ""; display: block; width: 24px; border-top: 1px solid var(--line) }
  html.side-mini .side .nav-group-btn[aria-expanded="false"] + .nav-list { display: block }
  html.side-mini .side .nav-link { justify-content: center; padding: .45rem }
  html.side-mini .side .nav-count { position: absolute; top: 2px; right: 4px; min-width: 1.15rem; height: 1.15rem; font-size: .65rem }
  html.side-mini .side-scroll { padding-left: var(--s-2); padding-right: var(--s-2) }
}

/* ---------- Barra inferior (móvil) ---------- */
.bottomnav { display: none }

/* ---------- Móvil y tableta ---------- */
@media (max-width: 1024px) {
  .topbar { padding: 0 var(--s-2) }
  .topbar-menu { display: inline-flex }
  .side-collapse { display: none }
  .usermenu-btn .who { display: none }
  .gsearch-btn { max-width: none }
  .gsearch-btn kbd { display: none }
  /* Cajón: cerrado = fuera de pantalla Y oculto a teclado/lectores (visibility) */
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer); height: auto; width: min(86vw, 320px); flex-basis: auto; transform: translateX(-102%); visibility: hidden; transition: transform var(--dur) ease, visibility 0s linear var(--dur); box-shadow: var(--sh-3); border-right: 0 }
  html.drawer-open .side { transform: none; visibility: visible; transition: transform var(--dur) ease }
  .side-head { display: flex !important }
  .scrim { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(30, 24, 19, .45) }
  html.drawer-open { overflow: hidden }
  .main { padding: var(--s-4) var(--s-4) calc(var(--bottomnav-h) + var(--s-8) + env(safe-area-inset-bottom)) }
  .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottomnav); background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(43, 36, 30, .06) }
  .bottomnav > a, .bottomnav > button { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--bottomnav-h); padding: 4px 2px; border: 0; background: none; color: var(--ink-soft); font: 600 .72rem var(--font-body); text-decoration: none; cursor: pointer }
  .bottomnav .i { width: 24px; height: 24px }
  .bottomnav [aria-current="page"] { color: var(--terra-700) }
  .bottomnav [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--terra) }
  .bottomnav .nav-count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 1.2rem; height: 1.2rem; font-size: .68rem }
  .bottomnav .destacado { color: var(--terra-700) }
  .bottomnav .destacado .bn-circle { width: 54px; height: 54px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; background: var(--terra); color: #FFFFFF; box-shadow: 0 6px 16px rgba(194, 80, 47, .4); border: 4px solid var(--paper) }
  .bottomnav .destacado .bn-circle .i { width: 26px; height: 26px }
}
.side-head { display: none; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); min-height: var(--topbar-h) }
.side-head b { font-family: var(--font-head) }

@media print {
  .topbar, .side, .bottomnav, .foot, .scrim, .skip, .secnav { display: none !important }
  body { background: #FFFFFF } .main { padding: 0; max-width: none }
}