/* ============================================================
   PENDIENTES · app móvil
   Station Design System v2. Sin libertad de paleta ni de tipografía:
   solo tokens, hairline por profundidad, una sola sombra
   (--shadow-popover) y un solo relleno de acento por vista (enviar).
   La decisión de diseño está en la estructura, no en el color.

   ── El carril de origen ──────────────────────────────────────
   Cada fila (una tarjeta) lleva 3px a la izquierda con el color de
   DE QUIÉN viene la obligación. Y solo se enciende cuando hay otra
   parte esperando: lo tuyo va en gris de borde, lo de Marta en su
   color, lo del equipo de Data en el suyo. Al bajar por la lista,
   los tramos de color son las promesas que le hiciste a alguien.
   Cuatro colecciones de Firestore colapsan en una sola lista y el
   carril es lo que mantiene legible la procedencia sin leyenda.

   Todo scopeado bajo .mt-app: este archivo carga después de
   styles.css y no debe poder tocar nada del dashboard.
   ============================================================ */

/* ── Shell a prueba de teclado y de barra de direcciones ──────────────────────
   `styles.css` trae `body { min-height: 100vh }`. Con el shell a `100dvh` (que
   en Android Chrome es MENOR que 100vh cuando la barra de direcciones está
   visible) el body se quedaba más alto que el viewport y ganaba scroll propio:
   se llevaba la cabecera fuera de pantalla y no había forma de recuperarla.
   `position: fixed; inset: 0` no depende de la altura del body, y con
   `interactive-widget=resizes-content` en el meta viewport se recoloca solo al
   abrirse el teclado. `--mt-h`, que fija el handler de visualViewport, cubre a
   iOS, donde el teclado superpone en vez de encoger. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

/* ── Pantalla de acceso ───────────────────────────────────────────────────────
   Reusa el marcado y los estilos del dashboard, pero sus tamaños son de
   escritorio (h1 a 22px, textos a 14, el separador a 11) y en un teléfono se
   leen diminutos. Aquí se suben; mobile.css solo lo carga esta app, así que
   estas reglas no pueden alcanzar al dashboard.
   Y el `min-height: 100vh` original no vale con `body { overflow: hidden }`: en
   Android 100vh es MAYOR que el viewport cuando la barra de direcciones está
   visible, y la tarjeta quedaba cortada por abajo sin poder hacer scroll. */
#auth-screen { min-height: 100%; height: 100%; overflow-y: auto; padding: var(--sp-4) 0; }
#auth-screen .auth-card { padding: var(--sp-8) var(--sp-5); max-width: 440px; }
#auth-screen .auth-card .logo img { width: 72px; height: 72px; border-radius: 16px; }
#auth-screen .auth-card h1 { font-size: var(--fs-metric); margin-bottom: var(--sp-2); }
#auth-screen .auth-card .auth-eyebrow { font-size: var(--fs-body); margin-bottom: var(--sp-6); }
#auth-screen .auth-card p { font-size: var(--fs-body-lg); margin-bottom: var(--sp-8); line-height: var(--lh-base); }
#auth-screen .btn-google, #auth-screen .btn-microsoft {
  font-size: var(--fs-body-lg); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius);
  min-height: var(--h-control);
}
#auth-screen .btn-google img, #auth-screen .btn-microsoft svg { width: 24px; height: 24px; }
#auth-screen .auth-divider { font-size: var(--fs-body); margin: var(--sp-3) 0; }
#auth-screen #auth-error { font-size: var(--fs-body); line-height: var(--lh-base); margin-top: var(--sp-4); }

/* Los tokens de esta app van en :root y no en .mt-app porque la pantalla de
   acceso vive FUERA de .mt-app y también necesita --h-control (si no, hereda los
   34px del dashboard y sus botones se quedan enanos). mobile.css solo lo carga
   esta página, así que redefinir :root aquí no alcanza al dashboard. */
:root {
  --h-control: 52px;      /* target de pulgar: se redefine el token, no cada
                             componente, para que la regla base de controles de
                             styles.css crezca con él */
  /* 3px y no 2: a 2px el carril se lee como un hairline más y los tramos de
     color dejan de ser escaneables de un vistazo, que es todo su trabajo. */
  --mt-rail: 3px;
  --mt-gutter: var(--sp-3);   /* margen lateral de las tarjetas */
}

