/* NE Mail v5.90 — Ignacio Albacete 19/06/26 / Última actualización: 25/06/26. v6.54: Caret Correo nuevo, SEP fix. v5.90: Notas con editor enriquecido (negrita/cursiva/subrayado/tachado/listas/imagen) como OWA. v5.89: Notas (vista propia, rail 5º icono); rail reordenado Correo/Contactos/Calendario/Tareas/Notas; iconos rail estilo OWA. v5.88: Popup redacción sin cabecera superior. v5.87: Menú contextual carpetas; búsqueda avanzada estilo OWA; botón Correo nuevo/Enviar sólido azul; buscador oculto en popup. v5.83: Botón Enviar sólido azul (igual que OWA). v5.82: CSS móvil read-actions solo iconos.
/* 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{
  font-family:"Phosphor-Fill"!important;color:var(--primary)}
/* 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}
/* .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}
.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:0}
.tabset{display:flex;gap:20px;height:100%;align-items:center}
.toolset{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow-x:auto;width:100%}
.tabset-compose,.toolset-compose{display:none}
.ow-ribbon.compose-mode .toolset-mail,.ow-ribbon.compose-mode .toolset-vista{display:none!important}
.ow-ribbon.compose-mode .tabset-mail{display:flex!important;margin-right:8px}
.ow-ribbon.compose-mode .tabset-mail:after{content:"";display:inline-block;width:1px;height:18px;background:var(--border);margin:0 8px;align-self:center}
.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-x:auto;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 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:#0078d4}
.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-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:#0078d4;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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;min-height:16px}
.dot-unread{width:9px;height:9px;border-radius:50%;background:#0078d4;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}
.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}
.thread-group{border-bottom:1px solid var(--border)}
.thread-head{border-bottom:none!important;display:flex;align-items:flex-start}
.thread-toggle{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--border);border-radius:4px;padding:1px 6px;background:none;cursor:pointer;font-size:11px;color:var(--muted);flex-shrink:0;transition:background .1s}
.thread-toggle:hover{background:#e8eaed}
.thread-count{font-size:11px;font-weight:700;color:var(--text-2)}
.thread-body{background:var(--surface-3)}
.thread-msg{display:flex;border-bottom:1px solid var(--border);padding:6px 8px 6px 46px;cursor:pointer;transition:background .1s}
.thread-msg:hover{background:#edf2f8}
.thread-msg:last-child{border-bottom:none}
.thread-msg-inner{display:flex;gap:8px;width:100%;align-items:flex-start}
.thread-msg .avatar.sm{width:28px;height:28px;font-size:11px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:600}
.thread-msg .body{flex:1;min-width:0}
.thread-msg .row1{display:flex;gap:6px;align-items:baseline;overflow:hidden}
.thread-msg .row2{display:flex;gap:6px;align-items:baseline;overflow:hidden}
.thread-msg .from{font-size:13px;font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.thread-msg.unread .from{font-weight:700;color:var(--text)}
.thread-msg .date{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0;margin-left:auto}
.thread-msg .preview{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.thread-msg .dot-unread{width:7px;height:7px;border-radius:50%;background:var(--primary);display:inline-block;flex-shrink:0;margin-top:3px}
.thread-expand-btn{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex-shrink:0;border-radius:3px;margin-right:2px;align-self:center}
.thread-expand-btn:hover{background:#e8e8e8;color:var(--text)}
.thread-expand-btn i.ph{font-size:12px;transition:transform .15s}
.thread-expand-btn i.ph.rotated{transform:rotate(90deg)}
.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}
#btnThread.active{color:var(--primary)}
#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:0}
.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}
.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)}
.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}
.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 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}
.notif-panel{position:absolute;top:42px;right:0;width:340px;max-height:60vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:9000;display:none}
.notif-panel.open{display:block}
.notif-head{padding:12px 16px;font-weight:600;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.notif{padding:11px 16px;border-bottom:1px solid #f2f2f2}
.notif-t{font-size:13px;font-weight:600}
.notif-b{font-size:12.5px;color:var(--text-2);margin-top:2px}
.notif-time{font-size:11px;color:var(--muted);margin-top:3px}
.notif.error{border-left:3px solid #d83b01}
.notif.ok{border-left:3px solid #107c10}
.notif.mail{border-left:3px solid var(--primary)}
.notif.info{border-left:3px solid #0f6cbd}
.notif-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px}
/* Enviar y recibir: giro al pulsar */
#btnSync.spinning .sync-ico{animation:nspin .6s linear}
@keyframes nspin{to{transform:rotate(360deg)}}

