/*
 * The dashboard's shell «A2 · Redonda» (decision 97.9; layouts/dashboard.html.erb): white sidebar, main column with
 * the page header, and below 760 px a top bar with a <details> menu. Only tokens (tokens.css).
 */

.dash { font-size: var(--font-ui); line-height: var(--line-ui); }
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 50; padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* Sidebar */
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px; padding: 18px var(--space-3);
  background: var(--surface); border-right: 1px solid var(--border); color: var(--nav-ink);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--btn-h); padding: 0 var(--space-2);
  font: 600 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--text); text-decoration: none;
}
.brand svg { flex: none; } /* .brand-seal and .brand-tick: application.css */
/* One column no wider than the sidebar: without minmax(0, 1fr) the track grows to the widest item's min-content
   («Plantillas de pasos» + «pronto») and every nav item, the active one too, overflows the sidebar's padding (98.4). */
.nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nav-group {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  padding: 0 14px 6px; margin: 0;
}
.org {
  margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px;
  border-radius: var(--radius-lg); background: var(--surface-2); min-width: 0;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--font-xs);
}
.org-text { display: grid; min-width: 0; flex: 1; font-size: var(--font-sm); line-height: 1.3; }
.org-text strong { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-text small { color: var(--muted); font-size: var(--font-xs); }
/* The email on one line, cut with an ellipsis (the full one in its title and in Ajustes), never broken mid-word (U9) */
.org-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-logout { margin: 0; flex: none; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* Folded to its icons («Contraer menú», application.js): the labels stay for screen readers (.nav-label, .nav-group),
   the rest goes; the name of each section in its title. Only in .side: the phone's menu (.menu-panel) stays whole. */
.app.is-collapsed { grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr); }
.is-collapsed .side { padding-inline: var(--space-2); }
/* Open: the sidebar icon. Folded: a «>» button on the sidebar's edge, level with the brand; fixed, so the sidebar's
   overflow does not clip its outer half. */
.side-toggle .icon:last-child { display: none; }
.is-collapsed .side .side-head { justify-content: center; }
.is-collapsed .side .brand { padding: 0; }
.is-collapsed .side .side-toggle {
  position: fixed; z-index: 10; top: calc(18px + var(--btn-h) / 2 - 13px); left: calc(var(--sidebar-collapsed-width) - 13px);
  width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-raised); color: var(--text);
}
.is-collapsed .side .side-toggle .icon:first-child { display: none; }
.is-collapsed .side .side-toggle .icon:last-child { display: block; }
.is-collapsed .side :is(.brand span, .nav-soon, .org-text, .org-logout) { display: none; }
.is-collapsed .side :is(.nav-label, .nav-group) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.is-collapsed .side .nav-item { justify-content: center; padding: 0; }
.is-collapsed .side .org { justify-content: center; padding: var(--space-2) 0; }

/* Main column */
.main {
  display: grid; gap: 18px; align-content: start; min-width: 0; width: 100%; max-width: var(--content-width);
  padding: 22px 28px var(--space-6);
}
.main > .notice, .main > .alert, .page > .notice, .page > .alert { margin: 0; }
.page { display: grid; gap: 18px; min-width: 0; }
.page > section:not(.card):not(.kpis) {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4) 18px; min-width: 0;
}
.page > section > h2 { font-size: var(--font-card-title); margin-bottom: var(--space-3); }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }

/* Top bar and menu (below 760 px). The menu's panel sits in the page's flow and pushes the content down (review
   U3): nothing it covers can take the keyboard's focus. «Menú» stays top right, where it was, open or closed. */
