/* ════════════════════════════════════════════════════════════════
   mail.css — App Correo (F1 Correo, B3: Inbox UI)
   docs/PLAN_F1_MAIL.md · docs/PLAN_ALUNA_WORKSPACE.md D6/D65-D68

   3 paneles (árbol de cuentas · lista de hilos · detalle) sobre los
   tokens de css/tokens-productivity.css (--surface-N / --divider /
   --row-N) — NO clases .yt-split literales (esas son 2 columnas;
   aquí son 3, misma familia de tokens). Aditivo: solo clases mail-.
   ════════════════════════════════════════════════════════════════ */

/* BUG REAL (reportado en vivo 2026-07-13: "pierdo el menú de arriba al hacer scroll"):
   .mail-shell{height:100%} necesita una altura real heredada de SUS 2 ancestros — y NINGUNO de
   los 2 la daba:
     1) `.tab-pane` (css/app.css, clase genérica del riel) solo tiene `display:block`.
     2) `.main-inner` (css/app.css:567, el contenedor de CONTENIDO dentro de `.main`) solo tiene
        `max-width/padding/width` — CERO altura, diseñado para páginas con padding que crecen con
        su contenido (Inicio, Contactos, etc.), no para un "app shell" con paneles que scrollean
        internamente.
   Mi primer intento (v3.158.1) solo arregló el eslabón #1 y no funcionó — el #2 seguía roto,
   así que `.mail-shell{height:100%}` seguía resolviendo contra una altura indefinida un nivel
   más arriba. Sin altura real en NINGÚN punto de la cadena, es `.main` (el contenedor de scroll
   de PÁGINA, css/app.css:564) el que termina scrolleando TODO — arrastrando la barra de
   herramientas fuera de vista. Nunca se disparó antes porque las pruebas usaban bandejas cortas
   que cabían sin scroll; con una bandeja real (87+ correos) sí se activa.
   Fix: `:has()` acota el cambio a `.main-inner` SOLO cuando está mostrando el tab de Correo — el
   resto de páginas (Inicio/Contactos/etc.) conservan su padding y su scroll de página normal sin
   tocar nada. Correo pasa a comportarse como app-shell real (sin padding, altura 100%, los 3
   paneles scrollean cada uno por su cuenta) — mismo patrón que ya usan Tareas/Agenda visualmente,
   aunque ellos SÍ caben hoy sin necesitar este fix porque su contenido no desborda tanto. */
.main-inner:has(#tab-mail-soon.tab-pane.active){ height:100%; min-height:0; padding:0; display:flex; flex-direction:column; }
#tab-mail-soon.tab-pane.active{ flex:1 1 auto; min-height:0; height:auto; display:flex; flex-direction:column; }
.mail-shell { display:flex; flex-direction:column; height:100%; min-height:0; background:var(--surface-0); }

.mail-body {
  display:grid;
  grid-template-columns:200px minmax(300px,380px) minmax(0,1fr);
  flex:1 1 auto; min-height:0;
}

.mail-tree, .mail-list-pane { min-height:0; overflow-y:auto; }
.mail-tree       { border-right:1px solid var(--divider); padding:8px 0; }
.mail-list-pane  { border-right:1px solid var(--divider); display:flex; flex-direction:column; }
/* UX real (2026-07-14): `position:sticky` para fijar el encabezado del hilo NO funcionaba de forma
   confiable dentro de esta cadena de flex/grid anidados (varios ancestros involucrados, cada uno
   con su propio min-height/overflow) — confirmado en vivo que el usuario lo seguía perdiendo al
   hacer scroll pese a que la regla estaba correctamente desplegada. Fix más robusto: separar
   FÍSICAMENTE el encabezado (.mail-thread-sticky, fuera del scroll) del cuerpo que sí scrollea
   (.mail-thread-messages, envuelve SOLO los mensajes) — mismo patrón que .mail-list-pane ya usa
   arriba (el propio panel NO scrollea completo; en Correo el equivalente es que el panel de detalle
   sea flex-column con un hijo fijo + un hijo que sí scrollea). `.mail-detail-pane` YA NO scrollea
   completo (se le quita overflow-y:auto) — ver `.mail-thread-messages` más abajo. */
.mail-detail-pane{ max-width:1400px; margin-inline:auto; width:100%; min-height:0; min-width:0; display:flex; flex-direction:column; }
/* BUG REAL (iPhone retrato, capturas del usuario, 2026-07-13) — hallazgo MÁS PROFUNDO que el de
   `.mail-thread-hd`/`.mail-thread-subject` de arriba, confirmado con Playwright DESPUÉS de arreglar
   ese: el aviso de imágenes bloqueadas (`.mail-imgblock-bar`) seguía cortándose incluso con el
   asunto ya arreglado, porque vive en una rama DISTINTA del árbol (`.mail-thread-messages`, no
   `.mail-thread-hd`). `.mail-thread-messages` es un flex item de `.mail-detail-pane` (columna) con
   `overflow-y:auto` pero SIN `overflow-x` propio (queda en `visible` por default) — por la regla de
   "tamaño mínimo automático" de flexbox, un item con overflow VISIBLE en el eje que importa (aquí
   el horizontal/inline) usa como mínimo automático el min-content de TODO su contenido, no cero.
   Eso deja que el min-content de `.mail-imgblock-bar` (que sí tiene su propio flex-wrap ya
   arreglado arriba, pero apenas ~300px de mínimo real por el botón "Descargar imágenes externas")
   se propague HACIA ARRIBA y fuerce a `.mail-thread-messages` — y con él TODA la columna
   `.mail-detail-pane`/pista de grid `.mail-body` — más ancha que el viewport en pantallas angostas
   (confirmado con Playwright: 320-360px de ancho, contenido real, SIN esta regla el aviso pedía
   ~300-320px cuando solo había ~256-296px disponibles). `min-width:0` corta la propagación en el
   mismo punto donde se genera (este item), igual que ya se hizo arriba con `.mail-thread-hd`. */
.mail-thread-messages{ flex:1 1 auto; min-height:0; min-width:0; overflow-y:auto; }

/* UXU-1 (panel de auditores, CONFIRMADO): la capa flotante <880px (FAB/píldora/barra inferior,
   css/native-materials.css) ocupa var(--native-float-y) (~140-200px desde abajo, según safe-area)
   sin que estos 3 paneles reservaran espacio — el último mensaje de un hilo o las últimas filas de
   la bandeja quedaban tapados por la capa flotante SIN forma de revelarlos con scroll (el scrollTop
   máximo del contenedor alinea su último elemento al borde del propio contenedor, no al viewport
   visible detrás de la capa flotante que se superpone encima). SOLO dentro del mismo breakpoint
   móvil que ya gobierna el resto del layout de Correo (ver @media más abajo en este archivo) — en
   escritorio la capa flotante no existe, no se reserva espacio ahí.
   PC-1: `and (max-width:960px)` en el ENCABEZADO — mismo motivo que los otros 2 @media idénticos de
   este archivo (más abajo): sin tope de ancho, cualquier viewport ancho pero corto con puntero
   coarse activaba este padding pensado solo para el layout de teléfono.
   BUG REAL (reportado en vivo con 2 capturas de iPhone real, "no usa todo el viewport" — hueco de
   ~250-300px entre la píldora flotante y `#bottom-nav`, auditado con Playwright/WebKit contra un
   harness con TODO el CSS real, tests/visual/fixtures/mail-mobile-hueco-harness.html): el `+56px`
   de aquí (pensado como "alto aproximado del FAB/píldora, para despejar por encima de
   `--native-float-y`") se sumaba encima de OTRO `+56px` que YA reserva `.main` para el mismo
   `#bottom-nav` global (css/app.css, `@media(max-width:768px){ .main{padding-bottom:56px} }`) —
   y ese padding de `.main` SÍ le llega a estos 3 paneles: `.main-inner:has(#tab-mail-soon...)`
   (línea 30 de este archivo) resuelve su `height:100%` contra el CONTENT-BOX de `.main` (ya
   descontado ese `padding-bottom:56px`), así que `.mail-shell`/`.mail-body`/estos 3 paneles ya
   arrancan 56px más arriba del borde real del viewport ANTES de que este `calc()` reserve nada.
   Medido en vivo (iPhone 14 WebKit, safe-area=0 en el entorno de prueba): `.main` bottom=664
   (=viewport), `.main-inner` bottom=608 (=664-56, confirma el descuento), `.mail-list-pane`
   padding-bottom computado=206px (=139 native-float-y + 56 + 12, la fórmula vieja) cuando el
   despeje real necesario desde el borde YA desplazado de `.mail-list-pane` es apenas
   139+12=151px — 55-56px de más, puro espacio muerto, en TODAS las bandejas móviles (más notorio
   con bandejas cortas como la del usuario: con 6 hilos, el área visible de filas quedaba en solo
   212px, ~3 hilos, con el resto del hueco debajo). Fix: restar el mismo 56px que `.main` ya
   reservó — se cancela con el `+56px` de "alto del FAB" de aquí, dejando `native-float-y + 12px`
   (el aire extra) como despeje real necesario dentro de estos 3 paneles. Se deja la resta
   explícita (no simplificado a "+12px") a propósito: si el alto del FAB o el padding-bottom de
   `.main` cambian por separado en el futuro, la intención de cada término sigue siendo legible. */
/* OJO con QUIÉN lleva este padding — tiene que ser el SCROLLER real de cada vista, no su
   contenedor. `.mail-list-pane` es un flex column CONTENEDOR cuyo scroller real es su hijo
   `.mail-rows` (flex:1 + overflow-y:auto, ver más abajo): con el padding en el contenedor, el
   scrollport del hijo se ENCOGE 150px (border-box global) y las filas quedan RECORTADAS a media
   línea 150px antes del borde inferior, con un bloque de fondo muerto debajo que ningún scroll
   puede llenar (bug real reportado con capturas de iPhone: "abajo hay un bloque que no se ve, no
   llena el tamaño de la pantalla" — la fila cortada + franja blanca se ven EXACTO en la captura).
   En el scroller, el mismo padding es despeje SCROLLEABLE: las filas llegan hasta el borde y el
   usuario puede scrollear la última por encima de la capa flotante. `.mail-tree` y
   `.mail-thread-messages` sí son scrollers ellos mismos (overflow-y:auto propio) — correctos. */
@media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) {
  .mail-tree, .mail-rows, .mail-thread-messages {
    padding-bottom: calc(var(--native-float-y) + 56px + 12px - 56px);
    scroll-padding-bottom: calc(var(--native-float-y) + 56px + 12px - 56px);
  }
}

