/* ===================================================================== TEMA «FOCO» — el diseño nuevo del correo (11-sep-2026). OPCIONAL por persona: Configuración → Apariencia. Todo va bajo body.tema-foco, así el tema clásico no cambia ni un pixel. Aprobado por Luis sobre la muestra D2: - barra superior con buscador, Correo | Agenda, tres vistas, Mi día, Copiloto, lanzador de apps (nueve puntos), controles de ventana en la esquina; - carpetas con TODO el alto (las apps salen de la barra lateral); - lista y lector en una misma hoja blanca de esquinas grandes; - sin la barra del Workspace cuando el correo está maximizado (más alto); - claro y oscuro. En celular no cambia lo ya aprobado. ===================================================================== */ /* ---------- tokens ---------- */ body.tema-foco .mailapp{ --f-canvas:#f5f7f9; --f-paper:#fff; --f-line:#e7ecf0; --f-tx:#16222c; --f-mut:#6b7c8c; --f-acd:color-mix(in srgb,var(--ac) 74%,#000); --f-acs:color-mix(in srgb,var(--ac) 12%,#fff); --f-ia:#6f4bc4; --f-ias:#f1ecfb; --f-r:12px; --f-sh:0 1px 2px rgba(15,42,68,.08); } .nite body.tema-foco .mailapp{ --f-canvas:#0f161d; --f-paper:#161f29; --f-line:#243441; --f-tx:#e8eef3; --f-mut:#93a4b3; --f-acd:#7cc0f0; --f-acs:#1b3247; --f-ias:#2b2340; --f-sh:none; } /* ---------- ventana maximizada: sin la barra del Workspace ---------- */ body.tema-foco.foco-sinmenubar #menubar{ display:none; } body.tema-foco.foco-sinmenubar #desktop{ top:0; } /* ---------- el cuerpo: barra superior + correo ---------- */ body.tema-foco .body.mailapp{ display:flex; flex-direction:column; background:var(--f-canvas); overflow:hidden; color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile){ flex:1 1 auto; min-height:0; height:auto; background:var(--f-canvas); padding:0 10px 10px; } body.tema-foco .mailapp .mail:not(.mobile)>.mvrail{ display:none !important; } /* ---------- barra superior ---------- */ body.tema-foco .mailapp .foco-top{ display:flex; align-items:center; gap:8px; height:50px; padding:0 12px; flex:0 0 auto; position:relative; } body.tema-foco .mailapp.foco-movil .foco-top{ display:none; } body.tema-foco .mailapp .ft-b{ height:34px; min-width:34px; padding:0 10px; border:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:7px; color:var(--f-tx); background:transparent; font-size:12.5px; font-weight:600; line-height:1; font-family:inherit; cursor:pointer; white-space:nowrap; } body.tema-foco .mailapp .ft-b i{ font-size:18px; color:var(--f-mut); } body.tema-foco .mailapp .ft-b:hover{ background:color-mix(in srgb,var(--f-tx) 7%,transparent); } body.tema-foco .mailapp .ft-b.on{ background:var(--f-paper); box-shadow:var(--f-sh); } body.tema-foco .mailapp .ft-b.on i{ color:var(--f-acd); } body.tema-foco .mailapp .ft-b.ft-ia{ color:var(--f-ia); } body.tema-foco .mailapp .ft-b.ft-ia i{ color:var(--f-ia); } body.tema-foco .mailapp .ft-b.ft-ia.on{ background:var(--f-ias); } body.tema-foco .mailapp .ft-brand{ display:flex; align-items:center; gap:8px; margin:0 2px 0 0; } body.tema-foco .mailapp .ft-brand img{ width:28px; height:28px; border-radius:8px; object-fit:cover; } body.tema-foco .mailapp .ft-brand b{ font-size:14px; letter-spacing:-.01em; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; } body.tema-foco .mailapp .ft-sw,body.tema-foco .mailapp .ft-lay{ display:flex; gap:2px; background:color-mix(in srgb,var(--f-tx) 7%,transparent); border-radius:10px; padding:2px; flex:0 0 auto; } body.tema-foco .mailapp .ft-sw button,body.tema-foco .mailapp .ft-lay button{ border:0; background:transparent; border-radius:8px; height:30px; padding:0 11px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; line-height:1; font-family:inherit; color:var(--f-mut); cursor:pointer; white-space:nowrap; } body.tema-foco .mailapp .ft-lay button{ width:32px; padding:0; } body.tema-foco .mailapp .ft-sw button i,body.tema-foco .mailapp .ft-lay button i{ font-size:16px; } body.tema-foco .mailapp .ft-sw button.on,body.tema-foco .mailapp .ft-lay button.on{ background:var(--f-paper); color:var(--f-acd); box-shadow:var(--f-sh); } body.tema-foco .mailapp .ft-lay button:disabled{ opacity:.4; cursor:default; } body.tema-foco .mailapp .ft-search{ flex:0 1 560px; min-width:180px; margin:0 6px; } body.tema-foco .mailapp .ft-search .mail-search{ margin:0 !important; height:36px !important; padding:0 12px !important; border-radius:12px !important; background:var(--f-paper) !important; border:0 !important; box-shadow:var(--f-sh); } body.tema-foco .mailapp .ft-search .mail-search input{ font-size:13px; background:transparent; color:var(--f-tx); } body.tema-foco .mailapp .ft-search .mail-search .m-burger,body.tema-foco .mailapp .ft-search .ms-logo{ display:none !important; } body.tema-foco .mailapp .ft-grow{ flex:1 1 auto; } body.tema-foco .mailapp .ft-b.ft-grid{ width:34px; padding:0; border-radius:50%; } body.tema-foco .mailapp .ft-b.ft-grid i{ font-size:20px; } body.tema-foco .mailapp .ft-win{ display:flex; gap:2px; margin-left:4px; } body.tema-foco .mailapp .ft-win button{ width:26px; height:26px; border:0; border-radius:8px; background:transparent; color:var(--f-mut); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; } body.tema-foco .mailapp .ft-win button:hover{ background:color-mix(in srgb,var(--f-tx) 8%,transparent); color:var(--f-tx); } body.tema-foco .mailapp .ft-win button[data-ft="close"]:hover{ background:#e0473a; color:#fff; } body.tema-foco .mailapp .ft-me{ width:32px; height:32px; border-radius:50%; background:var(--f-acd); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; margin-left:2px; cursor:pointer; flex:0 0 auto; } /* lanzador de aplicaciones */ body.tema-foco .mailapp .ft-launch{ position:absolute; right:12px; top:50px; width:330px; background:var(--f-paper); border-radius:22px; box-shadow:0 2px 6px rgba(15,42,68,.10),0 18px 48px rgba(15,42,68,.22); padding:14px 12px 12px; z-index:80; } body.tema-foco .mailapp .ft-launch[hidden]{ display:none !important; } body.tema-foco .mailapp .fl-h{ font-size:13px; font-weight:600; color:var(--f-mut); margin:0 8px 6px; } body.tema-foco .mailapp .fl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } body.tema-foco .mailapp .fl-app{ border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px 10px; border-radius:14px; font-size:12px; font-weight:500; line-height:1.2; font-family:inherit; color:var(--f-tx); cursor:pointer; text-align:center; } body.tema-foco .mailapp .fl-app:hover{ background:var(--f-canvas); } body.tema-foco .mailapp .fl-app.on{ background:var(--f-acs); } body.tema-foco .mailapp .fl-ic{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; } body.tema-foco .mailapp .fl-sep{ height:1px; background:var(--f-line); margin:8px 4px; } body.tema-foco .mailapp .fl-row{ display:flex; align-items:center; gap:6px; padding:2px 6px; flex-wrap:wrap; } body.tema-foco .mailapp .fl-lb{ font-size:11.5px; color:var(--f-mut); font-weight:600; margin-right:4px; } body.tema-foco .mailapp .fl-grow{ flex:1; } body.tema-foco .mailapp .fl-chip{ border:0; background:var(--f-canvas); border-radius:9px; height:28px; padding:0 10px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; line-height:1; font-family:inherit; color:var(--f-tx); cursor:pointer; } body.tema-foco .mailapp .fl-chip.on{ background:var(--f-acs); color:var(--f-acd); } body.tema-foco .mailapp .fl-chip.fl-out{ color:#b8332f; } /* ---------- carpetas: todo el alto, sin panel ---------- */ body.tema-foco .mailapp .mail:not(.mobile)>.mail-folders{ background:transparent; border-right:0; padding:2px 8px 0 2px; width:232px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-compose{ height:40px; border-radius:12px; background:var(--ac); color:#fff; font-weight:600; justify-content:center; box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 30%,transparent); margin:0 2px 8px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--f-mut); padding:8px 10px 4px; } body.tema-foco .mailapp .mail:not(.mobile) .mfo{ border-radius:10px; min-height:31px; color:var(--f-tx); font-weight:500; margin-bottom:1px; } body.tema-foco .mailapp .mail:not(.mobile) .mfo:hover{ background:color-mix(in srgb,var(--f-tx) 6%,transparent); } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on{ background:var(--f-paper); color:var(--f-acd); font-weight:600; box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .mfo-ic,body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .nm{ color:var(--f-acd) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .badge{ background:var(--f-acs) !important; color:var(--f-acd) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mail-cfg{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-cfg:hover{ background:color-mix(in srgb,var(--f-tx) 6%,transparent); } body.tema-foco .mailapp .mail:not(.mobile)>.col-rz[data-rz="fold"]{ background:transparent; } body.tema-foco .mailapp .mail:not(.mobile)>.col-rz[data-rz="list"]{ background:var(--f-paper); } /* ---------- la hoja: lista + lector ---------- */ body.tema-foco .mailapp .mail:not(.mobile)>.mail-list{ background:var(--f-paper); border-right:1px solid var(--f-line); border-radius:12px 0 0 12px; box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile)>.mail-main{ background:var(--f-paper); border-radius:0 12px 12px 0; box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile).solocorreo>.mail-main{ border-radius:12px; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar{ padding:8px 10px 4px; gap:8px; border-bottom:0; background:transparent; min-height:0; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn{ height:30px; border-radius:9px; background:var(--f-canvas); border:0; font-weight:600; color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .lb-digest,body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot{ display:none; } /* viven en la barra superior */ body.tema-foco .mailapp .mail:not(.mobile) .lb-ref{ border-radius:9px; } body.tema-foco .mailapp .mail:not(.mobile) .bulk-bar{ border-radius:10px; margin:0 8px 6px; } body.tema-foco .mailapp .mail:not(.mobile) .copilot{ border-radius:12px; margin:0 8px 6px; } body.tema-foco .mailapp .mail:not(.mobile) .mgrp{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--f-mut); font-weight:700; padding:8px 12px 3px; background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .mrow{ border-radius:12px; margin:1px 6px; padding:8px 10px; border-bottom:0; } body.tema-foco .mailapp .mail:not(.mobile) .mrow:hover{ background:var(--f-canvas); } body.tema-foco .mailapp .mail:not(.mobile) .mrow.on{ background:var(--f-acs); } body.tema-foco .mailapp .mail:not(.mobile) .mrow.on::after{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.sel{ background:var(--f-acs); } body.tema-foco .mailapp .mail:not(.mobile) .mrow .mav,body.tema-foco .mailapp .mail:not(.mobile) .mrow-pick .mav{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .mrow-chk{ border-radius:8px; } body.tema-foco .mailapp .mail:not(.mobile) .mrow-hov button{ border-radius:9px; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .who,body.tema-foco .mailapp .mail:not(.mobile) .mrow .subj{ color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .mrow .prev{ color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .list-more{ border-radius:10px; } /* ---------- pestañas (correos abiertos y redactar) ---------- */ body.tema-foco .mailapp .mail:not(.mobile) .mail-tabs{ background:transparent; height:44px; padding:8px 10px 0; gap:6px; border:0; border-bottom:1px solid var(--f-line); align-items:center; } body.tema-foco .mailapp .mail:not(.mobile) .mtab{ border-radius:9px; background:var(--f-canvas); color:var(--f-tx); margin:0; height:30px; padding:0 8px 0 12px; font-weight:500; } body.tema-foco .mailapp .mail:not(.mobile) .mtab:hover{ background:color-mix(in srgb,var(--f-tx) 8%,var(--f-canvas)); } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on{ background:var(--f-acs); color:var(--f-acd); font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mtab i{ opacity:1; } body.tema-foco .mailapp .mail:not(.mobile) .mtab-x{ border-radius:6px; } /* ---------- lector ---------- */ body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar{ padding:8px 16px; border-bottom:1px solid var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn{ border:0; background:var(--f-canvas); border-radius:10px !important; height:32px; color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn:hover{ background:color-mix(in srgb,var(--f-tx) 9%,var(--f-canvas)); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn i{ color:var(--f-acd); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.primary{ background:var(--ac); color:#fff; box-shadow:0 3px 10px color-mix(in srgb,var(--ac) 25%,transparent); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.primary i{ color:#fff; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.ai{ background:var(--f-ias); color:var(--f-ia); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.ai i,body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn .tbcv{ color:var(--f-ia); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.danger,body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.danger i{ color:#b8332f; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn-sep{ background:var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .mv-navb,body.tema-foco .mailapp .mail:not(.mobile) .mv-back,body.tema-foco .mailapp .mail:not(.mobile) .mv-solo{ border:0 !important; background:var(--f-canvas) !important; border-radius:9px !important; color:var(--f-acd) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mv-head{ padding:14px 22px 10px; border-bottom:0; background:transparent; } body.tema-foco .mailapp .mail:not(.mobile) .mv-subj{ font-size:17px; color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .mv-av{ border-radius:11px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-from{ color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .mv-atts{ background:transparent !important; border-top:1px solid var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .mv-att{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .attb-more,body.tema-foco .mailapp .mail:not(.mobile) .att-all{ border-radius:9px; } body.tema-foco .mailapp .mail-empty{ color:var(--f-mut); } /* ---------- redactar ---------- */ body.tema-foco .mailapp .mail:not(.mobile) .compose-pane{ background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .compose-fields .frow{ border-bottom:1px solid var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .compose-fields input{ color:var(--f-tx); background:transparent; } body.tema-foco .mailapp .mail:not(.mobile) .compose-ai{ background:var(--f-ias); } body.tema-foco .mailapp .mail:not(.mobile) .compose-ai input{ border-radius:10px; border-color:transparent; } body.tema-foco .mailapp .mail:not(.mobile) .compose-ai .aibtn{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .rt-toolbar{ background:var(--f-canvas); border-radius:10px; margin:6px 12px 0; border:0; } body.tema-foco .mailapp .mail:not(.mobile) .compose-foot .send{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .compose-foot .ghostbtn{ border-radius:10px; background:var(--f-canvas); border:0; color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .compose-foot .ghostbtn i{ color:var(--f-acd); } body.tema-foco .mailapp .mail:not(.mobile) .catt{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .compose-atts{ background:transparent; } /* ---------- configuración, reglas, calendario, nube ---------- */ body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane{ background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .cfg-sec{ border-radius:12px; border:1px solid var(--f-line); background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .cal-main{ background:var(--f-paper); border-radius:12px; box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile).calmode>.mail-folders .calside{ } body.tema-foco .mailapp .mail:not(.mobile).nubemode>.nb-wrap{ background:var(--f-paper); border-radius:12px; box-shadow:var(--f-sh); } /* menús flotantes (van pegados al body) */ body.tema-foco .row-menu{ border-radius:12px; box-shadow:0 12px 32px rgba(15,42,68,.18); border:0; padding:6px; } body.tema-foco .row-menu .rm-it{ border-radius:8px; } /* ---------- selector del tema en Configuración (se ve en los dos temas) ---------- */ .cfg-temas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-top:8px; } .cfg-tema{ border:1px solid #d5dde4; border-radius:10px; padding:10px; cursor:pointer; background:#fff; text-align:left; font:inherit; color:inherit; } .cfg-tema.on{ border-color:var(--ac); box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 25%,#fff); } .cfg-tema b{ display:block; font-size:14px; font-weight:600; margin-top:8px; } .cfg-tema span{ display:block; font-size:12px; color:#5f7280; margin-top:2px; } .cfg-tema .prev{ height:74px; border-radius:8px; display:flex; gap:4px; padding:6px; } .cfg-tema .prev i{ display:block; border-radius:3px; } .cfg-tema.t-clasico .prev{ background:#e9eef2; } .cfg-tema.t-clasico .prev i:nth-child(1){ width:12px; background:#1d4f7a; } .cfg-tema.t-clasico .prev i:nth-child(2){ width:34px; background:#fff; } .cfg-tema.t-clasico .prev i:nth-child(3){ width:52px; background:#fff; } .cfg-tema.t-clasico .prev i:nth-child(4){ flex:1; background:#fff; } .cfg-tema.t-foco .prev{ background:#f5f7f9; flex-direction:column; gap:4px; } .cfg-tema.t-foco .prev i:nth-child(1){ height:9px; width:100%; background:#fff; border-radius:4px; } .cfg-tema.t-foco .prev i:nth-child(2){ flex:1; width:100%; background:linear-gradient(90deg,transparent 0 22%,#fff 22%); border-radius:8px; } .nite .cfg-tema{ background:transparent; border-color:rgba(255,255,255,.2); } /* ---------- la barra superior NUNCA se monta: todo con ancho fijo, el buscador encoge ---------- */ body.tema-foco .mailapp .foco-top>*{ flex:0 0 auto; } body.tema-foco .mailapp .foco-top>.ft-search{ flex:1 1 220px; min-width:160px; } body.tema-foco .mailapp .foco-top>.ft-grow{ flex:0 1 24px; } body.tema-foco .mailapp .ft-sw button span{ white-space:nowrap; } /* compacto: solo iconos (cada uno conserva su aviso al pasar el mouse) */ body.tema-foco .mailapp .foco-top.ft-c1 .ft-sw button span, body.tema-foco .mailapp .foco-top.ft-c1 .ft-b span, body.tema-foco .mailapp .foco-top.ft-c1 .ft-brand b{ display:none; } body.tema-foco .mailapp .foco-top.ft-c1 .ft-sw button{ padding:0 9px; } body.tema-foco .mailapp .foco-top.ft-c1 .ft-b{ padding:0 8px; } /* mínimo: Mi día, Copiloto y las vistas pasan al lanzador de los nueve puntos */ body.tema-foco .mailapp .foco-top.ft-c2 .ft-lay, body.tema-foco .mailapp .foco-top.ft-c2 [data-ft="dia"], body.tema-foco .mailapp .foco-top.ft-c2 [data-ft="cop"]{ display:none; } body.tema-foco .mailapp .foco-top.ft-c2 .ft-brand{ display:none; } /* ---------- filtro de la lista como segmentos (igual a la maqueta): Todos · No leídos · Con adjunto ---------- */ body.tema-foco .mailapp .mail:not(.mobile) .list-bar{ padding:8px 10px 6px; gap:8px; align-items:center; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fdrop{ flex:1 1 auto; min-width:0; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fmenu{ display:flex !important; position:static; min-width:0; width:100%; gap:2px; padding:2px; background:var(--f-canvas); border:0; border-radius:10px; box-shadow:none; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem{ flex:1 1 0; min-width:0; height:28px; padding:0 6px; border-radius:8px; justify-content:center; font-size:12px; font-weight:600; color:var(--f-mut); background:transparent; gap:5px; white-space:nowrap; overflow:hidden; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem>i{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on{ background:var(--f-paper); color:var(--f-tx); box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem:hover{ background:color-mix(in srgb,var(--f-tx) 6%,var(--f-canvas)); } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem .lb-fi-tx{ overflow:hidden; text-overflow:ellipsis; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem .lb-fi-n{ color:var(--f-mut); font-weight:600; margin-left:0; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on .lb-fi-n{ color:var(--f-acd); } body.tema-foco .mailapp .mail:not(.mobile) .lb-stats{ display:none; } /* el conteo ya va en el segmento «Todos» */ body.tema-foco .mailapp .mail:not(.mobile) .lb-all{ margin-right:2px; } /* ===================================================================== VALORES EXACTOS DE LA MAQUETA D2 (12-sep-2026). Van al final para ganar la cascada. ===================================================================== */ /* ---- paleta: la de la maqueta. El acento pasa a ser el azul de la maqueta DENTRO del correo en Foco (la marca de la empresa lo define para el clásico; en Foco se respeta la maqueta aprobada). ---- */ body.tema-foco .mailapp{ --ac:#2a8fd6; --ac2:#43c6b0; --f-canvas:#f5f7f9; --f-paper:#fff; --f-line:#e7ecf0; --f-tx:#16222c; --f-mut:#6b7c8c; --f-acd:#1b6cab; --f-acs:#e6f1fb; --f-ia:#6f4bc4; --f-ias:#f1ecfb; --f-ok:#1e8e4e; --f-del:#c0392b; --m-ink:#16222c; --m-ink2:#6b7c8c; --m-line:#e7ecf0; --m-main:#fff; } .nite body.tema-foco .mailapp{ --f-canvas:#0f161d; --f-paper:#161f29; --f-line:#243441; --f-tx:#e8eef3; --f-mut:#93a4b3; --f-acd:#7cc0f0; --f-acs:#1b3247; --f-ias:#2b2340; --m-ink:#e8eef3; --m-ink2:#93a4b3; --m-line:#243441; --m-main:#161f29; } body.tema-foco .mailapp,body.tema-foco .mailapp .mail:not(.mobile){ color:var(--f-tx); } /* ---- barra superior: 52 px, botones 34 px radio 10, Correo|Agenda 30 px radio 8 ---- */ body.tema-foco .mailapp .foco-top{ height:52px; } body.tema-foco .mailapp .ft-brand b{ font-weight:700; } body.tema-foco .mailapp .ft-sw button{ height:30px; padding:0 11px; } body.tema-foco .mailapp .ft-b span{ font-weight:600; } /* ---- carpetas: filas 31 px, icono gris, conteo gris; activa blanca con azul oscuro ---- */ body.tema-foco .mailapp .mail:not(.mobile) .mfo{ min-height:31px; height:31px; font-size:13px; font-weight:500; padding-top:0; padding-bottom:0; gap:9px; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .mfo-ic{ color:#8a9bab !important; font-size:16px; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ background:transparent !important; color:var(--f-mut) !important; font-size:11.5px !important; font-weight:600 !important; padding:0 !important; min-width:0 !important; box-shadow:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on{ font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .mfo-ic,body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .nm,body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .badge{ color:var(--f-acd) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo-tw{ color:#8a9bab; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ font-size:10.5px; letter-spacing:.08em; color:var(--f-mut); font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mail-usage{ font-size:11.5px; color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .mail-cfg{ height:31px; font-size:13px; font-weight:500; color:var(--f-tx); border-radius:10px; gap:9px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-cfg i{ color:#8a9bab; font-size:16px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-compose{ height:40px; font-size:13px; font-weight:600; } /* ---- la hoja y la lista: 368 px, filtro en segmentos 32/28, rótulos de día 10,5 px ---- */ body.tema-foco .mailapp .mail:not(.mobile) .mail-list{ box-shadow:0 1px 2px rgba(15,42,68,.06); } body.tema-foco .mailapp .mail:not(.mobile) .mail-main{ box-shadow:0 1px 2px rgba(15,42,68,.06); } body.tema-foco .mailapp .mail:not(.mobile) .lb-fmenu{ height:32px; border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem{ height:28px; border-radius:8px; font-size:12px; } body.tema-foco .mailapp .mail:not(.mobile) .mgrp{ font-size:10.5px; letter-spacing:.08em; font-weight:700; color:var(--f-mut); padding:6px 12px 3px; text-transform:uppercase; } /* filas: avatar 36 cuadrado suave (radio 11), nombre 13,5/500 (700 sin leer), hora 11,5 azul oscuro + punto */ body.tema-foco .mailapp .mail:not(.mobile) .mrow{ padding:7px 10px 7px 12px; gap:10px; border-radius:12px; margin:1px 6px; align-items:flex-start; } body.tema-foco .mailapp .mail:not(.mobile) .mrow-pick,body.tema-foco .mailapp .mail:not(.mobile) .mrow-pick .mav,body.tema-foco .mailapp .mail:not(.mobile) .mrow .mav{ width:36px; height:36px; border-radius:11px; font-size:12px; } body.tema-foco .mailapp .mail:not(.mobile) .mrow-chk{ width:36px; height:36px; border-radius:11px; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .mav{ box-shadow:none; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .who{ font-size:13.5px; font-weight:500; color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .who{ font-weight:700; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .subj{ font-size:13px; font-weight:400; color:var(--f-tx); margin-top:0; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .subj{ font-weight:700; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .prev{ font-size:12px; color:var(--f-mut); margin-top:0; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .when{ font-size:11.5px; color:var(--f-mut); font-weight:500; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .when{ color:var(--f-acd); font-weight:700; } body.tema-foco .mailapp .mail:not(.mobile) .mrow-dot{ width:7px; height:7px; background:var(--ac); } body.tema-foco .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco .mailapp .mail:not(.mobile) .mrow.sel{ background:#e6f1fb; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247; } body.tema-foco .mailapp .mail:not(.mobile) .mrow:hover{ background:var(--f-canvas); } body.tema-foco .mailapp .mail:not(.mobile) .mrow-hov button{ width:28px; height:28px; border-radius:9px; background:var(--f-paper); box-shadow:0 1px 3px rgba(15,42,68,.16); color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .mrow-clip,body.tema-foco .mailapp .mail:not(.mobile) .mrow-ext{ color:var(--f-mut); } /* ---- lector: barra 4 px de aire arriba/abajo, botones 32 radio 10, título 17/600, avatar 38 radio 11 ---- */ body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar{ padding:9px 14px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools{ gap:6px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn{ font-size:12.5px; font-weight:600; padding:0 12px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.primary{ box-shadow:0 3px 10px rgba(42,143,214,.25); } body.tema-foco .mailapp .mail:not(.mobile) .mv-navgrp{ gap:2px; background:var(--f-canvas); border-radius:10px; padding:2px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-navb,body.tema-foco .mailapp .mail:not(.mobile) .mv-back,body.tema-foco .mailapp .mail:not(.mobile) .mv-solo{ width:28px !important; height:28px !important; border-radius:8px !important; background:transparent !important; margin:0 !important; color:var(--f-mut) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mv-navb:hover:not(:disabled),body.tema-foco .mailapp .mail:not(.mobile) .mv-solo:hover{ background:var(--f-paper) !important; color:var(--f-acd) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mv-head{ padding:14px 22px 10px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-subj{ font-size:17px; font-weight:600; letter-spacing:-.012em; color:var(--f-tx); margin:0 0 10px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-av{ width:38px; height:38px; border-radius:11px; font-size:13px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-from{ font-size:13.5px; font-weight:600; color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .mv-femail{ color:var(--f-mut); font-weight:400; } body.tema-foco .mailapp .mail:not(.mobile) .mv-chip,body.tema-foco .mailapp .mail:not(.mobile) .mv-verif{ border-radius:7px; font-size:11px; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mv-toline{ color:var(--f-mut); font-size:12px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-when{ color:var(--f-mut); font-size:12px; font-weight:400; } /* el cuerpo del correo en su tarjeta, como la maqueta */ body.tema-foco .mailapp .mail:not(.mobile) .mail-main .mail-html{ width:auto; align-self:stretch; margin:4px 22px 12px; border:1px solid var(--f-line); border-radius:12px; background:#fbfcfd; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mail-main .mail-html{ background:#121b25; } body.tema-foco .mailapp .mail:not(.mobile) .mv-atts{ padding:0 22px 14px !important; border-top:0; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att{ border-radius:10px; font-size:12.5px; border:1px solid var(--f-line); background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-nm{ font-weight:500; color:var(--f-tx); } /* ---- pestañas: píldoras 30 px radio 9; activa azul claro con azul oscuro ---- */ body.tema-foco .mailapp .mail:not(.mobile) .mtab{ font-size:12.5px; } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on{ background:#e6f1fb; color:#1b6cab; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab.on{ background:#1b3247; color:#7cc0f0; } /* ---- redactar flotante cuando las carpetas están cerradas (vista 2 y 3) ---- */ body.tema-foco .mailapp .foco-fab{ position:absolute; right:26px; bottom:26px; height:44px; padding:0 16px 0 12px; border:0; border-radius:14px; background:var(--ac); color:#fff; display:none; align-items:center; gap:8px; font-size:13px; font-weight:600; line-height:1; font-family:inherit; box-shadow:0 10px 24px rgba(42,143,214,.35); cursor:pointer; z-index:30; } body.tema-foco .mailapp .foco-fab i{ font-size:19px; } body.tema-foco .mailapp .mail:not(.mobile).panelhidden ~ .foco-fab,body.tema-foco .mailapp .mail:not(.mobile).solocorreo ~ .foco-fab{ display:inline-flex; } /* ===== AJUSTES FINOS CONTRA LA MAQUETA (medidos) ===== */ /* conteo de la carpeta activa: texto azul oscuro sin fondo */ body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .badge{ background:transparent !important; } /* textos de la fila: los del clásico tienen reglas muy específicas; aquí mandan los de la maqueta */ body.tema-foco .mailapp .mail:not(.mobile) .mrow .who{ color:var(--f-tx) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .subj{ color:var(--f-tx) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .prev{ color:var(--f-mut) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .when{ color:var(--f-mut) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .when{ color:var(--f-acd) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco .mailapp .mail:not(.mobile) .mrow.sel{ background:#e6f1fb !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247 !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.on::after{ display:none !important; } /* fichas de adjuntos: radio 10 (el clásico lo fija con !important) */ body.tema-foco .mailapp .mail:not(.mobile) .mv-att{ border-radius:10px !important; } /* fila seleccionada: sin el borde azul interior del clasico (la maqueta solo tiene el fondo azul claro) */ body.tema-foco .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco .mailapp .mail:not(.mobile) .mrow.on:hover{ box-shadow:none !important; } /* NO LEÍDO como en la maqueta: SOLO negrita, hora azul y punto. Sin tinte azul de fondo, sin la barrita/punto ::before del clásico, sin sombra en el avatar. El azul de fondo es solo para el correo SELECCIONADO (.on). Luis, 12-sep: «el que se ve azul es el que estoy seleccionando». */ body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread, body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread:hover{ background:transparent !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread:hover{ background:var(--f-canvas) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread.on{ background:#e6f1fb !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow::before, body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread::before{ display:none !important; content:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .mav, body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .mav{ box-shadow:none !important; text-shadow:none !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread, .nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread:hover{ background:transparent !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread:hover{ background:var(--f-canvas) !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread.on{ background:#1b3247 !important; } /* ===== SIN SCROLL HORIZONTAL EN LA LISTA (medido: fila 100% + margen 6+6 = 12px de sobra) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mrow{ width:auto; } body.tema-foco .mailapp .mail:not(.mobile) .mail-list #ml{ overflow-x:hidden; } /* ===== TITULO DE GRUPO ALINEADO CON LA MAQUETA (texto a 16px; en la maqueta .rows tiene 6px + .day 10px) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mgrp{ padding:6px 16px 3px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-list #ml{ padding-bottom:6px; } /* ===== ALTURAS DE LINEA IGUALES A LA MAQUETA (fila 70px, título de grupo 24px; medido) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mgrp{ line-height:1.45 !important; min-height:0 !important; height:auto !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .who, body.tema-foco .mailapp .mail:not(.mobile) .mrow .subj, body.tema-foco .mailapp .mail:not(.mobile) .mrow .prev{ line-height:1.45 !important; } /* ===== FILA DE 70PX COMO LA MAQUETA (el clásico mete 3px entre remitente y asunto) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mrow .l2{ margin-top:0 !important; } /* ===== ALMACENAMIENTO Y ENLACES COMO LA MAQUETA (medido contra _muestras-diseno-d2) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-usage{ display:flex; flex-wrap:wrap; align-items:baseline; padding:8px 10px 4px; border-top:0 !important; font-size:11.5px; font-weight:400; color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .usg-top{ display:inline-flex; order:1; margin:0; font-size:11.5px; font-weight:400; color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .usg-top i, body.tema-foco .mailapp .mail:not(.mobile) .usg-pct{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .usg-txt{ order:2; margin:0; font-size:11.5px; color:var(--f-mut); white-space:nowrap; } body.tema-foco .mailapp .mail:not(.mobile) .usg-txt::before{ content:" · "; white-space:pre; } body.tema-foco .mailapp .mail:not(.mobile) .usg-bar{ order:3; flex:0 0 100%; height:4px; border-radius:2px; background:#dfe5eb; margin-top:6px; } body.tema-foco .mailapp .mail:not(.mobile) .usg-fill{ background:var(--ac); border-radius:2px; } .nite body.tema-foco .mailapp .mail:not(.mobile) .usg-bar{ background:#2a3a48; } body.tema-foco .mailapp .mail:not(.mobile) .mail-cfg{ margin-top:2px; padding:0 10px; gap:10px; } body.tema-foco .mailapp .mail:not(.mobile) #mbitacora{ display:none; } /* en Foco, Bitácora vive en el lanzador de los nueve puntos */ /* ===== ALTURA DE LINEA DEL ALMACENAMIENTO (bloque de 39px como la maqueta) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .usg-top, body.tema-foco .mailapp .mail:not(.mobile) .usg-txt{ line-height:1.45; } /* ===== MODO NOCHE: AJUSTES MEDIDOS (vista principal, lector y lanzador) ===== */ .nite body.tema-foco .mailapp .ft-me{ color:#0f161d; } /* inicial oscura sobre azul claro (9:1) */ .nite body.tema-foco .mailapp .ft-launch{ border-color:var(--f-line) !important; } .nite body.tema-foco .mailapp .ft-sw button.on{ background:var(--f-acs); color:var(--f-acd); } .nite body.tema-foco .mailapp .ft-search .mail-search{ color:var(--f-mut); } .nite body.tema-foco .mailapp .ft-search .mail-search input{ color:var(--f-tx); } .nite body.tema-foco .mailapp .ft-search .mail-search input::placeholder{ color:var(--f-mut); } .nite body.tema-foco .mailapp .ft-search .mail-search i,.nite body.tema-foco .mailapp .ft-search .mail-search button{ color:var(--f-mut); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo.on{ background:var(--f-acs); box-shadow:none; } /* ===== CONFIGURACION Y REGLAS EN FOCO (lienzo y radios del tema; noche medida) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .cfg-scroll{ background:var(--f-canvas); } body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane input:not([type=checkbox]):not([type=radio]), body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane select, body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane textarea{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .send, body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .ghostbtn, body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .pwf-inp, body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .cfg-fuente, body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .rule-ai{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .ghostbtn{ background:var(--f-canvas); color:var(--f-tx); } .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane input:not([type=checkbox]):not([type=radio]), .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane select, .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane textarea{ background:#0d1620; color:var(--f-tx); border-color:var(--f-line); } .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .sig-card-h, .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .rule-ai{ background:var(--f-acs); border-color:var(--f-line); } .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .sig-badge{ background:var(--f-acs); color:var(--f-acd); } .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .ghostbtn{ background:rgba(255,255,255,.07); color:var(--f-tx); } /* ===== NOMBRE DE LA FIRMA EN NOCHE (medido: 1:1) ===== */ .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .sig-card-h, .nite body.tema-foco .mailapp .mail:not(.mobile) .cfg-pane .sig-card-h b{ color:var(--f-tx); } /* ===== AGENDA EN FOCO (cabecera, segmentos y botones con los mismos radios y tokens; noche medida) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .cal-title{ color:var(--f-tx); font-weight:600; letter-spacing:-.01em; } body.tema-foco .mailapp .mail:not(.mobile) .cal-nav button{ border-radius:10px; border:0; background:var(--f-canvas); color:var(--f-tx); height:32px; } body.tema-foco .mailapp .mail:not(.mobile) .cal-nav button:hover{ background:color-mix(in srgb,var(--f-tx) 8%,var(--f-canvas)); } body.tema-foco .mailapp .mail:not(.mobile) .cal-ai{ border-radius:12px; border-color:var(--f-line); background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .cal-seg{ background:var(--f-canvas); border-radius:10px; padding:2px; height:32px; box-sizing:border-box; } body.tema-foco .mailapp .mail:not(.mobile) .cal-seg button{ border-radius:8px; height:28px; color:var(--f-mut); font-weight:600; background:transparent; } body.tema-foco .mailapp .mail:not(.mobile) .cal-seg button.on{ background:var(--f-paper); color:var(--f-tx); box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile) .cal-side-new{ height:40px; border-radius:12px; background:var(--ac); color:#fff; font-weight:600; box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 30%,transparent); } .nite body.tema-foco .mailapp .mail:not(.mobile) .cm-dn.on, .nite body.tema-foco .mailapp .mail:not(.mobile) .tg-dnum.on{ color:#fff; } .nite body.tema-foco .mailapp .mail:not(.mobile) .cal-ai{ background:#0d1620; } /* ===== MINI CALENDARIO EN NOCHE (título y flechas legibles; medido) ===== */ .nite body.tema-foco .mailapp .mail:not(.mobile) .cmini-head span{ color:var(--f-tx); } .nite body.tema-foco .mailapp .mail:not(.mobile) .cmini-nav{ color:var(--f-mut); } /* ===== NUBE EN FOCO (radios y tokens del tema; noche medida en la pantalla de conexión) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .nb-lado{ background:var(--f-canvas); border-right:1px solid var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .nb-nueva, body.tema-foco .mailapp .mail:not(.mobile) .nb-nav, body.tema-foco .mailapp .mail:not(.mobile) .nb-btn, body.tema-foco .mailapp .mail:not(.mobile) .nb-ico{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .nb-buscar{ border-radius:12px; } body.tema-foco .mailapp .mail:not(.mobile) .nb-subir{ height:40px; border-radius:12px; box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 30%,transparent); } body.tema-foco .mailapp .mail:not(.mobile) .nube .gr{ border-radius:18px; } body.tema-foco .mailapp .mail:not(.mobile) .nb-pasos li b{ border-radius:8px; } .nite body.tema-foco .mailapp .mail:not(.mobile) .nube{ background:var(--f-paper); color:var(--f-tx); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-lado{ background:var(--f-canvas); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-nueva{ background:transparent; color:var(--f-tx); border-color:var(--f-line); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-nav{ color:var(--f-tx); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-nav.on{ background:var(--f-acs); color:var(--f-acd); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-buscar{ background:#0d1620; border-color:var(--f-line); color:var(--f-tx); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-buscar input{ color:var(--f-tx); background:transparent; } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-pasos li b{ background:var(--f-acs); color:var(--f-acd); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nube h3{ color:var(--f-tx); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nube p{ color:var(--f-mut); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nb-btn:not(.fuerte):not(.malo){ background:rgba(255,255,255,.07); color:var(--f-tx); border-color:var(--f-line); } .nite body.tema-foco .mailapp .mail:not(.mobile) .nube input, .nite body.tema-foco .mailapp .mail:not(.mobile) .nube select{ background:#0d1620; color:var(--f-tx); border-color:var(--f-line); } /* ===== BARRA DE SELECCION MULTIPLE EN FOCO (radios y alturas del tema; medido) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .bulk-bar{ border-radius:12px; padding:8px 10px; gap:6px; box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 25%,transparent); } body.tema-foco .mailapp .mail:not(.mobile) .bulk-bar .bb-n{ font-weight:600; font-size:12.5px; flex:0 0 100%; margin-bottom:2px; } body.tema-foco .mailapp .mail:not(.mobile) .bulk-bar button{ border-radius:8px; height:28px; padding:0 10px; font-size:12px; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .bulk-bar button.bb-x{ width:28px; height:28px; padding:0; margin-left:auto; justify-content:center; border-radius:8px; } /* ===== COPILOTO EN FOCO (tarjeta y botones IA con los tokens de la maqueta; noche medida) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .copilot{ border-radius:12px; border:1px solid var(--f-line); box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile) .cop-title{ color:var(--f-ia); font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .cop-src{ color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .cop-cfg{ border-radius:8px; border:0; background:var(--f-ias); color:var(--f-ia); height:26px; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .cop-cfg:hover{ background:color-mix(in srgb,var(--f-ia) 18%,var(--f-ias)); } body.tema-foco .mailapp .mail:not(.mobile) .cop-hero{ border-radius:10px; border:0; background:#6f4bc4; color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(111,75,196,.25); } .nite body.tema-foco .mailapp{ --f-ia:#b9a6ef; } .nite body.tema-foco .mailapp .mail:not(.mobile) .copilot{ background:var(--f-paper); } /* ===== SIN RAYAS: PRIORIDAD DEL COPILOTO Y PESTANA ACTIVA (Luis: «no quiero esas rayas») ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mrow.cop-p-alta, body.tema-foco .mailapp .mail:not(.mobile) .mrow.cop-p-media{ box-shadow:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .mtab, body.tema-foco .mailapp .mail:not(.mobile) .mtab.on{ border:0 !important; box-shadow:none !important; outline:none !important; } /* ===== ADJUNTOS DEL LECTOR EN FOCO (barra de una línea, fichas tipo tarjeta; medido) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-atts.one{ background:var(--f-canvas) !important; border-top:1px solid var(--f-line) !important; padding:10px 22px !important; border-radius:0 0 12px 0; } body.tema-foco .mailapp .mail:not(.mobile) .mv-atts-bar{ gap:10px; } body.tema-foco .mailapp .mail:not(.mobile) .attb-count{ background:transparent; color:var(--f-mut); padding:0; font-size:12px; font-weight:600; gap:5px; } body.tema-foco .mailapp .mail:not(.mobile) .attb-count i{ color:var(--f-mut); font-size:15px; } body.tema-foco .mailapp .mail:not(.mobile) .attb-strip{ gap:8px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att{ height:38px; padding:0 8px 0 6px; border-radius:10px !important; background:var(--f-paper); border:1px solid var(--f-line); color:var(--f-tx); gap:8px; max-width:320px; box-shadow:none; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att:hover{ border-color:color-mix(in srgb,var(--ac) 45%,var(--f-line)); box-shadow:var(--f-sh); } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic{ width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; background:var(--f-canvas); color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-pdf{ background:#fdecea; color:#d9433a; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-xls{ background:#e6f6ec; color:#1e8e4e; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-doc{ background:#e6f1fb; color:#1b6cab; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-ppt{ background:#fdeee6; color:#c2571a; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-photo{ background:#f1ecfb; color:#6f4bc4; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-zip{ background:#fff4e0; color:#b26a00; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-nm{ font-size:12.5px; font-weight:600; color:var(--f-tx); max-width:190px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-sz{ font-size:11px; color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-prev,body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-dl,body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-nube{ width:26px; height:26px; border-radius:7px; color:var(--f-mut); font-size:14px; display:inline-flex; align-items:center; justify-content:center; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-prev:hover,body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-dl:hover,body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-nube:hover{ background:var(--f-acs); color:var(--f-acd); } body.tema-foco .mailapp .mail:not(.mobile) .attb-more{ height:32px; padding:0 12px; border-radius:10px; background:var(--f-paper); border:1px solid var(--f-line); color:var(--f-tx); font-size:12px; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .attb-more:hover{ background:var(--f-canvas); } body.tema-foco .mailapp .mail:not(.mobile) .mv-atts.one .att-all{ height:32px; padding:0 12px; border-radius:10px; background:var(--f-acs); color:var(--f-acd); font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-left:auto; } body.tema-foco .mailapp .mail:not(.mobile) .mv-atts.one .att-all:hover{ background:color-mix(in srgb,var(--ac) 22%,var(--f-paper)); text-decoration:none; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-pdf{ background:#3a2220; color:#f28b82; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-xls{ background:#1f3a2a; color:#7fd19c; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-doc{ background:#1b3247; color:#7cc0f0; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-type-ppt{ background:#3a2a1f; color:#f0a37a; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-photo{ background:#2b2340; color:#b9a6ef; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-ic.ti-file-zip{ background:#3a2f1a; color:#f0c36b; } /* ===== REMATE ADJUNTOS: RADIOS DE LOS BOTONES Y ANCHO DE LA NUBE (medido) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-atts.one .att-all, body.tema-foco .mailapp .mail:not(.mobile) .mv-atts.one .attb-more{ border-radius:10px !important; } body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-nube{ width:26px !important; } /* ===== BUSQUEDA AVANZADA EN FOCO (hoja, campos y botones con los tokens; noche medida) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .adv-sheet{ border-radius:14px; border:1px solid var(--f-line); box-shadow:0 12px 40px rgba(15,42,68,.14); background:var(--f-paper); color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .adv-eyebrow{ color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .adv-x{ width:30px; height:30px; border-radius:9px; color:var(--f-mut); } body.tema-foco .mailapp .mail:not(.mobile) .adv-x:hover{ background:var(--f-canvas); color:var(--f-tx); } body.tema-foco .mailapp .mail:not(.mobile) .adv-lab{ color:var(--f-mut); font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .adv-in{ border-radius:10px !important; border:1px solid var(--f-line); background:var(--f-paper); color:var(--f-tx); min-height:36px; padding:0 10px; } body.tema-foco .mailapp .mail:not(.mobile) .adv-in:focus{ border-color:var(--ac); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 18%,transparent); outline:none; } body.tema-foco .mailapp .mail:not(.mobile) .adv-knob{ background:var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .adv-foot{ border-top:1px solid var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .adv-btn-ghost{ border-radius:10px; border:1px solid var(--f-line); background:var(--f-paper); color:var(--f-tx); height:32px; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .adv-btn-ghost:hover{ background:var(--f-canvas); } body.tema-foco .mailapp .mail:not(.mobile) .adv-btn-go{ border-radius:10px; background:var(--ac); color:#fff; height:32px; font-weight:600; box-shadow:0 4px 12px color-mix(in srgb,var(--ac) 25%,transparent); } .nite body.tema-foco .mailapp .mail:not(.mobile) .adv-in{ background:#0d1620; color:var(--f-tx); border-color:var(--f-line); } .nite body.tema-foco .mailapp .mail:not(.mobile) .adv-knob{ background:#2a3a48; } .nite body.tema-foco .mailapp .mail:not(.mobile) .adv-btn-ghost{ background:rgba(255,255,255,.07); } /* remate adjuntos: la nube medía 24px de ancho */ body.tema-foco .mailapp .mail:not(.mobile) .mv-att .att-nube{ flex:0 0 26px; min-width:26px; padding:0 !important; } /* ===== ETIQUETAS DE INTERRUPTORES EN NOCHE (búsqueda avanzada; medido 2,3:1) ===== */ .nite body.tema-foco .mailapp .mail:not(.mobile) .adv-tlab{ color:var(--f-tx); } /* ===== REDACTAR EN FOCO (remates medidos: caja IA, botón IA, selector de color, líneas) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .compose-ai{ border-radius:12px; } body.tema-foco .mailapp .mail:not(.mobile) .compose-pane .aibtn{ border-radius:10px; } body.tema-foco .mailapp .mail:not(.mobile) .rt-toolbar input[type=color]{ width:30px; height:30px; border-radius:8px; border:1px solid var(--f-line); padding:2px; background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .rt-toolbar .rt-size{ border-radius:8px; border-color:var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .compose-pane .frow{ border-bottom:1px solid var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .compose-foot{ border-top:1px solid var(--f-line); } .nite body.tema-foco .mailapp .mail:not(.mobile) .rt-toolbar input[type=color]{ background:#0d1620; } .nite body.tema-foco .mailapp .mail:not(.mobile) .rt-toolbar .rt-size{ background:#0d1620; color:var(--f-tx); } /* ===== ADJUNTOS OPCION C: fichas bajo el asunto (aprobada por Luis; medida contra _muestras-adjuntos-c) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-stage > *{ order:3; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage > .mv-topbar{ order:0; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage > .mv-head{ order:1; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage > .mv-atts{ order:2; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage > iframe.mail-html{ order:4; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage > .mv-bottombar{ order:5; } body.tema-foco .mailapp .mail:not(.mobile) .mv-atts.one.foco-c{ background:transparent !important; border-top:0 !important; padding:0 22px 10px !important; border-radius:0; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar{ gap:8px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-strip{ gap:8px; overflow:hidden; flex-wrap:nowrap; align-items:center; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-strip.abierta{ flex-wrap:wrap; overflow:visible; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att{ position:relative; overflow:visible; flex:0 0 auto; height:36px; padding:0 4px 0 5px; gap:8px; max-width:300px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att.att-oculta{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-prev,body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-dl,body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-nube{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-nm{ max-width:200px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-cv{ width:24px; height:24px; border-radius:7px; border:0; background:transparent; color:var(--f-mut); display:inline-grid; place-items:center; font-size:14px; cursor:pointer; flex:0 0 auto; padding:0; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att:hover .att-cv,body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-cv:hover{ background:var(--f-acs); color:var(--f-acd); } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att.activa{ border-color:var(--ac); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent); } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-ok{ display:none; width:18px; height:18px; border-radius:50%; background:#e6f6ec; color:#1e8e4e; place-items:center; font-size:11px; flex:0 0 auto; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att:has(.att-nube.listo) .att-ok{ display:grid; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .att-thumb{ width:26px; height:26px; border-radius:8px; flex:0 0 auto; background-size:cover; background-position:center; border:1px solid var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .att-mas{ flex:0 0 auto; height:36px; padding:0 12px; border:0; border-radius:10px; background:var(--f-acs); color:var(--f-acd); font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .att-mas[hidden]{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-more{ margin-left:auto; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-more[hidden]{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-more:not([hidden]) ~ .att-all{ margin-left:0; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .att-all span{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .att-all{ padding:0 9px; } body.tema-foco .mailapp .mail:not(.mobile) .att-menu{ position:absolute; top:42px; left:0; z-index:30; min-width:220px; background:var(--f-paper); border:1px solid var(--f-line); border-radius:12px; box-shadow:0 12px 36px rgba(15,42,68,.16); padding:6px; display:flex; flex-direction:column; } body.tema-foco .mailapp .mail:not(.mobile) .att-menu button{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:var(--f-tx); font:inherit; font-size:13px; text-align:left; cursor:pointer; white-space:nowrap; } body.tema-foco .mailapp .mail:not(.mobile) .att-menu button:hover{ background:var(--f-canvas); } body.tema-foco .mailapp .mail:not(.mobile) .att-menu button i{ width:18px; text-align:center; color:var(--f-mut); font-size:16px; } .nite body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-ok{ background:#1f3a2a; color:#7fd19c; } .nite body.tema-foco .mailapp .mail:not(.mobile) .att-menu{ box-shadow:0 12px 36px rgba(0,0,0,.5); } /* modal «Ver lista» */ body.tema-foco .mailapp .attm-ov.foco-c .attm{ border-radius:14px; border:1px solid var(--f-line); } body.tema-foco .mailapp .attm-ov.foco-c .attm-row{ gap:10px; border-radius:10px; } body.tema-foco .mailapp .attm-ov.foco-c .attm-ck{ width:16px; height:16px; accent-color:var(--ac); margin:0; flex:0 0 auto; } body.tema-foco .mailapp .attm-ov.foco-c .att-ic{ width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; font-size:15px; background:var(--f-canvas); color:var(--f-mut); flex:0 0 auto; } body.tema-foco .mailapp .attm-ov.foco-c .att-ic.ti-file-type-pdf{ background:#fdecea; color:#d9433a; } body.tema-foco .mailapp .attm-ov.foco-c .att-ic.ti-file-type-xls{ background:#e6f6ec; color:#1e8e4e; } body.tema-foco .mailapp .attm-ov.foco-c .att-ic.ti-file-type-doc{ background:#e6f1fb; color:#1b6cab; } body.tema-foco .mailapp .attm-ov.foco-c .att-ic.ti-file-type-ppt{ background:#fdeee6; color:#c2571a; } body.tema-foco .mailapp .attm-ov.foco-c .att-ic.ti-photo{ background:#f1ecfb; color:#6f4bc4; } body.tema-foco .mailapp .attm-ov.foco-c .att-ic.ti-file-zip{ background:#fff4e0; color:#b26a00; } body.tema-foco .mailapp .attm-ov.foco-c .attm-f{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--f-mut); } body.tema-foco .mailapp .attm-ov.foco-c .attm-der{ margin-left:auto; display:inline-flex; gap:8px; } body.tema-foco .mailapp .attm-ov.foco-c .attm-nube{ height:32px; padding:0 12px; border-radius:10px; border:1px solid var(--f-line); background:var(--f-paper); color:var(--f-tx); font:inherit; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; cursor:pointer; } body.tema-foco .mailapp .attm-ov.foco-c .att-all{ height:32px; padding:0 12px; border-radius:10px; background:var(--ac); color:#fff; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; } /* ===== ADJUNTOS C: ANCHO COMPLETO DE LA BARRA (medido: se encogía a 407px) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-atts.one.foco-c{ align-self:stretch; width:auto; box-sizing:border-box; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar{ width:100%; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-strip{ flex:1 1 auto; min-width:0; } /* ===== ADJUNTOS C: FICHAS QUE SE ENCOGEN ANTES DE PASAR A «+N MAS» (medido) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att{ flex:0 1 auto; min-width:190px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att .att-nm{ flex:0 1 auto; min-width:0; } /* ===== MENU IA DE ADJUNTOS (opción C completa) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .att-menu button.ia{ margin-top:4px; border-top:1px solid var(--f-line); border-radius:0 0 8px 8px; padding-top:10px; color:var(--f-ia); } body.tema-foco .mailapp .mail:not(.mobile) .att-menu button.ia i{ color:var(--f-ia); } body.tema-foco .mailapp .mail:not(.mobile) .mvai-h small{ font-weight:400; color:var(--f-mut); margin-left:6px; } /* ===== BOTONES DE VISTA CENTRADOS (medido: ícono a 0px del borde) ===== */ body.tema-foco .mailapp .ft-lay button,body.tema-foco .mailapp .ft-sw button{ justify-content:center; } body.tema-foco .mailapp .ft-lay button{ width:30px; padding:0; } body.tema-foco .mailapp .ft-lay button i,body.tema-foco .mailapp .ft-sw button i{ display:block; line-height:1; } /* ===== LECTOR: SOLO EL TITULO FIJO, LO DEMAS DESLIZA (pedido de Luis; el iframe mide su contenido) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head){ display:block; overflow-y:auto; overflow-x:hidden; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-topbar{ position:sticky; top:0; z-index:7; background:var(--f-paper); } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-subj{ position:sticky; z-index:6; background:var(--f-paper); margin:0; padding:10px 22px 8px; font-size:17px; font-weight:600; line-height:1.3; border-bottom:1px solid transparent; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-subj.pegada{ border-bottom-color:var(--f-line); box-shadow:0 6px 14px rgba(15,42,68,.06); } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-head{ padding-top:4px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) .mail-html{ flex:none; display:block; height:auto; min-height:240px; overflow:hidden; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-atts{ order:initial; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-subj.pegada{ box-shadow:0 6px 14px rgba(0,0,0,.35); } /* ===== CUERPO A TODO EL ANCHO EN EL LECTOR QUE DESLIZA (medido: el iframe quedaba en 300px) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) .mail-html{ width:calc(100% - 44px) !important; max-width:none; box-sizing:border-box; margin:4px 22px 12px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-head, body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-atts, body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-topbar, body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-subj{ width:auto; box-sizing:border-box; } /* ===== ADJUNTOS EN LECTOR ANGOSTO: Ver lista solo icono, Descargar todos adentro de la lista ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .attb-more span{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .attb-more{ padding:0 9px; margin-left:auto; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .att-all{ display:none; } /* ===== «DESCARGAR TODOS» COMO EL BOTON DE LA MUESTRA (sin subrayado de enlace, icono entero) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .att-all, body.tema-foco .mailapp .mail:not(.mobile) .foco-c .att-all:hover, body.tema-foco .mailapp .attm-ov.foco-c .att-all, body.tema-foco .mailapp .attm-ov.foco-c .att-all:hover{ text-decoration:none !important; white-space:nowrap; line-height:1; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .att-all i, body.tema-foco .mailapp .attm-ov.foco-c .att-all i{ font-size:14px; line-height:1; display:inline-block; text-decoration:none; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .att-all span{ display:inline; } /* ===== MENU DE ADJUNTOS FLOTANTE (medido: dentro de la fila quedaba tapado) ===== */ body.tema-foco .mailapp .mail:not(.mobile){ position:relative; } body.tema-foco .mailapp .mail:not(.mobile) .att-menu{ top:auto; left:auto; } /* ===== MODAL «VER LISTA» COMO LA MUESTRA ===== */ body.tema-foco .mailapp .attm-ov.foco-c .attm-h{ font-size:14px; font-weight:600; color:var(--f-tx); padding:13px 16px; border-bottom:1px solid var(--f-line); } body.tema-foco .mailapp .attm-ov.foco-c .attm-h i{ color:var(--f-mut); } body.tema-foco .mailapp .attm-ov.foco-c .attm-x{ width:30px; height:30px; border-radius:9px; color:var(--f-mut); } body.tema-foco .mailapp .attm-ov.foco-c .attm-x:hover{ background:var(--f-canvas); color:var(--f-tx); } body.tema-foco .mailapp .attm-ov.foco-c .attm-row{ height:42px; padding:0 10px; gap:10px; border-radius:10px; color:var(--f-tx); } body.tema-foco .mailapp .attm-ov.foco-c .attm-row:hover{ background:var(--f-canvas); } body.tema-foco .mailapp .attm-ov.foco-c .attm-nm{ font-size:12.5px; font-weight:600; color:var(--f-tx); } body.tema-foco .mailapp .attm-ov.foco-c .att-sz{ font-size:11px; color:var(--f-mut); } body.tema-foco .mailapp .attm-ov.foco-c .attm-prev,body.tema-foco .mailapp .attm-ov.foco-c .attm-row .att-dl,body.tema-foco .mailapp .attm-ov.foco-c .attm-row .att-nube{ width:26px; height:26px; border-radius:7px; display:inline-grid; place-items:center; color:var(--f-mut); font-size:14px; padding:0; border:0; background:transparent; text-decoration:none; } body.tema-foco .mailapp .attm-ov.foco-c .attm-prev:hover,body.tema-foco .mailapp .attm-ov.foco-c .attm-row .att-dl:hover,body.tema-foco .mailapp .attm-ov.foco-c .attm-row .att-nube:hover{ background:var(--f-acs); color:var(--f-acd); } body.tema-foco .mailapp .attm-ov.foco-c .attm-row .att-dl i,body.tema-foco .mailapp .attm-ov.foco-c .attm-prev i{ color:inherit; } body.tema-foco .mailapp .attm-ov.foco-c .attm-f{ border-top:1px solid var(--f-line); } /* ===== BANDERA MARCADA: el glifo «filled» no existe en la fuente cargada; se usa el de la bandera y va en ámbar ===== */ body.tema-foco .ti-flag-filled::before{ content:"\eaa6"; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.flag.on{ background:#fff4e0; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.flag.on i{ color:#b26a00; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.flag.on{ background:#3a2f1a; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.flag.on i{ color:#f0c36b; } /* ===== CUADRO DEL COPILOTO SIN RECORTES (medido: .cal-pop 382 px vs cuadro 460 px) ===== */ body.tema-foco .mailapp .cal-pop:has(.cop-modal){ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:auto !important; max-width:min(520px, calc(100vw - 40px)) !important; border-radius:14px; padding:18px 20px; box-sizing:border-box; } body.tema-foco .mailapp .cal-pop:has(.cop-modal) .cop-modal{ width:min(460px, calc(100vw - 80px)); } body.tema-foco .mailapp .cop-modal-foot button{ height:32px; border-radius:10px; font-weight:600; } /* ===== PUNTO DE NO LEIDO JUNTO A LA FECHA, SIEMPRE (como la muestra) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mrow-dot{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .when::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ac); margin-left:6px; vertical-align:middle; } /* ===== PANEL: LO FIJO NO ENCOGE (medido: con 40 carpetas Redactar bajaba a 18px) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .mail-compose, body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .ttl, body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .mail-usage, body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .mail-cfg{ flex:0 0 auto; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .mail-compose{ min-height:40px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .mail-cfg{ min-height:31px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > #mf{ flex:1 1 auto; min-height:0; overflow-y:auto; } /* ===== BARRA DE ACCIONES DEL LECTOR: EN DOS LINEAS SI NO CABE, NUNCA CORTADA ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-topbar{ flex-wrap:wrap; row-gap:6px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools{ flex-wrap:wrap; row-gap:6px; justify-content:flex-end; min-width:0; max-width:100%; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-navgrp{ flex:0 0 auto; } /* ===== FICHA MAS ANGOSTA EN COMPACTO (medido: 190px se salía con lector de 220px) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .mv-att{ min-width:120px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .mv-att .att-nm{ max-width:140px; } /* ===== BARRA DE ACCIONES: UNA LINEA SIEMPRE QUE QUEPA (medido: se partía con espacio de sobra) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-topbar{ flex-wrap:nowrap; align-items:flex-start; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools{ flex:1 1 0; min-width:0; max-width:none; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-navgrp{ flex:0 0 auto; } /* ===== BARRA DEL LECTOR: PALABRAS UNA A UNA SEGUN IMPORTANCIA (pedido de Luis) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.sinlabel .tbl,body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.sinlabel .tbcv{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.sinlabel{ padding:0 9px; } /* ===== BARRA DEL LECTOR: UNA SOLA LINEA, BOTONES CON RELIEVE, TITULO 500 (Luis 12-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools{ flex-wrap:nowrap; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.oculto-foco{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn{ background:var(--f-paper); border:1px solid var(--f-line); box-shadow:0 1px 2px rgba(15,42,68,.06), 0 3px 8px rgba(15,42,68,.05); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn:hover{ background:var(--f-paper); box-shadow:0 4px 12px rgba(15,42,68,.12); border-color:#d5dde4; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.primary{ border-color:transparent; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.ai{ background:var(--f-ias); border-color:transparent; box-shadow:0 1px 2px rgba(111,75,196,.10), 0 3px 8px rgba(111,75,196,.10); } body.tema-foco .mailapp .mail:not(.mobile) .mv-navgrp{ background:var(--f-paper); border:1px solid var(--f-line); box-shadow:0 1px 2px rgba(15,42,68,.06), 0 3px 8px rgba(15,42,68,.05); } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-subj{ font-weight:500; font-size:17px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-att{ box-shadow:0 1px 2px rgba(15,42,68,.05); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn,.nite body.tema-foco .mailapp .mail:not(.mobile) .mv-navgrp{ box-shadow:0 2px 8px rgba(0,0,0,.35); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.5); border-color:#2f4a63; } /* ===== BOTONES DEL LECTOR: LETRA 500 Y RELIEVE VISIBLE (Luis) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn{ font-weight:500; border-color:#dfe5eb; box-shadow:0 1px 1px rgba(15,42,68,.06), 0 3px 10px rgba(15,42,68,.14); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn:hover{ box-shadow:0 2px 3px rgba(15,42,68,.08), 0 6px 16px rgba(15,42,68,.18); transform:translateY(-1px); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.primary{ font-weight:500; box-shadow:0 3px 10px rgba(42,143,214,.35); } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.ai{ box-shadow:0 1px 1px rgba(111,75,196,.08), 0 3px 10px rgba(111,75,196,.18); } body.tema-foco .mailapp .mail:not(.mobile) .mv-navgrp{ border-color:#dfe5eb; box-shadow:0 1px 1px rgba(15,42,68,.06), 0 3px 10px rgba(15,42,68,.14); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn,.nite body.tema-foco .mailapp .mail:not(.mobile) .mv-navgrp{ border-color:#2f4a63; box-shadow:0 3px 10px rgba(0,0,0,.5); } /* ===== DESCARGAR TODOS Y VER LISTA COMO BOTONES FLOTANTES (Luis: «no quiero ese botón así») ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all,body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-more{ background:var(--f-paper) !important; color:var(--f-tx) !important; border:1px solid #dfe5eb; border-radius:10px !important; height:32px; padding:0 12px; font-size:12px; font-weight:500; box-shadow:0 1px 1px rgba(15,42,68,.06), 0 3px 10px rgba(15,42,68,.14); } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all:hover,body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-more:hover{ background:var(--f-paper) !important; box-shadow:0 2px 3px rgba(15,42,68,.08), 0 6px 16px rgba(15,42,68,.18); transform:translateY(-1px); } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all i,body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-more i{ color:var(--f-acd) !important; opacity:1; font-size:14px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all span{ font-weight:500; color:var(--f-tx); } .nite body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all,.nite body.tema-foco .mailapp .mail:not(.mobile) .foco-c .attb-more{ border-color:#2f4a63; box-shadow:0 3px 10px rgba(0,0,0,.5); } /* ===== ULTIMO RECURSO: FLECHAS RECOGIDAS E ICONOS MAS JUNTOS EN ANGOSTO ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-navgrp.oculto-foco{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.sinlabel{ padding:0 8px; min-width:32px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn-sep{ margin:0 2px; } /* ===== SIN BOTON DESCARGAR TODOS EN LA BARRA DE ADJUNTOS (Luis: «no lo quiero para nada») ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all{ display:none !important; } /* ===== BARRA QUE SE DESLIZA DE LADO EN VEZ DE CORTARSE (flechas siempre visibles) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-navgrp.oculto-foco{ display:inline-flex !important; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; justify-content:safe flex-end; padding-bottom:1px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools::-webkit-scrollbar{ display:none; } /* ===== AIRE PARA LA SOMBRA EN LA BARRA DESLIZABLE (medido: se recortaba abajo) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools{ padding:8px 6px 14px; margin:-8px -6px -14px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools .tbtn:hover{ transform:none; } /* ===== VUELVE DESCARGAR TODOS CON EL DISENO NUEVO (blanco flotante); en compacto va dentro de Ver lista ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all{ display:inline-flex !important; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar.compacta .att-all{ display:none !important; } /* ===== DESCARGAR TODOS: SOLO ICONO, CUADRADO (Luis: sin tamaño, sin pastilla ancha) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all{ width:32px; height:32px; padding:0 !important; justify-content:center; gap:0; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all span{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all i{ font-size:15px; } /* ===== DESCARGAR TODOS: CON PALABRA, SIN TAMANO (Luis) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all{ width:auto; padding:0 12px !important; gap:6px; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all span{ display:inline !important; } body.tema-foco .mailapp .mail:not(.mobile) .foco-c .mv-atts-bar .att-all i{ font-size:14px; } /* ===== CUERPO DEL CORREO LEGIBLE EN NOCHE: hoja clara, como llega diseñado el correo ===== */ .nite body.tema-foco .mailapp .mail:not(.mobile) .mail-main .mail-html, .nite body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) .mail-html{ background:#fff !important; border-color:#3a4a5a !important; color-scheme:light; } /* ===== ROJO CLARO EN NOCHE (Eliminar y opciones peligrosas) ===== */ .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.danger, .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.danger i{ color:#f28b82; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mv-tools .tbtn.danger:hover{ background:#3a2220; border-color:#5a3532; } .nite body.tema-foco .row-menu .rm-it.danger, .nite body.tema-foco .row-menu .rm-it.danger i{ color:#f28b82; } .nite body.tema-foco .mailapp .mail:not(.mobile) .bulk-bar button.danger{ color:#fff; } /* ===== INVITACIONES EN MODO OSCURO: avisos y botones legibles (Luis 12-sep: «letra roja que no se nota») ===== */ .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-cancel{ background:rgba(242,139,130,.14); color:#f6a9a3; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-cancel b{ color:#ffc7c2; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-note{ background:rgba(231,154,46,.14); color:#f2c46b; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-done{ background:rgba(31,157,87,.16); color:#7fd6a3; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-btn.tent{ color:#f2c46b; border-color:#8a6a2a; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-btn.tent i{ color:#f2c46b; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-btn.decline{ color:#f6a9a3; border-color:#8a4a46; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-btn.decline i{ color:#f28b82; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-btn.decline:hover{ background:rgba(242,139,130,.12); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-btn.tent:hover{ background:rgba(231,154,46,.12); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-gorg{ color:#9fb2bd; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-sending{ color:#b7c4cd; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mvi-gchev{ color:#9fb2bd; } /* ===== LECTOR FOCO v2 (Luis 12-sep): TITULO FIJO, LO DE ABAJO SE RECOGE, CUERPO EN CAJA FIJA CON SU PROPIO SCROLL ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head){ display:flex; flex-direction:column; overflow:hidden; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-topbar{ position:static; z-index:auto; flex:0 0 auto; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-subj{ position:static; order:1; flex:0 0 auto; margin:0; padding:10px 22px 8px; font-size:17px; font-weight:500; line-height:1.3; background:var(--f-paper); border-bottom:1px solid transparent; transition:border-color .22s ease; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage.recogido:has(.mv-head) > .mv-subj{ border-bottom-color:var(--f-line); } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-pleg{ order:2; flex:0 0 auto; display:grid; grid-template-rows:1fr; transition:grid-template-rows .22s ease; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage.recogido:has(.mv-head) > .mv-pleg{ grid-template-rows:0fr; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-pleg > .mv-pleg-in{ min-height:0; overflow:hidden; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-pleg .mv-head{ padding-top:4px; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > iframe.mail-html{ order:4; flex:1 1 auto; min-height:0; height:auto; display:block; width:auto !important; max-width:none; box-sizing:border-box; margin:4px 22px 12px; overflow:auto; } @media (prefers-reduced-motion: reduce){ body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-pleg,body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-subj{ transition:none; } } /* ===== RELIEVE FOCO (Luis 12-sep): sombras en dos capas, barra superior y filtros flotantes, 4 relieves de lista ===== */ /* tokens: sh = pastillas/chips · sh1 = tarjeta en reposo · sh2 = panel · sh3 = al pasar el mouse · shac = seleccionado · ring = filo */ body.tema-foco .mailapp { --f-canvas:#eef2f6; --f-sh:0 1px 2px rgba(15,42,68,.08),0 3px 10px rgba(15,42,68,.08); --f-sh1:0 1px 2px rgba(15,42,68,.06),0 4px 14px rgba(15,42,68,.08); --f-sh2:0 2px 6px rgba(15,42,68,.08),0 20px 50px rgba(15,42,68,.16); --f-sh3:0 2px 4px rgba(15,42,68,.08),0 10px 24px rgba(15,42,68,.15); --f-shac:0 2px 4px rgba(42,143,214,.14),0 12px 28px rgba(42,143,214,.24); --f-ring:0 0 0 1px rgba(15,42,68,.05); } .nite body.tema-foco .mailapp { --f-sh:0 1px 2px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.35); --f-sh1:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.5); --f-sh2:0 2px 6px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.6); --f-sh3:0 2px 4px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.6); --f-shac:0 0 0 1px rgba(124,192,240,.18),0 12px 30px rgba(0,0,0,.65); --f-ring:0 0 0 1px rgba(255,255,255,.06); } /* la hoja (lista + lector) flota de verdad; la lista se recorta por la derecha para no pisar la sombra del lector */ body.tema-foco .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco .mailapp .mail:not(.mobile) .mail-list{ position:relative; z-index:0; box-shadow:var(--f-sh2); clip-path:inset(-80px 0 -80px -80px); } body.tema-foco .mailapp .mail:not(.mobile) >.mail-main,body.tema-foco .mailapp .mail:not(.mobile) .mail-main{ box-shadow:var(--f-sh2); } body.tema-foco .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 1px 3px rgba(15,42,68,.10); } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .mail-compose{ box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 30%,transparent); transition:box-shadow .15s, transform .15s; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders > .mail-compose:hover{ box-shadow:0 10px 22px color-mix(in srgb,var(--ac) 38%,transparent); transform:translateY(-1px); } /* barra superior: segmentos tipo pozo con pastilla levantada, chips que flotan, buscador con halo, avatar con anillo */ body.tema-foco .mailapp .ft-sw,body.tema-foco .mailapp .ft-lay{ background:color-mix(in srgb,var(--f-tx) 8%,transparent); box-shadow:inset 0 1px 2px rgba(15,42,68,.07); } body.tema-foco .mailapp .ft-sw button.on,body.tema-foco .mailapp .ft-lay button.on{ box-shadow:0 1px 2px rgba(15,42,68,.10),0 3px 8px rgba(15,42,68,.12); } body.tema-foco .mailapp .ft-search .mail-search{ box-shadow:var(--f-sh1) !important; transition:box-shadow .15s; } body.tema-foco .mailapp .ft-search .mail-search:focus-within{ box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent), var(--f-sh1) !important; } body.tema-foco .mailapp .ft-b[data-ft="dia"],body.tema-foco .mailapp .ft-b[data-ft="cop"],body.tema-foco .mailapp .ft-b.ft-grid{ background:var(--f-paper); box-shadow:var(--f-ring), var(--f-sh1); transition:box-shadow .15s, transform .15s; } body.tema-foco .mailapp .ft-b[data-ft="dia"]:hover,body.tema-foco .mailapp .ft-b[data-ft="cop"]:hover,body.tema-foco .mailapp .ft-b.ft-grid:hover{ background:var(--f-paper); box-shadow:var(--f-ring), var(--f-sh3); transform:translateY(-1px); } body.tema-foco .mailapp .ft-b.ft-ia.on{ background:var(--f-ias); } body.tema-foco .mailapp .ft-me{ box-shadow:0 0 0 2px var(--f-paper), var(--f-sh1); } .nite body.tema-foco .mailapp .ft-sw,.nite body.tema-foco .mailapp .ft-lay{ background:rgba(255,255,255,.06); box-shadow:inset 0 1px 2px rgba(0,0,0,.45); } .nite body.tema-foco .mailapp .ft-sw button.on,.nite body.tema-foco .mailapp .ft-lay button.on{ box-shadow:0 1px 2px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4); } /* barra de filtros de la lista: pozo + pastilla levantada; refrescar como chip */ body.tema-foco .mailapp .mail:not(.mobile) .lb-fmenu{ background:color-mix(in srgb,var(--f-tx) 6%,var(--f-paper)); box-shadow:inset 0 1px 2px rgba(15,42,68,.07); } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on{ box-shadow:0 1px 2px rgba(15,42,68,.10),0 3px 8px rgba(15,42,68,.12); } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on .lb-fi-n{ color:var(--f-acd); } body.tema-foco .mailapp .mail:not(.mobile) .lb-ref{ width:30px; height:30px; border-radius:9px; border:0; background:var(--f-paper); color:var(--f-mut); box-shadow:var(--f-ring), var(--f-sh1); transition:box-shadow .15s; } body.tema-foco .mailapp .mail:not(.mobile) .lb-ref:hover{ color:var(--f-tx); box-shadow:var(--f-ring), var(--f-sh3); } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fmenu{ background:rgba(255,255,255,.05); box-shadow:inset 0 1px 2px rgba(0,0,0,.45); } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on{ box-shadow:0 1px 2px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4); } /* ---- A · FICHAS FLOTANTES: cada correo es una tarjeta sobre el lienzo ---- */ body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mail-list{ background:transparent; box-shadow:none; border-right:0; clip-path:none; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-main{ border-radius:12px; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) #ml{ padding:2px 6px 10px; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ background:var(--f-paper); margin:0 2px 6px; box-shadow:var(--f-ring), var(--f-sh1); transition:box-shadow .15s, transform .15s, background .15s; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ background:var(--f-paper); transform:translateY(-1px); box-shadow:var(--f-ring), var(--f-sh3); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ background:#f3f8fd; box-shadow:0 0 0 1px rgba(42,143,214,.45), var(--f-shac); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mgrp{ background:var(--f-canvas); padding:10px 12px 6px; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .lb-fmenu{ background:var(--f-paper); box-shadow:var(--f-ring), var(--f-sh1); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .lb-fitem.on{ background:var(--f-acs); color:var(--f-acd); box-shadow:none; } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247; box-shadow:0 0 0 1px rgba(124,192,240,.5), var(--f-shac); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .lb-fmenu{ background:var(--f-paper); } /* ---- B · BANDEJA ELEVADA: la lista es un panel que flota; el correo abierto salta del panel ---- */ body.tema-foco.foco-relieve-b .body.mailapp,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) { background:#e6ebf0; } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow{ margin:0 8px; padding:9px 8px; border-radius:12px; box-shadow:inset 0 -1px 0 var(--f-line); transition:box-shadow .15s, transform .15s, background .15s; } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow:hover{ background:var(--f-canvas); box-shadow:none; } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.sel{ background:var(--f-paper); box-shadow:0 0 0 1px rgba(42,143,214,.35), var(--f-sh3); transform:scale(1.015); position:relative; z-index:1; } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mgrp{ padding:8px 16px 4px; } .nite body.tema-foco.foco-relieve-b .body.mailapp,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) { background:#0a1016; } .nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247; box-shadow:0 0 0 1px rgba(124,192,240,.4), var(--f-sh3); } /* ---- C · CAPAS PROFUNDAS: lienzo con degradado, panel de cristal, correo abierto con halo, avatares con relieve ---- */ body.tema-foco.foco-relieve-c .body.mailapp{ background:linear-gradient(180deg,#eef2f6,#e2e8ee); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) { background:transparent; } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-list{ background:rgba(255,255,255,.74); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--f-sh2); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mgrp{ background:rgba(255,255,255,.74); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow{ margin:2px 8px; transition:box-shadow .15s, background .15s; } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow:hover{ background:#fff; box-shadow:0 4px 14px rgba(15,42,68,.10); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.sel{ background:#fff; box-shadow:0 0 0 1px rgba(42,143,214,.35), 0 10px 26px rgba(42,143,214,.20); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow .mav{ box-shadow:0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25); } .nite body.tema-foco.foco-relieve-c .body.mailapp{ background:linear-gradient(180deg,#0f161d,#090e14); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-list,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-list{ background:rgba(22,31,41,.82); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--f-sh2); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mgrp{ background:rgba(22,31,41,.82); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow:hover{ background:#1c2733; box-shadow:0 4px 14px rgba(0,0,0,.4); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247; box-shadow:0 0 0 1px rgba(124,192,240,.4), 0 10px 26px rgba(0,0,0,.55); } /* ---- tarjetas del selector «Relieve de la lista» en Configuración (miniaturas) ---- */ .cfg-relieves .cfg-rel .prev{ position:relative; flex-direction:column; gap:5px; padding:8px 10px; background:#eef2f6; overflow:hidden; } .cfg-relieves .cfg-rel .prev i{ position:relative; z-index:1; height:14px; width:100%; border-radius:5px; background:#fff; } .cfg-rel.r-defecto .prev::before{ content:""; position:absolute; inset:6px; border-radius:8px; background:#fff; box-shadow:0 1px 2px rgba(15,42,68,.08),0 8px 20px rgba(15,42,68,.14); } .cfg-rel.r-defecto .prev i{ background:#f1f4f7; } .cfg-rel.r-a .prev i{ box-shadow:0 1px 2px rgba(15,42,68,.08),0 4px 10px rgba(15,42,68,.12); } .cfg-rel.r-a .prev i:nth-child(2){ background:#f3f8fd; box-shadow:0 0 0 1px rgba(42,143,214,.45),0 6px 14px rgba(42,143,214,.25); } .cfg-rel.r-b .prev{ background:#e6ebf0; } .cfg-rel.r-b .prev::before{ content:""; position:absolute; inset:6px; border-radius:8px; background:#fff; box-shadow:0 2px 6px rgba(15,42,68,.08),0 10px 24px rgba(15,42,68,.18); } .cfg-rel.r-b .prev i{ background:transparent; box-shadow:inset 0 -1px 0 #e7ecf0; border-radius:0; } .cfg-rel.r-b .prev i:nth-child(2){ background:#fff; border-radius:6px; box-shadow:0 0 0 1px rgba(42,143,214,.35),0 6px 14px rgba(15,42,68,.18); transform:scale(1.04); } .cfg-rel.r-c .prev{ background:linear-gradient(180deg,#eef2f6,#e2e8ee); } .cfg-rel.r-c .prev::before{ content:""; position:absolute; inset:6px; border-radius:8px; background:rgba(255,255,255,.74); box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(15,42,68,.14); } .cfg-rel.r-c .prev i{ background:transparent; } .cfg-rel.r-c .prev i:nth-child(2){ background:#fff; box-shadow:0 0 0 1px rgba(42,143,214,.35),0 6px 14px rgba(42,143,214,.2); } /* ===== AUDITORIA A: LECTOR ANGOSTO (12-sep) — la lista cede ancho antes que el lector; el boton Mas nunca queda fuera ===== */ body.tema-foco .mailapp .mail:not(.mobile) >.mail-list{ flex:0 6 auto; min-width:280px; } body.tema-foco .mailapp .mail:not(.mobile) >.mail-main{ flex:1 1 390px; min-width:0; } body.tema-foco .mailapp .mail:not(.mobile) .mail-stage:has(.mv-head) > .mv-topbar{ padding-left:10px; padding-right:10px; } body.tema-foco .mailapp .mail:not(.mobile) .mv-topbar .mv-tools{ gap:5px; } /* ===== RELIEVES A/B/C: MAS SOMBRA, MISMO LIENZO CLARO (Luis 13-sep: «no gris; que flote») ===== */ /* A · fichas flotantes: lienzo claro de siempre; fichas blancas con sombra larga; abierto con halo azul */ body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ background:var(--f-paper); box-shadow:0 0 0 1px rgba(15,42,68,.04), 0 1px 2px rgba(15,42,68,.06), 0 8px 24px rgba(15,42,68,.16); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ background:var(--f-paper); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 3px 6px rgba(15,42,68,.08), 0 16px 36px rgba(15,42,68,.22); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ background:#f6faff; box-shadow:0 0 0 1.5px rgba(42,143,214,.5), 0 4px 10px rgba(42,143,214,.16), 0 16px 36px rgba(42,143,214,.30); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-main{ box-shadow:0 2px 6px rgba(15,42,68,.08), 0 26px 64px rgba(15,42,68,.20); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ background:#1a2430; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.6); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ background:#1e2a37; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.65); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247; box-shadow:0 0 0 1.5px rgba(124,192,240,.6), 0 4px 10px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.7); } /* B · bandeja elevada: lienzo apenas un tono bajo el blanco; el panel flota con sombra larga; abierto salta */ body.tema-foco.foco-relieve-b .mailapp .body.mailapp,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) { background:#eaeff4; } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-list,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-main,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-main{ box-shadow:0 3px 8px rgba(15,42,68,.10), 0 30px 70px rgba(15,42,68,.26); } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.sel{ background:#fff; transform:scale(1.02); box-shadow:0 0 0 1.5px rgba(42,143,214,.45), 0 4px 10px rgba(15,42,68,.10), 0 16px 36px rgba(15,42,68,.24); } .nite body.tema-foco.foco-relieve-b .mailapp .body.mailapp,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) { background:#0a1016; } .nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-list,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-list,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-main,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-main{ box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.75); } .nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247; box-shadow:0 0 0 1.5px rgba(124,192,240,.5), 0 4px 10px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.7); } /* C · capas profundas: degradado claro; cristal con brillo y sombra larga; halo azul */ body.tema-foco.foco-relieve-c .mailapp .body.mailapp{ background:linear-gradient(180deg,#f1f4f8 0%,#e3e9ef 100%); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-list{ background:rgba(255,255,255,.7); box-shadow:inset 0 1px 0 #fff, 0 3px 8px rgba(15,42,68,.10), 0 30px 70px rgba(15,42,68,.22); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-main,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-main{ box-shadow:inset 0 1px 0 #fff, 0 3px 8px rgba(15,42,68,.10), 0 30px 70px rgba(15,42,68,.22); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mgrp{ background:transparent; } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow:hover{ background:#fff; box-shadow:0 6px 18px rgba(15,42,68,.14); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.sel{ background:#fff; box-shadow:0 0 0 1.5px rgba(42,143,214,.5), 0 4px 10px rgba(42,143,214,.16), 0 16px 36px rgba(42,143,214,.30); } .nite body.tema-foco.foco-relieve-c .mailapp .body.mailapp{ background:linear-gradient(180deg,#131c26 0%,#080d12 100%); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-list,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-list{ background:rgba(24,34,46,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.75); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-main,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-main{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.75); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mgrp{ background:transparent; } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247; box-shadow:0 0 0 1.5px rgba(124,192,240,.55), 0 4px 10px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.7); } /* miniaturas del selector, a tono */ .cfg-rel.r-b .prev{ background:#eaeff4; } .cfg-rel.r-c .prev{ background:linear-gradient(180deg,#f1f4f8,#e3e9ef); } /* ===== RELIEVES: UN PUNTO MAS DE SOMBRA (Luis 13-sep: «auméntale un poco más») ===== */ body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 2px 4px rgba(15,42,68,.08), 0 12px 32px rgba(15,42,68,.22); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ box-shadow:0 0 0 1px rgba(15,42,68,.06), 0 4px 8px rgba(15,42,68,.10), 0 20px 44px rgba(15,42,68,.28); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(42,143,214,.55), 0 6px 14px rgba(42,143,214,.20), 0 20px 44px rgba(42,143,214,.34); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-main{ box-shadow:0 3px 8px rgba(15,42,68,.10), 0 30px 72px rgba(15,42,68,.24); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.65); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.11), 0 4px 8px rgba(0,0,0,.55), 0 20px 44px rgba(0,0,0,.7); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(124,192,240,.65), 0 6px 14px rgba(0,0,0,.55), 0 20px 44px rgba(0,0,0,.75); } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-list,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-main,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-main{ box-shadow:0 4px 10px rgba(15,42,68,.12), 0 36px 80px rgba(15,42,68,.30); } body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(42,143,214,.5), 0 6px 14px rgba(15,42,68,.12), 0 20px 44px rgba(15,42,68,.28); } .nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-list,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-list,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) >.mail-main,.nite body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile) .mail-main{ box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 4px 10px rgba(0,0,0,.6), 0 36px 80px rgba(0,0,0,.8); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-list,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-main,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-main{ box-shadow:inset 0 1px 0 #fff, 0 4px 10px rgba(15,42,68,.12), 0 36px 80px rgba(15,42,68,.26); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow:hover{ box-shadow:0 8px 22px rgba(15,42,68,.18); } body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(42,143,214,.55), 0 6px 14px rgba(42,143,214,.20), 0 20px 44px rgba(42,143,214,.34); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-list,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-list{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.6), 0 36px 80px rgba(0,0,0,.8); } .nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) >.mail-main,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mail-main{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.6), 0 36px 80px rgba(0,0,0,.8); } /* ===== GRUPOS SIN BANDA GRIS + CARPETAS MAS LIVIANAS (Luis 13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mgrp{ color:#4a5d6c; font-weight:600; font-size:10.5px; letter-spacing:.09em; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mgrp{ color:#b7c4cd; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mgrp,body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mgrp{ display:block; width:max-content; max-width:calc(100% - 16px); margin:6px 0 6px 8px; padding:4px 10px; border-radius:8px; background:var(--f-paper); box-shadow:0 0 0 1px rgba(15,42,68,.04), 0 2px 6px rgba(15,42,68,.10); line-height:1.2; } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mgrp,.nite body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile) .mgrp{ background:#1a2430; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.5); } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ color:#8a9bab; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mfo{ font-weight:400; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ font-weight:400; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on{ font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .nm{ font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ font-weight:500 !important; color:#8a9bab !important; font-variant-numeric:tabular-nums; letter-spacing:0; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .badge{ color:var(--f-acd) !important; font-weight:600 !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl,.nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ color:#7f91a0 !important; } /* ===== CARPETAS: GRIS SUAVE DE GMAIL (Luis 13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mfo{ color:#444746; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ color:#444746; font-weight:400; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ color:#5f6d78 !important; font-weight:400 !important; font-variant-numeric:tabular-nums; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .nm{ color:var(--f-acd) !important; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .badge{ color:var(--f-acd) !important; font-weight:600 !important; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ color:#747f89; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo,.nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ color:#c9d4dd; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ color:#93a4b3 !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ color:#8a9bab !important; } /* ===== LIENZO Y CARPETAS COMO GMAIL (Luis 13-sep: «muy oscuro, letras lavadas») ===== */ body.tema-foco .mailapp{ --f-canvas:#f6f8fc; } body.tema-foco .mailapp .mail:not(.mobile) .mfo{ color:#3c4043; font-size:13.5px; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ color:#3c4043; font-weight:400; } body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .nm{ color:#202124; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ color:#5f6368 !important; font-weight:400 !important; font-size:12px !important; font-variant-numeric:tabular-nums; } body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .badge{ color:#3c4043 !important; font-weight:500 !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .nm,body.tema-foco .mailapp .mail:not(.mobile) .mfo.on:has(.badge:not(:empty)) .nm{ color:var(--f-acd) !important; font-weight:600; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .badge,body.tema-foco .mailapp .mail:not(.mobile) .mfo.on:has(.badge:not(:empty)) .badge{ color:var(--f-acd) !important; font-weight:600 !important; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ color:#5f6368; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo,.nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ color:#c9d4dd; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .nm{ color:#eef2f6; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ color:#93a4b3 !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .badge{ color:#c9d4dd !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ color:#8a9bab !important; } /* ===== PANEL COMO GMAIL, SEGUNDA PASADA (Luis 13-sep) ===== */ body.tema-foco.foco-relieve-b .mailapp .body.mailapp,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile){ background:#f6f8fc; } body.tema-foco.foco-relieve-c .mailapp .body.mailapp{ background:linear-gradient(180deg,#f8fafd 0%,#e9eef4 100%); } .cfg-rel.r-b .prev{ background:#f6f8fc; } .cfg-rel.r-c .prev{ background:linear-gradient(180deg,#f8fafd,#e9eef4); } /* ===== PANEL: VALORES EXACTOS DE GMAIL (Luis 13-sep, lado a lado) ===== */ body.tema-foco .body.mailapp,body.tema-foco.foco-relieve-b .mailapp .body.mailapp,body.tema-foco.foco-relieve-c .mailapp .body.mailapp{ background:#f8fafd !important; } body.tema-foco .mailapp .mail:not(.mobile),body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile),body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile){ background:#f8fafd !important; } body.tema-foco .mailapp .mail:not(.mobile) >.mail-folders{ background:#f8fafd !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .mfo-ic{ color:#444746 !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .mfo-ic{ color:#1f1f1f !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .mfo-ic{ color:var(--f-acd) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ color:#2d3134; } body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .nm{ color:#131517; } body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ color:#444746 !important; } body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .badge{ color:#1f1f1f !important; } body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ color:#444746; } body.tema-foco .mailapp .mail:not(.mobile) .mfo-tw{ color:#444746; } .cfg-rel.r-c .prev{ background:#f8fafd; } .nite body.tema-foco .body.mailapp,.nite body.tema-foco .mailapp .mail:not(.mobile),.nite body.tema-foco .mailapp .mail:not(.mobile) >.mail-folders{ background:#0f161d !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .mfo-ic,.nite body.tema-foco .mailapp .mail:not(.mobile) .mfo-tw,.nite body.tema-foco .mailapp .mail:not(.mobile) .mail-folders .ttl{ color:#b7c4cd !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .mfo-ic{ color:#eef2f6 !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo.on .mfo-ic{ color:var(--f-acd) !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .nm{ color:#d5dee6; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .nm{ color:#f3f6f9; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo .badge{ color:#b7c4cd !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mfo:has(.badge:not(:empty)) .badge{ color:#eef2f6 !important; } body.tema-foco .mailapp{ --f-canvas:#f8fafd; } .cfg-rel.r-b .prev{ background:#f8fafd; } .cfg-relieves .cfg-rel .prev{ background:#f8fafd; } /* ===== FICHAS FLOTANTES: BANDEJA TRANSPARENTE (Luis 13-sep: «que no se vea ese gris pero que siga flotante») ===== */ body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-list,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mail-list,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mail-list #ml,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) #ml{ background:transparent !important; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ background:#fff !important; } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ background:#1a2430 !important; } /* ===== FICHAS FLOTANTES: SOMBRAS CORTAS (Luis 13-sep: las sombras largas se sumaban y teñian de gris la bandeja) ===== */ body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ box-shadow:0 0 0 1px rgba(15,42,68,.06), 0 1px 2px rgba(15,42,68,.06), 0 4px 10px rgba(15,42,68,.10); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(15,42,68,.07), 0 2px 4px rgba(15,42,68,.08), 0 8px 18px rgba(15,42,68,.16); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(42,143,214,.55), 0 2px 6px rgba(42,143,214,.14), 0 8px 20px rgba(42,143,214,.22); } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-main{ box-shadow:0 2px 6px rgba(15,42,68,.08), 0 12px 28px rgba(15,42,68,.12); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow{ box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.5); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.11), 0 2px 4px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.55); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(124,192,240,.65), 0 2px 6px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.6); } /* ===== FICHAS FLOTANTES: LECTOR SIN SOMBRA A LA IZQUIERDA (Luis 13-sep: «quita la sombra») ===== */ /* la sombra va en un pseudoelemento recortado por la izquierda: el lector solo proyecta hacia abajo y a la derecha, y nada cae sobre la lista */ body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-main{ box-shadow:none !important; position:relative; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-main::before{ content:; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; box-shadow:0 2px 6px rgba(15,42,68,.08), 0 12px 28px rgba(15,42,68,.12); clip-path:inset(-80px -80px -80px 0); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) >.mail-main::before{ box-shadow:0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.55); } /* ===== BARRA MAS ALTA Y LIENZO AZULADO SUAVE (Luis 13-sep: «le da mas aire de altura… el fondo azulado hace que no se vea simple») ===== */ body.tema-foco .mailapp .foco-top{ height:64px; gap:10px; padding:0 14px; } body.tema-foco .mailapp .ft-search .mail-search{ height:44px !important; border-radius:14px !important; padding:0 14px !important; } body.tema-foco .mailapp .ft-b{ height:38px; min-width:38px; border-radius:11px; } body.tema-foco .mailapp .ft-b.ft-grid{ width:38px; } body.tema-foco .mailapp .ft-sw,body.tema-foco .mailapp .ft-lay{ border-radius:11px; padding:2px; } body.tema-foco .mailapp .ft-sw button,body.tema-foco .mailapp .ft-lay button{ height:34px; border-radius:9px; } body.tema-foco .mailapp .ft-lay button{ width:36px; } body.tema-foco .mailapp .ft-win button{ width:30px; height:30px; } body.tema-foco .mailapp .ft-me{ width:36px; height:36px; } body.tema-foco .mailapp { --f-canvas:#cfe0fb; } body.tema-foco .body.mailapp,body.tema-foco.foco-relieve-b .mailapp .body.mailapp,body.tema-foco.foco-relieve-c .mailapp .body.mailapp{ background:#cfe0fb !important; } body.tema-foco .mailapp .mail:not(.mobile) ,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile),body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile){ background:#cfe0fb !important; } body.tema-foco .mailapp .mail:not(.mobile) >.mail-folders{ background:#cfe0fb !important; } .cfg-rel.r-b .prev,.cfg-rel.r-c .prev,.cfg-relieves .cfg-rel .prev{ background:#cfe0fb; } /* ===== TONALIDADES AZULES (Luis 13-sep): buscador del mismo azul pero mas profundo, sombras azuladas ===== */ body.tema-foco .mailapp .ft-search .mail-search{ background:#eaf2fe !important; box-shadow:0 1px 3px rgba(26,115,232,.10), 0 6px 18px rgba(26,115,232,.16) !important; } body.tema-foco .mailapp .ft-search .mail-search:focus-within{ background:#fff !important; box-shadow:0 0 0 3px rgba(26,115,232,.18), 0 8px 22px rgba(26,115,232,.12) !important; } body.tema-foco .mailapp .ft-search .mail-search input::placeholder{ color:#6b7c8c; } body.tema-foco .mailapp { --f-sh2:0 2px 6px rgba(26,115,232,.08), 0 20px 50px rgba(26,115,232,.14); --f-sh1:0 1px 2px rgba(26,115,232,.06), 0 4px 14px rgba(26,115,232,.10); --f-sh:0 1px 2px rgba(26,115,232,.08), 0 3px 10px rgba(26,115,232,.08); } .nite body.tema-foco .mailapp .ft-search .mail-search{ background:#161f29 !important; box-shadow:0 2px 8px rgba(0,0,0,.45) !important; } .nite body.tema-foco .mailapp .ft-search .mail-search:focus-within{ background:#161f29 !important; box-shadow:0 0 0 3px rgba(124,192,240,.25) !important; } .nite body.tema-foco .mailapp { --f-sh2:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6); --f-sh1:0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.5); --f-sh:0 1px 2px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.35); } /* ===== AZUL DE LA REFERENCIA (Luis 13-sep): el azul de accion (Redactar, Todos, activos) es el azul Google #1a73e8 ===== */ body.tema-foco .mailapp{ --ac:#1a73e8; --f-acd:#1a73e8; --f-acs:#e8f0fe; } .nite body.tema-foco .mailapp{ --ac:#2a8fd6; --f-acd:#7cc0f0; --f-acs:#1b3247; } /* ===== COLORES EXACTOS DE LA FOTO DE LUIS (13-sep, leidos con el lector de color): cielo #e7f2fe arriba -> #f4f8fc abajo; buscador #f0f7fd ===== */ body.tema-foco .mailapp { --f-canvas:#eef5fe; } body.tema-foco .body.mailapp,body.tema-foco.foco-relieve-b .mailapp .body.mailapp,body.tema-foco.foco-relieve-c .mailapp .body.mailapp{ background:linear-gradient(180deg,#f0f6fe 0%,#f5f9ff 45%,#fafcff 100%) !important; } body.tema-foco .mailapp .mail:not(.mobile) ,body.tema-foco.foco-relieve-b .mailapp .mail:not(.mobile),body.tema-foco.foco-relieve-c .mailapp .mail:not(.mobile){ background:transparent !important; } body.tema-foco .mailapp .mail:not(.mobile) >.mail-folders{ background:transparent !important; } body.tema-foco .mailapp .ft-search .mail-search{ background:#f0f7fd !important; } body.tema-foco .mailapp .ft-search .mail-search:focus-within{ background:#fff !important; } .cfg-rel.r-b .prev,.cfg-rel.r-c .prev,.cfg-relieves .cfg-rel .prev{ background:linear-gradient(180deg,#e7f2fe,#f4f8fc); } /* ===== CONMUTADORES SIN POZO GRIS (Luis 13-sep, referencia): grupo claro con sombra suave, activo blanco azul, inactivos gris oscuro ===== */ body.tema-foco .mailapp .ft-sw,body.tema-foco .mailapp .ft-lay{ background:#f1f5fb; box-shadow:0 1px 2px rgba(26,115,232,.08), 0 2px 8px rgba(26,115,232,.08); } body.tema-foco .mailapp .ft-sw button,body.tema-foco .mailapp .ft-lay button{ color:#3c4043; } body.tema-foco .mailapp .ft-sw button i,body.tema-foco .mailapp .ft-lay button i{ color:#5f6368; } body.tema-foco .mailapp .ft-sw button:hover,body.tema-foco .mailapp .ft-lay button:hover{ background:#e8f0fe; color:#1a73e8; } body.tema-foco .mailapp .ft-sw button:hover i,body.tema-foco .mailapp .ft-lay button:hover i{ color:#1a73e8; } body.tema-foco .mailapp .ft-sw button.on,body.tema-foco .mailapp .ft-lay button.on{ background:#fff; color:#1a73e8; box-shadow:0 1px 2px rgba(26,115,232,.14), 0 2px 6px rgba(26,115,232,.10); } body.tema-foco .mailapp .ft-sw button.on i,body.tema-foco .mailapp .ft-lay button.on i{ color:#1a73e8; } body.tema-foco .mailapp .ft-lay button:disabled{ opacity:.35; } .nite body.tema-foco .mailapp .ft-sw,.nite body.tema-foco .mailapp .ft-lay{ background:rgba(255,255,255,.06); box-shadow:none; } .nite body.tema-foco .mailapp .ft-sw button,.nite body.tema-foco .mailapp .ft-lay button{ color:#b7c4cd; } .nite body.tema-foco .mailapp .ft-sw button i,.nite body.tema-foco .mailapp .ft-lay button i{ color:#93a4b3; } .nite body.tema-foco .mailapp .ft-sw button.on,.nite body.tema-foco .mailapp .ft-lay button.on{ background:#1f2a36; color:#7cc0f0; box-shadow:0 1px 2px rgba(0,0,0,.5); } .nite body.tema-foco .mailapp .ft-sw button.on i,.nite body.tema-foco .mailapp .ft-lay button.on i{ color:#7cc0f0; } /* ===== FILTRO EN UN SOLO BOTON + MI DIA Y COPILOTO EN LA BARRA DE LA LISTA (Luis 13-sep: «si, hazlo») ===== */ body.tema-foco .mailapp .mail:not(.mobile) .lb-fdrop{ flex:0 0 auto; position:relative; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn{ display:inline-flex !important; align-items:center; gap:7px; height:32px; padding:0 9px 0 12px; border-radius:10px; background:#fff; border:0; color:var(--f-tx); font-weight:600; box-shadow:0 1px 2px rgba(26,115,232,.10), 0 2px 8px rgba(26,115,232,.08); cursor:pointer; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn:hover{ background:#f3f7fd; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn .lb-fic{ color:#1a73e8; font-size:15px; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn-n{ background:#e8f0fe; color:#1a73e8; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn-cv{ color:#5f6368; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fmenu{ display:block !important; position:absolute; top:calc(100% + 6px); left:0; width:auto; min-width:230px; height:auto; padding:6px; gap:0; background:#fff; border:0; border-radius:12px; box-shadow:0 0 0 1px rgba(15,42,68,.06), 0 12px 32px rgba(15,42,68,.18); z-index:60; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fmenu[hidden]{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem{ display:flex; width:100%; flex:none; height:34px; justify-content:flex-start; padding:0 10px; border-radius:8px; color:var(--f-tx); font-weight:500; text-align:left; background:transparent; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem>i{ display:inline-block; color:#5f6368; font-size:15px; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem:hover{ background:#f3f7fd; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on{ background:#e8f0fe; color:#1a73e8; box-shadow:none; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on>i,body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on .lb-fi-n{ color:#1a73e8; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem .lb-fi-n{ margin-left:auto; color:#5f6368; } body.tema-foco .mailapp .mail:not(.mobile) .lb-digest,body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot{ display:inline-flex !important; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:10px; border:0; font-weight:600; cursor:pointer; white-space:nowrap; } body.tema-foco .mailapp .mail:not(.mobile) .lb-digest{ margin-left:auto; background:#fff; color:var(--f-tx); box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 1px 2px rgba(26,115,232,.08), 0 3px 8px rgba(26,115,232,.08); } body.tema-foco .mailapp .mail:not(.mobile) .lb-digest i{ color:#5f6368; font-size:16px; } body.tema-foco .mailapp .mail:not(.mobile) .lb-digest:hover{ background:#f3f7fd; } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot{ margin-left:0; background:#f1ecfb; color:#6f4bc4; box-shadow:none; } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot i{ color:#6f4bc4; font-size:16px; } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot:hover{ background:#e9e1fa; } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot.on{ background:#6f4bc4; color:#fff; box-shadow:0 4px 12px rgba(111,75,196,.30); } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot.on i{ color:#fff; } body.tema-foco .mailapp .mail:not(.mobile) .lb-stats{ display:none; } body.tema-foco .mailapp:not(.foco-movil) .foco-top [data-ft="dia"],body.tema-foco .mailapp:not(.foco-movil) .foco-top [data-ft="cop"]{ display:none !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn{ background:#161f29; color:#e8eef3; box-shadow:0 1px 2px rgba(0,0,0,.45); } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn:hover{ background:#1c2733; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn .lb-fic{ color:#7cc0f0; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn-n{ background:#1b3247; color:#7cc0f0; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn-cv{ color:#93a4b3; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fmenu{ background:#161f29; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.6); } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem{ color:#e8eef3; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem>i,.nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem .lb-fi-n{ color:#93a4b3; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem:hover{ background:#1c2733; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on{ background:#1b3247; color:#7cc0f0; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on>i,.nite body.tema-foco .mailapp .mail:not(.mobile) .lb-fitem.on .lb-fi-n{ color:#7cc0f0; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-digest{ background:#161f29; color:#e8eef3; box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.45); } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-digest i{ color:#93a4b3; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-digest:hover{ background:#1c2733; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot{ background:#2b2340; color:#b9a6ef; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot i{ color:#b9a6ef; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot:hover{ background:#352b4f; } /* ===== BARRA DE LA LISTA ANGOSTA + COPILOTO SIN FONDO VIOLETA (Luis 13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .list-bar{ flex-wrap:nowrap; overflow:visible; min-width:0; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar > *{ flex:0 0 auto; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fdrop{ flex:0 1 auto; min-width:0; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn{ max-width:100%; } body.tema-foco .mailapp .mail:not(.mobile) .lb-fbtn .lb-fbtn-tx{ overflow:hidden; text-overflow:ellipsis; } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot{ background:#fff; color:#6f4bc4; box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 1px 2px rgba(26,115,232,.08), 0 3px 8px rgba(26,115,232,.08); } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot:hover{ background:#f6f2fd; } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot.on{ background:#f1ecfb; color:#6f4bc4; box-shadow:0 0 0 1px rgba(111,75,196,.25); } body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot.on i{ color:#6f4bc4; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot{ background:#161f29; color:#b9a6ef; box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.45); } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot:hover{ background:#1c2733; } .nite body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot.on{ background:#2b2340; color:#b9a6ef; box-shadow:0 0 0 1px rgba(185,166,239,.3); } /* ===== FICHAS: AVATAR CENTRADO, TEXTO QUE RESPIRA Y COLUMNA DERECHA (Luis 13-sep, referencia) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mrow{ align-items:center; } body.tema-foco .mailapp .mail:not(.mobile) .mrow-main{ position:relative; min-width:0; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .l2{ padding-right:44px; } body.tema-foco .mailapp .mail:not(.mobile) .mrow .l2 .subj,body.tema-foco .mailapp .mail:not(.mobile) .mrow .l2 .prev{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ===== PUNTO A LA IZQUIERDA + BARRA QUE SE PLIEGA SUAVE (Luis 13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mrow{ position:relative; padding-left:22px; } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread::before{ content:""; position:absolute; left:8px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--ac); } body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread .when::after{ display:none; } body.tema-foco .mailapp .mail:not(.mobile) .mrow-dot{ display:none !important; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar{ transition:gap .22s ease; } body.tema-foco .mailapp .mail:not(.mobile) .lb-all{ overflow:hidden; max-width:40px; transition:max-width .22s ease, opacity .18s ease, margin .22s ease; } body.tema-foco .mailapp .mail:not(.mobile) .lb-digest,body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot{ overflow:hidden; transition:padding .22s ease, gap .22s ease, background .15s; } body.tema-foco .mailapp .mail:not(.mobile) .lb-digest .lbc-tx,body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot .lbc-tx{ display:inline-block; max-width:90px; white-space:nowrap; overflow:hidden; transition:max-width .22s ease, opacity .18s ease, margin .22s ease; } @media (prefers-reduced-motion: reduce){ body.tema-foco .mailapp .mail:not(.mobile) .list-bar,body.tema-foco .mailapp .mail:not(.mobile) .lb-all,body.tema-foco .mailapp .mail:not(.mobile) .lb-digest,body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot,body.tema-foco .mailapp .mail:not(.mobile) .lb-digest .lbc-tx,body.tema-foco .mailapp .mail:not(.mobile) .lb-copilot .lbc-tx{ transition:none; } } /* ===== PUNTO Y PLEGADO: ORDEN CORRECTO (13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mrow.unread::before{ display:block !important; content:"" !important; position:absolute; left:8px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--ac); } /* ===== PLEGADO MEDIDO POR JS (13-sep): pasos que aplica ajustarListbar() solo mientras la barra desborde ===== */ body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-junta{ gap:4px; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sincasilla .lb-all{ max-width:0; opacity:0; margin-right:-4px; pointer-events:none; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sincop .lb-copilot .lbc-tx,body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sindia .lb-digest .lbc-tx{ max-width:0; opacity:0; margin-left:-6px; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sincop .lb-copilot,body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sindia .lb-digest{ padding:0 8px; gap:0; } /* ===== FILTRO NO ENCOGE HASTA EL ULTIMO PASO (13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .lb-fdrop{ flex:0 0 auto; min-width:auto; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-filtrocorto .lb-fdrop{ flex:0 1 auto; min-width:0; } /* ===== MEDICION SIN TRANSICIONES + CORREO ABIERTO VISIBLE EN FICHAS (13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-midiendo,body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-midiendo *{ transition:none !important; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ background:#f3f7fd !important; } body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ background:#e8f0fe !important; box-shadow:0 0 0 1.5px rgba(26,115,232,.45), 0 2px 6px rgba(26,115,232,.12), 0 8px 20px rgba(26,115,232,.18); } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow:hover{ background:#1e2a37 !important; } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ background:#1b3247 !important; box-shadow:0 0 0 1.5px rgba(124,192,240,.6), 0 2px 6px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.6); } /* ===== CHIP PLEGADO CENTRADO (13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sincop .lb-copilot,body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sindia .lb-digest{ width:32px; min-width:32px; padding:0 !important; gap:0; justify-content:center; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sincop .lb-copilot .lbc-tx,body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sindia .lb-digest .lbc-tx{ max-width:0; margin:0; padding:0; opacity:0; } body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sincop .lb-copilot i,body.tema-foco .mailapp .mail:not(.mobile) .list-bar.lb-sindia .lb-digest i{ margin:0; } /* ===== PANEL DE CARPETAS CON DEGRADADO (Luis 13-sep): cielo arriba, mas claro abajo, nunca blanco ===== */ body.tema-foco .mailapp .mail:not(.mobile) >.mail-folders{ background:transparent !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) >.mail-folders{ background:linear-gradient(180deg,#0f161d 0%,#111a24 60%,#141e29 100%) !important; } /* ===== BARRA CLARA Y CHIPS QUE FLOTAN (Luis 13-sep) ===== */ body.tema-foco .mailapp .foco-top{ height:58px; padding:0 14px; background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38)); box-shadow:0 1px 0 rgba(26,115,232,.10); } body.tema-foco .mailapp .ft-search .mail-search{ height:40px !important; } body.tema-foco .mailapp .ft-b{ height:36px; min-width:36px; } body.tema-foco .mailapp .ft-b.ft-grid{ width:36px; } body.tema-foco .mailapp .ft-sw,body.tema-foco .mailapp .ft-lay{ background:transparent; box-shadow:none; gap:6px; padding:0; } body.tema-foco .mailapp .ft-sw button,body.tema-foco .mailapp .ft-lay button{ height:36px; border-radius:10px; background:#fff; color:#3c4043; opacity:1; box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 1px 2px rgba(26,115,232,.10), 0 3px 8px rgba(26,115,232,.12); transition:box-shadow .15s, transform .15s, background .15s; } body.tema-foco .mailapp .ft-lay button{ width:36px; } body.tema-foco .mailapp .ft-sw button i,body.tema-foco .mailapp .ft-lay button i{ color:#5f6368; } body.tema-foco .mailapp .ft-sw button:hover,body.tema-foco .mailapp .ft-lay button:hover{ background:#f3f7fd; color:#1a73e8; transform:translateY(-1px); box-shadow:0 0 0 1px rgba(15,42,68,.06), 0 2px 4px rgba(26,115,232,.12), 0 6px 14px rgba(26,115,232,.16); } body.tema-foco .mailapp .ft-sw button:hover i,body.tema-foco .mailapp .ft-lay button:hover i{ color:#1a73e8; } body.tema-foco .mailapp .ft-sw button.on,body.tema-foco .mailapp .ft-lay button.on{ background:#e8f0fe; color:#1a73e8; box-shadow:0 0 0 1px rgba(26,115,232,.28), 0 1px 2px rgba(26,115,232,.12), 0 3px 8px rgba(26,115,232,.14); } body.tema-foco .mailapp .ft-sw button.on i,body.tema-foco .mailapp .ft-lay button.on i{ color:#1a73e8; } body.tema-foco .mailapp .ft-lay button:disabled{ opacity:1; cursor:default; background:#f6f8fb; color:#b7c0c9; box-shadow:0 0 0 1px rgba(15,42,68,.04); transform:none; } body.tema-foco .mailapp .ft-lay button:disabled i{ color:#b7c0c9; } .nite body.tema-foco .mailapp .foco-top{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); box-shadow:0 1px 0 rgba(255,255,255,.06); } .nite body.tema-foco .mailapp .ft-sw button,.nite body.tema-foco .mailapp .ft-lay button{ background:#1f2a36; color:#d5dee6; box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4); } .nite body.tema-foco .mailapp .ft-sw button i,.nite body.tema-foco .mailapp .ft-lay button i{ color:#93a4b3; } .nite body.tema-foco .mailapp .ft-sw button:hover,.nite body.tema-foco .mailapp .ft-lay button:hover{ background:#243140; color:#7cc0f0; } .nite body.tema-foco .mailapp .ft-sw button.on,.nite body.tema-foco .mailapp .ft-lay button.on{ background:#1b3247; color:#7cc0f0; box-shadow:0 0 0 1px rgba(124,192,240,.35), 0 1px 2px rgba(0,0,0,.5); } .nite body.tema-foco .mailapp .ft-sw button.on i,.nite body.tema-foco .mailapp .ft-lay button.on i{ color:#7cc0f0; } .nite body.tema-foco .mailapp .ft-lay button:disabled{ background:#161f29; color:#4c5a68; } .nite body.tema-foco .mailapp .ft-lay button:disabled i{ color:#4c5a68; } /* ===== ACTIVO BLANCO, INACTIVOS QUE RESALTAN (Luis 13-sep) ===== */ body.tema-foco .mailapp .ft-sw button,body.tema-foco .mailapp .ft-lay button{ background:rgba(255,255,255,.70); color:#3c4043; opacity:1; box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 1px 2px rgba(26,115,232,.08), 0 3px 8px rgba(26,115,232,.10); } body.tema-foco .mailapp .ft-sw button i,body.tema-foco .mailapp .ft-lay button i{ color:#5f6368; } body.tema-foco .mailapp .ft-sw button:hover,body.tema-foco .mailapp .ft-lay button:hover{ background:#fff; color:#1a73e8; } body.tema-foco .mailapp .ft-sw button.on,body.tema-foco .mailapp .ft-lay button.on{ background:#fff; color:#1a73e8; box-shadow:0 0 0 1px rgba(15,42,68,.06), 0 2px 4px rgba(26,115,232,.14), 0 6px 16px rgba(26,115,232,.18); } body.tema-foco .mailapp .ft-sw button.on i,body.tema-foco .mailapp .ft-lay button.on i{ color:#1a73e8; } .nite body.tema-foco .mailapp .ft-sw button,.nite body.tema-foco .mailapp .ft-lay button{ background:rgba(255,255,255,.06); color:#d5dee6; } .nite body.tema-foco .mailapp .ft-sw button.on,.nite body.tema-foco .mailapp .ft-lay button.on{ background:#1f2a36; color:#7cc0f0; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.5); } /* ===== TIRA DE VUELTA: grupo con fondo, pastilla blanca que se mueve, inactivos legibles (Luis 13-sep) ===== */ body.tema-foco .mailapp .ft-sw,body.tema-foco .mailapp .ft-lay{ display:flex; gap:2px; padding:2px; border-radius:11px; background:#e9f0fa; box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 1px 2px rgba(26,115,232,.08), 0 3px 8px rgba(26,115,232,.10); } body.tema-foco .mailapp .ft-sw button,body.tema-foco .mailapp .ft-lay button{ height:32px; border-radius:9px; background:transparent; color:#2d3134; opacity:1; box-shadow:none; transform:none; transition:background .15s, color .15s, box-shadow .15s; } body.tema-foco .mailapp .ft-lay button{ width:34px; } body.tema-foco .mailapp .ft-sw button i,body.tema-foco .mailapp .ft-lay button i{ color:#3c4043; } body.tema-foco .mailapp .ft-sw button:hover,body.tema-foco .mailapp .ft-lay button:hover{ background:rgba(255,255,255,.6); color:#1a73e8; transform:none; box-shadow:none; } body.tema-foco .mailapp .ft-sw button:hover i,body.tema-foco .mailapp .ft-lay button:hover i{ color:#1a73e8; } body.tema-foco .mailapp .ft-sw button.on,body.tema-foco .mailapp .ft-lay button.on{ background:#fff; color:#1a73e8; box-shadow:0 1px 2px rgba(26,115,232,.14), 0 3px 8px rgba(26,115,232,.16); } body.tema-foco .mailapp .ft-sw button.on i,body.tema-foco .mailapp .ft-lay button.on i{ color:#1a73e8; } body.tema-foco .mailapp .ft-lay button:disabled{ opacity:1; background:transparent; color:#b7c0c9; box-shadow:none; } body.tema-foco .mailapp .ft-lay button:disabled i{ color:#b7c0c9; } .nite body.tema-foco .mailapp .ft-sw,.nite body.tema-foco .mailapp .ft-lay{ background:rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.45); } .nite body.tema-foco .mailapp .ft-sw button,.nite body.tema-foco .mailapp .ft-lay button{ background:transparent; color:#d5dee6; } .nite body.tema-foco .mailapp .ft-sw button i,.nite body.tema-foco .mailapp .ft-lay button i{ color:#b7c4cd; } .nite body.tema-foco .mailapp .ft-sw button:hover,.nite body.tema-foco .mailapp .ft-lay button:hover{ background:rgba(255,255,255,.08); color:#7cc0f0; } .nite body.tema-foco .mailapp .ft-sw button.on,.nite body.tema-foco .mailapp .ft-lay button.on{ background:#1f2a36; color:#7cc0f0; box-shadow:0 1px 2px rgba(0,0,0,.5); } .nite body.tema-foco .mailapp .ft-sw button.on i,.nite body.tema-foco .mailapp .ft-lay button.on i{ color:#7cc0f0; } .nite body.tema-foco .mailapp .ft-lay button:disabled,.nite body.tema-foco .mailapp .ft-lay button:disabled i{ color:#4c5a68; background:transparent; } /* ===== SIN FONDO GRIS: SOLO LA PASTILLA ACTIVA TIENE CUERPO (Luis 13-sep) ===== */ body.tema-foco .mailapp .ft-sw,body.tema-foco .mailapp .ft-lay{ background:transparent; box-shadow:none; padding:0; gap:2px; } body.tema-foco .mailapp .ft-sw button,body.tema-foco .mailapp .ft-lay button{ height:36px; border-radius:10px; background:transparent; color:#2d3134; box-shadow:none; } body.tema-foco .mailapp .ft-lay button{ width:36px; } body.tema-foco .mailapp .ft-sw button i,body.tema-foco .mailapp .ft-lay button i{ color:#3c4043; } body.tema-foco .mailapp .ft-sw button:hover,body.tema-foco .mailapp .ft-lay button:hover{ background:rgba(255,255,255,.55); color:#1a73e8; } body.tema-foco .mailapp .ft-sw button.on,body.tema-foco .mailapp .ft-lay button.on{ background:#fff; color:#1a73e8; box-shadow:0 0 0 1px rgba(15,42,68,.05), 0 2px 4px rgba(26,115,232,.14), 0 6px 16px rgba(26,115,232,.18); } body.tema-foco .mailapp .ft-lay button:disabled{ background:transparent; color:#b7c0c9; box-shadow:none; } .nite body.tema-foco .mailapp .ft-sw,.nite body.tema-foco .mailapp .ft-lay{ background:transparent; box-shadow:none; } .nite body.tema-foco .mailapp .ft-sw button,.nite body.tema-foco .mailapp .ft-lay button{ background:transparent; color:#d5dee6; } .nite body.tema-foco .mailapp .ft-sw button:hover,.nite body.tema-foco .mailapp .ft-lay button:hover{ background:rgba(255,255,255,.08); color:#7cc0f0; } .nite body.tema-foco .mailapp .ft-sw button.on,.nite body.tema-foco .mailapp .ft-lay button.on{ background:#1f2a36; color:#7cc0f0; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.5); } /* ===== BARRA BLANCA FLOTANTE, BUSCADOR PASTILLA, CHIPS Y SEPARADORES (Luis 13-sep, su referencia) ===== */ .ms-ia-tx{ display:none; } body.tema-foco .mailapp:not(.foco-movil) .foco-top{ height:56px; margin:10px 10px 12px; padding:0 12px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(15,42,68,.16), 0 1px 0 1px rgba(15,42,68,.06); } body.tema-foco .mailapp:not(.foco-movil) .ft-b[data-ft="panel"],body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-grid,body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-adv{ width:38px; min-width:38px; height:38px; padding:0; border-radius:11px; background:#fff; color:#3c4043; box-shadow:0 0 0 1px rgba(15,42,68,.06), 0 1px 2px rgba(15,42,68,.06), 0 3px 8px rgba(15,42,68,.08); display:inline-flex; align-items:center; justify-content:center; transition:box-shadow .15s, transform .15s; } body.tema-foco .mailapp:not(.foco-movil) .ft-b[data-ft="panel"] i,body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-grid i,body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-adv i{ color:#3c4043; font-size:19px; } body.tema-foco .mailapp:not(.foco-movil) .ft-b[data-ft="panel"]:hover,body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-grid:hover,body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-adv:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 0 0 1px rgba(15,42,68,.07), 0 2px 4px rgba(15,42,68,.08), 0 6px 14px rgba(15,42,68,.12); } body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-grid.on{ background:#e8f0fe; color:#1a73e8; } body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-grid.on i{ color:#1a73e8; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search{ height:40px !important; border-radius:12px !important; padding:0 6px 0 14px !important; background:#f4f8fd !important; box-shadow:0 0 0 1px rgba(15,42,68,.07) !important; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search:focus-within{ background:#fff !important; box-shadow:0 0 0 2px rgba(26,115,232,.28) !important; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search > i.ti-search{ color:#5f6368; font-size:18px; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search input{ font-size:14px; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search #msai{ width:auto; height:32px; padding:0 10px 0 10px; margin-left:8px; border-left:1px solid rgba(15,42,68,.14); border-radius:0; gap:6px; color:#1a73e8; font-weight:600; font-size:13px; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search #msai i{ font-size:17px; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search #msai .ms-ia-tx{ display:inline; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search #msai:hover{ background:rgba(26,115,232,.08); border-radius:8px; } body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search #msai.on{ background:#e8f0fe; border-radius:8px; border-left-color:transparent; } body.tema-foco .mailapp:not(.foco-movil) .ft-lay{ position:relative; margin-left:8px; padding-left:12px; } body.tema-foco .mailapp:not(.foco-movil) .ft-lay::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:rgba(15,42,68,.14); } body.tema-foco .mailapp:not(.foco-movil) .ft-me{ position:relative; width:38px; height:38px; margin-left:12px; font-size:14px; } body.tema-foco .mailapp:not(.foco-movil) .ft-me::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#1e9e5a; border:2px solid #fff; box-sizing:border-box; } body.tema-foco .mailapp:not(.foco-movil) .ft-win{ position:relative; margin-left:10px; padding-left:10px; } body.tema-foco .mailapp:not(.foco-movil) .ft-win::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:rgba(15,42,68,.14); } .nite body.tema-foco .mailapp:not(.foco-movil) .foco-top{ background:#161f29; box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); } .nite body.tema-foco .mailapp:not(.foco-movil) .ft-b[data-ft="panel"],.nite body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-grid,.nite body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-adv{ background:#1f2a36; color:#d5dee6; box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5); } .nite body.tema-foco .mailapp:not(.foco-movil) .ft-b[data-ft="panel"] i,.nite body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-grid i,.nite body.tema-foco .mailapp:not(.foco-movil) .ft-b.ft-adv i{ color:#d5dee6; } .nite body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search{ background:#0f161d !important; } .nite body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search:focus-within{ background:#0f161d !important; box-shadow:0 0 0 2px rgba(124,192,240,.3) !important; } .nite body.tema-foco .mailapp:not(.foco-movil) .ft-search .mail-search #msai{ color:#8ab4f8; border-left-color:rgba(255,255,255,.12); } .nite body.tema-foco .mailapp:not(.foco-movil) .ft-lay::before,.nite body.tema-foco .mailapp:not(.foco-movil) .ft-win::before{ background:rgba(255,255,255,.12); } .nite body.tema-foco .mailapp:not(.foco-movil) .ft-me::after{ border-color:#161f29; } /* ===== LOGO UN POCO MAS GRANDE (Luis 13-sep) ===== */ body.tema-foco .mailapp .ft-brand img{ width:34px; height:34px; border-radius:9px; } body.tema-foco .mailapp .ft-brand{ gap:9px; } /* ===== PESTANAS DEL LECTOR COMO CHIPS (Luis 13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mail-tabs{ height:48px; padding:8px 10px 0; gap:8px; align-items:center; } body.tema-foco .mailapp .mail:not(.mobile) .mtab{ height:32px; padding:0 6px 0 12px; border-radius:10px; background:#fff; color:#3c4043; font-weight:500; gap:7px; box-shadow:0 0 0 1px rgba(15,42,68,.13), 0 1px 0 1px rgba(15,42,68,.05) !important; transition:background .12s, box-shadow .12s; } body.tema-foco .mailapp .mail:not(.mobile) .mtab i{ color:#5f6368; opacity:1; font-size:15px; } body.tema-foco .mailapp .mail:not(.mobile) .mtab:hover{ background:#f7fafd; color:#1a1a1a; box-shadow:0 0 0 1px rgba(15,42,68,.18), 0 1px 0 1px rgba(15,42,68,.06) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on{ background:#e8f0fe; color:#1a73e8; font-weight:600; box-shadow:0 0 0 1.5px rgba(26,115,232,.45), 0 1px 0 1px rgba(26,115,232,.10) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on i{ color:#1a73e8; } body.tema-foco .mailapp .mail:not(.mobile) .mtab-x{ width:22px; height:22px; border-radius:50%; opacity:1; color:#5f6368; font-size:13px; margin-left:2px; } body.tema-foco .mailapp .mail:not(.mobile) .mtab-x:hover{ background:rgba(15,42,68,.10); color:#1a1a1a; } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on .mtab-x{ color:#1a73e8; } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on .mtab-x:hover{ background:rgba(26,115,232,.15); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab{ background:#1f2a36; color:#d5dee6; box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 1px 0 1px rgba(0,0,0,.5) !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab i,.nite body.tema-foco .mailapp .mail:not(.mobile) .mtab-x{ color:#b7c4cd; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab:hover{ background:#243140; color:#fff; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab.on{ background:#1b3247; color:#7cc0f0; box-shadow:0 0 0 1.5px rgba(124,192,240,.5), 0 1px 0 1px rgba(0,0,0,.5) !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab.on i,.nite body.tema-foco .mailapp .mail:not(.mobile) .mtab.on .mtab-x{ color:#7cc0f0; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab-x:hover{ background:rgba(255,255,255,.12); } /* ===== PESTANAS: SIN FONDO GRIS, LA ACTIVA BLANCA CON LETRA AZUL, TODAS FLOTANTES (Luis 13-sep) ===== */ body.tema-foco .mailapp .mail:not(.mobile) .mtab{ box-shadow:0 0 0 1px rgba(15,42,68,.06), 0 1px 2px rgba(15,42,68,.06), 0 4px 10px rgba(15,42,68,.10) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mtab:hover{ background:#fff; box-shadow:0 0 0 1px rgba(15,42,68,.07), 0 2px 4px rgba(15,42,68,.08), 0 8px 18px rgba(15,42,68,.16) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on,body.tema-foco .mailapp .mail:not(.mobile) .mtab.on:hover{ background:#fff; color:#1a73e8; box-shadow:0 0 0 1.5px rgba(26,115,232,.45), 0 2px 4px rgba(26,115,232,.14), 0 6px 16px rgba(26,115,232,.18) !important; } body.tema-foco .mailapp .mail:not(.mobile) .mtab.on .mtab-x:hover{ background:rgba(26,115,232,.10); } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab{ box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.5) !important; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab:hover{ background:#243140; } .nite body.tema-foco .mailapp .mail:not(.mobile) .mtab.on,.nite body.tema-foco .mailapp .mail:not(.mobile) .mtab.on:hover{ background:#1f2a36; color:#7cc0f0; box-shadow:0 0 0 1.5px rgba(124,192,240,.55), 0 2px 6px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.6) !important; } /* ===== FICHA ABIERTA: ANILLO Y SOMBRA QUE LA LEVANTA (13-sep; la linea 325 las anulaba con !important) ===== */ body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on:hover,body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(26,115,232,.45), 0 2px 6px rgba(26,115,232,.12), 0 8px 20px rgba(26,115,232,.18) !important; } .nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on,.nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.on:hover,.nite body.tema-foco.foco-relieve-a .mailapp .mail:not(.mobile) .mrow.sel{ box-shadow:0 0 0 1.5px rgba(124,192,240,.6), 0 2px 6px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.6) !important; }