/* Lo que el sistema de diseño no cubre: el armazón de la aplicación.
   Todo lo demás sale de tokens.css, bundle.css y proto.css — no redefinas
   colores ni tipografías aquí. */

.cc-boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  color: var(--ink-muted);
  background: var(--bg);
}

.cc-app {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* Panel (investigador y administrador): barra arriba, menú lateral desde 1024px */
.cc-shell {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cc-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-items: start;
  }
  .cc-shell__nav {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: var(--surface);
  }
}
.cc-shell__nav { padding: var(--space-4); }
/* El contenedor que las reglas responsivas de `vendor/proto.css` esperan.
 *
 * Toda la maquetación angosta del prototipo está escrita como
 * `@container stage (max-width: …)`: la rejilla de tarjetas, el pie del
 * portal, el héroe de la ficha, el editor por capas, el comparador de
 * versiones y el pie del wizard. Esas reglas necesitan un ancestro con
 * `container-name: stage`, y en el prototipo lo ponía su propio armazón
 * (`.pt-stage`). En la aplicación real no lo ponía nadie, así que las doce
 * reglas eran letra muerta y el portal salía a tres columnas en un teléfono.
 *
 * Va en los dos armazones —el del panel y el público— porque las pantallas
 * públicas se pintan sin menú lateral. */
.cc-shell__main,
.cc-app > main {
  min-width: 0;
  container-type: inline-size;
  container-name: stage;
}

/* El menú lateral se vuelve cajón en móvil */
@media (max-width: 1023px) {
  .cc-shell__nav {
    display: none;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .cc-shell__nav[data-abierto="true"] { display: block; }
}

.cc-toasts {
  position: fixed;
  inset-block-end: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(420px, calc(100vw - var(--space-8)));
}

.cc-centro {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: var(--space-8);
}

/* Enlace de salto: lo primero que recibe el foco en cada pantalla (WCAG 2.2) */
.cc-salto {
  position: absolute;
  inset-inline-start: -9999px;
}
.cc-salto:focus {
  position: static;
  display: inline-block;
  margin: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}