.mt-app {
  display: none;
  position: fixed; inset: 0;
  /* --mt-h y --mt-top los fija mtFitViewport() desde visualViewport. El `top`
     hace falta en iOS: con el teclado abierto el viewport visual se desplaza y
     un elemento `fixed` se va a la deriva si no se le sigue el offset. Con top y
     height dados, el `bottom: 0` de inset queda sobre-restringido y el navegador
     lo ignora, que es justo lo que se quiere. */
  top: var(--mt-top, 0px);
  height: var(--mt-h, 100%);
  flex-direction: column;
  background: var(--surface-0);
}
.mt-app.on { display: flex; }

/* 18px en los campos. El mínimo funcional son 16: por debajo, iOS hace auto-zoom
   al enfocar y descoloca todo (es la alternativa a bloquear el zoom con
   maximum-scale). 18 va con el resto de la escala de esta app. */
.mt-app input, .mt-app textarea, .mt-app select { font-size: var(--fs-heading); }
.mt-app input[type=date] { font-size: var(--fs-body-lg); }

/* ── Cabecera con título grande ───────────────────────────────────────────────
   El título va a --fs-metric-lg (36px), el mayor de los ocho tokens de la escala.
   Y en color de acento como TEXTO: el design system limita a un solo *relleno*
   de acento por vista (aquí, el botón de enviar), no su uso como texto.

   Se encoge a --fs-title al hacer scroll. Sin eso, cabecera + estado + tira del
   trimestre se comen 160px de los 844 del teléfono de forma permanente, y esta
   pantalla existe para mostrar la lista, no su propio nombre. */
.mt-top {
  flex: none;
  padding: max(var(--sp-2), env(safe-area-inset-top)) var(--sp-2) var(--sp-3) var(--mt-gutter);
  border-bottom: 0.5px solid var(--border);
}
.mt-top-row { display: flex; align-items: center; gap: var(--sp-1); }
.mt-title {
  flex: 1; min-width: 0;
  font-size: var(--fs-metric-lg); font-weight: 500; line-height: var(--lh-tight);
  color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size var(--dur-base) var(--ease-out);
}
.mt-app.scrolled .mt-title { font-size: var(--fs-title); }
.mt-app.scrolled .mt-top { padding-bottom: var(--sp-2); }

.mt-status {
  min-width: 0; margin-top: var(--sp-1);
  font-size: var(--fs-body-lg); color: var(--text-secondary);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  line-height: var(--lh-tight);
}
.mt-status .n { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.mt-status .late { color: var(--danger); }
.mt-status .sep { color: var(--text-disabled); }
.mt-status .off { color: var(--warning); display: inline-flex; align-items: center; }

.mt-icon-btn {
  position: relative; flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer;
}
.mt-icon-btn:active { background: var(--surface-2); }
.mt-icon-btn svg { width: 20px; height: 20px; }
/* Punto de "hay filtro puesto": si no, se olvida que la lista está recortada y
   parece que faltan tareas. */
.mt-badge-dot { display: none; position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.mt-badge-dot.on { display: block; }

/* ── Tira del trimestre ──────────────────────────────────────────────────── */
.mt-quarter {
  flex: none; display: none; width: 100%;
  align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1); border: none;
  border-bottom: 0.5px solid var(--border);
  font-family: var(--font-sans); font-size: var(--fs-body);
  color: var(--text-secondary); text-align: left; cursor: pointer;
}
.mt-quarter.on { display: flex; }
.mt-quarter:active { background: var(--surface-2); }
.mt-quarter .q { font-family: var(--font-mono); color: var(--text-primary); }
.mt-quarter .grow { flex: 1; min-width: 0; }
.mt-quarter .off { color: var(--warning); }
.mt-quarter svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }

/* ── El flujo ────────────────────────────────────────────────────────────── */
.mt-stream {
  flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-6);
}
.mt-group {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-5) var(--mt-gutter) var(--sp-2);
  font-size: var(--fs-footnote); font-weight: 500; color: var(--text-muted);
}
.mt-group:first-child { padding-top: var(--sp-3); }
.mt-group.late { color: var(--danger); }
.mt-group .n { color: var(--text-disabled); font-variant-numeric: tabular-nums; }

.mt-empty {
  padding: var(--sp-10) var(--sp-5); text-align: center;
  font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: var(--lh-loose);
}
.mt-empty svg { width: 28px; height: 28px; display: block; margin: 0 auto var(--sp-4); color: var(--text-disabled); }
.mt-empty b { color: var(--text-primary); font-weight: 500; }
.mt-empty .mt-empty-hint { margin-top: var(--sp-4); font-size: var(--fs-body); color: var(--text-muted); }
.mt-empty .mt-empty-hint code {
  font-family: var(--font-mono); font-size: var(--fs-footnote);
  color: var(--text-secondary); background: var(--surface-2);
  padding: 2px 6px; border-radius: var(--radius-sm);
}
.mt-empty .mt-retry {
  margin-top: var(--sp-5); min-height: var(--h-control); padding: 0 var(--sp-5);
  background: transparent; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body-lg); cursor: pointer;
}

