/* ==========================================================================
   base.css — Reset, estructura general de la página y barra lateral
   ========================================================================== */

* { box-sizing: border-box; }

/* El atributo hidden siempre oculta, aunque otra regla ponga display: flex/grid */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}

button, input { font: inherit; color: inherit; }

/* Anillo de foco visible al navegar con teclado (accesibilidad) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Rejilla principal: barra lateral (300px) + calendario ---- */
.app {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.top { grid-column: 1 / -1; }   /* la cabecera ocupa las dos columnas */

h1 { font: 600 36px/1.1 var(--serif); margin: 0; letter-spacing: -.01em; }
.ver { margin: 4px 0 0; color: var(--muted); font-size: 13px; }   /* "Versión N · ..." */
.account { margin: 2px 0 0; color: var(--muted); font-size: 13px; }  /* correo · estado · cerrar sesión */
.account[hidden] { display: none; }
.account .linkish { font-size: 13px; }
.sync.err { color: var(--danger); font-weight: 600; }
/* Mientras no hay sesión aprobada, la aplicación queda oculta tras la pantalla de acceso */
body.locked .app { visibility: hidden; }

/* ---- Pestañas: "Mis lecturas" / "Administración del club" ---- */
.tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab {
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 10px 16px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---- Barra lateral: botones y lista de libros ---- */
.side { display: flex; flex-direction: column; gap: 10px; }
.side-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; padding: 18px; color: var(--muted); }
.empty p { margin: 0 0 12px; }

/* Tarjeta de un libro en la lista lateral */
.book {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center;
  width: 100%; padding: 10px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  --w: 48px;   /* ancho de la portada (la usa .cv en covers.css) */
}
.book:hover { border-color: var(--accent); }
.book b { display: block; font-weight: 600; line-height: 1.25; }
.book small { display: block; color: var(--muted); font-size: 13px; }