/* buclea · la carcasa
 * ---------------------------------------------------------------------------
 * Una barra para los cuatro módulos, en vez de tres barras distintas
 * (`header.barra` en textos, `header.topbar` en Digitalització,
 * `header.capcalera` en full de càlcul). Y un pie que dice dónde viven los
 * datos, que es la promesa del producto.
 *
 * Regla de docs/marca/critica-pantallas.md, hallazgo 2: el interruptor de
 * «Mode docent» SOLO aparece si la sesión es de profesorado. Un alumno no
 * debe verlo.
 */
@layer ui.components {
  .ui-barra {
    height: 56px; flex: none;
    display: flex; align-items: center; gap: var(--esp-4);
    padding: 0 22px;
    background: var(--blanc);
    border-bottom: 1px solid var(--linia);
  }
  .ui-barra-logo { display: block; height: 26px; width: auto; }
  .ui-barra-sep { width: 1px; height: 24px; background: var(--linia); flex: none; }

  .ui-molles { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
  .ui-molles > span { white-space: nowrap; color: var(--pissarra); font-weight: 500; }
  .ui-molles > span:last-child { color: var(--tinta); font-weight: 600; }
  .ui-molles > .ui-molla-portal {
    color: var(--pissarra); font-weight: 500; text-decoration: none; white-space: nowrap;
  }
  .ui-molles > .ui-molla-portal:hover { color: var(--verd); text-decoration: underline; }
  .ui-molles > .ui-molla-sep { color: var(--linia); display: flex; }
  .ui-molles > .ui-molla-sep svg { width: 14px; height: 14px; }

  .ui-barra-dreta { display: flex; align-items: center; gap: var(--esp-3); margin-left: auto; }

  /* Interruptor de modo docente */
  .ui-interruptor {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    font-size: 12.5px; font-weight: 600; color: var(--pissarra);
    cursor: pointer; padding: 0 4px;
  }
  .ui-interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ui-interruptor-via {
    width: 36px; height: 20px; border-radius: var(--radi-rodo);
    background: var(--linia); position: relative; display: inline-block;
    transition: background var(--mov);
  }
  .ui-interruptor-via::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--blanc); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left var(--mov);
  }
  .ui-interruptor input:checked + .ui-interruptor-via { background: var(--verd); }
  .ui-interruptor input:checked + .ui-interruptor-via::after { left: 19px; }
  .ui-interruptor input:focus-visible + .ui-interruptor-via { outline: 2px solid var(--verd); outline-offset: 2px; }

  .ui-persona {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: var(--menta-clar); color: var(--profund);
    display: grid; place-items: center; font-weight: 700; font-size: 12px;
  }

  /* Pie: la promesa de privacidad, visible siempre. */
  .ui-peu {
    height: 30px; flex: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px; font-size: 11.5px; color: var(--pissarra);
    border-top: 1px solid var(--linia);
  }
  .ui-peu-enllacos { display: flex; gap: 14px; }
  .ui-peu-enllac { color: var(--pissarra); text-decoration: none; }
  .ui-peu-enllac:hover { color: var(--verd); text-decoration: underline; }

  /* Pantalla completa de módulo: barra + contenido + pie.
   *
   * Dos variantes, y elegir mal se nota enseguida:
   *
   *   .ui-pantalla        DOCUMENTO. Ocupa como mínimo la ventana y crece con
   *                       el contenido; quien hace scroll es la página. Para
   *                       catálogos, guías y todo lo que se lee de arriba abajo.
   *
   *   .ui-pantalla--fixa  APLICACIÓN. Se queda clavada al alto de la ventana y
   *                       quien hace scroll es la zona de trabajo. Para las
   *                       pantallas con barra de acciones abajo, donde el botón
   *                       de continuar NO puede irse bajo el pliegue: con solo
   *                       `min-height` el informe de la cápsula empujaba la
   *                       barra 117 px fuera de la ventana.
   */
  .ui-pantalla {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--fons);
  }
  .ui-pantalla--fixa { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .ui-pantalla > main { flex: 1; min-height: 0; }

  /* A 1366×768, que es el portátil del aula, la barra no puede comerse
   * espacio: por debajo de 900px se pliegan las migas. */
  @media (max-width: 900px) {
    .ui-molles > span:not(:last-child), .ui-molles > .ui-molla-sep { display: none; }
    .ui-barra { gap: var(--esp-3); padding: 0 var(--esp-4); }
  }
}