/* Menú lateral del admin (app/views/admin/_sidebar). Lo cargan el layout «admin»
   (con :app) y el del panel de métricas, que solo carga panel.css y este: por eso
   lleva sus colores escritos y no depende de los tokens de la landing. */
.side {
  --side-w: 228px;
  --side-bg: #161617; --side-line: #2B2B2D; --side-ink: #EBEBF5;
  --side-soft: #A1A1A8; --side-dim: #6E6E75; --side-hover: rgba(255, 255, 255, 0.06);
  --side-on: rgba(245, 181, 61, 0.12); --side-mark: #F5B53D;

  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
  box-sizing: border-box; padding: 20px 12px 16px;
  background: var(--side-bg); border-right: 1px solid var(--side-line);
  font: 500 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif;
}
.side *, .side *::before, .side *::after { box-sizing: border-box; }

.side .side-brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px 0;
  color: var(--side-ink); text-decoration: none; font-weight: 700; font-size: 16px;
}
.side .side-brand small {
  margin-left: 4px; font: 500 11px "JetBrains Mono", ui-monospace, monospace; color: var(--side-dim);
}

.side .side-nav, .side .side-foot { display: flex; flex-direction: column; gap: 2px; }
.side .side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--side-line); }
.side .side-foot form { margin: 0; }

.side .side-link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: none;
  color: var(--side-soft); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.side .side-link:hover { background: var(--side-hover); color: var(--side-ink); }
.side .side-link:focus-visible { outline: 2px solid #4AA3E0; outline-offset: 1px; }
.side .side-link.is-on { background: var(--side-on); color: var(--side-ink); font-weight: 600; }
.side .side-link.is-on .side-ico { color: var(--side-mark); }
.side .side-ico { flex: none; color: var(--side-dim); transition: color .15s; }
.side .side-link:hover .side-ico { color: var(--side-ink); }
.side .side-out:hover, .side .side-out:hover .side-ico { color: #FF6961; }
.side .side-who {
  margin: 8px 0 0; padding: 0 10px; color: var(--side-dim); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Las páginas de gestión: el menú a la izquierda y el contenido al lado. */
body.admin-con-lateral { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
body.admin-con-lateral .admin-main { margin: 0; width: 100%; max-width: 1280px; padding-inline: 44px; }

/* El panel de métricas: igual, y en pantalla completa (tecla F) solo las métricas. */
body.panel { display: grid; grid-template-columns: 228px minmax(0, 1fr); padding: 0; }
body.panel .panel-main { min-width: 0; padding: 26px 30px 30px; }
html:fullscreen body.panel { grid-template-columns: minmax(0, 1fr); }
html:fullscreen .side { display: none; }

/* En pantallas estrechas el menú pasa a ser una barra arriba que se desliza. */
@media (max-width: 900px) {
  body.admin-con-lateral, body.panel { grid-template-columns: minmax(0, 1fr); }
  body.admin-con-lateral .admin-main { padding-inline: 20px; }
  .side {
    position: sticky; z-index: 10; height: auto; flex-direction: row; align-items: center;
    gap: 8px; padding: 10px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--side-line);
  }
  .side .side-brand span, .side .side-who { display: none; }
  .side .side-nav, .side .side-foot { flex-direction: row; }
  .side .side-foot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .side .side-link { width: auto; white-space: nowrap; }
}