.topbar-m { display: none; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { display: grid; gap: var(--space-4); padding: var(--space-3) 0 var(--space-2); }

@media (max-width: 760px) {
  .app, .app.is-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .side { display: none; }
  .topbar-m {
    display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: var(--space-2) var(--space-4);
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .menu > summary { position: absolute; top: var(--space-2); right: var(--space-4); }
  .menu[open] { flex: 1 0 100%; }
  .main { padding: var(--space-4) var(--space-4) var(--space-6); }
}

/* Inicio «E · Icono» (decision 108; dashboard/show opts in with .page-hero), below 760 px: the top bar, the title and
   the KPIs make one navy panel (--hero) with rounded bottom corners. On it the neutral tokens take the panel's values,
   so the brand, «Menú» and its open panel keep their structure (dark = the same on the dark tokens). The KPIs are
   tiles with the figure and its label only: no icon, chart, delta or state colour up there (the charts and deltas stay
   from 761 px; the deltas and legends stay for screen readers). «Certificaciones recientes» is the compact list
   (.cert-list, 108.3) instead of the stacked table, and «Nuevo enlace» leaves the header for .page-cta, full width at
   the bottom. Nothing is reordered: what shows follows the DOM (the drawer and the notices come after the KPIs). */
.page-cta, #recent .cert-list { display: none; }
@media (max-width: 760px) {
  .app:has(.page-hero) .topbar-m {
    --text: var(--hero-ink); --text-2: var(--hero-muted); --muted: var(--hero-muted);
    --surface: var(--hero-tile); --surface-2: var(--hero-tile); --border: var(--hero-tile); --control-border: var(--hero-tile);
    --nav-ink: var(--hero-ink); --nav-hover: var(--hero-tile); --nav-active-bg: var(--hero-tile); --nav-active-ink: var(--hero-ink);
    --accent: var(--hero-ink); --accent-ink: var(--hero); --link: var(--hero-ink); --focus: var(--hero-focus);
    padding: 20px 20px 0; background: var(--hero); border-bottom: 0; color: var(--text);
  }
  .app:has(.page-hero) .topbar-m .brand { font-size: var(--font-h2); font-weight: 700; }
  .app:has(.page-hero) .topbar-m .brand svg { width: 36px; height: 36px; }
  .app:has(.page-hero) .topbar-m .brand-seal { fill: var(--seal); stroke: var(--hero); }
  .app:has(.page-hero) .topbar-m .brand-tick { stroke: var(--hero-ink); }
  .app:has(.page-hero) .menu > summary { top: 20px; right: 20px; }

  .main:has(> .page-hero) { padding-top: 0; }
  .page-hero { gap: 0; }
  .page-hero > :is(.page-header, .kpis) {
    margin-inline: calc(-1 * var(--space-4)); padding-inline: 20px; background: var(--hero); color: var(--hero-ink);
  }
  .page-hero > .page-header { padding-block: 20px; }
  .page-hero > .page-header h1 { font-size: var(--font-hero); font-weight: 700; }
  .page-hero > .page-header .page-actions { display: none; }
  .page-hero > .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: var(--space-5);
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  }
  .page-hero .kpi { position: relative; min-height: 0; gap: var(--space-1); padding: 14px; background: var(--hero-tile); border: 0; border-radius: var(--radius-tile); box-shadow: none; }
  .page-hero .kpi-head { order: 1; }
  .page-hero :is(.kpi-icon, .kpi-ring) { display: none; } /* decorative (aria-hidden) */
  .page-hero :is(.kpi-delta, .kpi-foot:not(.kpi-ring-row)) { /* what the figure does not say: for screen readers only */
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .page-hero .kpi-ring-row { display: block; margin: 0; }
  .page-hero .kpi-value { color: var(--hero-ink); }
  .page-hero .kpi-label { color: var(--hero-muted); }
  .page-hero > :is(.card, .notice, .alert, .drawer[open]:not(:modal)) { margin-top: var(--space-5); }
  .page-hero > :is(.notice, .alert) + .card { margin-top: var(--space-3); }
  .page-hero #recent .tbl-wrap { display: none; }
  .page-hero #recent .cert-list { display: block; }
  .page-cta { display: block; margin-top: var(--space-4); }
  .page-cta .btn { width: 100%; min-height: var(--btn-h-lg); border-radius: var(--radius-tile); font-size: var(--font-lg); font-weight: 600; }
  .page-cta .btn .icon { width: 20px; height: 20px; }
}