/* Layout del cockpit móvil: reset, estructura del documento, encabezado y contenido base.
   Los tokens de color, tipografía y espaciado viven en tokens.css (se carga antes). */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  /* Degradé radial sutil arriba (dirección «elegante»): el color sólido queda de
     fallback y de base del degradé, nunca se pinta un fondo plano. */
  background-color: var(--ground);
  background-image: var(--ground-grad);
  color: var(--ink);
  font: var(--fs-md) / 1.45 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  /* Sin columnas declaradas, la implícita se dimensiona `auto`: su mínimo es el
     min-content del contenido, así que una tabla o una fila larga estira TODO el
     layout —el encabezado incluido— más allá del ancho del teléfono, y aparece el
     scroll de costado. `minmax(0, 1fr)` le prohíbe pasarse del viewport y obliga a
     los hijos a encoger (el recorte con puntos suspensivos ya está en las tarjetas). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */
/* Dos renglones: identidad arriba (MAD + el proyecto con su logo), tarea abajo. El
   segundo sólo existe adentro de una tarea. El header arranca justo donde termina la
   safe-area: el poco aire que hace falta lo ponen los controles del renglón, que traen
   su propio padding. */
.top {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--alto-top) + var(--safe-top));
  /* El padding lateral es de cada renglón, no del header: así la banda de la tarea
     llega de borde a borde y el texto de los dos renglones arranca en la misma columna. */
  /* Pegado a la safe-area: el aire de arriba lo pone el padding propio de la marca y del
     botón del proyecto (4 px), no el header. Sumarle más lo despegaba del reloj. */
  padding: var(--safe-top) 0 0;
  /* El color va SÓLIDO debajo del degradé: el tramo de la safe-area (el notch del iPhone,
     donde el contenido pasa por debajo de la barra de estado) se pintaba con el extremo
     translúcido del degradé y el blur, y ahí se veía el contenido borroneado en vez de
     una franja del color del header. */
  background-color: var(--panel);
  background-image: linear-gradient(180deg, var(--panel) 0%, var(--panel-fade) 100%);
  border-bottom: 1px solid var(--border);
}

.top-fila {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 28px;
  padding: 0 var(--borde-x) var(--sp-1);
}

/* La marca es un botón: tocarla vuelve al tablero de proyectos desde cualquier pantalla
   (en la PWA instalada no hay barra del navegador ni gesto de "inicio"). */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
  margin-left: calc(var(--sp-1) * -1);
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}

/* La marca es la palabra MAD en el ámbar del acento (mock multi-MAD), sin logo: el
   color de cada Mac y de cada proyecto ya viven en sus monogramas. */
.marca-txt {
  font: 800 var(--fs-lg) / 1 inherit;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* Con varias Macs el punto de estado ya va dentro del selector de ámbito: el del enlace
   sólo aparece si algo falla (deja de ser «mudo»). */
.ambito:not([hidden]) ~ .pulso.mudo { display: none; }

.marca:active { background: var(--fill); }

.relleno { flex: 1; }

/* Renglón 1: la identidad del proyecto al lado de la marca — primero el logo (o el
   monograma), después el nombre. Se encoge y trunca antes que nada para no empujar al
   pulso ni a la recarga. */
.top-proy {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex: 0 1 auto;
  padding: var(--sp-1) var(--sp-1) var(--sp-1) 0;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.top-proy:active { background: var(--fill); }

.top-proy[hidden] { display: none; }

/* Un hilo separa la marca del proyecto: son dos cosas distintas, no un título compuesto. */
.top-proy::before {
  content: '';
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin-right: var(--sp-1);
  background: var(--border);
}

.top-proy-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-md);
  font-weight: 620;
  line-height: 1.2;
}

/* Renglón 2: la tarea, en una banda propia de borde a borde bajo la identidad. Separada
   con un hilo y un fondo medio tono más oscuro, se lee como "dónde estoy" y no como una
   segunda línea amontonada; mide 26 px y no se scrollea nunca. */
.top-ctx {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-1) var(--borde-x) 5px;
  border-top: 1px solid var(--border);
  background: var(--banda-ctx);
  white-space: nowrap;
  overflow: hidden;
}

.top-ctx[hidden] { display: none; }

.ctx-cod {
  flex: 0 0 auto;
  color: var(--accent);
  font: 650 11px / 1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.03em;
}

.ctx-tit {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--muted);
}

/* El separador es del CSS: el texto de cada parte queda limpio para el lector de
   pantalla y para copiar. */
.ctx-tit::before {
  content: '·';
  margin-right: var(--sp-2);
  color: var(--border-hi);
}

/* La Mac dueña de la tarea (js/componentes/monograma.js: estadoMac), al final de la línea y en su
   tinta — mismo criterio de color que el chip del composer. Con una sola Mac suscripta
   no se pinta nada acá (ver `variasMacs`). */
.ctx-mac {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ctx-mac::before {
  content: '·';
  margin-right: var(--sp-1);
  color: var(--border-hi);
  font-weight: 400;
}

.ctx-mac-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px 0 currentColor;
}

.pulso {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* En verde el pulso es sólo el punto: se saca el pill para que no quede un borde vacío. */
.pulso.mudo {
  gap: 0;
  padding: var(--sp-1);
  border-color: transparent;
}

.pulso::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px 0 currentColor;
}

/* Botón de recargar: la PWA instalada no tiene la barra del navegador, así que ésta es
   la única forma de forzar un refresco desde el teléfono. */
.recargar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: calc(var(--sp-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--muted);
  cursor: pointer;
  flex: none;
}

.recargar:active { background: var(--fill); color: var(--ink); }
.recargar:disabled { opacity: 0.6; }
.recargar.girando { color: var(--accent); border-color: var(--accent); }
.recargar.girando svg { animation: recargar-girar 0.8s linear infinite; }

@keyframes recargar-girar {
  to { transform: rotate(360deg); }
}

.tono-ok { color: var(--ok); }
.tono-wait { color: var(--wait); }
.tono-conflict { color: var(--conflict); }
.tono-muted { color: var(--muted); }
/* Listos para cuando un estado distinga «en espera»/«por revisar» de «en proceso»
   (hoy comparten tono-wait en algunos listados): azul y violeta que no se confunden
   con el ámbar de proceso. */
.tono-espera { color: var(--st-espera); }
.tono-revisar { color: var(--st-revisar); }

/* ── Contenido ──────────────────────────────────────────────────────────── */
.contenido {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.pantalla {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--borde-x) var(--sp-8);
}

.pantalla.centrada {
  min-height: 100%;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  gap: var(--sp-4);
}

.titulo { margin: 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.01em; }
.titulo-marca { margin: 0; font-size: var(--fs-display); letter-spacing: 0.2em; color: var(--accent); }
.sub { margin: 0; color: var(--faint); font-size: var(--fs-sm); }