/* ── Fila = tarjeta ───────────────────────────────────────────────────────────
   Cada tarea es su propia superficie (--surface-1 + hairline + radio), separada
   de la siguiente. No es decoración: con texto que envuelve a dos y tres líneas,
   un separador hairline deja de decir dónde acaba una tarea y empieza la otra, y
   en un teléfono eso es la diferencia entre acertar el toque y no.
   Legal en el design system: una tarjeta en flujo es exactamente --surface-1, y
   la profundidad sigue viniendo del borde, no de una sombra.

   .mt-row recorta; .mt-row-inner es lo que se desplaza con el dedo. Los dos
   fondos de acción viven detrás y solo se ven cuando el contenido se aparta. */
.mt-row {
  position: relative; overflow: hidden;
  margin: 0 var(--mt-gutter) var(--sp-2);
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
}
.mt-row-bg {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--sp-5);
}
/* visibility y no opacity: el icono lleva color semántico y una opacidad lo
   multiplicaría contra un fondo que además cambia de tinte. */
.mt-row-bg span { display: inline-flex; visibility: hidden; }
.mt-row-bg svg { width: 20px; height: 20px; }
.mt-row-bg .bg-done { color: var(--success); }
.mt-row-bg .bg-del  { color: var(--danger); }
.mt-row[data-swipe="right"] { background: var(--success-soft); }
.mt-row[data-swipe="right"] .bg-done { visibility: visible; }
.mt-row[data-swipe="left"]  { background: var(--danger-soft); }
.mt-row[data-swipe="left"]  .bg-del  { visibility: visible; }

.mt-row-inner {
  position: relative;
  /* center y no flex-start: con texto de dos y tres líneas el círculo alineado
     arriba se despega del bloque. Centrado sigue al alto real de la tarjeta. */
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 68px; padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  background: var(--surface-1);
  border-left: var(--mt-rail) solid var(--rail, var(--border-strong));
  padding-left: calc(var(--sp-4) - var(--mt-rail));
  touch-action: pan-y;                 /* el eje X lo gestiona el JS */
  transition: transform var(--dur-base) var(--ease-out);
}
.mt-row.dragging .mt-row-inner { transition: none; }
.mt-row-inner:active { background: var(--surface-2); }
/* Sin carril propio: lo que solo te debes a ti mismo no necesita señalar a nadie */
.mt-row.mine .mt-row-inner { border-left-color: var(--border); }

.mt-chk {
  position: relative;   /* ancla del área táctil de abajo */
  flex: none; width: 28px; height: 28px;
  border: 1px solid var(--border-stronger); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: transparent; cursor: pointer;
}
.mt-chk svg { width: 17px; height: 17px; }
.mt-row.done .mt-chk { border-color: var(--success-border); color: var(--success); }
.mt-row.locked .mt-chk { border-style: dashed; border-color: var(--border); cursor: default; }
/* 48px de zona táctil sin agrandar el círculo dibujado */
.mt-chk::after { content: ''; position: absolute; top: -10px; left: -10px; width: 48px; height: 48px; }

.mt-body { flex: 1; min-width: 0; }
/* 18px: esta lista se lee de pie, con una mano y el brazo estirado */
.mt-text {
  font-size: var(--fs-heading); font-weight: 400; color: var(--text-primary);
  line-height: var(--lh-tight); word-break: break-word;
}
.mt-row.done .mt-text { color: var(--text-muted); text-decoration: line-through; }

.mt-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-1); font-size: var(--fs-body);
}
.mt-meta:empty { display: none; }
/* El origen es texto, no una cápsula más: el color ya lo lleva el carril */
.mt-origin { color: var(--text-secondary); }
.mt-origin .who { color: var(--origin, var(--text-secondary)); }
.mt-origin .kind { color: var(--text-muted); }
.mt-due { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mt-due.overdue { color: var(--danger); }
.mt-due.today { color: var(--warning); }
.mt-mini { display: inline-flex; color: var(--text-disabled); }
.mt-mini svg { width: 15px; height: 15px; }

.mt-tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 1px var(--sp-2); border-radius: 999px;
  border: 0.5px solid var(--border-strong); background: var(--surface-2);
  font-size: var(--fs-footnote); color: var(--text-secondary); white-space: nowrap;
}
.mt-tag::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--mt-tag-color, var(--text-disabled)); }

