/* ============================================================================ responsive_detalle.css — Responsividad MOBILE del DETALLE de correo, COMPOSE (flotante + clásico) y MODALES (snooze, adj-viewer, lightbox). REGLAS DURAS: - 100% mobile-only: TODA regla vive dentro de un @media (max-width: …). El visual de PC queda intacto (estas reglas no existen por encima del breakpoint). - CSS plano (NO Tailwind). Para ganarle a la especificidad de las utilities y de las clases base (theme/static/css/dist/styles.css, inline_reply.css) se usa !important — seguro porque solo aplica <= breakpoint. - Cargado DESPUÉS del bundle Tailwind y de inline_reply.css (orden en extra_head de detalle.html / compose.html, y en el partial _compose_fab.html que se incluye al final del en inbox y detalle). Áreas cubiertas: 1. Detalle — header (asunto vs "Bandeja") 2. Detalle — barra de acciones del preview (taps >= 40px) 3. Detalle — menú Snooze (popover -> bottom-sheet) 4. Detalle — cabecera del hilo (thread) apretada 5. Detalle — inline reply dock (vh -> dvh, footer Enviar visible) 6. Modal adj-viewer (barra + taps) 7. Modal lightbox (botón cerrar + safe-area) 8. Compose flotante (taps 26px, expand redundante, 100vh -> 100dvh) 9. Compose clásico (botones full-width) ========================================================================== */ /* ────────────────────────────────────────────────────────────────────────── FIX BASE (NO mobile-only) — Navegación prev/next del detalle. Botones para pasar al correo anterior/siguiente DENTRO de la misma vista de la lista (también via atajos J/K o flechas). CSS plano (no Tailwind) → no recompila el bundle. Es funcionalidad nueva del detalle, válida en PC + mobile. ────────────────────────────────────────────────────────────────────────── */ .detalle-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bdr, rgba(0, 0, 0, .08)); background: var(--w, #fff); color: var(--gm, #515154); cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease, border-color .12s ease; } .detalle-nav-btn:hover { background: var(--off, #f5f5f7); color: var(--gd, #1d1d1f); border-color: rgba(0, 0, 0, .16); } .detalle-nav-btn.is-disabled { opacity: .35; cursor: default; pointer-events: none; } [data-theme="dark"] .detalle-nav-btn { background: #252b30; border-color: #383f45; color: #9aa3ab; } [data-theme="dark"] .detalle-nav-btn:hover { background: #2d343a; color: #e8eaed; } /* ────────────────────────────────────────────────────────────────────────── 1 + 2 + 4: Detalle / preview / hilo — breakpoint principal 640px ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* [BAJA] Detalle header — el asunto compite con la palabra "Bandeja". Dejamos solo el chevron del botón volver (el icono ya comunica). */ .rsp-back-label { display: none !important; } .page-detalle .back-link { padding-left: 8px !important; padding-right: 8px !important; } /* Navegación prev/next — taps cómodos (touch no tiene hover) y sin gap fantasma. */ .detalle-nav { gap: 4px !important; } .detalle-nav-btn { width: 40px !important; height: 40px !important; } /* [MEDIA] Barra de acciones del preview — taps chicos. Las labels ya se ocultan por la regla base (<=1400px); acá garantizamos un área táctil cómoda (touch no tiene hover) y un poco más de gap. */ .preview-actions { gap: 8px !important; } .preview-actions .preview-reply-btn, .preview-actions .preview-fwd-btn, .preview-actions .preview-unread-btn, .preview-actions .preview-open-btn, .preview-actions .preview-delete-btn, .preview-actions .preview-snooze-btn { min-height: 40px !important; min-width: 40px !important; padding: 9px 12px !important; justify-content: center !important; } /* El form de eliminar es un wrapper flex del botón → que no rompa el área. */ .preview-actions .preview-delete-form { display: inline-flex !important; } /* [ALTA local del área] Menú Snooze — el popover absolute (right:0, min-width:240px) se sale del viewport cuando la barra es flex-start en mobile. Lo convertimos en bottom-sheet fijo (mobile-only). */ .preview-snooze-menu { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; min-width: 0 !important; width: auto !important; max-height: 70vh !important; max-height: 70dvh !important; overflow: auto !important; z-index: 1000 !important; } /* Opciones del snooze con altura táctil cómoda dentro del bottom-sheet. */ .preview-snooze-menu .snooze-opt { min-height: 44px !important; padding: 10px 12px !important; } .preview-snooze-menu .snooze-custom-input { min-height: 40px !important; } .preview-snooze-menu .snooze-custom-go, .preview-snooze-menu .snooze-cancel { min-height: 40px !important; } } /* ────────────────────────────────────────────────────────────────────────── 4: Cabecera del hilo (thread) — breakpoint 480px (apretado en pantallas chicas) ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { /* El snippet de una línea aprieta fecha + abrir + chevron → se oculta. */ .thread-msg-snippet { display: none !important; } /* El nombre del remitente ya no necesita el cap de 240px. */ .thread-msg-from-row { max-width: none !important; } /* Tap más cómodo en "abrir en pantalla completa". */ .thread-msg-open { padding: 8px !important; min-height: 40px !important; } } /* ────────────────────────────────────────────────────────────────────────── 5: Inline reply dock — vh tapa el footer (barra dinámica iOS + teclado). Cambiamos a dvh SOLO en mobile para que "Enviar" quede siempre visible. Base en inline_reply.css (NO se toca): .ir-dock max-height:58vh, .is-open max-height:80vh, .is-full height/inset. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .ir-dock { max-height: 72dvh !important; } .ir-dock.is-open { max-height: 90dvh !important; bottom: 0 !important; } .ir-dock.is-full { height: 100dvh !important; } /* Footer del composer: taps cómodos y que el botón Enviar respire. */ .ir-foot .ir-icon { width: 40px !important; height: 40px !important; } .ir-send { min-height: 40px !important; } } /* ────────────────────────────────────────────────────────────────────────── 6: Modal adj-viewer — barra y taps. Base @ <=600px ya envuelve la barra; acá agrandamos los controles táctiles. Breakpoint 600px. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .adj-viewer-close { width: 40px !important; height: 40px !important; } .adj-viewer-dl, .adj-viewer-tab { min-height: 40px !important; padding: 9px 12px !important; } } /* ────────────────────────────────────────────────────────────────────────── 7: Modal lightbox — botón cerrar 36px + safe-area (notch). Base @ <=600px lo deja en 36px; lo subimos a 44px y respetamos safe-area. Breakpoint 600px. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .lightbox-close { width: 44px !important; height: 44px !important; top: max(8px, env(safe-area-inset-top)) !important; right: max(8px, env(safe-area-inset-right)) !important; } } /* ────────────────────────────────────────────────────────────────────────── 8: Compose flotante — taps de 26px, botón "expand" redundante en mobile (ya ocupa pantalla completa), y 100vh -> 100dvh. Breakpoint 600px (alineado al @media base de .compose-fab en styles.css). ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .compose-fab { height: 100dvh !important; max-height: none !important; } .compose-fab.is-fullscreen { height: auto !important; } .compose-fab-btn { width: 40px !important; height: 40px !important; } /* En mobile el compose ya es full-screen → "Pantalla completa" no aporta. */ .compose-fab-btn[data-cf-action="expand"] { display: none !important; } /* Tap cómodo en Enviar y acciones del pie del compose flotante. */ .compose-fab-send { min-height: 44px !important; } .compose-fab-attach-btn, .compose-fab-discard { min-width: 40px !important; min-height: 40px !important; } } /* ────────────────────────────────────────────────────────────────────────── 9: Compose clásico (/intranet/redactar/) — botones full-width en mobile para taps cómodos. Breakpoint 640px (equivale a max-sm de Tailwind). ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .rsp-compose-actions { gap: 10px !important; } .rsp-compose-send { width: 100% !important; min-height: 48px !important; text-align: center !important; } .rsp-compose-cancel { width: 100% !important; min-height: 44px !important; text-align: center !important; } } /* ────────────────────────────────────────────────────────────────────────── 10: Zoom-to-fit del CUERPO del correo (iframe.email-iframe) — mobile/tablet. El JS (_resizeEmailIframe en portal_helpers.js) escala el iframe a su ancho natural y lo encoge con transform:scale(<=1) hacia top-left para que un newsletter de 600px entre en el celular (estilo Gmail). Acá garantizamos que la CAJA que contiene al iframe recorte cualquier remanente: el iframe escalado, por la naturaleza de transform, puede reservar su ancho original en el layout → overflow-x:hidden mata el scroll horizontal residual. GATE: <=1024px (mismo breakpoint que el JS). En desktop estas reglas no existen → el detalle de PC queda 100% intacto. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .preview-content, .preview-content-html, .thread-msg-content { overflow-x: hidden !important; max-width: 100% !important; } }