/* ════════════════════════════════════════════════════════════════
   mail-composer.css — F1 Correo, B4: composer + firmas
   docs/PLAN_F1_MAIL.md · docs/PLAN_ALUNA_WORKSPACE.md D9/D10/D12

   Reusa .spkc-modal-ov/.spkc-modal (css/app.css, AppModal top-layer)
   como base del modal — solo se AÑADEN las clases .mcx-* propias del
   contenido. Tokens de css/tokens-productivity.css + variables del
   tema (--surface-N / --text-N / --divider) para quedar en tema claro Y
   oscuro sin un solo hex quemado.
   ════════════════════════════════════════════════════════════════ */

.mail-composer.spkc-modal { display:flex; flex-direction:column; padding:0; overflow:hidden; }

.mcx-hd {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--divider, var(--bg-border));
  flex-shrink:0;
}
.mcx-hd b { font-size:15px; color:var(--text); }
.mcx-hd .btn { font-size:13px; padding:5px 9px; }

.mcx-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 18px; display:flex; flex-direction:column; gap:8px; }

.mcx-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--divider, var(--bg-border)); flex-wrap:wrap; }
.mcx-row:last-of-type { border-bottom:none; }
.mcx-lbl { flex-shrink:0; width:44px; font-size:12.5px; font-weight:700; color:var(--text-muted); }

.mcx-account { flex:0 1 320px; min-width:180px; }
.mcx-editsig { margin-left:auto; font-size:12px; color:var(--text-muted); text-decoration:none; white-space:nowrap; }
.mcx-editsig:hover { color:var(--text); text-decoration:underline; }