/* ── Captura ─────────────────────────────────────────────────────────────── */
.mt-compose {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--surface-1); border-top: 0.5px solid var(--border);
}
.mt-new {
  flex: 1; min-width: 0;
  background: var(--surface-2); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 0 var(--sp-4);
  min-height: var(--h-control); color: var(--text-primary); font-family: var(--font-sans);
}
.mt-app .mt-new { font-size: var(--fs-heading); }
/* El único relleno de acento de la vista */
.mt-send {
  flex: none; width: var(--h-control); height: var(--h-control);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); border: none; border-radius: 999px;
  color: var(--on-accent); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.mt-send svg { width: 20px; height: 20px; }
.mt-send:disabled { background: var(--surface-2); color: var(--text-disabled); }

/* ── Capas que flotan ────────────────────────────────────────────────────── */
.mt-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
.mt-scrim.on { opacity: 1; pointer-events: auto; }

.mt-menu {
  position: fixed; top: max(var(--sp-8), env(safe-area-inset-top)); right: var(--sp-3);
  min-width: 220px; z-index: 50; display: none;
  background: var(--surface-3); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); padding: var(--sp-2);
}
.mt-menu.on { display: block; }
.mt-menu button {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--h-control); padding: 0 var(--sp-3);
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body-lg);
  text-align: left; cursor: pointer;
}
.mt-menu button:active { background: var(--surface-2); }
.mt-menu button svg { width: 19px; height: 19px; flex: none; color: var(--text-secondary); }
/* Instalar es una acción de una sola vez, no una de las recurrentes: va arriba y
   separada, con su línea de explicación. */
.mt-menu button.install {
  align-items: flex-start; padding-top: var(--sp-3); padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-2); border-bottom: 0.5px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.mt-menu button.install svg { color: var(--accent); margin-top: 2px; }
.mt-menu button.install .sub {
  display: block; margin-top: 2px;
  font-size: var(--fs-footnote); color: var(--text-muted); line-height: var(--lh-base);
}
.mt-scale { padding: var(--sp-3); border-top: 0.5px solid var(--border); margin-top: var(--sp-2); }
.mt-scale-l { font-size: var(--fs-footnote); color: var(--text-muted); margin-bottom: var(--sp-2); }
.mt-scale-b { display: flex; gap: var(--sp-2); }
.mt-scale-b button {
  flex: 1; min-height: 44px; padding: 0 var(--sp-2);
  background: transparent; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-family: var(--font-sans); font-weight: 500; cursor: pointer;
}
/* Cada botón se rotula a SU propio tamaño: así la muestra es el propio control y
   no hace falta leer una etiqueta para saber qué vas a obtener. */
.mt-scale-b button[data-k=m]  { font-size: var(--fs-footnote); }
.mt-scale-b button[data-k=g]  { font-size: var(--fs-body); }
.mt-scale-b button[data-k=xg] { font-size: var(--fs-body-lg); }
.mt-scale-b button.on { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); }

.mt-menu .meta {
  padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2);
  border-top: 0.5px solid var(--border);
  font-size: var(--fs-footnote); color: var(--text-muted); word-break: break-all;
}

/* Hoja inferior: detalle, filtros y KRs comparten contenedor */
.mt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 86%; overflow-y: auto;
  background: var(--surface-3);
  border-top: 0.5px solid var(--border-strong);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-popover);
  padding: var(--sp-2) var(--sp-4) max(var(--sp-5), env(safe-area-inset-bottom));
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.mt-sheet.on { transform: translateY(0); visibility: visible; }
.mt-grab { width: 36px; height: 4px; border-radius: 999px; background: var(--border-stronger); margin: var(--sp-2) auto var(--sp-4); }
.mt-sheet-title {
  font-size: var(--fs-body); color: var(--text-muted);
  margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2);
}
.mt-sheet-title .who { color: var(--origin, var(--text-secondary)); }
/* El mismo carril de la fila, para que la hoja se reconozca como su detalle */
.mt-sheet-title .rail { width: var(--mt-rail); height: 14px; border-radius: 1px; background: var(--rail, var(--border-strong)); }

.mt-field { margin-bottom: var(--sp-5); }
.mt-label { font-size: var(--fs-footnote); color: var(--text-muted); margin-bottom: var(--sp-2); }
.mt-sheet textarea, .mt-sheet input[type=date], .mt-sheet input[type=text] {
  width: 100%; background: var(--surface-2); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans);
}
/* overflow-y:auto y no hidden: el alto lo pone mtAutogrow(), pero si no corriera,
   con `hidden` el navegador recorta el texto en silencio. Así, peor caso, scroll. */
