/* Encabezado de las pantallas raíz en DOS renglones (js/componentes/appEncabezado.js).
   Antes era una sola fila con título, Mac, enlace, host, cuota, lupa y campana: en un
   teléfono no entraba, el título se achicaba hasta desaparecer y la fila desbordaba la
   página (el navegador la alejaba y el contenido quedaba angosto). Se carga después de
   navegacion.css y pisa lo que allá era de la fila única. */

/* El encabezado nunca es más ancho que la pantalla. `clip` no crea scroll ni corta el
   menú de Macs, que es fijo y cuelga de <body>. */
.top { max-width: 100vw; overflow-x: clip; }

/* ── Renglón 1: título + Buscar + Actividad ─────────────────────────────── */
.top-fila .top-titulo { flex: 1 1 auto; min-width: 4.5rem; cursor: pointer; }
.top-fila .lupa { flex: none; }

/* ── Renglón 2: franja de estado ────────────────────────────────────────── */
.top-estado {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 30px;
  padding: 0 var(--borde-x) var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.top-estado::-webkit-scrollbar { display: none; }

/* Nada se achica: si no entra, la franja se desliza. El nombre de la Mac sólo se corta
   con «…» pasado su tope (si se achicara, quedaría el punto solo y no se sabría cuál es). */
.top-estado > * { flex: none; }
.top-estado > .relleno { flex: 1 0 0; }

/* Las cuatro pastillas con la misma altura y la misma tipografía. */
.top-estado .ambito,
.top-estado .pulso,
.top-estado .cuota {
  height: 28px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  line-height: 1;
}

.top-estado .ambito {
  flex: none;
  max-width: 12rem;
  border: 0;
  background: var(--fill);
  color: var(--ink);
}

.top-estado .ambito.sola { cursor: default; }
.top-estado .ambito-punto:not(.off) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }

/* El pulso en verde es sólo un punto: con la Mac a la vista sobra (app.css lo oculta). */
.top-estado .pulso.mudo { padding: 0 var(--sp-1); }

/* Dentro de una tarea manda el renglón contextual «‹ dónde estoy»: la franja se va. */
.top.en-ficha .top-estado { display: none; }

/* El banner de conexión baja hasta donde termina el encabezado real (dos renglones). */
.red { top: var(--alto-cabecera, calc(var(--alto-top) + var(--safe-top))); }