.mcx-chips {
  flex:1 1 auto; min-width:180px; display:flex; flex-wrap:wrap; align-items:center; gap:5px;
  padding:4px 2px;
}
.mcx-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--surface-2, var(--bg-raised)); color:var(--text);
  border-radius:999px; padding:3px 5px 3px 10px; font-size:12.5px; line-height:1.4;
  max-width:260px;
}
.mcx-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcx-chip.is-invalid { background:color-mix(in srgb, #ef4444 16%, var(--surface-2, #fff)); color:#b91c1c; }
.mcx-chip button {
  border:none; background:transparent; cursor:pointer; color:inherit; opacity:.65;
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px;
}
.mcx-chip button:hover { opacity:1; background:rgba(0,0,0,.08); }
.mcx-chip-input {
  flex:1 1 100px; min-width:100px; border:none; background:transparent; outline:none;
  /* GROUP J.3 (F1 close-out audit, IOS-3): ≥16px evita el auto-zoom de iOS al enfocar — MISMO
     criterio que .larry-ov-input (css/app.css); la densidad de escritorio se recupera abajo. */
  font-size:16px; color:var(--text); font-family:inherit; padding:4px 2px;
}
.mcx-cccobtn {
  flex-shrink:0; border:none; background:transparent; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--text-muted); padding:3px 6px; border-radius:6px;
}
.mcx-cccobtn:hover { background:var(--surface-2, var(--bg-raised)); color:var(--text); }

/* GROUP J.3 (F1 close-out audit, IOS-3): ≥16px evita el auto-zoom de iOS al enfocar (ver .mcx-chip-input arriba). */
.mcx-subject { font-size:16px; font-weight:600; border:none !important; background:transparent !important; padding:6px 2px !important; }
.mcx-subject:focus { outline:none; }
@media (min-width:880px) {
  .mcx-subject, .mcx-chip-input { font-size:13.5px; } /* densidad de escritorio: sin riesgo de auto-zoom fuera de iOS */
}

/* ── Toolbar rica (D9) — reusa .yt-tb-btn look pero clase propia para no acoplarse a mail.css ── */
.mcx-toolbar { display:flex; align-items:center; gap:2px; padding:4px 0; flex-wrap:wrap; }
.mcx-tb-btn {
  min-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; font-size:13px; font-weight:700; padding:0 6px;
}
.mcx-tb-btn:hover { background:var(--surface-2, var(--bg-raised)); color:var(--text); }
.mcx-tb-btn:focus-visible { outline:2px solid var(--brand-primary, #C7F000); outline-offset:-2px; }
.mcx-tb-sep { width:1px; height:20px; background:var(--divider, var(--bg-border)); margin:0 4px; }

/* ── Editor (contenteditable) ─────────────────────────────────────── */
.mcx-editor {
  flex:1 1 auto; min-height:200px; max-height:40vh; overflow-y:auto;
  border:1px solid var(--divider, var(--bg-border)); border-radius:10px;
  padding:12px 14px; font-size:13.5px; line-height:1.6; color:var(--text);
  background:var(--surface-0, var(--bg));
}
.mcx-editor:focus { outline:none; border-color:var(--brand-primary, #C7F000); }
.mcx-editor img { max-width:100%; height:auto; border-radius:6px; }
.mcx-editor a { color:#0078d4; }
.mcx-sig-editor { min-height:120px; max-height:none; }

.mcx-sig-inserted { font-size:13px; color:var(--text-2); }
.mcx-sig-sep { border:none; border-top:1px solid var(--divider, var(--bg-border)); margin:12px 0; }

.mcx-quote-wrap { margin-top:10px; }
.mcx-quote-toggle {
  border:none; background:var(--surface-2, var(--bg-raised)); color:var(--text-muted);
  border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:700; cursor:pointer;
}
.mcx-quote-toggle:hover { color:var(--text); }
.mcx-quote-head { font-size:11.5px; color:var(--text-muted); margin:8px 0 4px; }
.mcx-blockquote {
  margin:0; padding:8px 12px; border-left:3px solid var(--divider, var(--bg-border));
  color:var(--text-2); font-size:13px;
}

/* ── Adjuntos ─────────────────────────────────────────────────────── */
.mcx-attachments { display:flex; flex-direction:column; gap:6px; }
.mcx-attach-hd { font-size:11.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; }
.mcx-attach-row {
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--divider, var(--bg-border)); border-radius:8px; padding:6px 10px;
  font-size:12.5px; color:var(--text);
}
.mcx-attach-ic { flex-shrink:0; }
.mcx-attach-name { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcx-attach-size { flex-shrink:0; color:var(--text-muted); font-size:11.5px; }
.mcx-attach-rm {
  flex-shrink:0; border:none; background:transparent; cursor:pointer; color:var(--text-muted);
  width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center;
}
.mcx-attach-rm:hover { background:var(--surface-2, var(--bg-raised)); color:#b91c1c; }

/* ── Pie ──────────────────────────────────────────────────────────── */
.mcx-ft {
  display:flex; align-items:center; gap:8px;
  padding:12px 18px; border-top:1px solid var(--divider, var(--bg-border)); flex-shrink:0;
}
.mcx-ft-spacer { flex:1 1 auto; }

/* ── Botón "Responder"/"Responder a todos"/"Reenviar" en el hilo (js/mail.js) ─ */
.mail-thread-actions { display:flex; gap:6px; flex-wrap:wrap; padding:10px 20px 4px; }

/* ── Botón "Redactar" del toolbar de Correo (js/mail.js) — .yt-tb-btn no trae variante primary ── */
.mail-app-toolbar #mail-compose {
  background:var(--brand-primary, #C7F000); color:var(--on-brand-primary, #1c1b1a);
  border-radius:8px; font-weight:700;
}
.mail-app-toolbar #mail-compose:hover { filter:brightness(.94); }

/* ── Responsive: <680px el modal ocupa casi toda la pantalla, filas apiladas ──
   PC-3 (panel de auditores): se añade `and (pointer:coarse)` al gate de layout apilado — un
   MacBook en Split View/Snap (~640px CSS) con MOUSE (pointer:fine) no es un teléfono y no debe
   recibir el overlay de pantalla completa; solo un dispositivo táctil angosto de verdad lo
   dispara ahora. La corrección de ALTURA vía JS (wireMobileKeyboardFix) ya no depende de este
   media query ni de ningún ancho — depende de data-os="ios" + evidencia real de teclado abierto
   (ver js/mail-composer.js), así sigue aplicando en landscape de iPhone (>680px) y nunca se activa
   en desktop/Android. */
@media (max-width:680px) and (pointer:coarse) {
  /* GROUP J.1 (F1 close-out audit, IOS-1): dvh además de vh — MISMO patrón que css/app.css
     (líneas 1157/1513) para que la barra de direcciones de Safari no tape el pie del composer.
     KBFIX (bug crítico "solo se ve una caja en blanco" con el teclado abierto, ver
     js/mail-composer.js#wireMobileKeyboardFix): position:fixed;top:0;left:0 saca la caja del
     centrado flex de .spkc-modal-ov (css/app.css) — ese centrado la deja flotando a la mitad de
     un contenedor exterior que NO se reduce con el teclado (100vh del <dialog>, ajeno al viewport
     visual), así que la mitad de abajo terminaba tapada por el teclado aunque la caja ya midiera
     lo correcto. Fijada arriba-izquierda coincide con la región que SÍ es visible (el teclado tapa
     el borde inferior, nunca el superior). El alto real (vh/dvh de aquí abajo son el mejor esfuerzo
     SIN JS) lo corrige en vivo wireMobileKeyboardFix() con window.visualViewport cuando existe. */
  .mail-composer.spkc-modal { position:fixed; top:0; left:0; width:100vw !important; max-width:100vw !important; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; border-radius:0; }
  .mcx-lbl { width:auto; }
  .mcx-account { flex:1 1 100%; }
  .mcx-editsig { margin-left:0; flex-basis:100%; }
  .mcx-editor { max-height:none; }
  .mcx-tb-btn { min-width:36px; height:36px; }
}