/**
 * css/layout.css
 * =====================================================================
 * Layout general de página: contenedor, header, panel colapsable.
 * El ancho máximo del contenido y el padding lateral se controlan
 * desde css/tokens.css (--app-max-width, --app-side-padding) — no
 * hay valores fijos acá, todo lee de esas dos variables.
 * =====================================================================
 */
.app{
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 20px var(--app-side-padding) 60px;
}

/* ---------------- header de página ---------------- */
.page-header{ margin-bottom: 14px; }

.page-header-top{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:8px;
}

/* Título editable — se ve como texto normal hasta que se enfoca */
.eval-title-input{
  flex:1; min-width:180px;
  background:none; border:1.5px solid transparent; border-radius:8px;
  padding:4px 8px; margin:-4px -8px;
  font-family:var(--font-d); font-size:1.1rem; font-weight:700; color:var(--text);
  outline:none; transition:border-color .15s, background-color .15s;
}
.eval-title-input:hover{ border-color:var(--line); }
.eval-title-input:focus{ border-color:var(--accent); background:var(--accent-bg); }

.header-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.icon-btn{
  width:36px; height:36px; border-radius:10px;
  background:var(--card); border:1px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:color .15s, border-color .15s;
}
.icon-btn:hover{ color:var(--text); border-color:var(--accent); }

.toggle-panel-btn{
  display:flex; align-items:center; gap:6px;
  height:36px; padding:0 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--line); color:var(--muted);
  font-size:.76rem; font-weight:600;
}
.toggle-panel-btn:hover{ color:var(--text); border-color:var(--accent); }
.toggle-panel-btn .chev{ transition:transform .2s; }
.toggle-panel-btn.collapsed .chev{ transform:rotate(-90deg); }

/* ---------------- panel colapsable ---------------- */
.page-header-panel{
  display:grid;
  grid-template-rows: 1fr;
  opacity:1;
  transition: grid-template-rows .22s ease, opacity .18s ease, margin .22s ease;
  margin-top:10px;
}
.page-header-panel.collapsed{
  grid-template-rows: 0fr;
  opacity:0;
  margin-top:0;
}
.page-header-panel > div{ overflow:hidden; min-height:0; }
.page-header-panel p{ font-size:.8rem; color:var(--muted); margin-bottom:12px; line-height:1.5; }

.grid-hint{
  display:flex; gap:10px; flex-wrap:wrap; font-size:.68rem; color:var(--faint);
  background:var(--card-2); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px;
}
.grid-hint kbd{
  font-family:var(--font-m); background:var(--card); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; color:var(--text); font-size:.66rem;
}