/* NE Mail v0.2 — Ignacio Albacete 19/06/26. Login estilo NE Panel + interior Outlook 365. */
/* 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;
  --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:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-compose:'Montserrat','Century Gothic','URW Gothic','Segoe UI',Arial,sans-serif;
}
*,*::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:14px;-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:#9b9a98;pointer-events:none}
.ow-search>i.ph{font-size:18px;flex-shrink:0;color:#797775}
.ow-head-actions>button i.ph,.ow-notif-wrap>button i.ph{font-size:20px}
.ow-act i.ph{font-size:18px}
.ow-new i.ph{font-size:18px}
.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:#444}
.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:#555;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 (sobre sobre degradado azul) ====================== */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;
  background:linear-gradient(150deg,#2ba9ea 0%,#1c9bdf 55%,#1690d6 100%)}
@keyframes slideIn{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.envelope{position:relative;width:100%;max-width:410px;background:#fff;color:#1b1a19;
  border-radius:16px;overflow:hidden;animation:slideIn .5s ease-out;
  box-shadow:0 30px 70px rgba(8,40,80,.35),0 6px 18px rgba(8,40,80,.2);
  padding:84px 34px 30px}
.env-flap{position:absolute;top:0;left:0;right:0;height:100px;z-index:1;
  background:linear-gradient(165deg,#fbfdff,#e7edf5);
  clip-path:polygon(0 0,100% 0,50% 84%);box-shadow:0 3px 8px rgba(0,0,0,.05)}
.env-content{position:relative;z-index:2;text-align:center}
.login-title{font-size:1.5rem;font-weight:700;color:#1b1a19;margin-bottom:22px}
.login-links{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid #f1f1f1}
.link-btn{background:none;border:none;color:#9a9a9a;font-size:.84rem;cursor:pointer;font-family:var(--font);transition:color .2s}
.link-btn:hover{color:var(--primary)}
.link-btn.preferred{color:var(--primary);font-weight:600}
.last-used{font-size:.68rem;color:#bbb;font-weight:400}
.login-subtitle{font-size:.9rem;color:#605e5c;margin-bottom:20px}
.form-group{margin-bottom:13px;position:relative;text-align:left}
.form-group.input-icon>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:1.05rem;color:#9b9a98;pointer-events:none}
.form-group input{width:100%;padding:.8rem 1rem .8rem 42px;font-size:.98rem;color:#1b1a19;
  background:#f5f6f8;border:1px solid #e0e0e0;border-radius:10px;transition:all .2s;font-family:var(--font)}
.form-group input::placeholder{color:#a0a0a0}
.form-group input:focus{outline:none;background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,108,189,.15)}
.remember{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#605e5c;margin:6px 0;cursor:pointer}
.remember input{width:16px;height:16px;accent-color:var(--primary)}
.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:#f3f4f6;color:#3b3a39;border:1px solid #e3e3e3;font-weight:500}
.btn-secondary:hover{background:#e9ebef}
.alt-sep{display:flex;align-items:center;gap:12px;color:#a0a0a0;font-size:.8rem;margin:16px 0 2px}
.alt-sep::before,.alt-sep::after{content:"";flex:1;height:1px;background:#ececec}
.login-err{color:#c0392b;font-size:.86rem;min-height:18px;text-align:center;margin-top:8px}
.badge-soon{font-size:.62rem;background:#fff4ce;color:#8a6d00;border-radius:6px;padding:1px 6px;margin-left:4px}

/* ====================== APP (clon Outlook Web / Microsoft 365) ====================== */
#app{height:100%;display:flex;flex-direction:column;background:#fff;position:relative;
  font-family:'Segoe UI',-apple-system,system-ui,sans-serif}
.redline{position:absolute;left:0;top:0;bottom:0;width:3px;background:#c0143c;z-index:60}

/* ---- Header ---- */
/* cabecera: azul pastel (un punto más azul) arriba → blanco abajo, vertical con leve inclinación */
.ow-header{height:48px;display:flex;align-items:center;gap:16px;padding:0 12px 0 18px;
  background:linear-gradient(174deg,#b3d3f5 0%,#cfe4fb 32%,#ecf4fe 66%,#ffffff 94%);
  border-bottom:1px solid #e2ebf4;position:relative;z-index:20}
.ow-logo{color:#0078d4;font-weight:700;font-size:20px;letter-spacing:-.4px;min-width:104px}
.ow-search{flex:1;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:9px;
  background:#fff;border-radius:18px;padding:6px 14px;box-shadow:0 1.6px 5px rgba(0,0,0,.13);border:1px solid #eee}
.ow-search svg{width:16px;height:16px;flex-shrink:0}
.ow-search input{flex:1;border:none;outline:none;font-size:13px;background:transparent}
.ow-head-actions{display:flex;align-items:center;gap:4px}
.ow-head-actions>button{width:34px;height:34px;border-radius:50%;color:#444;display:grid;place-items:center}
.ow-head-actions>button svg{width:18px;height:18px}
.ow-head-actions>button:hover{background:#f0f0f0}
.ow-avatar{width:32px;height:32px;border-radius:50%;background:#0078d4;color:#fff;display:grid;place-items:center;
  font-weight:600;font-size:13px;cursor:pointer;margin-left:6px}
.ow-logout{color:#444;font-size:17px;width:30px;height:30px;border-radius:50%}
.ow-logout:hover{background:#f0f0f0}
.ow-rainbow{display:none}   /* el degradado ahora cubre toda la cabecera */

/* ---- Ribbon ---- */
.ow-ribbon{background:#fff;border-bottom:1px solid #e0e0e0;padding:0 16px}
.ow-tabs{display:flex;gap:20px;height:32px;align-items:center;font-size:13px}
.ow-tabs button{color:#444;height:100%;border-bottom:2px solid transparent}
.ow-tabs button.active{color:#0078d4;font-weight:600;border-bottom-color:#0078d4}
.ow-tools{display:flex;align-items:center;gap:3px;min-height:44px;flex-wrap:wrap;padding:5px 0}
/* .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-radius:6px;
  padding:8px 14px;font-size:13px;font-weight:600}
.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:22px;background:#e0e0e0;margin:0 5px}
.ow-act{display:inline-flex;align-items:center;gap:7px;color:#444;font-size:13px;padding:7px 10px;border-radius:5px}
.ow-act:hover{background:#f0f0f0}
.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:wrap;width:100%}
.tabset-compose,.toolset-compose{display:none}
.ow-ribbon.compose-mode .tabset-mail,.ow-ribbon.compose-mode .toolset-mail{display:none}
.ow-ribbon.compose-mode .tabset-compose{display:flex}
.ow-ribbon.compose-mode .toolset-compose{display:flex}
.toolset-compose button{width:30px;height:30px;border-radius:5px;color:#444;display:grid;place-items:center;font-size:14px}
.toolset-compose button:hover{background:#f0f0f0}
.toolset-compose button.on{background:#cfe4f7;color:#0f548c}
.toolset-compose button svg{width:16px;height:16px}
.toolset-compose select{height:30px;border:1px solid #e0e0e0;border-radius:5px;background:#fff;color:#444;font-size:13px;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:32px;padding:0 12px;gap:7px;font-size:13px;display:inline-flex;align-items:center;color:#333;white-space:nowrap}
.toolset-compose .ins-btn i.ph{font-size:17px}
.toolset-compose .ins-btn:hover{background:#eef2f7}
.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:#fff;border:1px solid #e0e0e0;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:#f0f6fc}

/* ---- 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:#fff;border:1px solid #e0e0e0;
  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:#444;position:relative;cursor:pointer}
.mini-bar button:hover,.mini-bar label:hover{background:#f0f0f0}
.mini-bar button.on{background:#cfe4f7;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:50px 250px 350px 1fr;overflow:hidden;min-height:0}

/* col1 rail */
.ow-rail{background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px}
.rail-ico{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;color:#444;position:relative}
.rail-ico svg{width:22px;height:22px}
.rail-ico:hover{background:#f0f0f0}
.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:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;padding:10px 8px;font-size:13px;display:flex;flex-direction:column}
.fav-head{display:flex;align-items:center;gap:7px;color:#444;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:#333;cursor:pointer}
.folder:hover{background:#f0f0f0}
.folder.active{background:#e8e8f4;color:#000;font-weight:700}
.folder .ico{width:18px;text-align:center;color:#666;font-size:1rem}
.folder.active .ico{color:#000}
.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:#666;font-size:12px;font-weight:600;border-top:1px solid #eee;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:#eef2f7}
.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}
.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:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-mail{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-chev{font-size:14px;color:#999;flex-shrink:0}
.acct-folders{margin:2px 0 6px 4px;padding-left:4px;border-left:2px solid #eef0f3}
.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 #eee}
.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:1px solid #e0e0e0;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 #ebebeb;font-size:12.5px;min-height:43px}
.list-tabs button[data-filter]{position:relative;display:flex;align-items:center;color:#605e5c;padding:0 11px 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:#f3f4f6;color:#1b1a19}
.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-tools{margin-left:auto;display:flex;align-items:center;gap:2px}
.list-tools button{width:30px;height:30px;color:#666;border-radius:5px;display:grid;place-items:center}
.list-tools button:hover{background:#f0f0f0}
/* 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{flex:1;overflow-y:auto}
.msg{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid #f3f3f3;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:#f5f5f5}
.msg.active{background:#eaeaf4;border-left-color:#6264a7}
.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}
.msg .from{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:#222}
.msg.unread .from{color:var(--primary)}
.msg .row2{display:flex;align-items:center;gap:8px;margin-top:1px}
.msg .date{font-size:12px;color:#777;white-space:nowrap;flex-shrink:0}
.msg .subj{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#444}
.msg.unread .subj{font-weight:600;color:#222}
.msg .preview{font-size:12.5px;color:#888;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:#e1e9f5;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}
/* 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:#cfe4f7;border-left-color:#0078d4}
.msg.selected:hover{background:#c3dcf3}
.msg.dragging{opacity:.45}
/* ===== Threading / conversaciones ===== */
.thread-group{border-bottom:1px solid #ebebeb}
.thread-head{border-bottom:none!important}
.thread-toggle{display:inline-flex;align-items:center;gap:3px;border:1px solid #ddd;border-radius:4px;padding:1px 6px;background:none;cursor:pointer;font-size:11px;color:#666;flex-shrink:0;transition:background .1s}
.thread-toggle:hover{background:#e8eaed}
.thread-count{font-size:11px;font-weight:700;color:#444}
.thread-body{background:#f5f6f8}
.thread-msg{display:flex;border-bottom:1px solid #ebebeb;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(--primary)}
.thread-msg .date{font-size:11px;color:#888;white-space:nowrap;flex-shrink:0;margin-left:auto}
.thread-msg .preview{font-size:12px;color:#888;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}
#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:#666;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 #e0e0e0}
.cset-group:last-child{border-right:none}
.cset-label{font-size:10px;color:#888;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:#555}
/* carpeta resaltada al arrastrar un correo encima */
.folder.drop-target{background:#cfe4f7;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 #e0e0e0;background:#f7f9fc;font-size:13px;flex-wrap:wrap;position:sticky;top:0;z-index:4}
.search-head .sh-txt{color:#333}
.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:#888;font-size:12.5px}
.search-head .sh-x:hover{color:#d83b01}
.m-folder{display:inline-block;background:#eef0f4;color:#555;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:#777}
.list-empty h3,.read-empty h3{color:#1b1a19;font-weight:600;font-size:16px;margin-top:6px}
.list-empty p,.read-empty p{font-size:13px;color:#777;max-width:280px}
.empty-art,.qr-art{opacity:.95}

/* col4 lectura */
.ow-read{background:#fff;overflow-y:auto}
.read-head{padding:16px 24px 12px;border-bottom:1px solid #eee}
.read-head h2{font-size:20px;font-weight:600;margin-bottom:12px;color:#222}
.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:#222}
.read-meta .who .addr{font-size:12.5px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-meta .date{font-size:12.5px;color:#777}
.read-atts{padding:12px 24px;border-top:1px solid #f3f3f3;display:flex;gap:10px;flex-wrap:wrap}
.att{display:flex;align-items:center;gap:8px;border:1px solid #e0e0e0;border-radius:6px;padding:8px 12px;font-size:13px;background:#fff;color:#1b1a19;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.att:hover{background:#f3f8fd;border-color:var(--primary)}
.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:#fff8e8;border:1px solid #ffe2a8;border-radius:6px;
  font-size:13px;color:#7a5b00;display:flex;align-items:center;gap:10px}
.show-images button{color:#0078d4;font-weight:600;text-decoration:underline}

.spinner{margin:48px auto;width:30px;height:30px;border:3px solid #e6e6e6;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:50px 220px 320px 1fr}}

/* ---- Redacción estilo Outlook (inline en lectura + ventanas flotantes) ---- */
.cmp{display:flex;flex-direction:column;background:#fff;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 #ddd;border-bottom:none}
.cmp-bar{display:flex;align-items:center;gap:14px;padding:12px 18px}
/* .c-send reutiliza .ow-new (clase estándar de botón importante, azul --primary) */
.c-send svg{width:16px;height:16px}
.c-send .caret{font-size:10px;margin-left:2px;border-left:1px solid rgba(255,255,255,.4);padding-left:9px}
.c-from{color:#444;font-size:13.5px}
.c-from b{font-weight:600}
.c-from .caret{font-size:10px;color:#888;margin-left:3px}
.cmp-spacer{flex:1}
.cmp-bar>button:not(.c-send){width:34px;height:34px;border-radius:6px;color:#555;display:grid;place-items:center}
.cmp-bar>button:not(.c-send):hover{background:#f0f0f0}
.cmp-bar>button svg{width:18px;height:18px}

/* ---- 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 #eee}
.catt{display:flex;align-items:center;gap:9px;border:1px solid #e0e0e0;border-radius:8px;padding:7px 9px;background:#fafafa;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:#888}
.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:#888;flex-shrink:0;font-size:13px}
.catt-x:hover{background:#eee;color:#222}
.catt-total{width:100%;font-size:11.5px;color:#888;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:#fff;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:#444;display:grid;place-items:center;position:relative}
.ow-notif-wrap>button:hover{background:#f0f0f0}
.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:#fff;
  border:1px solid #e0e0e0;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 #eee;position:sticky;top:0;background:#fff}
.notif{padding:11px 16px;border-bottom:1px solid #f2f2f2}
.notif-t{font-size:13px;font-weight:600}
.notif-b{font-size:12.5px;color:#555;margin-top:2px}
.notif-time{font-size:11px;color:#aaa;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:#999;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:12px;padding:9px 18px;border-top:1px solid #eee}
.to-pill{background:#f0f0f0;color:#333;border-radius:4px;padding:4px 12px;font-size:13px;font-weight:600;flex-shrink:0}
.cmp-row input{flex:1;border:none;outline:none;font-size:14px;background:transparent}
.cc-toggles{display:flex;gap:14px;flex-shrink:0}
.cc-toggles button{color:#0078d4;font-size:13px;font-weight:600}
.cmp-status{font-size:12.5px;color:#888;white-space:nowrap;flex-shrink:0}
.cmp-toolbar{display:flex;align-items:center;gap:2px;padding:6px 14px;border-top:1px solid #eee;flex-wrap:wrap}
.cmp-toolbar button{width:30px;height:30px;border-radius:5px;color:#444;display:grid;place-items:center;font-size:14px}
.cmp-toolbar button:hover{background:#f0f0f0}
.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:#f0f0f0}
.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:#cfe4f7;color:#0f548c}
.cmp-toolbar select{height:30px;border:1px solid #e0e0e0;border-radius:5px;background:#fff;color:#444;
  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:#f0f0f0}
.tb-hilite svg{width:16px;height:16px;color:#444}
.tb-hilite input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* menú contextual del editor */
.ctx-menu{position:fixed;z-index:9000;background:#fff;border:1px solid #e0e0e0;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:#333}
.ctx-menu button:hover{background:#f0f6fc}
.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:#1b1a19}
.ctx-msg .ctxi:hover,.ctx-msg .ctxi.open{background:#f0f6fc}
.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:#444;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:#888;font-size:16px;line-height:1;margin-left:8px}
.cmp-body{flex:1;min-height:140px;border:none;outline:none;overflow-y:auto;padding:14px 18px;font-size:14px;
  font-family:var(--font-compose);line-height:1.5}
.cmp-body[contenteditable]:empty:before{content:attr(data-ph);color:#999}

/* ---- Barra de acciones en lectura ---- */
.read-actions{display:flex;gap:4px;padding:10px 18px;border-bottom:1px solid #f0f0f0;flex-wrap:wrap}
.read-actions button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;color:#444;font-size:13px;font-weight:500}
.read-actions 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:#fff;border:1px solid #e0e0e0;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:#777;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:#333;font-size:14px}
.um-item:hover{background:#f0f6fc}
.um-item svg{width:18px;height:18px;color:#555}

/* ===== 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:#fff;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 #eee}
.modal-head h3{font-size:17px}
.modal-x{width:30px;height:30px;border-radius:8px;color:#888;font-size:15px}
.modal-x:hover{background:#f0f0f0;color:#222}
.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 #eee}
/* ===== Vista de Contactos ===== */
.contacts-view{grid-column:2 / -1;display:none;flex-direction:column;background:#fff;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:14px;padding:16px 22px;border-bottom:1px solid #ececec;flex-wrap:wrap}
.cv-head h2{font-size:19px;display:flex;align-items:center;gap:9px;color:#1b1a19}
.cv-head h2 i{color:#107c10}
.cv-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cv-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:7px;background:#f3f4f6;color:#1b1a19;font-weight:600;font-size:13px}
.cv-btn:hover{background:#e6e9ee}
.cv-btn:hover i.ph{font-family:"Phosphor-Fill"!important;color:var(--primary)}
.cv-btn.sm{padding:6px 10px;font-size:12.5px;background:transparent;color:var(--primary)}
.cv-btn.sm:hover{background:#eaf2fd}
.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:#888;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:#888;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:#333;font-size:14px}
.cv-domain-name i{color:#666}
.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.c-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ececec;border-radius:10px;background:#fff;transition:box-shadow .12s,border-color .12s}
.c-card:hover{border-color:#d7e3f3;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.c-card.mycard{background:#f7fbff;border-color:#dcebfb}
.c-av{width:42px;height:42px;flex-shrink:0;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px;background-size:cover;background-position:center}
.c-info{flex:1;min-width:0}
.c-name{font-weight:600;font-size:14px;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-mail{font-size:12.5px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-org{font-size:12px;color:#999}
.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:0;transition:opacity .12s}
.c-card:hover .c-row-actions,.c-card.mycard .c-row-actions{opacity:1}
.ca{width:30px;height:30px;border-radius:6px;color:#5a5a5a;display:grid;place-items:center;font-size:16px}
.ca:hover{background:#e1e9f5;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:#555;font-weight:600;gap:6px}
.modal.c-edit input{border:1px solid #d9d9d9;border-radius:8px;padding:9px 11px;font-size:14px;font-weight:400;color:#222}
.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:#777;font-size:13px}
.qr-hint{color:#999;font-size:12.5px;margin-top:4px}
#app.show-contacts .rail-ico#railContacts{color:var(--bc)}
.c-tel{font-size:12px;color:#777;margin-top:2px;display:flex;align-items:center;gap:5px}
.c-tel i.ph{font-size:13px}.c-ext{color:#999}
.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:#666;font-weight:600}
.modal.c-edit input,.modal.c-edit textarea{border:1px solid #d9d9d9;border-radius:8px;padding:9px 11px;font-size:14px;font-weight:400;color:#222;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:#f5f5f5;color:#777}
.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 #eee;margin-top:2px}
.ce-stat{font-size:13px;color:#555;display:flex;align-items:center;gap:6px}.ce-stat i.ph{color:#0f6cbd}
.ce-stats .muted{color:#999;font-size:12.5px}
/* autocompletar destinatarios */
.ac-box{position:fixed;z-index:9500;background:#fff;border:1px solid #e0e0e0;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:5px;max-height:280px;overflow-y:auto}
.ac-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;cursor:pointer}
.ac-item.sel,.ac-item:hover{background:#f0f6fc}
.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}
.ac-tx{display:flex;flex-direction:column;min-width:0}
.ac-tx b{font-size:13px;font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-tx span{font-size:12px;color:#888;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 #eee;color:#888}
.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:#999;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:#777;font-size:13px}
/* ficha de contacto (vista con mensajes) */
.cview{width:680px;max-width:100%;max-height:88vh;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:#1b1a19;margin-bottom:2px}
.cview-alias{color:#888;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:6px 28px 28px;border-top:1px solid #eee;margin-top:4px}
.cview-sec{margin-top:20px}
.cview-sec>h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:#888;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:#222}
.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:#999;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 #f0f0f0}
.cview-stats .muted{color:#999;font-size:12.5px}
.cview-msgs{display:flex;flex-direction:column;gap:8px}
.cv-msg{border:1px solid #ececec;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:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-subj.unread{font-weight:700;color:#111}
.cv-date{font-size:12px;color:#888;flex-shrink:0}
.cv-snip{font-size:12.5px;color:#888;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{grid-column:2 / -1;display:none;flex-direction:column;background:#fff;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{display:none}
#app.show-cal .cal-view{display:flex}
#app.show-tasks .tasks-view{display:flex}
#app.show-cal .rail-ico#railCal,#app.show-tasks .rail-ico#railTasks{color:var(--bc)}
.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:#1b1a19;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 #ececec;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:#1b1a19;padding:0 4px 6px}
.mc-nav button{width:24px;height:24px;border-radius:5px;color:#666}.mc-nav button:hover{background:#eef2f7}
.mc-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10.5px;color:#999;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:#333;display:grid;place-items:center}
.mc-day:hover{background:#eef2f7}
.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:#555;margin-bottom:8px}
.cal-mycals-h i.ph{font-size:13px;color:#888}
.cal-cal{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#333;padding:4px 4px;border-radius:6px}
.cal-cal:hover{background:#f3f4f6}
.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:#888;display:grid;place-items:center;opacity:0;flex-shrink:0;font-size:15px}
.cal-cal:hover .cal-menu{opacity:1}
.cal-menu:hover{background:#e1e9f5;color:var(--primary)}
.cal-shared-by{color:#aaa;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:#1b1a19;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:#444;padding:4px 0;border-top:1px solid #f0f0f0}
/* ===== 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:#fff;border-bottom:1px solid #ececec}
.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:#444;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:#fff;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 #f1f1f1}
.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:#222}
.ev-title-in::placeholder{color:#aab0b8;font-weight:600}
.ev-in,.ev-sel{flex:1;border:none;outline:none;font-size:14px;color:#222;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:#666;display:grid;place-items:center;flex-shrink:0}
.ev-mini:hover{background:#eef2f7;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:#888}
.ev-allday{display:flex;align-items:center;gap:6px;color:#444;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:#222;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:#fff;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 #eee;font-weight:600;font-size:13.5px}
.evd-head button{width:26px;height:26px;border-radius:6px;color:#666}.evd-head button:hover{background:#eef2f7}
.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:#aaa;background:#fff;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:#777;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 #eee;border-top:1px solid #eee;overflow-y:auto}
.cal-cell{border-right:1px solid #eee;border-bottom:1px solid #eee;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:#fafafa}.cal-cell.out .cal-daynum{color:#bbb}
.cal-daynum{font-size:12.5px;color:#444;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:#f3f8ff}
.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:#fff;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:#555;background:#fff;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 #eee}
.ct-dayhead{padding:8px 6px;text-align:center;font-size:13px;color:#444;border-right:1px solid #eee}
.ct-dayhead .ct-dow{text-transform:uppercase;font-size:11px;color:#888}
.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 #e0e0e0;max-height:96px;overflow-y:auto;flex-shrink:0;background:#fafbfc}
.ct-allday-lbl{font-size:11px;color:#999;padding:5px 6px;border-right:1px solid #eee;display:flex;align-items:center}
.ct-allday-cell{min-height:26px;padding:3px;border-right:1px solid #eee;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 #eee}
.ct-hour{height:46px;position:relative}
.ct-hour span{position:absolute;top:-7px;right:6px;font-size:11px;color:#999}
.ct-col{position:relative;border-right:1px solid #eee;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:#fff;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 #eee;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:#333;font-size:14px;font-weight:500;text-align:left}
.td-navi i.ph{font-size:17px;color:#666}
.td-navi:hover{background:#f3f4f6}
.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:#666}
.td-add .td-more-opts:hover{background:#e1e9f5;color:var(--primary)}
.td-add{display:flex;align-items:center;gap:12px;background:#f7f9fb;border:1px solid #e8e8e8;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:#eaf2fd}
.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:#fff;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:#222}
.td-add-opts{display:none;align-items:center;gap:4px;padding:8px 12px;border-top:1px solid #f0f0f0;background:#fafbfc}
.td-add2.open .td-add-opts{display:flex}
.td-aopt{width:34px;height:34px;border-radius:8px;color:#666;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:#aaa;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 #eee;border-radius:10px;margin-bottom:7px;background:#fff}
.td-row:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.td-row.done .td-title{text-decoration:line-through;color:#999}
.td-body{flex:1;min-width:0}
.td-title{font-size:14px;color:#222;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:#888;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:#999;font-weight:700;margin:18px 0 8px}
.btn-mini{padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;border:1px solid #d9d9d9;background:#fff;color:#333}
.btn-mini.ghost{background:#fff}.btn-mini.ghost:hover{background:#f3f4f6}
.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:#eef2f7;color:#555}
.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:#333}
.ev-notes{font-size:13.5px;color:#555;white-space:pre-wrap}
.ev-att{font-size:13px;color:#444}
.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:#e8f1fb}
.btn-mini.ghost{color:#777;border-color:#e0e0e0;background:#fff}
.btn-mini.ghost:hover{background:#f5f5f5}
.pm-field{display:flex;flex-direction:column;gap:6px}
.pm-field span{font-size:12.5px;color:#666;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:#444;padding:2px 2px}
.pm-sec{border:1px solid #eee;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 #eee;border-radius:9px;font-size:13.5px}
.pk-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-date{color:#999;font-size:12px}
.pk-del{width:24px;height:24px;border-radius:50%;color:#999}
.pk-del:hover{background:#fde9e3;color:#d83b01}
.pm-empty{color:#999;font-size:13px;padding:4px 2px}
.pm-toggle{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#444;cursor:pointer}
.pm-toggle input{margin-top:2px;width:16px;height:16px;accent-color:#0078d4;flex-shrink:0}

/* ===================== 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}
  .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:#333;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:#fff;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:#fff;border-bottom:1px solid #eee;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:#fff;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:#777;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}
  /* calendario móvil: celdas más compactas */
  .cal-grid{padding:0 6px 6px}
  .cal-cell{min-height:62px;padding:2px 3px}
  .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 #eee;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:780px;max-width:96vw;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.cfg-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee}
.cfg-head h3{font-size:17px;font-weight:700;color:#1b1a19}
.cfg-body{display:flex;min-height:0;flex:1}
.cfg-nav{width:210px;flex-shrink:0;border-right:1px solid #eee;padding:12px 10px;display:flex;flex-direction:column;gap:3px;background:#fafafa;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:#444;text-align:left;width:100%;font-family:inherit}
.set-navi i.ph{font-size:18px;color:#888}
.set-navi:hover{background:#f0f0f0}
.set-navi.active{background:#e9f1fb;color:var(--primary);font-weight:600}
.set-navi.active i.ph{color:var(--primary)}
.cfg-content{flex:1;min-width:0;padding:18px 24px 24px;overflow-y:auto}
.cfg-content h2{font-size:20px;font-weight:700;color:#1b1a19;margin-bottom:6px}
.set-sel{border:1px solid #d9d9d9;border-radius:8px;padding:9px 11px;font-size:14px;font-family:inherit;color:#222;background:#fff;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 #f0f0f0;display:flex;justify-content:flex-end}
.set-sec{padding:16px 0;border-bottom:1px solid #f0f0f0}
.set-sec:last-child{border-bottom:none}
.set-sec h4{font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#1b1a19}
.set-sec h4 i.ph{color:var(--primary)}
.set-hint{font-size:12.5px;color:#888}
.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:#444}
.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 #eee;border-radius:10px}
.set-acc.cur{background:#f3f8ff;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 #d9d9d9;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:#555;font-weight:600;margin-bottom:12px}
.set-field textarea{border:1px solid #d9d9d9;border-radius:8px;padding:9px 11px;font-size:14px;font-weight:400;color:#222;font-family:inherit}
.set-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#333}
.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 #eee;padding:8px;gap:6px}
  .set-navi{flex-shrink:0;white-space:nowrap;width:auto;padding:8px 11px}
  .cfg-content{padding:14px 16px 24px}
}