.cmp-row{display:flex;align-items:center;gap:10px;padding:7px 18px;border-top:1px solid var(--border)}
.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{display:flex;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}
.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:60% 40%}
.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}


/* ---- 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; }
.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:7px;overflow:hidden}
  .ow-logo{display:none}
  .ow-search{margin:0;max-width:none;min-width:0;flex:1;padding:6px 10px}
  /* 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 svg{width:22px;height:22px}
  .ow-body{display:block;position:relative}
  .ow-rail{display:none}
  .ow-list{width:100%;height:100%;border-right: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,
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}
.tb-split-btn>button:first-child:not(.ow-new):hover{background:var(--hover)}
.tb-split-caret{display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);padding:0 5px;min-height:28px;border-left:1px solid var(--border);border-radius:0 4px 4px 0;background:none;border-top:none;border-right:none;border-bottom:none;cursor:pointer}
.tb-split-caret:hover{background:var(--hover)}
.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}

/* ===== 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)}
.conv-subject{font-size:18px;font-weight:600;color:var(--text);padding:14px 20px 12px;background:var(--surface-2);flex-shrink:0}
.conv-msgs{display:flex;flex-direction:column;gap:2px;padding:0 0 24px}
.conv-msg{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.conv-msg.collapsed .conv-card-hd{cursor:pointer}
.conv-msg.collapsed .conv-card-hd:hover{background:var(--surface-2)}
.conv-msg.collapsed .conv-card-hd{padding:6px 16px!important;align-items:center}
.conv-msg.collapsed .conv-card-hd:hover .conv-card-date{display:none}
.conv-msg.collapsed .conv-card-hd:hover .conv-card-acts{display:flex!important}
.conv-msg.collapsed .conv-hd-row1{flex-wrap:nowrap}
.conv-hd-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted);display:block;margin-top:1px}
.conv-card-hd .avatar.sm{width:32px;height:32px;font-size:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:600}
.conv-msg.expanded .conv-card-hd{cursor:default;position:relative}
.conv-card-hd{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;transition:background .12s}
.conv-hd-meta{flex:1;min-width:0}
.conv-hd-row1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.conv-sender-name{font-weight:600;font-size:14px;color:var(--text)}
.conv-sender-addr{margin-left:2px}
.conv-card-date{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.conv-hd-sub{font-size:12px;color:var(--muted);margin-top:2px}
.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}
.conv-msg-count{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px;vertical-align:middle}
.conv-msg.expanded .dot-unread{display:none!important}
.conv-msg.expanded .conv-hd-row1{flex-wrap:nowrap;overflow:hidden;padding-right:165px}
.conv-sender-addr{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.conv-card-acts{display:none;gap:2px;align-items:center;flex-shrink:0}
.conv-msg.expanded .conv-card-acts{display:flex!important;position:absolute;top:10px;right:12px}
.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}
.conv-card-body{padding:0}
.conv-frame{width:100%;border:none;display:block;padding:0 20px;box-sizing:border-box;min-height:40px}
.conv-footer{display:flex;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border);margin-top:4px}
/* 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:-2;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}
body.has-wallpaper .ow-rail{background:rgba(255,255,255,.60)!important;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:none!important}
/* Estilo OWA con opacidades sutilmente diferenciadas */
body.has-wallpaper .ow-header{background:rgba(255,255,255,.55)!important;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:none!important;border-radius:0!important}
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) */
  body.has-wallpaper .ow-rail{background:rgba(255,255,255,.60)!important;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:none!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
  /* 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!important;box-shadow:none!important;margin:0!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-top-left-radius:14px!important;border-bottom-left-radius:14px!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:6px}
.sess-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.sess-row.cur{border-color:var(--primary);background:var(--accent-soft)}
.sess-main{flex:1;min-width:0}
.sess-tag{background:var(--primary);color:#fff;font-size:11px;padding:1px 6px;border-radius:4px;margin-left:4px;font-weight:600}
.ce-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* 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{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-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}
.fui *{fill:currentColor!important;stroke:none!important}
button .fui{margin-right:6px}
/* 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:32px;border-radius:4px;font-size:14px}
.ow-new{background:var(--primary)!important}
.ow-new:hover{background:var(--primary-dark)!important}
.tb-split-caret{height:32px;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-rail,body.hide-nav .ow-folders{display:none!important}
body.hide-nav .ow-body{grid-template-columns:0 350px 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:32px}
.ow-act:hover{background:rgba(0,0,0,.06)}
.ow-act .fui{color:#242424}