/* ── Árbol de cuentas (D6) ────────────────────────────────────────── */
.mail-tree-group    { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); padding:12px 14px 4px; }
.mail-tree-group:first-child { padding-top:6px; }
.mail-tree-item {
  display:flex; align-items:center; gap:8px;
  min-height:36px; padding:0 12px;
  margin:0 6px; border-radius:8px;
  font-size:13.5px; color:var(--text-2);
  cursor:pointer; border:none; background:transparent; width:calc(100% - 12px);
  text-align:left; font-family:inherit;
}
.mail-tree-item:hover { background:var(--row-hover); }
.mail-tree-item:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
.mail-tree-item.is-active { background:var(--row-selected); color:var(--text); font-weight:600; }
.mail-tree-item.is-unread { font-weight:var(--row-unread-weight); color:var(--text); }
.mail-tree-ico  { flex-shrink:0; width:18px; text-align:center; font-size:14px; }
.mail-tree-label{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-tree-account-row { display:flex; align-items:center; gap:6px; min-width:0; }
.mail-tree-email { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; }
.mail-tree-badge {
  flex-shrink:0; font-size:12px; font-weight:700; color:var(--text-muted);
  background:var(--surface-2); border-radius:999px; padding:1px 7px; min-width:18px; text-align:center;
}
.mail-tree-item.is-unread .mail-tree-badge { color:#fff; background:color-mix(in srgb, var(--brand-secondary,#FF8A5B) 55%, #000 45%); }
.mail-provider-chip {
  flex-shrink:0; font-size:12px; font-weight:700; letter-spacing:.2px;
  padding:1px 6px; border-radius:5px; background:var(--surface-2); color:var(--text-muted);
}
.mail-sync-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
/* UX-10 (backlog LOW histórico): hex quemado — la estrella del mismo archivo ya usa var(--warn),
   el punto de sync se quedó atrás. Mismos tokens que el resto de la app (css/app.css). */
.mail-sync-dot.idle, .mail-sync-dot.active { background:var(--ok); }
.mail-sync-dot.pending, .mail-sync-dot.syncing, .mail-sync-dot.backfilling { background:var(--warn); }
.mail-sync-dot.error { background:var(--err); }
.mail-tree-empty-hint { font-size:12px; line-height:1.5; color:var(--text-muted); padding:2px 14px 12px; }
.mail-tree-item.mail-tree-fav-item .mail-tree-label { color:var(--text-2); }

/* ── Lista de hilos ───────────────────────────────────────────────── */
.mail-list-toolbar {
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; border-bottom:1px solid var(--divider);
  font-size:12px; color:var(--text-muted); flex-shrink:0;
}
.mail-list-toolbar label { display:flex; align-items:center; gap:5px; cursor:pointer; flex-shrink:0; }

/* ── Búsqueda (D68, B8) ───────────────────────────────────────────── */
/* BUG REAL EN VIVO (encontrado 2026-07-14 mientras se revisaba el rediseño de Contactos — un
   builder de otro módulo lo reprodujo por accidente y lo reportó, verificado aquí con un iframe
   aislado cargando css/mail.css+css/native-materials.css reales): F1.26 agregó la clase
   `.native-float-pill` a este mismo elemento (js/mail.js, `<div class="mail-search-wrap
   native-float-pill">`) para que herede la píldora flotante en móvil. Esa clase compartida trae su
   PROPIO `display:none` base fuera de cualquier media query (css/native-materials.css) — misma
   especificidad (0,1,0) que el `display:flex` de aquí, y como native-materials.css se carga
   DESPUÉS de mail.css en index.html, esa regla gana el empate en CUALQUIER ancho donde la media
   query móvil de native-materials.css no aplique: escritorio (≥880px) quedaba con la búsqueda
   COMPLETAMENTE OCULTA (display:none real, confirmado con getComputedStyle en un iframe de 1400px)
   desde que F1.26 se desplegó (v3.163.0) hasta este fix. Selector compuesto (0,2,0) en vez de
   (0,1,0) — le gana al empate sin tocar css/native-materials.css ni depender del orden de carga. */
.mail-list-toolbar .mail-search-wrap {
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px;
}
/* BUG REAL (mismo hallazgo del hueco de arriba, misma auditoría con Playwright/WebKit): el resto
   del look de escritorio (fondo sólido/borde/esquinas de 8px/32px de alto) vivía SIN @media en el
   bloque de arriba — misma especificidad (0,2,0) que gana CUALQUIER empate contra
   `.native-float-pill` (0,1,0, css/native-materials.css), medios O NO. Confirmado con screenshot
   real (harness, iPhone 14): en móvil la "píldora" de búsqueda se veía como un rectángulo sólido
   de 32px con esquinas de 8px, NO la cápsula translúcida de 48px/999px documentada — porque estas
   5 propiedades seguían ganando incluso dentro del @media móvil de native-materials.css. Se acotan
   aquí a ≥880px (el ancho real en el que este look de escritorio aplica); el `display:flex` de
   arriba se queda SIN @media a propósito (esa parte SÍ necesita ganarle al `display:none` base de
   `.native-float-pill` en escritorio, ver comentario grande más arriba de este archivo). */
@media (min-width:880px) {
  .mail-list-toolbar .mail-search-wrap {
    background:var(--surface-1); border:1px solid var(--divider); border-radius:8px;
    padding:0 8px; height:32px;
  }
}
.mail-search-ico { flex-shrink:0; color:var(--text-muted); display:flex; }
.mail-search-input {
  flex:1 1 auto; min-width:0; border:none; background:transparent; color:var(--text);
  /* GROUP J.3 (F1 close-out audit, IOS-3): ≥16px evita el auto-zoom de iOS al enfocar (mismo
     criterio que .larry-ov-input de css/app.css); ≥880px recupera la densidad de escritorio abajo. */
  font-size:16px; font-family:inherit; height:100%;
  /* F1.26: la píldora flotante <880px es más angosta que el buscador de escritorio (deja hueco
     para el FAB al lado, ver .native-float-pill en css/native-materials.css) — sin esto el
     placeholder largo se cortaba a media palabra en vez de mostrar "…". Universal (no solo móvil):
     nunca estorba, un input siempre puede quedarse sin espacio para su placeholder completo. */
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.mail-search-input:focus { outline:none; }
@media (min-width:880px) { .mail-search-input { font-size:13px; } }
.mail-search-clear {
  flex-shrink:0; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:6px; background:none; color:var(--text-muted); cursor:pointer;
}
.mail-search-clear:hover { background:var(--surface-2); color:var(--text); }
.mail-search-clear:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }

/* ── Pestañas Prioritarios/Otros (D27/D66, B8) ───────────────────────── */
.mail-tabs { display:flex; gap:4px; padding:6px 10px 0; border-bottom:1px solid var(--divider); flex-shrink:0; }
.mail-tab {
  border:none; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:600;
  padding:7px 10px; cursor:pointer; border-radius:8px 8px 0 0; font-family:inherit;
}
.mail-tab:hover { background:var(--row-hover); color:var(--text-2); }
.mail-tab:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
.mail-tab.is-active { color:var(--text); box-shadow:inset 0 -2px 0 var(--brand-primary, #C7F000); }

.mail-rows { flex:1 1 auto; overflow-y:auto; }
/* Gestos nativos (queja real del usuario: "no tiene gestos") — swipe horizontal tipo Mail.app/
   Gmail: `.mail-row` pasa a ser el contenedor recortado (position:relative+overflow:hidden) con
   2 tiras de acciones ABSOLUTAS debajo (izquierda=Archivar, derecha=Posponer/Eliminar, ver más
   abajo bajo `pointer:coarse`) y `.mail-row-swipe-content` es el envoltorio que de verdad se
   desliza (transform:translateX, js/mail.js#wireRowSwipe) — hereda el display:flex/gap/padding
   que antes tenía `.mail-row` directamente, y necesita un `background` OPACO propio para tapar
   las tiras de abajo mientras no se ha deslizado nada (por eso hover/selected/open también se
   movieron aquí: el color de estado tiene que viajar CON el contenido que se desliza). En
   `pointer:fine` (mouse/desktop) nada de esto se activa — las tiras quedan `display:none` (ver
   abajo) y el resultado visual es IDÉNTICO al de antes. */
.mail-row {
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--divider);
  cursor:pointer;
}
.mail-row-swipe-content {
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px;
  background:var(--surface-0);
  position:relative; z-index:1;
}
.mail-row:hover       .mail-row-swipe-content { background:var(--row-hover); }
/* BUG REAL en vivo (2026-07-15, ver comentario completo junto a --row-selected-opaque en
   css/tokens-productivity.css): --row-selected normal mezcla sobre `transparent` y deja ver las
   tiras de swipe (Posponer/Eliminar, fondo sólido) que viven DETRÁS de este elemento en touch —
   un tap que solo selecciona/abre la fila las hacía aparecer sin ningún gesto de arrastre. Versión
   OPACA del mismo tinte, mezclada sobre --surface-0 en vez de transparent. */
.mail-row.is-selected .mail-row-swipe-content { background:var(--row-selected-opaque, var(--row-selected)); }
.mail-row.is-open     .mail-row-swipe-content { background:var(--row-selected-opaque, var(--row-selected)); }
/* SEGUNDA VUELTA (2026-07-15, confirmado con captura real donde AMBOS lados — Posponer Y
   Eliminar — se veían a la vez, algo que un swipe genuino nunca produce: un swipe revela UN
   lado). `:hover` tiene el MISMO problema que is-selected/is-open de arriba, pero no se había
   tocado porque en un mouse real nunca coexiste con las tiras (que solo existen bajo
   pointer:coarse) — el hueco era el "sticky hover" de iOS Safari/algunos WebView de Android: un
   tap deja el estado :hover pegado en un elemento con handler de click, sin puntero de precisión
   real de por medio. SOLO se sobreescribe aquí, dentro de pointer:coarse — en mouse de escritorio
   --row-hover (transparente) se queda exactamente igual que siempre, es el comportamiento
   correcto ahí. */
@media (pointer:coarse) {
  .mail-row:hover .mail-row-swipe-content { background:var(--row-hover-opaque, var(--row-hover)); }
}
/* El `<label>` envolvente separa el tamaño VISUAL del checkbox (18px, fijo) del área táctil
   (44px en móvil, ver regla dentro del @media de abajo) — un `<input type="checkbox">` sin
   `appearance:none` es un control NATIVO del sistema operativo: ponerle min-width/min-height
   directo (como se hacía antes) infla el widget completo a ese tamaño, no solo el área de toque
   (bug real reportado por el usuario con capturas de iPhone Y Mac Safari: casillas en blanco
   gigantes en cada fila de Correo). Un primer intento (envolver en `<label>` sin más) arregló
   Chrome pero NO Safari — confirmado con capturas reales en ambos: Safari tiene su propio criterio
   nativo para dimensionar `<input type="checkbox">` que ignora la separación de tamaños del
   `<label>`. Fix definitivo: `appearance:none` + checkbox dibujado 100% con CSS (borde+radio
   propios, sin depender de cómo cada motor renderiza el control nativo) — mismo tamaño garantizado
   en cualquier navegador. El `<label>` se conserva para el área táctil de 44px en móvil (clic en
   cualquier parte del label activa el input por semántica nativa de HTML, sin JS extra). */
.mail-row-check-wrap { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }
/* Especificidad (0,2,0) a propósito — le gana a `input[type="checkbox"]{min-width:22px;
   min-height:22px}` de css/app.css:2969, (0,1,1), que si no ganaría y dejaría el checkbox en 22px
   en vez de los 18px de diseño (mismo patrón de bug de especificidad ya documentado en este mismo
   archivo para IOS-2/AND-1, ver más abajo). */
.mail-row-check.mail-row-check {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px; min-width:18px; min-height:18px; margin-top:3px; flex-shrink:0;
  border:1.5px solid var(--text-muted,#8a8a8a); border-radius:5px;
  background:var(--surface-1,transparent);
  cursor:pointer; display:inline-block; position:relative;
}
.mail-row-check.mail-row-check:checked {
  background:var(--brand-primary,#C7F000); border-color:var(--brand-primary,#C7F000);
}
.mail-row-check.mail-row-check:checked::after {
  content:''; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border:solid var(--surface-0,#fff); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.mail-row-star, .mail-row-fav {
  width:22px; height:22px; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:6px; cursor:pointer;
  color:var(--text-muted); line-height:1;
}
.mail-row-star svg, .mail-row-fav svg { display:block; }
.mail-row-star:hover, .mail-row-fav:hover { background:var(--surface-2); }
.mail-row-star:focus-visible, .mail-row-fav:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
.mail-row-star.is-flagged{ color:var(--warn); }
.mail-row-star.is-flagged svg{ fill:currentColor; }
/* UX-6: el marcador de favorito solo se ve al pasar el mouse/foco (o si ya está anclado) — evita
   ruido visual permanente en cada fila por una acción secundaria. */
.mail-row-fav { opacity:0; }
.mail-row:hover .mail-row-fav, .mail-row:focus-within .mail-row-fav, .mail-row-fav.is-fav { opacity:1; }
.mail-row-fav.is-fav { color:var(--warn); }
.mail-row-fav.is-fav svg { fill:currentColor; }
.mail-row-main { flex:1 1 auto; min-width:0; }
.mail-row-top  { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.mail-row-from { font-size:13.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mail-row.is-unread .mail-row-from,
.mail-row.is-unread .mail-row-subject { font-weight:var(--row-unread-weight); color:var(--text); }
.mail-row-date    { font-size:12px; color:var(--text-muted); flex-shrink:0; white-space:nowrap; }
.mail-row-subject { font-size:13px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-row-snippet { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-row-count {
  flex-shrink:0; font-size:12px; font-weight:700; color:var(--text-muted);
  background:var(--surface-2); border-radius:999px; padding:0 7px; margin-left:6px;
}
.mail-row-acct-chip { flex-shrink:0; font-size:12px; color:var(--text-muted); margin-left:6px; }

/* ── Gestos: tiras de acción reveladas por swipe (js/mail.js#wireRowSwipe) ───────────────────────
   Ocultas por completo salvo en touch real (`pointer:coarse`) — en mouse/desktop no existen
   visualmente y `.mail-row-swipe-content` nunca se traslada (no se conecta ningún listener ahí,
   ver SWIPE_ENABLED en js/mail.js), así que el layout de escritorio queda IDÉNTICO al de antes. */
.mail-row-swipe-left, .mail-row-swipe-right { display:none; }
@media (pointer:coarse) {
  .mail-row-swipe-content { transition:transform .18s ease-out; touch-action:pan-y; will-change:transform; }
  .mail-row-swipe-left, .mail-row-swipe-right {
    display:flex; position:absolute; inset-block:0; z-index:0;
  }
  .mail-row-swipe-left  { left:0; }
  .mail-row-swipe-right { right:0; }
  .mail-row-swipe-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    width:76px; border:none; color:#fff; font-family:inherit;
    font-size:10.5px; font-weight:700; line-height:1.15; text-align:center;
    padding:0 6px; cursor:pointer;
  }
  .mail-row-swipe-btn svg { display:block; }
  /* Mismos verbos/color que ya usa el resto de Correo para estas 3 acciones — Archivar=info (mail-
     assign-pill-open ya usa este mismo azul), Posponer=warn (mail-assign-pill-pending), Eliminar=
     rojo destructivo estándar del proyecto (mismo que .mail-rules-del:hover más abajo). */
  .mail-row-swipe-archive { background:var(--info, #3b82f6); }
  .mail-row-swipe-snooze  { background:var(--warn, #b45309); }
  .mail-row-swipe-delete  { background:var(--danger, #dc2626); }
}
/* B8: hilo que acaba de reaparecer tras un snooze vencido (fuera de la vista Pospuestos) */
.mail-row-was-snoozed { display:inline-flex; margin-left:6px; color:var(--text-muted); vertical-align:middle; }
/* ── Badge "Pospuesto hasta…" + botón quitar (vista Pospuestos, B8) ─────────────────────────── */
.mail-row-snooze-line { margin-top:4px; }
.mail-row-unsnooze {
  display:inline-flex; align-items:center; gap:4px; border:1px solid var(--divider); background:var(--surface-1);
  color:var(--text-muted); font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 8px; cursor:pointer; font-family:inherit;
}
.mail-row-unsnooze:hover { background:var(--surface-2); color:var(--text); }
.mail-row-unsnooze:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
.mail-load-more { display:block; width:calc(100% - 20px); margin:10px; }
.mail-list-sentinel { height:1px; }
/* UX-2: fila real interactiva por teclado (role=button+tabindex en JS) — foco visible propio. */
.mail-row:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
/* UX-4: estado de error de la lista, distinto del vacío genuino (mismo layout, icono/copy propios). */
.mail-list-error .mail-ico { color:var(--warn); }

.mail-list-empty, .mail-detail-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:40px 20px; text-align:center; color:var(--text-muted); min-height:220px;
}
.mail-list-empty .mail-ico, .mail-detail-empty .mail-ico { font-size:34px; line-height:1; }

/* ── Panel de detalle (D65: hilo con N mensajes) ─────────────────── */
/* UX real (2026-07-14): asunto+barra de asignación+acciones quedan FIJOS arriba del panel de
   detalle mientras solo los mensajes de abajo scrollean — mismo patrón que Outlook/Gmail. Vive
   FUERA de `.mail-thread-messages` (que es la que scrollea, ver css/mail.css:40-51) — no depende
   de `position:sticky` ni de la altura real de varios ancestros. */
.mail-thread-sticky {
  flex-shrink:0;
  background:var(--surface-0); border-bottom:1px solid var(--divider);
}
.mail-thread-hd {
  padding:14px 20px 10px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  min-width:0; /* BUG REAL (iPhone retrato, capturas del usuario, 2026-07-13): sin esto, el h2 de
    abajo se comporta como flex item con min-width:auto — su tamaño mínimo automático es el ancho
    de la palabra MÁS LARGA del asunto (min-content), no cero. Un asunto con un token largo sin
    espacios (URL, nombre de archivo, "RE:FWD:xxxxxxxxxxxxxxxxxxxxx") empuja este contenedor (y
    con él TODO `.mail-thread-sticky`/`.mail-detail-pane`/`.mail-body`) más ancho que el viewport,
    generando overflow horizontal real de la página — no es un recorte visual, es contenido que
    de verdad se sale y solo se ve completo haciendo scroll lateral. */
}
.mail-thread-subject {
  font-size:17px; font-weight:800; color:var(--text); margin:0;
  min-width:0; overflow-wrap:break-word; word-break:break-word; /* deja que el propio texto se
    parta dentro del ancho disponible en vez de forzar el contenedor a crecer (ver comentario
    arriba en .mail-thread-hd) — mismo bug, la mitad del arreglo vive en el padre (min-width:0
    del flex container) y la otra mitad aquí (que el texto pueda romperse dentro de una palabra
    larga, no solo entre palabras). */
}
.mail-msg { border-bottom:1px solid var(--divider); padding:14px 20px; }
.mail-msg-hd { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px; }
.mail-msg-from { font-size:13.5px; font-weight:700; color:var(--text); }
.mail-msg-to   { font-size:12px; color:var(--text-muted); }
.mail-msg-meta { font-size:12px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.mail-msg-actions { display:flex; gap:2px; flex-shrink:0; }
.mail-msg-ibtn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:7px; background:transparent; color:var(--text-2);
  cursor:pointer;
}
.mail-msg-ibtn:hover { background:var(--surface-2); color:var(--text); }
.mail-msg-ibtn:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
.mail-msg-ibtn.is-flagged { color:var(--warn); }
.mail-msg-ibtn.is-flagged svg { fill:currentColor; }
/* F2.14 (D74): flag 🚩 correo→tarea. Emoji en vez de SVG a propósito — mismo lenguaje visual del
   producto (D74 lo llama "flag 🚩") y visualmente distinto de .mail-msg-flag (SVG 'star', feature
   de "Destacar" preexistente, sin relación con tareas). is-task-linked = pendiente (rojo/naranja de
   alerta, como .is-flagged); is-task-done = atenuado (ya no reclama atención — "completar quita el
   flag"). */
.mail-msg-task { width:auto; min-width:30px; padding:0 8px; gap:5px; font-size:13px; }
.mail-msg-task.is-task-linked { color:var(--danger, #dc2626); font-weight:700; }
.mail-msg-task.is-task-done { opacity:.55; }
.mail-msg-task-label { font-size:11.5px; font-weight:700; white-space:nowrap; }
/* Resalta el mensaje exacto al llegar desde el link vivo de una tarea (js/task-flag.js →
   MailUI.openMessage) — mismo tono que .is-flagged, transición suave, se quita sola. */
.mail-msg.mail-msg-highlight { animation:mail-msg-flash 2.2s ease-out; }
@keyframes mail-msg-flash {
  0%   { background:color-mix(in srgb, var(--brand-primary, #C7F000) 22%, transparent); }
  100% { background:transparent; }
}
.mail-msg-body-wrap { position:relative; margin-top:6px; }
.mail-msg-iframe { width:100%; border:none; display:block; min-height:60px; max-height:70vh; background:var(--surface-0); border-radius:8px; }
.mail-imgblock-bar {
  display:flex; align-items:center; gap:8px; padding:7px 12px;
  background:var(--surface-2); border:1px solid var(--divider); border-radius:8px;
  margin-bottom:8px; font-size:12.5px; color:var(--text-2);
  /* BUG REAL (iPhone retrato, capturas del usuario, 2026-07-13): faltaba flex-wrap (a diferencia
     de `.mail-unsub-bar`, la barra hermana de F1.24 que SÍ ya lo tenía) — con flex-wrap:nowrap
     (default) el botón "Descargar imágenes externas" (flex-shrink:0, ancho fijo por su texto)
     nunca cede, y en ~390px de ancho real no cabe junto al texto del aviso en una sola línea:
     el renglón entero se desborda y arrastra a TODO el mensaje/hilo más ancho que el viewport
     (overflow horizontal de página real, confirmado con Playwright en 390px antes de este fix).
     Mismo arreglo que ya usa `.mail-unsub-bar` — el botón simplemente baja a su propia línea. */
  flex-wrap:wrap;
}
.mail-imgblock-bar span { min-width:0; }
.mail-imgblock-bar button { margin-left:auto; flex-shrink:0; }
.mail-nobody {
  padding:16px; font-size:13px; line-height:1.5; color:var(--text-muted);
  background:var(--surface-1); border:1px dashed var(--divider); border-radius:10px;
}
.mail-nobody-reconnect { border-style:solid; border-color:var(--warn,#e0a800); }
.mail-nobody-reconnect .btn { margin-top:10px; }

/* F1.24 (Anti-spam de Larry, B1): aviso "posible correo masivo" + botón "Darse de baja" — mismo
   tono visual que .mail-imgblock-bar (barra discreta arriba del cuerpo, no un modal). */
.mail-unsub-wrap:empty { display:none; }
.mail-unsub-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 12px;
  background:var(--surface-2); border:1px solid var(--divider); border-radius:8px;
  margin-bottom:8px; font-size:12.5px; color:var(--text-2);
}
.mail-spam-badge { display:inline-flex; align-items:center; gap:5px; color:var(--warn); font-weight:700; }
.mail-unsub-btn { margin-left:auto; flex-shrink:0; font-size:12.5px; }

/* ── F2.4 (B3): tarjeta iTIP entrante (Aceptar/Rechazar/Quizá) — vive FUERA del iframe
   sandboxed (D11: es UI de Aluna, no contenido del correo), arriba del cuerpo del mensaje. ── */
.mail-itip-wrap:empty { display:none; }
.mail-itip-card {
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin:0 0 8px;
  background:var(--surface-1); border:1px solid var(--divider); border-radius:10px;
}
.mail-itip-card.mail-itip-cancelled { background:var(--surface-2); }
.mail-itip-ico { flex-shrink:0; color:var(--brand-primary,#C7F000); margin-top:1px; }
.mail-itip-cancelled .mail-itip-ico { color:var(--warn); }
.mail-itip-body { min-width:0; flex:1; }
.mail-itip-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:3px; }
.mail-itip-meta {
  display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); margin-top:2px;
}
.mail-itip-note { font-size:12.5px; color:var(--text-2); margin-top:2px; }
.mail-itip-actions { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.mail-itip-actions .btn { font-size:12.5px; }
.mail-itip-answered {
  display:flex; align-items:center; gap:5px; margin-top:8px; font-size:12.5px; font-weight:700;
  color:var(--text); background:var(--surface-2); padding:5px 10px; border-radius:7px; width:fit-content;
}

/* ── Conectar cuenta (empty state) ───────────────────────────────── */
.mail-connect {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-height:320px; gap:14px; padding:40px 20px; text-align:center;
}
.mail-connect .mail-ico { font-size:40px; line-height:1; }
.mail-connect-title { font-size:17px; font-weight:800; color:var(--text); margin:0; }
.mail-connect-desc  { font-size:13px; color:var(--text-muted); max-width:420px; line-height:1.55; margin:0; }
.mail-connect-list  { display:flex; flex-direction:column; gap:8px; width:100%; max-width:380px; }
.mail-connect-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border:1px solid var(--divider); border-radius:10px; background:var(--surface-1);
  min-height:44px;
}
.mail-connect-row-info { min-width:0; text-align:left; }
.mail-connect-row-email{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-connect-row-prov { font-size:12px; color:var(--text-muted); }
.mail-connect-shared-link {
  border:none; background:none; color:var(--text-muted); font-size:12.5px; font-weight:600;
  cursor:pointer; padding:6px 10px; border-radius:8px; display:inline-flex; align-items:center; gap:5px;
}
.mail-connect-shared-link:hover { color:var(--text); background:var(--row-hover); }
.mail-connect-shared-link:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }

/* ── Buzones compartidos de la org (D4/D55, F1.20/B12) ───────────────── */
.mail-shared-chip { flex-shrink:0; display:flex; align-items:center; color:var(--text-muted); }
.mail-tree-add-shared { border-top:1px solid var(--divider); margin-top:8px; padding-top:12px; color:var(--text-muted); }
.mail-tree-add-shared:hover { color:var(--text); }

.mail-assign-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 20px; border-bottom:1px solid var(--divider); background:var(--surface-1);
}
.mail-assign-bar-loading { font-size:12.5px; color:var(--text-muted); }
.mail-assign-lbl { font-size:12px; color:var(--text-muted); }
.mail-assign-sel {
  font-size:12.5px; padding:5px 6px; border-radius:7px; border:1px solid var(--divider);
  background:var(--surface-0); color:var(--text); font-family:inherit; max-width:200px;
}
.mail-assign-sel:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-1px; }
.mail-assign-pill { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
/* GROUP I (F1 close-out audit, CAB-4/UXI-4): tokens semánticos --info/--warn/--ok de css/app.css
   (mismos que --*-bg ya usan diálogos/tarjetas de estado) en vez de hex quemados — funcionan en
   claro y oscuro sin tocar nada más. Fallback = el hex original, por si un tema no los define. */
.mail-assign-pill-open     { background:var(--info-bg, color-mix(in srgb, #3b82f6 20%, transparent)); color:var(--info, #3b82f6); }
.mail-assign-pill-pending  { background:var(--warn-bg, color-mix(in srgb, #eab308 25%, transparent)); color:var(--warn, #b45309); }
.mail-assign-pill-resolved { background:var(--ok-bg, color-mix(in srgb, #22c55e 22%, transparent)); color:var(--ok, #15803d); }
.mail-row-assign-line { display:flex; align-items:center; gap:6px; margin-top:4px; }
.mail-row-assign-who { font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-assign-filter-sel {
  flex-shrink:0; font-size:12px; padding:4px 6px; border-radius:7px; border:1px solid var(--divider);
  background:var(--surface-1); color:var(--text-2); font-family:inherit;
}

/* ── Toolbar de la app (reusa .yt-toolbar/.yt-tb-btn de tokens-productivity.css) ─ */
.mail-app-toolbar { flex-shrink:0; }
.mail-back-btn { display:none; }
.mail-back-label { display:none; }
.mail-tree-toggle-btn { display:none; } /* solo <880px (UX-1), ver media query abajo */
/* §7.2 (Fase 3): título del header móvil — oculto en escritorio a propósito (ver comentario en
   js/mail.js donde se inserta), visible solo <880px vía la media query de más abajo. */
.mail-toolbar-title { display:none; }

/* ── Hoja móvil del árbol de cuentas/carpetas (UX-1) ──────────────────────────────
   Mismo lenguaje visual que .bottom-sheet-panel de css/app.css (handle, esquinas
   redondeadas arriba, backdrop, slide-up, safe-area) — parametrizado al umbral
   879px que YA usa este módulo (el .bottom-sheet global de la nav usa 768px, que
   no cubre 769-879px donde el split de mail.css también colapsa a un panel). */
.mail-tree-sheet {
  display:none;
}
/* BUG REAL (reportado en vivo con capturas de iPhone, 2026-07-13): 879px es un umbral pensado en
   RETRATO. En HORIZONTAL varios iPhones grandes MIDEN MÁS que eso de ancho lógico — iPhone 14/15/
   15 Pro Max: 926×428/932×430 — así que a esos anchos esta media query NO aplicaba y el layout caía
   al grid de escritorio de 3 columnas apretado en ~900px reales, forzando a Safari a mostrar su
   lupa de zoom nativa para poder tocar cualquier botón (el usuario tuvo que hacer pinch-zoom para
   usar "Responder con Larry"). Segunda condición añadida vía OR (coma = lista de media queries):
   "viewport ancho pero corto" — `(max-height:500px) and (pointer:coarse)` — cubre el caso de
   landscape de teléfono real sin atrapar tablets/laptops en landscape normal (alto típico >600px,
   y en laptops híbridos el puntero primario suele seguir siendo mouse/pointer:fine). Verificado con
   Playwright en los 6 anchos reales de la ronda: 390×844/428×926 (retrato, ya cubiertos por
   max-width) y 844×390/926×428/932×430 (horizontal, cubiertos ahora por la 2ª condición) — en
   NINGUNO de los 6 aparece ya el grid de 3 columnas.
   PC-1: `and (max-width:960px)` en la 2ª rama — sin tope de ancho, un viewport CUALQUIERA de ancho
   con alto CSS ≤500px y puntero coarse (p.ej. un 2-en-1 Windows/Surface con touchscreen en ventana
   corta no maximizada) disparaba este layout de teléfono sin serlo. 960px cubre con margen los 6
   anchos de landscape real de iPhone de arriba (máx. 932px) sin dejar pasar una ventana ancha. */
@media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) {
  .mail-tree-sheet {
    display:block;
    position:fixed; inset:0; z-index:calc(var(--z-sidebar, 900) + 20);
    pointer-events:none; opacity:0;
    transition:opacity .2s ease;
  }
  .mail-tree-sheet.open { pointer-events:auto; opacity:1; }
  .mail-tree-sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
  .mail-tree-sheet-panel {
    position:absolute; bottom:0; left:0; right:0; max-height:78vh; overflow-y:auto;
    /* Liquid Glass (queja real del usuario: "no hay líquido glass") — MISMO patrón exacto que
       `.bottom-sheet-panel` de css/app.css (material translúcido con blur+saturate en vez de
       superficie sólida opaca, incluido el fallback @supports para navegadores sin backdrop-filter
       más abajo) — solo se tradujo el token de `--bg-surface` (namespace de app.css) a `--surface-0`
       (namespace de tokens-productivity.css, el que ya usa TODO mail.css). Este es el tratamiento
       DEFAULT (aplica también como fallback si `data-os` no llegó a detectarse) y el explícito de
       `[data-os="ios"]` — "Liquid Glass" es un lenguaje visual específico de iOS 18+, ver override
       de Material 3 para `[data-os="android"]` justo abajo (pedido explícito del usuario: "haz lo
       mismo con Android/Material 3 para que sea consistente" — M3 usa elevación real vía sombra +
       tinte de superficie, NO vidrio esmerilado, son lenguajes distintos a propósito). */
    background:color-mix(in srgb, var(--surface-0) 88%, transparent);
    -webkit-backdrop-filter:blur(24px) saturate(1.7);
    backdrop-filter:blur(24px) saturate(1.7);
    border-radius:20px 20px 0 0;
    padding:0 0 env(safe-area-inset-bottom, 0px);
    transform:translateY(100%);
    transition:transform .25s cubic-bezier(.32,0,.67,0);
    box-shadow:0 -4px 32px rgba(0,0,0,.18);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .mail-tree-sheet-panel { background:var(--surface-0); }
  }
  /* Material 3 — elevación real (fondo sólido con tinte de marca + sombra), NO blur del contenido
     de atrás. `--brand-primary` es el mismo tinte que ya usa `--row-selected` (color-mix) en
     tokens-productivity.css — consistente con el resto de la paleta "surface-tint" del proyecto,
     sin inventar un token nuevo. Elevación nivel-3 aprox (M3 bottom sheet): 2 sombras apiladas,
     una de contacto (contorno nítido, opacidad alta) y una de difusión (blur grande, opacidad baja). */
  /* AND-6 histórico + auditoría Cursor PLAN_MAIL_NATIVE_RESPONSIVE.md §1.1(5): este panel es una
     reimplementación LOCAL propia de F1.25, previa al sistema compartido — se quedó en el tinte
     original (6%) mientras `css/native-materials.css` ya subió a 14% (AND-2, alineado con el
     precedente `--row-selected` del proyecto). Mismo valor aquí para no ser la única superficie
     Android del módulo con un tinte perceptiblemente más sutil que el resto. */
  :root[data-os="android"] .mail-tree-sheet-panel {
    background:color-mix(in srgb, var(--brand-primary, #C7F000) 14%, var(--surface-0));
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 -1px 3px rgba(0,0,0,.3), 0 -8px 16px -4px rgba(0,0,0,.22);
  }
  .mail-tree-sheet.open .mail-tree-sheet-panel { transform:translateY(0); }
  .mail-tree-sheet-handle { width:36px; height:4px; border-radius:2px; background:var(--divider); margin:12px auto 8px; }
  .mail-tree-sheet-title {
    padding:0 20px 12px; font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.6px; color:var(--text-muted); border-bottom:1px solid var(--divider);
  }
  /* .mail-tree en general queda display:none <880px (regla de abajo, panel único a la vez) —
     esta variante compuesta tiene más especificidad y la reactiva DENTRO de la hoja móvil. */
  .mail-tree-sheet-panel .mail-tree { display:block; border-right:none; padding:8px 0; }
}

/* ── Responsive: <880px (o landscape angosto de teléfono, ver comentario arriba de .mail-tree-sheet)
   colapsa a UN panel a la vez (mismo umbral base que .yt-split) — PC-1: `and (max-width:960px)`,
   mismo motivo que el bloque de arriba. ── */
@media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) {
  .mail-body { grid-template-columns:1fr; }
  .mail-tree, .mail-list-pane, .mail-detail-pane { display:none; }
  .mail-body[data-view="tree"]   .mail-tree        { display:block; }
  .mail-body[data-view="list"]   .mail-list-pane   { display:flex; }
  .mail-body[data-view="detail"] .mail-detail-pane { display:flex; } /* flex-column, no block — ver comentario arriba de .mail-detail-pane: necesita mantener el encabezado fijo separado del scroll de mensajes también en móvil */
  /* F1.26 (declutter del header — 3ª queja consecutiva del usuario con capturas de iPhone real,
     "el header sigues sin hacerme caso de que no es iPhone"): ANTES ambos se mostraban SIEMPRE
     <880px sin importar la vista (el back-button aparecía incluso navegando la lista, sin ningún
     propósito) — ahora cada uno solo aparece cuando tiene un uso real: back en detalle (volver a
     la lista, como "‹ Bandeja" de Mail), carpetas en lista/árbol (única forma de cambiar de cuenta/
     carpeta, UX-1). `:has()` sobre el ancestro común `.mail-shell` porque `#mail-toolbar` y
     `#mail-body` son HERMANOS en el DOM — el combinador `~` no alcanza hacia atrás, así que no se
     puede escribir `.mail-body[data-view=detail] ~ #mail-toolbar #mail-back` directamente. Mismo
     patrón `:has()` que ya usa `.main-inner:has(#tab-mail-soon...)` en este mismo archivo. */
  .mail-shell:has(.mail-body[data-view="detail"]) .mail-back-btn { display:inline-flex; }
  .mail-shell:has(.mail-body[data-view="list"]) .mail-tree-toggle-btn,
  .mail-shell:has(.mail-body[data-view="tree"]) .mail-tree-toggle-btn { display:inline-flex; }
  /* §7.2 (Fase 3): título centrado del header móvil — flex:1 para ocupar el hueco entre el botón
     de la izquierda (back o carpetas, nunca ambos) y el borde derecho del toolbar (vacío en móvil,
     el resto de los botones de escritorio están ocultos, ver bloque de abajo). min-width:0 +
     ellipsis por si algún día el título deja de ser un literal corto fijo ("Correo"). */
  .mail-toolbar-title {
    display:block; flex:1 1 auto; min-width:0; text-align:center;
    font-family:var(--brand-font-body); font-size:15px; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0;
  }
  /* §8.1/8.2 PLAN_MAIL_NATIVE_RESPONSIVE.md: "Android no debe recibir iOS con otro color" — top
     app bar M3 lleva el título alineado a la izquierda, pegado al ícono líder (☰), no centrado
     como una navigation bar de iOS. El ícono en sí (folder→menu) lo decide js/mail.js#mount() al
     armar el HTML — un glifo por plataforma no se puede resolver solo con CSS. */
  :root[data-os="android"] .mail-toolbar-title { text-align:left; margin-left:4px; }
  /* §7.3/§8.5 PLAN_MAIL_NATIVE_RESPONSIVE.md: Prioritarios/Otros usa "segmented control" iOS
     (contenedor-píldora con un thumb sólido que se desliza) — NO el underline de M3 que ya tenía
     `.mail-tab.is-active` (ese SÍ es correcto para Android/M3 tal cual, sin rama propia). Reusa
     las mismas clases `.mail-tabs`/`.mail-tab` (sin renombrar): tienen listeners de clic ya
     cableados en js/mail.js — una clase `mail-segmented--ios` nueva solo duplicaría el HTML sin
     necesidad, aquí basta con el atributo de plataforma que ya existe en <html>. Solo <880px:
     en escritorio esta fila ya se ve bien con el estilo underline compartido. */
  :root[data-os="ios"] .mail-tabs {
    border-bottom:none; gap:2px; padding:6px 10px; margin:0 10px 4px;
    background:var(--surface-2,var(--bg-raised)); border-radius:9px;
  }
  :root[data-os="ios"] .mail-tab {
    flex:1 1 0; text-align:center; border-radius:7px; padding:6px 8px;
    transition:background .15s, color .15s;
  }
  :root[data-os="ios"] .mail-tab.is-active {
    background:var(--surface-1,var(--bg-surface)); box-shadow:0 1px 3px rgba(0,0,0,.18);
  }
  /* §7.2/§7.3 (Detalle iOS): "‹ Bandeja" con texto — Android/desktop se quedan icon-only (§8.2
     Android pide `←` sin texto). `.mail-back-btn` es un `.yt-tb-btn` normal (icon+label ya lo
     sabe hacer, mismo patrón que los botones de escritorio con `.yt-tb-label`) — solo hace falta
     mostrar el span y aflojar el padding fijo de icon-button para que el texto respire. */
  :root[data-os="ios"] .mail-back-label { display:inline; margin-left:1px; }
  :root[data-os="ios"] .mail-back-btn { padding:0 10px 0 6px; gap:2px; }
  /* El resto del toolbar de escritorio (9-10 iconos apretados en una fila — la queja original) se
     reemplaza <880px por la capa flotante nueva: FAB de redactar + píldora de búsqueda + barra
     inferior de 4 acciones + hoja "Más" (ver bloque F1.26 más abajo, y css/native-materials.css
     para las clases `.native-*` compartidas). Estos botones SIGUEN existiendo en el DOM con sus
     mismos ids/listeners — los sigue usando escritorio tal cual — aquí solo se ocultan visualmente. */
  #mail-toolbar #mail-compose, #mail-toolbar #mail-refresh, #mail-toolbar #mail-mark-read,
  #mail-toolbar #mail-mark-unread, #mail-toolbar #mail-flag, #mail-toolbar #mail-snooze-menu,
  #mail-toolbar #mail-archive, #mail-toolbar #mail-delete, #mail-toolbar #mail-rules-btn,
  #mail-toolbar #mail-detect-btn, #mail-toolbar #mail-help, #mail-toolbar .yt-tb-sep,
  #mail-toolbar .yt-tb-spacer { display:none; }
  .mail-row      { min-height:44px; }
  /* §1.1(4) PLAN_MAIL_NATIVE_RESPONSIVE.md (2026-07-14): 44px es el mínimo HIG de iOS, pero
     Material 3 pide 48dp — el propio comentario de abajo documentaba las DOS normas a la vez sin
     resolver la diferencia real entre plataformas. Mismo criterio `data-os="android"` ya usado en
     todo native-materials.css/css/app.css: 44px se queda como base (iOS/desktop/fallback), 48px
     solo para Android. */
  :root[data-os="android"] .mail-row { min-height:48px; }
  /* Hallazgo IOS-2/AND-1 del panel de auditores (2026-07-13, mismo release): 32px se queda corto
     del mínimo real de toque — 44pt en HIG de Apple, 48dp en Material 3. Subido a 44px. Nota del
     propio auditor: css/app.css agregó un fallback `@media(pointer:coarse){.mail-msg-ibtn{min-
     width:44px;...}}` pero esta regla de aquí carga DESPUÉS con la MISMA especificidad — gana
     siempre esta, así que el arreglo real tenía que vivir en este archivo (confirmado).
     .mail-row-star/.mail-row-fav/.mail-msg-ibtn son `<button>` — min-width/min-height ahí solo
     agranda su caja, sin efecto visual raro. */
  .mail-row-star, .mail-row-fav, .mail-msg-ibtn { min-width:44px; min-height:44px; }
  /* BUG REAL reportado en vivo (captura de iPhone real, "cuadros blancos" en cada fila de Correo):
     `.mail-row-check` es un `<input type="checkbox">`, un elemento reemplazado nativo — ponerle
     min-width/min-height:44px directo (como se hacía antes, con el mismo criterio de arriba) no
     solo agranda el ÁREA de toque, infla el WIDGET NATIVO completo a 44×44, un cuadro gigante sin
     estilo. Fix real: min-width/min-height van en el `<label class="mail-row-check-wrap">` que
     envuelve al checkbox (index.html vía js/mail.js) — el label puede crecer libremente sin tocar
     el checkbox de adentro, que se queda en sus 18px fijos (css/mail.css, regla base), centrado
     por flex. Clic en cualquier parte del label activa el checkbox por semántica nativa de HTML. */
  .mail-row-check-wrap.mail-row-check-wrap { min-width:44px; min-height:44px; }
  .mail-row-fav { opacity:1; } /* sin hover real en touch: si ya es favorito se ve siempre; el botón en sí es alcanzable por ser táctil */
  /* Hallazgo IOS-3 del mismo panel: con el botón "Bloquear remitente" (F1.24) `.mail-msg-actions`
     pasa a 4 íconos consecutivos — 2px (valor base, para escritorio con mouse) es insuficiente en
     touch, riesgo real de tocar el botón vecino. Solo se sube AQUÍ, dentro del breakpoint móvil —
     el valor de escritorio (mouse, precisión de puntero fina) queda intacto. */
  .mail-msg-actions { gap:8px; }
  /* Liquid Glass (queja real del usuario) — SOLO la toolbar de Correo en móvil, no `.yt-toolbar`
     global (ese componente lo reusan Tareas/Agenda/etc. con su propio criterio, fuera de alcance
     de este arreglo). Mismo `color-mix`+blur+saturate que `.mail-tree-sheet-panel`/`.bottom-sheet-
     panel` de arriba — la barra de acciones dentro de un app-shell flotante sobre el contenido que
     scrollea debajo se siente como "un material", no una superficie sólida. Default/`ios` — ver
     override de Material 3 para `[data-os="android"]` justo abajo (mismo criterio documentado en
     `.mail-tree-sheet-panel`: vidrio esmerilado es un lenguaje de iOS 18+, Android usa elevación). */
  .mail-app-toolbar {
    background:color-mix(in srgb, var(--surface-1) 82%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    backdrop-filter:blur(20px) saturate(1.6);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .mail-app-toolbar { background:var(--surface-1); }
  }
  /* Material 3 — top app bar con elevación real (tinte de superficie + sombra de contacto hacia
     abajo, sin blur), mismo criterio que `.mail-tree-sheet-panel` de arriba. §1.1(5) PLAN_MAIL_
     NATIVE_RESPONSIVE.md (Fase 3): 14% (antes 6%) — esta era la 2ª de 3 apariciones del mismo
     tinte desalineado en este archivo; la 1ª (.mail-tree-sheet-panel) ya se había corregido en la
     Fase 1 de este mismo plan, esta se había quedado atrás por descuido. Alinea con el precedente
     del proyecto (--row-selected en tokens-productivity.css: 14%/18% claro-oscuro). */
  :root[data-os="android"] .mail-app-toolbar {
    background:color-mix(in srgb, var(--brand-primary, #C7F000) 14%, var(--surface-1));
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 1px 2px rgba(0,0,0,.25), 0 3px 8px -2px rgba(0,0,0,.16);
  }
  /* Liquid Glass, continuación — `.mail-unsub-bar` (F1.24, pedida explícitamente) + su gemela
     `.mail-imgblock-bar` (mismo lenguaje visual, misma familia de "barra discreta arriba del
     cuerpo del mensaje" — dejarla sólida mientras su hermana es translúcida se vería inconsistente
     dentro del mismo hilo). SOLO en móvil: en escritorio ambas siguen con `--surface-2` sólido tal
     cual estaban (no es una superficie flotante sobre contenido ahí, es una fila más del hilo). */
  .mail-unsub-bar, .mail-imgblock-bar {
    background:color-mix(in srgb, var(--surface-2) 78%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);
    backdrop-filter:blur(14px) saturate(1.5);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .mail-unsub-bar, .mail-imgblock-bar { background:var(--surface-2); }
  }
  /* Material 3 — tarjeta de superficie tintada ("surface-container") + sombra sutil nivel-1, en
     vez de vidrio esmerilado (mismo criterio de arriba). §1.1(5) PLAN_MAIL_NATIVE_RESPONSIVE.md
     (Fase 3): 14% (antes 5%) — 3ª aparición del mismo tinte desalineado, mismo motivo que
     .mail-app-toolbar arriba. */
  :root[data-os="android"] .mail-unsub-bar, :root[data-os="android"] .mail-imgblock-bar {
    background:color-mix(in srgb, var(--brand-primary, #C7F000) 14%, var(--surface-2));
    -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
  }

  /* ── F1.26 — capa de acciones móvil: FAB "Redactar" + píldora de búsqueda flotantes (estado por
     defecto, "explorando la bandeja" — mismo lenguaje que Mail/Recordatorios de iOS, captura real
     del usuario) VS barra de 4 acciones (leyendo un hilo, o con selección múltiple activa: ahí SÍ
     hay algo concreto sobre lo que actuar de inmediato, como el "modo edición" de Mail/Material 3).
     Las clases `.native-fab`/`.native-float-pill`/`.native-bottom-toolbar` (forma/blur-o-elevación/
     posición/sombra) viven en css/native-materials.css — aquí SOLO se decide CUÁNDO mostrar cada
     una, que es estado específico de Correo. Selectores por ID (`#mail-bottom-actions` etc., no la
     clase compartida) a propósito: así la especificidad de "cuándo" le gana SIEMPRE a la clase
     compartida sin importar el orden de carga entre mail.css y native-materials.css. */
  #mail-bottom-actions { display:none; }
  .mail-shell:has(.mail-body[data-view="detail"]) #mail-bottom-actions,
  .mail-shell:has(#mail-body.has-selection) #mail-bottom-actions { display:flex; }
  .mail-shell:has(.mail-body[data-view="detail"]) #mail-fab-compose,
  .mail-shell:has(#mail-body.has-selection) #mail-fab-compose { display:none; }
  /* IOS-1 (panel de auditores, CONFIRMADO): en el estado POR DEFECTO (bandeja en lista, sin hilo
     abierto, sin selección) ningún botón visible abría "Más" — Actualizar/Reglas/Personas
     detectadas/Ayuda quedaban inalcanzables (contraste: Agenda deja su trigger "···" visible
     incondicionalmente en la barra superior, js/agenda.js#ag-more-trigger). Mostrar la barra
     COMPLETA (`.native-bottom-toolbar`) también aquí chocaría con la píldora de búsqueda — mismo
     `position:fixed`/z-index/footprint horizontal que `.mail-search-wrap.native-float-pill`, la
     barra (más tardía en el DOM) la taparía visualmente. En vez de eso: el contenedor se vuelve
     `display:contents` en este estado (sin caja/fondo/blur propios — el material de
     `.native-bottom-toolbar` NO se pinta aquí) y SOLO `#mail-ba-more` se posiciona como una
     segunda burbuja circular apilada arriba del FAB de redactar (mismo lenguaje que `.native-fab`,
     self-contained aquí para no reinventar/tocar css/native-materials.css) — Marcar-leído/
     Archivar/Eliminar se ocultan (no tienen target sin hilo/selección); Actualizar sigue
     alcanzable un toque más adentro, dentro de la propia hoja "Más" (`#mail-more-refresh`). */
  .mail-shell:not(:has(.mail-body[data-view="detail"])):not(:has(#mail-body.has-selection)) #mail-bottom-actions {
    display:contents;
  }
  .mail-shell:not(:has(.mail-body[data-view="detail"])):not(:has(#mail-body.has-selection)) #mail-ba-mark-read,
  .mail-shell:not(:has(.mail-body[data-view="detail"])):not(:has(#mail-body.has-selection)) #mail-ba-archive,
  .mail-shell:not(:has(.mail-body[data-view="detail"])):not(:has(#mail-body.has-selection)) #mail-ba-delete {
    display:none;
  }
  .mail-shell:not(:has(.mail-body[data-view="detail"])):not(:has(#mail-body.has-selection)) #mail-ba-more {
    display:flex; position:fixed; z-index:calc(var(--z-sidebar,10) + 22);
    right:max(16px, env(safe-area-inset-right,0px));
    bottom:calc(var(--native-float-y) + 68px); /* 56px de alto del FAB + 12px de aire, mismo criterio que --native-float-y */
    width:44px; height:44px; border-radius:50%; padding:0;
    background:var(--yt-orange, var(--brand-primary,#C7F000)); color:#111;
    box-shadow:0 6px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.16);
  }
  .mail-shell:not(:has(.mail-body[data-view="detail"])):not(:has(#mail-body.has-selection)) #mail-ba-more span {
    display:none; /* solo el icono cabe en la burbuja de 44px, mismo criterio que .native-fab (sin texto) */
  }
  :root[data-os="android"] .mail-shell:not(:has(.mail-body[data-view="detail"])):not(:has(#mail-body.has-selection)) #mail-ba-more {
    box-shadow:0 1px 3px rgba(0,0,0,.35), 0 8px 20px -4px rgba(0,0,0,.3); /* M3 elevation nivel 3, mismo criterio que .native-fab android */
  }
  /* En vista "detail" la píldora ya queda oculta gratis: su ancestro `.mail-list-pane` tiene
     `display:none` ahí (regla de arriba) y ningún hijo de un ancestro oculto se pinta. Solo falta
     el caso "list" + selección activa, donde `.mail-list-pane` SÍ está visible. Dos clases (no un
     id) porque `.mail-search-wrap` no tiene id propio — sigue siendo más específico que la clase
     compartida `.native-float-pill` sola. */
  .mail-shell:has(#mail-body.has-selection) .mail-list-toolbar .mail-search-wrap { display:none; }
  /* El botón "Redactar" del toolbar de escritorio (arriba, ya oculto por la regla de bloque
     anterior) queda cubierto por el FAB; el resto de acciones de la barra inferior reusan los
     mismos iconos ya definidos por `ico()` en js/mail.js — el color de acento y el rojo de
     "Eliminar" ya vienen resueltos por `.native-bottom-toolbar-btn`/`.native-danger` en
     native-materials.css, nada que agregar aquí. */

  /* F1.26: el badge de "personas detectadas" (mig-105/D23) se pinta dos veces — la del toolbar de
     escritorio (`.mail-detect-badge` dentro de `.mail-detect-tbtn`, `position:relative` propio,
     ver arriba en este archivo) y su gemela dentro de la fila de la hoja "Más"
     (`#mail-more-detect`, un `.native-bottom-sheet-row` que NO es `position:relative` con esa
     intención) — sin este override el badge absoluto se posicionaría contra el ancestro
     posicionado más cercano que encuentre (probablemente el panel de la hoja completa), rompiendo
     el layout. Aquí se vuelve un chip normal al final de la fila en vez de una insignia flotante. */
  #mail-more-detect { position:relative; }
  #mail-more-detect .mail-detect-badge {
    position:static; margin-left:auto; flex-shrink:0;
  }
}

/* ── Overlays de AppModal (D8 "posponer"/"reglas simples", B8) — MISMO patrón que .alkbd-ov de
   css/rail.css: AppModal.overlay('clase') solo crea el <dialog class="appmod clase"> transparente
   con inset:0 (dialog-service.js); el centrado (flex+padding+backdrop) lo pone ESTE archivo, y la
   caja interior fija su propio max-width — sin esto el contenido queda pegado a la esquina. ────── */
/* GROUP B (F1 close-out audit, PCH-1): el modal "Conectar buzón compartido" (openConnectSharedModal,
   js/mail.js) usa AppModal.overlay('mail-shared-connect-bk') pero esa clase nunca se agregó a este
   selector — salía sin centrar y sin fondo oscuro. Reusa el MISMO overlay que reglas/posponer. */
.mail-rules-bk, .mail-snooze-pick-bk, .mail-shared-connect-bk {
  position:fixed; inset:0; z-index:100050;
  background:rgba(15,14,13,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.mail-snooze-pick-bk .appdlg-box { width:100%; max-width:min(420px, calc(100% - 8px)); margin:0; }

/* ── Panel de reglas (D8 "reglas simples", B8) — caja propia sobre el overlay de arriba. ────── */
.mail-rules-modal {
  width:min(480px,94vw); max-height:88vh; overflow-y:auto; margin:auto;
  background:var(--surface-0); color:var(--text); border:1px solid var(--divider); border-radius:16px;
  padding:20px; box-shadow:0 18px 50px rgba(0,0,0,.35); font-family:inherit;
}
.mail-rules-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.mail-rules-hd h3 { margin:0; font-size:16px; }
.mail-rules-desc { font-size:12.5px; color:var(--text-muted); line-height:1.5; margin:0 0 14px; }
.mail-rules-field { margin-bottom:12px; }
.mail-rules-field label { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:4px; }
.mail-rules-field select {
  width:100%; border:1px solid var(--divider); border-radius:8px; padding:8px 10px; font-size:13px;
  font-family:inherit; background:var(--surface-1); color:var(--text);
}
.mail-rules-list { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; max-height:220px; overflow-y:auto; }
.mail-rules-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border:1px solid var(--divider); border-radius:8px; background:var(--surface-1);
  font-size:12.5px; color:var(--text-2);
}
.mail-rules-del {
  flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:7px; background:transparent; color:var(--text-muted); cursor:pointer;
}
.mail-rules-del:hover { background:var(--surface-2); color:#dc2626; }
.mail-rules-del:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
.mail-rules-form { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--divider); }
.mail-rules-form-label { font-size:12px; font-weight:600; color:var(--text-2); }
.mail-rules-cond-in, .mail-rules-form select {
  width:100%; border:1px solid var(--divider); border-radius:8px; padding:8px 10px; font-size:13px;
  font-family:inherit; background:var(--surface-1); color:var(--text); box-sizing:border-box;
}
.mail-rules-form .btn { margin-top:6px; }
@media (max-width:640px){ .mail-rules-modal { border-radius:18px 18px 0 0; margin:auto 0 0 0; width:100vw; max-width:100vw; } }

/* ── B9: Larry — cazador de contactos (D23) + alta rápida (D24) ─────────────────────────────
   Botón de toolbar con badge (D23, non-intrusivo — sin popup automático, solo un contador) +
   panel reusado (openContactCandidatesModal, js/mail.js) sobre el MISMO overlay .mail-rules-bk
   y la MISMA caja .mail-rules-modal/.mail-rules-list de arriba (reglas simples, B8) — solo se
   agregan las filas propias (checkbox + nombre editable + acciones) y el botón inline de "Agregar
   a contactos" junto al remitente de un hilo. ────────────────────────────────────────────── */
.mail-detect-tbtn { position:relative; }
.mail-detect-badge {
  position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px;
  border-radius:999px; background:color-mix(in srgb, var(--brand-secondary,#FF8A5B) 65%, #000 35%);
  color:#fff; font-size:10px; font-weight:800; line-height:15px; text-align:center;
}
.mail-detect-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--divider); border-radius:8px; background:var(--surface-1);
}
.mail-detect-check { flex-shrink:0; }
.mail-detect-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mail-detect-name-in {
  width:100%; border:1px solid transparent; border-radius:6px; padding:2px 6px; margin:-2px -6px;
  /* GROUP J.3 (F1 close-out audit, IOS-3): ≥16px evita el auto-zoom de iOS al enfocar. */
  font-size:16px; font-weight:600; font-family:inherit; background:transparent; color:var(--text); box-sizing:border-box;
}
.mail-detect-name-in:hover, .mail-detect-name-in:focus { border-color:var(--divider); background:var(--surface-0); }
@media (min-width:880px) { .mail-detect-name-in { font-size:13px; } }
.mail-detect-meta { font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-detect-row .btn { flex-shrink:0; padding:5px 10px; font-size:12px; }

/* Enlace inline junto al remitente (D24 "también al recibir") — oculto hasta que
   checkThreadUnknownSenders() confirme que ese remitente no es contacto. */
.mail-msg-addcontact {
  display:inline-flex; align-items:center; gap:3px; margin-left:8px;
  border:none; background:transparent; color:var(--text-muted); font-size:11.5px; font-weight:600;
  cursor:pointer; padding:2px 6px; border-radius:6px; vertical-align:middle;
}
.mail-msg-addcontact:hover { background:var(--surface-2); color:var(--text); }
.mail-msg-addcontact:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-1px; }