/* mail-thread-ui.css — CSS del componente "correo en el hilo" (tarjeta
   renderMailCard + menu "mas opciones" + acciones responder/reenviar +
   partes comunes de la hoja de lectura a pantalla completa #thr-sheet,
   ver seccion propia mas abajo), FUENTE UNICA compartida por la web
   (apps/personal-agent-api/src/inbox/
   inbox-page-route.ts, servida en /inbox/mail-thread-ui.css) y la APK
   (este mismo fichero, <link> directo). Mismo patron que mail-thread-ui.js
   ("one implementation, no fork").

   Owner feedback 2026-08-05: este CSS vivia DUPLICADO a mano en los dos
   ficheros desde que se compartio el JS (2026-08-04) — un fix en la web
   NO llegaba solo a la APK. Le paso ya 2 veces (imagenes rotas en pantalla
   completa 2026-08-02; "responder a todos" visualmente activo con 1 solo
   destinatario, 2026-08-05 — el JS ya ponia disabled, faltaba SOLO la regla
   CSS .thr-hicon:disabled en la APK). Esta extraccion cierra la clase de
   bug de raiz. De paso corrigio 2 gaps reales que la duplicacion a mano
   habia dejado en la APK sin que nadie los viera: .thr-head-acts sin
   display:flex (responder/responder-a-todos/reenviar se apilaban en
   vertical en vez de fila) y .thr-hicon svg sin tamano explicito.

   Los selectores usan var(--web-token, var(--apk-token, fallback)) para
   funcionar en ambos namespaces de variables SIN tocar ninguno de los dos
   :root existentes -- ver el WEB (--c-*) y la APK (variables planas:
   --card/--bd/--text/--muted/--teal/etc) cada uno con su propio tema.
   Las 2 unicas diferencias de VALOR real (no de nombre) entre plataformas
   -- alto del esqueleto de carga y sombra del menu "mas opciones" -- se
   resuelven con dos variables propias (--thr-skel-h, --thr-menu-shadow)
   que SI vive declarada en cada :root con su valor intencional.

   @media(max-width:639px) de la web (ajusta touch-targets en viewport
   angosto) se queda EN LA WEB a proposito -- la APK ya es angosta siempre,
   imponerle esos valores le cambiaria tamanos sin que nadie lo haya
   decidido para el contexto nativo. */
.thr-card{background:var(--c-surface, var(--card));
  border-width:1px;border-style:solid;border-color:var(--c-border, var(--bd));
  border-radius:var(--r, 10px);box-sizing:border-box;width:100%;min-width:0;overflow:hidden}

.thr-card[open]{box-shadow:0 1px 3px rgba(0,0,0,.06)}