.mt-sheet textarea { padding: var(--sp-3); line-height: var(--lh-base); resize: none; overflow-y: auto; min-height: var(--h-control); }
.mt-sheet input[type=date] { min-height: var(--h-control); padding: 0 var(--sp-3); }
.mt-readonly {
  font-size: var(--fs-heading); color: var(--text-primary); line-height: var(--lh-base);
  padding: var(--sp-3); background: var(--surface-2);
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
}

.mt-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mt-chip {
  min-height: 44px; padding: 0 var(--sp-4);
  background: transparent; border: 0.5px solid var(--border-strong); border-radius: 999px;
  color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2);
}
.mt-chip.on { border-color: var(--accent-border); color: var(--accent); }
.mt-chip.ghost { color: var(--text-secondary); border-style: dashed; }
.mt-chip svg { width: 16px; height: 16px; }
.mt-chip .rail { width: 3px; height: 14px; border-radius: 2px; background: var(--rail, var(--border-strong)); }
.mt-chip .n { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.mt-row-add { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.mt-row-add input { flex: 1; min-height: 44px; }

/* Pegada abajo: la acción principal de la hoja no puede quedar bajo el pliegue.
   Con campos largos (texto + fecha + etiquetas + nota) "Completar" caía fuera de
   pantalla y había que hacer scroll para lo que más se usa. */
.mt-sheet-acts {
  position: sticky; bottom: calc(env(safe-area-inset-bottom) * -1 - var(--sp-5));
  display: flex; gap: var(--sp-2);
  margin: var(--sp-5) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--surface-3); border-top: 0.5px solid var(--border);
}
.mt-sheet-acts button {
  flex: 1; min-height: var(--h-control); border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-strong); background: transparent;
  color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); cursor: pointer;
}
.mt-sheet-acts button svg { width: 18px; height: 18px; }
.mt-sheet-acts .solve { border-color: var(--success-border); color: var(--success); }
.mt-sheet-acts .del   { border-color: var(--danger-border);  color: var(--danger); }
.mt-sheet-foot {
  margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 0.5px solid var(--border);
  font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-loose);
}
.mt-sheet-foot a { color: var(--accent); text-decoration: none; }

/* KRs: no son tareas. Fila de dato, con su avance y su estado. */
.mt-kr { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 0.5px solid var(--border); }
.mt-kr:last-child { border-bottom: none; }
.mt-kr .dot { margin-top: 7px; }
.mt-kr-body { flex: 1; min-width: 0; }
.mt-kr-t { font-size: var(--fs-body-lg); color: var(--text-primary); line-height: var(--lh-tight); }
.mt-kr-o { font-size: var(--fs-footnote); color: var(--text-muted); margin-top: 3px; }
.mt-kr-pct { flex: none; font-family: var(--font-mono); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.mt-kr-pct.on { color: var(--success); }
.mt-kr-pct.off { color: var(--warning); }

/* Aviso con deshacer */
.mt-toast {
  position: fixed; left: var(--sp-4); right: var(--sp-4); z-index: 60;
  bottom: calc(var(--h-control) + var(--sp-8) + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: var(--sp-3);
  background: var(--surface-3); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-popover);
  padding: var(--sp-4);
  font-size: var(--fs-body-lg); color: var(--text-primary);
}
.mt-toast.on { display: flex; }
.mt-toast span { flex: 1; min-width: 0; }
.mt-toast button {
  flex: none; min-height: 36px; padding: 0 var(--sp-3);
  background: transparent; border: 0.5px solid var(--accent-border); border-radius: var(--radius-sm);
  color: var(--accent); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .mt-row-inner, .mt-scrim, .mt-sheet, .mt-send { transition: none; }
}

/* En escritorio no se estira: es una app de móvil abierta en una pantalla
   grande, no una vista de escritorio. */
@media (min-width: 620px) {
  /* `right: auto` es obligatorio: el shell base es `inset: 0`, y con left y right
     a 0 el max-width lo dejaría anclado a la izquierda en vez de centrado. */
  .mt-app {
    left: 50%; right: auto; width: 100%; max-width: 520px; transform: translateX(-50%);
    border-left: 0.5px solid var(--border); border-right: 0.5px solid var(--border);
  }
  .mt-menu, .mt-toast { max-width: 520px; margin: 0 auto; }
  .mt-sheet { max-width: 520px; margin: 0 auto; }
}