/* NE Mail v8.5 — Ignacio Albacete 19/06/26 / Última actualización: 25/06/26. v8.5: auth DMARC/DKIM en lista (icono+fondo color) y fondo de color en panel de lectura. v8.4: blur wallpaper con mask-image. v8.3: fondos animados visibles; sección Apariencia unificada. */
/* Tipografía corporativa Montserrat (self-host, licencia libre OFL — sin Google Fonts) */
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
--primary:#0078d4; --primary-dark:#106ebe; --primary-light:#e8e8f4; --purple:#6264a7;
--navy:#0f548c; --accent:#3b82f6;
--bg:#f5f6f8; --pane:#ffffff; --line:#e6e6e6; --line-soft:#f0f0f0;
--text:#1b1a19; --muted:#605e5c; --unread:#0f6cbd;
/* superficies/texto/bordes (tematizables claro/oscuro) */
--surface:#ffffff; --surface-2:#faf9f8; --surface-3:#f5f6f8; --hover:#f0f0f0;
--accent-soft:#eef2f7; --text-2:#444444; --border:#e6e6e6; --border-soft:#f0f0f0;
--shadow-color:rgba(0,0,0,.12);
--radius:8px; --radius-lg:14px;
--shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
--shadow:0 2px 8px rgba(0,0,0,.08);
--font:'Segoe UI','Segoe UI Web (West European)',-apple-system,BlinkMacSystemFont,'Inter',Roboto,'Helvetica Neue',sans-serif;
--font-compose:'Montserrat','Century Gothic','URW Gothic','Segoe UI',Arial,sans-serif;
}
/* ===== Tema oscuro ===== */
html[data-theme="dark"]{
--bg:#141414; --pane:#1e1e1e; --line:#3a3a3a; --line-soft:#2c2c2c;
--text:#e6e6e6; --muted:#9aa0a6; --unread:#6cb6ff;
--surface:#1e1e1e; --surface-2:#262626; --surface-3:#141414; --hover:#2e2e2e;
--accent-soft:#1d2a3a; --text-2:#c4c4c4; --border:#3a3a3a; --border-soft:#2c2c2c;
--shadow-color:rgba(0,0,0,.5);
color-scheme:dark;
}
/* ajustes finos del modo oscuro (elementos que aún usan literales) */
html[data-theme="dark"] body{background:var(--surface-3);color:var(--text)}
html[data-theme="dark"] .ow-header{background:var(--surface);border-bottom-color:var(--border)}
html[data-theme="dark"] .ow-rail{background:var(--surface)}
html[data-theme="dark"] .ow-ribbon{background:var(--surface-2)}
html[data-theme="dark"] .ow-tabsrow{background:var(--surface)}
html[data-theme="dark"] .ow-tools{background:var(--surface-2)}
html[data-theme="dark"] .ow-search{background:var(--surface-2);border-color:var(--border)}
html[data-theme="dark"] .ow-search input{color:var(--text)}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:var(--surface-2);color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .msg:hover,html[data-theme="dark"] .folder:hover{background:var(--hover)}
html[data-theme="dark"] .modal,html[data-theme="dark"] .cview,html[data-theme="dark"] .cfg-modal{background:var(--surface);color:var(--text)}
html[data-theme="dark"] a{color:#6cb6ff}
html[data-theme="dark"] .read-body iframe{background:#fff;border-radius:6px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:15px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none}
svg{width:1em;height:1em;display:inline-block;vertical-align:-.15em}
/* ===== Iconos Phosphor (self-host): LÍNEA por defecto, SÓLIDO azul al pasar el ratón ===== */
.ph,.ph-fill{line-height:1;display:inline-block;vertical-align:-.05em}
/* tamaño por contexto */
.form-group.input-icon>i.ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.15rem;color:var(--muted);pointer-events:none}
.ow-search>i.ph{font-size:18px;flex-shrink:0;color:var(--muted)}
.ow-head-actions>button i.ph,.ow-notif-wrap>button i.ph{font-size:20px}
.ow-act i.ph{font-size:16px}
.ow-new i.ph{font-size:16px}
.rail-ico i.ph{font-size:23px}
.list-tools i.ph{font-size:18px}
.toolset-compose button i.ph,.cmp-toolbar button i.ph{font-size:17px}
.tb-hilite i.ph{font-size:17px;color:var(--text-2)}
.mini-bar i.ph{font-size:16px}
.c-send i.ph{font-size:17px}
.cmp-bar>button i.ph{font-size:19px}
.catt i.ph{font-size:22px;color:#0078d4;flex-shrink:0}
.catt.done i.ph{color:#107c10}
.catt-banner i.ph{font-size:18px;flex-shrink:0;color:#0f6cbd}
.read-actions i.ph{font-size:16px}
.um-item i.ph{font-size:19px;color:var(--text-2);width:18px;text-align:center}
.fav-head i.chev{font-size:14px;transition:transform .2s}
.fav-head.collapsed i.chev{transform:rotate(-90deg)}
.folder .ico i.ph{font-size:17px}
/* === Swap LÍNEA → SÓLIDO (mismo codepoint, cambia font-family) + azul botón al hover === */
.ma:hover i.ph,.ctxi:hover i.ph,.ow-act:hover i.ph,.ow-new:hover i.ph,
.list-tools button:hover i.ph,.toolset-compose button:hover i.ph,.cmp-toolbar button:hover i.ph,
.mini-bar button:hover i.ph,.um-item:hover i.ph,.ow-head-actions>button:hover i.ph,
.ow-notif-wrap>button:hover i.ph,.read-actions button:hover i.ph,.cmp-bar>button:hover i.ph,
.search-head button:hover i.ph,.fav-head:hover i.chev,.mob-hamb:hover i.ph,.mob-back:hover i.ph,
.pk-del:hover i.ph,.c-attach:hover i.ph,.c-discard:hover i.ph,.c-extract:hover i.ph,.c-tab:hover i.ph,
.rail-ico:hover i.ph,.rail-ico.active i.ph,.folder:hover .ico i.ph,.folder.active .ico i.ph,
.cma:hover i.ph,.crb-attach:hover i.ph,
.list-tools button.active i.ph,.read-actions button.active i.ph{
font-family:"Phosphor-Fill"!important;color:var(--primary)}
/* activo siempre en azul aunque no haya hover */
.list-tools button.active,.read-actions button.active{color:var(--primary)}
/* eliminar siempre en rojo */
.ma-del i.ph,.ma:hover.ma-del i.ph,.read-actions .ma-del:hover i.ph{
font-family:"Phosphor-Fill"!important;color:#c50f1f!important}
/* el botón "Correo nuevo"/"Enviar" ya es azul de fondo: al hover el icono sólido va en blanco */
.ow-new:hover i.ph,.c-send:hover i.ph{color:#fff}
/* indicadores de estado en la fila (prioritario/pa luego): siempre sólidos y con su color */
.mf-flag i.ph,.mf-later i.ph{font-family:"Phosphor-Fill"!important}
.hidden{display:none!important}
/* ====================== LOGIN ====================== */
/* Fondo aleatorio: --login-bg se inyecta desde index.php */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
padding:20px;background-color:#1a2060;
background-image:linear-gradient(rgba(14,18,60,.58),rgba(14,18,60,.58)),var(--login-bg);
background-size:cover;background-position:center}
.login-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:0}
/* Tarjeta glass (clon NE Panel) */
.login-container{
position:relative;z-index:1;
width:100%;max-width:400px;
padding:2rem;border-radius:24px;
background:rgba(0,0,0,.58);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 8px 32px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.1);
animation:loginSlideIn .55s ease-out both}
@keyframes loginSlideIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
/* Secciones internas */
.login-section{text-align:center;width:100%}
/* Icono principal (huella / sobre) */
.login-main-icon{
display:block;font-size:4rem;
color:#60a5fa;margin:0 auto .75rem;
animation:loginFloat 3s ease-in-out infinite}
@keyframes loginFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.login-main-icon.warn{color:#f59e0b;animation:none}
.login-title{font-size:1.55rem;font-weight:700;color:#f1f5f9;margin:0 0 .25rem}
.login-subtitle{font-size:.9rem;color:#94a3b8;margin-bottom:1.4rem}
/* Inputs */
.login-container input[type=email],
.login-container input[type=password]{
width:100%;padding:.85rem 1rem;margin-bottom:.85rem;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
border-radius:12px;font-size:1rem;
color:#f1f5f9;font-family:var(--font);
transition:all .25s}
.login-container input::placeholder{color:rgba(255,255,255,.38)}
.login-container input:focus{outline:none;
background:rgba(255,255,255,.13);
border-color:rgba(96,165,250,.55);
box-shadow:0 0 0 3px rgba(59,130,246,.15)}
/* Botón primario */
.btn-login-primary{
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
width:100%;padding:.9rem 1.5rem;margin-bottom:.5rem;
background:#3b82f6;color:#fff;border:none;border-radius:12px;
font-size:1rem;font-weight:600;font-family:var(--font);cursor:pointer;
transition:all .25s}
.btn-login-primary:hover{background:#2563eb;box-shadow:0 4px 14px rgba(59,130,246,.42);transform:translateY(-1px)}
.btn-login-primary:active{transform:scale(.98)}
.btn-login-primary:disabled{opacity:.6;cursor:default;transform:none}
.btn-login-primary i{font-size:1.2rem}
.btn-passkey{font-size:1.05rem;padding:1rem 1.5rem}
.btn-passkey i{font-size:1.35rem}
/* Check "mantener sesión" */
.login-check{display:flex;align-items:center;gap:8px;
font-size:.88rem;color:#cbd5e1;cursor:pointer;margin-bottom:.9rem}
.login-check input{width:15px;height:15px;accent-color:#3b82f6}
/* Hint */
.login-hint{font-size:.88rem;color:#94a3b8;margin-bottom:1rem;line-height:1.4}
/* Footer de navegación — todo en una línea */
.login-footer{
display:flex;flex-direction:row;align-items:center;justify-content:center;
gap:0;margin-top:1.1rem}
.login-link{
color:#475569;text-decoration:none;font-size:1.3rem;
padding:0 1rem;
border-left:1px solid rgba(255,255,255,.1);
transition:color .2s,transform .15s}
.login-link:first-child{border-left:none}
.login-link:hover{color:#93c5fd;transform:scale(1.2)}
.login-link i{display:block}
/* ── Transición épica login → app ─────────────────────────────── */
.login-ripple{
position:fixed;z-index:9999;
border-radius:50%;
background:radial-gradient(circle,#fff 0%,#3b82f6 35%,rgba(59,130,246,0) 70%);
pointer-events:none;
transform:scale(0);opacity:0}
.login-ripple.go{
animation:rippleBurst .75s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes rippleBurst{
0% {transform:scale(0);opacity:.95}
55% {opacity:.85}
100%{transform:scale(80);opacity:0}}
#login.fade-out{animation:loginFadeAway .6s ease forwards}
@keyframes loginFadeAway{
0% {opacity:1;filter:blur(0)}
100%{opacity:0;filter:blur(12px)}}
#app.fade-in-epic{animation:appReveal .5s .2s ease both}
@keyframes appReveal{
from{opacity:0;transform:scale(.96)}
to {opacity:1;transform:scale(1)}}
/* Separador */
.login-sep{width:100%;border:none;border-top:1px solid rgba(255,255,255,.08);margin:.9rem 0}
/* Errores */
.login-err{min-height:16px;font-size:.83rem;color:#fca5a5;text-align:center;margin-top:.4rem}
/* Cooldown */
.cooldown-box{text-align:center;padding:1.5rem 0;animation:loginFadeIn .3s ease}
@keyframes loginFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cooldown-icon{font-size:2.5rem;color:#f59e0b;margin-bottom:.75rem;
animation:loginPulse 2s ease-in-out infinite}
@keyframes loginPulse{0%,100%{opacity:1}50%{opacity:.65}}
.cooldown-timer{font-size:2rem;font-weight:700;color:#f1f5f9;
font-variant-numeric:tabular-nums;margin:.4rem 0}
.cooldown-msg{font-size:.83rem;color:#94a3b8}
/* QR display */
.qr-display{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-display svg{border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:10px;background:var(--surface)}
.qr-timer{font-size:.78rem;color:#94a3b8}
/* Botones genéricos (app) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:.78rem 1.4rem;
border-radius:10px;font-size:.98rem;font-weight:600;transition:all .2s;font-family:var(--font)}
.btn-block{width:100%;margin-top:8px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(15,108,189,.35)}
.btn-secondary{background:var(--surface-2);color:#3b3a39;border:1px solid #e3e3e3;font-weight:500}
.btn-secondary:hover{background:#e9ebef}
/* Sesiones activas */
.session-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.session-row:last-child{border-bottom:none}
.session-icon{font-size:1.4rem;flex-shrink:0}
.session-info{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left}
.session-browser{font-size:.9rem;font-weight:500;color:var(--text)}
.session-meta{font-size:.78rem;color:#a0a0a0}
.session-badge{font-size:.72rem;background:#0078d41a;color:#0078d4;padding:2px 7px;border-radius:10px;width:fit-content;margin-top:2px}
.btn-mini-danger{color:#c0392b!important;border-color:#f5a09b!important}
.badge-soon{font-size:.62rem;background:var(--surface)4ce;color:#8a6d00;border-radius:6px;padding:1px 6px;margin-left:4px}
/* ====================== APP (clon Outlook Web / Microsoft 365) ====================== */
#app{height:100%;display:flex;flex-direction:row;background:var(--surface);position:relative;
font-family:'Segoe UI',-apple-system,system-ui,sans-serif}
/* ---- Header ---- */
.ow-header{height:auto;display:flex;flex-direction:column;align-items:stretch;
background:var(--bg);border-bottom:1px solid var(--border);
border-radius:0 0 6px 6px;overflow:hidden;
position:relative;z-index:20;
-webkit-app-region:drag;app-region:drag}
/* Todo el contenido interactivo debe NO ser arrastrable */
.ow-header>*{-webkit-app-region:no-drag;app-region:no-drag}
.ow-header-bar{height:48px;display:flex;align-items:center;gap:0;padding:0 10px 0 16px}
.ow-logo{color:var(--primary);font-weight:700;font-size:18px;letter-spacing:-.5px;min-width:88px;padding-right:8px}
/* Buscador */
.ow-search{flex:1;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:8px;
background:#f5f7fa;border-radius:20px;padding:5px 14px;
border:1.5px solid #d8dde4}
.ow-search svg{width:15px;height:15px;flex-shrink:0;color:var(--muted)}
.ow-search>i.ph{color:var(--muted);font-size:15px}
.ow-search input{flex:1;border:none;outline:none;font-size:13px;background:transparent;color:var(--text)}
.ow-search input::placeholder{color:var(--muted)}
.ow-search:focus-within{border-color:#0078d4;background:var(--surface);box-shadow:0 0 0 2px rgba(0,120,212,.12)}
/* Acciones derecha */
.ow-head-actions{display:flex;align-items:center;gap:2px;margin-left:8px}
.ow-head-actions>button{width:34px;height:34px;border-radius:50%;color:var(--text-2);display:grid;place-items:center}
.ow-head-actions>button svg{width:18px;height:18px}
.ow-head-actions>button:hover{background:var(--accent-soft);color:#0078d4}
.ow-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;
font-weight:600;font-size:13px;cursor:pointer;margin-left:6px;border:none;flex-shrink:0}
.ow-avatar:hover{opacity:.88}
.ow-logout{color:var(--text-2);font-size:17px;width:30px;height:30px;border-radius:50%}
.ow-logout:hover{background:var(--accent-soft)}
.ow-rainbow{display:none}
/* Window Controls Overlay: cuando la PWA está instalada y el SO pinta sus botones */
@media (display-mode: window-controls-overlay){
.ow-header{
position:fixed;top:0;left:0;
left:env(titlebar-area-x,0);
top:env(titlebar-area-y,0);
width:env(titlebar-area-width,100%);
height:env(titlebar-area-height,48px);
}
/* Empujar el ribbon para que no quede bajo el header fijo */
.ow-main>.ow-ribbon{margin-top:env(titlebar-area-height,48px)}
}
.ow-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;min-width:0}
/* ---- Ribbon ---- */
.ow-ribbon{background:rgba(255,255,255,.55);padding:0 0 5px;margin-right:10px;border-radius:10px 10px 10px 0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.ow-tabsrow{display:flex;align-items:center;height:40px;padding:0 8px}
.ow-tabs{display:flex;gap:20px;height:34px;align-items:center;font-size:14px}
.ow-tabs button{color:var(--text-2);height:100%;border-bottom:2px solid transparent}
.ow-tabs button.active{color:#0078d4;font-weight:600;border-bottom-color:#0078d4}
.ow-tools{background:#fff;display:flex;align-items:center;gap:2px;height:40px;flex-wrap:nowrap;overflow:hidden;padding:0 4px;margin:0 6px;border-radius:5px;position:relative}
/* .ow-new = botón importante estándar (Correo nuevo, Enviar, …). Azul --primary. */
.ow-new{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border:1.5px solid var(--primary);border-radius:4px;padding:4px 12px;font-size:13px;font-weight:600;min-height:28px;white-space:nowrap;flex-shrink:0}
.ow-new:hover{background:var(--primary-dark)}
.ow-tools .ow-new{margin-right:6px}
#btnCompose svg{transform:rotate(-45deg);filter:brightness(0) invert(1)}
.ow-new .caret{font-size:10px;opacity:.9;margin-left:2px}
.ow-sep{width:1px;height:20px;background:#e0e0e0;margin:0 6px;flex-shrink:0}
.ow-act{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-size:13px;padding:4px 8px;border-radius:4px;min-height:28px;white-space:nowrap;border:none;background:none;cursor:pointer;font-family:inherit;flex-shrink:0}
.ow-act:hover{background:var(--hover)}
.ow-act svg{width:16px;height:16px}
/* ---- Ribbon contextual: pestañas y herramientas que se intercambian (lectura ↔ redacción) ---- */
.ow-tabs{gap:20px}
.tabset{display:flex;gap:20px;height:100%;align-items:center}
.toolset{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow:hidden;flex:1 1 auto;min-width:0;padding-right:58px}
.ow-tools>.ow-tools-fixed{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;z-index:2;background:inherit}
.tabset-compose,.toolset-compose{display:none}
.ow-ribbon.compose-mode:not(.peek-mail) .toolset-mail,.ow-ribbon.compose-mode:not(.peek-mail) .toolset-vista,.ow-ribbon.compose-mode:not(.peek-mail) .toolset-ayuda{display:none!important}
.ow-ribbon.compose-mode.peek-mail .toolset-compose{display:none!important}
.ow-ribbon.compose-mode .tabset-mail{display:flex!important}
.ow-ribbon.compose-mode .tabset-compose{display:flex}
.ow-ribbon.compose-mode .toolset-compose{display:flex}
.toolset-compose button{width:36px;height:36px;border-radius:5px;color:var(--text-2);display:grid;place-items:center;font-size:14px}
.toolset-compose button:hover{background:var(--hover)}
.toolset-compose button.on{background:var(--accent-soft);color:#0f548c}
.toolset-compose button svg{width:16px;height:16px}
.toolset-compose select{height:36px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text-2);font-size:13.5px;padding:0 4px;cursor:pointer;outline:none}
.toolset-compose select:hover{border-color:#bbb}
.toolset-compose .tb-font{min-width:104px}
.toolset-compose .tb-size{width:54px}
/* grupos de herramientas por pestaña (Mensaje/Insertar/Formato/Dibujar/Opciones) */
.cset{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow:hidden;width:100%}
.cset[hidden]{display:none!important}
.toolset-compose .ins-btn{width:auto;height:36px;padding:0 12px;gap:7px;font-size:13.5px;display:inline-flex;align-items:center;color:var(--text);white-space:nowrap}
.toolset-compose .ins-btn i.ph{font-size:17px}
.toolset-compose .ins-btn:hover{background:var(--accent-soft)}
.toolset-compose .ins-btn:hover i.ph{font-family:"Phosphor-Fill"!important;color:var(--primary)}
.toolset-compose .ins-btn.primary-tool{color:var(--primary);font-weight:600}
.toolset-compose .draw-pen{width:24px;height:24px;border-radius:50%;background:var(--p);border:2px solid #fff;box-shadow:0 0 0 1px #c8c8c8;padding:0}
.toolset-compose .draw-pen.on{box-shadow:0 0 0 2px #1b1a19}
.draw-canvas{position:fixed;z-index:200;cursor:crosshair;touch-action:none;border-radius:8px;background:transparent}
.emoji-pop{position:fixed;z-index:9500;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:6px;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;max-width:240px}
.emoji-pop button{width:34px;height:34px;font-size:19px;border-radius:7px}
.emoji-pop button:hover{background:var(--accent-soft)}
/* ---- Mini-barra flotante de formato (botón derecho sobre la selección) ---- */
.mini-bar{position:fixed;z-index:9100;display:flex;align-items:center;gap:1px;background:var(--surface);border:1px solid var(--border);
border-radius:7px;box-shadow:0 4px 18px rgba(0,0,0,.18);padding:3px}
.mini-bar button,.mini-bar label{width:28px;height:28px;border-radius:5px;display:grid;place-items:center;color:var(--text-2);position:relative;cursor:pointer}
.mini-bar button:hover,.mini-bar label:hover{background:var(--hover)}
.mini-bar button.on{background:var(--accent-soft);color:#0f548c}
.mini-bar svg{width:15px;height:15px}
.mini-bar input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer}
.mini-sep{width:1px;height:18px;background:#e0e0e0;margin:0 3px}
/* ---- Body: 4 columnas ---- */
.ow-body{flex:1;display:grid;grid-template-columns:250px var(--ow-list-w,350px) 1fr;overflow:hidden;min-height:0}
/* col1 rail */
.ow-rail{background:var(--bg);border-right:none;display:flex;flex-direction:column;align-items:center;padding:48px 0 8px;gap:4px}
.rail-ico{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;color:var(--text-2);position:relative}
.rail-ico svg{width:22px;height:22px}
.rail-ico:hover{background:var(--hover)}
.rail-ico.active{color:var(--bc,#0078d4)}
.rail-ico.active::before{content:"";position:absolute;left:-5px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--bc,#0078d4)}
.rail-spacer{flex:1}
.app-word,.app-excel,.app-ppt{color:#fff;font-weight:700;font-size:15px;border-radius:5px}
.app-word{background:#2b579a}.app-excel{background:#217346}.app-ppt{background:#c43e1c}
/* col2 carpetas */
.ow-folders{background:rgba(255,255,255,.87);border-right:1px solid var(--border);overflow-y:auto;padding:10px 8px;font-size:13px;display:flex;flex-direction:column}
.fav-head{display:flex;align-items:center;gap:7px;color:var(--text-2);font-weight:600;padding:6px 8px;cursor:pointer}
.fav-head .chev{width:13px;height:13px;transition:transform .2s}
.fav-head.collapsed .chev{transform:rotate(-90deg)}
.folder{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:4px;color:var(--text);cursor:pointer}
.folder:hover{background:var(--hover)}
.folder.active{background:#EBF3FB;color:#1a1a1a;font-weight:700}
.folder .ico{width:18px;text-align:center;color:var(--muted);font-size:1rem}
.folder.active .ico{color:var(--primary)}
.folder .count{margin-left:auto;background:#0078d4;color:#fff;border-radius:9px;padding:1px 7px;font-size:11px;font-weight:600}
.acct-name{padding:10px 10px 4px;color:var(--muted);font-size:12px;font-weight:600;border-top:1px solid var(--border);margin-top:8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* acordeón de cuentas en la barra de carpetas */
.acct-head{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:7px;cursor:pointer;margin-top:4px}
.acct-head:hover{background:var(--accent-soft)}
.acct-head.open{cursor:default}
.acct-head.open:hover{background:transparent}
.acct-av{width:30px;height:30px;flex-shrink:0;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;overflow:hidden}
.acct-av.has-img{background:none!important}
.acct-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.acct-meta{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.acct-disp{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-mail{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-chev{font-size:14px;color:var(--muted);flex-shrink:0}
.acct-more{margin-left:auto;flex-shrink:0;opacity:0;background:none;border:none;cursor:pointer;color:var(--muted);padding:2px 5px;border-radius:5px;font-size:15px;line-height:1}
.acct-head:hover .acct-more{opacity:.75}
.acct-more:hover{opacity:1;background:var(--hover);color:var(--text)}
.acct-folders{margin:2px 0 6px 4px;padding-left:15px;border-left:none}
.go-groups{display:flex;align-items:center;gap:6px;padding:9px 10px;color:#0078d4;font-size:13px;text-decoration:none;
margin-top:auto;border-top:1px solid var(--border)}
.fbadge{margin-left:auto;background:#0078d4;color:#fff;border-radius:9px;padding:1px 7px;font-size:11px;font-weight:600}
/* col3 lista */
.ow-list{background:#fff;border-right:none;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
.list-tabs{position:relative;display:flex;align-items:stretch;gap:1px;padding:5px 8px 0;border-bottom:1px solid var(--border);font-size:14px;min-height:43px}
.list-tabs button[data-filter]{position:relative;display:flex;align-items:center;color:var(--muted);padding:0 7px 5px;font-weight:600;white-space:nowrap;border-radius:6px 6px 0 0;transition:background .12s,color .12s}
.list-tabs button[data-filter]:hover{background:var(--surface-2);color:var(--text)}
.list-tabs button[data-filter].active{color:var(--primary)}
.list-tabs button[data-filter].active::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2.5px;border-radius:2px 2px 0 0;background:var(--primary)}
.list-ctrl{display:flex;align-items:center;justify-content:space-between;padding:3px 8px 3px 12px;border-bottom:1px solid var(--border);min-height:30px}
.list-count{font-size:12px;color:var(--muted)}
.list-tools{display:flex;align-items:center;gap:2px}
.list-tools button{width:30px;height:30px;color:var(--muted);border-radius:5px;display:grid;place-items:center}
.list-tools button:hover{background:var(--hover)}
/* al seleccionar varios: la barra de acciones SUPERPONE la fila de pestañas (la lista no se mueve) */
.list-tabs.selecting > :not(#selBar){visibility:hidden}
.list-tabs.selecting ~ .list-ctrl{visibility:hidden}
#list{flex:1;overflow-y:auto}
.msg{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;border-left:3px solid transparent;position:relative}
.msg.unread{border-left-color:var(--primary);background:#eff5ff}
.msg.unread:hover{background:#e6f0fc}
.msg:hover{background:var(--surface-2)}
.msg.active{background:#deecf9;border-left-color:#0078d4}
.msg .avatar{width:36px;height:36px;flex-shrink:0;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
/* avatar con logo BIMI del remitente (fondo blanco + recorte circular) */
.avatar.has-img{color:transparent!important;background-color:#fff!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.msg .body{flex:1;min-width:0}
.msg .row1{display:flex;align-items:center;gap:6px;min-height:20px}
.from-pfx{font-weight:400;color:var(--muted);font-size:12px;margin-right:2px}
.msg .from{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:var(--text)}
.msg.unread .from{color:var(--text);font-weight:700}
.msg .row2{display:flex;align-items:center;gap:8px;margin-top:1px}
.msg .date{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.msg .subj{font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.msg.unread .subj{font-weight:600;color:var(--text)}
.msg .preview{font-size:12.5px;color:var(--muted);overflow:hidden;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;max-height:2.7em;word-break:break-word}
/* Animación "desintegración" al eliminar/mover una fila: se desvanece y colapsa, las de abajo suben solas */
.msg.removing{pointer-events:none;overflow:hidden;transition:height .3s ease,opacity .28s ease,transform .28s ease,filter .28s ease,padding .3s ease,margin .3s ease,border-width .3s ease;opacity:0;transform:scale(.94) translateY(-4px);filter:blur(4px)}
@media (prefers-reduced-motion:reduce){ .msg.removing{transition:height .18s ease,opacity .18s ease;transform:none;filter:none} }
.dot-unread{width:9px;height:9px;border-radius:50%;background:var(--primary);flex-shrink:0}
/* indicadores persistentes (prioritario / pa luego), junto a la fecha */
.m-flags{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-size:12px}
/* clip de adjunto en la fila (solo si el correo lleva adjuntos) */
.msg-clip{display:inline-flex;align-items:center;color:var(--muted);font-size:12px;flex-shrink:0;margin-right:3px}
.msg:hover .row1 .msg-clip{display:none}/* al pasar el ratón salen las acciones; el clip cede el sitio */
/* "vuela a Pa Luego": globo que viaja de la fila al item Pa Luego del sidebar */
.fly-later{position:fixed;z-index:9999;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .58s cubic-bezier(.45,.05,.3,1),opacity .58s ease}
.fly-pulse{animation:flyPulse .5s ease}
@keyframes flyPulse{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fly-later{transition:opacity .2s ease}}
.m-flags:empty{display:none}
.mf-flag{color:#d83b01;display:inline-flex}
.mf-later{color:#0078d4;display:inline-flex}
/* acciones rápidas al pasar el ratón: en la línea del remitente (como Outlook), sin recuadro */
.msg-actions{display:none;align-items:center;gap:1px;flex-shrink:0;margin-left:auto}
.msg:hover .msg-actions{display:flex}
.ma{width:26px;height:26px;border-radius:5px;color:#5a5a5a;display:grid;place-items:center;font-size:15px}
.ma:hover{background:var(--accent-soft);color:#0f4c81}
.ma svg{width:16px;height:16px}
.ma-flag.on{color:#d83b01}
.ma-later.on{color:#0078d4}
/* botón eliminar en la 2ª línea, a la derecha de la fecha (reserva su hueco: la fecha no se mueve) */
.msg .row2 .ma-del{width:24px;height:24px;font-size:15px;flex-shrink:0;visibility:hidden}
.msg:hover .row2 .ma-del{visibility:visible}
.msg:hover .row1 .date{visibility:hidden}
/* selección múltiple: clic en el avatar marca el correo; queda resaltado (estilo arrastrar-a-carpeta) */
.msg .avatar{cursor:pointer;position:relative}
.msg .avatar .av-check{position:absolute;inset:0;border-radius:50%;background:#0078d4;color:#fff;display:none;align-items:center;justify-content:center;font-size:17px}
.msg .avatar .av-check svg{width:20px;height:20px}
.msg.selected .avatar .av-check{display:flex}
.msg .avatar:hover{box-shadow:0 0 0 2px #0078d4}
.msg.selected{background:var(--accent-soft);border-left-color:#0078d4}
.msg.selected:hover{background:#c3dcf3}
.msg.dragging{opacity:.45}
/* ===== Threading / conversaciones ===== */
.list-date-sep{padding:6px 16px 3px;font-size:11px;font-weight:600;color:var(--muted);pointer-events:none;user-select:none;margin-top:2px}
.conv-date-sep{text-align:center;font-size:11px;color:var(--muted);margin:16px 0 8px;font-weight:500;letter-spacing:.3px;user-select:none}
/* iMessage: en colapsado solo se ve el preview, sin nombre/fecha DENTRO de la burbuja */
.conv-msg.collapsed .conv-hd-row1{display:none}
.conv-msg.collapsed .conv-hd-sub{margin:0;padding:0}
.conv-msg.collapsed .conv-hd-meta{padding:0}
.conv-msg.from-me.collapsed .conv-hd-preview{color:rgba(255,255,255,.92)}
.conv-msg.from-other.collapsed .conv-hd-preview{color:var(--text)}
/* Timestamp bajo la burbuja (solo último del grupo) */
.conv-bubble-ts-col{font-size:10px;color:var(--muted);padding:2px 4px 4px;align-self:flex-end}
.conv-msg.from-me .conv-bubble-ts-col{text-align:right;align-self:flex-end}
.conv-msg.from-other .conv-bubble-ts-col{text-align:left}
.thread-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;background:#e8e8e8;border-radius:8px;font-size:11px;font-weight:600;color:var(--text-2);padding:0 5px;margin-left:4px;flex-shrink:0}
/* === PANEL DE FILTROS ESTILO OUTLOOK === */
.list-tabs{display:none!important}
.fp-section-hd{font-size:11px;font-weight:600;color:var(--muted);padding:8px 16px 4px;text-transform:uppercase;letter-spacing:.5px;user-select:none}
.fp-divider{height:1px;background:var(--border);margin:6px 0}
.filter-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.13);min-width:240px;padding:6px 0;overflow:hidden}
.fp-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:none;border:none;cursor:pointer;font-size:14px;color:var(--text);text-align:left;transition:background .12s}
.fp-item:hover{background:var(--hover)}
.fp-active{background:var(--accent-soft)!important}
.fp-check{width:18px;color:var(--primary);font-size:14px;flex-shrink:0;display:flex;align-items:center}
.fp-icon{font-size:18px;color:var(--muted);flex-shrink:0}
.fp-active .fp-icon{color:var(--primary)}
#btnFilterDrop.filter-on{color:var(--primary)}
#btnThread.active{background:var(--accent-soft);color:var(--primary);border-radius:4px}
#btnThread.active i.ph{font-family:"Phosphor-Fill"!important}
/* ===== Programar envío — pill en la barra de redacción ===== */
.sched-pill{display:inline-flex;align-items:center;gap:5px;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:4px;padding:2px 8px;font-size:11px;color:#2e7d32;margin-left:6px;white-space:nowrap}
.sched-pill i.ph{font-size:13px}
.sched-cancel{background:none;border:none;cursor:pointer;padding:0 2px;color:var(--muted);display:inline-flex;align-items:center}
.sched-cancel:hover{color:#c62828}
.schedule-pop{padding:0!important}
/* ===== Opciones — grupos en la cinta ===== */
.cset[data-cset="opciones"]{gap:3px}
.cset-group{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 10px;border-right:1px solid var(--border)}
.cset-group:last-child{border-right:none}
.cset-label{font-size:10px;color:var(--muted);white-space:nowrap;padding:0 2px;margin-bottom:2px}
.cset-sep{width:1px;background:#e0e0e0;align-self:stretch;margin:4px 0}
.toolset-compose .ins-btn.active{background:#cce4f7;color:var(--primary)}
.toolset-compose .ins-btn.active i.ph{font-family:"Phosphor-Fill"!important;color:var(--primary)}
/* barra de acciones de la selección */
/* barra de selección = overlay sobre la fila de pestañas (mismo alto, sin desplazar la lista) */
.sel-bar{position:absolute;inset:0;display:none;align-items:center;gap:6px;padding:0 8px;background:#eff5ff;z-index:5}
.list-tabs.selecting .sel-bar{display:flex}
.sel-bar .sel-n{font-weight:600;font-size:13px;color:#0f4c81}
.sel-bar .sel-acts{display:flex;align-items:center;gap:2px;margin-left:auto}
.sel-bar button{color:#3a3a3a;width:32px;height:32px;border-radius:6px;display:grid;place-items:center;font-size:17px}
.sel-bar button:hover{background:#dbe8f8;color:var(--primary)}
.sel-bar button:hover i.ph{font-family:"Phosphor-Fill"!important;color:var(--primary)}
.sel-bar .sel-x{color:var(--text-2)}
/* carpeta resaltada al arrastrar un correo encima */
.folder.drop-target{background:var(--accent-soft);outline:2px dashed #0078d4;outline-offset:-2px}
/* cabecera de resultados de búsqueda */
.search-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:#f7f9fc;font-size:13px;flex-wrap:wrap;position:sticky;top:0;z-index:4}
.search-head .sh-txt{color:var(--text)}
.search-head .sh-scope{color:#0f6cbd;font-size:12.5px}
.search-head .sh-scope:hover{text-decoration:underline}
.search-head .sh-x{margin-left:auto;color:var(--muted);font-size:12.5px}
.search-head .sh-x:hover{color:#d83b01}
.m-folder{display:inline-block;background:#eef0f4;color:var(--text-2);font-size:11px;font-weight:600;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:1px}
/* estados vacíos */
.list-empty,.read-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;text-align:center;padding:24px;color:var(--muted)}
.list-empty h3,.read-empty h3{color:var(--text);font-weight:600;font-size:16px;margin-top:6px}
.list-empty p,.read-empty p{font-size:13px;color:var(--muted);max-width:280px}
.empty-art,.qr-art{opacity:.95}
/* col4 lectura */
.ow-read{background:var(--surface);overflow-y:auto;border-radius:0 0 10px 0;margin-right:15px}
.read-head{padding:16px 24px 14px;border-bottom:1px solid var(--border)}
.read-head h2{font-size:20px;font-weight:600;margin-bottom:12px;color:var(--text)}
.read-meta{display:flex;align-items:center;gap:13px}
.read-meta .avatar{width:42px;height:42px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:16px;flex-shrink:0}
.read-meta .who{flex:1;min-width:0}
.read-meta .who .name{font-weight:600;font-size:15px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.read-meta .who .addr{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-meta .who .para-to{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-meta .date{font-size:12.5px;color:var(--muted)}
.addr-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.addr-row .addr{font-size:12.5px;color:var(--muted)}
.who-top{display:flex;align-items:baseline;gap:8px}
.read-date{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.read-atts{padding:12px 24px;border-top:1px solid var(--border);display:flex;gap:10px;flex-wrap:wrap}
.att{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:13px;background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.att:hover{background:#f3f8fd;border-color:var(--primary)}
/* Icono de autenticación del remitente (DMARC/DKIM) junto al nombre, explicación en tooltip */
.auth-ico{font-size:16px;vertical-align:-2px;margin-left:4px;cursor:help}
.auth-ico.ok{color:#107c10}
.auth-ico.warn{color:#d83b01}
.auth-ico.bad{color:#c50f1f}
/* Fondo de color en filas de lista según verificación */
.msg.auth-bg-warn{background:rgba(216,59,1,.07)!important}
.msg.auth-bg-bad{background:rgba(197,15,31,.10)!important}
.msg.auth-bg-warn:hover{background:rgba(216,59,1,.12)!important}
.msg.auth-bg-bad:hover{background:rgba(197,15,31,.15)!important}
.msg.auth-bg-bad.active,.msg.auth-bg-bad.unread.active{background:rgba(197,15,31,.18)!important}
.msg.auth-bg-warn.active,.msg.auth-bg-warn.unread.active{background:rgba(216,59,1,.14)!important}
/* Pill de color en la dirección del remitente según verificación DMARC/DKIM */
.ow-read.auth-read-ok .addr-de{background:rgba(16,124,16,.13)!important;border-radius:20px;padding:1px 8px;color:var(--text)!important}
.ow-read.auth-read-warn .addr-de{background:rgba(216,59,1,.13)!important;border-radius:20px;padding:1px 8px;color:var(--text)!important}
.ow-read.auth-read-bad .addr-de{background:rgba(197,15,31,.16)!important;border-radius:20px;padding:1px 8px;color:var(--text)!important}
html[data-theme="dark"] .msg.auth-bg-warn{background:rgba(216,59,1,.12)!important}
html[data-theme="dark"] .msg.auth-bg-bad{background:rgba(197,15,31,.15)!important}
html[data-theme="dark"] .ow-read.auth-read-ok .addr-de{background:rgba(16,124,16,.24)!important;border-radius:20px;padding:1px 8px;color:var(--text)!important}
html[data-theme="dark"] .ow-read.auth-read-warn .addr-de{background:rgba(216,59,1,.24)!important;border-radius:20px;padding:1px 8px;color:var(--text)!important}
html[data-theme="dark"] .ow-read.auth-read-bad .addr-de{background:rgba(197,15,31,.28)!important;border-radius:20px;padding:1px 8px;color:var(--text)!important}
.fwd-section{margin-bottom:4px}
.fwd-sub-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;flex-wrap:wrap}
.fwd-copy-lbl{font-weight:400;font-size:12px;display:flex;align-items:center;gap:5px;cursor:pointer}
.fwd-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.fwd-row{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--hover-row);border-radius:6px}
.fwd-addr{flex:1;font-size:13px;font-family:monospace;color:var(--text);word-break:break-all}
.fwd-add-row{display:flex;gap:8px;align-items:center}
.fwd-add-row input{padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--input-bg,var(--surface));color:var(--text);font-size:13px}
.subs-grid{display:flex;flex-direction:column;gap:0}
.subs-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 0;border-bottom:1px solid var(--border)}
.subs-row:last-child{border-bottom:none}
.subs-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.subs-name{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subs-web{font-size:12px;color:#7c3aed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subs-count{font-size:11px;color:var(--muted)}
.subs-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}
.subs-split-btn{display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.subs-split-btn .subs-btn-unsub{border-radius:0;border:none;border-right:1px solid var(--border);padding:6px 10px;font-size:13px;background:var(--surface)}
.subs-split-btn .subs-btn-unsub:hover{background:var(--hover)}
.subs-split-btn .subs-btn-caret{border-radius:0;border:none;padding:0 7px;background:var(--surface);color:var(--muted);cursor:pointer;display:flex;align-items:center}
.subs-split-btn .subs-btn-caret:hover{background:var(--hover);color:var(--text)}
.subs-split-btn .subs-btn-caret i.ph{font-size:12px}
.subs-btn-unsub{color:var(--text)!important}
.subs-btn-delete{color:#c0392b!important;border-color:#f5a09b!important}
.subs-btn-nolink{color:#c0392b!important;border-color:#f5a09b!important}
.ra-unsub{background:#7c3aed!important;color:#fff!important;border-color:#7c3aed!important;gap:5px}
.ra-unsub:hover{background:#6d28d9!important}
.ra-unsub:disabled{opacity:.7;cursor:wait}
.ra-unsub-done{background:#107c10!important;border-color:#107c10!important;cursor:default}
.auth-warn-banner{display:flex;align-items:flex-start;gap:9px;margin:10px 24px 0;padding:10px 14px;border-radius:8px;font-size:13px;line-height:1.45}
.auth-warn-banner i.ph{font-size:18px;flex-shrink:0;margin-top:1px}
.auth-warn-unsigned{background:rgba(216,59,1,.10);border:1px solid rgba(216,59,1,.30);color:#7a2800}
.auth-warn-fail{background:rgba(197,15,31,.10);border:1px solid rgba(197,15,31,.30);color:#6b0a12}
html[data-theme="dark"] .auth-warn-unsigned{background:rgba(216,59,1,.18);border-color:rgba(216,59,1,.40);color:#ffb399}
html[data-theme="dark"] .auth-warn-fail{background:rgba(197,15,31,.18);border-color:rgba(197,15,31,.40);color:#ff9da6}
/* Banda de RIESGO (motor Fase 1): avisa aunque el sello esté verde */
.risk-banner{margin:10px 24px 0;padding:12px 15px;border-radius:10px;font-size:13px;line-height:1.5;border:1px solid}
.risk-banner .risk-head{display:flex;align-items:center;gap:9px;font-size:14.5px;margin-bottom:6px}
.risk-banner .risk-head i{font-size:20px;flex-shrink:0}
.risk-banner .risk-list{margin:0 0 8px;padding-left:22px}
.risk-banner .risk-list li{margin:2px 0}
.risk-banner .risk-tip{font-size:12px;opacity:.85;border-top:1px solid currentColor;padding-top:7px;margin-top:2px}
.risk-red{background:rgba(197,15,31,.12);border-color:rgba(197,15,31,.45);color:#8a0d16}
.risk-red .risk-head{color:#c50f1f}
.risk-amber{background:rgba(196,120,0,.12);border-color:rgba(196,120,0,.45);color:#6b4600}
.risk-amber .risk-head{color:#b06d00}
.risk-banner .risk-acts{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.risk-act{font:inherit;font-size:12px;font-weight:600;cursor:pointer;border:1px solid currentColor;background:rgba(255,255,255,.55);color:inherit;border-radius:7px;padding:4px 11px;display:inline-flex;align-items:center;gap:6px}
.risk-act:hover{background:#fff}
.risk-act:disabled{opacity:.5;cursor:default}
.risk-pill{display:none;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;border:1px solid currentColor;background:rgba(255,255,255,.55);color:inherit;border-radius:20px;padding:5px 12px}
.risk-banner.collapsed{background:transparent;border-color:transparent;padding:0;margin-top:10px}
.risk-banner.collapsed>*{display:none}
.risk-banner.collapsed>.risk-pill{display:inline-flex}
html[data-theme="dark"] .risk-red{background:rgba(197,15,31,.20);border-color:rgba(197,15,31,.55);color:#ffb3ba}
html[data-theme="dark"] .risk-red .risk-head{color:#ff8790}
html[data-theme="dark"] .risk-amber{background:rgba(196,120,0,.20);border-color:rgba(196,120,0,.5);color:#ffd699}
html[data-theme="dark"] .risk-amber .risk-head{color:#ffbb52}
/* Escudo de riesgo en la fila de la lista */
.risk-ico{font-size:13px;margin-left:5px;vertical-align:-1px}
.risk-ico-red{color:#c50f1f}
.risk-ico-amber{color:#c47800}
/* Puerta roja: cuerpo/adjuntos ocultos en correos peligrosos */
.red-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:48px 24px;margin:16px 24px;border:1px dashed rgba(197,15,31,.5);border-radius:12px;background:rgba(197,15,31,.05)}
.red-gate i{font-size:40px;color:#c50f1f}
.red-gate p{margin:0;font-size:14px;line-height:1.5;color:var(--text2);max-width:440px}
.red-gate-btn{cursor:pointer;border:1px solid #c50f1f;background:#c50f1f;color:#fff;font-size:13.5px;font-weight:600;padding:10px 20px;border-radius:8px}
.red-gate-btn:hover{background:#a80d1a}
.read-body{margin:14px 24px 24px}
.read-body iframe{width:100%;border:none;min-height:60vh;display:block}
.show-images{margin:14px 24px 0;padding:10px 14px;background:var(--surface)8e8;border:1px solid #ffe2a8;border-radius:6px;
font-size:13px;color:#7a5b00;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.show-images button{background:none;border:none;cursor:pointer;padding:0;font-size:13px;
color:#0078d4;font-weight:600;text-decoration:underline}
.show-images--spy{background:var(--surface)0f0;border-color:#ffb3b3;color:#8b1a1a}
.show-images--spy button{color:#c0392b}
.show-images--contact{background:#f0f4ff;border-color:#b3c8ff;color:#1a2b8b;flex-direction:column;align-items:flex-start}
.show-images--contact .si-spy{display:inline-flex;align-items:center;gap:4px;color:#8b1a1a;font-size:12px}
.show-images--contact .si-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.show-images--contact .si-btns button{background:var(--surface);border:1px solid #b3c8ff;border-radius:4px;
padding:3px 10px;font-size:12px;color:#1a2b8b;text-decoration:none;font-weight:500}
.show-images--contact .si-btns button:hover{background:#e8eeff}
.si-contact-link{margin-left:6px;color:#0078d4;cursor:pointer;font-size:12px;text-decoration:underline}
.show-images--info{background:#f0fff4;border-color:#a8e6bf;color:#1a5e2b}
.show-images--info button{color:#1a7a3c;font-weight:600;text-decoration:underline}
.show-images--off{background:var(--surface-2);border-color:#ccc;color:var(--text-2)}
.show-images--off button{color:#0078d4;font-weight:600;text-decoration:underline}
.ra-audit{margin-left:auto;opacity:.75;font-size:12px}
.pm-row2{display:grid;grid-template-columns:1fr 100px;gap:10px}
.pm-field--ext input{text-align:center}
.ra-audit:hover{opacity:1}
/* Sección privacidad en la ficha del contacto */
.cview-priv{border-top:1px solid var(--border);padding-top:12px}
.ce-priv{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}
.ce-priv-title{font-size:13px;font-weight:600;color:var(--text-2);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.cview-pref-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;gap:12px;flex-wrap:wrap}
.cp-lbl{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.cp-btns{display:flex;gap:4px}
.cp-b{background:var(--hover);border:1px solid var(--border);border-radius:4px;padding:3px 10px;
font-size:12px;cursor:pointer;color:var(--text);font-weight:normal}
.cp-b:hover{background:#e0e8ff;border-color:#0078d4}
.cp-b.active{background:#0078d4;border-color:#0078d4;color:#fff;font-weight:600}
.spinner{margin:48px auto;width:30px;height:30px;border:3px solid var(--border);border-top-color:#0078d4;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1200px){.ow-body{grid-template-columns:220px var(--ow-list-w,320px) 1fr}}
/* ---- Redacción estilo Outlook (inline en lectura + ventanas flotantes) ---- */
.cmp{display:flex;flex-direction:column;background:var(--surface);overflow:hidden}
.cmp.inline{height:100%}
.cmp-dock{position:fixed;right:18px;bottom:0;z-index:200;display:flex;align-items:flex-end;gap:14px}
.cmp.float{width:600px;max-width:48vw;height:540px;max-height:84vh;border-radius:8px 8px 0 0;
box-shadow:0 -2px 28px rgba(0,0,0,.3);border:1px solid var(--border);border-bottom:none}
.cmp-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--surface);border-bottom:1px solid var(--border)}
/* .c-send reutiliza .ow-new (clase estándar de botón importante, azul --primary) */
.c-send svg{width:16px;height:16px}
/* Botón enviar dividido: nunca colapsa, siempre visible */
.c-send-wrap{display:inline-flex;border-radius:6px;overflow:hidden;flex-shrink:0}
.c-send-wrap .c-send-main{border-radius:6px 0 0 6px;padding:6px 11px}
.c-send-wrap .c-send-caret{border-radius:0 6px 6px 0;padding:6px 8px;border-left:1px solid rgba(255,255,255,.3)}
.c-send-wrap .c-send-main:disabled,.c-send-wrap .c-send-main[disabled]{opacity:.45;pointer-events:none}
/* Botón Enviar: sólido azul igual que OWA (overrides .ow-new outlined) */
.c-send-wrap .c-send-main,.c-send-wrap .c-send-caret{background:var(--primary);color:#fff;border-color:var(--primary)}
.c-send-wrap .c-send-main:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.c-send-wrap .c-send-caret:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
/* De: campo crece para ocupar el espacio libre, trunca si es necesario */
.c-from{color:var(--text-2);font-size:13px;flex:1 1 auto;min-width:60px;overflow:hidden;white-space:nowrap;cursor:pointer}
.c-from b{font-weight:600}
.c-from .caret{font-size:10px;color:var(--muted);margin-left:3px}
.cmp-spacer{display:none}
.cmp-bar>button:not(.c-send-main):not(.c-send-caret):not(.c-send){width:30px;height:30px;border-radius:6px;color:var(--text-2);display:grid;place-items:center;border:1px solid transparent}
.cmp-bar>button:not(.c-send-main):not(.c-send-caret):not(.c-send):hover{background:#e6eaf2;border-color:#c8d0e0}
.cmp-bar>button svg{width:18px;height:18px}
/* Dock/tab: en modo inline se ocultan; en modo popup flotante ya hay espacio */
.cmp:not(.float) .c-extract,.cmp:not(.float) .c-tab,.cmp:not(.float) .c-attach{display:none!important}
/* Botón "⋯" de compose: oculto en popup flotante (ya hay botones) */
.cmp.float .c-cmpmore{display:none}
.c-cmpmore-menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.14);min-width:190px;z-index:400;padding:4px 0}
.c-cmpmore-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 14px;font-size:13px;color:var(--text);text-align:left;border-radius:0}
.c-cmpmore-menu button:hover{background:var(--hover)}
.c-cmpmore-menu button i{font-size:17px;color:var(--text-2)}
/* Bandeja de salida: badge y estilos */
.outbox-badge{background:#d83b01;color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 5px;margin-left:4px;vertical-align:middle}
/* ---- Adjuntos en redacción (chips con progreso) ---- */
.cmp{position:relative}
.cmp-atts{display:none;flex-wrap:wrap;gap:8px;padding:10px 18px;border-top:1px solid var(--border)}
.catt{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:8px;padding:7px 9px;background:var(--surface-2);min-width:200px;max-width:280px}
.catt svg{width:22px;height:22px;color:#0078d4;flex-shrink:0}
.catt-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.catt-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catt-sub{font-size:11px;color:var(--muted)}
.catt-bar{height:3px;border-radius:2px;background:#e6e6e6;overflow:hidden;margin-top:3px;display:none}
.catt.uploading .catt-bar{display:block}
.catt-bar i{display:block;height:100%;background:var(--primary);width:0;transition:width .2s}
.catt.done svg{color:#107c10}
.catt.error{border-color:#d83b01;background:#fde9e3}
.catt.error svg,.catt.error .catt-sub{color:#d83b01}
.catt-x{width:22px;height:22px;border-radius:50%;color:var(--muted);flex-shrink:0;font-size:13px}
.catt-x:hover{background:#eee;color:var(--text)}
.catt-total{width:100%;font-size:11.5px;color:var(--muted);padding-top:2px}
.catt-total.over{color:#d83b01;font-weight:600}
.catt-banner{width:100%;display:flex;gap:10px;align-items:flex-start;background:#eaf3fb;border:1px solid #bcdcf5;
border-radius:8px;padding:10px 12px;font-size:12.5px;color:#0f4c81;line-height:1.4;margin-top:2px}
.catt-banner svg{width:18px;height:18px;flex-shrink:0;color:#0f6cbd;margin-top:1px}
/* overlay de arrastrar y soltar */
.cmp-drop{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,120,212,.08);
border:2px dashed var(--primary);border-radius:8px;z-index:5;pointer-events:none}
.cmp-drop>div{background:var(--surface);border:1px solid var(--primary);color:var(--primary);font-weight:600;
padding:14px 24px;border-radius:10px;box-shadow:var(--shadow)}
.cmp.dragover .cmp-drop{display:grid}
/* ---- Notificaciones (campanita) ---- */
.ow-notif-wrap{position:relative}
.ow-notif-wrap>button{width:34px;height:34px;border-radius:50%;color:var(--text-2);display:grid;place-items:center;position:relative}
.ow-notif-wrap>button:hover{background:var(--hover)}
.ow-notif-wrap>button svg{width:18px;height:18px}
.notif-badge{position:absolute;top:-1px;right:-1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
background:#d83b01;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
/* Panel historial (campanita) */
.notif-panel{position:fixed;top:46px;right:12px;width:340px;max-height:70vh;overflow-y:auto;background:var(--surface);
border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.22);z-index:99000;display:none}
.notif-panel.open{display:block;animation:fadeInDown .15s ease}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.notif-head{padding:12px 16px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--border);
position:sticky;top:0;background:var(--surface);display:flex;align-items:center;justify-content:space-between}
.notif-head-clear{background:none;border:none;cursor:pointer;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:4px;font-family:inherit}
.notif-head-clear:hover{background:var(--hover);color:var(--primary)}
.notif{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:default;transition:background .1s}
.notif:hover{background:var(--hover)}
.notif-icon{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;margin-top:1px}
.notif.error .notif-icon{background:#fde8e4;color:#d83b01}
.notif.ok .notif-icon{background:#e4f5e8;color:#107c10}
.notif.mail .notif-icon{background:#e6f0fc;color:var(--primary)}
.notif.info .notif-icon{background:#e6f0fc;color:#0f6cbd}
.notif-body{flex:1;min-width:0}
.notif-t{font-size:13px;font-weight:600;color:var(--text)}
.notif-b{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4;word-break:break-word}
.notif-time{font-size:11px;color:var(--muted);margin-top:3px}
.notif-empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:13px}
.notif-empty i{font-size:32px;display:block;margin-bottom:8px;opacity:.4}
/* Toasts flotantes */
#ne-toasts{position:fixed;bottom:20px;right:20px;z-index:99999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.ne-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;
background:var(--surface);border:1px solid var(--border);box-shadow:0 6px 24px rgba(0,0,0,.18);
width:320px;max-width:calc(100vw - 32px);pointer-events:all;position:relative;overflow:hidden}
.ne-toast.toast-enter{animation:toastIn .25s cubic-bezier(.34,1.56,.64,1) forwards}
.ne-toast.toast-leave{animation:toastOut .2s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(24px)}}
.ne-toast-ico{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:16px}
.ne-toast.toast-error .ne-toast-ico{background:#fde8e4;color:#d83b01}
.ne-toast.toast-ok .ne-toast-ico{background:#e4f5e8;color:#107c10}
.ne-toast.toast-mail .ne-toast-ico{background:#e6f0fc;color:var(--primary)}
.ne-toast.toast-info .ne-toast-ico{background:#e6f0fc;color:#0f6cbd}
.ne-toast-body{flex:1;min-width:0}
.ne-toast-title{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.ne-toast-msg{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4;word-break:break-word}
.ne-toast-close{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--muted);font-size:15px;padding:2px;line-height:1;border-radius:4px;align-self:flex-start}
.ne-toast-close:hover{background:var(--hover);color:var(--text)}
.ne-toast-bar{position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 12px 12px;animation:toastBar var(--dur,4s) linear forwards}
.ne-toast.toast-error .ne-toast-bar{background:#d83b01}
.ne-toast.toast-ok .ne-toast-bar{background:#107c10}
.ne-toast.toast-mail .ne-toast-bar{background:var(--primary)}
.ne-toast.toast-info .ne-toast-bar{background:#0f6cbd}
@keyframes toastBar{from{width:100%}to{width:0%}}
@media(max-width:640px){#ne-toasts{bottom:70px;right:8px;left:8px} .ne-toast{width:100%;max-width:none}}
/* Enviar y recibir: giro al pulsar */
#btnSync.spinning .fui,#btnSync.spinning .sync-ico,#btnSync.spinning i.ph{animation:nspin .8s linear infinite;transform-origin:50% 50%}
@keyframes nspin{to{transform:rotate(360deg)}}
/* 29/07/26 - Campos del redactor (Para/CC/CCO/Asunto): sin caja, solo el texto y una linea
ABAJO con el color de enfasis elegido (--primary). Antes la separacion era una linea gris
ARRIBA. Se hace igual en la app de escritorio para que las dos se vean iguales. */
.cmp-row{display:flex;align-items:center;gap:10px;padding:7px 18px;border-bottom:2px solid var(--primary)}
.to-pill{background:transparent;color:var(--text-2);border-radius:0;padding:4px 8px;font-size:13px;font-weight:600;flex-shrink:0;min-width:44px}
.subj-row{border-top:1px solid var(--border);border-bottom:2px solid var(--border)}
.cmp-row input{flex:1;border:none;outline:none;font-size:14px;background:transparent}
.cc-toggles{display:flex;gap:12px;flex-shrink:0}
.cc-toggles button{color:#0078d4;font-size:13px;font-weight:400;background:transparent;border:none;border-radius:0;padding:4px 2px;height:auto}
.cc-toggles button:hover{color:#005a9e;text-decoration:underline}
.cmp-status{font-size:12.5px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.cmp-toolbar{display:flex;align-items:center;gap:2px;padding:6px 14px;border-top:1px solid var(--border);flex-wrap:wrap}
.cmp-toolbar button{width:30px;height:30px;border-radius:5px;color:var(--text-2);display:grid;place-items:center;font-size:14px}
.cmp-toolbar button:hover{background:var(--hover)}
.cmp-toolbar button svg{width:16px;height:16px}
.tb-sep{width:1px;height:20px;background:#e0e0e0;margin:0 5px}
.tb-color{position:relative;width:30px;height:30px;border-radius:5px;display:grid;place-items:center;cursor:pointer;font-weight:700}
.tb-color:hover{background:var(--hover)}
.tb-color span{border-bottom:3px solid #e53935;line-height:.9}
.tb-color input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cmp-toolbar button.on{background:var(--accent-soft);color:#0f548c}
.cmp-toolbar select{height:30px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text-2);
font-size:13px;padding:0 4px;cursor:pointer;outline:none}
.cmp-toolbar select:hover{border-color:#bbb}
.cmp-toolbar .tb-font{min-width:104px}
.cmp-toolbar .tb-size{width:54px}
.tb-hilite{position:relative;width:30px;height:30px;border-radius:5px;display:grid;place-items:center;cursor:pointer}
.tb-hilite:hover{background:var(--hover)}
.tb-hilite svg{width:16px;height:16px;color:var(--text-2)}
.tb-hilite input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* menú contextual del editor */
.ctx-menu{position:fixed;z-index:9000;background:var(--surface);border:1px solid var(--border);border-radius:8px;
box-shadow:0 6px 28px rgba(0,0,0,.18);padding:5px;min-width:190px;font-size:13.5px}
.ctx-menu button{display:block;width:100%;text-align:left;padding:7px 12px;border-radius:5px;color:var(--text)}
.ctx-menu button:hover{background:var(--accent-soft)}
.ctx-menu button.on{color:#0f548c;font-weight:600}
.ctx-sep{height:1px;background:#eee;margin:4px 6px}
/* menú contextual del correo (réplica Outlook): icono · etiqueta · flecha submenú */
.ctx-msg{min-width:250px;padding:5px}
.ctx-msg.ctx-sub{position:fixed;z-index:9001}
.ctx-msg .ctxi{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:6px 10px;border-radius:5px;color:var(--text)}
.ctx-msg .ctxi:hover,.ctx-msg .ctxi.open{background:var(--accent-soft)}
.ctx-msg .ctxi.dis{color:#9b9b9b;pointer-events:none}
.ctx-msg .ci-ic{flex:0 0 18px;width:18px;height:18px;display:grid;place-items:center;color:var(--text-2);font-size:15px}
.ctx-msg .ci-ic svg{width:17px;height:17px}
.ctx-msg .ci-lb{flex:1;white-space:nowrap}
.ctx-msg .ci-ar{flex:0 0 auto;color:var(--muted);font-size:16px;line-height:1;margin-left:8px}
.cmp-body{flex:1;min-height:140px;border:none;outline:none;overflow-y:auto;padding:16px 20px;font-size:14px;
font-family:var(--font-compose);line-height:1.5}
.cmp-body[contenteditable]:empty:before{content:attr(data-ph);color:var(--muted)}
/* ---- Barra de acciones en lectura ---- */
.read-actions{display:flex;gap:4px;padding:8px 0 10px;flex-wrap:wrap}
.read-actions button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;color:var(--text-2);font-size:13px;font-weight:500}
.read-actions button:hover{background:#eef3f8;color:var(--primary)}
.read-footer{display:flex;gap:4px;padding:10px 24px 16px;flex-wrap:wrap;border-top:1px solid var(--border)}
.read-footer button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;color:var(--text-2);font-size:13px;font-weight:500}
.read-footer button:hover{background:#eef3f8;color:var(--primary)}
.read-actions svg{width:15px;height:15px}
/* ===== Menú de usuario (avatar desplegable) ===== */
.ow-avatar{cursor:pointer;overflow:hidden;background-size:cover;background-position:center}
.user-menu{position:fixed;z-index:9200;background:var(--surface);border:1px solid var(--border);border-radius:14px;
box-shadow:0 12px 40px rgba(0,0,0,.2);padding:8px;min-width:268px}
.um-head{display:flex;align-items:center;gap:12px;padding:10px 12px 14px}
.um-av{width:46px;height:46px;border-radius:50%;background:#0078d4;color:#fff;display:grid;place-items:center;
font-weight:700;font-size:17px;overflow:hidden;flex-shrink:0}
.um-av img{width:100%;height:100%;object-fit:cover}
.um-id{min-width:0}
.um-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-email{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:9px;
color:var(--text);font-size:14px}
.um-item:hover{background:var(--accent-soft)}
.um-item svg{width:18px;height:18px;color:var(--text-2)}
/* ===== Modal (bordes redondeados) ===== */
.modal-ov{position:fixed;inset:0;z-index:9300;background:rgba(20,30,50,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.32);width:480px;max-width:100%;max-height:90vh;
display:flex;flex-direction:column;overflow:hidden;animation:modalin .18s ease}
@keyframes modalin{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:17px}
.modal-x{width:30px;height:30px;border-radius:8px;color:var(--muted);font-size:15px}
.modal-x:hover{background:var(--hover);color:var(--text)}
.modal-body{padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border)}
/* ===== Vista de Contactos ===== */
.contacts-view{grid-column:1 / -1;display:none;flex-direction:column;background:var(--surface);overflow:hidden}
#app.show-contacts .ow-folders,#app.show-contacts .ow-list,#app.show-contacts .ow-read{display:none}
#app.show-contacts .ow-ribbon{display:none} /* en Contactos no tiene sentido el ribbon de correo */
#app.show-contacts .contacts-view{display:flex}
.cv-head{display:flex;align-items:center;gap:6px;padding:7px 14px;border-bottom:1px solid #e0e4e9;flex-wrap:wrap;min-height:46px}
.cv-head h2{font-size:15px;display:flex;align-items:center;gap:8px;color:var(--text);margin-right:8px}
.cv-head h2 i{color:#107c10}
.cv-actions{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:wrap}
/* botones de la barra estilo OWA: planos icono+texto; el primero (Nuevo) sólido azul */
.cv-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:5px;background:none;color:var(--text);font-weight:500;font-size:13px;border:1px solid transparent}
.cv-btn:hover{background:var(--hover)}
.cv-btn:hover i.ph{font-family:"Phosphor-Fill"!important;color:var(--primary)}
.cv-btn#cNew{background:var(--primary);color:#fff;font-weight:600;border-color:var(--primary)}
.cv-btn#cNew:hover{background:var(--primary-dark)}
.cv-btn#cNew:hover i.ph{color:#fff}
.cv-btn.sm{padding:6px 10px;font-size:12.5px;background:transparent;color:var(--primary)}
.cv-btn.sm:hover{background:var(--accent-soft)}
.cv-body{flex:1;overflow-y:auto;padding:16px 22px 40px}
.cv-sec{margin-bottom:26px}
.cv-sec>h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:10px;font-weight:700}
.cv-count{display:inline-block;background:#e8eef7;color:#0f6cbd;border-radius:9px;padding:0 7px;font-size:11px;font-weight:700;vertical-align:1px}
.cv-empty{color:var(--muted);font-size:13.5px}
.cv-domain{margin-bottom:16px}
.cv-domain-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cv-domain-name{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);font-size:14px}
.cv-domain-name i{color:var(--muted)}
.c-grid{display:flex;flex-direction:column}
/* fila de contacto estilo lista OWA: columnas Nombre | Información de contacto | acciones */
.cv-collist-head{display:grid;grid-template-columns:minmax(160px,1fr) minmax(160px,1.3fr) auto;gap:14px;padding:6px 14px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);margin-bottom:2px}
.c-card{display:grid;grid-template-columns:minmax(160px,1fr) minmax(160px,1.3fr) auto;align-items:center;gap:14px;padding:8px 14px;border:none;border-bottom:1px solid var(--border);border-radius:0;background:var(--surface);transition:background .1s}
.c-card:hover{background:#f5f8fc;box-shadow:none;border-color:var(--border)}
.c-card.mycard{background:var(--accent-soft)}
.cr-id{display:flex;align-items:center;gap:12px;min-width:0}
.cr-contact{min-width:0;display:flex;flex-direction:column;gap:1px}
.c-av{width:36px;height:36px;flex-shrink:0;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;background-size:cover;background-position:center}
.c-info{flex:1;min-width:0}
.c-name{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-mail{font-size:13px;color:#0078d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== Contactos: layout con panel lateral + toggle vista (estilo OWA) ===== */
.contacts-view{flex-direction:column}
.cv-layout{flex:1;display:flex;min-height:0}
.cv-side{flex:0 0 210px;border-right:1px solid var(--border);padding:12px 10px;display:flex;flex-direction:column;gap:3px;background:var(--surface-2);overflow-y:auto}
.cv-cat{display:flex;align-items:center;gap:10px;padding:9px 12px;border:none;background:none;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text-2);text-align:left;font-family:inherit;width:100%}
.cv-cat i.ph{font-size:18px;color:var(--muted);flex-shrink:0}
.cv-cat span{flex:1;min-width:0}
.cv-cat .cv-cat-n{flex:none;font-size:12px;color:var(--muted);background:#ececec;border-radius:10px;padding:1px 8px}
.cv-cat:hover{background:var(--hover)}
.cv-cat.active{background:var(--accent-soft);color:var(--primary);font-weight:600}
.cv-cat.active i.ph{color:var(--primary)}
.cv-cat.active .cv-cat-n{background:#cfe4fa;color:var(--primary)}
.cv-main{flex:1;overflow-y:auto;padding:6px 18px 24px;min-width:0}
.cv-empty{font-size:13px;color:var(--muted);padding:24px 8px}
/* menú Importar/Exportar */
.cv-menu-wrap{position:relative}
.cv-caret{font-size:11px}
.cv-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:50;min-width:240px;padding:5px}
.cv-menu button{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;padding:9px 11px;border-radius:6px;font-size:13.5px;color:var(--text);cursor:pointer;text-align:left;font-family:inherit}
.cv-menu button:hover{background:var(--accent-soft)}
.cv-menu button i.ph{font-size:17px;color:var(--muted)}
/* toggle vista */
.cv-view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-left:4px}
.cv-view-toggle button{border:none;background:var(--surface);padding:6px 9px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.cv-view-toggle button i.ph{font-size:17px}
.cv-view-toggle button.active{background:var(--primary);color:#fff}
/* estrella favorito */
.ca-fav.on i.ph,.ca-fav i.ph-fill{color:#f5b50a!important}
.cr-favmark{color:#f5b50a;font-size:13px;margin-left:4px}
/* vista CUADRÍCULA (cards) */
.cv-main.view-grid .c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.cv-main.view-grid .c-card{display:flex;flex-direction:column;align-items:stretch;gap:7px;border:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:10px;padding:13px 14px;transition:box-shadow .12s,border-color .12s}
.cv-main.view-grid .c-card:hover{border-color:#d7e3f3;box-shadow:0 2px 10px rgba(0,0,0,.07);background:var(--surface)}
.cv-main.view-grid .cr-id{gap:11px}
.cv-main.view-grid .c-av{width:42px;height:42px;font-size:16px}
.cv-main.view-grid .cr-contact{padding-left:0}
.cv-main.view-grid .c-row-actions{opacity:1;justify-content:flex-end}
.c-org{font-size:12px;color:var(--muted)}
.c-fich{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#0f6cbd;margin-top:2px;text-decoration:none}
.c-fich:hover{text-decoration:underline}
.c-row-actions{display:flex;gap:2px;flex-shrink:0;opacity:1}
.ca{width:30px;height:30px;border-radius:6px;color:#5a5a5a;display:grid;place-items:center;font-size:16px}
.ca:hover{background:var(--accent-soft);color:var(--primary)}
.ca:hover i.ph{font-family:"Phosphor-Fill"!important;color:var(--primary)}
/* modal edición contacto + QR */
.modal.c-edit .modal-body label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text-2);font-weight:600;gap:6px}
.modal.c-edit input{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;font-weight:400;color:var(--text)}
.modal.c-edit input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,108,189,.15)}
.qr-modal{width:360px}
.qr-box{align-items:center;text-align:center}
.qr-box svg{width:230px;height:230px}
.qr-name{font-weight:700;font-size:15px;margin-top:6px}
.qr-mail{color:var(--muted);font-size:13px}
.qr-hint{color:var(--muted);font-size:12.5px;margin-top:4px}
#app.show-contacts .rail-ico#railContacts{color:var(--bc)}
.c-tel{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px}
.c-tel i.ph{font-size:13px}.c-ext{color:var(--muted)}
.c-unread{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:9px;background:#0078d4;color:#fff;font-size:11px;font-weight:700;vertical-align:1px}
.c-unread[hidden]{display:none} /* sin correos sin leer → sin círculo */
.c-av.grp-av{background:#eef2f8;color:#0f6cbd;font-size:18px}
.c-av.grp-av.sm{width:34px;height:34px;font-size:15px}
.c-card.grp .c-av{display:grid;place-items:center}
/* modal editar contacto */
.modal.c-edit .modal-body{gap:11px}
.modal.c-edit label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.modal.c-edit input,.modal.c-edit textarea{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;font-weight:400;color:var(--text);font-family:inherit}
.modal.c-edit input:focus,.modal.c-edit textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,108,189,.15)}
.modal.c-edit input[readonly]{background:var(--surface-2);color:var(--muted)}
.ce-2col{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ce-photo{display:flex;align-items:center;gap:14px}
.ce-av{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;display:grid;place-items:center}
.ce-av img{width:100%;height:100%;object-fit:cover}
.ce-av>span{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:22px}
.ce-stats{display:flex;gap:16px;padding-top:4px;border-top:1px solid var(--border);margin-top:2px}
.ce-stat{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:6px}.ce-stat i.ph{color:#0f6cbd}
.ce-stats .muted{color:var(--muted);font-size:12.5px}
/* autocompletar destinatarios */
.ac-box{position:fixed;z-index:9500;background:var(--surface);border:1px solid #dde1e7;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.16);padding:6px;max-height:320px;overflow-y:auto;min-width:280px}
.ac-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:7px;cursor:pointer}
.ac-item.sel,.ac-item:hover{background:#eef4fb}
.ac-av{width:30px;height:30px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;flex-shrink:0;overflow:hidden}
.ac-av--lg{width:42px;height:42px;font-size:15px}
.ac-tx{display:flex;flex-direction:column;min-width:0}
.ac-tx b{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-tx .ac-email{font-size:12px;color:#0078d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.to-pill.pickable{cursor:pointer}.to-pill.pickable:hover{color:var(--primary);text-decoration:underline}
/* mini-agenda (picker) */
.pick-modal{width:460px;display:flex;flex-direction:column;max-height:80vh}
.pk-search{display:flex;align-items:center;gap:9px;padding:10px 18px;border-bottom:1px solid var(--border);color:var(--muted)}
.pk-search input{flex:1;border:none;outline:none;font-size:14px}
.pk-list{flex:1;overflow-y:auto;padding:6px 10px}
.pk-h{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;padding:8px 6px 4px}
.pk-it{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;cursor:pointer}
.pk-it:hover{background:#f5f8fc}
.pk-it input{width:17px;height:17px;accent-color:var(--primary);flex-shrink:0}
.pk-count{margin-right:auto;color:var(--muted);font-size:13px}
/* ficha de contacto (vista con mensajes) */
.cview{width:680px;max-width:100%;height:min(640px,90vh);display:flex;flex-direction:column;position:relative;padding:0}
.cview .modal-x{position:absolute;top:14px;right:14px;z-index:2}
.cview-head{display:flex;align-items:flex-start;gap:20px;padding:26px 28px 18px}
.cview-av{width:96px;height:96px;border-radius:50%;flex-shrink:0;color:#fff;display:grid;place-items:center;font-weight:600;font-size:34px;background-size:cover;background-position:center}
.cview-id{flex:1;min-width:0;padding-top:6px}
.cview-id h2{font-size:24px;color:var(--text);margin-bottom:2px}
.cview-alias{color:var(--muted);font-size:14px;margin-bottom:12px}
.cview-actions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.cview-actions .btn-primary{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:7px;font-size:13px}
.cview-actions .btn-mini{display:inline-flex;align-items:center;gap:6px}
.cview-body{flex:1;overflow-y:auto;padding:14px 28px 28px}
/* Ficha de contacto estilo OWA: pestañas + sesiones */
.cview-sub{color:var(--muted);font-size:14px;margin-bottom:12px}
.cview-tabs{display:flex;gap:4px;padding:0 28px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.cview-tabs .cvtab{background:none;border:none;padding:11px 12px 10px;font-size:14px;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;font-weight:500}
.cview-tabs .cvtab:hover{color:#0078d4}
.cview-tabs .cvtab.active{color:#0078d4;font-weight:600;border-bottom-color:#0078d4}
.cview-more{display:inline-block;margin-top:10px;font-size:13px;color:#0078d4;text-decoration:none}
.cview-more:hover{text-decoration:underline}
.cview-sessions{display:flex;flex-direction:column;gap:8px}
.cv-session{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.cv-session.current{border-color:#cfe4fa;background:var(--accent-soft)}
.cv-session>i.ph{font-size:22px;color:#0f6cbd;flex-shrink:0}
.cv-se-main{flex:1;min-width:0}
.cv-se-dev{font-size:14px;font-weight:600;color:var(--text)}
.cv-se-cur{color:#107c10;font-weight:600;font-size:12.5px}
.cv-se-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.cv-se-rev{flex-shrink:0}
.cview-sec{margin-top:20px}
.cview-sec>h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin-bottom:12px}
.cview-info{display:flex;flex-direction:column;gap:14px}
.ci-row{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text)}
.ci-row i.ph{color:#0f6cbd;font-size:18px;margin-top:2px}
.ci-row>div{display:flex;flex-direction:column}
.ci-lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.ci-row a{color:#0f6cbd;text-decoration:none}.ci-row a:hover{text-decoration:underline}
.cview-stats{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.cview-stats .muted{color:var(--muted);font-size:12.5px}
.cview-msgs{display:flex;flex-direction:column;gap:8px}
/* Mensajes recientes como tarjetas (estilo OWA), en la pestaña Información general */
.cview-msgs.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cv-mcard{border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .12s,box-shadow .12s;background:var(--surface);min-height:120px}
.cv-mcard:hover{border-color:#d7e3f3;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.cv-mc-head{display:flex;align-items:center;gap:8px}
.cv-mc-head .c-av{width:30px;height:30px;font-size:12px;flex-shrink:0}
.cv-mc-who{flex:1;min-width:0;font-size:13px;font-weight:600;color:#0078d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-mc-date{font-size:11px;color:var(--muted);flex-shrink:0}
.cv-mc-subj{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv-mc-subj.unread{color:#0078d4}
.cv-mc-snip{font-size:12px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv-mc-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.cv-msg{border:1px solid var(--border);border-radius:10px;padding:11px 14px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.cv-msg:hover{border-color:#d7e3f3;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.cv-msg-top{display:flex;align-items:center;gap:9px}
.cv-dir{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:5px;flex-shrink:0}
.cv-dir.in{background:#eaf3fd;color:#0f6cbd}.cv-dir.out{background:#eef7ee;color:#107c10}
.cv-subj{flex:1;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-subj.unread{font-weight:700;color:#111}
.cv-date{font-size:12px;color:var(--muted);flex-shrink:0}
.cv-snip{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── Archivos en ficha de contacto ────────────────────────────────────── */
.cv-files-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 0;color:var(--muted);text-align:center}
.cv-files-empty i{font-size:36px;opacity:.35}
.cv-files-empty span{font-size:13px}
.cvf-group{margin-bottom:18px}
.cvf-group:last-child{margin-bottom:0}
.cvf-group-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:8px}
.cvf-group-head i{font-size:15px}
.cvf-count{background:var(--hover);color:var(--text-2);font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px;text-transform:none;letter-spacing:0}
.cvf-list{display:flex;flex-direction:column;gap:4px}
.cvf-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.cvf-row:hover{border-color:#d7e3f3;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.cvf-ico{flex-shrink:0;width:36px;height:36px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center}
.cvf-ico i.ph{font-size:20px}
.cvf-body{flex:1;min-width:0}
.cvf-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvf-meta{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.cvf-dir{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:5px;flex-shrink:0}
.cvf-dir.in{background:#eaf3fd;color:#0f6cbd}.cvf-dir.out{background:#eef7ee;color:#107c10}
.cvf-sz{font-size:12px;color:var(--muted)}
.cvf-date{font-size:12px;color:var(--muted)}
.cvf-sz::before,.cvf-date::before{content:"·";margin-right:8px;color:var(--border)}
.cvf-actions{flex-shrink:0;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.cvf-row:hover .cvf-actions{opacity:1}
.cvf-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;color:var(--muted);text-decoration:none;transition:background .12s,color .12s}
.cvf-btn:hover{background:var(--hover);color:var(--primary)}
.cvf-btn i{font-size:16px}
.cvf-dl:hover{background:#eaf3fd;color:#0078d4}
@media(max-width:640px){.cvf-row{padding:8px 10px} .cvf-actions{opacity:1}}
.spinner.sm{width:22px;height:22px;margin:18px auto;border-width:2.5px}
.list-end{padding:8px 0;text-align:center}
/* ===== vistas Calendario / Tareas (mismo patrón que contactos) ===== */
.cal-view,.tasks-view,.notes-view{grid-column:1 / -1;display:none;flex-direction:column;background:var(--surface);overflow:hidden}
#app.show-cal .ow-folders,#app.show-cal .ow-list,#app.show-cal .ow-read,#app.show-cal .ow-ribbon,
#app.show-tasks .ow-folders,#app.show-tasks .ow-list,#app.show-tasks .ow-read,#app.show-tasks .ow-ribbon,
#app.show-notes .ow-folders,#app.show-notes .ow-list,#app.show-notes .ow-read,#app.show-notes .ow-ribbon{display:none}
#app.show-cal .cal-view{display:flex}
#app.show-tasks .tasks-view{display:flex}
#app.show-notes .notes-view{display:flex}
#app.show-cal .rail-ico#railCal,#app.show-tasks .rail-ico#railTasks,#app.show-notes .rail-ico#railNotes{color:var(--bc)}
/* ===== Vista de Notas (notas adhesivas estilo Outlook) ===== */
.notes-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.note-colorpick{display:flex;align-items:center;gap:6px;margin-left:8px}
.note-color-lbl{font-size:13px;color:var(--muted);margin-right:2px}
.note-color-dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .1s}
.note-color-dot:hover{transform:scale(1.15)}
.note-color-dot.on{outline:2px solid #0078d4;outline-offset:1px}
.notes-main{flex:1;display:flex;min-height:0}
.notes-list{flex:0 0 340px;max-width:42%;overflow-y:auto;padding:12px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.note-card{border-radius:8px;padding:12px 14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);min-height:96px;display:flex;flex-direction:column;gap:6px;border:2px solid transparent;transition:box-shadow .12s}
.note-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.16)}
.note-card.active{border-color:#0078d4}
.note-card-time{font-size:11px;color:var(--muted);align-self:flex-end}
.note-card-text{font-size:13px;color:var(--text);line-height:1.4;white-space:pre-wrap;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.note-card-text .note-empty{color:var(--muted);font-style:italic}
.notes-empty-list{font-size:13px;color:var(--muted);padding:24px 8px;text-align:center}
.note-editor-wrap{flex:1;display:flex;flex-direction:column;min-width:0;padding:24px 28px;align-items:center}
.note-editor-card{width:100%;max-width:680px;flex:1;display:flex;flex-direction:column;border-radius:10px;box-shadow:0 2px 14px rgba(0,0,0,.10);overflow:hidden}
.note-editor{flex:1;border:none;outline:none;padding:22px 24px;font-size:15px;line-height:1.55;font-family:inherit;color:var(--text);overflow-y:auto;min-height:0}
.note-editor:empty:before{content:attr(data-ph);color:var(--muted)}
.note-editor img{max-width:100%;height:auto;border-radius:6px}
.note-editor ul,.note-editor ol{margin:6px 0;padding-left:24px}
.note-toolbar{display:flex;align-items:center;gap:2px;padding:6px 10px;border-top:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.45)}
.note-toolbar button{width:30px;height:30px;border:none;background:none;border-radius:5px;cursor:pointer;font-size:14px;color:var(--text-2);display:grid;place-items:center}
.note-toolbar button:hover{background:rgba(0,0,0,.08)}
.note-toolbar button i.ph{font-size:17px}
.note-tb-sep{width:1px;height:18px;background:rgba(0,0,0,.15);margin:0 5px}
.note-editor-foot{width:100%;max-width:680px;text-align:right;font-size:12px;color:var(--muted);padding:8px 4px 0}
.note-editor-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:10px}
.note-editor-empty i.ph{font-size:48px}
.note-editor-empty p{font-size:14px}
.cv-btn.icon{padding:8px 9px}
.cv-btn.primary,.cv-btn.sm.primary{background:var(--primary);color:#fff}
.cv-btn.primary:hover{background:var(--primary-dark)}
.cv-btn.primary i.ph,.cv-btn.primary:hover i.ph{font-family:"Phosphor-Fill"!important;color:#fff}
.cal-title{font-size:16px;font-weight:700;color:var(--text);margin:0 6px}
/* layout con panel lateral (mini-cal + mis calendarios) */
.cal-body{flex:1;display:flex;overflow:hidden;min-height:0}
.cal-side{width:240px;flex-shrink:0;border-right:1px solid var(--border);padding:14px 12px;overflow-y:auto}
.cal-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.cal-subbar{display:flex;align-items:center;gap:8px;padding:12px 16px 8px}
.cal-subbar .cal-title{margin-left:6px}
/* mini-calendario */
.cal-mini{margin-bottom:18px}
.mc-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text);padding:0 4px 6px}
.mc-nav button{width:24px;height:24px;border-radius:5px;color:var(--muted)}.mc-nav button:hover{background:var(--accent-soft)}
.mc-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10.5px;color:var(--muted);font-weight:600;margin-bottom:2px}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.mc-day{height:26px;border-radius:50%;font-size:11.5px;color:var(--text);display:grid;place-items:center}
.mc-day:hover{background:var(--accent-soft)}
.mc-day.out{color:#bbb}
.mc-day.today{font-weight:700;color:var(--primary)}
.mc-day.sel{background:var(--primary);color:#fff}
.mc-day.sel.today{color:#fff}
/* mis calendarios */
.cal-mycals-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:8px}
.cal-mycals-h i.ph{font-size:13px;color:var(--muted)}
.cal-cal{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text);padding:4px 4px;border-radius:6px}
.cal-cal:hover{background:var(--surface-2)}
.cal-cal label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer}
.cal-cal .cal-cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-cal input[type=checkbox]{accent-color:var(--primary);flex-shrink:0}
.cal-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.cal-menu{width:24px;height:24px;border-radius:5px;color:var(--muted);display:grid;place-items:center;opacity:0;flex-shrink:0;font-size:15px}
.cal-cal:hover .cal-menu{opacity:1}
.cal-menu:hover{background:var(--accent-soft);color:var(--primary)}
.cal-shared-by{color:var(--muted);font-size:13px;flex-shrink:0}
.add-cal{width:100%;justify-content:flex-start;margin:0 0 14px;color:var(--primary);font-weight:600}
.cc-colors{display:flex;gap:8px;flex-wrap:wrap}
.cc-color{width:26px;height:26px;border-radius:50%;border:2px solid transparent}
.cc-color.on{border-color:var(--text);box-shadow:0 0 0 2px #fff inset}
.cs-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cs-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-2);padding:4px 0;border-top:1px solid var(--border)}
/* ===== Modal de evento (estilo Outlook, bordes muy redondeados) ===== */
.ev-modal{background:#f3f4f8;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.34);width:880px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.ev-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.ev-save{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;font-weight:700;font-size:14px;padding:9px 18px;border-radius:10px}
.ev-save:hover{background:var(--primary-dark)}.ev-save i.ph{font-family:"Phosphor-Fill"!important}
.ev-tag{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text-2);border:1px solid #e2e2e2;border-radius:9px;padding:7px 12px}
.ev-tag i.ph{color:var(--primary)}
.ev-bar .modal-x{margin-left:auto}
.ev-cols{flex:1;display:flex;gap:14px;padding:14px;overflow:hidden;min-height:0}
.ev-form{flex:1;display:flex;flex-direction:column;gap:14px;overflow-y:auto;min-width:0}
.ev-card{background:var(--surface);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:6px 14px}
.ev-row{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid var(--border)}
.ev-row:last-child{border-bottom:none}
.ev-ic{width:22px;flex-shrink:0;color:#5b6470;display:grid;place-items:center;font-size:18px}
.ev-title-in{flex:1;border:none;outline:none;font-size:19px;font-weight:600;color:var(--text)}
.ev-title-in::placeholder{color:#aab0b8;font-weight:600}
.ev-in,.ev-sel{flex:1;border:none;outline:none;font-size:14px;color:var(--text);background:transparent;min-width:0}
.ev-sel{border:1px solid #e2e2e2;border-radius:8px;padding:7px 9px;flex:none;min-width:0}
.ev-row .ev-sel:first-of-type{flex:1}
.ev-mini{width:30px;height:30px;border-radius:8px;color:var(--muted);display:grid;place-items:center;flex-shrink:0}
.ev-mini:hover{background:var(--accent-soft);color:var(--primary)}
.ev-tfields{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.ev-tfields input[type=date],.ev-tfields input[type=time]{border:1px solid #e2e2e2;border-radius:8px;padding:6px 9px;font-size:13.5px;font-family:inherit}
.ev-tfields input:disabled{opacity:.4}
.ev-de{color:var(--muted)}
.ev-allday{display:flex;align-items:center;gap:6px;color:var(--text-2);cursor:pointer;margin-left:4px}
.ev-allday input{accent-color:var(--primary)}
.ev-notes-card{flex:1;display:flex;gap:12px;align-items:flex-start;min-height:140px}
.ev-notes{flex:1;border:none;outline:none;resize:none;font-size:14px;font-family:inherit;color:var(--text);min-height:120px;padding-top:6px}
.ev-del{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;color:#c0143c;font-weight:600;font-size:13px;padding:8px 12px;border-radius:8px}
.ev-del:hover{background:#fbe9ee}
/* vista de día derecha */
.ev-day{width:300px;flex-shrink:0;background:var(--surface);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;flex-direction:column;overflow:hidden}
.ev-day.hidden-allday{display:none}
.evd-head{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-bottom:1px solid var(--border);font-weight:600;font-size:13.5px}
.evd-head button{width:26px;height:26px;border-radius:6px;color:var(--muted)}.evd-head button:hover{background:var(--accent-soft)}
.evd-scroll{flex:1;overflow-y:auto}
.evd-grid{position:relative}
.evd-hour{height:44px;border-bottom:1px solid #f2f2f2;position:relative;cursor:pointer}
.evd-hour:hover{background:#f7faff}
.evd-hour span{position:absolute;top:-7px;left:8px;font-size:10.5px;color:var(--muted);background:var(--surface);padding:0 3px}
.evd-block{position:absolute;left:46px;right:8px;background:var(--primary);color:#fff;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.2);pointer-events:none;overflow:hidden}
@media(max-width:640px){ .ev-modal{width:100%;border-radius:16px;max-height:100vh} .ev-day{display:none} .ev-cols{padding:10px} }
/* rejilla mes */
.cal-grid{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0 16px 16px}
.cal-cell.sel{background:#dbeafe!important;box-shadow:inset 0 0 0 1px var(--primary)}
.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid #e7e7e7}
.cal-dow>div{padding:8px 6px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-cells{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:1fr;border-left:1px solid var(--border);border-top:1px solid var(--border);overflow-y:auto}
.cal-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:4px 5px;min-height:92px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.cal-cell:hover{background:#f7faff}
.cal-cell.out{background:var(--surface-2)}.cal-cell.out .cal-daynum{color:#bbb}
.cal-daynum{font-size:12.5px;color:var(--text-2);font-weight:600;align-self:flex-start;padding:1px 2px}
.cal-daynum.td{background:var(--primary);color:#fff;border-radius:50%;min-width:22px;height:22px;display:grid;place-items:center}
.cal-cell.today{background:var(--accent-soft)}
.cal-ev{font-size:11.5px;color:#fff;background:var(--ec,#0078d4);border-radius:4px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-ev b{font-weight:700}
.cal-ev.pend{background:var(--surface);color:var(--ec);border:1px dashed var(--ec)}
.cal-more{font-size:11px;color:#0f6cbd;padding-left:4px}
/* selector de vista (Día/Semana/Mes) */
.cv-seg-group{display:inline-flex;border:1px solid #d8e0ea;border-radius:7px;overflow:hidden;margin:0 4px}
.cv-seg{padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--surface);border-right:1px solid #e7edf4}
.cv-seg:last-child{border-right:none}
.cv-seg:hover{background:#f1f6fc}
.cv-seg.on{background:var(--primary);color:#fff}
/* vistas de tiempo (semana/día) */
.cal-grid{position:relative}
.ct-head{display:grid;border-bottom:1px solid #e7e7e7;flex-shrink:0}
.ct-corner{border-right:1px solid var(--border)}
.ct-dayhead{padding:8px 6px;text-align:center;font-size:13px;color:var(--text-2);border-right:1px solid var(--border)}
.ct-dayhead .ct-dow{text-transform:uppercase;font-size:11px;color:var(--muted)}
.ct-dayhead .ct-dnum{font-weight:700}
.ct-dayhead.td .ct-dnum{background:var(--primary);color:#fff;border-radius:50%;padding:1px 7px;margin-left:3px}
.ct-allday{display:grid;border-bottom:1px solid var(--border);max-height:96px;overflow-y:auto;flex-shrink:0;background:var(--surface-2)}
.ct-allday-lbl{font-size:11px;color:var(--muted);padding:5px 6px;border-right:1px solid var(--border);display:flex;align-items:center}
.ct-allday-cell{min-height:26px;padding:3px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;cursor:pointer}
.ct-scroll{flex:1;overflow-y:auto}
.ct-body{display:grid;position:relative}
.ct-hours{border-right:1px solid var(--border)}
.ct-hour{height:46px;position:relative}
.ct-hour span{position:absolute;top:-7px;right:6px;font-size:11px;color:var(--muted)}
.ct-col{position:relative;border-right:1px solid var(--border);background-image:repeating-linear-gradient(#f2f2f2 0 1px,transparent 1px 46px);cursor:pointer}
.ct-ev{position:absolute;background:var(--ec,#0078d4);color:#fff;border-radius:5px;padding:2px 6px;font-size:11.5px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.15);cursor:pointer;line-height:1.25}
.ct-ev b{font-weight:700}
.ct-ev.pend{background:var(--surface);color:var(--ec);border:1px dashed var(--ec)}
/* tareas */
.td-wrap{flex:1;display:flex;overflow:hidden}
.td-nav{width:240px;border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.td-navi{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;color:var(--text);font-size:14px;font-weight:500;text-align:left}
.td-navi i.ph{font-size:17px;color:var(--muted)}
.td-navi:hover{background:var(--surface-2)}
.td-navi.active{background:#e8eef7;color:#0f4c81;font-weight:700}
.td-navi.active i.ph{color:var(--primary)}
.td-navi .cv-count{margin-left:auto}
.td-main{flex:1;overflow-y:auto;padding:20px 28px 40px}
.td-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px}
.td-head h2{font-size:20px}
.td-add .td-more-opts{flex-shrink:0;color:var(--muted)}
.td-add .td-more-opts:hover{background:var(--accent-soft);color:var(--primary)}
.td-add{display:flex;align-items:center;gap:12px;background:#f7f9fb;border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.td-add input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14px}
.td-add #tdAddBtn{flex-shrink:0}
/* nav estilo Outlook To Do */
.td-navi-t{flex:1;text-align:left}
.td-nav-sep{height:1px;background:#e7e7e7;margin:8px 6px}
.td-sort{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-weight:600;font-size:13.5px;padding:6px 10px;border-radius:7px}
.td-sort:hover{background:var(--accent-soft)}
.td-head h2{display:flex;align-items:center;gap:10px}
.td-head h2 i.ph{color:var(--primary);font-size:22px}
/* tarjeta "Agregar una tarea" que se expande */
.td-add2{background:var(--surface);border:1px solid #e7e7e7;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:16px;overflow:hidden;transition:box-shadow .15s}
.td-add2.open{box-shadow:0 4px 16px rgba(0,0,0,.1);border-color:#dbe6f2}
.td-add-top{display:flex;align-items:center;gap:12px;padding:14px 16px}
.td-add-plus{color:var(--primary);font-size:18px;display:grid;place-items:center;flex-shrink:0}
.td-add2 input#tdAddInput{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;color:var(--text)}
.td-add-opts{display:none;align-items:center;gap:4px;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface-2)}
.td-add2.open .td-add-opts{display:flex}
.td-aopt{width:34px;height:34px;border-radius:8px;color:var(--muted);display:grid;place-items:center;font-size:17px}
.td-aopt:hover{background:#e9eef5;color:var(--primary)}
.td-aopt.on{color:#d83b01}.td-aopt.on i.ph{font-family:"Phosphor-Fill"!important}
.td-aopt-info{flex:1;font-size:12.5px;color:#0f6cbd;padding-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-aopt-hidden{width:0;height:0;opacity:0;position:absolute;pointer-events:none}
.td-add-opts #tdAddBtn{flex-shrink:0}
/* nueva lista + borrar lista + cabecera con acciones + vista cuadrícula */
.td-newlist{color:var(--primary);font-weight:600}
.td-list-del{margin-left:6px;opacity:0;color:var(--muted);font-size:13px}
.td-navi:hover .td-list-del{opacity:1}.td-list-del:hover{color:#c0143c}
.td-navi .cal-dot{margin-right:2px}
.td-head-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.td-viewseg .cv-seg{display:inline-flex;align-items:center;gap:6px}
.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;align-items:start}
.td-grid .td-add2,.td-grid .td-sec{grid-column:1/-1}
.td-grid .td-row{flex-direction:column;align-items:flex-start;gap:8px;min-height:96px}
.td-grid .td-row .td-actions{align-self:flex-end;margin-top:auto;opacity:1}
@media(max-width:640px){ .td-grid{grid-template-columns:1fr} .td-viewseg{display:none} }
.td-check{width:22px;height:22px;border-radius:50%;border:1.6px solid #b9b9b9;display:grid;place-items:center;flex-shrink:0;color:#fff;font-size:13px}
.td-check.ghost{border-style:dashed}
.td-check.on{background:var(--primary);border-color:var(--primary)}
.td-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:7px;background:var(--surface)}
.td-row:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.td-row.done .td-title{text-decoration:line-through;color:var(--muted)}
.td-body{flex:1;min-width:0}
.td-title{font-size:14px;color:var(--text);display:flex;align-items:center;gap:7px}
.td-star i.ph{color:#d83b01;font-family:"Phosphor-Fill"!important}
.td-meta{display:flex;gap:12px;margin-top:3px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.td-due,.td-assign,.td-from{display:inline-flex;align-items:center;gap:4px}
.td-due i.ph,.td-assign i.ph{font-size:13px}
.td-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.td-sec{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin:18px 0 8px}
.btn-mini{padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn-mini.ghost{background:var(--surface)}.btn-mini.ghost:hover{background:var(--surface-2)}
.btn-mini.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
/* modales evento/tarea extras */
.c-edit .ce-inline{flex-direction:row;align-items:center;gap:8px}
.c-edit .lnk{font-weight:400;color:var(--primary);font-size:12px;background:none;margin-left:6px}
.c-edit .lnk:hover{text-decoration:underline}
.att-chip{display:inline-block;font-size:12px;padding:2px 8px;border-radius:10px;margin:2px 3px 0 0;background:var(--accent-soft);color:var(--text-2)}
.att-chip.accepted{background:#e7f5e7;color:#1b7a1b}.att-chip.rejected{background:#fbe9e9;color:#b3261e}
.ev-when,.ev-loc{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.ev-notes{font-size:13.5px;color:var(--text-2);white-space:pre-wrap}
.ev-att{font-size:13px;color:var(--text-2)}
.pm-photo{display:flex;align-items:center;gap:16px}
.pm-av{width:72px;height:72px;border-radius:50%;background:#0078d4;color:#fff;display:grid;place-items:center;
font-weight:700;font-size:26px;overflow:hidden;flex-shrink:0}
.pm-av img{width:100%;height:100%;object-fit:cover}
.pm-photo-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn-mini{font-size:13px;font-weight:600;color:#0078d4;border:1px solid #cfe0f0;border-radius:8px;padding:7px 13px;background:#f5f9fd}
.btn-mini:hover{background:var(--accent-soft)}
.btn-mini.ghost{color:var(--muted);border-color:var(--border);background:var(--surface)}
.btn-mini.ghost:hover{background:var(--surface-2)}
.pm-field{display:flex;flex-direction:column;gap:6px}
.pm-field span{font-size:12.5px;color:var(--muted);font-weight:600}
.pm-field input{border:1px solid #d8d8d8;border-radius:9px;padding:10px 12px;font-size:14px;outline:none}
.pm-field input:focus{border-color:var(--primary)}
.pm-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text-2);padding:2px 2px}
.pm-sec{border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.pm-sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pm-sec-h span{font-weight:700;font-size:14px}
.pm-pklist{display:flex;flex-direction:column;gap:6px}
.pm-pk{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;font-size:13.5px}
.pk-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-date{color:var(--muted);font-size:12px}
.pk-del{width:24px;height:24px;border-radius:50%;color:var(--muted)}
.pk-del:hover{background:#fde9e3;color:#d83b01}
.pm-empty{color:var(--muted);font-size:13px;padding:4px 2px}
.pm-toggle{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-2);cursor:pointer}
.pm-toggle input{margin-top:2px;width:16px;height:16px;accent-color:#0078d4;flex-shrink:0}
/* ---- Reading pane modes (Vista → Panel de lectura) ---- */
.ow-body.rp-bottom{grid-template-columns:250px 1fr;grid-template-rows:var(--ow-list-h,300px) 1fr}
.ow-body.rp-bottom .ow-folders{grid-column:1;grid-row:1 / -1}
.ow-body.rp-bottom .ow-list{grid-column:2;grid-row:1;min-height:0}
.ow-body.rp-bottom .ow-read{grid-column:2;grid-row:2;min-height:0;border-top:1px solid var(--border)}
.ow-body.rp-off .ow-read{display:none}
.ow-body.rp-off{grid-template-columns:250px 1fr}
.ow-body.rp-off .ow-folders{grid-column:1}
.ow-body.rp-off .ow-list{grid-column:2;grid-row:1 / -1}
/* ---- Redimensionar la lista arrastrando (vista lateral y vista apilada) ----
OJO: .ow-list tiene overflow:hidden — el tirador debe quedar DENTRO de su caja
(right:0/bottom:0, nunca offsets negativos) o el propio overflow lo recorta y
deja de recibir clics, aunque getBoundingClientRect() lo siga midiendo bien. */
.ow-list{position:relative}
.list-resize-handle{position:absolute;z-index:15;background:transparent;top:0;bottom:0;right:0;width:6px;cursor:col-resize}
.list-resize-handle:hover,.list-resize-handle.dragging{background:var(--primary)}
.ow-body.rp-bottom .list-resize-handle{top:auto;left:0;right:0;bottom:0;width:auto;height:6px;cursor:row-resize}
.ow-body.rp-off .list-resize-handle{display:none}
/* ---- Ventanas flotantes de lectura de mensajes ---- */
#msgWinDock { position:fixed; right:18px; bottom:0; z-index:499; display:flex; align-items:flex-end; gap:14px; pointer-events:none; }
.cmp-flash { animation: cmpFlash .6s ease !important; }
@keyframes cmpFlash { 0%,100%{box-shadow:var(--shadow-xl,0 8px 32px rgba(0,0,0,.22))} 40%{box-shadow:0 0 0 3px #0078d4,0 8px 32px rgba(0,0,0,.22)} }
.msg-win { pointer-events:all; width:620px; max-width:46vw; height:520px; max-height:82vh;
background:var(--surface); border-radius:8px 8px 0 0; box-shadow:0 -2px 28px rgba(0,0,0,.3);
border:1px solid var(--border); border-bottom:none; display:flex; flex-direction:column; overflow:hidden; }
.msg-win.mw-minimized { height:42px; overflow:hidden; }
.mw-bar { display:flex; align-items:center; gap:8px; padding:0 12px; height:42px; background:#0078d4; color:#fff;
cursor:move; flex-shrink:0; border-radius:8px 8px 0 0; }
.mw-subject { flex:1; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mw-btn { background:none; border:none; color:#fff; opacity:.8; cursor:pointer; width:28px; height:28px;
display:flex; align-items:center; justify-content:center; border-radius:4px; font-size:15px; }
.mw-btn:hover { opacity:1; background:rgba(255,255,255,.2); }
.mw-content { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.mw-actions { display:flex; gap:8px; padding:10px 14px 6px; flex-shrink:0; border-bottom:1px solid var(--border); }
.mw-actions button { padding:5px 12px; border:1px solid #d0d7de; border-radius:5px; background:#f8f8f8; font-size:12px; cursor:pointer; }
.mw-actions button:hover { background:#e8f0fe; border-color:#0078d4; color:#0078d4; }
.mw-head-meta { display:flex; align-items:center; gap:10px; padding:10px 14px 8px; flex-shrink:0; font-size:13px; }
.mw-avatar { width:36px; height:36px; border-radius:50%; font-size:14px; flex-shrink:0; }
.mw-date { margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }
.mw-frame { flex:1; width:100%; border:none; }
/* ===================== MÓVIL (estilo Mail de iOS) ===================== */
.mob-hamb,.mob-back,.mob-backdrop,.mob-nav{display:none}
@media(max-width:640px){
.ow-rainbow{display:none}
.ow-header{padding:0 10px;gap:4px;overflow:hidden}
.ow-header-bar{justify-content:flex-end}
.ow-logo{display:none}
.ow-search{margin:0;max-width:none;min-width:0;flex:1;padding:6px 10px}
/* Móvil: buscador colapsado a icono, se expande al pulsar */
.ow-search:not(.mob-search-open){flex:0 0 38px;width:38px;padding:0;background:transparent;border-color:transparent;overflow:hidden;box-shadow:none}
.ow-search:not(.mob-search-open) input,.ow-search:not(.mob-search-open) .adv-search-btn{display:none}
.ow-search:not(.mob-search-open) i.ph{font-size:22px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;color:var(--text)}
.ow-search.mob-search-open{flex:1;padding:5px 10px}
/* En lectura móvil, ocultar cabecera para evitar solapamiento */
#app.reading .ow-header{display:none!important}
/* Notas: apilar lista y editor en móvil */
.notes-main{flex-direction:column}
.notes-list{flex:0 0 auto;max-width:none;max-height:40vh;flex-direction:column;border-right:none;border-bottom:1px solid var(--border)}
.note-editor-wrap{padding:14px}
.notes-bar{flex-wrap:wrap}
.ow-search input{min-width:0}
.ow-head-actions{flex-shrink:0;gap:0}
.ow-head-actions>button{width:32px;height:32px}
.ow-avatar{width:30px;height:30px;margin-left:2px;flex-shrink:0}
.ow-ribbon{display:none}
.mob-hamb{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--text);flex-shrink:0}
.mob-hamb i.ph{font-size:22px}
.ow-body{display:block;position:relative}
.ow-rail{display:none}
.ow-list{width:100%;height:100%;border-right:none}
.list-resize-handle{display:none}
.msg{padding:12px 14px}
.msg-actions{display:none!important}
.msg-check{display:none!important}
.list-tabs{overflow-x:auto;white-space:nowrap}
/* carpetas: cajón deslizante con fondo oscuro */
.ow-folders{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:330px;z-index:160;padding-top:14px;
transform:translateX(-100%);transition:transform .25s ease;box-shadow:6px 0 30px rgba(0,0,0,.25)}
#app.folders-open .ow-folders{transform:none}
.mob-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s}
#app.folders-open .mob-backdrop{opacity:1;pointer-events:auto}
/* lectura: pantalla completa que entra desde la derecha */
.ow-read{position:fixed;inset:0;z-index:170;background:var(--surface);overflow-y:auto;
transform:translateX(100%);transition:transform .25s ease;pointer-events:none}
#app.reading .ow-read{transform:none;pointer-events:auto}
/* en móvil, las vistas (no correo) no muestran el overlay de lectura */
#app.show-cal .ow-read,#app.show-contacts .ow-read,#app.show-tasks .ow-read{display:none}
.mob-back{display:inline-flex;align-items:center;gap:3px;position:sticky;top:0;width:100%;
padding:12px 12px;background:var(--surface);border-bottom:1px solid var(--border);color:var(--primary);font-size:15px;font-weight:600;z-index:5}
.mob-back svg{width:21px;height:21px;margin-right:-2px}
/* redacción a pantalla completa */
.cmp.float{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;
max-width:none!important;max-height:none!important;border-radius:0!important;z-index:180}
/* menú de usuario y modal: ocupar mejor el ancho */
.user-menu{right:6px!important;left:6px;min-width:0}
.modal{width:100%;border-radius:16px}
/* ===== navegación inferior (sustituye al raíl en móvil) ===== */
.mob-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;background:var(--surface);border-top:1px solid #e3e3e3;z-index:140;padding-bottom:env(safe-area-inset-bottom)}
.mob-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:10.5px;font-weight:600}
.mob-nav button i.ph{font-size:21px}
.mob-nav button.active{color:var(--primary)}
.mob-nav button.active i.ph{font-family:"Phosphor-Fill"!important}
/* ===== vistas a pantalla completa entre header y barra inferior ===== */
#app.show-contacts .contacts-view,#app.show-cal .cal-view,#app.show-tasks .tasks-view{
position:fixed;top:49px;left:0;right:0;bottom:56px;display:flex;overflow:hidden;z-index:130}
.cv-head{flex-wrap:wrap;padding:12px 14px;gap:8px}
.cv-head h2{font-size:17px;width:100%}
.cv-actions{width:100%;flex-wrap:wrap;margin-left:0}
.cv-body{padding:12px 14px 24px}
.cv-domain-head{flex-wrap:wrap;gap:4px}
.cv-domain-head .cv-btn.sm{margin-left:auto}
.c-grid{grid-template-columns:1fr}
.cv-collist-head{display:none}
.c-card{grid-template-columns:1fr auto}
.cr-contact{grid-column:1/-1;padding-left:48px}
/* calendario móvil: celdas más compactas */
.cal-grid{padding:0 6px 6px}
.cal-cell{min-height:62px;padding:2px 3px}
/* ===== Lectura móvil: botones solo icono, asunto más compacto ===== */
.read-actions{flex-wrap:nowrap;gap:2px}
.read-actions button{font-size:0!important;padding:8px 10px}
.read-actions button i.ph{font-size:19px!important}
.read-head h2{font-size:17px}
.read-body{margin:10px 14px 16px}
.read-head{padding:12px 14px 10px}
.read-atts{padding:8px 14px}
.read-footer{padding:8px 14px 12px}
.read-footer button{font-size:12px;padding:6px 10px}
.cal-daynum{font-size:11px}
.cal-ev{font-size:10px;padding:0 4px}
.cal-title{font-size:15px;flex:1;text-align:center}
.cv-seg-group{margin:0}
.cal-side{display:none}
.cal-subbar{padding:8px 10px}
.cv-seg{padding:6px 8px;font-size:11.5px}
/* tareas móvil: nav arriba en horizontal */
.td-wrap{flex-direction:column}
.td-nav{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px;gap:6px}
.td-navi{flex-shrink:0;white-space:nowrap;padding:7px 10px}
.td-navi .cv-count{margin-left:6px}
.td-main{padding:14px 14px 24px}
}
/* ===== Ajustes ===== */
.set-modal{width:560px}
.cfg-modal{width:1040px;max-width:97vw;height:min(740px,92vh);padding:0;overflow:hidden;display:flex;flex-direction:column}
.cfg-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.cfg-head h3{font-size:17px;font-weight:700;color:var(--text)}
.cfg-body{display:flex;min-height:0;flex:1}
.cfg-nav{width:248px;flex-shrink:0;border-right:1px solid var(--border);padding:12px 10px;display:flex;flex-direction:column;gap:3px;background:var(--surface-2);overflow-y:auto}
.set-navi{display:flex;align-items:center;gap:11px;padding:10px 12px;border:none;background:none;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text-2);text-align:left;width:100%;font-family:inherit}
.set-navi i.ph{font-size:18px;color:var(--muted)}
.set-navi:hover{background:var(--hover)}
.set-navi.active{background:var(--accent-soft);color:var(--primary);font-weight:600}
.set-navi.active i.ph{color:var(--primary)}
.cfg-content{flex:1;min-width:0;padding:22px 32px 28px;overflow-y:auto;max-width:760px}
.cfg-content h2{font-size:20px;font-weight:700;color:var(--text);margin-bottom:6px}
.set-sel{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;font-family:inherit;color:var(--text);background:var(--surface);margin-top:8px}
.set-sel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,108,189,.15)}
.set-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}
.set-sec{padding:16px 0;border-bottom:1px solid var(--border)}
.set-sec:last-child{border-bottom:none}
.set-sec h4{font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--text)}
.set-sec h4 i.ph{color:var(--primary)}
.set-hint{font-size:12.5px;color:var(--muted)}
.set-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.set-row>span:first-child{margin-right:auto;font-size:13px;color:var(--text-2)}
.set-accs{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.set-acc{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--border);border-radius:10px}
.set-acc.cur{background:var(--accent-soft);border-color:#dbe9fb}
.set-acc .c-av{width:38px;height:38px;flex-shrink:0}
.set-acc>div{min-width:0;flex:1}
.set-acc b{font-size:14px}
.set-acc-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.set-addacc{margin-top:10px}
.set-addacc summary{cursor:pointer;color:var(--primary);font-size:13px;font-weight:600}
.set-addform{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.set-addform input{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px}
.set-addform input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,108,189,.15)}
.set-err{color:#d83b01;font-size:12.5px}
.set-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-2);font-weight:600;margin-bottom:12px}
.set-field textarea{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;font-weight:400;color:var(--text);font-family:inherit}
.set-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text)}
.set-check input{width:16px;height:16px;accent-color:var(--primary)}
@media (max-width:640px){
.cfg-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
.cfg-body{flex-direction:column}
.cfg-nav{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px;gap:6px}
.set-navi{flex-shrink:0;white-space:nowrap;width:auto;padding:8px 11px}
.cfg-content{padding:14px 16px 24px}
}
/* ── Auditoría de envíos ─────────────────────────────────────────────────── */
.audit-pop{position:fixed;width:360px;max-width:calc(100vw - 16px);max-height:460px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);z-index:1200;display:none;flex-direction:column;overflow:hidden}
.audit-pop.open{display:flex}
.audit-pop-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #e5e5e5;flex-shrink:0;background:var(--surface-2)}
.audit-pop-title{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.audit-pop-close{border:none;background:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:4px;font-size:16px;line-height:1}
.audit-pop-close:hover{background:var(--surface-2)}
.audit-pop-body{flex:1;overflow-y:auto;padding:0 0 8px}
.audit-open-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:10px;white-space:nowrap}
.audit-open-badge.open{background:#e6f4ea;color:#1e7e34}
.audit-open-badge.none{background:var(--surface-2);color:var(--muted)}
.audit-section-title{padding:10px 16px 4px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px}
.audit-opens{padding:0 0 4px}
.audit-open-row{display:grid;grid-template-columns:16px 1fr;align-items:start;gap:6px;padding:6px 12px;font-size:12px;border-bottom:1px solid #f5f5f5;color:var(--text-2)}
.audit-open-row>i{color:#1e7e34;font-size:14px;margin-top:2px}
.aor-main{display:flex;flex-direction:column;gap:2px}
.aor-time{color:var(--text);font-weight:600;white-space:nowrap}
.aor-dev{color:var(--text-2);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aor-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:2px}
.aor-ip{color:var(--muted);font-family:monospace;font-size:10px;white-space:nowrap}
.aor-lang{background:#e8e8e8;color:var(--text-2);border-radius:3px;padding:1px 4px;font-size:10px;font-weight:700}
.aor-country{color:var(--text-2);font-size:11px;display:inline-flex;align-items:center;gap:2px}
.aor-country i{font-size:11px}
.aor-ref{color:var(--muted);font-size:10px;display:inline-flex;align-items:center;gap:2px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aor-ref i{font-size:10px;flex-shrink:0}
.audit-opens-none{padding:12px 16px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.audit-loading{padding:40px 24px;text-align:center;color:var(--muted);font-size:14px}
.audit-row{padding:12px 20px;border-bottom:1px solid var(--border);cursor:default}
.audit-row:hover{background:#f9f8f7}
.audit-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.audit-subj{font-size:14px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.audit-date{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.audit-row-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.audit-to{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;display:flex;align-items:center;gap:4px}
.audit-size{font-size:12px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:4px}
.audit-pagination{padding:12px 20px;display:flex;gap:8px;justify-content:center}
.audit-single{padding:16px 0}
.audit-field{display:flex;flex-direction:column;padding:10px 20px;border-bottom:1px solid var(--border)}
.af-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.af-val{font-size:14px;color:var(--text)}
.af-mono{font-family:monospace;font-size:12px;word-break:break-all;color:var(--muted)}
.audit-page{padding:6px 14px;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:4px}
.audit-page:hover{background:var(--surface-2)}
/* ===== Chips destinatarios (Para/CC/CCO) ===== */
.rcpt-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:3px 4px;flex:1;cursor:text;min-height:30px}
.rcpt-input{border:none;outline:none;flex:1;min-width:80px;font-size:13.5px;padding:2px 4px;background:transparent;font-family:inherit}
.rcpt-chip{display:inline-flex;align-items:center;gap:3px;background:#ddeaff;color:#0050a0;border:1px solid #b3c9f0;border-radius:14px;padding:2px 8px 2px 6px;font-size:12.5px;max-width:260px;cursor:default;user-select:none;font-weight:500}
.rcpt-chip.invalid{background:#fde8e8;color:#c0392b}
.rcpt-chip .chip-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.rcpt-chip .chip-del{cursor:pointer;font-size:15px;line-height:1;opacity:.6;margin-left:1px;flex-shrink:0}
.rcpt-chip .chip-del:hover{opacity:1}
.chip-menu .warn{color:#e67e22}
.chip-menu .danger{color:#e74c3c}
/* ===== Picker de contactos ===== */
.pk-it{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:default}
.pk-it:hover{background:#f5f7fa}
.pk-cb{flex-shrink:0;cursor:pointer;width:15px;height:15px}
.pk-body{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer;border-radius:6px;padding:2px 4px}
.pk-body:hover{background:var(--accent-soft)}
/* ── Recortador de fotos ─────────────────────────────────── */
.crop-modal{max-width:380px}
.crop-area{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 20px}
.crop-ring{position:relative;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--primary),0 2px 12px rgba(0,0,0,.18);cursor:grab;touch-action:none}
.crop-ring:active{cursor:grabbing}
#cropCv{display:block;border-radius:50%}
.crop-overlay{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.crop-hint{font-size:12px;color:var(--muted);text-align:center;margin:0}
/* ===== Bandeja de salida (Outbox) ===== */
.ob-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.ob-row:hover{background:#f9f9f9}
.ob-row.active{background:#e8f0fe}
.ob-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ob-subj{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-to{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ob-countdown{font-size:13px;font-weight:700;color:#d83b01;min-width:40px;text-align:right}
.ob-paused{font-size:12px;color:var(--muted);min-width:80px;text-align:right}
.ob-scheduled{font-size:11px;color:#0078d4;min-width:80px;text-align:right}
.ob-btn{width:28px;height:28px;border-radius:6px;color:var(--text-2);display:grid;place-items:center;background:none;border:none;cursor:pointer}
.ob-btn:hover{background:var(--hover)}
.ob-btn i.ph{font-size:15px}
/* Vista previa del mensaje de outbox */
.ob-preview{display:flex;flex-direction:column;height:100%;padding:0}
.ob-preview-header{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.ob-preview-meta{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.ob-preview-row{font-size:.9rem;color:var(--text);display:flex;gap:8px;align-items:baseline}
.ob-label{font-size:.82rem;color:#a0a0a0;flex-shrink:0;width:55px}
.ob-preview-actions{display:flex;gap:8px;flex-wrap:wrap}
.ob-preview-body{flex:1;overflow-y:auto;padding:20px;font-size:14px;line-height:1.6}
/* ── Spam management ──────────────────────────────── */
.not-spam-banner{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#f0fdf4;border-bottom:1px solid #bbf7d0;font-size:13px;color:#166534;flex-wrap:wrap}
.not-spam-banner i.ph{font-size:16px;flex-shrink:0}
.not-spam-banner span{flex:1;min-width:120px}
.ns-btn{padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid #16a34a;color:#166534;background:var(--surface)}
.ns-btn:hover{background:#f0fdf4}
.ns-btn.secondary{border-color:#15803d;color:#15803d}
/* ===== Modo popup (compose en ventana nueva) ===== */
body.popup-mode .ow-header-bar,
body.popup-mode .ow-rail,
body.popup-mode .ow-folders,
body.popup-mode .ow-list,
body.popup-mode .ow-notif-wrap,
body.popup-mode .ow-search,
body.popup-mode #mobNav { display: none !important; }
/* El ow-body usa grid — hay que redefinir las columnas para que ow-read llene todo */
body.popup-mode .ow-body { grid-template-columns: 1fr !important; overflow: visible !important; }
body.popup-mode .ow-read { overflow-y: auto; height: 100%; }
body.popup-mode #read { display: flex !important; flex-direction: column; height: 100%; min-height: 0; }
body.popup-mode .cmp.inline { flex: 1; min-height: 0; height: 100%; }
body.popup-mode .cmp-body { min-height: 200px; }
body.popup-mode .c-extract,
body.popup-mode .c-tab { display: none !important; }
/* ===== Split button (Responder / opciones) ===== */
.tb-split-btn{display:inline-flex;align-items:stretch;border-radius:4px;overflow:hidden;flex-shrink:0}
.tb-split-btn>button:first-child:not(.ow-new){display:inline-flex;align-items:center;gap:6px;color:var(--text);font-size:13px;padding:4px 8px;min-height:28px;border-radius:4px 0 0 4px;white-space:nowrap;border:none;background:none;cursor:pointer;font-family:inherit}
/* .ow-new dentro de split-btn tiene prioridad sobre background:none */
.tb-split-btn>.ow-new{background:var(--primary);color:#fff;border:1.5px solid var(--primary);margin-right:0;border-radius:4px 0 0 4px}
.tb-split-btn>.ow-new:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
#btnComposeGroup{margin-right:6px}
/* Split button: un solo bloque visual (pill) con DOS zonas de clic — acción principal y
submenú — igual que "Enviar y recibir" en Outlook. Antes el hover solo resaltaba la
mitad que tenía el ratón encima (mitad prendida, mitad apagada), así que no se leía
como una sola pieza; ahora hover en CUALQUIER punto del grupo enciende las dos mitades
a la vez, y una línea fina separa dónde acaba una zona de clic y empieza la otra. */
.tb-split-btn:not(:has(.ow-new)):hover>button:first-child,
.tb-split-btn:not(:has(.ow-new)):hover>.tb-split-caret{background:var(--hover)}
.tb-split-btn:not(:has(.ow-new))>.tb-split-caret{border-left:1px solid var(--border)}
.tb-split-caret{display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);padding:0 3px 0 0;min-height:28px;border:none;border-radius:0 4px 4px 0;background:none;cursor:pointer}
/* icono del caret también se vuelve azul al hacer hover sobre cualquier parte del split button */
.tb-split-btn:hover>.tb-split-caret .fui{color:var(--primary)}
.tb-split-caret i.ph{font-size:13px}
/* Botón popout en compose */
.c-popout{display:inline-flex;align-items:center;gap:5px;color:var(--text-2);font-size:12px;padding:4px 8px;border-radius:4px}
.c-popout:hover{background:var(--hover);color:#0078d4}
body.popup-mode .c-popout{display:none!important}
/* popup de lectura: quitar botón atrás móvil, barra de carga */
body.popup-mode .mob-back{display:none!important}
body.popup-mode #app{height:100vh;overflow:hidden}
body.popup-mode .ow-read{height:100vh}
body.popup-mode #read .read-head{padding-top:14px}
/* ===== Densidad de lista ===== */
/* Normal (por defecto) — altura actual */
/* Compacto */
body.density-compact .msg{padding:3px 10px!important}
body.density-compact .msg .from{font-size:13px}
body.density-compact .msg .subj{font-size:13px}
body.density-compact .msg .preview{display:none}
/* Espacioso */
body.density-spacious .msg{padding:10px 14px!important}
body.density-spacious .msg .preview{font-size:13px}
/* toolset-vista usa flex igual que toolset-mail */
.toolset-vista{display:none;align-items:center;gap:3px;flex-wrap:wrap;width:100%}
.row-close{background:none;border:none;color:var(--muted);font-size:14px;padding:2px 6px;cursor:pointer;flex-shrink:0;line-height:1}
.row-close:hover{color:#c00}
/* === Búsqueda avanzada === */
.adv-search-btn{background:none;border:none;color:var(--muted);padding:4px 6px;cursor:pointer;border-radius:4px;display:flex;align-items:center}
.adv-search-btn:hover{background:var(--hover);color:#0078d4}
.adv-search-btn i.ph{font-size:15px}
.ow-search:hover .adv-search-btn,.ow-search:focus-within .adv-search-btn{opacity:1}
/* === Búsqueda avanzada estilo OWA: panel ancho anclado al buscador, filas label/campo, inputs subrayados === */
.adv-search-panel{position:fixed;z-index:3000;background:var(--surface);border:1px solid #e1e1e1;border-radius:0 0 8px 8px;box-shadow:0 12px 28px rgba(0,0,0,.18);min-width:420px;max-width:96vw}
.adv-search-inner{padding:14px 22px 18px}
.as-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);min-height:42px}
.as-row .as-lbl{flex:0 0 130px;font-size:13px;color:var(--muted);font-weight:400;padding:8px 0}
.as-row .as-field{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--text);padding:8px 2px}
.as-row .as-field:focus{box-shadow:none}
.as-row select.as-field{cursor:pointer;color:var(--text)}
.as-row:focus-within{border-bottom-color:#0078d4;box-shadow:0 1px 0 0 #0078d4}
.as-dates{flex:1;display:flex;gap:24px}
.as-dates .as-field{flex:1;border:none;border-bottom:none}
.as-check{width:18px;height:18px;cursor:pointer;accent-color:#0078d4;margin-left:2px}
.adv-search-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:16px}
/* === Ajustes: radio groups y checks mejorados === */
.set-radio-group{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.set-radio{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);cursor:pointer;padding:8px 12px;border:1px solid var(--border);border-radius:6px;transition:background .12s}
.set-radio:hover{background:#f7f9fc;border-color:#0078d4}
.set-radio input[type="radio"]{width:16px;height:16px;accent-color:#0078d4}
.set-radio input[type="radio"]:checked + span,.set-radio:has(input:checked){background:#e8f0fb;border-color:#0078d4;color:#0050a0;font-weight:500}
.set-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);cursor:pointer;padding:6px 0}
.set-check input[type="checkbox"]{width:16px;height:16px;accent-color:#0078d4;cursor:pointer}
.set-foot{padding-top:16px;border-top:1px solid var(--border);margin-top:8px}
.ow-act.ow-icon-only{padding:4px 7px;min-width:28px;justify-content:center}
.tb-split-caret-new{border-left:1.5px solid var(--primary);color:var(--primary)}
.tb-split-caret-new:hover{background:#e8f0fd}
/* ===== Vista de conversación (estilo OWA) ===== */
.conv-view{display:flex;flex-direction:column;height:100%;overflow-y:auto;background:var(--surface-2)}
/* Sticky subject + participants */
.conv-view{display:flex;flex-direction:column;height:100%;overflow:hidden}
.conv-subject-wrap{position:sticky;top:0;z-index:10;background:var(--surface-2);border-bottom:1px solid var(--border);padding:12px 20px;flex-shrink:0}
.conv-subject{font-size:17px;font-weight:600;color:var(--text);padding:0;background:transparent;flex-shrink:0}
.conv-participants{font-size:12px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-msg-count{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px;vertical-align:middle}
/* Messages list */
.conv-msgs{display:flex;flex-direction:column;gap:3px;padding:10px 12px 16px;overflow-y:auto;flex:1;min-height:0}
/* ===== BUBBLE MODE ===== */
/* === CHAT REPLY BAR === */
.conv-reply-bar{display:flex;align-items:flex-end;gap:6px;padding:8px 10px;background:var(--surface-2);border-top:1px solid var(--border);flex-shrink:0}
.crb-attach{background:none;border:none;padding:7px;border-radius:50%;color:var(--muted);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .15s}
.crb-attach:hover{background:var(--hover);color:var(--text)}
.crb-wrap{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.crb-atts{display:flex;flex-wrap:wrap;gap:4px;padding:0 4px}
.crb-att-chip{display:flex;align-items:center;gap:4px;background:var(--surface-3);border:1px solid var(--border);border-radius:12px;padding:2px 8px 2px 6px;font-size:11px;color:var(--text)}
.crb-att-chip button{background:none;border:none;cursor:pointer;padding:0;color:var(--muted);font-size:13px;line-height:1;display:flex}
.crb-input-row{display:flex;align-items:flex-end;gap:6px}
.crb-input{flex:1;min-height:36px;max-height:120px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:8px 14px;font-size:14px;line-height:1.45;outline:none;color:var(--text);font-family:var(--font);word-break:break-word;transition:border-color .15s}
.crb-input:focus{border-color:var(--primary)}
.crb-input:empty::before{content:attr(data-ph);color:var(--muted);pointer-events:none}
.crb-send{background:var(--primary);border:none;padding:0;border-radius:50%;color:#fff;cursor:pointer;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:17px;transition:background .15s,opacity .15s}
.crb-send:hover{background:var(--primary-dark)}
.crb-send:disabled{opacity:.4;cursor:default}
.crb-send.sending{opacity:.6}
.conv-msg{background:transparent!important;box-shadow:none!important;margin-bottom:0}
.conv-bubble-row{display:flex;align-items:flex-end;gap:8px}
.conv-msg.from-other .conv-bubble-row{flex-direction:row}
.conv-msg.from-me .conv-bubble-row{flex-direction:row-reverse}
/* Between messages from same sender: tighter gap */
.conv-msg.same-prev{margin-top:-1px}
/* Avatar outside bubble */
.conv-bbl-av{width:30px;height:30px;font-size:11px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:600;opacity:1;transition:opacity .1s}
.conv-msg.from-me .conv-bbl-av{display:none}
.conv-bbl-av.hidden{opacity:0;pointer-events:none}
/* Sender name chip above first bubble in group */
.conv-bbl-name{font-size:11px;font-weight:600;color:var(--primary);margin-bottom:3px;padding:0 4px}
/* Bubble inner container */
.conv-bubble-inner{display:flex;flex-direction:column;max-width:74%;min-width:160px;position:relative}
.conv-msg.from-other .conv-bubble-inner{align-items:flex-start}
.conv-msg.from-me .conv-bubble-inner{align-items:flex-end;margin-left:auto}
/* === THE BUBBLE = conv-card-hd === */
.conv-card-hd{display:block!important;padding:9px 13px!important;background:var(--surface);border-radius:18px 18px 18px 4px;box-shadow:0 1px 3px rgba(0,0,0,.09);position:relative;width:100%;box-sizing:border-box;transition:box-shadow .12s;gap:0!important}
.conv-msg.from-me .conv-card-hd{background:var(--primary);border-radius:18px 18px 4px 18px}
/* Avatar inside hd removed — now outside */
.conv-card-hd .avatar.sm{display:none!important}
/* Collapsed: clickable bubble */
.conv-msg.collapsed .conv-card-hd{cursor:pointer}
.conv-msg.collapsed .conv-card-hd:hover{box-shadow:0 2px 8px rgba(0,0,0,.14)}
/* Name row */
.conv-hd-meta{flex:1;min-width:0}
.conv-hd-row1{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.conv-sender-name{font-weight:600;font-size:12px;color:var(--text-2)}
.conv-msg.from-me .conv-sender-name{color:rgba(255,255,255,.78)}
.conv-sender-addr{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.conv-card-date{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.conv-msg.from-me .conv-card-date{color:rgba(255,255,255,.65)}
/* Hd-sub = address row when expanded */
.conv-hd-sub{font-size:12px;color:var(--muted);margin-top:2px}
.conv-msg.from-me .conv-hd-sub{color:rgba(255,255,255,.7)}
.conv-hd-date{font-size:12px;color:var(--muted);white-space:nowrap}
.conv-hd-torow{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.conv-hd-to{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.conv-hd-from-addr{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
/* Preview text */
.conv-hd-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text);display:block;margin-top:3px;max-width:440px}
.conv-msg.from-me .conv-hd-preview{color:rgba(255,255,255,.92)}
/* Unread dot */
.conv-msg.expanded .dot-unread{display:none!important}
/* === Actions (float above bubble on hover) === */
.conv-card-acts{display:none;gap:2px;align-items:center;position:absolute;top:-36px;right:0;background:var(--surface);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:2px;z-index:20}
.conv-msg.from-me .conv-card-acts{right:auto;left:0}
.conv-bubble-inner:hover .conv-card-acts{display:flex}
.conv-msg.expanded .conv-card-acts{display:flex!important}
.cma{background:none;border:none;border-radius:4px;padding:5px 7px;cursor:pointer;color:var(--text-2);font-size:16px;display:flex;align-items:center}
.cma:hover{background:#f0efed}
/* === Expanded card === */
.conv-msg.expanded .conv-card-hd{cursor:default;padding:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.conv-msg.expanded .conv-hd-meta{display:none}
.conv-msg.expanded .conv-hd-meta.show{display:block;padding:8px 14px 6px;background:var(--surface);border-radius:12px 12px 0 0;border-bottom:1px solid var(--border);font-size:12px}
.conv-msg.from-me.expanded .conv-hd-meta.show{background:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15)}
.conv-msg.expanded .conv-hd-row1{flex-wrap:nowrap;overflow:hidden}
.conv-msg.expanded .conv-bubble-inner{max-width:88%}
/* Body = la burbuja en expanded */
.conv-card-body{background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.conv-msg.expanded .conv-hd-meta.show + .conv-card-body{border-radius:0 0 12px 12px}
/* Timestamp al pie */
.conv-bubble-ts{font-size:10px;color:var(--muted);text-align:right;padding:2px 10px 6px;background:var(--surface)}
.conv-msg.from-me .conv-bubble-ts{color:rgba(255,255,255,.65);background:var(--primary)}
.conv-msg.expanded .conv-hd-meta.show~.conv-bubble-ts,.conv-bubble-ts:last-child{border-radius:0 0 12px 12px}
.conv-frame{width:100%;border:none;display:block;padding:0 20px;box-sizing:border-box;min-height:40px}
/* Footer */
.conv-footer{display:flex;gap:8px;padding:8px 4px 4px;justify-content:flex-start;flex-wrap:wrap}
/* Compose inline dentro de la conversación (como OWA) */
.conv-reply-compose{margin:2px 0 0;border-radius:0;box-shadow:none!important;border-top:2px solid var(--primary)!important}
.conv-reply-compose.cmp{background:var(--surface)}
.conv-reply-btn,.conv-replyall-btn,.conv-fwd-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;border:1px solid var(--border);border-radius:4px;background:var(--surface);font-size:13.5px;cursor:pointer;color:var(--text);font-family:inherit;white-space:nowrap}
.conv-reply-btn:hover,.conv-replyall-btn:hover,.conv-fwd-btn:hover{background:var(--surface-2)}
/* ===== Quote expander ··· ===== */
.quote-expand-btn{background:#f0efed;border:1px solid var(--border);border-radius:3px;padding:1px 12px;cursor:pointer;font-size:14px;color:var(--muted);margin:4px 20px 0;display:block;width:fit-content;letter-spacing:3px;font-family:inherit}
.quote-expand-btn:hover{background:#e8e8e8;color:var(--text)}
/* ===== Tarjeta borrador en hilo ===== */
.conv-draft .conv-card-hd{cursor:pointer}
.conv-draft-label{display:inline-block;background:#d83b01;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;margin-right:4px;letter-spacing:.4px;vertical-align:middle}
/* Auditoría: entrega y reenvíos */
.aud-deliv-ok{color:#107c10;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.aud-deliv-ext{color:#0078d4;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.aud-deliv-fwd{font-size:12px;color:#8a4b00;margin-top:2px;display:flex;align-items:center;gap:5px}
/* Ajustes: editor de reglas de bandeja */
.fl-rule{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;background:var(--surface-2)}
.fl-rule .fl-if,.fl-rule .fl-then{color:var(--muted);font-size:13px}
.fl-rule select,.fl-rule input{padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit}
.fl-rule .fl-val,.fl-rule .fl-arg-email{flex:1;min-width:120px}
.fl-rule .fl-del{margin-left:auto;color:#c0392b}
/* Interruptores tipo OWA en los ajustes */
.set-check input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:40px;height:20px;border-radius:11px;background:#c8c6c4;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0;margin:0;border:none}
.set-check input[type="checkbox"]::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.set-check input[type="checkbox"]:checked{background:var(--primary)}
.set-check input[type="checkbox"]:checked::after{left:22px}
.set-check{gap:12px}
/* buscador de ajustes */
.cfg-search{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 10px;margin-bottom:10px}
.cfg-search input{border:none;outline:none;background:none;font-size:13px;width:100%;font-family:inherit;color:var(--text)}
.cfg-search i.ph{color:var(--muted);font-size:15px}
.set-navi.hide{display:none}
.cfg-content h2{font-size:21px;font-weight:700;margin-bottom:14px}
.set-sec h4{font-size:15px}
/* Ajustes: 3.ª columna de subsecciones (estilo OWA) */
.cfg-subs{flex:0 0 230px;border-right:1px solid var(--border);padding:14px 8px;overflow-y:auto;background:var(--surface)}
.cfg-sub{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 14px;border-radius:6px;font-size:13.5px;color:var(--text-2);cursor:pointer;font-family:inherit;line-height:1.3}
.cfg-sub:hover{background:var(--hover)}
.cfg-sub.active{background:var(--accent-soft);color:var(--primary);font-weight:600}
.cfg-content>h2{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:18px}
@media(max-width:640px){ .cfg-subs{flex:none;width:100%;display:flex!important;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px} .cfg-sub{width:auto;white-space:nowrap} }
/* ===== Fondos de pantalla (estilo Fichiando) ===== */
:root{ --glass-bg:rgba(255,255,255,.80); --glass-blur:blur(13px) saturate(125%); }
html[data-theme="dark"]{ --glass-bg:rgba(24,24,24,.72); }
.bg-blur{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;transition:opacity .4s}
body.has-wallpaper .bg-blur{display:block}
#fondoVideo{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:0;pointer-events:none}
/* Estilo OWA: el fondo se ve por bordes/rail/header. Paneles principales SÓLIDOS para legibilidad. */
body.has-wallpaper, body.has-wallpaper #app, body.has-wallpaper .ow-body{background:transparent!important}
/* Estilo OWA con opacidades sutilmente diferenciadas */
html[data-theme="dark"] body.has-wallpaper .ow-header{background:rgba(28,28,28,.55)!important}
body.has-wallpaper .ow-list,body.has-wallpaper .ow-read{background:rgba(255,255,255,.55)!important}
/* sin bordes entre paneles cuando hay fondo */
/* margen para que el fondo respire por los bordes laterales (como OWA) */
@media (min-width: 900px){
body.has-wallpaper .ow-body{padding:0;gap:0;background:transparent}
/* Rail más translúcido (más fondo a través) */
/* Folders + list más opacos */
body.has-wallpaper .ow-list{background:#fff!important;border:none!important;border-radius:0!important}
/* Esquina top-right y bottom-right redondeadas en .ow-list (frontera con panel de lectura transparente) */
body.has-wallpaper .ow-read:has(>.read-empty) ~ section.ow-list,
/* Panel de lectura: TRANSPARENTE cuando vacío, opaco con mensaje (sin redondeo) */
body.has-wallpaper .ow-read{background:transparent!important;border:none!important;border-radius:0 0 10px 0!important;box-shadow:none!important;margin-right:15px!important}
body.has-wallpaper .ow-read:not(:has(>.read-empty)){background:rgba(255,255,255,.94)!important;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border-radius:0 0 10px 0!important;overflow:hidden}
/* Cuando el panel de lectura tiene mensaje, el .ow-list deja de tener redondeo a la derecha (se pega al panel) */
body.has-wallpaper .ow-read:not(:has(>.read-empty)) ~ * .ow-list,
body:has(.ow-read:not(:has(>.read-empty))) .ow-list{border-top-right-radius:0!important;border-bottom-right-radius:0!important}
}
html[data-theme="dark"] body.has-wallpaper .ow-rail{background:rgba(28,28,28,.60)!important}
html[data-theme="dark"] body.has-wallpaper .ow-folders,
html[data-theme="dark"] body.has-wallpaper .ow-list,
html[data-theme="dark"] body.has-wallpaper .ow-read:not(:has(>.read-empty)){background:rgba(28,28,28,.94)!important}
/* Modal Personalizar fondo */
.wp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap}
.wp-tab{border:none;background:none;padding:9px 13px;border-radius:8px 8px 0 0;cursor:pointer;font-size:13.5px;color:var(--muted);font-family:inherit;display:flex;align-items:center;gap:6px}
.wp-tab.active{color:var(--primary);border-bottom:2px solid var(--primary);font-weight:600}
.wp-pane{display:none}.wp-pane.active{display:block}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.wp-opt{border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.wp-opt.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.wp-opt span{background:rgba(0,0,0,.5);color:#fff;font-size:12px;padding:3px 8px;width:100%;text-align:center}
.wp-opt .wp-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:26px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.wp-colors{display:flex;gap:10px;flex-wrap:wrap}
.wp-color{width:46px;height:46px;border-radius:10px;cursor:pointer;border:2px solid transparent}
.wp-color.selected{border-color:var(--text)}
.wp-hint{font-size:12.5px;color:var(--muted);margin-bottom:10px}
/* Selector de tema con tarjetas (estilo OWA) */
.ap-theme-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.ap-theme{cursor:pointer;border:2px solid var(--border);border-radius:10px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s}
.ap-theme input{position:absolute;opacity:0;pointer-events:none}
.ap-theme.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--accent-soft)}
.ap-theme-prev{width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border-soft)}
.ap-theme-prev.light{background:#fafafa}
.ap-theme-prev.dark{background:#1e1e1e}
.ap-theme-prev.auto{background:linear-gradient(90deg,#fafafa 50%,#1e1e1e 50%)}
.ap-prev-bar{height:24%;background:rgba(0,120,212,.18)}
.ap-theme-prev.dark .ap-prev-bar{background:rgba(108,182,255,.25)}
.ap-prev-list{flex:1;background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(0,0,0,.06) 6px 7px)}
.ap-theme-prev.dark .ap-prev-list{background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(255,255,255,.08) 6px 7px)}
.ap-theme span{font-size:13.5px;font-weight:500;color:var(--text)}
/* Ajustes: campos verticales y rejilla acciones */
.set-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;font-size:13.5px;color:var(--text)}
.set-field>span{font-weight:600;font-size:13px;color:var(--text-2)}
.set-field input,.set-field select,.set-field textarea{padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:13.5px;font-family:inherit;width:100%;box-sizing:border-box;background:var(--surface);color:var(--text)}
.set-field textarea{resize:vertical;min-height:60px;font-family:ui-monospace,Consolas,monospace}
.ha-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
/* Sesiones y dispositivos */
.sess-list{display:flex;flex-direction:column;gap:8px}
.sess-card{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.sess-card.sess-current{border-color:var(--primary);background:var(--accent-soft)}
.sess-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--fg-muted)}
.sess-current .sess-icon{background:var(--primary);color:#fff}
.sess-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sess-name{font-size:14px;font-weight:600;color:var(--fg)}
.sess-badge-cur{display:inline-block;background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:.03em}
.sess-meta{font-size:12px;color:var(--fg-muted)}
.sess-meta b{color:var(--fg);font-weight:500}
.sess-meth{background:var(--surface-3,var(--bg2));border-radius:4px;padding:0 5px;font-size:11px}
.sess-actions{flex-shrink:0;display:flex;align-items:center}
.ce-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.proto-list{display:flex;flex-direction:column;gap:6px}
.proto-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.proto-badge{flex-shrink:0;font-size:11px;font-weight:700;color:#fff;padding:2px 8px;border-radius:12px;letter-spacing:.04em}
.proto-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.proto-ip{font-size:13px;font-weight:600;color:var(--fg)}
.proto-meta{font-size:11px;color:var(--fg-muted)}
/* Accesibilidad */
html.a11y-hc{filter:contrast(1.2)}
html.a11y-no-motion *{animation-duration:0.01s!important;animation-iteration-count:1!important;transition-duration:0.01s!important;scroll-behavior:auto!important}
html.a11y-no-focus *:focus{outline:none}
/* Almacenamiento: desglose web/NAS/enlaces */
.qt-total{font-size:15px;margin-bottom:8px}
.qt-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--border-soft)}
.qt-seg{display:block;height:100%}
.qt-seg.qt-web{background:#0078d4}
.qt-seg.qt-nas{background:#a78bfa}
.qt-seg.qt-tr{background:#f59e0b}
.qt-legend{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.qt-li{display:flex;align-items:center;gap:8px;font-size:13.5px}
.qt-li b{font-weight:600;color:var(--text)}
.qt-li span{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.qt-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}
.qt-dot.qt-web{background:#0078d4}
.qt-dot.qt-nas{background:#a78bfa}
.qt-dot.qt-tr{background:#f59e0b}
/* Cuando el panel de lectura está vacío y hay fondo, hacerlo transparente para que el fondo respire */
body.has-wallpaper .ow-read:has(>.read-empty){background:transparent!important;border:none!important;box-shadow:none!important}
body.has-wallpaper .ow-read:has(>.read-empty) .read-empty{display:none!important}
/* === Paridad OWA: header, app launcher, badge campana, menús === */
.ow-logo{display:flex;align-items:center;gap:2px;font-weight:700;font-size:17px;letter-spacing:-.2px;min-width:auto;padding-right:16px;color:var(--text)}
.ow-logo .ow-logo-mark{background:var(--primary);color:#fff;padding:2px 6px;border-radius:5px;font-weight:800;font-size:14px}
.ow-logo .ow-logo-name{color:var(--text)}
.notif-badge{background:#d83b01!important;color:#fff!important;border:2px solid var(--surface);font-size:10px;font-weight:700;line-height:1}
.ow-head-actions #btnFeedback{background:none;border:none;cursor:pointer;color:var(--text-2);font-size:17px;width:32px;height:32px;border-radius:6px}
.ow-head-actions #btnFeedback:hover{background:var(--hover)}
/* App launcher */
.applauncher{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 30px rgba(0,0,0,.18);padding:14px}
.al-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.al-app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:8px;text-decoration:none;color:var(--text);min-width:78px;font-size:11.5px;text-align:center}
.al-app:hover{background:var(--hover)}
.al-ic{width:36px;height:36px;border-radius:8px;background:var(--bc,#0078d4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px}
/* Menú filtros extra */
.list-filter-extra{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:4px 8px;border-radius:5px}
.list-filter-extra:hover{background:var(--hover);color:var(--primary)}
.cmenu{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:4px;min-width:170px}
.cmenu-it{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;padding:8px 12px;border-radius:5px;cursor:pointer;color:var(--text);font-family:inherit;font-size:13px;text-align:left}
.cmenu-it:hover{background:var(--hover)}
.cmenu-it i.ph{color:var(--muted)}
html[data-theme="dark"] body.has-wallpaper .ow-rail{background:rgba(28,28,28,.60)!important}
/* Cabecera de cuenta compacta estilo OWA */
.ow-folders .acct-head{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;font-size:13.5px;color:var(--text);border-radius:6px;margin-bottom:4px}
.ow-folders .acct-head:hover{background:var(--hover)}
.ow-folders .acct-chev{color:var(--muted);font-size:12px}
.ow-folders .acct-mail-compact,.ow-folders .acct-disp{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
/* Botones inline en cset Mensaje (estilo OWA: visibles en cinta principal) */
.cset .tb-attach,.cset .tb-sign,.cset .tb-imp-h,.cset .tb-imp-l,.cset .tb-dict,.cset .tb-print{background:none;border:none;cursor:pointer;padding:5px 8px;border-radius:5px;color:var(--text-2);font-size:13.5px;display:inline-flex;align-items:center;gap:5px;margin:0 2px}
.cset .tb-attach i.ph,.cset .tb-sign i.ph,.cset .tb-imp-h i.ph,.cset .tb-imp-l i.ph,.cset .tb-dict i.ph,.cset .tb-print i.ph{font-size:17px}
.cset .tb-attach{font-weight:600}
.cset .tb-b{font-weight:700}
.cset .tb-i{font-style:italic}
.cset .tb-u{text-decoration:underline}
.cset .tb-s{text-decoration:line-through}
.c-save-close{background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:4px;color:var(--muted);font-size:15px;display:inline-flex;align-items:center}
.c-save-close:hover{background:var(--hover);color:var(--text)}
.cset .tb-attach:hover,.cset .tb-sign:hover,.cset .tb-imp-h:hover,.cset .tb-imp-l:hover,.cset .tb-dict:hover,.cset .tb-print:hover{background:var(--hover);color:var(--text)}
.cset .tb-dict.active{background:#d83b01;color:#fff}
.cset .tb-imp-h{color:#d83b01}
/* Fluent UI Icons (self-host sprite, paridad visual OWA): 20x20, color #242424 como OWA */
.fui{width:20px;height:20px;display:inline-block;flex-shrink:0;vertical-align:middle;color:#242424;fill:none;stroke:none;overflow:hidden}
.fui *{fill:currentColor!important;stroke:none!important}
button .fui{margin-right:6px}.cset button .fui,.cset label .fui{margin-right:0}
/* Mismo tamaño 20x20 en ribbon y rail, como OWA */
.ow-act .fui,.ow-new .fui,.ow-head-actions .fui{width:20px;height:20px;color:#242424}
.rail-ico .fui{width:20px;height:20px;color:#424242}
.rail-ico.active .fui{color:#0078d4}
.al-ic .fui{width:22px;height:22px;color:#fff}
.ow-new .fui{color:#fff} /* botón azul Correo nuevo */
/* Tema oscuro: invertir los colores */
html[data-theme="dark"] .fui{color:#e6e6e6}
html[data-theme="dark"] .ow-act .fui,html[data-theme="dark"] .ow-head-actions .fui{color:#e6e6e6}
html[data-theme="dark"] .rail-ico .fui{color:#bdbdbd}
html[data-theme="dark"] .rail-ico.active .fui{color:#6cb6ff}
/* === OWA Pixel-match (catálogo Outlook on the web) === */
:root{
--primary:#1c7582; /* Correo nuevo teal OWA */
--primary-dark:#155a64;
--primary-light:#d6eef1;
--text:#242424; /* OWA primario */
--text-2:#424242; /* OWA secundario (tabs inactivas, hover) */
--muted:#bdbdbd; /* OWA disabled */
--border:#d1d1d1; /* OWA */
--border-soft:#ebebeb;
--hover:#f5f5f5;
--radius:4px;
}
/* Botones de toolbar (32px alto, radius 4px) */
.ow-act,.ow-new{height:36px;border-radius:4px;font-size:14px}
.ow-tools .ow-act .fui,.ow-tools .ow-new .fui{width:24px;height:24px}
.ow-tools .ow-act i.ph{font-size:22px}
.ow-new{background:var(--primary)!important}
.ow-new:hover{background:var(--primary-dark)!important}
.tb-split-caret{height:36px;border-radius:0 4px 4px 0}
/* Tabs ribbon (31px) */
.ow-tabs button{height:31px;font-size:14px;font-weight:400;color:var(--text-2)}
.ow-tabs button.active{font-weight:600;color:var(--text);border-bottom-color:var(--primary)}
/* Header botones (48x48) */
.ow-head-actions button{width:48px;height:48px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.ow-head-actions .fui{width:20px;height:20px}
.ow-header-bar{padding:0 6px}
/* Estado disabled (botones contextuales cuando no hay msg seleccionado) */
.ow-tools.no-msg .ow-act[data-act="delete"],
.ow-tools.no-msg .ow-act[data-act="archive"],
.ow-tools.no-msg .ow-act[data-act="spam"],
.ow-tools.no-msg .ow-act[data-act="move"],
.ow-tools.no-msg .ow-act[data-act="replyAll"],
.ow-tools.no-msg .ow-act[data-act="unread"],
.ow-tools.no-msg #btnFlag,
.ow-tools.no-msg .tb-split-caret{color:var(--muted)!important;cursor:default}
.ow-tools.no-msg .ow-act[data-act="delete"] .fui,
.ow-tools.no-msg .ow-act[data-act="archive"] .fui,
.ow-tools.no-msg .ow-act[data-act="spam"] .fui,
.ow-tools.no-msg .ow-act[data-act="move"] .fui,
.ow-tools.no-msg .ow-act[data-act="replyAll"] .fui,
.ow-tools.no-msg .ow-act[data-act="unread"] .fui,
.ow-tools.no-msg #btnFlag .fui{color:var(--muted)!important}
/* Paleta de color de tema (Ajustes › Apariencia) */
.ap-color-grid{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 4px}
.ap-color{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;transition:transform .12s}
.ap-color:hover{transform:scale(1.08)}
.ap-color.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.ap-color.selected:after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* Toggles de visualización en Diseño */
html.hide-avatars .msg .avatar{display:none}
html.hide-preview .msg .preview{display:none}
html.hide-att-ind .msg .att-ind,html.hide-att-ind .msg .ph-paperclip{display:none}
html.hide-date-hdr .msg-list .date-header{display:none}
/* Modal Ayuda con tabs */
.help-modal{padding:0!important}
.help-modal .modal-head{padding:14px 18px;border-bottom:1px solid var(--border)}
.help-tab:hover{background:var(--hover)}
.help-tab.active{background:var(--accent-soft);color:var(--primary);font-weight:600}
.help-content h2{font-size:18px;font-weight:600;margin-bottom:12px}
.help-content h3{font-size:14.5px;font-weight:600;margin:18px 0 8px;color:var(--text)}
.help-content ol,.help-content ul{padding-left:22px;margin:6px 0}
.help-content li{margin:4px 0}
.help-content code{background:var(--hover);padding:1px 6px;border-radius:3px;font-size:12.5px;color:var(--text)}
.help-content a{color:var(--primary);text-decoration:underline}
/* === OWA ribbon paridad: hamburguesa, espaciados, bandera roja, layouts === */
.ow-hamb{width:40px;height:40px;border:none;background:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#242424;flex-shrink:0;margin:0 4px}
.ow-hamb:hover{background:rgba(0,0,0,.06)}
.ow-hamb .fui{width:18px;height:18px}
/* Wiring JS lo añade — toggle de visibilidad de .ow-folders + .ow-rail */
body.hide-nav .ow-folders{display:none!important}
body.hide-nav .ow-body{grid-template-columns:1fr 1fr}
/* Bandera roja en btnFlag */
#btnFlag .fui{color:#c50f1f}
/* Overflow del toolbar: botones colapsados en "…" */
[data-ow-hidden]{display:none!important}
/* Separadores .ow-sep más anchos para OWA-feel */
.ow-tools .ow-sep{width:1px;height:22px;background:rgba(0,0,0,.12);margin:0 6px;flex-shrink:0}
/* "Correo nuevo" — color del tema (configurable desde Ajustes › General › Tema) */
.ow-new{background:var(--primary);color:#fff}
.ow-new:hover{background:var(--primary-dark)}
/* Botones .ow-act estilo OWA: hover sutil, sin background normal */
.ow-act{background:none;border:none;border-radius:4px;padding:0 8px;color:#242424;font-size:14px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;height:36px}
.ow-act:hover{background:rgba(0,0,0,.06);color:var(--primary)}
.ow-act .fui{color:#242424}
.ow-act.on .fui,.ow-act.active .fui{color:var(--primary)}
.ow-act.on,.ow-act.active{background:var(--accent-soft)!important;color:var(--primary)}
/* hover en azul con !important para ganar al color base */
.ow-act:hover .fui{color:var(--primary)!important}
/* eliminar siempre en rojo */
.ow-act[data-act="delete"] .fui{color:#c50f1f!important}
.ow-act[data-act="delete"]:hover .fui{color:#c50f1f!important}
@keyframes readSlideRight{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes readSlideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.ow-body:not(.rp-bottom) #read.animate-in{animation:readSlideRight .18s ease-out}
.ow-body.rp-bottom #read.animate-in{animation:readSlideDown .18s ease-out}
/* ===== WALLPAPER: capa degradada header→transparente que cubre header+rail ===== */
body.has-wallpaper #app{position:relative}
body.has-wallpaper #app::before{
content:'';position:absolute;top:0;left:0;right:0;height:100vh;
background:linear-gradient(to bottom,rgba(255,255,255,.55) 0px,rgba(255,255,255,.55) 90px,transparent 100%);
backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
mask-image:linear-gradient(to bottom,black 90px,transparent 100%);
-webkit-mask-image:linear-gradient(to bottom,black 90px,transparent 100%);
pointer-events:none;z-index:1}
body.has-wallpaper .ow-header{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:none!important;border-radius:0!important;z-index:15!important}
body.has-wallpaper .ow-rail{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;position:relative;z-index:15!important}
body.has-wallpaper .ow-body{position:relative;z-index:5}
html[data-theme="dark"] body.has-wallpaper #app::before{background:linear-gradient(to bottom,rgba(28,28,28,.55) 0px,rgba(28,28,28,.55) 90px,transparent 100%)}
/* Ajustes Apariencia — subtítulos de grupo */
.ap-grp-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0 0 10px}
.ap-divider{border:none;border-top:1px solid var(--border);margin:20px 0}
/* Móvil: sin fondos animados ni transparencias */
@media (max-width: 899px) {
#fondoVideo, .bg-blur { display:none!important }
body.has-wallpaper,
body.has-wallpaper #app,
body.has-wallpaper .ow-body { background:var(--bg)!important }
body.has-wallpaper #app::before { display:none!important }
body.has-wallpaper .ow-list,
body.has-wallpaper .ow-read,
body.has-wallpaper .ow-rail,
body.has-wallpaper .ow-folders { background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important }
body.has-wallpaper .ow-read:has(>.read-empty) { display:block!important }
body.has-wallpaper .ow-read:has(>.read-empty) .read-empty { display:flex!important }
}
/* Carpeta Suscripciones — icono y color diferenciador */
.folder[data-special="subscriptions"] .ico,
.folder[data-special="subscriptions"] .fname { color:#7c3aed }
.folder[data-special="subscriptions"].active { background:rgba(124,58,237,.10)!important }
.folder[data-special="subscriptions"].active .ico,
.folder[data-special="subscriptions"].active .fname { color:#7c3aed!important }
/* ── Mi perfil en barra lateral de contactos ────────────────────────────────── */
.cv-myprofile{padding:8px 6px 4px}
.cv-myp-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:0 6px 4px}
.cv-myprofile .c-card{grid-template-columns:1fr auto;border-radius:8px;border:1px solid var(--border);background:var(--surface);padding:8px 10px}
.cv-myprofile .c-card .cr-contact{display:none}
.cv-myprofile .c-card .c-name{font-size:13px;font-weight:600}
.cv-side-sep{border:none;border-top:1px solid var(--border);margin:6px 10px}
/* ── Agrupado por empresa ────────────────────────────────────────────────────── */
.cv-org-group{margin-bottom:18px}
.cv-org-head{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--border);border-top:1px solid var(--border)}
.cv-org-head i{font-size:14px}
.cv-btn.active{background:var(--accent-soft);color:var(--primary);border-color:var(--primary)}
/* ── Contactos: adaptación móvil ─────────────────────────────────────────────── */
@media (max-width:640px){
/* sidebar → franja horizontal con pills */
.cv-layout{flex-direction:column}
.cv-side{flex:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid var(--border);padding:6px 8px;gap:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cv-side::-webkit-scrollbar{display:none}
.cv-myprofile{display:none} /* ocultar tarjeta propia en móvil (acceso por menú usuario) */
.cv-side-sep{display:none}
.cv-cat{white-space:nowrap;width:auto;padding:6px 10px;flex-shrink:0}
.cv-main{padding:4px 6px 60px}
.cv-collist-head{display:none}
/* tarjeta: ocultar columna de info (email/tel), solo nombre + acciones */
.c-card{grid-template-columns:1fr auto;gap:6px;padding:8px 10px}
.c-card .cr-contact{display:none}
/* cabecera */
.cv-head{padding:6px 10px;gap:4px}
.cv-head h2{font-size:14px}
.cv-actions .cv-btn span{display:none}
.cv-actions .cv-btn{padding:6px 8px}
.cv-actions .cv-view-toggle button{padding:6px 8px}
/* modal ficha de contacto */
.cview{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
.cview-head{padding:14px 14px 10px;gap:10px}
.cview-av{width:54px!important;height:54px!important;font-size:20px!important}
.cview-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.cview-tabs::-webkit-scrollbar{display:none}
}
/* ── Buscador de contactos ───────────────────────────────────────────────────── */
.cv-search-wrap{display:flex;align-items:center;gap:7px;flex:1;max-width:320px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;margin:0 6px}
.cv-search-wrap i.ph{color:var(--muted);font-size:15px;flex-shrink:0}
.cv-search-wrap input{border:none;background:none;outline:none;font-size:13.5px;color:var(--text);width:100%;font-family:inherit}
.cv-search-wrap input::placeholder{color:var(--muted)}
.cv-search-wrap:focus-within{border-color:var(--primary);background:var(--surface)}
@media (max-width:640px){
.cv-search-wrap{max-width:none;flex:1;margin:0;order:-1;width:100%}
.cv-head{flex-wrap:wrap;row-gap:6px}
.cv-search-wrap{order:10;flex-basis:100%}
}
/* ── Resultados búsqueda calendario ─────────────────────────────────────────── */
.cal-search-results{display:flex;flex-direction:column;gap:2px;padding:8px}
.cal-sr-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.cal-sr-row:hover{background:var(--hover);border-color:var(--border)}
.cal-sr-body{flex:1;min-width:0;font-size:13.5px}
.cal-sr-loc{font-size:12px;color:var(--muted);margin-left:8px}
.cal-sr-loc i{font-size:13px;vertical-align:-1px}
.cal-sr-dt{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0}
/* ── Suscripciones: sort + expand + preview ─────────────────────────────────── */
.subs-sort-bar{display:flex;align-items:center;gap:6px;padding:6px 0 10px;flex-wrap:wrap}
.subs-sort-lbl{font-size:12px;color:var(--muted);font-weight:600}
.subs-sort-btn.active{background:var(--accent-soft)!important;color:var(--primary)!important;border-color:var(--primary)!important}
.subs-main-row{display:flex;align-items:center;gap:8px;width:100%}
.subs-expand-btn{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:4px;display:flex;align-items:center}
.subs-expand-btn:hover{background:var(--hover);color:var(--text)}
.subs-expand-btn i{font-size:13px;transition:transform .15s}
.subs-preview{padding:6px 8px 6px 32px;border-top:1px solid var(--border);margin-top:4px}
.subs-msg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.subs-msg-item{display:flex;align-items:baseline;gap:10px;font-size:12.5px;padding:3px 4px;border-radius:4px}
.subs-msg-item:hover{background:var(--hover)}
.subs-msg-item.unseen .subs-msg-subj{font-weight:600}
.subs-msg-date{flex-shrink:0;color:var(--muted);font-size:11.5px;width:90px}
.subs-msg-subj{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
/* ===== Ribbon: modos de etiqueta (labels) ===== */
/* Por defecto: etiquetas siempre visibles (ribbon-labels-always) */
.ow-lbl{display:inline}
/* Solo en hover */
body.ribbon-labels-hover .ow-lbl{display:none}
body.ribbon-labels-hover .ow-act:hover .ow-lbl,
body.ribbon-labels-hover .ow-tools .ow-new:hover .ow-lbl{display:inline}
/* Nunca (solo iconos) */
body.ribbon-labels-none .ow-lbl{display:none!important}
/* Sin etiqueta: quitar margen del icono con texto */
body.ribbon-labels-none .ow-act:not(.ow-icon-only) .fui,
body.ribbon-labels-none .ow-act:not(.ow-icon-only) i.ph,
body.ribbon-labels-none .ow-tools .ow-new .fui{margin-right:0}
body.ribbon-labels-hover .ow-act:not(:hover) .fui,
body.ribbon-labels-hover .ow-act:not(:hover) i.ph,
body.ribbon-labels-hover .ow-tools .ow-new:not(:hover) .fui{margin-right:0}
body.ribbon-labels-hover .ow-act:hover .fui,
body.ribbon-labels-hover .ow-act:hover i.ph,
body.ribbon-labels-hover .ow-tools .ow-new:hover .fui{margin-right:6px}
/* ===== Ribbon: tamaños ===== */
/* Compacto */
body.ribbon-size-compact .ow-tools{align-items:center;min-height:34px}
body.ribbon-size-compact .ow-act{height:24px;font-size:12px;padding:0 6px;gap:4px}
body.ribbon-size-compact .ow-tools .ow-new{height:26px;font-size:12px;padding:0 10px}
body.ribbon-size-compact .ow-tools .fui{width:16px!important;height:16px!important}
body.ribbon-size-compact .tb-split-caret{min-height:24px;padding:0 3px}
body.ribbon-size-compact .tb-split-caret .fui{width:12px!important;height:12px!important}
body.ribbon-size-compact .ow-tools .ow-sep{height:16px}
/* Normal — ya definido en .ow-act base */
/* ====== Grupos eliminados — neutralizar restos de prefs antiguas ====== */
.ow-group{display:contents}
.ow-group-lbl{display:none}
.ow-group-btns{display:contents}
/* Icon-only: sin texto en normal, con texto en grande */
.ow-act.ow-icon-only .ow-lbl{display:none}
/* ====== MODO GRANDE (sin grupos): icono arriba, texto abajo ====== */
body.ribbon-size-large .ow-ribbon{min-height:84px}
body.ribbon-size-large .ow-tools{align-items:stretch;height:72px;padding:4px 6px;gap:2px}
body.ribbon-size-large .ow-tools>.ow-sep{width:1px;height:auto;align-self:stretch;margin:6px 6px}
body.ribbon-size-large .ow-act:not(.ow-icon-only),
body.ribbon-size-large .ow-tools .ow-new{flex-direction:column;justify-content:center;align-self:stretch;height:auto;padding:6px 12px 4px;gap:4px;font-size:11px;min-width:52px}
body.ribbon-size-large .ow-act .fui,
body.ribbon-size-large .ow-tools .ow-new .fui{width:26px!important;height:26px!important}
body.ribbon-size-large .ow-act i.ph,
body.ribbon-size-large .ow-tools .ow-new i.ph{font-size:26px!important}
body.ribbon-size-large .ow-act .ow-lbl,
body.ribbon-size-large .ow-new .ow-lbl,
body.ribbon-size-large .ow-icon-only .ow-lbl{display:block!important;text-align:center;line-height:1.15;white-space:nowrap}
/* Split-button en grande: caret en franja horizontal debajo */
body.ribbon-size-large .tb-split-btn{flex-direction:column;align-self:stretch;height:auto}
body.ribbon-size-large .tb-split-btn .ow-act{flex:1;border-radius:4px 4px 0 0}
body.ribbon-size-large .tb-split-caret{height:auto!important;min-height:0!important;border-top:1px solid var(--border);width:100%;padding:2px 0;justify-content:center;border-radius:0 0 4px 4px;flex-shrink:0}
body.ribbon-size-large .tb-split-caret .fui{width:12px!important;height:12px!important}
/* Icon-only en grande: icono + texto en columna */
body.ribbon-size-large .ow-act.ow-icon-only{align-self:stretch;width:auto;min-width:48px;height:auto;flex-direction:column;justify-content:center;padding:6px 8px 4px;gap:4px;font-size:11px}
body.ribbon-size-large .ow-act.ow-icon-only .fui{width:24px!important;height:24px!important}
body.ribbon-size-large .ow-act.ow-icon-only i.ph{font-size:24px!important}
/* Ribbon collapse: ocultar SOLO los toolsets; el botón toggle (absolute) queda
visible en una barrita fina para poder volver a expandir. */
body.ribbon-collapsed .ow-tools > .toolset{display:none!important}
body.ribbon-collapsed .ow-tools{min-height:0;height:20px;padding-bottom:2px;overflow:visible}
body.ribbon-collapsed .ow-ribbon{min-height:0}
/* Botón toggle del ribbon */
.ow-ribbon-toggle{margin-left:auto;background:none;border:none;cursor:pointer;padding:2px 8px;color:var(--text-2);font-size:11px;align-self:flex-end;border-radius:4px}
.ow-ribbon-toggle:hover{background:var(--hover);color:var(--primary)}
.ow-ribbon-toggle .fui{width:12px!important;height:12px!important}
/* Ribbon toggle button position */
.ow-ribbon{display:flex;flex-direction:column;position:relative}
.ow-tabsrow{display:flex;align-items:center}
.ow-tools{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;flex:1;padding:0 5px;gap:2px;min-height:45px;position:relative}
#btnRibbonToggle{position:absolute;right:4px;bottom:2px;z-index:2}
body.ribbon-collapsed #btnRibbonToggle svg use{/* chevron apuntando arriba */}
/* Botón oculto por JS para ribbons: ow-btn-hidden */
.ow-btn-hidden{display:none!important}
/* Ribbon customize dialog */
.ribbon-dlg{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4)}
.ribbon-dlg-box{background:var(--surface);border-radius:12px;width:min(760px,96vw);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.ribbon-dlg-hd{padding:20px 24px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.ribbon-dlg-title{font-size:16px;font-weight:600;flex:1}
.ribbon-dlg-body{overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}
.ribbon-dlg-preview{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;overflow-x:auto;white-space:nowrap;min-height:48px;display:flex;align-items:center;gap:2px}
.ribbon-dlg-section-hd{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--text-2)}
.ribbon-opts-row{display:flex;gap:8px;flex-wrap:wrap}
.ribbon-opt-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1.5px solid var(--border);border-radius:20px;cursor:pointer;font-size:13px;background:var(--surface);transition:border-color .15s,background .15s}
.ribbon-opt-chip:hover{border-color:var(--primary)}
.ribbon-opt-chip.selected{border-color:var(--primary);background:var(--accent-soft);color:var(--primary);font-weight:500}
.ribbon-btn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.ribbon-btn-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:var(--surface);transition:background .1s}
.ribbon-btn-row:hover{background:var(--hover)}
.ribbon-btn-row input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;flex-shrink:0}
.ribbon-btn-row .fui,.ribbon-btn-row i.ph{width:18px;height:18px;flex-shrink:0;color:var(--text-2)}
.ribbon-btn-row span{font-size:13px;flex:1}
.ribbon-dlg-ft{padding:12px 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
/* ===== Ribbon: botones fijos a la derecha (Personalizar, Más) ===== */
.ow-tools-fixed{display:inline-flex;align-items:center;gap:2px;margin-left:auto;align-self:center}
body.ribbon-size-large .ow-tools-fixed{align-self:center}
.ow-fixed-btn .ow-lbl{display:none!important}
/* ===== Modal Personalizar (estilo OWA) ===== */
.rc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
.rc-modal{background:var(--surface,#fff);width:min(1180px,96vw);max-height:92vh;border-radius:10px;box-shadow:0 12px 48px rgba(0,0,0,.32);display:flex;flex-direction:column;overflow:hidden}
.rc-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 8px}
.rc-title{font-size:20px;font-weight:600;color:var(--text)}
.rc-x{background:none;border:none;cursor:pointer;font-size:20px;color:var(--muted);padding:4px 8px;border-radius:6px;line-height:1}
.rc-x:hover{background:rgba(0,0,0,.06);color:var(--text)}
.rc-body{padding:8px 24px 16px;overflow-y:auto;flex:1}
.rc-row-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px}
.rc-body h3{font-size:15px;font-weight:600;color:var(--text);margin:0}
.rc-sec{margin:22px 0 10px!important}
.rc-hint{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px}
.rc-selects{display:flex;gap:8px}
.rc-select{border:1px solid var(--border);border-radius:6px;padding:7px 12px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--text);cursor:pointer}
/* Vista previa */
.rc-preview{display:flex;gap:10px;flex-wrap:wrap;border:1px solid var(--border);border-radius:8px;padding:14px 12px;background:var(--surface-2,#faf9f8);min-height:84px;align-items:flex-start}
.rc-pv-group{display:flex;flex-direction:column;align-items:center;gap:6px}
.rc-pv-btns{display:flex;gap:8px}
.rc-pv-empty .rc-pv-btns{min-width:150px;min-height:46px;border:1px dashed var(--border);border-radius:8px}
.rc-pv-btn{position:relative;display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:8px;padding:10px 14px;background:var(--surface);font-size:13px;color:var(--text);white-space:nowrap}
.rc-pv-btn .fui{width:18px;height:18px}
.rc-pv-btn i.ph{font-size:18px}
.rc-pv-x{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rc-pv-x:hover{background:#c50f1f;color:#fff;border-color:#c50f1f}
.rc-pv-glbl{font-size:11px;color:var(--muted);text-align:center}
/* Grids de tarjetas */
.rc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.rc-grid{grid-template-columns:repeat(2,1fr)}}
.rc-card{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:8px;padding:13px 14px;background:var(--surface);cursor:grab;user-select:none}
.rc-card:hover{border-color:var(--primary)}
.rc-card.rc-dragging{opacity:.45;border-style:dashed}
.rc-handle{color:var(--muted);font-size:16px;cursor:grab;letter-spacing:-2px}
.rc-card .fui{width:18px;height:18px;color:var(--text)}
.rc-card i.ph{font-size:18px;color:var(--text)}
.rc-card-lbl{flex:1;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Checkbox estilo OWA */
.rc-chk{position:relative;display:inline-flex;cursor:pointer}
.rc-chk input{position:absolute;opacity:0;width:0;height:0}
.rc-chk-box{width:20px;height:20px;border:1.5px solid var(--muted);border-radius:4px;display:inline-block;position:relative;transition:.12s}
.rc-chk input:checked+.rc-chk-box{background:var(--primary);border-color:var(--primary)}
.rc-chk input:checked+.rc-chk-box::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Footer */
.rc-ft{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-top:1px solid var(--border)}
.rc-ft-actions{display:flex;gap:10px}
.rc-reset{background:none;border:1px solid var(--border);border-radius:6px;padding:9px 16px;font-size:13px;font-family:inherit;color:var(--text);cursor:pointer}
.rc-reset:hover{background:rgba(0,0,0,.05)}
.rc-cancel{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:9px 20px;font-size:13px;font-family:inherit;color:var(--text);cursor:pointer}
.rc-cancel:hover{background:rgba(0,0,0,.05)}
.rc-save{background:var(--primary);border:1px solid var(--primary);border-radius:6px;padding:9px 22px;font-size:13px;font-family:inherit;color:#fff;cursor:pointer;font-weight:600}
.rc-save:hover{filter:brightness(.93)}
/* ===== Botón deshabilitado en ribbon (p.ej. Auditoría fuera de Enviados) ===== */
.ow-act.ow-disabled,.tb-split-btn.ow-disabled,.ow-new.ow-disabled{opacity:.4;pointer-events:none;cursor:default}
/* ===== Quitar submenú de un split-button ===== */
.tb-split-btn.tb-no-submenu .tb-split-caret{display:none!important}
.tb-split-btn.tb-no-submenu > .ow-act{border-radius:4px!important}
/* ===== Modal: controles de submenú en tarjetas de botón ===== */
.rc-card-has-sub{flex-direction:column;align-items:stretch;gap:8px}
.rc-card-main{display:flex;align-items:center;gap:10px;width:100%}
.rc-card-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0 0 26px;border-top:1px dashed var(--border)}
.rc-sub-ctl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.rc-sub-primary{border:1px solid var(--border);border-radius:5px;padding:3px 6px;font-size:12px;font-family:inherit;background:var(--surface);color:var(--text);cursor:pointer}
.rc-sub-toggle input{cursor:pointer}
/* Caret en la vista previa */
.rc-pv-caret{color:var(--muted);font-size:11px;margin-left:-2px}
/* ===== Espaciadores del ribbon (macOS) ===== */
.ow-spacer{display:inline-block;width:24px;flex:0 0 24px}
.ow-flex-spacer{flex:1 1 auto;min-width:8px}
body.ribbon-size-large .ow-spacer{align-self:stretch}
body.ribbon-size-large .ow-flex-spacer{align-self:stretch}
/* ===== Control de Zoom en el ribbon ===== */
.ow-zoom{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:6px;padding:1px;flex-shrink:0}
.ow-zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:none;cursor:pointer;color:var(--text);border-radius:4px;font-family:inherit}
.ow-zoom-btn:hover{background:rgba(0,0,0,.06);color:var(--primary)}
.ow-zoom-btn i.ph{font-size:14px}
.ow-zoom-lbl{font-size:11px;color:var(--muted);min-width:34px;text-align:center;user-select:none}
body.ribbon-size-large .ow-zoom{align-self:center}
/* ===== Modal Personalizar: barra editable + disponibles ===== */
.rc-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--surface-2,#faf9f8);min-height:64px}
.rc-bar-item{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface);font-size:13px;color:var(--text);cursor:grab;position:relative;white-space:nowrap}
.rc-bar-item.rc-dragging{opacity:.4;border-style:dashed}
.rc-bar-item .fui{width:18px;height:18px}
.rc-bar-item i.ph{font-size:18px}
.rc-bar-item .rc-handle{color:var(--muted);font-size:14px;letter-spacing:-2px}
.rc-bar-item .rc-pv-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.rc-bar-item .rc-pv-x:hover{background:#c50f1f;color:#fff;border-color:#c50f1f}
/* Tipos especiales en la barra */
.rc-type-sep{background:repeating-linear-gradient(90deg,var(--surface),var(--surface) 3px,var(--border) 3px,var(--border) 4px);color:var(--muted)}
.rc-type-space,.rc-type-flex{border-style:dashed;color:var(--muted)}
.rc-extra-lbl{font-style:italic}
/* Disponibles */
.rc-avail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:900px){.rc-avail{grid-template-columns:repeat(2,1fr)}}
.rc-avail-item{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:9px 11px;background:var(--surface);font-size:13px;color:var(--text);cursor:pointer}
.rc-avail-item:hover{border-color:var(--primary);background:var(--accent-soft,rgba(0,0,0,.03))}
.rc-avail-item .fui{width:18px;height:18px}
.rc-avail-item i.ph{font-size:18px}
.rc-avail-item .rc-card-lbl{flex:1}
.rc-avail-item .rc-add{color:var(--primary);font-size:16px;font-weight:600}
.rc-avail-extra{border-style:dashed}
/* Submenús */
.rc-sub-grid{display:flex;flex-direction:column;gap:8px}
.rc-sub-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--border);border-radius:8px;padding:9px 12px;background:var(--surface)}
.rc-sub-name{font-weight:600;font-size:13px;min-width:130px}
.rc-sub-ctl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.rc-sub-primary{border:1px solid var(--border);border-radius:5px;padding:3px 6px;font-size:12px;font-family:inherit;background:var(--surface);color:var(--text);cursor:pointer}
.rc-pv-caret{color:var(--muted);font-size:11px}
/* Split-button: botón y caret a la misma altura */
.ow-tools .tb-split-btn{height:36px}
.ow-tools .tb-split-btn>.ow-act,.ow-tools .tb-split-caret{height:36px}
/* Separadores/espacios compactos en la barra editable del personalizador */
.rc-bar-mini{padding:8px 8px;min-width:0;gap:0;justify-content:center}
.rc-mini-sep{display:inline-block;width:2px;height:20px;background:var(--muted);border-radius:1px;opacity:.6}
.rc-mini-space{display:inline-block;width:16px;height:18px;border:1px dashed var(--muted);border-radius:3px;opacity:.6}
.rc-bar-mini i.ph{font-size:18px;color:var(--muted)}
/* Indicador de inserción del drag (estable, no reordena en vivo) */
.rc-drop-before{box-shadow:inset 3px 0 0 var(--primary)}
.rc-drop-after{box-shadow:inset -3px 0 0 var(--primary)}
.rc-bar-item{transition:box-shadow .08s}
/* Texto por botón (sobrescribe la opción global de etiquetas) */
.ow-no-label .ow-lbl{display:none!important}
.ow-force-label .ow-lbl{display:inline-block!important}
body.ribbon-labels-none .ow-force-label .ow-lbl,
body.ribbon-labels-hover .ow-force-label .ow-lbl{display:inline-block!important}
body.ribbon-size-large .ow-no-label .ow-lbl{display:none!important}
/* Toggle Aa por botón en el personalizador */
.rc-txt-toggle{font-size:11px;font-weight:600;width:26px;height:20px;border-radius:4px;cursor:pointer;line-height:1;flex-shrink:0}
.rc-txt-toggle.rc-txt-auto{background:var(--surface);color:var(--muted);border:1px dashed var(--border)}
.rc-txt-toggle.rc-txt-on{background:var(--primary);color:#fff;border:1px solid var(--primary)}
.rc-txt-toggle.rc-txt-off{background:var(--surface);color:#c0c0c0;border:1px solid var(--border);text-decoration:line-through}
.rc-txt-toggle:hover{filter:brightness(.95);outline:1px solid var(--primary)}
/* ===== Editor de reglas avanzado (Ajustes) ===== */
.fl-rule{border:1px solid var(--border);border-radius:10px;padding:0;margin:10px 0;background:var(--surface);overflow:hidden}
.fl-rule-hd{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-2,#faf9f8);border-bottom:1px solid var(--border)}
.fl-name{flex:1;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px;font-family:inherit;font-weight:600;background:var(--surface);color:var(--text)}
.fl-del-rule{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px 6px;border-radius:5px}
.fl-del-rule:hover{background:rgba(197,15,31,.1);color:#c50f1f}
/* Toggle activar */
.fl-en-wrap{position:relative;display:inline-flex;cursor:pointer;flex-shrink:0}
.fl-en-wrap input{position:absolute;opacity:0;width:0;height:0}
.fl-en-sw{width:34px;height:18px;border-radius:10px;background:#ccc;position:relative;transition:.15s}
.fl-en-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.fl-en-wrap input:checked+.fl-en-sw{background:var(--primary)}
.fl-en-wrap input:checked+.fl-en-sw::after{transform:translateX(16px)}
.fl-rule-body{padding:10px 12px}
.fl-rule:has(.fl-en:not(:checked)) .fl-rule-body{opacity:.5}
.fl-line{display:flex;align-items:center;gap:8px;margin:6px 0 4px;flex-wrap:wrap}
.fl-lbl{font-size:12px;color:var(--muted)}
.fl-match{border:1px solid var(--border);border-radius:6px;padding:3px 6px;font-size:12px;font-weight:600;font-family:inherit;background:var(--surface);color:var(--text)}
.fl-conds,.fl-acts{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px}
.fl-cond,.fl-act-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fl-cond select,.fl-act-row select,.fl-cond input,.fl-act-row input{border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--text)}
.fl-cond .fl-val,.fl-act-row .fl-arg-email,.fl-act-row .fl-arg-msg{flex:1;min-width:120px}
.fl-cond .fl-hdr{width:120px}
.fl-del-cond,.fl-del-act{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px 6px;border-radius:5px;flex-shrink:0}
.fl-del-cond:hover,.fl-del-act:hover{background:rgba(0,0,0,.06);color:var(--text)}
.fl-add-cond,.fl-add-act{margin:2px 0 8px}
.fl-stop-wrap{margin-top:8px;font-size:12px}
/* ===== Sección Uso: contadores de mensajes ===== */
.usage-subh{font-size:13px;font-weight:600;color:var(--text);margin:0 0 4px;display:flex;align-items:center;gap:6px}
/* 29/07/26 - Sub-encabezado dentro de una seccion de ajustes (p.ej. Correo > Lectura y envio).
Copia el H5 que usa la app de escritorio para agrupar sin partir la seccion en varias. */
.set-subh{font-size:13px;font-weight:600;color:var(--text);margin:14px 0 4px}
.set-sec .set-subh:first-of-type{margin-top:2px}
/* Hueco final para que la ultima seccion tambien pueda quedarse arriba al pulsarla en el indice. */
.cfg-spacer{flex:0 0 auto}
.usage-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 12px}
.usage-tab{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:16px;padding:5px 14px;font-size:13px;font-family:inherit;cursor:pointer}
.usage-tab:hover{border-color:var(--primary)}
.usage-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.usage-day-lbl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-left:4px}
.usage-day-lbl input{border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-family:inherit;font-size:13px;background:var(--surface);color:var(--text)}
.usage-counts{min-height:64px}
.usage-cards{display:flex;gap:12px;flex-wrap:wrap}
.usage-card{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;padding:14px 20px;background:var(--surface-2,#faf9f8);min-width:150px}
.usage-card i.ph{font-size:26px;color:var(--primary)}
.usage-card b{font-size:24px;font-weight:700;color:var(--text);display:block;line-height:1.1}
.usage-card span{font-size:12px;color:var(--muted)}
.usage-period{margin-top:8px;font-size:12px;color:var(--muted)}
/* Panel de ajustes embebido en la versión móvil: ocultar Diseño (color de realce va nativo en móvil) */
body.ne-embed .set-navi[data-s="dise\00f1o"]{display:none!important}
body.ne-embed .cfg-nav{padding-top:env(safe-area-inset-top)}
/* ===== Contraste automatico de iconos segun el wallpaper (rail + barra superior) ===== */
/* Fondo OSCURO -> iconos claros */
#app.wp-dark .ow-rail .rail-ico:not(.active),
#app.wp-dark .ow-rail .rail-ico:not(.active) .fui,
#app.wp-dark .ow-header-bar .ow-head-actions>button,
#app.wp-dark .ow-header-bar .ow-head-actions .fui,
#app.wp-dark .ow-header-bar #btnFeedback,
#app.wp-dark .ow-header-bar .mob-hamb,
#app.wp-dark .ow-header-bar .adv-search-btn,
#app.wp-dark .ow-header-bar .ow-search>i.ph{color:#eef1f4!important;}
#app.wp-dark .ow-rail .rail-ico,
#app.wp-dark .ow-header-bar .ow-head-actions>button,
#app.wp-dark .ow-header-bar .mob-hamb{text-shadow:0 1px 2px rgba(0,0,0,.55);}
#app.wp-dark .ow-rail .rail-ico .fui,
#app.wp-dark .ow-header-bar .ow-head-actions .fui{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5));}
/* Fondo CLARO -> iconos oscuros */
#app.wp-light .ow-rail .rail-ico:not(.active),
#app.wp-light .ow-rail .rail-ico:not(.active) .fui,
#app.wp-light .ow-header-bar .ow-head-actions>button,
#app.wp-light .ow-header-bar .ow-head-actions .fui,
#app.wp-light .ow-header-bar #btnFeedback,
#app.wp-light .ow-header-bar .mob-hamb,
#app.wp-light .ow-header-bar .adv-search-btn,
#app.wp-light .ow-header-bar .ow-search>i.ph{color:#20242a!important;}
#app.wp-light .ow-rail .rail-ico,
#app.wp-light .ow-header-bar .ow-head-actions>button,
#app.wp-light .ow-header-bar .mob-hamb{text-shadow:0 1px 2px rgba(255,255,255,.6);}
#app.wp-light .ow-rail .rail-ico .fui,
#app.wp-light .ow-header-bar .ow-head-actions .fui{filter:drop-shadow(0 1px 1.5px rgba(255,255,255,.6));}
/* Botones de ventana integrados (solo app escritorio) tambien adaptativos al wallpaper */
#app.wp-dark .ow-header-bar .ne-win-btns button{color:#eef1f4!important;text-shadow:0 1px 2px rgba(0,0,0,.55);}
#app.wp-light .ow-header-bar .ne-win-btns button{color:#20242a!important;text-shadow:0 1px 2px rgba(255,255,255,.6);}
/* ===== Borde inferior flotante: hueco que deja ver el fondo + esquinas inferiores redondeadas (como arriba) ===== */
body.has-wallpaper .ow-body{padding-bottom:10px}
body.has-wallpaper .ow-folders{border-bottom-left-radius:10px}
/* sin panel de lectura (rp-off): la lista de correos es la columna DERECHA -> esquina inf-dcha */
body.has-wallpaper .ow-body.rp-off .ow-list{border-bottom-right-radius:10px!important}
/* carpetas ocultas (hide-nav): la lista de correos es la columna IZQUIERDA -> esquina inf-izq */
body.has-wallpaper.hide-nav .ow-list{border-bottom-left-radius:10px!important}
/* ===== Barra de herramientas (ribbon): 3 arreglos 09/07 ===== */
/* 1) Tamaño GRANDE: la flecha del desplegable a la DERECHA (no debajo) → todos los
botones con la misma altura y los iconos alineados. */
body.ribbon-size-large .tb-split-btn{flex-direction:row!important;align-self:stretch;height:auto;flex-shrink:0}
body.ribbon-size-large .tb-split-btn>.ow-act{flex:0 0 auto;border-radius:4px 0 0 4px;overflow:visible;white-space:nowrap}
body.ribbon-size-large .tb-split-btn>.ow-act .ow-lbl{white-space:nowrap}
body.ribbon-size-large .tb-split-caret{height:auto;align-items:center;border-radius:0 4px 4px 0;padding:0 5px;flex-shrink:0}
/* 2) NUNCA scroll horizontal: lo que no cabe va al menu "..." (ya hay measureOverflow +
[data-ow-hidden]); overflow oculto en vez de auto, en cualquier tamano. */
.ow-tools .toolset{overflow:hidden!important}
/* 3) Etiquetas solo-al-pasar-el-raton (tamano mediano): mostrar como tooltip flotante
(absoluto) para que NO cambien el ancho del boton → no mueve la barra ni saca scroll. */
body.ribbon-labels-hover .ow-act{position:relative}
body.ribbon-labels-hover .ow-act:hover .ow-lbl{
display:inline-block!important;position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);
background:var(--surface,#fff);color:var(--text);padding:2px 8px;border-radius:5px;white-space:nowrap;
font-size:11px;box-shadow:0 2px 10px rgba(0,0,0,.2);z-index:60;pointer-events:none}
/* FIX 10/07: el bloque fijo del ribbon (··· / Personalizar) anclado en absoluto a la
derecha — un desbordamiento ya no puede empujarlo fuera de pantalla (pasaba en
tamano grande). Fondo del propio tools para tapar lo que quede debajo. */
.ow-tools{position:relative}
.ow-tools .ow-tools-fixed{position:absolute;right:4px;top:50%;transform:translateY(-50%);margin-left:0;background:var(--surface);padding-left:6px;z-index:3}
html[data-theme="dark"] .ow-tools .ow-tools-fixed{background:var(--surface-2)}
/* Selector de tamaño de imágenes al enviar (estilo Apple) */
.imgsz-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:background .12s}
.imgsz-opt:hover{background:var(--hover)}
.imgsz-opt:has(input:checked){border-color:var(--primary);background:var(--accent-soft)}
.imgsz-l{flex:1;font-size:14px;color:var(--text)}
.imgsz-w{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Aviso al cerrar ventana Pa Luego */
.mwclose-ov{position:fixed;inset:0;z-index:9400;background:rgba(20,30,50,.45);display:flex;align-items:center;justify-content:center}
.mwclose-box{background:var(--surface);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.32);width:440px;max-width:92vw;padding:22px}
.mwclose-t{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.mwclose-t i{color:var(--primary)}
.mwclose-p{font-size:13.5px;color:var(--text-2);margin:10px 0 18px;line-height:1.45}
.mwclose-btns{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* ··· de opciones de carpeta al pasar el ratón (como Outlook) */
.folder .fmore{display:none;margin-left:auto;width:22px;height:22px;border-radius:5px;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0;cursor:pointer}
.folder:hover .fmore{display:flex}
.folder .fmore:hover{background:var(--hover)}
.folder:hover .count{display:none}
.folder .count{margin-left:auto}
.ctx-hdr{padding:7px 14px;font-size:12px;color:var(--muted);font-weight:600}
/* Cabecera del mensaje: iconos de respuesta a la derecha, a la altura del remitente, con la fecha debajo */
.read-quick{margin-left:auto;text-align:right;align-self:flex-start;flex-shrink:0}
.rq-btns{display:flex;gap:2px;justify-content:flex-end;align-items:center}
.rq-btns button{width:38px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:20px}
.rq-btns button:hover{background:var(--hover)}
.rq-btns .rq-accent{color:var(--primary)}
.rq-btns .ra-unsub{width:auto;padding:0 10px;font-size:12.5px;gap:6px}
.read-quick .read-date{margin-top:7px;font-size:12px;color:var(--muted)}
/* Ribbon: tipografía corporativa Montserrat (pestañas y herramientas), no Segoe UI del sistema.
El usuario notó que Archivo/Mensaje/Insertar salían con otra fuente distinta al texto escrito. */
/* (revertido) las pestañas usan la fuente de UI de la app, no Montserrat; Montserrat es SOLO para el cuerpo del mensaje */
/* Popup de redacción: se ve la cinta de herramientas (no el header con búsqueda);
fuera las pestañas de correo, el ··· de acciones y las opciones de acoplar/pestaña. */
body.popup-mode .ow-header{display:block!important}
body.popup-mode .ow-ribbon{display:block!important;margin:0}
body.popup-mode .ow-ribbon .ow-hamb,
body.popup-mode .ow-ribbon .tabset-mail,
body.popup-mode .ow-tools-fixed,
body.popup-mode [data-cm="extract"],
body.popup-mode [data-cm="tab"]{display:none!important}
/* Personalizador de la cinta de redacción */
.cset .cset-hidden{display:none!important}
.toolset-compose .tb-space{display:inline-block;width:18px;flex:0 0 auto}
.toolset-compose .tb-flex{flex:1 1 auto;min-width:8px}
.rc-letter{font-weight:700;font-size:14px;line-height:1;display:inline-grid;place-items:center;width:18px}
/* Chip de tamaño de imágenes (redacción) */
.cmp-imgsize{align-items:center;gap:8px;padding:6px 12px;margin:4px 10px 0;background:var(--accent-soft);border-radius:8px;font-size:13px;color:var(--text-2)}
.cmp-imgsize i.ph{font-size:16px}
.cmp-imgsize select{margin-left:auto;height:28px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:13px;padding:0 6px;cursor:pointer}
/* Opciones: botones con texto (Mostrar campos / Seguimiento) */
.toolset-compose button.tb-wide{display:inline-flex;flex-direction:row;align-items:center;width:auto;padding:0 10px;gap:6px}
.toolset-compose button.tb-wide .tb-txt{font-size:13px;color:var(--text-2)}
/* Importancia activa: icono coloreado (no fondo) */
.toolset-compose #optImp.imp-on{color:#c50f1f}
.toolset-compose #optImpLow.imp-on{color:#0f6cbd}
/* Icono compuesto avión de papel + reloj (programar envío) */
.ic-planeclock{position:relative;display:inline-grid;place-items:center;line-height:1}
.ic-planeclock .ph-paper-plane-tilt{font-size:17px}
.ic-planeclock .ph-clock{position:absolute;right:-5px;bottom:-4px;font-size:11px;background:var(--surface);border-radius:50%;padding:1px}
.c-send-main .ic-planeclock .ph-clock{background:#0f6cbd;color:#fff}
/* Importancia activa: icono RELLENO + color */
.toolset-compose #optImp.imp-on i.ph{font-family:"Phosphor-Fill"!important;color:#c50f1f}
.toolset-compose #optImpLow.imp-on i.ph{font-family:"Phosphor-Fill"!important;color:#0f6cbd}
/* Iconos por pack en la cinta de redacción */
.toolset-compose .ic{font-size:20px}
.toolset-compose .tb-caret.ic{font-size:11px;margin-left:1px}
.toolset-compose #optImp.imp-on .ic{color:#c50f1f}
.toolset-compose #optImpLow.imp-on .ic{color:#0f6cbd}
/* Tamaños de iconos .ic por contexto (migración de packs) */
.ic{font-size:1.15em}
.rail-ico .ic{font-size:22px}
.rail-ico.active{color:#0078d4}
.ow-act .ic,.ow-head-actions .ic{font-size:20px}
.ow-new .ic{color:#fff}
.al-ic .ic{color:#fff;font-size:22px}
.ac-item .ic,.ctx-menu .ic,.more-actions-pop .ic{font-size:17px}
/* Estrella de favorito (contactos) */
.ca-fav.on .ic,.cr-favmark{color:#f7b500}
.ca-fav:not(.on) .ic{color:#bbb}
/* Cinta de redacción: soporte de ETIQUETAS y TAMAÑO (personalizador) */
.toolset-compose .tb-lbl{display:none;font-size:12.5px;color:var(--text-2);white-space:nowrap}
/* Etiquetas siempre / grande → mostrar texto (icono + texto en fila) */
body.ribbon-labels-always .toolset-compose button:not(.tb-wide){display:inline-flex;align-items:center;width:auto;padding:0 10px;gap:6px}
body.ribbon-labels-always .toolset-compose .tb-lbl,
body.ribbon-labels-always .toolset-compose .tb-txt{display:inline-block}
body.ribbon-labels-none .toolset-compose .tb-lbl,
body.ribbon-labels-none .toolset-compose .tb-txt{display:none!important}
/* Tamaño compacto */
body.ribbon-size-compact .toolset-compose button{width:30px;height:30px}
body.ribbon-size-compact .toolset-compose .ic{font-size:16px}
/* Tamaño grande → icono ARRIBA, texto DEBAJO (estilo Outlook) */
body.ribbon-size-large .ow-ribbon.compose-mode .toolset-compose{align-items:stretch}
body.ribbon-size-large .toolset-compose button{flex-direction:column;justify-content:center;width:auto;min-width:50px;max-width:112px;height:auto;padding:3px 8px;gap:2px;display:inline-flex}
body.ribbon-size-large .toolset-compose .ic{font-size:20px}
body.ribbon-size-large .toolset-compose .tb-lbl,
body.ribbon-size-large .toolset-compose .tb-txt{display:block;font-size:11px;line-height:1.12;text-align:center;white-space:normal}
body.ribbon-size-large .toolset-compose .tb-caret{display:none}
body.ribbon-size-large .toolset-compose .tb-sep{align-self:stretch;height:auto;margin:4px 4px}
/* Ribbon grande: "Mostrar campos" y "Seguimiento" como CHECKBOXES */
.toolset-compose .tb-chk-group{display:none}
body.ribbon-size-large .toolset-compose .tb-chk-group{display:inline-flex;flex-flow:column wrap;align-content:flex-start;max-height:53px;gap:4px 18px;padding:0 10px;align-self:center;box-sizing:content-box}
body.ribbon-size-large .toolset-compose #optFields,
body.ribbon-size-large .toolset-compose #optTracking{display:none!important}
.tb-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);white-space:nowrap;cursor:pointer;height:auto}
.tb-chk input{margin:0;cursor:pointer}
/* Vista/Ayuda al final (tras las pestañas de redacción) */
.tabset-mail-end{display:flex;align-items:center}
/* En redacción (no peek), solo la pestaña de compose se ve activa (no Inicio a la vez) */
.ow-ribbon.compose-mode:not(.peek-mail) .mailtab.active{color:var(--text-2);font-weight:400;border-bottom-color:transparent}
/* ===== Tarjetas al hover en la cabecera de lectura ===== */
.hover-card{position:fixed;z-index:9500;background:var(--surface);border:1px solid var(--border);border-radius:14px;
box-shadow:0 22px 60px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.16);padding:12px;min-width:250px;max-width:340px;max-height:70vh;overflow:auto;font-size:13px;isolation:isolate;backdrop-filter:none}
.hover-card .pc-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:6px 2px 4px}
.hover-card .pc-sec:first-child{margin-top:0}
.hover-card .pc-row{display:flex;align-items:center;gap:9px;padding:5px 4px;border-radius:8px}
.hover-card .pc-row:hover{background:var(--hover)}
.hover-card .pc-av{width:30px;height:30px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;flex-shrink:0}
.hover-card .pc-meta{min-width:0}
.hover-card .pc-name{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hover-card .pc-mail{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ficha del remitente */
.hover-card.sender-card{min-width:280px;padding:0;overflow:hidden}
.sc-head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;background:linear-gradient(180deg,var(--hover),transparent)}
.sc-av{width:56px;height:56px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:22px;flex-shrink:0;background-size:cover;background-position:center}
.sc-av.has-img{color:transparent}
.sc-id{min-width:0}
.sc-name{font-weight:700;font-size:16px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-sub{font-size:12px;color:var(--muted);margin-top:2px}
.sc-mail-sub{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-body{padding:6px 16px 12px;display:flex;flex-direction:column;gap:7px}
.sc-line{display:flex;align-items:center;gap:9px;color:var(--text);font-size:13px}
.sc-line .ic{color:var(--muted);font-size:16px;flex-shrink:0}
.sc-line .sc-mail{color:var(--primary);word-break:break-all}
.sc-line .sc-ext{color:var(--muted)}
.sc-alias{color:var(--muted);font-size:12px}
.sc-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border-soft,var(--border));background:var(--hover)}
.sc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
background:var(--surface);color:var(--text);font-size:12.5px;cursor:pointer;white-space:nowrap}
.sc-btn:hover{background:var(--hover)}
.sc-btn .ic{font-size:15px}
.sc-btn.sc-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.sc-btn.sc-primary:hover{filter:brightness(1.06)}
.read-meta .addr-de:hover{text-decoration:underline;cursor:default}
/* correos recientes en la ficha del remitente (hover) */
.sc-msgs{padding:8px 16px 4px;border-top:1px solid var(--border-soft,var(--border))}
.sc-msgs .sc-sec{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:2px 0 6px}
.sc-msglist{max-height:210px;overflow:auto}
.sc-loading,.sc-nomsg{font-size:12px;color:var(--muted);padding:4px 2px}
.sc-msg{display:flex;align-items:flex-start;gap:8px;padding:6px 6px;border-radius:8px;cursor:pointer;background:var(--surface)}
.sc-msg:hover{background:var(--hover)}
.sc-mdir{font-size:14px;color:var(--muted);margin-top:2px;flex-shrink:0}
.sc-mmeta{min-width:0;flex:1}
.sc-msubj{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-msubj.unread{font-weight:700}
.sc-mdate{font-size:11px;color:var(--muted);margin-top:1px}
.hover-card.sender-card{min-width:300px;max-width:360px}
/* fila de acciones de la ficha del remitente (estilo Outlook) */
.sc-actions{display:flex;align-items:center;gap:8px;padding:10px 16px 4px}
.sc-actions .sc-btn.sc-primary{flex:0 1 auto;display:flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--primary);color:#fff;font-size:12.5px;cursor:pointer;white-space:nowrap}
.sc-actions .sc-btn.sc-primary:hover{filter:brightness(1.07)}
.sc-actions .sc-ibtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-2);cursor:pointer;font-size:16px}
.sc-actions .sc-ibtn:hover{background:var(--hover);color:var(--text)}
.hover-card.sender-card .sc-msgs:first-of-type{border-top:1px solid var(--border-soft,var(--border))}
/* Cuenta POP/local mostrada en la web: gris desactivado (solo funciona en la app de escritorio) */
.acct-disabled{opacity:.55;cursor:default}
.acct-disabled:hover{background:transparent}
.acct-onlydesk{margin-left:auto;font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border:1px solid var(--border2);border-radius:6px;padding:1px 5px}
/* ===== Tarjeta de contacto al hover — versión pequeña del estilo de Contactos (más aire) ===== */
.hover-card.sender-card{min-width:314px;max-width:374px}
.hover-card.sender-card .sc-head{padding:18px 18px 12px;gap:14px}
.hover-card.sender-card .sc-av{width:52px;height:52px;font-size:20px}
.hover-card.sender-card .sc-name{font-size:16.5px;font-weight:700}
.hover-card.sender-card .sc-mail-sub{font-size:12.5px;margin-top:3px}
.hover-card.sender-card .sc-sub{font-size:11.5px;margin-top:3px}
.hover-card.sender-card .sc-actions{padding:0 16px 12px;gap:8px}
.hover-card.sender-card .sc-msgs{padding:12px 16px 10px}
.hover-card.sender-card .sc-msgs .sc-sec{font-size:11px;letter-spacing:.04em;margin:0 0 9px}
.hover-card.sender-card .sc-msglist{max-height:252px}
.hover-card.sender-card .sc-msg{padding:9px 10px;margin-bottom:7px;border:1px solid var(--border-soft,var(--border));border-radius:9px;gap:10px;align-items:flex-start}
.hover-card.sender-card .sc-msg:last-child{margin-bottom:2px}
.hover-card.sender-card .sc-msg:hover{background:var(--hover);border-color:var(--border)}
.hover-card.sender-card .sc-mdir{font-size:15px;margin-top:1px;color:#0f6cbd;flex-shrink:0}
.hover-card.sender-card .sc-msubj{font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hover-card.sender-card .sc-msubj.unread{font-weight:700}
.hover-card.sender-card .sc-mdate{font-size:11px;color:var(--muted);margin-top:4px}
.hover-card.sender-card .sc-loading,.hover-card.sender-card .sc-nomsg{padding:10px 4px;color:var(--muted);font-size:12.5px}
/* ===== Buscador: chip de ámbito integrado en el input (izquierda) ===== */
.ow-search .search-scope{display:flex;align-items:center;gap:5px;border:0;background:var(--hover);color:var(--text-2);font:inherit;font-size:12.5px;padding:5px 9px;border-radius:8px;cursor:pointer;margin-right:7px;white-space:nowrap;max-width:170px;flex-shrink:0}
.ow-search .search-scope:hover{background:var(--border)}
.ow-search .search-scope #searchScopeLbl{overflow:hidden;text-overflow:ellipsis;max-width:120px}
.ow-search .search-scope .sc-caret{font-size:10px;opacity:.65;margin-left:1px}
.ow-search .search-scope>.ic{font-size:14px;opacity:.85}
.scope-pop{padding:5px 0}
.scope-pop .ac-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 14px}
.scope-pop .ac-item .sc-on{margin-left:auto;color:var(--primary)}
@media(max-width:640px){.ow-search .search-scope{display:none}}
/* ===== Búsqueda avanzada — rediseño con el estilo de la app (campos en caja) ===== */
.adv-search-panel{border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.20);min-width:440px;overflow:hidden}
.adv-search-inner{padding:16px 18px 16px}
.adv-search-inner::before{content:"Búsqueda avanzada";display:block;font-weight:600;font-size:14px;color:var(--text);margin:0 0 12px}
.adv-search-panel .as-row{display:flex;align-items:center;gap:12px;border:0;min-height:0;margin-bottom:10px}
.adv-search-panel .as-row .as-lbl{flex:0 0 118px;text-align:right;font-size:12.5px;color:var(--muted);padding:0}
.adv-search-panel .as-row .as-field{flex:1;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-size:13.5px;padding:9px 11px;box-sizing:border-box;transition:border-color .12s,box-shadow .12s}
.adv-search-panel .as-row .as-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,120,212,.16)}
.adv-search-panel .as-row:focus-within{border:0;box-shadow:none}
.adv-search-panel select.as-field{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center}
.adv-search-panel .as-dates{flex:1;display:flex;gap:10px}
.adv-search-panel .as-dates .as-field{flex:1;border:1px solid var(--border);border-radius:9px;padding:9px 11px}
.adv-search-panel .as-check{width:20px;height:20px;cursor:pointer;accent-color:var(--primary);margin:0}
.adv-search-panel .adv-search-actions{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);gap:10px}
@media (prefers-color-scheme: dark){
.adv-search-panel select.as-field{background-image:url("data:image/svg+xml;utf8,")}
}
/* chip de ámbito: solo visible al buscar (con texto) */
.ow-search .search-scope{display:none}
.ow-search .search-scope.on{display:flex}
/* buscador: layout robusto (el botón de avanzada no se sale) */
.ow-search .search-scope{flex-shrink:1;min-width:0;max-width:150px}
.ow-search input{min-width:0}
.ow-search .adv-search-btn{flex-shrink:0}
.search-head .sh-loading{color:var(--muted);font-weight:400;font-size:12px}
/* ===== Tarjeta de evento de calendario (.ics) en la lectura ===== */
.ev-card{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px;padding:14px 16px;
border:1px solid var(--border,#e2e6ea);border-left:4px solid #0f6cbd;border-radius:12px;
background:linear-gradient(180deg,rgba(15,108,189,.06),rgba(15,108,189,.02))}
.ev-card .ev-ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:#0f6cbd;color:#fff;font-size:20px}
.ev-card.ev-linkonly{border-left-color:#5c2e91}
.ev-card.ev-linkonly .ev-ico{background:#5c2e91}
.ev-body{flex:1 1 auto;min-width:0}
.ev-title{font-weight:700;font-size:15px;color:var(--text,#1b1a19);margin-bottom:4px;word-break:break-word}
.ev-meta{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--text2,#605e5c);margin-bottom:10px}
.ev-meta span{display:inline-flex;align-items:center;gap:6px;word-break:break-word}
.ev-meta .ic{color:#0f6cbd;font-size:14px}
.ev-actions{display:flex;flex-wrap:wrap;gap:8px}
.ev-add{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:none;border-radius:9px;cursor:pointer;
background:#0f6cbd;color:#fff;font-size:13.5px;font-weight:600}
.ev-add:hover{background:#0d5ca3}
.ev-add.ev-added{background:#107c10;cursor:default}
.ev-link{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--border,#d8dde2);border-radius:9px;
background:var(--surface,#fff);color:#0f6cbd;font-size:13.5px;font-weight:600;text-decoration:none}
.ev-link:hover{background:rgba(15,108,189,.08)}
@media (prefers-color-scheme:dark){
.ev-card{border-color:#3a3a3c;background:linear-gradient(180deg,rgba(64,150,230,.10),rgba(64,150,230,.03))}
.ev-title{color:#f2f2f2}
.ev-meta{color:#b0b0b0}
.ev-link{background:#2a2a2c;border-color:#3a3a3c;color:#4a9ee8}
}
/* #52 — Tarjeta de contacto al pasar el ratón: COMPACTA y al estilo del módulo Contactos.
(Se apoya en el orden de cascada: va después de las reglas .sender-card previas.) */
.hover-card.sender-card{min-width:0;width:264px;max-width:264px;border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.16)}
.hover-card.sender-card .sc-head{padding:14px 14px 10px;gap:11px}
.hover-card.sender-card .sc-av{width:44px;height:44px;font-size:17px}
.hover-card.sender-card .sc-name{font-size:14.5px;font-weight:700}
.hover-card.sender-card .sc-mail-sub{font-size:12px;margin-top:2px}
.hover-card.sender-card .sc-sub{font-size:11px;margin-top:2px}
.hover-card.sender-card .sc-actions{padding:0 14px 12px;gap:7px}
.hover-card.sender-card .sc-actions .sc-btn.sc-primary{padding:7px 12px;font-size:12px;border-radius:9px}
.hover-card.sender-card .sc-actions .sc-ibtn{width:32px;height:32px;font-size:14px;border-radius:9px}
.hover-card.sender-card .sc-msgs{padding:9px 14px 8px}
.hover-card.sender-card .sc-msgs .sc-sec{font-size:10px;margin:0 0 5px}
.hover-card.sender-card .sc-line{font-size:12.5px}
.hover-card.sender-card .sc-msglist{max-height:148px}
.hover-card.sender-card .sc-msg{padding:5px 6px;gap:7px}
.hover-card.sender-card .sc-msubj{font-size:12.5px}
.hover-card.sender-card .sc-mdate{font-size:10.5px}
.hover-card.sender-card .sc-mdir{font-size:13px;margin-top:1px}
/* Bocadillo de conversación: el iframe se auto-ajusta (mini-script), SIN scroll interno. */
.conv-frame{width:100%;border:none;display:block;overflow:hidden;background:transparent;min-height:0}
.conv-full-btn{background:none;border:none;color:var(--primary);font-size:11.5px;font-weight:600;cursor:pointer;
padding:1px 10px 4px;font-family:inherit;align-self:flex-start}
.conv-full-btn:hover{text-decoration:underline}
.conv-msg.from-me .conv-full-btn{color:rgba(255,255,255,.92);align-self:flex-end}
/* Bocadillo de conversación como CHAT (texto dentro del globo, sin iframe ni scroll). */
.conv-bubble-text{font-size:14px;line-height:1.45;word-break:break-word;color:var(--text);margin-top:1px}
.conv-msg.from-me .conv-bubble-text{color:#fff}
.conv-bubble-text a{color:inherit;text-decoration:underline}
.conv-empty-msg{color:var(--muted);font-style:italic}
.conv-full-btn{background:none;border:none;color:var(--primary);font-size:11.5px;font-weight:600;cursor:pointer;
padding:3px 4px 0;font-family:inherit;align-self:flex-start}
.conv-full-btn:hover{text-decoration:underline}
.conv-msg.from-me .conv-full-btn{align-self:flex-end}
/* Bocadillo de chat: el globo es .conv-card-body (colored=mío, gris=suyo). */
.conv-msg.from-me .conv-card-body{background:var(--primary)}
.conv-bubble-text{padding:9px 13px;font-size:14px;line-height:1.45;word-break:break-word;color:var(--text)}
.conv-msg.from-me .conv-bubble-text{color:#fff}
.conv-bubble-text a{color:inherit;text-decoration:underline}
.conv-full-btn{background:none;border:none;color:var(--primary);font-size:11px;font-weight:600;cursor:pointer;padding:3px 6px 0;font-family:inherit}
.conv-full-btn:hover{text-decoration:underline}
/* Recibidos en gris suave (iMessage), míos en color. */
.conv-msg.from-other .conv-card-body{background:#eceef1}
@media (prefers-color-scheme:dark){ .conv-msg.from-other .conv-card-body{background:#2a2c31} }
html[data-theme="dark"] .conv-msg.from-other .conv-card-body{background:#2a2c31}
/* Aviso de riesgo ÚNICO en la cabecera de la conversación (no por bocadillo). */
.conv-risk-top{margin:6px 14px 2px}
.conv-risk-top:empty{display:none;margin:0}
/* Bocadillos con color SUTIL por persona: el texto usa el color normal (legible sobre pastel/apagado). */
.conv-msg.from-me .conv-bubble-text,.conv-msg.from-other .conv-bubble-text{color:var(--text)}
.conv-msg .conv-card-body{box-shadow:0 1px 2px rgba(0,0,0,.10)}
/* Chips de participantes (cada uno con su color de fondo) */
.conv-participants{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.conv-part-chip{display:inline-block;padding:2px 10px;border-radius:11px;font-size:12px;font-weight:600;color:var(--text)}
/* Controles integrados en el bocadillo, abajo a la derecha (aparecen al pasar el ratón). */
.conv-card-body{position:relative}
.conv-card-acts.conv-acts-bubble{position:absolute!important;top:auto!important;bottom:4px;right:6px;left:auto!important;
display:flex;gap:1px;background:var(--surface);border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.18);padding:1px;
opacity:0;pointer-events:none;transition:opacity .1s;z-index:6}
.conv-card-body:hover .conv-acts-bubble{opacity:.97;pointer-events:auto}
.conv-acts-bubble .cma{padding:4px 6px;font-size:14px}
.conv-bubble-text{padding-bottom:16px}
/* Barra "En respuesta a" encima del cuadro de escribir del chat. */
.crb-replyto{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:0 0 6px;border-left:3px solid var(--primary);
background:var(--hover);border-radius:6px;font-size:12.5px}
.crb-rt-line{flex:1;min-width:0;display:flex;align-items:center;gap:7px;color:var(--text)}
.crb-rt-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crb-rt-x{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.crb-rt-x:hover{color:var(--text)}
/* Chip "En respuesta a" dentro del bocadillo, para seguir el hilo. */
.conv-replyref{border-left:3px solid currentColor;opacity:.75;padding:2px 8px;margin:0 0 6px;font-size:12px;
border-radius:4px;background:rgba(127,127,127,.12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Controles SIEMPRE visibles, como fila al fondo del bocadillo, alineados a la derecha. */
.conv-card-acts.conv-acts-bubble{position:static!important;display:flex!important;justify-content:flex-end;gap:1px;
background:transparent!important;box-shadow:none!important;padding:0!important;margin-top:6px;opacity:1!important;pointer-events:auto!important;top:auto!important;right:auto!important;left:auto!important}
.conv-acts-bubble .cma{padding:3px 6px;font-size:14px;color:var(--text-2)}
.conv-acts-bubble .cma:hover{background:rgba(127,127,127,.16);border-radius:6px}
.conv-bubble-text{padding-bottom:0}
/* Adjuntos en la parte inferior del mensaje, con icono por tipo. */
.conv-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.conv-att{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:9px;background:rgba(127,127,127,.16);
font-size:12.5px;text-decoration:none;color:var(--text);max-width:100%}
.conv-att:hover{background:rgba(127,127,127,.26)}
.conv-att .ic,.conv-att i{font-size:16px}
.conv-att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.conv-att-size{color:var(--muted);font-size:11.5px}
/* Cabecera del mensaje: avatar + nombre arriba, en el lado del remitente. */
.conv-msg-head{display:flex;align-items:center;gap:7px;margin:2px 2px 5px}
.conv-msg.from-me .conv-msg-head{flex-direction:row-reverse}
.conv-msg-head .conv-bbl-av{display:flex!important;width:24px;height:24px;min-width:24px;font-size:10px;border-radius:50%;
align-items:center;justify-content:center;color:#fff;font-weight:600;flex-shrink:0}
.conv-msg-head .conv-bbl-name{font-size:12px;font-weight:600;color:var(--text-2);margin:0;padding:0}
/* Adjunto como TARJETA: icono grande centrado arriba, nombre y tamaño debajo. */
.conv-att{display:flex!important;flex-direction:column;align-items:center;gap:4px;padding:14px 18px;border-radius:11px;
background:rgba(127,127,127,.15);text-decoration:none;color:var(--text);text-align:center;min-width:130px;max-width:230px}
.conv-att:hover{background:rgba(127,127,127,.26)}
.conv-att .ic,.conv-att i{font-size:34px;margin-bottom:2px}
.conv-att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:12.5px;font-weight:500}
.conv-att-size{color:var(--muted);font-size:11px}
/* "Ver completo" integrado en la fila de controles del bocadillo (abajo-derecha). */
.conv-acts-bubble .conv-full-btn{font-size:11px;font-weight:600;color:var(--primary);padding:3px 7px;
align-self:center;white-space:nowrap;border-radius:6px}
.conv-acts-bubble .conv-full-btn:hover{background:rgba(127,127,127,.16);text-decoration:none}
/* El avatar baja y se COME la esquina superior del globo (solo la esquinita), con un anillo
del color del fondo para separarlo, como el FAB del dock móvil. */
.conv-msg-head{align-items:center;margin-bottom:-11px;position:relative;z-index:3}
.conv-msg-head .conv-bbl-av{transform:translateY(9px);box-shadow:0 0 0 2px var(--surface);position:relative;z-index:4}
.conv-msg.from-me .conv-msg-head .conv-bbl-av{box-shadow:0 0 0 2px var(--surface)}
.conv-bubble-text{padding-top:12px}
/* Subir un poco el avatar (solape más sutil con la esquina del globo). */
.conv-msg-head{margin-bottom:-6px}
.conv-msg-head .conv-bbl-av{transform:translateY(4px)}
.conv-bubble-text{padding-top:8px}
/* Avatar más pegado al borde del globo + nombre 2px arriba (que no toque el globo). */
.conv-msg-head .conv-bbl-av{transform:translate(-3px,4px)}
.conv-msg.from-me .conv-msg-head .conv-bbl-av{transform:translate(3px,4px)}
.conv-msg-head .conv-bbl-name{transform:translateY(-2px)}
/* "Ver mensaje completo" a la IZQUIERDA; los iconos de control a la derecha. */
.conv-acts-bubble{width:100%}
.conv-acts-bubble .conv-full-btn{margin-right:auto}
/* Avatar de conversación un poco más grande + mostrar foto/logo si hay (has-img). */
.conv-msg-head .conv-bbl-av{width:28px;height:28px;min-width:28px;font-size:11px}
.conv-bbl-av.has-img{color:transparent;background-size:cover;background-position:center}
/* Cada mensaje con su icono → separar un poco los bocadillos. */
.conv-msgs{gap:9px}
.conv-msg.same-prev{margin-top:0}
/* RSVP: responder a invitaciones de calendario */
.ev-rsvp-row{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.ev-rsvp-q{font-size:12.5px;color:var(--muted);margin-right:2px;align-self:center}
.ev-rsvp{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--border,#d8dde2);border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;background:var(--surface,#fff);color:var(--text,#1b1a19);font-family:inherit;transition:background .12s,border-color .12s,color .12s}
.ev-rsvp:hover{background:var(--surface-2,#f2f4f7)}
.ev-rsvp:disabled{cursor:default;opacity:.9}
.ev-acc.ev-rsvp-on{background:#107c10;border-color:#107c10;color:#fff}
.ev-ten.ev-rsvp-on{background:#b06d00;border-color:#b06d00;color:#fff}
.ev-dec.ev-rsvp-on{background:#c50f1f;border-color:#c50f1f;color:#fff}
.ev-rsvp-row:has(.ev-rsvp-on) .ev-rsvp:not(.ev-rsvp-on){opacity:.5}
@media (prefers-color-scheme:dark){ .ev-rsvp{background:#2a2a2c;border-color:#3a3a3c;color:#e8e8e8} .ev-rsvp:hover{background:#333} }
html[data-theme="dark"] .ev-rsvp{background:#2a2a2c;border-color:#3a3a3c;color:#e8e8e8}
html[data-theme="dark"] .ev-rsvp:hover{background:#333}
/* ===== Editor de texto enriquecido (firma y mensaje de ausencia) — 07/08/26 ===== */
.ne-rich{border:1px solid var(--border,#e6e6e6);border-radius:8px;overflow:hidden;background:#fff}
.ne-rich-bar{display:flex;align-items:center;flex-wrap:wrap;gap:1px;padding:4px 6px;
border-bottom:1px solid var(--border,#e6e6e6);background:var(--surface2,#faf9f8)}
.ne-rich-b{min-width:30px;height:28px;padding:0 7px;border:0;background:transparent;cursor:pointer;
border-radius:6px;font-size:14px;line-height:1;color:var(--text,#20242a)}
.ne-rich-b:hover{background:var(--hover,#f0f0f0)}
.ne-rich-sep{width:1px;height:18px;margin:0 4px;background:var(--border,#e6e6e6)}
.ne-rich-ed{padding:10px 12px;outline:none;font-size:14px;line-height:1.5;overflow:auto;
max-height:340px;background:#fff;color:#222}
.ne-rich-ed img{max-width:100%}
.ne-rich-ed a{color:#0a58ca}
.ne-rich-src{width:100%;border:0;outline:none;padding:10px 12px;box-sizing:border-box;resize:vertical;
font-family:Consolas,"Cascadia Mono",monospace;font-size:12.5px;max-height:340px}
.ne-rich-colors{position:absolute;z-index:100000;background:#fff;border:1px solid #e6e6e6;
border-radius:9px;box-shadow:0 6px 22px rgba(0,0,0,.20);padding:4px;min-width:130px}
.ne-rich-colors button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;
cursor:pointer;padding:6px 8px;border-radius:6px;font-size:13px;text-align:left}
.ne-rich-colors button:hover{background:#f0f2f5}
.ne-rich-colors span{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.15)}