/* Piezas de las pantallas nuevas del rediseño (REDISENO-MOVIL-MAD.md, Fase 1): Inicio
   (tarjeta de solicitudes y «Ahora»), Bandeja (filtros y secciones), la fila Git del
   tablero, Ajustes y la hoja de Actividad. Sólo tokens de tokens.css. */

/* ── Rótulo de sección (maqueta: «AHORA  2 corriendo») ──────────────────── */
.sec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--sp-1);
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sec-der { color: var(--accent); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ── Inicio ─────────────────────────────────────────────────────────────── */
.inicio-arriba { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--borde-x) 0; }
.inicio-arriba:not(:has(> :not([hidden]))) { display: none; }
.inicio-sec-proy { padding: var(--sp-3) var(--borde-x) 0; }
.inicio-proyectos > .pantalla { padding-top: var(--sp-2); }
/* El «+» del pie de la lista lo reemplaza el FAB (Fase 1 §10). */
.inicio .pie-proyectos { display: none; }

.inicio-aviso {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  font-size: var(--fs-sm);
  cursor: pointer;
}
.inicio-aviso[hidden] { display: none; }
.ia-ico { color: var(--accent); }
.ia-txt { flex: 1; min-width: 0; }
.ia-x {
  flex: none;
  width: var(--toque);
  height: 32px;
  margin: -6px -6px -6px 0;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: var(--fs-lg);
  cursor: pointer;
}

.ahora { display: flex; flex-direction: column; gap: var(--sp-2); }
.ahora[hidden] { display: none; }
.ahora-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.ahora-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--st-proceso) 24%, transparent);
  border-radius: var(--r-lg);
  background-color: var(--panel);
  background-image: var(--grad-superficie-viva), var(--grad-superficie);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ahora-top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ahora-chip { color: var(--st-proceso); background: color-mix(in srgb, var(--st-proceso) 14%, transparent); border: 0; }
.ahora-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: var(--fs-sm); }
.ahora-reloj { flex: none; color: var(--faint); font: 600 var(--fs-xs) / 1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ahora-tit { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ahora-testigo { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--st-proceso); font-size: var(--fs-sm); }
.ahora-testigo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahora-pulso {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--st-proceso);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-proceso) 16%, transparent);
  animation: ahora-latir 1.6s ease-in-out infinite;
}
@keyframes ahora-latir { 50% { opacity: 0.45; } }

/* ── Bandeja ────────────────────────────────────────────────────────────── */
.filtros { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--borde-x) * -1); padding: 0 var(--borde-x); }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--muted);
  font: 500 var(--fs-sm) / 1 inherit;
  white-space: nowrap;
  cursor: pointer;
}
.filtro.on { background: var(--ink); color: var(--ground); font-weight: 650; }
.filtro-n { font-size: var(--fs-xs); opacity: 0.75; }

.bandeja-cuerpo { display: flex; flex-direction: column; gap: var(--sp-4); }
.bandeja-sub[hidden],
.bandeja-cuerpo > .aviso[hidden] { display: none; }
/* Cada sub-vista trae su `.pantalla` con su padding y su título: acá se aplana y el
   título baja a rótulo de sección. */
.bandeja-sub > .pantalla { padding: 0; gap: var(--sp-2); }
.bandeja-sub .cabecera-vista { flex-direction: row; align-items: center; justify-content: space-between; }
.bandeja-sub .cabecera-vista .titulo {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Fila Git del tablero (maqueta 3) ───────────────────────────────────── */
.fila-git {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 50px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 18px;
  background-color: var(--panel);
  background-image: var(--grad-superficie);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fila-git[hidden] { display: none; }
.fila-git:active { background-color: var(--panel2); }
.fg-ico { display: inline-flex; color: var(--muted); }
.fg-rama { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fg-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: var(--fs-sm); }
.fg-ir { flex: none; color: var(--faint); font-size: var(--fs-sm); }

/* Git empujada: el resumen y Refrescar en un renglón (el título ya está en el header). */
body[data-ruta^='/git'] .cabecera-vista { flex-direction: row; align-items: center; justify-content: space-between; }
body[data-ruta^='/git'] .git-resumen:empty { display: none; }

/* ── Ajustes ────────────────────────────────────────────────────────────── */
body[data-ruta='/ajustes'] .maq-titulo { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── Hoja de Actividad (js/componentes/actividad.js), sobre la hoja de turnos ───────── */
.act-hoja .hoja-titulo { font-size: var(--fs-lg); }
.act-lista { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-3) var(--sp-2); overflow-y: auto; }
.act-sec { padding: var(--sp-3) var(--sp-2) var(--sp-1); color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.act-vacio { margin: 0; padding: var(--sp-2); color: var(--faint); font-size: var(--fs-sm); }
.act-fila {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--toque);
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.act-fila:active { background: var(--fill); }
.act-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st-proceso); }
.act-fila.fin .act-punto { background: var(--faint); }
.act-medio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.act-top { display: flex; gap: var(--sp-2); color: var(--faint); font-size: var(--fs-xs); }
.act-tit,
.act-det { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-tit { font-size: var(--fs-md); font-weight: 600; }
.act-det { color: var(--muted); font-size: var(--fs-sm); }
.act-der { flex: none; color: var(--faint); font-size: var(--fs-sm); }
.act-pie { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px solid var(--line); }
.act-pie .btn { flex: 1; }