/* Sistema visual del cockpit móvil. Misma paleta y misma gramática que MAD
   (voice-electron/renderer/styles/globals.css), reescalada a la mano: tipografía
   legible a 40 cm, blancos de toque de 44 px y respeto por las safe-areas. */

:root {
  /* Superficies — idénticas al escritorio para que se lea como la misma app. */
  --ground: #0f172a;
  --panel: #1e293b;
  --panel2: #22304a;
  --ink: #f1f5f9;
  --muted: #b3c0d1;
  --faint: #8fa0b8;
  --border: #33425c;
  --border-hi: #465873;
  --border-ctl: #6f8099;
  --fill: #334155;
  --fill-hi: #475569;
  --accent: #e6a938;
  --accent-soft: #2a2410;
  --on-accent: #0f172a;
  --ok: #4ade80;
  --wait: #fbbf24;
  --conflict: #f87171;
  --done: #96a3b4;

  /* Tipografía: el escritorio vive en 12 px; en la mano alcanza con 14 de base
     (un escalón menos que antes: entra más información sin perder legibilidad). */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  /* Cuerpo de la bitácora: un escalón bajo el texto base. Se lee igual en la mano y entra
     un par de líneas más por pantalla, que es lo que importa en el historial. `--fs-bit` es
     la prosa del agente; `--fs-bit-sm`, todo lo secundario (el pedido, los avances, los
     estados, las herramientas). Los TÍTULOS y las PÍLDORAS quedan en la escala general: son
     los puntos de anclaje de la lectura y encogerlos vuelve la bitácora una masa gris. */
  --fs-bit: 12px;
  --fs-bit-sm: 11.5px;
  --fs-xl: 20px;
  --fs-display: 28px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --sh-sm: 0 3px 10px rgba(0, 0, 0, 0.4);
  --sh-md: 0 12px 30px rgba(0, 0, 0, 0.45);

  --toque: 44px; /* mínimo táctil */
  --alto-top: 36px;
  --alto-tabs: 50px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Aire lateral del contenido: el mismo a los dos lados y en todas las pantallas, para
     que nada quede lamiendo el borde (y respetando el recorte de la pantalla si lo hay). */
  --borde-x: calc(var(--sp-4) + env(safe-area-inset-right, 0px));

  color-scheme: dark;
}

/* Instalada como PWA no hay barra del navegador que separe: con `safe-area-inset-top: 0`
   la marca quedaba pegada al borde de arriba. Se le pone un piso CHICO — el aire mínimo
   para que el título no arranque en el filo, no el alto de una barra de estado: donde el
   sistema informa la franja real (la del reloj), esa gana y el piso no suma nada. Va
   sobre `--safe-top` y no sobre el padding del header para que lo que se apoya debajo
   (el banner de red, la hoja del testigo) se corra con él. */
@media (display-mode: standalone) {
  :root { --safe-top: max(env(safe-area-inset-top, 0px), 16px); }
}

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

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

body {
  background: var(--ground);
  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;
  background: linear-gradient(180deg, var(--panel) 0%, rgba(30, 41, 59, 0.92) 100%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.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 {
  padding: var(--sp-1) var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font: 700 var(--fs-md) / 1 inherit;
  letter-spacing: 0.14em;
  color: var(--accent);
  cursor: pointer;
}

.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: rgba(15, 23, 42, 0.45);
  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);
}

.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: 1px solid var(--border-hi);
  border-radius: var(--r-pill);
  background: transparent;
  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); }

/* ── 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); }