.thr-card.warn{border-color:var(--c-amber, #ffb96b)}

.thr-head{display:flex;align-items:flex-start;gap:9px;padding:8px 12px;
  min-height:44px;box-sizing:border-box;cursor:pointer;list-style:none}

.thr-head::-webkit-details-marker{display:none}

.thr-head::marker{content:""}

.thr-head:hover{box-shadow:inset 0 0 0 999px rgba(0,102,255,.05)}

.thr-head:focus-visible{outline:2px solid var(--c-blue, var(--teal));outline-offset:-2px}

.thr-ico{flex:0 0 auto;font-size:15px;line-height:1.45;border-radius:50%}

.thr-ico.warn{box-shadow:0 0 0 2px var(--c-amber, #ffb96b);border-radius:50%}

.thr-main{flex:1 1 auto;min-width:0}

.thr-l1{display:flex;align-items:baseline;gap:8px;min-width:0}

.thr-subj{flex:1 1 auto;min-width:0;font-weight:600;font-size:13.5px;line-height:1.35;
  color:var(--c-text, var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Indicador leido/no-leido: borde izquierdo de acento (mismo patron que
   .thr-row.in/out en la vista de hilo — ya establecido en inbox-page-route.ts
   lineas 1689-1695). Cambiar solo font-weight 600->700 es imperceptible en
   dark theme; el borde de color es visible de inmediato.
   Fix A (2026-08-18): borde aumentado de 3px a 6px + tinte de fondo sutil
   (~10% teal) para diferencia claramente perceptible en dark theme.
   Mecanismo rgba() reutilizado del patron ya existente en este fichero
   (chips warn/bounce: rgba(182,121,28,.12), rgba(239,68,68,.15); hover:
   rgba(0,102,255,.05)). Variable --c-teal-light como primera opcion en
   plataformas que la declaren; fallback rgba directo para las que no. */
.thr-card.unread{border-left-width:6px;border-left-color:var(--c-blue,var(--teal,#0891b2));
  background:var(--c-teal-light,rgba(8,145,178,.10))}
.thr-card.unread .thr-subj{font-weight:700}

.thr-card[open] .thr-subj{white-space:normal;overflow:visible;text-overflow:clip}

.thr-l2{display:flex;align-items:baseline;gap:6px;min-width:0;margin-top:2px}

.thr-peek{flex:1 1 auto;min-width:0;font-size:12px;color:var(--c-muted, var(--muted));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.thr-card[open] .thr-peek{display:none}

.thr-aside{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding-top:2px}

.thr-time{font-size:11px;color:var(--c-muted, var(--muted));white-space:nowrap;font-variant-numeric:tabular-nums}

.thr-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;
  padding:1px 8px;border-radius:999px;border:1px solid var(--c-border, var(--bd));
  background:var(--c-bg, var(--bg));color:var(--c-muted, var(--muted));font-size:11.5px;line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --bd en dark (#2A3547 sobre #0F1622) da ~1.47:1 -- falla WCAG AA para
   borde de componente UI (min 3:1). --muted (#6B7A96) ya se usa como color
   de TEXTO de este mismo chip y da ~4.2:1 sobre el mismo fondo -- reusamos
   el token ya validado en vez de inventar uno nuevo. No toca warn/bounce/seen:
   esos ya fijan su propio border-color (ambar/rojo/verde) explícito.
   FINDING-2026-08-15-aab2d8f0. */
:root[data-theme="dark"] .thr-chip:not(.warn):not(.bounce):not(.seen),
:root[data-theme="auto"] .thr-chip:not(.warn):not(.bounce):not(.seen){
  border-color:var(--c-muted, var(--muted))}

.thr-chip.warn{background:var(--c-amber-light, rgba(182,121,28,.12));color:var(--c-amber-text, #b45309);border-color:var(--c-amber, #ffb96b)}

/* Los chips del CUERPO llevan detalle (destinatario, fecha) y en móvil no
   caben en una línea. Envuelven en vez de truncar: cortar "12 ago 10:…" a
   media hora pierde justo el dato por el que alguien abre la tarjeta. La
   cabecera sigue en una línea — ahí el texto es corto por diseño. */
.thr-top-row .thr-chip:not(.thr-hchip){white-space:normal;overflow:visible;text-overflow:clip;
  border-radius:12px;padding:2px 9px;text-align:left}

.thr-chip.bounce{background:var(--c-red-light, rgba(239,68,68,.15));color:var(--c-red-text, var(--err));border-color:var(--c-red, var(--err))}

/* Motivo del fallo de envío: acompaña al chip "No enviado" sin competir con
   él. Texto normal (no chip): es una explicación, no otro estado. Se envuelve
   en pantalla estrecha en vez de recortarse — el motivo truncado no sirve. */
.thr-fail-why{font-size:12px;color:var(--c-muted, var(--muted));
  white-space:normal;overflow-wrap:anywhere;min-width:0;align-self:center}

/* Aviso de errata de dominio al corregir la dirección. Ámbar, no rojo: es una
   sospecha, no un error — la dirección puede ser perfectamente válida. Ocupa
   toda la fila para caer debajo del campo y no empujar los botones. */
.thr-correct-typo{flex-basis:100%;font-size:12px;color:#d97706;
  white-space:normal;overflow-wrap:anywhere;min-width:0;margin-top:2px}

.thr-chip.seen{background:var(--c-green-light, var(--ok-bg));color:var(--c-green-text, var(--ok-fg));border-color:var(--c-green, var(--ok))}
/* Chip compacto en cabecera (thr-aside, visible sin abrir la tarjeta) */
.thr-hchip{font-size:10px;padding:0 6px;line-height:1.6}

.thr-sig-plain{margin-top:6px}

/* Adjuntos reales del correo (no inline) — .atp-card la inyecta
   attachment-preview.js (_injectAttachmentPreviewStyles), este archivo solo
   separa la lista del cuerpo del mensaje que va justo encima. */
.thr-attachments{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.thr-attachments .atp-card{background:var(--c-surface, var(--card));margin-bottom:0;position:relative}

/* Botón de descarga directa sobre la esquina de la tarjeta (owner 2026-08-14,
   punto 2: botón junto a la pastilla que descarga sin pasar por el visor).
   SIEMPRE visible en touch/APK (no hay hover en móvil, opacity:1 por
   defecto); en puntero fino (ratón/trackpad) se atenúa y solo aparece al
   pasar por encima -- mismo patrón "hover revela acción" que Gmail sobre sus
   tarjetas de adjunto. @media(hover:hover) evita tener que inventar
   detección de touch a mano. */
.atp-dl-btn{position:absolute;top:-7px;right:-7px;z-index:1;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;padding:0;font-size:12px;line-height:1;
  border:1px solid var(--c-border, var(--bd));border-radius:999px;
  background:var(--c-bg, var(--bg));color:var(--c-text, var(--text));cursor:pointer;opacity:1}
@media (hover:hover){
  .atp-dl-btn{opacity:0;transition:opacity .15s ease}
  .atp-card:hover .atp-dl-btn,.atp-card:focus-within .atp-dl-btn{opacity:1}
}

/* "Descargar todo (N)" — mismo lenguaje visual que .thr-chip (pill,
   borde+fondo tenues, L79-97 de este fichero) pero interactivo (button real,
   no span informativo). Último hijo de .thr-attachments, solo se pinta con
   2+ adjuntos (mail-thread-ui.js decide el umbral, calcado de Gmail). */
.thr-attach-download-all{display:inline-flex;align-items:center;gap:4px;
  padding:1px 10px;border-radius:999px;border:1px solid var(--c-border, var(--bd));
  background:var(--c-bg, var(--bg));color:var(--c-muted, var(--muted));
  font-size:11.5px;line-height:1.6;cursor:pointer}
.thr-attach-download-all:hover{color:var(--c-text, var(--text))}

.thr-body{border-top:1px solid var(--c-border, var(--bd));padding:10px 12px 12px}

.thr-meta-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 14px;margin-bottom:8px}

.thr-meta{flex:1 1 auto;min-width:0;font-size:12px;color:var(--c-muted, var(--muted));line-height:1.65;overflow-wrap:anywhere}

.thr-meta b{color:var(--c-text, var(--text));font-weight:600}

.thr-domain-warn{color:var(--c-amber-text, #b45309);font-weight:600}

.thr-btn{border:1px solid var(--c-border, var(--bd));background:transparent;color:var(--c-text, var(--text));
  border-radius:8px;padding:5px 11px;font:inherit;font-size:12px;min-height:32px;cursor:pointer}

.thr-btn:hover{border-color:var(--c-blue, var(--teal));color:var(--c-blue, var(--teal))}

.thr-btn[aria-pressed="true"]{background:var(--c-tint-blue-bg, var(--mist));color:var(--c-tint-blue-fg, var(--teal-dark));border-color:transparent}

.thr-btn:disabled{opacity:.55;cursor:default}

.thr-btn:focus-visible{
  outline:2px solid var(--c-blue, var(--teal));outline-offset:2px}

.thr-text{max-width:var(--thr-read);font-size:13.5px;line-height:1.6;color:var(--c-text, var(--text));
  white-space:pre-wrap;overflow-wrap:anywhere}

.thr-text a{color:var(--c-blue, var(--teal))}

.thr-links{margin-top:10px;border-top:1px solid var(--c-border, var(--bd));padding-top:6px}

.thr-link{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;
  padding:5px 0;font-size:12.5px;border-bottom:1px solid var(--c-border, var(--bd));min-height:32px}

.thr-link:last-child{border-bottom:0}

.thr-link-i{flex:0 0 auto;color:var(--c-muted, var(--muted));font-variant-numeric:tabular-nums}

.thr-link-t{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;color:var(--c-blue, var(--teal))}

.thr-link-h{flex:0 0 auto;color:var(--c-muted, var(--muted));font-size:11.5px}

.thr-headers{margin-top:10px;border-top:1px solid var(--c-border, var(--bd));padding-top:6px}

.thr-headers-body{font-family:ui-monospace,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:11.5px;line-height:1.6}

.thr-hdr-row{display:flex;flex-wrap:wrap;gap:4px 8px;padding:3px 0;border-bottom:1px solid var(--c-border, var(--bd))}

.thr-hdr-row:last-child{border-bottom:0}

.thr-hdr-k{flex:0 0 auto;color:var(--c-muted, var(--muted));font-weight:700}

.thr-hdr-v{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;color:var(--c-text, var(--text))}

.thr-html{position:relative;background:var(--thr-paper);border:1px solid var(--c-border, var(--bd));
  border-radius:10px;overflow:hidden}

.thr-frame{display:block;width:100%;border:0;background:var(--thr-paper);color-scheme:light;
  height:clamp(160px, var(--thr-frame-h, 420px), min(62vh, 760px))}

:root[data-theme="dark"] .thr-html,
:root[data-theme="auto"] .thr-html{box-shadow:0 1px 6px rgba(0,0,0,.45)}

.thr-skel{height:var(--thr-skel-h, 80px);border-radius:10px;background:var(--c-hover, var(--mist))}

.thr-err{font-size:12.5px;color:var(--c-err, var(--err));display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.thr-frame[data-fit="1"]{height:auto}

.thr-plain[hidden]{display:none}

.thr-links[hidden]{display:none}

.thr-headers[hidden]{display:none}

.thr-link-w{flex:0 0 auto;font-size:11.5px;color:var(--c-amber-text, #b45309);
  background:var(--c-amber-light, rgba(182,121,28,.12));border:1px solid var(--c-amber, #ffb96b);
  border-radius:999px;padding:0 7px;line-height:1.7}

.thr-imgs-toggle{position:relative;flex:0 0 auto;width:20px;height:20px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:5px;
  background:transparent;color:var(--c-muted, var(--muted));cursor:pointer}

.thr-imgs-toggle::after{content:"";position:absolute;top:50%;left:50%;
  width:40px;height:40px;transform:translate(-50%,-50%)}

.thr-imgs-toggle svg{width:15px;height:15px;pointer-events:none;display:block}

.thr-imgs-toggle:hover{color:var(--thr-accent)}

.thr-imgs-toggle:focus-visible{outline:2px solid var(--c-blue, var(--teal));outline-offset:2px}

.thr-imgs-toggle[data-state="loading"]{color:var(--thr-accent);animation:thr-imgs-pulse 1s ease-in-out infinite}

.thr-imgs-toggle[data-state="shown"]{display:none}

@media(prefers-reduced-motion:reduce){
.thr-imgs-toggle[data-state="loading"]{animation:none}
}

.thr-head-acts{display:flex;align-items:center;gap:4px;flex:0 0 auto}

.thr-hicon{position:relative;flex:0 0 auto;min-width:20px;height:20px;padding:0 3px;margin:0;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:5px;
  background:transparent;color:var(--c-muted, var(--muted));cursor:pointer;font-size:13px;line-height:1}

/* El display:flex de arriba es una regla de autor y SIEMPRE gana al
   [hidden]{display:none} de la hoja del navegador, así que un .thr-hicon con
   el atributo hidden se seguía viendo -- y pulsando. Lo sufrió "Esto no era
   la firma" en #thr-sheet-acts: nace hidden (solo tiene sentido con la firma
   ya desplegada) pero aparecía desde el primer instante, con su data-sigid
   puesto, así que se podía revocar una firma sin haberla visto. El fichero
   ya trae este par para .thr-viewmenu-item, .thr-links, .thr-headers,
   .thr-plain y .thr-hicon-n; aquí faltaba. */
.thr-hicon[hidden]{display:none}

.thr-hicon::after{content:"";position:absolute;top:50%;left:50%;
  width:40px;height:40px;transform:translate(-50%,-50%)}

.thr-hicon svg{width:15px;height:15px;pointer-events:none;display:block}

.thr-hicon:hover{color:var(--thr-accent)}

.thr-hicon[aria-pressed="true"]{color:var(--thr-accent)}

.thr-hicon:focus-visible{outline:2px solid var(--c-blue, var(--teal));outline-offset:2px}

.thr-hicon:disabled{opacity:.35;cursor:default}

.thr-hicon:disabled:hover{color:var(--c-muted, var(--muted))}

.thr-hicon-n{font-size:10px;font-weight:700;margin-left:2px;line-height:1}

.thr-hicon-n[hidden]{display:none}

.thr-hicon.warn{color:var(--c-amber-text, #b45309)}

.thr-top-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;margin:0 0 8px}

.thr-viewmenu-wrap{position:relative;flex:0 0 auto;margin-left:auto}

/* position:fixed, NO absolute (owner 2026-08-13): en absolute el menú vivía
   dentro de .thr-card, que lleva overflow:hidden para recortar el HTML del
   correo por su border-radius — y el recorte por overflow ignora el z-index,
   así que los ítems de abajo ("Mostrar firma", "Ver correo completo", "Esto
   no era la firma") quedaban cortados e INALCANZABLES: medido en vivo, el
   último caía 23px fuera de la tarjeta y elementFromPoint sobre su centro
   devolvía el contenido de OTRO mensaje del hilo. Subir el z-index no
   arreglaba nada; sacar el overflow de .thr-card habría roto el recorte del
   correo. fixed lo saca del flujo y además lo inmuniza contra el segundo
   recortador de la cadena, el scroller #msg-area (overflow:auto), que lo
   habría vuelto a cortar con la tarjeta al final del hilo.
   top/left los calcula thrPositionViewMenu() al abrir: no se declaran aquí
   a propósito — una regla externa que el inline del JS pisara sería justo el
   patrón que vigila guard-inline-style-layout-override.mjs. */
.thr-viewmenu{position:fixed;z-index:1000;min-width:210px;
  display:flex;flex-direction:column;background:var(--c-surface, var(--card));border:1px solid var(--c-border, var(--bd));
  border-radius:10px;box-shadow:var(--thr-menu-shadow, 0 8px 24px rgba(0,0,0,.2));overflow:hidden}

.thr-viewmenu[hidden]{display:none}

.thr-viewmenu-item{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;
  padding:0 12px;margin:0;border:0;background:none;color:var(--c-text, var(--text));font-size:13px;
  text-align:left;cursor:pointer}

/* Bug verificado con Playwright real (jsdom no calcula cascada CSS): el
   atributo `hidden` no gana por sí solo contra un `display` fijado por
   una regla de autor con igual especificidad -- MDN lo documenta, y ya
   hay override para .thr-plain/.thr-links/.thr-headers/.thr-viewmenu en
   este mismo fichero. Faltaba para .thr-viewmenu-item: sin esta regla,
   getComputedStyle(item).display da "flex" con `hidden` puesto, así que
   el ítem "notsig" ("Esto no era la firma", Task 3) se vería siempre en
   vez de solo cuando la firma está desplegada -- y "Enlaces de este
   correo" (nace hidden hasta que thrRenderLinks confirma que hay
   enlaces) tenía el mismo fallo latente. */
.thr-viewmenu-item[hidden]{display:none}

.thr-viewmenu-item:hover,.thr-viewmenu-item:focus-visible{background:var(--c-blue-light, var(--mist))}

.thr-viewmenu-item+.thr-viewmenu-item{border-top:1px solid var(--c-border, var(--bd))}

.thr-viewmenu-item svg{width:16px;height:16px;flex:0 0 auto;pointer-events:none}

.thr-viewmenu-label{flex:1 1 auto;min-width:0}

.thr-viewmenu-item .thr-hicon-n{margin-left:auto;flex:0 0 auto;font-size:11px}

/* Trigger "Firma ▸" (owner 2026-08-23, agrupa sigtoggle/sigdefine/notsig en
   un submenú): mismo .thr-viewmenu-item que cualquier otro ítem del menú --
   .thr-viewmenu-label ya lleva flex:1 1 auto arriba, así que el caret cae al
   borde derecho sin más ayuda; margin-left:auto es cinturón-y-tirantes,
   mismo patrón que .thr-hicon-n justo encima. El sub-panel .thr-viewmenu-sub
   en sí no necesita reglas propias: hereda TODO el estilo base de
   .thr-viewmenu (position:fixed, tamaño, fondo, sombra...) por compartir esa
   misma clase -- ver renderMailCard, comparte mecanismo con el panel
   principal a propósito. */
.thr-viewmenu-caret{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--c-muted, var(--muted))}

.thr-chat-hint{font-size:11.5px;color:var(--thr-accent);margin-top:10px}

/* ── Hoja de lectura a pantalla completa (#thr-sheet) ─────────────────────
   Extraido aqui (FINDING-2026-08-05-73d52256): estas reglas eran IDENTICAS,
   o resolvian al mismo valor final tras la cascada, en los dos ficheros que
   duplicaban a mano el CSS de #thr-sheet desde que existe (PR#4524 dejo
   fuera de alcance la hoja a proposito, solo migro tarjeta+menu). La
   mecanica de apertura/cierre de la hoja (.thr-sheet base: posicionamiento,
   z-index, estrategia display vs. visibility+transform, variante de modal
   centrado en escritorio) SI se queda deliberadamente en cada plataforma
   -- la APK es angosta siempre y usa solo el patron "slide-in", mientras
   que la web alterna entre modal centrado (>=900px) y slide-in (<640px);
   unificarla cambiaria comportamiento real, no solo un token de valor.
   Mismo criterio de exclusion que el @media(max-width:639px) de arriba. */
.thr-sheet-head{display:flex;align-items:center;gap:10px;padding:10px 14px;flex:0 0 auto;
  border-bottom:1px solid var(--c-border, var(--bd))}

.thr-body-acts{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap}

#thr-sheet-acts{padding:0 14px 10px;border-bottom:1px solid var(--c-border, var(--bd));flex:0 0 auto}

#thr-sheet-acts[hidden]{display:none}

.thr-sheet-title{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--c-text, var(--text))}

.thr-sheet-title:focus-visible{outline:2px solid var(--c-blue, var(--teal));outline-offset:2px}

.thr-sheet-origin{display:block;font-size:11.5px;color:var(--c-muted, var(--muted));font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.thr-sheet-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 14px 14px;gap:8px;
  overflow-y:auto;-webkit-overflow-scrolling:touch}

.thr-sheet-body .thr-html{flex:0 0 auto;display:block}

.thr-sheet-body .thr-frame{flex:none}

.thr-sheet-reply-context{padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--c-border, var(--bd))}

.thr-sheet-reply-text{font-size:14px;color:var(--c-text, var(--text));white-space:pre-wrap;word-break:break-word}

.thr-sheet-quote-attrib{font-size:11.5px;color:var(--c-muted, var(--muted));margin-top:10px}

/* Variante "primaria" de .thr-btn (mismo padding/font/radius, ya
   declarados arriba) -- hasta ahora todos los .thr-btn de este fichero eran
   contorno neutro; "Guardar firma" (ver bloque de abajo) es la primera
   acción que de verdad quiere destacar como CTA. Genérica a propósito, no
   .thr-sigdef-save: cualquier otro botón futuro que necesite el mismo
   tratamiento puede combinar esta clase con .thr-btn sin CSS nueva. */
.thr-btn-primary{background:var(--thr-accent);border-color:transparent;color:#fff}

.thr-btn-primary:hover{color:#fff;border-color:transparent}

.thr-btn-primary:disabled{opacity:.55}

/* ── "Marcar dónde empieza la firma" (Problema 1, owner 2026-08-13) ───────
   Vista propia, construida y montada enteramente desde mail-thread-ui.js
   (thrSigDefineEnsureSheet) -- NO reutiliza #thr-sheet como contenedor: esa
   hoja vive en la plantilla ESTÁTICA de cada plataforma (inbox-page-route.ts
   / index.html), fuera de los ficheros que este trabajo puede tocar. Overlay
   simple centrado, IDÉNTICO en las dos plataformas a propósito -- sin la
   variante slide-in/modal-centrado responsive de #thr-sheet, que es
   explícitamente responsabilidad de cada plantilla (ver comentario extenso
   junto a esa sección, arriba). */
.thr-sigdef-sheet{position:fixed;inset:0;z-index:1200;display:flex;
  align-items:center;justify-content:center;padding:16px;box-sizing:border-box}

.thr-sigdef-sheet[hidden]{display:none}

.thr-sigdef-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}

.thr-sigdef-panel{position:relative;z-index:1;width:100%;max-width:560px;
  max-height:88vh;display:flex;flex-direction:column;box-sizing:border-box;
  background:var(--c-surface, var(--card));border:1px solid var(--c-border, var(--bd));
  border-radius:12px;box-shadow:var(--thr-menu-shadow, 0 8px 24px rgba(0,0,0,.2));overflow:hidden}

.thr-sigdef-head{display:flex;align-items:center;gap:10px;padding:14px 14px 0}

.thr-sigdef-title{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--c-text, var(--text))}

.thr-sigdef-hint{font-size:12.5px;color:var(--c-muted, var(--muted));padding:6px 14px 0}

.thr-sigdef-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 14px}

/* Hueco por debajo del correo DENTRO del overlay. Con matched:false la línea
   arranca en el ÚLTIMO píxel del contenido (thrSigDefineSetupBoundary,
   mail-thread-ui.js) y su píldora "Firma desde aquí" sobresale ~6px por
   debajo: sin este hueco la recorta el overflow:hidden del propio .thr-html,
   y además da recorrido de scroll para que el revelado no la deje pegada al
   borde. Acotado al overlay, mismo patrón que `.thr-sheet-body .thr-html`.
   padding-BOTTOM y JAMÁS padding-top: el bloque contenedor de un
   position:absolute es la CAJA DE RELLENO del ancestro posicionado, así que
   un padding-top desplazaría el origen de .thr-sigdef-boundary-line y la
   desalinearía del bloque que señala. */
.thr-sigdef-body .thr-html{padding-bottom:16px}

.thr-sigdef-acts{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px 14px;
  border-top:1px solid var(--c-border, var(--bd))}

/* Línea arrastrable -- MISMOS valores que .mss-boundary-line/.mss-boundary-grip
   en inbox-page-route.ts (tarjeta de propuesta automática): mismo mecanismo
   (thrSigDefineSetupBoundary, mail-thread-ui.js), mismo aspecto, para que el
   usuario reconozca el control aunque sea una vista distinta. .thr-html ya
   trae position:relative (declarado arriba en este fichero), así que basta
   con position:absolute aquí -- sin una clase "-wrap" extra como la versión
   original, que la necesitaba para un contenedor (.mss-preview-frame) que
   por sí solo no era position:relative. */
.thr-sigdef-boundary-line{position:absolute;left:0;right:0;height:0;
  border-top:2px dashed #f59e0b;cursor:ns-resize;touch-action:none;z-index:3}

.thr-sigdef-boundary-grip{position:absolute;left:8px;top:-11px;background:#f59e0b;color:#713f12;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;user-select:none}

/* ── thrcChipInput (mail-thread-ui.js): chips de destinatarios Para/CC/CCO
   del panel de redaccion #thrc-sheet -- SHARED (esta clase la pinta el
   mismo JS en la web, inbox-page-route.ts#thrc-sheet, y en la APK,
   index.html#thrc-sheet: ver cabecera de este fichero). Adaptado del
   compositor standalone web (inbox-page-route.ts, cnmChipInput /
   .cnm-chip*), pero con nombre PROPIO thrc-chip* en vez de reusar
   cnm-chip/cnm-chip-name: esas dos clases YA estan en uso en
   renderMailCard() (mismo fichero JS) para el badge de texto plano "de
   quien" en tarjetas de correo recibido/enviado -- llevan solo estilos
   inline minimos (font-weight/border-bottom, sin pildora de color). Si
   esta regla hubiera reusado el mismo nombre de clase, ese badge se
   habria convertido sin querer en una pildora azul de fondo solido en
   AMBAS plataformas (regresion visual en una feature ya viva). thrc-chip*
   es nuevo, sin colision. */
.thrc-chip-wrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px;
  border:1px solid var(--c-border, var(--bd));border-radius:6px;min-height:36px;
  background:var(--c-surface, var(--card))}

.thrc-chip-wrap:focus-within{outline:2px solid var(--c-blue, var(--accent,#0B5FFF));outline-offset:1px}

.thrc-chip-wrap input{border:none;outline:none;background:transparent;font-size:13px;
  min-width:120px;flex:1;padding:2px 4px;color:inherit}

.thrc-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px 2px 8px;
  background:var(--c-blue, var(--accent,#0B5FFF));color:#fff;border-radius:12px;
  font-size:12px;max-width:180px;cursor:default;user-select:none}

.thrc-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

.thrc-chip-x{border:none;background:none;color:inherit;cursor:pointer;font-size:11px;
  padding:0;line-height:1;opacity:.8;flex-shrink:0}

.thrc-chip-x:hover{opacity:1}