:root{--navy:#050b2e;--navy2:#07145f;--gold:#ff7a00;--gold2:#ffb21a;--bronze:#0b1e96;--blue:#087bff;--ink:#101828;--muted:#667085;--line:#d8e6ff;--cream:#f4f8ff;--soft:#eef6ff;--shadow:0 24px 70px rgba(5,20,95,.16)}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 14% 5%,rgba(255,178,26,.34),transparent 28%),radial-gradient(circle at 92% 18%,rgba(255,122,0,.18),transparent 26%),linear-gradient(135deg,#f8fbff 0%,#eaf4ff 48%,#eef2f8 100%)}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}.btn,.compose,.search button,.compose-form button,.refresh-btn{border:0;border-radius:18px;background:linear-gradient(135deg,var(--gold2),var(--gold) 58%,var(--bronze));color:#061489;font-weight:900;box-shadow:0 14px 32px rgba(11,30,150,.24);cursor:pointer;transition:.18s}.btn:hover,.compose:hover,.search button:hover,.compose-form button:hover,.refresh-btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.login-body{min-height:100dvh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 12% 12%,rgba(255,178,26,.28),transparent 34%),linear-gradient(135deg,#070b15,#10192d 56%,#07145f)}.login-card{width:min(470px,94vw);padding:34px;border-radius:32px;background:rgba(255,255,255,.10);backdrop-filter:blur(20px);border:1px solid rgba(255,178,26,.26);box-shadow:0 30px 90px rgba(0,0,0,.45);color:white}.brand-logo{display:block;max-width:230px;height:auto}.login-card .brand-logo{margin:0 auto 20px}.login-card h1{font-size:34px;margin:10px 0 8px}.login-card p{color:#d9e2ef}.login-card label,.compose-form label{display:block;margin:14px 0 7px;font-weight:850}.login-card input,.search input,.compose-form input,.compose-form textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:17px;padding:14px 16px;outline:none}.login-card input:focus,.search input:focus,.compose-form input:focus,.compose-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,122,0,.16)}.login-card button{width:100%;padding:14px 18px;margin-top:18px}.remember-row{display:flex!important;align-items:center;gap:10px;color:#fff}.remember-row input{width:18px!important;height:18px!important;accent-color:var(--gold)}.install-note{margin-top:16px;padding:13px 14px;border-radius:16px;background:rgba(255,178,26,.12);border:1px solid rgba(255,178,26,.22);color:#e8edf7;font-size:13px}.muted{text-align:center;color:#bec8d8}.alert,.success{padding:14px 16px;border-radius:16px;margin:16px 0}.alert{background:#fee2e2;color:#991b1b}.success{background:#dcfce7;color:#166534}
.shell{height:100dvh;display:grid;grid-template-columns:280px minmax(380px,470px) minmax(520px,1fr);overflow:hidden}.sidebar{height:100dvh;width:280px;padding:20px;background:linear-gradient(180deg,#081123,#101827 55%,#050b2e);color:#eef3fb;border-right:1px solid rgba(255,178,26,.16);display:flex;flex-direction:column;overflow:auto}.sidebar .brand{display:block}.sidebar .brand-logo{max-width:210px;margin:0 auto 10px}.account-email{display:block;text-align:center;color:#d5dceb;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compose{display:block;text-align:center;margin:18px 0;padding:14px 18px}.sidebar-install-btn{width:100%;min-height:50px;border-radius:20px;border:1px solid rgba(255,178,26,.25);margin:0 0 18px;background:linear-gradient(135deg,rgba(255,250,240,.14),rgba(255,178,26,.18));color:#fff8dc;font-weight:900;cursor:pointer}.sidebar-install-btn.ready{background:linear-gradient(135deg,#fff3e2,#ffb21a 55%,#ff7a00);color:#061489}.nav-title{font-size:12px;text-transform:uppercase;letter-spacing:.20em;color:#ffb21a;margin:8px 0 12px;font-weight:900}.sidebar nav{background:rgba(255,255,255,.035);border:1px solid rgba(255,178,26,.10);border-radius:23px;padding:8px}.sidebar nav a{display:flex;align-items:center;gap:12px;min-height:50px;padding:12px 13px;border-radius:18px;color:#d6deec;margin-bottom:7px;font-weight:800;transition:.18s}.sidebar nav a:before{width:26px;text-align:center}.sidebar nav a[href*="inbox"]:before{content:'📥'}.sidebar nav a[href*="sent"]:before{content:'✈️'}.sidebar nav a[href*="drafts"]:before{content:'📝'}.sidebar nav a[href*="spam"]:before{content:'🛡️'}.sidebar nav a[href*="trash"]:before{content:'🗑️'}.sidebar nav a span{flex:1}.count-badge{min-width:30px;height:25px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-style:normal;color:#eef3fb}.count-badge.hot{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#061489}.sidebar nav a.active,.sidebar nav a:hover{background:linear-gradient(135deg,rgba(255,178,26,.23),rgba(255,255,255,.07));box-shadow:inset 0 0 0 1px rgba(255,178,26,.26);color:#fff}.storage-card{margin-top:auto;margin-bottom:18px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,178,26,.18);padding:16px;color:#d8e0ef}.bar{height:8px;background:rgba(255,255,255,.14);border-radius:20px;margin:12px 0;overflow:hidden}.bar span{display:block;height:100%;width:27%;background:linear-gradient(90deg,var(--gold2),var(--gold))}.logout{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:17px;background:rgba(255,255,255,.035);color:#fecaca;font-weight:900}
.main{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:rgba(255,255,255,.52);backdrop-filter:blur(16px);border-right:1px solid var(--line)}.top{flex:0 0 auto;padding:20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.68)}.menu{display:none}.mobile-logo{display:none}.title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.top h1{margin:0;font-size:28px;letter-spacing:-.04em}.folder-subtitle{margin:4px 0 0;color:#7a6c50;font-size:13px;font-weight:800}.top-actions{display:flex;justify-content:flex-end}.refresh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px}.search{display:flex;gap:10px;width:100%;margin-top:15px;padding:0}.search input{min-width:0}.search button{padding:0 22px}.list{flex:1;overflow:auto;padding:14px 10px 24px}.mail{min-height:72px;display:flex;align-items:center;margin:8px 0;border-radius:22px;border:1px solid transparent;background:rgba(255,255,255,.74);box-shadow:0 8px 24px rgba(31,41,55,.05);overflow:hidden;transition:.18s;position:relative}.mail:hover{transform:translateY(-1px);border-color:rgba(255,122,0,.28);box-shadow:0 18px 42px rgba(5,20,95,.10)}.mail>a{display:flex;align-items:center;gap:13px;padding:14px 12px;flex:1;min-width:0}.mail.unread{background:linear-gradient(90deg,rgba(255,178,26,.22),rgba(255,255,255,.92) 48%);border-color:rgba(255,122,0,.38)}.mail.unread:before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:20px;background:var(--gold)}.mail.selected{box-shadow:inset 5px 0 0 var(--gold),0 15px 38px rgba(5,20,95,.12)}.avatar{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--gold2),var(--gold));display:grid;place-items:center;font-weight:950;color:#061489;flex:0 0 48px}.meta{min-width:0}.meta b,.meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta b{font-size:15px;max-width:230px}.meta span{font-size:15px;color:#4b5563;max-width:230px}.mail:not(.unread) .meta b{font-weight:700;color:#4b5563}.date{margin-left:auto;white-space:nowrap;text-align:right;color:#6b7280;font-size:13px}.date small{display:block;color:#9ca3af;margin-top:4px}.inline{display:flex;gap:6px;padding-right:10px}.inline button{width:40px;height:40px;border:0;border-radius:14px;background:#eaf4ff;color:#061489;cursor:pointer}.empty{padding:48px;text-align:center;color:#6b7280}.pager{display:flex;justify-content:center;gap:18px;margin:20px}.pager a{color:#0b1e96;font-weight:800}
.preview{height:100dvh;overflow:hidden;background:rgba(255,255,255,.58)}.preview-inner{height:100%;display:grid;place-items:center;padding:28px}.welcome-card{max-width:570px;padding:34px;border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}.welcome-card img{max-width:280px}.welcome-card h2{font-size:30px;margin:20px 0 10px;letter-spacing:-.04em}.mail-reader-panel{width:100%;height:calc(100dvh - 56px);display:flex;flex-direction:column;overflow:hidden;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow)}.reader-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f3f8ff,#fff)}.reader-actions>a{color:#0b1e96;font-weight:950}.reader-actions>div{display:flex;gap:10px;flex-wrap:wrap}.reader-actions .btn{padding:11px 15px}.mail-reader-panel h2{flex:0 0 auto;font-size:27px;line-height:1.12;letter-spacing:-.04em;margin:0;padding:20px 22px 12px}.reader-from{flex:0 0 auto;margin:0 22px 14px;padding:13px 15px;border-radius:18px;background:#f3f8ff;border:1px solid var(--line);color:#4b5563}.reader-from span{float:right;color:#0b1e96}.message-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:18px 22px 26px;line-height:1.6;background:#fff}.message-body img{max-width:100%;height:auto}.message-body table{max-width:100%!important;width:auto!important}.message-body pre{white-space:pre-wrap;word-break:break-word;font-family:inherit}.reader-footer{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 20px;border-top:1px solid rgba(255,122,0,.22);background:#fff3e2;color:#0b1e96;font-size:13px}.reader-footer img{height:32px;max-width:125px;object-fit:contain}.compose-panel{width:100%;height:calc(100dvh - 56px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow)}.compose-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f3f8ff,#fff)}.compose-head a{color:#0b1e96;font-weight:950}.compose-head h2{margin:8px 0 0;font-size:28px}.compose-head img{width:140px;max-width:34%}.compose-form{display:grid;gap:6px;padding:18px 22px;overflow:auto}.compose-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.compose-form textarea{resize:vertical;min-height:220px}.compose-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.filepick{display:inline-flex!important;align-items:center;gap:8px;padding:12px 14px;border-radius:16px;background:#f3f8ff;border:1px solid var(--line);cursor:pointer}.filepick input{display:none}.menu-backdrop{display:none}
.mini-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;max-width:min(92vw,430px);padding:14px 18px;border-radius:18px;background:rgba(17,24,39,.95);color:#fff;font-weight:850;box-shadow:0 18px 48px rgba(0,0,0,.28);text-align:center}.install-help{position:fixed;inset:0;z-index:9998;background:rgba(7,10,18,.56);backdrop-filter:blur(8px);display:grid;place-items:end center;padding:14px}.install-help-card{width:min(520px,100%);background:#fffdf7;border:1px solid rgba(255,122,0,.32);box-shadow:0 28px 80px rgba(0,0,0,.32);border-radius:28px;padding:20px;color:#111827}.install-help-card h3{margin:0 0 10px;font-size:24px}.install-help-card p{line-height:1.45}.install-help-card button{width:100%;min-height:48px;border:0;border-radius:18px;background:linear-gradient(135deg,var(--gold2),var(--gold));font-weight:900}.mobile-loading-card{height:100dvh;display:grid;place-items:center;align-content:center;gap:8px;background:linear-gradient(145deg,#fffdf7,#f8f0dd);font-size:18px}.mobile-loading-card span{font-size:14px;color:#7a6c50}
@media(max-width:1100px){.shell{grid-template-columns:280px minmax(380px,470px) minmax(420px,1fr)}}
@media(max-width:980px){html,body{overflow:hidden}.shell{display:block;height:100dvh;overflow:hidden}.sidebar{position:fixed;left:-82vw;top:0;z-index:60;width:76vw;max-width:360px;transition:.25s}.sidebar.open{left:0}.menu-backdrop.active{display:block;position:fixed;inset:0;background:rgba(4,8,17,.45);z-index:50}.main{height:100dvh;border-right:0}.top{padding:18px 20px 12px}.menu{display:block;position:absolute;left:20px;top:26px;z-index:5;border:0;background:#fff4d7;border-radius:18px;width:58px;height:58px;font-size:22px;color:#061489}.mobile-logo{display:block;width:min(280px,68vw);margin:0 auto 6px}.title-row{display:block;text-align:center}.top h1{text-align:center;font-size:34px}.folder-subtitle{display:none}.top-actions{justify-content:center;margin-top:12px}.refresh-btn{min-height:52px;width:min(260px,100%);border-radius:22px;font-size:17px}.search{margin:18px auto 0;width:min(560px,100%);padding:12px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 30px rgba(5,20,95,.08);display:block}.search input{font-size:18px;text-align:center;min-height:56px;border:0;box-shadow:none!important}.search button{width:100%;min-height:56px;font-size:18px;border-radius:20px;margin-top:10px}.list{padding:18px 18px 110px}.mail{border-radius:28px;margin-bottom:16px;min-height:88px}.mail>a{padding:16px 14px;gap:14px}.avatar{width:56px;height:56px;border-radius:18px;font-size:20px}.meta b{font-size:18px;max-width:44vw}.meta span{font-size:17px;max-width:44vw}.date{display:none}.inline button{width:52px;height:52px;border-radius:20px;font-size:22px}.mail.selected{box-shadow:0 8px 24px rgba(31,41,55,.05)!important}.preview{display:none}.welcome-card{display:none}
  body.mobile-reader-open .preview,.shell.has-reader .preview{display:block!important;position:fixed!important;inset:0!important;z-index:500!important;width:100vw!important;height:100dvh!important;overflow:hidden!important;background:#f8fbff!important}.shell.has-reader .sidebar,.shell.has-reader .main{display:none!important}.preview-inner{height:100dvh!important;display:block!important;padding:0!important;overflow:hidden!important}.mail-reader-panel,.compose-panel{height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#f8fbff!important}.reader-actions,.compose-head{padding:14px 16px!important;position:sticky!important;top:0!important;z-index:20!important;box-shadow:0 12px 28px rgba(5,20,95,.10)!important}.reader-actions>a:first-child,.compose-head a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:16px;padding:0 14px;background:#fff;border:1px solid rgba(255,122,0,.25);color:#0b1e96;font-size:0!important}.reader-actions>a:first-child:after,.compose-head a:after{content:'← Bandeja';font-size:15px!important;font-weight:950}.reader-actions .btn{min-height:42px;border-radius:16px;padding:0 13px;font-size:14px}.mail-reader-panel h2{font-size:21px!important;line-height:1.18!important;padding:18px 18px 10px!important;max-height:112px!important;overflow:auto!important}.reader-from{margin:0 16px 12px!important;padding:13px!important}.reader-from span{display:block;float:none;margin-top:5px}.message-body{padding:16px 16px 24px!important;font-size:16px!important;line-height:1.55!important}.reader-footer{min-height:54px}.compose-head h2{font-size:24px}.compose-head img{width:110px}.compose-grid{grid-template-columns:1fr}.compose-form{padding:16px}.compose-form input,.compose-form textarea{font-size:16px}.compose-bottom{position:sticky;bottom:0;background:#f8fbff;padding-top:10px;display:grid}.filepick{justify-content:center}.filepick+button,.compose-bottom button{min-height:52px}.sidebar .brand-logo{max-width:225px}.sidebar-install-btn{font-size:18px;min-height:56px}.storage-card{margin-top:18px}.logout{margin-top:0;margin-bottom:18px}}
@media(max-width:520px){.sidebar{width:76vw}.meta b,.meta span{max-width:36vw}.list{padding-left:18px;padding-right:18px}.inline{gap:6px}.inline button{width:48px;height:48px}.install-help{align-items:end}.install-help-card{border-radius:26px 26px 18px 18px}.reader-actions{gap:8px}.reader-actions>div{gap:7px}}

/* Mobile reader alignment fix v3 */
@media(max-width:980px){
  .mail-reader-panel{background:#f8fbff!important;}
  .reader-actions{display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:10px!important;}
  .reader-actions>div{justify-content:flex-end!important;gap:8px!important;}
  .reader-actions .btn{min-width:0!important;min-height:44px!important;padding:0 12px!important;font-size:14px!important;border-radius:16px!important;white-space:nowrap!important;}
  .mail-reader-panel h2{font-size:22px!important;line-height:1.18!important;padding:18px 18px 10px!important;max-height:132px!important;overflow:auto!important;word-break:break-word!important;overflow-wrap:anywhere!important;}
  .reader-from{font-size:15px!important;line-height:1.35!important;word-break:break-word!important;overflow-wrap:anywhere!important;}
  .message-body.email-canvas{overflow-x:hidden!important;background:#fff!important;border-top:1px solid rgba(255,122,0,.12)!important;}
  .message-body.email-canvas,
  .message-body.email-canvas *{max-width:100%!important;box-sizing:border-box!important;}
  .message-body.email-canvas table{width:100%!important;min-width:0!important;table-layout:auto!important;border-collapse:collapse!important;}
  .message-body.email-canvas tbody,
  .message-body.email-canvas tr{max-width:100%!important;}
  .message-body.email-canvas td,
  .message-body.email-canvas th{min-width:0!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;padding-left:8px!important;padding-right:8px!important;}
  .message-body.email-canvas img{max-width:100%!important;height:auto!important;object-fit:contain!important;}
  .message-body.email-canvas div,
  .message-body.email-canvas p,
  .message-body.email-canvas span,
  .message-body.email-canvas a{word-break:break-word!important;overflow-wrap:anywhere!important;}
  .reader-footer{position:sticky!important;bottom:0!important;z-index:10!important;}
}
@media(max-width:430px){
  .reader-actions{grid-template-columns:1fr!important;}
  .reader-actions>a:first-child{justify-self:start!important;}
  .reader-actions>div{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;}
  .reader-actions .btn{width:100%!important;text-align:center!important;}
  .mail-reader-panel h2{font-size:20px!important;}
  .message-body.email-canvas{font-size:15px!important;}
}

/* Mobile reader action bar PRO compact fix */
@media(max-width:980px){
  .reader-actions{
    display:grid!important;
    grid-template-columns:auto 1fr 1fr!important;
    align-items:center!important;
    gap:8px!important;
    padding:10px 12px!important;
    background:rgba(255,250,240,.94)!important;
    backdrop-filter:blur(14px)!important;
    border-bottom:1px solid rgba(255,122,0,.20)!important;
  }
  .reader-actions>a:first-child{
    width:auto!important;
    min-width:104px!important;
    min-height:42px!important;
    padding:0 12px!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(5,20,95,.06)!important;
  }
  .reader-actions>a:first-child:after{
    content:'← Bandeja'!important;
    font-size:14px!important;
    font-weight:950!important;
  }
  .reader-actions>div{
    display:contents!important;
  }
  .reader-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:0 8px!important;
    border-radius:15px!important;
    font-size:14px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    box-shadow:0 8px 22px rgba(11,30,150,.18)!important;
  }
  .mail-reader-panel h2{
    padding-top:16px!important;
    margin-top:0!important;
  }
}
@media(max-width:430px){
  .reader-actions{
    grid-template-columns:104px 1fr 1fr!important;
    gap:7px!important;
    padding:9px 10px!important;
  }
  .reader-actions>a:first-child{
    min-width:0!important;
    min-height:40px!important;
    padding:0 8px!important;
  }
  .reader-actions>a:first-child:after{
    font-size:13px!important;
  }
  .reader-actions .btn{
    min-height:40px!important;
    border-radius:14px!important;
    font-size:13px!important;
    padding:0 6px!important;
  }
}
@media(max-width:360px){
  .reader-actions{grid-template-columns:96px 1fr 1fr!important;gap:6px!important;}
  .reader-actions>a:first-child:after{font-size:12.5px!important;}
  .reader-actions .btn{font-size:12.5px!important;}
}

/* Premium soft gradient background for PC + mobile */
:root{
  --page-glow-gold: rgba(255,178,26,.30);
  --page-glow-bronze: rgba(11,30,150,.16);
  --page-glow-blue: rgba(7,16,31,.10);
}
body{
  background:
    radial-gradient(circle at 8% 10%, var(--page-glow-gold) 0%, rgba(255,178,26,.14) 16%, transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255,250,240,.90) 0%, rgba(255,250,240,.40) 20%, transparent 42%),
    radial-gradient(circle at 86% 86%, rgba(255,122,0,.18) 0%, transparent 32%),
    linear-gradient(135deg,#f3f8ff 0%,#f7efe1 38%,#eef3f8 72%,#f9f5ec 100%) !important;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(120deg,rgba(7,16,31,.055),transparent 28%,rgba(255,178,26,.08) 62%,transparent),
    radial-gradient(circle at 50% 55%,rgba(255,255,255,.72),transparent 48%);
}
.main{
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,250,240,.58)) !important;
}
.preview{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,178,26,.20),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,250,240,.72)) !important;
}
.top,
.reader-actions,
.compose-head{
  background:linear-gradient(180deg,rgba(255,253,247,.92),rgba(255,249,235,.78)) !important;
}
@media(max-width:980px){
  body{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,178,26,.25) 0%, transparent 34%),
      radial-gradient(circle at 100% 80%, rgba(255,122,0,.16) 0%, transparent 34%),
      linear-gradient(180deg,#f3f8ff 0%,#f8fbff 45%,#f4f6fa 100%) !important;
  }
  .main{
    background:linear-gradient(180deg,rgba(255,253,247,.88),rgba(255,255,255,.74)) !important;
  }
  .top{
    background:linear-gradient(180deg,rgba(255,250,240,.96),rgba(255,255,255,.80)) !important;
  }
  .list{
    background:linear-gradient(180deg,rgba(255,250,240,.55),rgba(255,255,255,.72)) !important;
  }
}

/* Local notification UI PRO */
.mail-toast{position:fixed;right:22px;bottom:24px;z-index:10000;display:flex;gap:14px;align-items:flex-start;max-width:min(440px,calc(100vw - 28px));padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(11,18,32,.98),rgba(29,24,13,.96));color:#fff;border:1px solid rgba(255,178,26,.28);box-shadow:0 24px 80px rgba(0,0,0,.36);transform:translateY(22px);opacity:0;transition:.24s ease}.mail-toast.show{transform:translateY(0);opacity:1}.mail-toast-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#061489;font-size:24px;flex:0 0 46px}.mail-toast b,.mail-toast span,.mail-toast small{display:block}.mail-toast b{font-size:15px}.mail-toast span{font-size:13px;color:#cfe7ff;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}.mail-toast small{font-size:13px;color:#dce3ef;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}.notify-btn.ready{background:linear-gradient(135deg,#fff3e2,#ffb21a 55%,#ff7a00)!important;color:#061489!important;border-color:rgba(255,178,26,.55)!important}@media(max-width:980px){.mail-toast{left:14px;right:14px;bottom:18px;max-width:none;border-radius:24px}.mail-toast span,.mail-toast small{max-width:calc(100vw - 118px)}}

/* === FIX PRO 2026-05-20: Login legible + notificaciones visibles === */
.login-body{
  background:
    radial-gradient(circle at 18% 8%,rgba(255,178,26,.38),transparent 28%),
    radial-gradient(circle at 90% 20%,rgba(11,30,150,.18),transparent 30%),
    linear-gradient(135deg,#f3f8ff 0%,#f6edda 46%,#eef2f8 100%) !important;
}
.login-card{
  background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,248,230,.82)) !important;
  color:#111827 !important;
  border:1px solid rgba(255,122,0,.35) !important;
  box-shadow:0 32px 90px rgba(31,41,55,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.login-card h1{color:#111827 !important;text-shadow:none !important;}
.login-card p,.login-card .muted{color:#6b5b35 !important;}
.login-card label{color:#1f2937 !important;}
.login-card input{background:#fff !important;color:#111827 !important;border-color:#e5d7bd !important;}
.login-card input::placeholder{color:#9ca3af !important;}
.remember-row{color:#1f2937 !important;}
.remember-row span{color:#1f2937 !important;font-weight:850;}
.login-card button{
  border:0 !important;
  background:linear-gradient(135deg,#ffb21a,#ff7a00 58%,#0b1e96) !important;
  color:#061489 !important;
  font-weight:950 !important;
  border-radius:18px !important;
  box-shadow:0 16px 34px rgba(11,30,150,.22) !important;
}
.install-note{
  background:rgba(255,178,26,.18) !important;
  color:#061489 !important;
  border-color:rgba(255,122,0,.32) !important;
}
.install-note b{color:#111827 !important;}
.mail-toast{z-index:2147483000 !important;}
.mini-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2147483000;background:#111827;color:#fff;padding:13px 18px;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.25);font-weight:850;max-width:calc(100vw - 28px);text-align:center}
@media(max-width:760px){.login-card{padding:28px 22px}.login-card h1{font-size:30px}.mini-toast{bottom:18px}}

/* === NOTIFICACIONES PRO MAX: Gmail/macOS style === */
.mail-toast.gmail-style{
  right:24px!important;
  bottom:24px!important;
  padding:14px 14px!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,248,230,.93))!important;
  color:#111827!important;
  border:1px solid rgba(255,122,0,.34)!important;
  box-shadow:0 24px 80px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.9)!important;
  cursor:pointer;
}
.mail-toast.gmail-style .mail-toast-icon{background:linear-gradient(135deg,#ffb21a,#ff7a00 56%,#0b1e96)!important;color:#061489!important;box-shadow:0 10px 28px rgba(11,30,150,.22)}
.mail-toast.gmail-style b{color:#111827!important;font-weight:950;font-size:15px!important}
.mail-toast.gmail-style span{color:#061489!important;font-weight:850!important}
.mail-toast.gmail-style small{color:#4b5563!important}
.mail-toast.gmail-style em{display:block;margin-top:5px;font-size:12px;color:#0b1e96;font-style:normal;font-weight:900}
.mail-toast.gmail-style button{margin-left:auto;border:0;background:rgba(17,24,39,.08);width:28px;height:28px;border-radius:999px;font-size:18px;line-height:1;color:#111827;cursor:pointer}
.count-badge.hot{background:linear-gradient(135deg,#facc15,#ff7a00)!important;color:#061489!important;box-shadow:0 0 0 4px rgba(255,178,26,.16),0 10px 22px rgba(11,30,150,.26)!important}
.notify-btn.ready::after{content:' · 10s';font-size:11px;opacity:.75;margin-left:4px}
@media(max-width:980px){
  .mail-toast.gmail-style{left:12px!important;right:12px!important;bottom:18px!important;border-radius:24px!important;padding:14px!important}
  .mail-toast.gmail-style .mail-toast-icon{width:44px;height:44px;flex-basis:44px}
  .mail-toast.gmail-style button{width:30px;height:30px}
}

/* Air-World visual polish */
.login-card .brand-logo{max-width:360px;width:92%;filter:drop-shadow(0 18px 36px rgba(0,0,0,.22))}.sidebar .brand-logo{max-width:232px;width:100%;filter:drop-shadow(0 12px 24px rgba(0,0,0,.24))}.mobile-logo{max-width:245px!important}.welcome-card img{max-width:350px;width:92%}.compose-head img{width:210px}.login-body{background:radial-gradient(circle at 16% 10%,rgba(255,122,0,.30),transparent 28%),radial-gradient(circle at 84% 18%,rgba(8,123,255,.28),transparent 30%),linear-gradient(135deg,#040823,#07145f 56%,#0b1e96)}.sidebar{background:radial-gradient(circle at 20% 0%,rgba(255,122,0,.18),transparent 32%),linear-gradient(180deg,#040823,#07145f 54%,#050b2e)}body{background:radial-gradient(circle at 12% 8%,rgba(255,122,0,.18),transparent 28%),radial-gradient(circle at 92% 18%,rgba(8,123,255,.22),transparent 30%),linear-gradient(135deg,#f8fbff 0%,#eaf4ff 52%,#fff3e2 100%)}

/* === AIR-WORLD PRO SOFT UI v2 ===
   Colores premium suaves aplicados a todo el sistema + botón Actualizar alineado
*/
:root{
  --aw-blue:#123fd3;
  --aw-blue-2:#0b2f9f;
  --aw-orange:#ff6b12;
  --aw-orange-2:#ff9b20;
  --aw-ink:#0f1a33;
  --aw-muted:#64748b;
  --aw-line:#e7edf7;
  --aw-card:#ffffff;
  --aw-soft:#f7faff;
  --aw-shadow:0 18px 55px rgba(15,39,90,.10);
}
body{
  color:var(--aw-ink)!important;
  background:
    radial-gradient(circle at 92% 7%,rgba(255,155,32,.20) 0%,rgba(255,155,32,.10) 18%,transparent 39%),
    radial-gradient(circle at 76% 93%,rgba(18,63,211,.16) 0%,rgba(18,63,211,.07) 24%,transparent 48%),
    radial-gradient(circle at 4% 10%,rgba(255,107,18,.08),transparent 32%),
    linear-gradient(135deg,#fbfdff 0%,#f7faff 45%,#fff8ef 100%)!important;
}
body::before{
  background:
    linear-gradient(120deg,rgba(18,63,211,.035),transparent 28%,rgba(255,107,18,.045) 72%,transparent),
    radial-gradient(circle at 56% 58%,rgba(255,255,255,.80),transparent 52%)!important;
}
.shell{grid-template-columns:300px minmax(410px,490px) minmax(520px,1fr)!important;}
.sidebar{
  width:300px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(250,252,255,.90))!important;
  color:var(--aw-ink)!important;
  border-right:1px solid var(--aw-line)!important;
  box-shadow:12px 0 36px rgba(15,39,90,.045)!important;
}
.sidebar .brand-logo{max-width:238px!important;filter:drop-shadow(0 10px 22px rgba(18,63,211,.12))!important;}
.account-email{color:#475569!important;font-weight:700!important;}
.nav-title{color:var(--aw-orange)!important;letter-spacing:.18em!important;}
.sidebar nav,
.storage-card{
  background:rgba(255,255,255,.78)!important;
  border:1px solid var(--aw-line)!important;
  box-shadow:0 12px 34px rgba(15,39,90,.055)!important;
}
.sidebar nav a{
  color:#4b5563!important;
  background:transparent!important;
}
.sidebar nav a.active,
.sidebar nav a:hover{
  background:linear-gradient(135deg,rgba(18,63,211,.10),rgba(255,107,18,.07))!important;
  box-shadow:inset 0 0 0 1px rgba(18,63,211,.10)!important;
  color:var(--aw-blue-2)!important;
}
.count-badge{background:#eef4ff!important;color:var(--aw-blue-2)!important;}
.count-badge.hot{background:linear-gradient(135deg,var(--aw-orange-2),var(--aw-orange))!important;color:#fff!important;}
.storage-card{color:#475569!important;}
.storage-card b{color:var(--aw-ink)!important;}
.bar{background:#e7edf7!important;}
.bar span{background:linear-gradient(90deg,var(--aw-orange),var(--aw-blue))!important;}
.logout,
.sidebar-install-btn,
.compose,
.notify-btn{
  background:#fff!important;
  color:var(--aw-blue-2)!important;
  border:1px solid var(--aw-line)!important;
  box-shadow:0 12px 34px rgba(15,39,90,.07)!important;
}
.logout{color:var(--aw-blue-2)!important;}
.sidebar-install-btn.ready,
.notify-btn.ready,
.compose:hover,
.sidebar-install-btn:hover,
.notify-btn:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,247,236,.94))!important;
  color:var(--aw-blue-2)!important;
  border-color:rgba(255,107,18,.22)!important;
}
.btn,.compose,.search button,.compose-form button,.refresh-btn{
  background:linear-gradient(135deg,var(--aw-orange-2),var(--aw-orange) 48%,var(--aw-blue) 100%)!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(255,107,18,.18),0 10px 24px rgba(18,63,211,.10)!important;
  border:0!important;
}
.main{
  background:rgba(255,255,255,.70)!important;
  border-right:1px solid var(--aw-line)!important;
  backdrop-filter:blur(18px)!important;
}
.top{
  padding:24px 24px 18px!important;
  background:rgba(255,255,255,.84)!important;
  border-bottom:1px solid var(--aw-line)!important;
}
.title-row{display:grid!important;grid-template-columns:1fr auto!important;align-items:start!important;gap:18px!important;}
.top h1{font-size:30px!important;color:var(--aw-ink)!important;line-height:1.05!important;}
.folder-subtitle{color:#475569!important;font-weight:750!important;}
.top-actions{align-self:start!important;display:flex!important;align-items:flex-start!important;justify-content:flex-end!important;margin:0!important;padding:0!important;}
.refresh-btn{
  height:54px!important;
  min-width:138px!important;
  padding:0 22px!important;
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
}
.search{align-items:center!important;gap:12px!important;margin-top:18px!important;}
.search input,
.login-card input,
.compose-form input,
.compose-form textarea{
  border-color:#dbe5f3!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--aw-ink)!important;
  box-shadow:0 8px 24px rgba(15,39,90,.035)!important;
}
.search button{height:54px!important;border-radius:18px!important;min-width:112px!important;}
.list{padding:16px 14px 26px!important;background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(248,251,255,.55))!important;}
.mail{
  min-height:76px!important;
  border:1px solid rgba(226,232,240,.88)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 10px 28px rgba(15,39,90,.055)!important;
}
.mail:hover{border-color:rgba(255,107,18,.20)!important;box-shadow:0 18px 42px rgba(15,39,90,.10)!important;}
.mail.unread{background:linear-gradient(90deg,rgba(255,107,18,.12),rgba(255,255,255,.94) 55%)!important;border-color:rgba(255,107,18,.20)!important;}
.mail.unread:before{background:linear-gradient(180deg,var(--aw-orange),var(--aw-blue))!important;}
.avatar{background:linear-gradient(135deg,var(--aw-orange-2),var(--aw-orange))!important;color:#fff!important;box-shadow:0 10px 20px rgba(255,107,18,.17)!important;}
.inline button{background:#f0f6ff!important;color:var(--aw-blue-2)!important;}
.preview{
  background:
    radial-gradient(circle at 90% 5%,rgba(255,107,18,.16),transparent 34%),
    radial-gradient(circle at 12% 94%,rgba(18,63,211,.14),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.58),rgba(249,252,255,.72))!important;
}
.preview-inner{background:transparent!important;}
.welcome-card,
.mail-reader-panel,
.compose-panel{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:0 24px 70px rgba(15,39,90,.11)!important;
}
.welcome-card h2,.mail-reader-panel h2{color:var(--aw-ink)!important;}
.welcome-card img{filter:drop-shadow(0 14px 26px rgba(18,63,211,.10))!important;}
.reader-actions,.compose-head{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,255,.92))!important;border-bottom:1px solid var(--aw-line)!important;}
.reader-actions>a{color:var(--aw-blue-2)!important;}
.reader-from{background:#f7faff!important;border-color:var(--aw-line)!important;}
.reader-from span{color:var(--aw-blue-2)!important;}
.reader-footer{background:#fff8ef!important;border-top:1px solid rgba(255,107,18,.18)!important;color:var(--aw-blue-2)!important;}
.login-body{
  background:
    radial-gradient(circle at 15% 8%,rgba(255,107,18,.22),transparent 30%),
    radial-gradient(circle at 85% 12%,rgba(18,63,211,.18),transparent 32%),
    linear-gradient(135deg,#f7faff 0%,#fff 45%,#fff6ec 100%)!important;
}
.login-card{
  background:rgba(255,255,255,.90)!important;
  color:var(--aw-ink)!important;
  border:1px solid var(--aw-line)!important;
  box-shadow:0 24px 70px rgba(15,39,90,.13)!important;
}
.login-card h1{color:var(--aw-ink)!important;}
.login-card p,.login-card .muted{color:#64748b!important;}
.login-card button{background:linear-gradient(135deg,var(--aw-orange-2),var(--aw-orange) 48%,var(--aw-blue))!important;color:#fff!important;}
.mail-toast.gmail-style{
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(226,232,240,.96)!important;
  box-shadow:0 22px 70px rgba(15,39,90,.16)!important;
}
.mail-toast.gmail-style .mail-toast-icon{background:linear-gradient(135deg,var(--aw-orange-2),var(--aw-orange))!important;color:#fff!important;}
@media(max-width:980px){
  .shell{display:block!important;}
  .sidebar{width:min(310px,86vw)!important;}
  .title-row{grid-template-columns:1fr auto!important;align-items:start!important;}
  .refresh-btn{height:48px!important;min-width:118px!important;padding:0 15px!important;}
  .search button{height:50px!important;min-width:96px!important;}
  .top{padding:14px 14px 12px!important;}
}
@media(max-width:540px){
  .top h1{font-size:24px!important;}
  .folder-subtitle{font-size:12px!important;}
  .refresh-btn{height:44px!important;min-width:104px!important;border-radius:15px!important;font-size:14px!important;}
  .search{gap:8px!important;}
  .search button{height:48px!important;min-width:88px!important;padding:0 12px!important;font-size:14px!important;}
}

/* === AIR-WORLD PRO COLORS FIX v3 ===
   - colores premium más suaves
   - evita que botones/enlaces queden pintados al hacer click
   - devuelve borde degradado elegante a correos recibidos
   - botón actualizar alineado y limpio
*/
:root{
  --aw-navy:#071a4f;
  --aw-blue:#1746d8;
  --aw-blue-soft:#eef5ff;
  --aw-orange:#ff7a18;
  --aw-orange-soft:#fff1df;
  --aw-ink:#101828;
  --aw-line:#e8eef8;
}
body{
  background:
    radial-gradient(circle at 92% 8%,rgba(255,122,24,.14),transparent 34%),
    radial-gradient(circle at 7% 94%,rgba(23,70,216,.12),transparent 40%),
    linear-gradient(135deg,#fbfdff 0%,#f7fbff 44%,#fff8ef 100%)!important;
}
.sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 52%,#f8fbff 100%)!important;
  color:var(--aw-ink)!important;
}
.sidebar nav a,
.sidebar nav a:visited,
.sidebar nav a:focus,
.sidebar nav a:active,
.compose:focus,
.compose:active,
.sidebar-install-btn:focus,
.sidebar-install-btn:active,
.notify-btn:focus,
.notify-btn:active,
.logout:focus,
.logout:active,
.btn:focus,
.btn:active,
.refresh-btn:focus,
.refresh-btn:active,
.search button:focus,
.search button:active,
.inline button:focus,
.inline button:active{
  outline:none!important;
  filter:none!important;
}
.sidebar nav a:not(.active):hover,
.sidebar nav a:not(.active):focus,
.sidebar nav a:not(.active):active{
  background:rgba(23,70,216,.035)!important;
  box-shadow:inset 0 0 0 1px rgba(23,70,216,.055)!important;
  color:#334155!important;
}
.sidebar nav a.active{
  background:linear-gradient(135deg,rgba(23,70,216,.105),rgba(255,122,24,.075))!important;
  box-shadow:inset 0 0 0 1px rgba(23,70,216,.12),0 10px 24px rgba(15,39,90,.06)!important;
  color:var(--aw-navy)!important;
}
.compose,
.sidebar-install-btn,
.notify-btn,
.logout{
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
  color:var(--aw-navy)!important;
  border:1px solid var(--aw-line)!important;
}
.compose:hover,
.sidebar-install-btn:hover,
.notify-btn:hover,
.logout:hover{
  background:linear-gradient(135deg,#fff,var(--aw-orange-soft))!important;
  color:var(--aw-navy)!important;
}
.btn,.search button,.compose-form button,.refresh-btn{
  background:linear-gradient(135deg,#ff9b20 0%,#ff7a18 54%,#1746d8 100%)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(255,122,24,.15),0 8px 20px rgba(23,70,216,.08)!important;
}
.refresh-btn{
  height:54px!important;
  min-width:136px!important;
  align-self:flex-start!important;
  margin-top:0!important;
  transform:none!important;
}
.refresh-btn:hover{transform:translateY(-1px)!important;}
.mail{
  border:1px solid transparent!important;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.34),rgba(23,70,216,.18)) border-box!important;
  box-shadow:0 12px 30px rgba(15,39,90,.055)!important;
}
.mail:hover,
.mail.selected{
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.62),rgba(23,70,216,.42)) border-box!important;
  box-shadow:0 18px 42px rgba(15,39,90,.10)!important;
}
.mail.unread{
  background:
    linear-gradient(90deg,rgba(255,241,223,.98),rgba(255,255,255,.98) 54%) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.70),rgba(23,70,216,.36)) border-box!important;
}
.mail.unread:before{background:linear-gradient(180deg,var(--aw-orange),var(--aw-blue))!important;}
.avatar{background:linear-gradient(135deg,#ff9b20,#ff7a18)!important;color:#fff!important;}
.inline button{
  background:linear-gradient(180deg,#f4f8ff,#eef5ff)!important;
  color:var(--aw-navy)!important;
}
.preview{
  background:
    radial-gradient(circle at 92% 7%,rgba(255,122,24,.13),transparent 34%),
    radial-gradient(circle at 8% 92%,rgba(23,70,216,.12),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.74),rgba(248,251,255,.84))!important;
}
.welcome-card,.mail-reader-panel,.compose-panel{
  background:rgba(255,255,255,.92)!important;
  border:1px solid var(--aw-line)!important;
}
.welcome-card .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:12px 18px!important;border-radius:17px!important;margin-top:8px!important;}
@media(max-width:980px){
  .refresh-btn{height:48px!important;min-width:116px!important;}
}

/* === AIR-WORLD FINAL REAL FIX ===
   Fix real: click/focus no cambia colores hasta recargar.
   Solo .active queda marcado. Logo lateral recarga app.php.
   Borde degradado premium restaurado en lista de correos.
*/
.sidebar .brand{
  display:block!important;
  text-decoration:none!important;
  color:inherit!important;
  cursor:pointer!important;
  border-radius:18px!important;
  padding:4px 4px 10px!important;
  transition:.18s ease!important;
}
.sidebar .brand:hover{
  background:linear-gradient(135deg,rgba(23,70,216,.045),rgba(255,122,24,.040))!important;
}
.sidebar nav a:not(.active),
.sidebar nav a:not(.active):visited,
.sidebar nav a:not(.active):focus,
.sidebar nav a:not(.active):focus-visible,
.sidebar nav a:not(.active):active{
  background:transparent!important;
  box-shadow:none!important;
  color:#4b5563!important;
  outline:none!important;
}
.sidebar nav a:not(.active):hover{
  background:linear-gradient(135deg,rgba(23,70,216,.060),rgba(255,122,24,.040))!important;
  box-shadow:inset 0 0 0 1px rgba(23,70,216,.070)!important;
  color:var(--aw-navy)!important;
}
.sidebar nav a.active,
.sidebar nav a.active:visited,
.sidebar nav a.active:focus,
.sidebar nav a.active:focus-visible,
.sidebar nav a.active:active{
  background:linear-gradient(135deg,rgba(23,70,216,.115),rgba(255,122,24,.085))!important;
  box-shadow:inset 0 0 0 1px rgba(23,70,216,.13),0 10px 24px rgba(15,39,90,.06)!important;
  color:var(--aw-navy)!important;
  outline:none!important;
}
.compose:not(:hover),
.sidebar-install-btn:not(:hover),
.notify-btn:not(:hover),
.logout:not(:hover){
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
  color:var(--aw-navy)!important;
  border:1px solid var(--aw-line)!important;
  filter:none!important;
}
.compose:focus,
.compose:active,
.sidebar-install-btn:focus,
.sidebar-install-btn:active,
.notify-btn:focus,
.notify-btn:active,
.logout:focus,
.logout:active{
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
  color:var(--aw-navy)!important;
  border:1px solid var(--aw-line)!important;
  box-shadow:0 12px 34px rgba(15,39,90,.07)!important;
  transform:none!important;
}
.btn:focus,.btn:active,
.refresh-btn:focus,.refresh-btn:active,
.search button:focus,.search button:active,
.compose-form button:focus,.compose-form button:active{
  background:linear-gradient(135deg,#ff9b20 0%,#ff7a18 54%,#1746d8 100%)!important;
  color:#fff!important;
  filter:none!important;
  outline:none!important;
}
.mail{
  border:1px solid transparent!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94)) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.55) 0%,rgba(255,155,32,.25) 45%,rgba(23,70,216,.35) 100%) border-box!important;
  box-shadow:0 12px 30px rgba(15,39,90,.055)!important;
}
.mail:hover,
.mail.selected{
  border:1px solid transparent!important;
  background:
    linear-gradient(180deg,#fff,#fff) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.90) 0%,rgba(255,155,32,.35) 42%,rgba(23,70,216,.58) 100%) border-box!important;
  box-shadow:0 18px 42px rgba(15,39,90,.10)!important;
}
.mail.unread{
  border:1px solid transparent!important;
  background:
    linear-gradient(90deg,rgba(255,241,223,.98),rgba(255,255,255,.98) 58%) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.95) 0%,rgba(255,155,32,.40) 42%,rgba(23,70,216,.62) 100%) border-box!important;
}

/* === AIR-WORLD CACHE FIX V6 / PRO COLORS DEFINITIVO ===
   Este bloque queda al final para ganar sobre reglas anteriores y evitar
   que :focus/:active/:visited regrese colores viejos al hacer click.
*/
:root{
  --aw-blue:#123fd3!important;
  --aw-blue-2:#071a4f!important;
  --aw-orange:#ff7a18!important;
  --aw-orange-2:#ff9b20!important;
  --aw-ink:#101828!important;
  --aw-line:#e8eef8!important;
  --aw-soft:#f7fbff!important;
}
html,body{
  background:
    radial-gradient(circle at 92% 8%,rgba(255,122,24,.14),transparent 34%),
    radial-gradient(circle at 8% 94%,rgba(18,63,211,.12),transparent 42%),
    linear-gradient(135deg,#fbfdff 0%,#f7fbff 48%,#fff8ef 100%)!important;
}
a,button{ -webkit-tap-highlight-color:transparent!important; }
.sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 54%,#f8fbff 100%)!important;
  color:var(--aw-ink)!important;
  border-right:1px solid var(--aw-line)!important;
}
.sidebar .brand{display:block!important;cursor:pointer!important;text-decoration:none!important;color:inherit!important;}
.account-email{color:#475569!important;}
.sidebar nav,.storage-card{
  background:rgba(255,255,255,.82)!important;
  border:1px solid var(--aw-line)!important;
  box-shadow:0 12px 34px rgba(15,39,90,.055)!important;
}
.sidebar nav a,
.sidebar nav a:link,
.sidebar nav a:visited,
.sidebar nav a:focus,
.sidebar nav a:focus-visible,
.sidebar nav a:active{
  background:transparent!important;
  box-shadow:none!important;
  color:#4b5563!important;
  outline:none!important;
  filter:none!important;
}
.sidebar nav a:hover{
  background:linear-gradient(135deg,rgba(18,63,211,.060),rgba(255,122,24,.040))!important;
  box-shadow:inset 0 0 0 1px rgba(18,63,211,.07)!important;
  color:var(--aw-blue-2)!important;
}
.sidebar nav a.active,
.sidebar nav a.active:link,
.sidebar nav a.active:visited,
.sidebar nav a.active:focus,
.sidebar nav a.active:focus-visible,
.sidebar nav a.active:active,
.sidebar nav a.active:hover{
  background:linear-gradient(135deg,rgba(18,63,211,.115),rgba(255,122,24,.085))!important;
  box-shadow:inset 0 0 0 1px rgba(18,63,211,.13),0 10px 24px rgba(15,39,90,.06)!important;
  color:var(--aw-blue-2)!important;
}
.compose,.sidebar-install-btn,.notify-btn,.logout,
.compose:link,.compose:visited,.compose:focus,.compose:active,
.sidebar-install-btn:focus,.sidebar-install-btn:active,
.notify-btn:focus,.notify-btn:active,
.logout:link,.logout:visited,.logout:focus,.logout:active{
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  color:var(--aw-blue-2)!important;
  border:1px solid var(--aw-line)!important;
  box-shadow:0 12px 34px rgba(15,39,90,.07)!important;
  filter:none!important;
  outline:none!important;
  transform:none!important;
}
.compose:hover,.sidebar-install-btn:hover,.notify-btn:hover,.logout:hover{
  background:linear-gradient(135deg,#ffffff,#fff3e6)!important;
  color:var(--aw-blue-2)!important;
  border-color:rgba(255,122,24,.24)!important;
}
.btn,.search button,.compose-form button,.refresh-btn,
.btn:link,.btn:visited,.btn:focus,.btn:active,
.search button:focus,.search button:active,
.compose-form button:focus,.compose-form button:active,
.refresh-btn:link,.refresh-btn:visited,.refresh-btn:focus,.refresh-btn:active{
  background:linear-gradient(135deg,#ff9b20 0%,#ff7a18 54%,#123fd3 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 28px rgba(255,122,24,.15),0 8px 20px rgba(18,63,211,.08)!important;
  filter:none!important;
  outline:none!important;
}
.refresh-btn{height:54px!important;min-width:136px!important;align-self:flex-start!important;margin:0!important;}
.btn:hover,.search button:hover,.compose-form button:hover,.refresh-btn:hover{transform:translateY(-1px)!important;filter:saturate(1.03)!important;}
.main{background:rgba(255,255,255,.72)!important;border-right:1px solid var(--aw-line)!important;}
.top{background:rgba(255,255,255,.86)!important;border-bottom:1px solid var(--aw-line)!important;}
.list{background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(248,251,255,.55))!important;}
.mail,
.mail:focus-within,
.mail:active{
  border:1px solid transparent!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.95)) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.58) 0%,rgba(255,155,32,.25) 46%,rgba(18,63,211,.38) 100%) border-box!important;
  box-shadow:0 12px 30px rgba(15,39,90,.055)!important;
}
.mail:hover,.mail.selected{
  border:1px solid transparent!important;
  background:
    linear-gradient(180deg,#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.92) 0%,rgba(255,155,32,.36) 42%,rgba(18,63,211,.60) 100%) border-box!important;
  box-shadow:0 18px 42px rgba(15,39,90,.10)!important;
}
.mail.unread{
  border:1px solid transparent!important;
  background:
    linear-gradient(90deg,rgba(255,241,223,.98),rgba(255,255,255,.98) 58%) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.95) 0%,rgba(255,155,32,.40) 42%,rgba(18,63,211,.62) 100%) border-box!important;
}
.mail.unread:before{background:linear-gradient(180deg,var(--aw-orange),var(--aw-blue))!important;}
.avatar{background:linear-gradient(135deg,#ff9b20,#ff7a18)!important;color:#fff!important;}
.inline button,.inline button:focus,.inline button:active{
  background:linear-gradient(180deg,#f4f8ff,#eef5ff)!important;
  color:var(--aw-blue-2)!important;
  outline:none!important;
}
.preview{
  background:
    radial-gradient(circle at 92% 7%,rgba(255,122,24,.13),transparent 34%),
    radial-gradient(circle at 8% 92%,rgba(18,63,211,.12),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.74),rgba(248,251,255,.84))!important;
}
.welcome-card,.mail-reader-panel,.compose-panel{background:rgba(255,255,255,.92)!important;border:1px solid var(--aw-line)!important;}

/* Multi Inbox PRO Air-World */
.account-nav{margin-bottom:14px}
.acct-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;box-shadow:0 0 0 4px rgba(255,122,0,.10)}
.mail{position:relative;border:1px solid rgba(11,73,216,.10)!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(255,122,0,.65),rgba(11,73,216,.28),rgba(255,255,255,.2)) border-box!important;box-shadow:0 14px 30px rgba(15,36,84,.07)!important;overflow:hidden}
.mail:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 8px 8px 0;background:var(--acct,#ff7a00);opacity:.9}
.mail .avatar{background:linear-gradient(135deg,var(--acct,#ff7a00),#ff9f1a)!important;color:#fff!important;box-shadow:0 10px 22px rgba(255,122,0,.18)!important}
.mail-account-label{display:block;margin-top:3px;font-size:11px;color:#64748b;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-account{display:block;margin-top:6px;color:#64748b;font-style:normal;font-size:12px}
.compose-form select{width:100%;border:1px solid rgba(11,73,216,.16);border-radius:16px;padding:13px 14px;background:#fff;color:#0f172a;font-weight:800;outline:none;box-shadow:0 8px 20px rgba(15,36,84,.05)}
.sidebar nav.account-nav a span{display:flex;align-items:center;min-width:0}
.sidebar nav.account-nav a{background:rgba(255,255,255,.72)}
.sidebar nav.account-nav a.active{background:linear-gradient(135deg,rgba(255,122,0,.16),rgba(11,73,216,.12));border-color:rgba(255,122,0,.35)}
@media(max-width:900px){.mail-account-label{font-size:10px}.account-nav{display:block}}
/* Air-World Settings PRO */
.settings-btn{display:block;text-align:center;text-decoration:none}
.settings-shell{min-height:100vh;display:grid;grid-template-columns:280px 1fr;background:radial-gradient(circle at 90% 10%,rgba(255,122,0,.12),transparent 30%),radial-gradient(circle at 20% 90%,rgba(11,73,216,.12),transparent 35%),#f8fbff;color:#0b1736}
.settings-side{padding:22px;background:linear-gradient(180deg,#ffffff,#f4f7ff);border-right:1px solid rgba(11,73,216,.12);display:flex;flex-direction:column;gap:16px;box-shadow:12px 0 30px rgba(13,39,80,.05)}
.settings-side .brand{display:block;text-align:center}.settings-side .brand-logo{max-width:210px;height:auto}.settings-main{padding:32px;max-width:1180px;width:100%}.settings-main h1{font-size:32px;margin:0 0 8px}.settings-card{background:rgba(255,255,255,.86);border:1px solid rgba(11,73,216,.12);border-radius:24px;padding:22px;margin-top:22px;box-shadow:0 18px 50px rgba(10,35,80,.08);backdrop-filter:blur(12px)}
.settings-card h2{margin:0 0 16px;font-size:22px}.account-settings-row{border:1px solid rgba(255,122,0,.18);border-radius:20px;padding:16px;margin:14px 0;background:linear-gradient(135deg,rgba(255,122,0,.04),rgba(11,73,216,.04))}.account-settings-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.account-settings-head em{margin-left:auto;font-style:normal;font-size:12px;padding:6px 10px;border-radius:999px;background:#eef4ff;color:#0b49d8}.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.settings-grid label{font-weight:800;font-size:13px;color:#22304d}.settings-grid input,.settings-grid select{width:100%;margin-top:6px;border:1px solid rgba(11,73,216,.14);border-radius:14px;padding:12px 14px;background:#fff;font:inherit;color:#0b1736;outline:none}.settings-grid input:focus,.settings-grid select:focus{border-color:#ff7a00;box-shadow:0 0 0 4px rgba(255,122,0,.1)}.settings-save{margin-top:14px;border:0;border-radius:16px;padding:13px 20px;background:linear-gradient(135deg,#ff7a00,#ffb84d 48%,#0b49d8);color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(255,122,0,.18);cursor:pointer}
@media(max-width:820px){.settings-shell{grid-template-columns:1fr}.settings-side{position:relative}.settings-main{padding:18px}.settings-grid{grid-template-columns:1fr}.settings-side .brand-logo{max-width:190px}}


/* FIX V4: Ajustes con scroll real + app estable */
html:has(body.settings-page), body.settings-page{height:auto!important;min-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;}
body.settings-page .settings-shell{min-height:100vh!important;height:auto!important;overflow:visible!important;}
body.settings-page .settings-main{padding-bottom:90px!important;}
@supports not selector(:has(*)){ body.settings-page{height:auto!important;min-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;} }
.settings-side{position:sticky!important;top:0!important;height:100vh!important;overflow:auto!important;}
@media(max-width:820px){.settings-side{position:relative!important;height:auto!important;overflow:visible!important;}}
.alert{white-space:normal!important;line-height:1.35!important;}

/* AIRWORLD FAST V5: scrolling y paneles estables */
html, body { height: 100%; }
.settings-page{min-height:100dvh!important;overflow:auto!important;}
.settings-shell{min-height:100dvh!important;align-items:stretch!important;}
.settings-main{height:auto!important;min-height:100dvh!important;overflow:visible!important;padding-bottom:80px!important;}
@media(min-width:981px){.sidebar{overflow-y:auto!important;}.main{overflow:hidden!important;}.list{overflow-y:auto!important;}}
.account-nav a .count-badge, nav a .count-badge{transition:transform .18s ease, background .18s ease;}
.alert{line-height:1.35!important;}

/* === AIR-WORLD UX/UI MENU PRO COMPACT V6 ===
   Rediseño compacto del panel izquierdo: menos altura, menos separación,
   grupos ordenados, acciones rápidas en 2 columnas y mejor uso del espacio.
*/
:root{
  --aw-menu-w:272px!important;
  --aw-radius-lg:22px!important;
  --aw-radius-md:16px!important;
  --aw-menu-shadow:0 16px 38px rgba(15,39,90,.07)!important;
}
.shell{grid-template-columns:var(--aw-menu-w) minmax(410px,490px) minmax(520px,1fr)!important;}
.sidebar{
  width:var(--aw-menu-w)!important;
  padding:14px 16px!important;
  gap:0!important;
  background:
    radial-gradient(circle at 35% 0%,rgba(255,122,24,.08),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 52%,#f7faff 100%)!important;
  overflow-y:auto!important;
  scrollbar-width:thin!important;
}
.sidebar::-webkit-scrollbar{width:7px!important}.sidebar::-webkit-scrollbar-thumb{background:rgba(18,63,211,.18)!important;border-radius:999px!important}.sidebar::-webkit-scrollbar-track{background:transparent!important}
.sidebar .brand{
  padding:4px 8px 12px!important;
  margin:0 0 8px!important;
  border-radius:20px!important;
  text-align:center!important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,251,255,.46))!important;
  border:1px solid rgba(232,238,248,.88)!important;
  box-shadow:0 10px 26px rgba(15,39,90,.045)!important;
}
.sidebar .brand-logo{max-width:214px!important;margin:0 auto 2px!important;display:block!important;}
.account-email{font-size:12px!important;line-height:1.2!important;margin-top:0!important;font-weight:800!important;color:#475569!important;}
.sidebar .compose,
.sidebar .sidebar-install-btn,
.sidebar .settings-btn,
.sidebar .notify-btn{
  min-height:44px!important;
  height:44px!important;
  margin:0!important;
  padding:0 12px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:0 8px 22px rgba(15,39,90,.055)!important;
}
.sidebar .compose{
  margin:0 0 8px!important;
  background:linear-gradient(135deg,#ff9b20 0%,#ff7a18 54%,#123fd3 100%)!important;
  color:#fff!important;
  border:0!important;
}
.sidebar .compose:hover{transform:translateY(-1px)!important;box-shadow:0 14px 30px rgba(255,122,24,.18),0 8px 18px rgba(18,63,211,.10)!important;}
.sidebar .sidebar-install-btn:nth-of-type(1),
.sidebar .sidebar-install-btn:nth-of-type(2),
.sidebar .settings-btn{
  width:calc(50% - 4px)!important;
  float:left!important;
}
.sidebar .sidebar-install-btn:nth-of-type(1){margin-right:8px!important;}
.sidebar .settings-btn{width:100%!important;float:none!important;margin-top:8px!important;margin-bottom:12px!important;clear:both!important;}
.sidebar .settings-btn::before{content:'⚙️ ';}
.sidebar .settings-btn{font-size:0!important;}
.sidebar .settings-btn::after{content:'Ajustes';font-size:14px!important;}
.nav-title{
  clear:both!important;
  margin:10px 0 7px!important;
  font-size:10.5px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  color:#ff7a18!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.nav-title::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,rgba(255,122,24,.28),transparent)!important;}
.sidebar nav{
  border-radius:20px!important;
  padding:6px!important;
  margin:0 0 10px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:var(--aw-menu-shadow)!important;
}
.sidebar nav a{
  min-height:42px!important;
  height:auto!important;
  padding:9px 10px!important;
  margin-bottom:4px!important;
  border-radius:15px!important;
  gap:8px!important;
  font-size:14px!important;
  letter-spacing:-.01em!important;
}
.sidebar nav a:last-child{margin-bottom:0!important;}
.sidebar nav a span{line-height:1.12!important;min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important;}
.sidebar nav.account-nav a:first-child{
  min-height:48px!important;
  background:linear-gradient(135deg,rgba(18,63,211,.065),rgba(255,122,24,.045))!important;
  border:1px solid rgba(18,63,211,.08)!important;
}
.sidebar nav.account-nav a:first-child span{font-weight:950!important;color:#10245f!important;}
.acct-dot{width:8px!important;height:8px!important;margin:0!important;flex:0 0 8px!important;box-shadow:0 0 0 4px rgba(18,63,211,.055)!important;}
.count-badge{
  min-width:28px!important;
  height:24px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:950!important;
  margin-left:auto!important;
  box-shadow:none!important;
}
.count-badge.hot{box-shadow:0 8px 16px rgba(255,122,24,.18)!important;}
.storage-card{
  margin:2px 0 10px!important;
  padding:12px 14px!important;
  border-radius:19px!important;
  font-size:13px!important;
  box-shadow:var(--aw-menu-shadow)!important;
}
.storage-card b{font-size:14px!important;display:block!important;margin-bottom:6px!important;}
.storage-card small{font-size:11.5px!important;line-height:1.25!important;display:block!important;}
.bar{height:6px!important;margin:8px 0!important;}
.logout{
  min-height:42px!important;
  padding:0 13px!important;
  border-radius:16px!important;
  justify-content:center!important;
  font-size:14px!important;
  margin-top:auto!important;
}
.top{padding:18px 20px 14px!important;}
.top h1{font-size:28px!important;}
.folder-subtitle{font-size:12.5px!important;}
.refresh-btn{height:48px!important;min-width:126px!important;border-radius:16px!important;}
.search{margin-top:13px!important;gap:10px!important;}
.search input,.search button{height:48px!important;border-radius:16px!important;}
.list{padding:12px 12px 22px!important;}
.mail{min-height:68px!important;border-radius:19px!important;margin:7px 0!important;}
.mail>a{padding:11px 10px!important;gap:10px!important;}
.avatar{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:14px!important;}
.meta b,.meta span{font-size:14px!important;max-width:210px!important;}
.mail-account-label{font-size:10.5px!important;}
.date{font-size:12px!important;}.date small{font-size:11px!important;}
.inline button{width:36px!important;height:36px!important;border-radius:13px!important;}
@media(max-width:980px){
  .shell{display:block!important;}
  .sidebar{width:min(292px,86vw)!important;padding:13px 14px!important;}
  .sidebar .brand-logo{max-width:205px!important;}
  .top{padding:13px!important;}
}

/* === AIR-WORLD SIDEBAR PREMIUM UX/UI V7 ===
   Reemplaza el menú comprimido de V6 por un panel PRO: compacto, legible,
   sin botones partidos, con cards suaves, mejor jerarquía y scroll correcto.
*/
:root{
  --aw-sidebar-w:300px!important;
  --aw-panel:#ffffff!important;
  --aw-panel-2:#f8fbff!important;
  --aw-blue-pro:#0b49d8!important;
  --aw-orange-pro:#ff7a18!important;
  --aw-text-pro:#0b1740!important;
  --aw-soft-border:#e8eef8!important;
  --aw-soft-shadow:0 16px 42px rgba(15,39,90,.075)!important;
}
html,body{overscroll-behavior:none!important;}
.shell{grid-template-columns:var(--aw-sidebar-w) minmax(410px,500px) minmax(540px,1fr)!important;}
.sidebar{
  width:var(--aw-sidebar-w)!important;
  padding:16px 16px 14px!important;
  color:var(--aw-text-pro)!important;
  background:
    radial-gradient(circle at 18% -8%,rgba(255,122,24,.12),transparent 31%),
    radial-gradient(circle at 104% 16%,rgba(11,73,216,.12),transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 55%,#f3f7ff 100%)!important;
  border-right:1px solid rgba(11,73,216,.10)!important;
  box-shadow:12px 0 36px rgba(15,39,90,.05)!important;
  gap:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(11,73,216,.22) transparent!important;
}
.sidebar::-webkit-scrollbar{width:7px!important;}
.sidebar::-webkit-scrollbar-track{background:transparent!important;}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,122,24,.34),rgba(11,73,216,.28))!important;border-radius:99px!important;}
.sidebar .brand{
  display:block!important;
  margin:0 0 12px!important;
  padding:12px 13px 10px!important;
  border-radius:24px!important;
  text-align:center!important;
  background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(247,250,255,.78))!important;
  border:1px solid rgba(232,238,248,.95)!important;
  box-shadow:var(--aw-soft-shadow)!important;
  transition:.18s ease!important;
}
.sidebar .brand:hover{transform:translateY(-1px)!important;box-shadow:0 20px 50px rgba(15,39,90,.10)!important;}
.sidebar .brand-logo{width:100%!important;max-width:232px!important;margin:0 auto 3px!important;display:block!important;filter:none!important;}
.account-email{font-size:12px!important;line-height:1.2!important;font-weight:900!important;color:#526179!important;letter-spacing:-.01em!important;}
.sidebar .compose,
.sidebar .sidebar-install-btn,
.sidebar .settings-btn,
.sidebar .notify-btn{
  width:100%!important;
  float:none!important;
  clear:both!important;
  min-height:46px!important;
  height:46px!important;
  margin:0 0 9px!important;
  padding:0 16px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:950!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border:1px solid rgba(232,238,248,.95)!important;
  box-shadow:0 10px 26px rgba(15,39,90,.06)!important;
  transform:none!important;
}
.sidebar .compose{
  justify-content:center!important;
  text-align:center!important;
  color:#fff!important;
  border:0!important;
  background:linear-gradient(135deg,#ff9b20 0%,#ff7a18 54%,#0b49d8 100%)!important;
  box-shadow:0 16px 34px rgba(255,122,24,.18),0 8px 20px rgba(11,73,216,.12)!important;
}
.sidebar .sidebar-install-btn,
.sidebar .notify-btn,
.sidebar .settings-btn{
  color:#0b1740!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.86))!important;
}
.sidebar .sidebar-install-btn:hover,
.sidebar .notify-btn:hover,
.sidebar .settings-btn:hover,
.sidebar .compose:hover,
.logout:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(255,122,24,.32)!important;
  box-shadow:0 18px 42px rgba(15,39,90,.10)!important;
}
.sidebar .settings-btn{margin-bottom:13px!important;justify-content:flex-start!important;font-size:15px!important;}
.sidebar .settings-btn::before,.sidebar .settings-btn::after{content:none!important;display:none!important;}
.sidebar .settings-btn{font-size:15px!important;}
.nav-title{
  clear:both!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:13px 2px 8px!important;
  color:#ff7a18!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
}
.nav-title::after{content:''!important;height:1px!important;flex:1!important;background:linear-gradient(90deg,rgba(255,122,24,.30),rgba(11,73,216,.08),transparent)!important;}
.sidebar nav{
  margin:0 0 13px!important;
  padding:7px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,251,255,.76))!important;
  border:1px solid rgba(232,238,248,.90)!important;
  box-shadow:var(--aw-soft-shadow)!important;
}
.sidebar nav a{
  min-height:44px!important;
  height:auto!important;
  margin:0 0 5px!important;
  padding:10px 11px!important;
  border-radius:17px!important;
  color:#4b5568!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  font-size:14.5px!important;
  font-weight:900!important;
  letter-spacing:-.015em!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.sidebar nav a:last-child{margin-bottom:0!important;}
.sidebar nav a::before{width:24px!important;min-width:24px!important;text-align:center!important;opacity:.90!important;}
.sidebar nav a span{
  flex:1!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  color:inherit!important;
  line-height:1.14!important;
  white-space:normal!important;
}
.sidebar nav a:hover,
.sidebar nav a.active{
  color:#0b1740!important;
  background:linear-gradient(135deg,rgba(11,73,216,.085),rgba(255,122,24,.075))!important;
  border-color:rgba(11,73,216,.11)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 10px 24px rgba(15,39,90,.055)!important;
  transform:none!important;
}
.sidebar nav a.active{font-weight:950!important;}
.sidebar nav.account-nav a:first-child{
  min-height:48px!important;
  background:linear-gradient(135deg,rgba(11,73,216,.075),rgba(255,122,24,.055))!important;
  border-color:rgba(11,73,216,.10)!important;
}
.sidebar nav.account-nav a:first-child span{font-weight:950!important;color:#0b1740!important;}
.acct-dot{
  width:9px!important;height:9px!important;flex:0 0 9px!important;border-radius:999px!important;margin:0!important;
  box-shadow:0 0 0 4px rgba(11,73,216,.065)!important;
}
.count-badge{
  min-width:30px!important;height:26px!important;padding:0 9px!important;
  margin-left:auto!important;border-radius:999px!important;
  display:grid!important;place-items:center!important;
  font-size:13px!important;line-height:1!important;font-weight:950!important;
  color:#0b1740!important;
  background:#edf4ff!important;
  border:1px solid rgba(11,73,216,.08)!important;
  box-shadow:none!important;
}
.count-badge.hot{
  color:#fff!important;
  background:linear-gradient(135deg,#ff9b20,#ff7a18)!important;
  border-color:rgba(255,122,24,.24)!important;
  box-shadow:0 10px 22px rgba(255,122,24,.23)!important;
}
.storage-card{
  margin:2px 0 10px!important;
  padding:13px 15px!important;
  color:#334155!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,251,255,.74))!important;
  border:1px solid rgba(232,238,248,.92)!important;
  border-radius:22px!important;
  box-shadow:var(--aw-soft-shadow)!important;
}
.storage-card b{display:block!important;font-size:14.5px!important;margin-bottom:7px!important;color:#0b1740!important;}
.storage-card small{display:block!important;font-size:12px!important;line-height:1.35!important;color:#64748b!important;}
.bar{height:7px!important;margin:9px 0!important;background:#e8eef8!important;border-radius:99px!important;}
.bar span{background:linear-gradient(90deg,#ff9b20,#ff7a18,#0b49d8)!important;}
.logout{
  min-height:46px!important;
  width:100%!important;
  padding:0 16px!important;
  margin:0!important;
  border-radius:18px!important;
  justify-content:flex-start!important;
  color:#0b1740!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.86))!important;
  border:1px solid rgba(232,238,248,.95)!important;
  box-shadow:0 10px 26px rgba(15,39,90,.06)!important;
  font-size:15px!important;
  font-weight:950!important;
}
.main{border-right:1px solid rgba(11,73,216,.10)!important;}
.top{padding:20px 22px 15px!important;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(248,251,255,.66))!important;}
.top h1{font-size:29px!important;}
.folder-subtitle{font-size:12.5px!important;color:#475569!important;}
.refresh-btn,.search button{color:#fff!important;background:linear-gradient(135deg,#ff9b20 0%,#ff7a18 54%,#0b49d8 100%)!important;box-shadow:0 13px 30px rgba(255,122,24,.18),0 7px 18px rgba(11,73,216,.10)!important;}
.mail{
  border:1px solid rgba(232,238,248,.90)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(250,252,255,.82))!important;
  box-shadow:0 12px 30px rgba(15,39,90,.055)!important;
}
.mail:hover{border-color:rgba(255,122,24,.32)!important;box-shadow:0 18px 44px rgba(15,39,90,.095)!important;}
.mail.unread,.mail.selected{
  border:1px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#ff9b20,#ff7a18,#0b49d8) border-box!important;
  box-shadow:0 16px 42px rgba(15,39,90,.10)!important;
}
.mail.unread:before{background:linear-gradient(180deg,#ff9b20,#ff7a18,#0b49d8)!important;}
@media(max-width:980px){
  .shell{display:block!important;grid-template-columns:1fr!important;}
  .sidebar{width:min(314px,88vw)!important;padding:14px!important;}
  .sidebar .brand-logo{max-width:218px!important;}
  .top{padding:14px!important;}
  .sidebar .compose,.sidebar .sidebar-install-btn,.sidebar .notify-btn,.sidebar .settings-btn,.logout{min-height:47px!important;height:47px!important;font-size:15px!important;}
}
@media(max-width:420px){
  .sidebar{width:min(300px,90vw)!important;}
  .sidebar .brand-logo{max-width:204px!important;}
  .sidebar nav a{font-size:14px!important;}
  .count-badge{min-width:28px!important;height:25px!important;font-size:12.5px!important;}
}
/* Ajustes: permitir scroll normal y formularios más cómodos */
body.settings-page{overflow:auto!important;min-height:100dvh!important;}
.settings-shell{min-height:100dvh!important;align-items:stretch!important;}
.settings-main{overflow:visible!important;padding-bottom:60px!important;}
.account-settings-row{border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.78))!important;box-shadow:0 14px 36px rgba(15,39,90,.055)!important;}
.settings-save{background:linear-gradient(135deg,#ff9b20,#ff7a18 54%,#0b49d8)!important;color:#fff!important;border-radius:18px!important;box-shadow:0 16px 34px rgba(255,122,24,.18)!important;}

/* FIX V8: Sidebar compacto PRO solicitado por cliente */
.sidebar{
  padding:14px 14px 12px!important;
  gap:8px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.sidebar .brand{
  margin:0 0 8px!important;
  padding:10px 12px 8px!important;
  border-radius:20px!important;
}
.sidebar .brand-logo{max-height:44px!important;object-fit:contain!important;}
.sidebar .account-email{font-size:11px!important;margin-top:2px!important;line-height:1.1!important;}
.sidebar .compose{
  min-height:44px!important;
  margin:4px 0 8px!important;
  border-radius:18px!important;
  font-size:14px!important;
}
.quick-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin:0 0 10px!important;
  clear:both!important;
}
.quick-actions .sidebar-install-btn{
  width:100%!important;
  min-width:0!important;
  float:none!important;
  margin:0!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 8px!important;
  border-radius:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:13.5px!important;
  font-weight:950!important;
  line-height:1!important;
}
.sidebar > .sidebar-install-btn:not(.settings-bottom){display:none!important;}
.nav-title{margin:9px 2px 7px!important;font-size:10.5px!important;}
.sidebar nav{padding:6px!important;margin-bottom:10px!important;border-radius:20px!important;}
.sidebar nav a{
  min-height:38px!important;
  padding:8px 9px!important;
  margin-bottom:4px!important;
  border-radius:14px!important;
  font-size:13.5px!important;
}
.sidebar nav.account-nav a:first-child{min-height:42px!important;}
.sidebar nav a span{gap:7px!important;line-height:1.08!important;}
.count-badge{min-width:26px!important;height:24px!important;font-size:12.5px!important;padding:0 7px!important;}
.storage-card{
  margin:0 0 8px!important;
  padding:11px 13px!important;
  border-radius:18px!important;
}
.storage-card b{font-size:13.5px!important;margin-bottom:5px!important;}
.storage-card small{font-size:11px!important;}
.settings-bottom{
  width:100%!important;
  min-height:42px!important;
  margin:0 0 8px!important;
  padding:0 14px!important;
  border-radius:17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  text-align:left!important;
  font-size:14.5px!important;
  font-weight:950!important;
  color:#0b1740!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.86))!important;
  border:1px solid rgba(232,238,248,.95)!important;
  box-shadow:0 10px 26px rgba(15,39,90,.06)!important;
  text-decoration:none!important;
  float:none!important;
  clear:both!important;
}
.settings-bottom::before,.settings-bottom::after{content:none!important;display:none!important;}
.logout{min-height:42px!important;border-radius:17px!important;margin:0!important;font-size:14.5px!important;}
@media(max-width:900px){
  .quick-actions{grid-template-columns:1fr 1fr!important;}
  .quick-actions .sidebar-install-btn{font-size:13px!important;}
}

/* FIX V9: Quick actions PRO — sin texto cortado, estilo iOS compacto */
.sidebar{
  width:280px!important;
  min-width:280px!important;
  padding:16px 14px 12px!important;
}
.quick-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:2px 0 12px!important;
  width:100%!important;
  overflow:visible!important;
}
.quick-actions .sidebar-install-btn,
.quick-actions .sidebar-install-btn:link,
.quick-actions .sidebar-install-btn:visited,
.quick-actions .sidebar-install-btn:focus,
.quick-actions .sidebar-install-btn:active{
  width:100%!important;
  min-width:0!important;
  height:66px!important;
  min-height:66px!important;
  max-height:66px!important;
  padding:8px 6px!important;
  margin:0!important;
  border-radius:19px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.05!important;
  text-align:center!important;
  font-weight:950!important;
  color:#071a4f!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.90)) padding-box,
    linear-gradient(135deg,rgba(255,155,32,.34),rgba(18,63,211,.20)) border-box!important;
  border:1px solid transparent!important;
  box-shadow:0 12px 28px rgba(15,39,90,.075)!important;
  cursor:pointer!important;
  appearance:none!important;
}
.quick-actions .sidebar-install-btn:hover{
  transform:translateY(-1px)!important;
  background:
    linear-gradient(180deg,#ffffff,#fff9f1) padding-box,
    linear-gradient(135deg,rgba(255,122,24,.62),rgba(18,63,211,.35)) border-box!important;
  box-shadow:0 16px 34px rgba(15,39,90,.10)!important;
}
.quick-actions .qa-ico{
  display:grid!important;
  place-items:center!important;
  width:26px!important;
  height:26px!important;
  border-radius:11px!important;
  font-size:15px!important;
  line-height:1!important;
  background:linear-gradient(135deg,rgba(255,155,32,.20),rgba(18,63,211,.10))!important;
}
.quick-actions .qa-label{
  display:block!important;
  max-width:100%!important;
  font-size:12.5px!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
  overflow:visible!important;
}
.sidebar .compose{
  min-height:46px!important;
  height:46px!important;
  margin:5px 0 10px!important;
  border-radius:19px!important;
}
.settings-bottom{
  margin-top:8px!important;
  min-height:44px!important;
  justify-content:center!important;
  text-align:center!important;
}
.logout{
  justify-content:center!important;
}
@media(max-width:980px){
  .sidebar{width:min(308px,88vw)!important;min-width:0!important;}
  .quick-actions .sidebar-install-btn{height:64px!important;min-height:64px!important;}
}
@media(max-width:420px){
  .sidebar{width:min(300px,90vw)!important;}
  .quick-actions{gap:8px!important;}
  .quick-actions .qa-label{font-size:12px!important;}
}

/* === FIX V10: Quick actions limpio, profesional y sin cortes === */
.sidebar .quick-actions,
.sidebar div.quick-actions{
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  margin:6px 0 13px!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.sidebar .quick-actions .sidebar-install-btn,
.sidebar .quick-actions button.sidebar-install-btn,
.sidebar .quick-actions .notify-btn,
.sidebar .quick-actions .install-btn{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  padding:0 8px!important;
  margin:0!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  text-align:center!important;
  line-height:1!important;
  box-sizing:border-box!important;
  float:none!important;
  appearance:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.92))!important;
  border:1px solid rgba(211,224,246,.95)!important;
  color:#0b1740!important;
  font-size:12.5px!important;
  font-weight:950!important;
  box-shadow:0 10px 24px rgba(15,39,90,.07)!important;
}
.sidebar .quick-actions .sidebar-install-btn:hover{
  transform:translateY(-1px)!important;
  color:#0b2f9f!important;
  border-color:rgba(255,122,24,.38)!important;
  background:linear-gradient(180deg,#ffffff,#fff8ed)!important;
  box-shadow:0 14px 30px rgba(15,39,90,.095)!important;
}
.sidebar .quick-actions .qa-ico{
  width:auto!important;
  height:auto!important;
  min-width:auto!important;
  border-radius:0!important;
  display:inline!important;
  background:transparent!important;
  font-size:13px!important;
  line-height:1!important;
  flex:0 0 auto!important;
}
.sidebar .quick-actions .qa-label{
  display:inline-block!important;
  min-width:0!important;
  max-width:68px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:12.5px!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  flex:0 1 auto!important;
}
.sidebar .compose{
  height:44px!important;
  min-height:44px!important;
  margin:6px 0 10px!important;
  border-radius:18px!important;
}
.sidebar .settings-bottom{
  margin-top:6px!important;
  margin-bottom:8px!important;
  height:42px!important;
  min-height:42px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#ffffff,rgba(246,250,255,.92))!important;
  border:1px solid rgba(211,224,246,.95)!important;
  color:#0b1740!important;
  box-shadow:0 10px 24px rgba(15,39,90,.07)!important;
}
.sidebar .logout{
  height:42px!important;
  min-height:42px!important;
  border-radius:16px!important;
}
@media(max-width:980px){
  .sidebar .quick-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;}
  .sidebar .quick-actions .sidebar-install-btn{height:42px!important;min-height:42px!important;font-size:12.5px!important;}
}


/* === SETTINGS PRO V11: ajustes premium + scroll real + mostrar contraseña === */
html:has(body.settings-page), body.settings-page{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  background:radial-gradient(circle at 92% 8%,rgba(255,122,24,.13),transparent 30%),radial-gradient(circle at 16% 94%,rgba(11,73,216,.13),transparent 36%),linear-gradient(135deg,#f8fbff 0%,#eef6ff 45%,#fff8f0 100%)!important;
}
body.settings-page .settings-shell{
  height:100dvh!important;
  min-height:100dvh!important;
  display:grid!important;
  grid-template-columns:280px minmax(0,1fr)!important;
  overflow:hidden!important;
  align-items:stretch!important;
}
body.settings-page .settings-side{
  position:relative!important;
  top:auto!important;
  height:100dvh!important;
  overflow:auto!important;
  padding:24px 20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,247,255,.86))!important;
  border-right:1px solid rgba(11,73,216,.13)!important;
  box-shadow:14px 0 36px rgba(11,35,80,.06)!important;
}
.settings-brand-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:16px 14px!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(211,224,246,.9)!important;
  box-shadow:0 18px 42px rgba(15,39,90,.08)!important;
}
.settings-brand-card .brand-logo{max-width:205px!important;margin:0!important;}
.settings-brand-card span{font-size:12px!important;font-weight:950!important;color:#0b1740!important;letter-spacing:.01em!important;}
.settings-back,.settings-logout{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:48px!important;
  padding:0 14px!important;
  margin-top:14px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff,rgba(246,250,255,.95))!important;
  border:1px solid rgba(211,224,246,.95)!important;
  color:#0b1740!important;
  font-weight:950!important;
  box-shadow:0 12px 28px rgba(15,39,90,.07)!important;
}
.settings-logout{color:#12204a!important;}
body.settings-page .settings-main{
  height:100dvh!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  padding:34px 36px 120px!important;
  max-width:none!important;
  width:100%!important;
  scroll-behavior:smooth!important;
}
body.settings-page .settings-main::-webkit-scrollbar,.settings-side::-webkit-scrollbar{width:10px!important;}
body.settings-page .settings-main::-webkit-scrollbar-thumb,.settings-side::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff9b20,#0b49d8)!important;border-radius:999px!important;border:3px solid rgba(248,251,255,.9)!important;}
body.settings-page .settings-main h1{
  font-size:34px!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
  margin:0 0 8px!important;
  color:#081635!important;
}
body.settings-page .folder-subtitle{
  max-width:1050px!important;
  color:#44516d!important;
  font-weight:850!important;
  line-height:1.35!important;
}
body.settings-page .settings-card{
  max-width:1120px!important;
  border-radius:28px!important;
  padding:24px!important;
  margin-top:22px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,251,255,.84))!important;
  border:1px solid rgba(190,209,238,.82)!important;
  box-shadow:0 24px 70px rgba(15,39,90,.08)!important;
  backdrop-filter:blur(18px)!important;
}
body.settings-page .settings-card h2{
  font-size:24px!important;
  letter-spacing:-.035em!important;
  color:#081635!important;
  margin-bottom:18px!important;
}
body.settings-page .account-settings-row{
  position:relative!important;
  overflow:hidden!important;
  border-radius:24px!important;
  padding:18px!important;
  margin:16px 0!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,247,236,.62) 48%,rgba(241,247,255,.84))!important;
  border:1px solid rgba(255,122,24,.18)!important;
  box-shadow:0 14px 36px rgba(15,39,90,.055)!important;
}
body.settings-page .account-settings-row::before{
  content:''!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:4px!important;
  background:linear-gradient(180deg,#ff9b20,#0b49d8)!important;
  opacity:.78!important;
}
body.settings-page .account-settings-head{
  gap:12px!important;
  margin-bottom:16px!important;
}
body.settings-page .account-settings-head b{font-size:16px!important;color:#081635!important;}
body.settings-page .account-settings-head em{
  font-size:12px!important;
  padding:7px 12px!important;
  background:linear-gradient(180deg,#eef5ff,#fff)!important;
  color:#0b49d8!important;
  border:1px solid rgba(11,73,216,.08)!important;
  box-shadow:0 8px 18px rgba(11,73,216,.06)!important;
}
body.settings-page .settings-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(230px,1fr))!important;
  gap:15px!important;
}
body.settings-page .settings-grid label{
  color:#24314f!important;
  font-weight:950!important;
  font-size:13px!important;
}
body.settings-page .settings-grid input,
body.settings-page .settings-grid select{
  height:46px!important;
  margin-top:7px!important;
  border-radius:16px!important;
  border:1px solid rgba(190,209,238,.95)!important;
  background:rgba(255,255,255,.96)!important;
  color:#0b1740!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
}
body.settings-page .settings-grid input:focus,
body.settings-page .settings-grid select:focus{
  border-color:#ff8a18!important;
  box-shadow:0 0 0 4px rgba(255,138,24,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.password-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  margin-top:7px!important;
}
.password-wrap input{
  margin-top:0!important;
  padding-right:92px!important;
}
.show-pass{
  position:absolute!important;
  right:7px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  height:32px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:12px!important;
  cursor:pointer!important;
  background:linear-gradient(135deg,#fff4e5,#ff9b20)!important;
  color:#09215a!important;
  font-weight:950!important;
  font-size:12px!important;
  box-shadow:0 8px 18px rgba(255,122,24,.12)!important;
}
.settings-sticky-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:30!important;
  display:flex!important;
  justify-content:flex-end!important;
  margin:18px -24px -24px!important;
  padding:16px 24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.94) 42%,rgba(247,251,255,.98))!important;
  backdrop-filter:blur(14px)!important;
  border-top:1px solid rgba(190,209,238,.55)!important;
  border-radius:0 0 28px 28px!important;
}
body.settings-page .settings-save{
  min-width:210px!important;
  height:50px!important;
  margin:0!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#ffb21a,#ff7a18 54%,#0b49d8)!important;
  color:#fff!important;
  font-weight:950!important;
  box-shadow:0 18px 38px rgba(255,122,24,.22)!important;
}
body.settings-page .success,body.settings-page .alert{
  max-width:1120px!important;
  border-radius:18px!important;
  font-weight:800!important;
}
@media(max-width:980px){
  body.settings-page .settings-shell{grid-template-columns:1fr!important;overflow:auto!important;height:auto!important;}
  body.settings-page .settings-side{height:auto!important;position:relative!important;overflow:visible!important;padding:16px!important;}
  body.settings-page .settings-main{height:auto!important;min-height:100dvh!important;overflow:visible!important;padding:22px 16px 110px!important;}
  body.settings-page .settings-grid{grid-template-columns:1fr!important;}
  .settings-sticky-actions{position:sticky!important;bottom:0!important;margin:16px -24px -24px!important;}
  body.settings-page .settings-save{width:100%!important;min-width:0!important;}
}


/* === SETTINGS PRO V12: guardar normal, sin barra flotante === */
html:has(body.settings-page), body.settings-page{
  height:auto!important;
  min-height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.settings-page .settings-shell{
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
  display:grid!important;
  grid-template-columns:280px minmax(0,1fr)!important;
}
body.settings-page .settings-side{
  position:sticky!important;
  top:0!important;
  height:100dvh!important;
  overflow-y:auto!important;
}
body.settings-page .settings-main{
  height:auto!important;
  min-height:100dvh!important;
  overflow:visible!important;
  padding-bottom:56px!important;
}
.settings-sticky-actions{
  position:static!important;
  bottom:auto!important;
  z-index:auto!important;
  display:flex!important;
  justify-content:flex-end!important;
  margin:18px 0 0!important;
  padding:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  border-top:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.settings-page .settings-save{
  min-width:220px!important;
  height:50px!important;
  margin:0!important;
  border-radius:18px!important;
}
body.settings-page .settings-card{
  overflow:visible!important;
}
@media(max-width:980px){
  body.settings-page .settings-shell{grid-template-columns:1fr!important;height:auto!important;overflow:visible!important;}
  body.settings-page .settings-side{position:relative!important;height:auto!important;overflow:visible!important;}
  body.settings-page .settings-main{height:auto!important;overflow:visible!important;padding-bottom:40px!important;}
  .settings-sticky-actions{position:static!important;margin:18px 0 0!important;padding:0!important;background:transparent!important;}
  body.settings-page .settings-save{width:100%!important;min-width:0!important;}
}


/* === SETTINGS PRO V13: scroll real del panel + botones visibles sin flotar === */
html:has(body.settings-page),
body.settings-page{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
}
body.settings-page .settings-shell{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:280px minmax(0,1fr)!important;
}
body.settings-page .settings-side{
  position:relative!important;
  top:auto!important;
  height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.settings-page .settings-main{
  height:100dvh!important;
  min-height:0!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  padding:34px 36px 180px!important;
  overscroll-behavior:contain!important;
}
body.settings-page .settings-card{
  overflow:visible!important;
  margin-bottom:26px!important;
}
body.settings-page .settings-card form{
  overflow:visible!important;
}
.settings-sticky-actions{
  position:static!important;
  bottom:auto!important;
  z-index:auto!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin:22px 0 0!important;
  padding:18px 0 0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  border-top:1px solid rgba(190,209,238,.45)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.settings-page .settings-save{
  min-width:220px!important;
  height:52px!important;
  margin:0!important;
  border-radius:18px!important;
}
@media(max-width:980px){
  html:has(body.settings-page), body.settings-page{height:auto!important;min-height:100dvh!important;overflow-y:auto!important;}
  body.settings-page .settings-shell{height:auto!important;min-height:100dvh!important;overflow:visible!important;grid-template-columns:1fr!important;}
  body.settings-page .settings-side{position:relative!important;height:auto!important;overflow:visible!important;}
  body.settings-page .settings-main{height:auto!important;min-height:100dvh!important;overflow:visible!important;padding:22px 16px 120px!important;}
  .settings-sticky-actions{justify-content:stretch!important;}
  body.settings-page .settings-save{width:100%!important;min-width:0!important;}
}


/* === V22 MOBILE REAL READER + HEADER FIX ===
   Fixes mobile-only issues without touching mail accounts/settings data.
   - Reader footer visible after message content.
   - Single clean "Bandeja" back button.
   - Mobile logo no longer collides with hamburger.
*/
@media (max-width: 980px){
  /* Inbox header: keep logo visible, but away from menu button */
  .top{
    padding-top:18px!important;
    position:relative!important;
  }
  .menu{
    top:82px!important;
    left:22px!important;
    width:56px!important;
    height:56px!important;
    border-radius:19px!important;
    box-shadow:0 14px 34px rgba(6,20,120,.14)!important;
  }
  .mobile-logo{
    width:min(235px,58vw)!important;
    max-width:58vw!important;
    margin:0 22px 4px auto!important;
    display:block!important;
  }
  .title-row{
    text-align:left!important;
    padding-left:92px!important;
    min-height:74px!important;
  }
  .top h1{
    text-align:left!important;
    font-size:33px!important;
    line-height:1!important;
    margin-top:2px!important;
  }
  .top-actions{
    position:absolute!important;
    right:20px!important;
    top:78px!important;
    margin:0!important;
  }
  .refresh-btn{
    width:auto!important;
    min-width:142px!important;
    min-height:56px!important;
    padding:0 22px!important;
  }
  .search{
    margin-top:14px!important;
  }

  /* Reader must scroll as one page on phone, not split body/footer */
  body.mobile-reader-open .preview,
  .shell.has-reader .preview{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    background:#f8fbff!important;
  }
  .preview-inner{
    height:auto!important;
    min-height:100dvh!important;
    overflow:visible!important;
    padding:0!important;
  }
  .mail-reader-panel{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    display:block!important;
    border-radius:0!important;
    background:#fff!important;
  }
  .reader-actions{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    display:grid!important;
    grid-template-columns:minmax(92px,.72fr) minmax(112px,1fr) minmax(112px,1fr)!important;
    gap:10px!important;
    align-items:center!important;
    padding:12px 14px!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(14px)!important;
    border-bottom:1px solid rgba(190,209,238,.52)!important;
    box-shadow:0 12px 28px rgba(5,20,95,.08)!important;
  }
  .reader-actions>a:first-child{
    font-size:0!important;
    width:100%!important;
    min-height:48px!important;
    padding:0 10px!important;
    border-radius:18px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#fff!important;
    border:1px solid rgba(255,122,0,.30)!important;
    color:#061489!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .reader-actions>a:first-child::before,
  .reader-actions>a:first-child::after{
    display:none!important;
    content:none!important;
  }
  .reader-actions>a:first-child{font-size:0!important;}
  .reader-actions>a:first-child span{display:none!important;}
  .reader-actions>a:first-child{
    text-indent:-9999px!important;
  }
  .reader-actions>a:first-child::marker{display:none!important;}
  .reader-actions>a:first-child:focus{outline:2px solid rgba(11,73,216,.22)!important;}
  .reader-actions>a:first-child::selection{background:transparent!important;}
  .reader-actions>a:first-child:after{
    display:flex!important;
    content:'← Bandeja'!important;
    text-indent:0!important;
    font-size:15px!important;
    font-weight:950!important;
    color:#061489!important;
  }
  .reader-actions>div{
    display:contents!important;
  }
  .reader-actions .btn{
    width:100%!important;
    min-height:48px!important;
    padding:0 10px!important;
    border-radius:18px!important;
    font-size:15px!important;
    white-space:nowrap!important;
  }
  .mail-reader-panel h2{
    font-size:24px!important;
    line-height:1.15!important;
    padding:22px 18px 12px!important;
    margin:0!important;
    max-height:none!important;
    overflow:visible!important;
    word-break:break-word!important;
  }
  .reader-from{
    margin:0 16px 14px!important;
    padding:14px 15px!important;
    border-radius:20px!important;
    font-size:15.5px!important;
    line-height:1.38!important;
    overflow-wrap:anywhere!important;
  }
  .reader-from span{
    float:none!important;
    display:block!important;
    margin-top:6px!important;
  }
  .message-body.email-canvas,
  .message-body{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:20px 18px 18px!important;
    font-size:16px!important;
    line-height:1.58!important;
    background:#fff!important;
    border-top:1px solid rgba(255,122,0,.15)!important;
  }
  .message-body.email-canvas *,
  .message-body *{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .message-body.email-canvas table,
  .message-body table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:auto!important;
  }
  .message-body.email-canvas td,
  .message-body.email-canvas th,
  .message-body td,
  .message-body th{
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
  }
  .message-body.email-canvas img,
  .message-body img{
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .reader-footer{
    position:relative!important;
    bottom:auto!important;
    z-index:1!important;
    margin:10px 18px 30px!important;
    padding:12px 14px!important;
    min-height:58px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    background:#fff8ef!important;
    border:1px solid rgba(255,122,0,.22)!important;
    box-shadow:0 10px 28px rgba(5,20,95,.06)!important;
  }
  .reader-footer img{
    height:28px!important;
    max-width:130px!important;
    flex:0 0 auto!important;
  }
  .reader-footer span{
    display:block!important;
    font-size:12.5px!important;
    line-height:1.25!important;
    color:#0b1e96!important;
  }
}

@media (max-width: 430px){
  .top{padding-left:16px!important;padding-right:16px!important;}
  .menu{left:18px!important;top:78px!important;width:54px!important;height:54px!important;}
  .mobile-logo{width:218px!important;max-width:56vw!important;margin-right:10px!important;}
  .title-row{padding-left:86px!important;min-height:70px!important;}
  .top h1{font-size:31px!important;}
  .top-actions{right:16px!important;top:74px!important;}
  .refresh-btn{min-width:132px!important;padding:0 18px!important;font-size:16px!important;}
  .reader-actions{grid-template-columns:92px 1fr 1fr!important;gap:8px!important;padding:11px 12px!important;}
  .reader-actions>a:first-child:after{font-size:14px!important;}
  .reader-actions .btn{font-size:14px!important;}
  .reader-footer{margin-left:16px!important;margin-right:16px!important;}
}

@media (max-width: 360px){
  .reader-actions{grid-template-columns:84px 1fr 1fr!important;gap:6px!important;}
  .reader-actions>a:first-child:after,
  .reader-actions .btn{font-size:12.5px!important;}
}


/* === V23 MOBILE HEADER + EMAIL FOOTER REAL FIX ===
   Corrige header móvil desordenado y evita que el footer HTML del correo se parta letra por letra.
   No toca ajustes guardados ni lógica de cuentas.
*/
@media (max-width: 980px){
  /* Inbox mobile header: logo arriba limpio, menú flotante sin montarse */
  .top{
    position:relative!important;
    padding:18px 18px 16px!important;
    overflow:visible!important;
  }
  .top .title-row{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:end!important;
    gap:12px!important;
  }
  .mobile-logo{
    display:block!important;
    width:min(265px,68vw)!important;
    max-width:min(265px,68vw)!important;
    height:auto!important;
    margin:0 0 4px 58px!important;
    object-fit:contain!important;
    position:relative!important;
    z-index:1!important;
  }
  .menu{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:absolute!important;
    left:18px!important;
    top:48px!important;
    width:58px!important;
    height:58px!important;
    border-radius:22px!important;
    z-index:6!important;
    background:linear-gradient(145deg,#fff7df,#fff0bf)!important;
    border:1px solid rgba(255,122,24,.18)!important;
    box-shadow:0 16px 34px rgba(15,39,90,.12)!important;
    color:#061489!important;
    font-size:24px!important;
  }
  .top h1{
    margin-left:76px!important;
    font-size:34px!important;
    line-height:1!important;
  }
  .folder-subtitle{margin-left:76px!important;}
  .top-actions{align-self:start!important;padding-top:8px!important;}
  .refresh-btn{
    min-width:150px!important;
    height:58px!important;
    border-radius:22px!important;
    font-size:17px!important;
  }
  .search{
    margin-top:18px!important;
    padding:16px!important;
    border:1px solid rgba(11,73,216,.14)!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.72)!important;
    box-shadow:0 12px 32px rgba(15,39,90,.06)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .search input,.search button{height:54px!important;font-size:17px!important;border-radius:18px!important;}

  /* Reader mobile action bar: limpio, 3 botones balanceados */
  body.mobile-reader-open .reader-actions,
  .shell.has-reader .reader-actions{
    display:grid!important;
    grid-template-columns:1fr 1.15fr 1.15fr!important;
    gap:10px!important;
    padding:13px 14px!important;
    align-items:center!important;
    background:rgba(255,255,255,.97)!important;
  }
  .reader-actions>a:first-child{
    min-height:48px!important;
    padding:0 12px!important;
    border-radius:18px!important;
    font-size:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
  .reader-actions>a:first-child:after{
    content:'Bandeja'!important;
    font-size:16px!important;
    font-weight:950!important;
  }
  .reader-actions>div{display:contents!important;}
  .reader-actions .btn{
    min-height:48px!important;
    width:100%!important;
    padding:0 8px!important;
    border-radius:18px!important;
    font-size:16px!important;
    text-align:center!important;
  }

  /* El cuerpo del correo debe poder mostrar firmas/footers en una fila como en PC */
  .message-body.email-canvas{
    overflow-x:auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:16px 16px 28px!important;
    background:#fff!important;
  }
  .message-body.email-canvas,
  .message-body.email-canvas *{
    box-sizing:border-box!important;
    max-width:100%!important;
  }
  .message-body.email-canvas table{
    width:100%!important;
    max-width:100%!important;
    table-layout:auto!important;
    border-collapse:separate!important;
  }
  .message-body.email-canvas td,
  .message-body.email-canvas th{
    word-break:normal!important;
    overflow-wrap:normal!important;
    white-space:normal!important;
    vertical-align:middle!important;
  }
  .message-body.email-canvas span,
  .message-body.email-canvas p,
  .message-body.email-canvas div,
  .message-body.email-canvas a{
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .message-body.email-canvas img{
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }

  /* Firma/footer generado por la app: siempre una sola fila bonita */
  .reader-footer{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    min-height:56px!important;
    padding:10px 12px!important;
    border-top:1px solid rgba(255,122,24,.18)!important;
    background:#fff8ef!important;
    color:#0b1740!important;
    font-size:12px!important;
    line-height:1.25!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  .reader-footer img{
    flex:0 0 auto!important;
    width:104px!important;
    max-width:38vw!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .reader-footer span{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
}
@media (max-width: 430px){
  .mobile-logo{width:240px!important;max-width:64vw!important;margin-left:78px!important;}
  .menu{left:18px!important;top:54px!important;width:60px!important;height:60px!important;}
  .top h1{margin-left:82px!important;font-size:33px!important;}
  .folder-subtitle{margin-left:82px!important;}
  .refresh-btn{min-width:132px!important;height:56px!important;font-size:16px!important;}
  .reader-actions{grid-template-columns:1fr 1.25fr 1.25fr!important;gap:8px!important;}
  .reader-actions .btn,.reader-actions>a:first-child:after{font-size:15px!important;}
  .reader-footer{font-size:11.5px!important;gap:8px!important;}
  .reader-footer img{width:96px!important;max-width:36vw!important;}
}
@media (max-width: 360px){
  .reader-actions{grid-template-columns:92px 1fr 1fr!important;gap:6px!important;}
  .reader-actions .btn,.reader-actions>a:first-child:after{font-size:13px!important;}
  .mobile-logo{width:210px!important;max-width:62vw!important;}
  .top h1{font-size:30px!important;}
}

/* =========================================================
   V35 - MOBILE HEADER REAL FINAL
   Base: V23. Solo header móvil. NO tocar footer/reader/body.
   ========================================================= */
@media (max-width: 980px){
  .top{
    position: relative !important;
    padding: 18px 16px 14px !important;
    min-height: auto !important;
    overflow: visible !important;
    background: rgba(255,255,255,.72) !important;
  }

  .top-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .title-row{
    position: relative !important;
    display: block !important;
    text-align: center !important;
    min-height: 118px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .title-row > div:first-child{
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-logo{
    display: block !important;
    width: min(252px, 62vw) !important;
    max-width: 252px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
  }

  .top h1{
    display: block !important;
    margin: 0 auto !important;
    padding: 0 132px 0 72px !important;
    min-height: 52px !important;
    line-height: 52px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #101828 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .menu{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 18px !important;
    top: 74px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background: linear-gradient(145deg,#fff8df,#fff1c2) !important;
    border: 1px solid rgba(255,122,0,.22) !important;
    box-shadow: 0 12px 28px rgba(255,122,0,.12), 0 8px 22px rgba(11,73,216,.08) !important;
    color: #061489 !important;
    z-index: 6 !important;
    transform: none !important;
  }

  .top-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: absolute !important;
    right: 18px !important;
    top: 79px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 6 !important;
  }

  .refresh-btn{
    width: auto !important;
    min-width: 118px !important;
    max-width: 128px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .folder-subtitle{display:none!important;}

  .search{
    clear: both !important;
    margin: 8px auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 390px){
  .mobile-logo{width:min(230px,60vw)!important;margin-bottom:12px!important;}
  .title-row{min-height:112px!important;}
  .top h1{font-size:30px!important;padding-left:66px!important;padding-right:122px!important;}
  .menu{left:14px!important;top:70px!important;width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;border-radius:17px!important;}
  .top-actions{right:14px!important;top:74px!important;}
  .refresh-btn{min-width:108px!important;max-width:112px!important;height:42px!important;font-size:13px!important;padding:0 10px!important;}
}

/* =========================================================
   V40 - AIR-WORLD PRO SIDEBAR + DESKTOP UI
   Solo diseño visual. NO toca PHP, IMAP, contadores ni lógica.
   Inspirado en header web Air-World: teal + azul + naranja + morado.
   ========================================================= */
:root{
  --aw-teal:#00a99d;
  --aw-blue:#06277f;
  --aw-royal:#123fd3;
  --aw-orange:#ff7a00;
  --aw-gold:#ffb21a;
  --aw-purple:#3326b8;
  --aw-ink:#071022;
  --aw-soft:#f8fbff;
}

@media (min-width:981px){
  body{
    background:
      radial-gradient(circle at 92% 14%,rgba(255,122,0,.16),transparent 24%),
      radial-gradient(circle at 76% 86%,rgba(18,63,211,.12),transparent 30%),
      linear-gradient(135deg,#f9fcff 0%,#eef6ff 52%,#fff3e6 100%) !important;
  }

  .shell{
    grid-template-columns:315px minmax(410px,500px) minmax(560px,1fr) !important;
    background:transparent!important;
  }

  .sidebar{
    width:315px!important;
    padding:22px 18px 24px!important;
    background:
      radial-gradient(circle at 18% 10%,rgba(0,169,157,.62),transparent 28%),
      radial-gradient(circle at 84% 76%,rgba(255,122,0,.46),transparent 28%),
      radial-gradient(circle at 106% 52%,rgba(123,45,210,.42),transparent 30%),
      linear-gradient(160deg,#00a99d 0%,#064d8f 34%,#071f7c 62%,#2a117d 100%)!important;
    border-right:1px solid rgba(255,255,255,.24)!important;
    box-shadow:24px 0 60px rgba(6,39,127,.20)!important;
    color:#fff!important;
    position:relative!important;
    isolation:isolate!important;
  }

  .sidebar:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
      linear-gradient(90deg,rgba(255,255,255,.18),transparent 42%),
      radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 30%);
    opacity:.9;
  }

  .sidebar:after{
    content:"";
    position:absolute;
    right:-1px;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(180deg,var(--aw-teal),var(--aw-orange),var(--aw-purple));
    box-shadow:0 0 28px rgba(255,122,0,.35);
    pointer-events:none;
  }

  .sidebar .brand{
    border-radius:24px!important;
    padding:14px 13px 12px!important;
    margin:0 0 20px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.84))!important;
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:0 22px 42px rgba(4,15,60,.18), inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  .sidebar .brand-logo{max-width:244px!important;width:100%!important;margin:0 auto 4px!important;filter:drop-shadow(0 10px 20px rgba(6,39,127,.18))!important;}
  .account-email{color:#17315d!important;font-weight:950!important;letter-spacing:.01em!important;}

  .sidebar .compose{
    min-height:56px!important;
    border-radius:24px!important;
    margin:0 0 20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    color:#fff!important;
    font-weight:950!important;
    text-shadow:0 1px 10px rgba(0,0,0,.12)!important;
    background:linear-gradient(135deg,#ffb21a 0%,#ff7a00 46%,#123fd3 100%)!important;
    box-shadow:0 18px 38px rgba(255,122,0,.24),0 12px 28px rgba(18,63,211,.18)!important;
    border:1px solid rgba(255,255,255,.32)!important;
  }
  .sidebar .compose:before{content:"✉";font-size:15px;}

  .quick-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin:0 0 20px!important;
  }
  .sidebar .sidebar-install-btn,
  .sidebar .notify-btn,
  .sidebar .settings-btn{
    min-height:48px!important;
    margin:0!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.12)!important;
    border:1px solid rgba(255,255,255,.25)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 26px rgba(0,0,0,.12)!important;
    color:#fff!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  .sidebar .sidebar-install-btn:hover,
  .sidebar .notify-btn:hover,
  .sidebar .settings-btn:hover{
    transform:translateY(-1px)!important;
    background:rgba(255,255,255,.18)!important;
  }

  .nav-title{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    margin:18px 0 11px!important;
    color:#fff!important;
    font-size:12px!important;
    letter-spacing:.32em!important;
    font-weight:950!important;
    text-shadow:0 2px 10px rgba(0,0,0,.24)!important;
  }
  .nav-title:after{
    content:"";
    height:1px;
    flex:1;
    background:linear-gradient(90deg,rgba(255,255,255,.58),transparent);
  }

  .sidebar nav,
  .storage-card{
    border-radius:24px!important;
    padding:10px!important;
    background:rgba(255,255,255,.105)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 40px rgba(2,8,40,.16)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  .sidebar nav a,
  .sidebar nav a:link,
  .sidebar nav a:visited,
  .sidebar nav a:focus,
  .sidebar nav a:active{
    min-height:52px!important;
    border-radius:18px!important;
    padding:12px 12px!important;
    color:rgba(255,255,255,.94)!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:none!important;
    font-weight:900!important;
  }
  .sidebar nav a:hover{
    transform:translateX(3px)!important;
    background:rgba(255,255,255,.16)!important;
    border-color:rgba(255,255,255,.24)!important;
  }
  .sidebar nav a.active,
  .sidebar nav a.active:link,
  .sidebar nav a.active:visited,
  .sidebar nav a.active:hover,
  .sidebar nav a.active:focus{
    color:#fff!important;
    background:linear-gradient(90deg,rgba(0,169,157,.78) 0%,rgba(255,122,0,.82) 68%,rgba(18,63,211,.92) 100%)!important;
    border-color:rgba(255,255,255,.38)!important;
    box-shadow:0 14px 30px rgba(255,122,0,.18),inset 0 1px 0 rgba(255,255,255,.20)!important;
    transform:none!important;
  }
  .sidebar nav a span{font-weight:950!important;text-shadow:0 1px 9px rgba(0,0,0,.13)!important;}
  .acct-dot{box-shadow:0 0 0 4px rgba(255,255,255,.20),0 0 14px rgba(255,255,255,.36)!important;}

  .count-badge{
    min-width:31px!important;
    height:28px!important;
    border-radius:999px!important;
    color:#fff!important;
    background:rgba(255,255,255,.16)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15)!important;
    font-weight:950!important;
  }
  .count-badge.hot{
    background:linear-gradient(135deg,#ffb21a,#ff7a00)!important;
    color:#fff!important;
    box-shadow:0 10px 20px rgba(255,122,0,.26)!important;
  }

  .storage-card{
    margin:22px 0 14px!important;
    color:#fff!important;
  }
  .storage-card b{display:flex!important;gap:8px!important;align-items:center!important;color:#fff!important;font-weight:950!important;}
  .storage-card b:before{content:"▣";color:#fff;}
  .storage-card small{color:rgba(255,255,255,.84)!important;line-height:1.45!important;}
  .bar{height:9px!important;background:rgba(255,255,255,.18)!important;border-radius:999px!important;}
  .bar span{background:linear-gradient(90deg,#ffb21a,#ff7a00,#00c7bc,#42a5ff)!important;border-radius:999px!important;box-shadow:0 0 16px rgba(0,199,188,.45)!important;}
  .settings-bottom,.logout{margin-top:10px!important;}
  .logout{
    min-height:48px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.10)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:#ffe7e7!important;
    justify-content:center!important;
  }

  .main{
    background:rgba(255,255,255,.76)!important;
    border-right:1px solid rgba(18,63,211,.10)!important;
    box-shadow:18px 0 42px rgba(6,39,127,.06)!important;
  }
  .top{
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.76))!important;
    border-bottom:1px solid rgba(18,63,211,.10)!important;
  }
  .top h1{color:#071022!important;letter-spacing:-.055em!important;}
  .folder-subtitle{color:#253858!important;font-weight:850!important;}
  .refresh-btn,.search button,.welcome-card .btn,.btn{
    background:linear-gradient(135deg,#ffb21a 0%,#ff7a00 48%,#123fd3 100%)!important;
    color:#fff!important;
    box-shadow:0 16px 32px rgba(255,122,0,.20),0 10px 24px rgba(18,63,211,.14)!important;
  }
  .search{
    background:#fff!important;
    border:1px solid rgba(18,63,211,.16)!important;
    box-shadow:0 16px 40px rgba(6,39,127,.08)!important;
  }
  .mail{
    border-radius:22px!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(18,63,211,.10)!important;
    box-shadow:0 14px 35px rgba(6,39,127,.08)!important;
  }
  .mail.unread:before,.mail.selected:before{
    background:linear-gradient(180deg,#123fd3,#00a99d,#ff7a00)!important;
  }
  .avatar{
    background:linear-gradient(135deg,#123fd3,#ff7a00)!important;
    color:#fff!important;
    box-shadow:0 12px 24px rgba(18,63,211,.18)!important;
  }
  .preview{
    background:
      radial-gradient(circle at 88% 10%,rgba(255,122,0,.12),transparent 28%),
      radial-gradient(circle at 35% 84%,rgba(18,63,211,.11),transparent 34%),
      linear-gradient(135deg,#fbfdff,#edf6ff 56%,#fff4e7)!important;
  }
  .welcome-card{
    max-width:640px!important;
    border-radius:34px!important;
    border:1px solid rgba(18,63,211,.10)!important;
    background:rgba(255,255,255,.84)!important;
    box-shadow:0 30px 70px rgba(6,39,127,.12)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  .welcome-card img{max-width:370px!important;filter:drop-shadow(0 16px 28px rgba(18,63,211,.13))!important;}
  .welcome-card h2{font-size:34px!important;line-height:1.08!important;letter-spacing:-.05em!important;color:#071022!important;}
}

@media (max-width:980px){
  .sidebar{
    background:
      radial-gradient(circle at 15% 9%,rgba(0,169,157,.62),transparent 28%),
      radial-gradient(circle at 92% 72%,rgba(255,122,0,.52),transparent 30%),
      linear-gradient(160deg,#00a99d 0%,#064d8f 34%,#071f7c 64%,#2a117d 100%)!important;
    color:#fff!important;
  }
  .sidebar .brand{background:rgba(255,255,255,.92)!important;border-radius:24px!important;padding:14px!important;box-shadow:0 18px 36px rgba(0,0,0,.18)!important;}
  .sidebar nav,.storage-card{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:24px!important;}
  .sidebar nav a{color:#fff!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;}
  .sidebar nav a.active{background:linear-gradient(90deg,rgba(0,169,157,.76),rgba(255,122,0,.80),rgba(18,63,211,.88))!important;color:#fff!important;}
  .nav-title{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.18)!important;}
}

/* === AWMS MAIL PRO — SIDEBAR ELEGANT FIX v52 ===
   Solo visual: mejora del panel izquierdo, sin tocar lógica ni PHP.
*/
:root{
  --awms-teal:#0aa99a;
  --awms-navy:#06235f;
  --awms-blue:#123fd3;
  --awms-orange:#ff7a00;
  --awms-gold:#ffb21a;
  --awms-panel-text:#ffffff;
}
.sidebar{
  position:relative!important;
  width:292px!important;
  padding:22px 18px!important;
  color:var(--awms-panel-text)!important;
  background:
    radial-gradient(circle at 10% 4%, rgba(21,217,195,.34) 0, transparent 28%),
    radial-gradient(circle at 92% 38%, rgba(255,122,0,.30) 0, transparent 26%),
    radial-gradient(circle at 70% 96%, rgba(123,55,220,.36) 0, transparent 34%),
    linear-gradient(165deg,#0aa99a 0%,#074a83 32%,#08266f 61%,#160b58 100%)!important;
  border-right:0!important;
  box-shadow:16px 0 46px rgba(5,21,68,.16)!important;
  overflow-y:auto!important;
  scrollbar-width:thin!important;
}
.sidebar:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.12),transparent 22%),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 38%);
}
.sidebar:after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--awms-teal),var(--awms-gold),var(--awms-orange),var(--awms-blue));
  box-shadow:0 0 18px rgba(255,122,0,.42);
}
.sidebar>*{position:relative;z-index:1}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);border-radius:30px}.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar .brand{
  display:block!important;
  padding:15px 14px!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,248,255,.86))!important;
  border:1px solid rgba(255,255,255,.70)!important;
  box-shadow:0 20px 42px rgba(3,17,56,.24), inset 0 1px 0 rgba(255,255,255,.96)!important;
  margin-bottom:18px!important;
}
.sidebar .brand-logo{max-width:228px!important;width:100%!important;margin:0 auto!important;filter:drop-shadow(0 10px 18px rgba(6,35,95,.12))!important}.account-email{margin-top:6px!important;color:#12305f!important;font-weight:900!important;font-size:12px!important;letter-spacing:.01em!important}
.compose{
  margin:18px 0 16px!important;
  min-height:54px!important;
  border-radius:22px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  color:#fff!important;font-weight:950!important;
  background:linear-gradient(135deg,#ffb21a 0%,#ff7a00 48%,#a343bd 76%,#123fd3 100%)!important;
  border:1px solid rgba(255,255,255,.36)!important;
  box-shadow:0 16px 36px rgba(255,122,0,.30), inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.compose:hover{transform:translateY(-1px)!important;filter:saturate(1.06)!important}.compose:before{content:"✎";font-weight:900}.quick-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0 0 18px!important}.sidebar-install-btn{margin:0!important;min-height:46px!important;border-radius:16px!important;color:#09204a!important;background:linear-gradient(180deg,#fff,#eef7ff)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 12px 28px rgba(2,20,60,.18)!important;font-weight:950!important}.sidebar-install-btn:hover{transform:translateY(-1px)!important}.nav-title{display:flex!important;align-items:center!important;gap:12px!important;margin:19px 0 10px!important;color:#fff!important;font-size:12px!important;font-weight:950!important;letter-spacing:.28em!important;text-shadow:0 2px 14px rgba(0,0,0,.24)!important}.nav-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.42),transparent)}
.sidebar nav{padding:10px!important;border-radius:25px!important;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08))!important;border:1px solid rgba(255,255,255,.20)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px rgba(1,12,45,.15)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}.sidebar nav a{min-height:52px!important;margin:0 0 8px!important;padding:12px 12px!important;border-radius:18px!important;color:#f8fbff!important;background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.11)!important;box-shadow:none!important;font-weight:850!important;letter-spacing:-.01em!important;text-shadow:none!important}.sidebar nav a span{display:flex!important;align-items:center!important;gap:9px!important;color:#fff!important;font-weight:900!important;text-shadow:none!important}.sidebar nav a:hover{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.24)!important;transform:translateX(2px)!important}.sidebar nav a.active{color:#fff!important;background:linear-gradient(90deg,rgba(10,169,154,.98) 0%,rgba(255,122,0,.92) 58%,rgba(18,63,211,.95) 100%)!important;border-color:rgba(255,255,255,.45)!important;box-shadow:0 14px 30px rgba(255,122,0,.23), inset 0 1px 0 rgba(255,255,255,.32)!important}.acct-dot{width:12px!important;height:12px!important;border-radius:50%!important;display:inline-block!important;box-shadow:0 0 0 4px rgba(255,255,255,.18)!important}.count-badge{min-width:30px!important;height:28px!important;padding:0 9px!important;border-radius:999px!important;background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;font-weight:950!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important}.count-badge.hot{background:linear-gradient(135deg,#fff,#ffb21a 28%,#ff7a00)!important;color:#09204a!important;box-shadow:0 10px 24px rgba(255,122,0,.32)!important}.storage-card{margin:20px 0 14px!important;padding:16px!important;border-radius:22px!important;color:#fff!important;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.07))!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 18px 40px rgba(1,12,45,.12)!important}.storage-card b,.storage-card small{color:#fff!important}.bar{height:8px!important;border-radius:999px!important;background:rgba(255,255,255,.18)!important}.bar span{background:linear-gradient(90deg,#ffb21a,#ff7a00,#0aa99a,#63c7ff)!important;border-radius:999px!important}.settings-bottom,.logout{border-radius:18px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 14px 28px rgba(1,12,45,.10)!important}.logout{justify-content:center!important;color:#ffe8e8!important}@media(max-width:980px){.sidebar{width:min(88vw,315px)!important;padding:20px 16px!important}.quick-actions{grid-template-columns:1fr 1fr!important}.sidebar nav a{min-height:50px!important}}

/* =========================================================
   AIR-WORLD SOFT BLUE + GOLD UI FINAL v70
   Solo capa visual: no toca PHP/IMAP/contadores/configuración.
   ========================================================= */
:root{
  --soft-blue:#dbeeff!important;
  --soft-blue-2:#c7e3ff!important;
  --soft-blue-3:#edf7ff!important;
  --brand-blue:#0b49d8!important;
  --brand-blue-2:#1f6feb!important;
  --brand-navy:#071a4f!important;
  --brand-gold:#ffb21a!important;
  --brand-gold-2:#ffd46b!important;
  --brand-orange:#ff7a18!important;
  --clean-white:#ffffff!important;
  --soft-line:rgba(92,132,198,.18)!important;
  --soft-shadow:0 22px 60px rgba(34,75,132,.12)!important;
  --soft-shadow-sm:0 12px 30px rgba(34,75,132,.08)!important;
}
html,body{
  background:
    radial-gradient(circle at 6% 8%,rgba(255,210,104,.20),transparent 30%),
    radial-gradient(circle at 88% 8%,rgba(87,151,230,.18),transparent 36%),
    radial-gradient(circle at 92% 92%,rgba(255,178,26,.15),transparent 34%),
    linear-gradient(135deg,#fbfdff 0%,#eef7ff 48%,#fff7e8 100%)!important;
  color:#081631!important;
}
body::before{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 78% 38%,rgba(255,255,255,.74),transparent 46%),
    repeating-linear-gradient(115deg,rgba(11,73,216,.026) 0 1px,transparent 1px 18px)!important;
}
.shell{
  grid-template-columns:318px minmax(430px,520px) minmax(560px,1fr)!important;
  background:transparent!important;
}

/* SIDEBAR: pastel blue, card logo PRO */
.sidebar{
  width:318px!important;
  min-width:318px!important;
  padding:22px 20px 18px!important;
  color:var(--brand-navy)!important;
  background:
    radial-gradient(circle at 16% 0%,rgba(255,210,104,.35),transparent 28%),
    radial-gradient(circle at 105% 18%,rgba(11,73,216,.19),transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#edf7ff 46%,#d9efff 100%)!important;
  border-right:1px solid rgba(11,73,216,.13)!important;
  box-shadow:16px 0 46px rgba(34,75,132,.08)!important;
  scrollbar-color:rgba(11,73,216,.22) transparent!important;
}
.sidebar .brand{
  position:relative!important;
  margin:0 0 18px!important;
  padding:20px 18px 16px!important;
  border-radius:28px!important;
  text-align:center!important;
  overflow:hidden!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,252,255,.88)) padding-box,
    linear-gradient(135deg,rgba(255,178,26,.55),rgba(255,255,255,.85),rgba(11,73,216,.32)) border-box!important;
  border:1px solid transparent!important;
  box-shadow:0 20px 50px rgba(34,75,132,.13), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.sidebar .brand::before{
  content:''!important;
  position:absolute!important;
  inset:-40% -20% auto auto!important;
  width:150px!important;
  height:150px!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(255,178,26,.22),transparent 67%)!important;
}
.sidebar .brand::after{
  content:''!important;
  position:absolute!important;
  left:24px!important;right:24px!important;bottom:0!important;height:3px!important;
  border-radius:99px 99px 0 0!important;
  background:linear-gradient(90deg,var(--brand-gold),var(--brand-blue))!important;
  opacity:.9!important;
}
.sidebar .brand-logo{
  position:relative!important;
  z-index:1!important;
  max-width:244px!important;
  max-height:none!important;
  width:100%!important;
  margin:0 auto 7px!important;
  filter:drop-shadow(0 12px 22px rgba(11,73,216,.12))!important;
}
.account-email{
  position:relative!important;
  z-index:1!important;
  font-size:12.5px!important;
  color:#305071!important;
  font-weight:950!important;
}
.sidebar .compose{
  height:54px!important;
  min-height:54px!important;
  margin:0 0 14px!important;
  border-radius:20px!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:15px!important;
  background:linear-gradient(135deg,#ffce4a 0%,#ffb21a 32%,#2d7df0 100%)!important;
  border:0!important;
  box-shadow:0 18px 36px rgba(255,178,26,.22),0 12px 28px rgba(11,73,216,.14)!important;
}
.sidebar .compose:hover{transform:translateY(-2px)!important;filter:saturate(1.04)!important;}
.sidebar .quick-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:0 0 18px!important;
}
.sidebar .quick-actions .sidebar-install-btn{
  height:46px!important;
  min-height:46px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.68)!important;
  border:1px solid rgba(92,132,198,.20)!important;
  color:#0d367d!important;
  box-shadow:0 12px 24px rgba(34,75,132,.07)!important;
}
.sidebar .quick-actions .sidebar-install-btn:hover{
  background:linear-gradient(180deg,#fff,#fff9e9)!important;
  border-color:rgba(255,178,26,.45)!important;
  color:var(--brand-navy)!important;
}
.nav-title{
  margin:15px 4px 10px!important;
  color:#0d57c5!important;
  font-size:11px!important;
  letter-spacing:.24em!important;
}
.nav-title::after{
  background:linear-gradient(90deg,rgba(11,73,216,.28),rgba(255,178,26,.30),transparent)!important;
}
.sidebar nav{
  padding:8px!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.56)!important;
  border:1px solid rgba(92,132,198,.18)!important;
  box-shadow:0 16px 38px rgba(34,75,132,.08), inset 0 1px 0 rgba(255,255,255,.78)!important;
  backdrop-filter:blur(18px)!important;
}
.sidebar nav a,
.sidebar nav a:link,
.sidebar nav a:visited,
.sidebar nav a:focus,
.sidebar nav a:active{
  min-height:48px!important;
  padding:11px 13px!important;
  margin-bottom:6px!important;
  border-radius:18px!important;
  color:#17325f!important;
  background:transparent!important;
  border:1px solid transparent!important;
  font-weight:900!important;
}
.sidebar nav a:hover{
  background:rgba(255,255,255,.70)!important;
  border-color:rgba(11,73,216,.10)!important;
  box-shadow:0 10px 22px rgba(34,75,132,.07)!important;
  color:var(--brand-navy)!important;
}
.sidebar nav a.active,
.sidebar nav a.active:link,
.sidebar nav a.active:visited,
.sidebar nav a.active:focus,
.sidebar nav a.active:active,
.sidebar nav a.active:hover{
  color:var(--brand-navy)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(241,249,255,.76)) padding-box,
    linear-gradient(135deg,rgba(255,178,26,.80),rgba(11,73,216,.52)) border-box!important;
  border:1px solid transparent!important;
  box-shadow:0 14px 28px rgba(34,75,132,.10)!important;
}
.sidebar nav a.active::before{opacity:1!important;}
.count-badge{
  background:rgba(255,255,255,.72)!important;
  color:#0d367d!important;
  border:1px solid rgba(92,132,198,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.count-badge.hot{
  color:#102046!important;
  background:linear-gradient(135deg,#ffdf72,#ffb21a)!important;
  border-color:rgba(255,178,26,.45)!important;
  box-shadow:0 10px 22px rgba(255,178,26,.28)!important;
}
.storage-card{
  margin:6px 0 12px!important;
  padding:17px 17px!important;
  border-radius:24px!important;
  color:#24466d!important;
  background:rgba(255,255,255,.54)!important;
  border:1px solid rgba(92,132,198,.18)!important;
  box-shadow:0 16px 38px rgba(34,75,132,.08)!important;
  backdrop-filter:blur(18px)!important;
}
.storage-card b{color:var(--brand-navy)!important;font-size:15px!important;}
.storage-card small{color:#4d6788!important;font-size:12px!important;}
.bar{height:8px!important;background:rgba(11,73,216,.10)!important;}
.bar span{width:46%!important;background:linear-gradient(90deg,var(--brand-gold),var(--brand-blue-2))!important;}
.settings-bottom,.logout{
  height:44px!important;min-height:44px!important;border-radius:17px!important;
  background:rgba(255,255,255,.58)!important;border:1px solid rgba(92,132,198,.18)!important;
  color:#0d367d!important;box-shadow:0 12px 25px rgba(34,75,132,.07)!important;
}

/* MAIN / INBOX */
.main{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(250,253,255,.66))!important;
  border-right:1px solid rgba(92,132,198,.15)!important;
  backdrop-filter:blur(20px)!important;
}
.top{
  padding:28px 28px 18px!important;
  background:rgba(255,255,255,.72)!important;
  border-bottom:1px solid rgba(92,132,198,.14)!important;
}
.top h1{font-size:31px!important;color:#071a4f!important;letter-spacing:-.045em!important;}
.folder-subtitle{color:#24466d!important;font-size:13px!important;}
.title-row{align-items:start!important;}
.refresh-btn{
  height:52px!important;min-width:140px!important;border-radius:18px!important;
  background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%)!important;
  color:#0b49d8!important;border:1px solid rgba(92,132,198,.18)!important;
  box-shadow:0 14px 28px rgba(34,75,132,.09)!important;
}
.refresh-btn:hover{background:linear-gradient(135deg,#fff,#fff8e6)!important;color:var(--brand-navy)!important;}
.search{gap:14px!important;margin-top:18px!important;}
.search input{
  height:52px!important;border-radius:18px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(92,132,198,.20)!important;
  box-shadow:0 14px 28px rgba(34,75,132,.055)!important;
}
.search button{
  height:52px!important;min-width:118px!important;border-radius:18px!important;
  color:#081631!important;
  background:linear-gradient(135deg,#ffe087,#ffb21a)!important;
  box-shadow:0 14px 30px rgba(255,178,26,.25)!important;
}
.list{padding:18px 18px 28px!important;background:transparent!important;}
.mail{
  min-height:82px!important;
  margin:10px 0!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(92,132,198,.15)!important;
  box-shadow:0 15px 36px rgba(34,75,132,.075)!important;
  backdrop-filter:blur(14px)!important;
}
.mail:hover,.mail.selected{
  transform:translateY(-2px)!important;
  border-color:rgba(255,178,26,.45)!important;
  box-shadow:0 22px 50px rgba(34,75,132,.12)!important;
  background:rgba(255,255,255,.92)!important;
}
.mail.unread{
  background:linear-gradient(90deg,rgba(238,247,255,.96),rgba(255,255,255,.92) 65%)!important;
  border-color:rgba(11,73,216,.18)!important;
}
.mail:before,.mail.unread:before{
  left:0!important;top:18px!important;bottom:18px!important;width:5px!important;border-radius:0 99px 99px 0!important;
  background:linear-gradient(180deg,var(--acct,#0b49d8),var(--brand-gold))!important;
}
.mail>a{padding:13px 13px!important;}
.avatar{
  width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:18px!important;
  background:linear-gradient(135deg,var(--acct,#0b49d8),#67b7ff)!important;
  box-shadow:0 14px 24px rgba(34,75,132,.14)!important;
}
.meta b{color:#0b1740!important;font-size:15px!important;}
.meta span{color:#243b5f!important;font-size:14px!important;}
.mail-account-label{color:#5e7693!important;}
.date{color:#4d6788!important;}
.inline button{
  background:rgba(244,249,255,.95)!important;
  border:1px solid rgba(92,132,198,.10)!important;
  color:#0b49d8!important;
}

/* RIGHT COLUMN: exact soft card style */
.preview{
  background:
    radial-gradient(circle at 96% 8%,rgba(255,178,26,.20),transparent 28%),
    radial-gradient(circle at 3% 94%,rgba(11,73,216,.13),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.62),rgba(238,247,255,.70) 55%,rgba(255,248,230,.42))!important;
  position:relative!important;
}
.preview::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.55!important;
  background:
    radial-gradient(circle at 78% 14%,rgba(11,73,216,.12) 0 2px,transparent 2px) 0 0/18px 18px,
    linear-gradient(135deg,transparent 68%,rgba(255,178,26,.12) 68%,rgba(255,178,26,.12) 75%,transparent 75%)!important;
}
.preview-inner{position:relative!important;z-index:1!important;padding:36px!important;}
.welcome-card-pro{
  max-width:590px!important;
  padding:42px 44px!important;
  border-radius:34px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(92,132,198,.16)!important;
  box-shadow:0 30px 80px rgba(34,75,132,.13), inset 0 1px 0 rgba(255,255,255,.94)!important;
  backdrop-filter:blur(20px)!important;
}
.mail-hero-illustration{width:220px!important;max-width:72%!important;margin:0 auto 12px!important;filter:drop-shadow(0 20px 24px rgba(34,75,132,.12))!important;}
.mail-hero-illustration svg{width:100%!important;height:auto!important;display:block!important;}
.welcome-card-pro > img{display:none!important;}
.welcome-card-pro h2{
  margin:10px 0 14px!important;
  color:#071a4f!important;
  font-size:32px!important;
  line-height:1.12!important;
  letter-spacing:-.05em!important;
}
.welcome-card-pro h2 span{color:#0b49d8!important;}
.welcome-card-pro h2 span::after{content:'World';color:#ff7a18!important;}
.welcome-card-pro p{max-width:460px!important;margin:0 auto 20px!important;color:#24466d!important;font-size:15.5px!important;line-height:1.42!important;}
.welcome-card-pro .btn{
  min-width:188px!important;height:54px!important;border-radius:18px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  color:#fff!important;background:linear-gradient(135deg,#ffcf4d 0%,#ffb21a 34%,#0b49d8 100%)!important;
  box-shadow:0 18px 36px rgba(255,178,26,.24),0 10px 26px rgba(11,73,216,.12)!important;
}
.mail-reader-panel,.compose-panel{
  background:rgba(255,255,255,.88)!important;border:1px solid rgba(92,132,198,.16)!important;
  box-shadow:0 30px 80px rgba(34,75,132,.13)!important;border-radius:32px!important;
}
.reader-actions,.compose-head{background:rgba(255,255,255,.82)!important;border-bottom:1px solid rgba(92,132,198,.14)!important;}

/* Login follows same soft identity */
.login-body{
  background:
    radial-gradient(circle at 10% 5%,rgba(255,178,26,.23),transparent 30%),
    radial-gradient(circle at 88% 16%,rgba(11,73,216,.18),transparent 34%),
    linear-gradient(135deg,#fbfdff 0%,#eef7ff 52%,#fff7e8 100%)!important;
}
.login-card{
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(92,132,198,.16)!important;
  box-shadow:0 30px 80px rgba(34,75,132,.13)!important;
  backdrop-filter:blur(20px)!important;
}
.login-card button{background:linear-gradient(135deg,#ffcf4d,#ffb21a 40%,#0b49d8)!important;color:#fff!important;}

@media(max-width:1180px){
  .shell{grid-template-columns:300px minmax(400px,500px) minmax(460px,1fr)!important;}
  .sidebar{width:300px!important;min-width:300px!important;}
  .welcome-card-pro{padding:34px 30px!important;}
}
@media(max-width:980px){
  .shell{display:block!important;}
  .sidebar{width:min(320px,88vw)!important;min-width:0!important;padding:18px!important;}
  .main{height:100dvh!important;}
  .top{padding:15px!important;}
  .search{gap:9px!important;}
  .search input,.search button,.refresh-btn{height:48px!important;}
  .welcome-card-pro h2{font-size:28px!important;}
}
@media(max-width:540px){
  .preview-inner{padding:18px!important;}
  .welcome-card-pro{padding:28px 20px!important;border-radius:28px!important;}
  .mail-hero-illustration{width:176px!important;}
  .welcome-card-pro h2{font-size:25px!important;}
}

/* =========================================================
   AWMS MAIL - FINAL SOFT BLUE / GOLD PRO UI
   Solo visual. No toca lógica IMAP, contadores ni configuración.
   ========================================================= */
:root{
  --aw-blue:#0b5fd7;
  --aw-blue-2:#2f87ff;
  --aw-blue-soft:#eaf5ff;
  --aw-gold:#ffb51b;
  --aw-orange:#ff7a18;
  --aw-ink:#06163b;
  --aw-text:#17345e;
  --aw-line:rgba(78,132,204,.18);
  --aw-shadow:0 22px 55px rgba(30,88,170,.13);
}
html,body{background:linear-gradient(135deg,#fbfdff 0%,#edf7ff 48%,#fff8ec 100%)!important;}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 10% 12%,rgba(255,181,27,.20),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(47,135,255,.16),transparent 30%),
    radial-gradient(circle at 70% 90%,rgba(255,122,24,.12),transparent 35%);
}
.shell{grid-template-columns:318px minmax(410px,500px) minmax(560px,1fr)!important;background:transparent!important;}

/* Sidebar premium suave */
.sidebar{
  width:318px!important;min-width:318px!important;padding:22px 20px 20px!important;color:var(--aw-ink)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(234,245,255,.72) 52%,rgba(214,234,255,.88))!important;
  border-right:1px solid rgba(11,95,215,.16)!important;
  box-shadow:20px 0 60px rgba(41,98,170,.10)!important;
  backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
  overflow-x:hidden!important;
}
.sidebar::before{
  content:'';position:fixed;left:0;top:0;width:318px;height:100%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 15% 5%,rgba(255,181,27,.28),transparent 32%),
    radial-gradient(circle at 94% 48%,rgba(47,135,255,.22),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));
}
.sidebar>*{position:relative;z-index:1;}
.sidebar .brand{
  min-height:126px!important;margin:0 0 20px!important;padding:18px 18px 14px!important;border-radius:26px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,248,255,.88))!important;
  border:1px solid rgba(47,135,255,.15)!important;
  box-shadow:0 18px 42px rgba(30,88,170,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.sidebar .brand::after{
  content:'';position:absolute;inset:auto 20px 0 20px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--aw-gold),var(--aw-blue-2));opacity:.95;
}
.sidebar .brand-logo{max-width:232px!important;width:92%!important;height:auto!important;max-height:72px!important;object-fit:contain!important;margin:0 auto 9px!important;filter:drop-shadow(0 10px 18px rgba(11,95,215,.12))!important;}
.account-email{font-size:13px!important;font-weight:900!important;color:#24527e!important;letter-spacing:.01em!important;}
.compose{
  min-height:58px!important;margin:0 0 18px!important;border-radius:22px!important;color:#fff!important;font-weight:950!important;letter-spacing:-.01em!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  background:linear-gradient(135deg,#ffd86b 0%,#ff9b1a 38%,#2f87ff 100%)!important;
  box-shadow:0 18px 38px rgba(255,154,26,.20),0 10px 26px rgba(47,135,255,.13)!important;
}
.quick-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin:0 0 22px!important;}
.sidebar-install-btn{
  width:100%!important;margin:0!important;min-height:48px!important;border-radius:18px!important;color:#12406d!important;font-weight:900!important;
  background:rgba(255,255,255,.74)!important;border:1px solid rgba(47,135,255,.15)!important;
  box-shadow:0 12px 26px rgba(30,88,170,.08)!important;backdrop-filter:blur(18px)!important;
}
.sidebar-install-btn.ready{background:linear-gradient(135deg,#ffffff,#fff2c7 42%,#dceeff)!important;color:#0c356c!important;}
.nav-title{margin:18px 2px 10px!important;color:#0b5fd7!important;font-size:12px!important;letter-spacing:.32em!important;font-weight:1000!important;display:flex!important;align-items:center!important;gap:12px!important;}
.nav-title::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,rgba(11,95,215,.30),transparent)!important;}
.sidebar nav{
  padding:10px!important;margin:0 0 18px!important;border-radius:25px!important;
  background:rgba(255,255,255,.48)!important;border:1px solid rgba(47,135,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 15px 34px rgba(30,88,170,.075)!important;
}
.sidebar nav a,
.sidebar nav a:visited,
.sidebar nav a:focus,
.sidebar nav a:active{
  min-height:52px!important;margin:0 0 8px!important;padding:12px 13px!important;border-radius:18px!important;color:#14345f!important;
  background:rgba(255,255,255,.45)!important;border:1px solid transparent!important;font-weight:900!important;box-shadow:none!important;
}
.sidebar nav a:last-child{margin-bottom:0!important;}
.sidebar nav a::before{filter:none!important;opacity:.95!important;width:24px!important;}
.sidebar nav a:not(.active):hover{background:rgba(255,255,255,.78)!important;border-color:rgba(47,135,255,.14)!important;transform:translateY(-1px)!important;}
.sidebar nav a.active,
.sidebar nav a.active:hover,
.sidebar nav a.active:visited,
.sidebar nav a.active:focus,
.sidebar nav a.active:active{
  color:#06163b!important;
  background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(234,245,255,.92) 48%,rgba(255,246,222,.96) 100%)!important;
  border:1px solid rgba(255,181,27,.44)!important;
  box-shadow:0 14px 30px rgba(30,88,170,.10),inset 5px 0 0 var(--aw-gold)!important;
}
.count-badge{min-width:31px!important;height:28px!important;color:#0a3678!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(47,135,255,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;font-weight:1000!important;}
.count-badge.hot{color:#071633!important;background:linear-gradient(135deg,#ffe486,#ffb51b)!important;border-color:rgba(255,181,27,.50)!important;box-shadow:0 12px 22px rgba(255,181,27,.24)!important;}
.storage-card{
  margin:8px 0 14px!important;padding:18px!important;border-radius:24px!important;color:#14345f!important;
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(232,244,255,.64))!important;border:1px solid rgba(47,135,255,.16)!important;
  box-shadow:0 16px 36px rgba(30,88,170,.09)!important;
}
.storage-card b{color:#06163b!important;font-size:15px!important;}
.storage-card small{color:#45698e!important;line-height:1.35!important;}
.bar{height:8px!important;background:rgba(11,95,215,.12)!important;border-radius:999px!important;}
.bar span{width:52%!important;background:linear-gradient(90deg,var(--aw-gold),var(--aw-orange),var(--aw-blue-2))!important;}
.logout,.settings-bottom{min-height:46px!important;border-radius:18px!important;background:rgba(255,255,255,.62)!important;color:#0b4e9e!important;border:1px solid rgba(47,135,255,.14)!important;box-shadow:0 12px 24px rgba(30,88,170,.07)!important;}

/* Centro */
.main{background:rgba(255,255,255,.62)!important;border-right:1px solid rgba(47,135,255,.13)!important;backdrop-filter:blur(18px)!important;}
.top{padding:26px 30px 18px!important;background:rgba(255,255,255,.70)!important;border-bottom:1px solid rgba(47,135,255,.12)!important;}
.top h1{font-size:32px!important;color:#071a4f!important;letter-spacing:-.05em!important;}
.folder-subtitle{color:#174a7e!important;font-weight:900!important;}
.refresh-btn{height:54px!important;border-radius:19px!important;color:#fff!important;background:linear-gradient(135deg,#ffb51b,#ff7a18 52%,#0b5fd7)!important;border:0!important;box-shadow:0 16px 32px rgba(255,122,24,.20)!important;}
.search input{height:54px!important;border-radius:19px!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(47,135,255,.18)!important;box-shadow:0 12px 26px rgba(30,88,170,.06)!important;}
.search button{height:54px!important;min-width:120px!important;border-radius:19px!important;color:#06163b!important;background:linear-gradient(135deg,#ffe58e,#ffb51b)!important;box-shadow:0 14px 26px rgba(255,181,27,.24)!important;}
.list{padding:18px 20px 30px!important;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0))!important;}
.mail{min-height:82px!important;border-radius:24px!important;margin:10px 0!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(47,135,255,.13)!important;box-shadow:0 14px 34px rgba(30,88,170,.08)!important;backdrop-filter:blur(14px)!important;}
.mail:hover,.mail.selected{transform:translateY(-2px)!important;border-color:rgba(255,181,27,.42)!important;box-shadow:0 20px 46px rgba(30,88,170,.12)!important;background:#fff!important;}
.mail.unread{background:linear-gradient(90deg,rgba(234,245,255,.96),rgba(255,255,255,.94) 62%)!important;border-color:rgba(11,95,215,.18)!important;}
.mail:before,.mail.unread:before{background:linear-gradient(180deg,var(--acct,#0b5fd7),var(--aw-gold))!important;width:5px!important;top:18px!important;bottom:18px!important;border-radius:0 99px 99px 0!important;}
.avatar{width:52px!important;height:52px!important;flex-basis:52px!important;border-radius:18px!important;background:linear-gradient(135deg,var(--acct,#0b5fd7),#74bdff)!important;color:#fff!important;box-shadow:0 14px 25px rgba(30,88,170,.14)!important;}
.meta b{color:#06163b!important;font-weight:1000!important;}
.meta span{color:#223f66!important;}
.mail:not(.unread) .meta b{color:#223f66!important;}
.inline button{background:rgba(244,250,255,.94)!important;border:1px solid rgba(47,135,255,.10)!important;color:#0b5fd7!important;}

/* Columna derecha PRO */
.preview{position:relative!important;background:
  radial-gradient(circle at 92% 8%,rgba(255,181,27,.20),transparent 30%),
  radial-gradient(circle at 6% 95%,rgba(47,135,255,.15),transparent 34%),
  linear-gradient(135deg,rgba(250,253,255,.78),rgba(237,247,255,.76) 55%,rgba(255,248,236,.58))!important;overflow:hidden!important;}
.preview::before{content:''!important;position:absolute!important;inset:0!important;pointer-events:none!important;opacity:.48!important;background:radial-gradient(circle at 78% 14%,rgba(11,95,215,.13) 0 1.8px,transparent 2px) 0 0/18px 18px!important;}
.preview::after{content:''!important;position:absolute!important;right:-160px!important;bottom:-190px!important;width:620px!important;height:420px!important;border-radius:50%!important;background:linear-gradient(135deg,rgba(255,181,27,.18),rgba(47,135,255,.10),transparent 70%)!important;filter:blur(4px)!important;transform:rotate(-12deg)!important;}
.preview-inner{position:relative!important;z-index:1!important;padding:42px!important;}
.welcome-card-pro{max-width:620px!important;padding:44px 44px 42px!important;border-radius:36px!important;background:rgba(255,255,255,.86)!important;border:1px solid rgba(47,135,255,.14)!important;box-shadow:0 30px 80px rgba(30,88,170,.14),inset 0 1px 0 rgba(255,255,255,.96)!important;backdrop-filter:blur(22px)!important;}
.mail-hero-illustration{width:230px!important;max-width:74%!important;margin:0 auto 18px!important;filter:drop-shadow(0 20px 26px rgba(30,88,170,.14))!important;}
.mail-hero-illustration svg{width:100%!important;height:auto!important;display:block!important;}
.welcome-card-pro>img{display:none!important;}
.welcome-card-pro h2{margin:0 0 14px!important;color:#06163b!important;font-size:33px!important;line-height:1.12!important;letter-spacing:-.055em!important;}
.welcome-card-pro h2 span{color:#0b5fd7!important;}
.welcome-card-pro h2 span::after{content:''!important;display:none!important;}
.welcome-card-pro h2 span + br{} 
.welcome-card-pro p{max-width:470px!important;margin:0 auto 22px!important;color:#244d7d!important;font-size:15.5px!important;line-height:1.45!important;}
.welcome-card-pro .btn{min-width:190px!important;height:56px!important;border-radius:19px!important;color:#fff!important;background:linear-gradient(135deg,#ffcf4d 0%,#ffb51b 34%,#0b5fd7 100%)!important;box-shadow:0 18px 36px rgba(255,181,27,.23),0 10px 26px rgba(11,95,215,.13)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;}
.mail-reader-panel,.compose-panel{background:rgba(255,255,255,.90)!important;border:1px solid rgba(47,135,255,.14)!important;box-shadow:0 30px 80px rgba(30,88,170,.14)!important;border-radius:34px!important;}
.reader-actions,.compose-head{background:rgba(255,255,255,.84)!important;border-bottom:1px solid rgba(47,135,255,.12)!important;}

@media(max-width:1180px){.shell{grid-template-columns:300px minmax(390px,480px) minmax(460px,1fr)!important}.sidebar{width:300px!important;min-width:300px!important}.sidebar::before{width:300px!important}.welcome-card-pro{padding:36px 32px!important}.welcome-card-pro h2{font-size:29px!important}}
@media(max-width:980px){.shell{display:block!important}.sidebar{width:min(330px,88vw)!important;min-width:0!important}.sidebar::before{width:min(330px,88vw)!important}.preview-inner{padding:20px!important}.welcome-card-pro{padding:30px 22px!important;border-radius:30px!important}.mail-hero-illustration{width:185px!important}.welcome-card-pro h2{font-size:26px!important}}

/* =========================================================
   AWMS MAIL - SIDEBAR READABILITY FINAL FIX
   Ajuste visual únicamente: contraste, legibilidad y acabado PRO.
   ========================================================= */
.sidebar{
  background:
    radial-gradient(circle at 20% 6%,rgba(255,194,58,.20),transparent 30%),
    radial-gradient(circle at 92% 38%,rgba(50,137,255,.18),transparent 34%),
    linear-gradient(180deg,#f8fcff 0%,#edf7ff 48%,#e1f0ff 100%)!important;
  color:#06163b!important;
}
.sidebar::before{
  opacity:.42!important;
  background:
    linear-gradient(90deg,rgba(255,181,27,.45),transparent 22%),
    radial-gradient(circle at 100% 30%,rgba(11,95,215,.22),transparent 38%)!important;
}
.sidebar .brand{
  padding:22px 16px 18px!important;
  border-radius:28px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(242,249,255,.92))!important;
  border:1px solid rgba(11,95,215,.16)!important;
  box-shadow:0 22px 46px rgba(30,88,170,.12), inset 0 1px 0 rgba(255,255,255,1)!important;
  overflow:hidden!important;
}
.sidebar .brand::after{
  content:'';display:block;height:4px;width:76%;margin:14px auto 0;border-radius:999px;
  background:linear-gradient(90deg,#ffb51b,#ff7a18,#0b5fd7)!important;
}
.sidebar .brand-logo{max-width:228px!important;width:92%!important;margin:0 auto 8px!important;display:block!important;filter:drop-shadow(0 12px 20px rgba(11,95,215,.10))!important;}
.sidebar .account-email{color:#123d70!important;font-weight:950!important;text-shadow:none!important;}
.compose{
  background:linear-gradient(135deg,#ffcf42 0%,#ffad18 35%,#4b9dff 100%)!important;
  color:#06163b!important;text-shadow:none!important;border:0!important;
  box-shadow:0 20px 38px rgba(255,181,27,.22),0 10px 28px rgba(11,95,215,.14)!important;
}
.compose::before{content:'✉️';margin-right:8px;}
.quick-actions .sidebar-install-btn{
  color:#0a2d5a!important;text-shadow:none!important;background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(11,95,215,.15)!important;box-shadow:0 14px 28px rgba(30,88,170,.09)!important;
}
.nav-title{color:#0b5fd7!important;text-shadow:none!important;}
.sidebar nav,.storage-card{
  background:rgba(255,255,255,.66)!important;
  border:1px solid rgba(11,95,215,.14)!important;
  box-shadow:0 18px 38px rgba(30,88,170,.08), inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.sidebar nav a,
.sidebar nav a:link,
.sidebar nav a:visited,
.sidebar nav a:focus,
.sidebar nav a:focus-visible,
.sidebar nav a:active{
  color:#102f5d!important;
  text-shadow:none!important;
  opacity:1!important;
  background:rgba(255,255,255,.50)!important;
  border:1px solid rgba(11,95,215,.08)!important;
}
.sidebar nav a span,
.sidebar nav a span *{color:inherit!important;text-shadow:none!important;opacity:1!important;}
.sidebar nav a:hover{
  color:#06163b!important;background:rgba(255,255,255,.88)!important;border-color:rgba(11,95,215,.20)!important;
}
.sidebar nav a.active,
.sidebar nav a.active:link,
.sidebar nav a.active:visited,
.sidebar nav a.active:focus,
.sidebar nav a.active:focus-visible,
.sidebar nav a.active:active,
.sidebar nav a.active:hover{
  color:#06163b!important;
  background:linear-gradient(135deg,#ffffff 0%,#eef7ff 48%,#fff4cf 100%)!important;
  border-color:rgba(255,181,27,.48)!important;
  box-shadow:0 18px 35px rgba(30,88,170,.12), inset 5px 0 0 #ffb51b!important;
}
.sidebar nav a.active span,.sidebar nav a.active span *{color:#06163b!important;}
.count-badge{color:#0a3678!important;background:rgba(255,255,255,.92)!important;border-color:rgba(11,95,215,.12)!important;text-shadow:none!important;}
.count-badge.hot{color:#06163b!important;background:linear-gradient(135deg,#ffe58a,#ffb51b)!important;border-color:rgba(255,181,27,.55)!important;}
.acct-dot{box-shadow:0 0 0 4px rgba(255,255,255,.85)!important;}
.storage-card,.storage-card b,.storage-card small{color:#123d70!important;text-shadow:none!important;}
.storage-card b{color:#06163b!important;}
.logout,.settings-bottom{color:#0b4e9e!important;background:rgba(255,255,255,.74)!important;text-shadow:none!important;}

/* Limpieza del borde vertical para que no se vea como línea rota */
.sidebar{border-right:1px solid rgba(11,95,215,.14)!important;}
.sidebar + .main{box-shadow:-1px 0 0 rgba(255,181,27,.22)!important;}

/* Mejor lectura en scroll inferior del sidebar */
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,181,27,.55),rgba(11,95,215,.28))!important;}

/* =========================================================
   AWMS MAIL - SOFT SIDEBAR + GLOBAL TOP BAR FINAL
   Solo visual: panel izquierdo suave + barra superior usuario/notificaciones/theme.
   ========================================================= */
body{
  background:
    radial-gradient(circle at 5% 0%,rgba(255,194,58,.22),transparent 28%),
    radial-gradient(circle at 0% 72%,rgba(44,140,255,.18),transparent 33%),
    linear-gradient(135deg,#fbfdff 0%,#eef7ff 54%,#fff8ea 100%)!important;
}
.shell{
  display:grid!important;
  grid-template-columns:318px minmax(410px,500px) minmax(560px,1fr)!important;
  grid-template-rows:76px calc(100vh - 76px)!important;
  min-height:100vh!important;
  height:100vh!important;
  overflow:hidden!important;
}
.sidebar{
  grid-row:1 / 3!important;
  grid-column:1!important;
  background:
    radial-gradient(circle at 12% 5%,rgba(255,255,255,.98),rgba(255,255,255,.45) 22%,transparent 42%),
    radial-gradient(circle at 85% 28%,rgba(255,191,40,.30),transparent 34%),
    radial-gradient(circle at 20% 86%,rgba(54,148,255,.22),transparent 36%),
    linear-gradient(180deg,#ffffff 0%,#edf7ff 39%,#d7edff 100%)!important;
  box-shadow:22px 0 70px rgba(42,105,175,.13)!important;
  border-right:1px solid rgba(25,106,215,.12)!important;
}
.sidebar::before{
  opacity:.28!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.88),transparent 28%),
    radial-gradient(circle at 100% 0%,rgba(255,183,31,.38),transparent 36%),
    radial-gradient(circle at 100% 70%,rgba(18,110,230,.25),transparent 38%)!important;
}
.sidebar::after{
  content:''!important;position:absolute!important;right:0!important;top:28px!important;bottom:28px!important;width:3px!important;border-radius:99px!important;
  background:linear-gradient(180deg,rgba(255,183,31,.95),rgba(62,151,255,.55),rgba(255,255,255,0))!important;
  box-shadow:0 0 18px rgba(255,183,31,.25)!important;pointer-events:none!important;
}
.brand{
  min-height:134px!important;border-radius:30px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,252,255,.90))!important;
  border:1px solid rgba(21,105,220,.14)!important;
  box-shadow:0 26px 54px rgba(32,93,165,.13), inset 0 1px 0 rgba(255,255,255,1)!important;
}
.brand-logo{max-height:64px!important;object-fit:contain!important;}
.brand .account-email{color:#0c3a73!important;font-size:12px!important;letter-spacing:.01em!important;}
.compose{
  background:linear-gradient(135deg,#ffe078 0%,#ffc02f 29%,#74b8ff 72%,#2275dc 100%)!important;
  color:#071a3c!important;border-radius:22px!important;font-weight:1000!important;
  box-shadow:0 18px 38px rgba(255,184,38,.23),0 18px 36px rgba(33,116,220,.13)!important;
}
.quick-actions{gap:10px!important}.quick-actions .sidebar-install-btn{border-radius:16px!important;color:#0a3776!important;background:rgba(255,255,255,.72)!important;}
.nav-title{color:#0f66d1!important;letter-spacing:.35em!important;font-size:12px!important;}
.sidebar nav,.storage-card{
  background:rgba(255,255,255,.54)!important;
  border:1px solid rgba(18,98,210,.12)!important;
  box-shadow:0 18px 42px rgba(31,95,170,.08), inset 0 1px 0 rgba(255,255,255,.75)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
}
.sidebar nav a{min-height:50px!important;border-radius:16px!important;color:#0b2b58!important;background:rgba(255,255,255,.36)!important;}
.sidebar nav a span{font-weight:850!important;}
.sidebar nav a.active{
  color:#08214a!important;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(235,247,255,.76) 52%,rgba(255,244,205,.82))!important;
  border-color:rgba(255,184,38,.46)!important;
  box-shadow:0 14px 28px rgba(33,116,220,.10),inset 5px 0 0 #ffc02f!important;
}
.count-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 16px rgba(31,95,170,.08)!important;}

.global-appbar{
  grid-column:2 / 4!important;grid-row:1!important;z-index:20!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:0 26px!important;
  background:rgba(255,255,255,.76)!important;
  border-bottom:1px solid rgba(20,91,190,.11)!important;
  box-shadow:0 12px 36px rgba(31,95,170,.06)!important;
  backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;
}
.appbar-left,.appbar-right{display:flex!important;align-items:center!important;gap:14px!important;}
.appbar-menu{width:42px!important;height:42px!important;border-radius:14px!important;border:0!important;background:rgba(235,246,255,.8)!important;color:#0a3678!important;font-weight:900!important;}
.appbar-title strong{display:block;color:#071a3c!important;font-size:16px!important;line-height:1.05!important;}
.appbar-title span{display:block;color:#48709a!important;font-size:12px!important;margin-top:3px!important;}
.appbar-icon{position:relative!important;width:42px!important;height:42px!important;border-radius:15px!important;border:1px solid rgba(18,98,210,.10)!important;background:rgba(255,255,255,.72)!important;color:#082f68!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;box-shadow:0 10px 24px rgba(31,95,170,.07)!important;}
.notify-mini em{position:absolute!important;right:-2px!important;top:-4px!important;min-width:18px!important;height:18px!important;border-radius:99px!important;background:#ffb51b!important;color:#06163b!important;font-style:normal!important;font-size:10px!important;font-weight:1000!important;display:flex!important;align-items:center!important;justify-content:center!important;border:2px solid #fff!important;}
.user-pill{height:46px!important;border-radius:18px!important;padding:4px 12px 4px 5px!important;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(236,247,255,.74))!important;border:1px solid rgba(18,98,210,.12)!important;display:flex!important;align-items:center!important;gap:10px!important;box-shadow:0 12px 28px rgba(31,95,170,.08)!important;}
.user-pill b{width:36px!important;height:36px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#0b5fd7,#68b4ff)!important;color:#fff!important;font-size:13px!important;}
.user-pill span{color:#071a3c!important;font-weight:900!important;white-space:nowrap!important;}.user-pill i{color:#6886a8!important;font-style:normal!important;}
.main{grid-column:2!important;grid-row:2!important;min-height:0!important;overflow:auto!important;background:rgba(255,255,255,.62)!important;}
.preview{grid-column:3!important;grid-row:2!important;min-height:0!important;overflow:auto!important;}
.main .top{padding-top:28px!important;background:transparent!important;}
.main .top .menu{display:none!important;}

body.awms-dark{
  background:linear-gradient(135deg,#07152d,#0a2450 55%,#151b32)!important;color:#eaf4ff!important;
}
body.awms-dark .global-appbar{background:rgba(6,21,45,.84)!important;border-bottom-color:rgba(120,180,255,.15)!important;}
body.awms-dark .appbar-title strong,body.awms-dark .user-pill span{color:#f4f9ff!important;}body.awms-dark .appbar-title span{color:#a7c5e8!important;}
body.awms-dark .sidebar{background:linear-gradient(180deg,#102a58,#123d70 52%,#0b1f47)!important;color:#eef7ff!important;}
body.awms-dark .sidebar nav,body.awms-dark .storage-card,body.awms-dark .brand{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.13)!important;}
body.awms-dark .sidebar nav a,body.awms-dark .storage-card,body.awms-dark .storage-card b,body.awms-dark .storage-card small,body.awms-dark .brand .account-email{color:#eef7ff!important;}
body.awms-dark .main{background:rgba(8,22,44,.58)!important;}body.awms-dark .preview{background:linear-gradient(135deg,#07152d,#102a58)!important;}

@media(max-width:980px){
  .shell{display:block!important;height:auto!important;overflow:auto!important}.global-appbar{position:sticky!important;top:0!important;height:68px!important;padding:0 14px!important}.appbar-title span{display:none!important}.user-pill span{display:none!important}.main .top .menu{display:inline-flex!important}.main,.preview{display:block!important}.sidebar{position:fixed!important;z-index:60!important;height:100vh!important;}
}

/* =========================================================
   AWMS MAIL - DARK READABILITY + ALERT BUTTON FIT FIX v20260522
   Solo visual/UX: no cambia lógica IMAP, contadores ni configuración.
   ========================================================= */
.quick-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  align-items:center!important;
}
.quick-actions .sidebar-install-btn{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:13px!important;
  line-height:1!important;
}
.quick-actions .sidebar-install-btn .qa-label,
.quick-actions .sidebar-install-btn span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.notify-btn.ready::after{content:''!important;display:none!important;}

body.awms-dark .top h1,
body.awms-dark .main h1,
body.awms-dark .folder-subtitle,
body.awms-dark .title-row h1{
  color:#f5fbff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18)!important;
}
body.awms-dark .folder-subtitle,
body.awms-dark .top p,
body.awms-dark .mail-account-label{
  color:#b9d7f7!important;
}
body.awms-dark .top,
body.awms-dark .main .top{
  background:linear-gradient(180deg,rgba(8,24,50,.92),rgba(10,31,62,.72))!important;
  border-bottom:1px solid rgba(136,190,255,.16)!important;
}
body.awms-dark .search input,
body.awms-dark .compose-form input,
body.awms-dark .compose-form textarea{
  background:#f8fbff!important;
  color:#081b3c!important;
  border-color:rgba(142,194,255,.30)!important;
}
body.awms-dark .search input::placeholder{
  color:#667085!important;
}
body.awms-dark .list{
  background:linear-gradient(180deg,rgba(10,29,58,.68),rgba(13,36,70,.74))!important;
}
body.awms-dark .mail{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(160,198,255,.18)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
}
body.awms-dark .mail.unread{
  background:linear-gradient(90deg,rgba(255,193,50,.22),rgba(255,255,255,.93) 42%)!important;
}
body.awms-dark .mail .meta b{
  color:#06163b!important;
}
body.awms-dark .mail .meta span,
body.awms-dark .mail .date,
body.awms-dark .mail .date small,
body.awms-dark .mail-account-label{
  color:#355479!important;
}
body.awms-dark .preview::before{opacity:.18!important;}
body.awms-dark .welcome-card-pro,
body.awms-dark .welcome-card,
body.awms-dark .mail-reader-panel,
body.awms-dark .compose-panel{
  background:rgba(245,249,255,.92)!important;
  border-color:rgba(145,197,255,.22)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.28)!important;
}
body.awms-dark .welcome-card-pro h2,
body.awms-dark .welcome-card h2,
body.awms-dark .mail-reader-panel h2,
body.awms-dark .compose-panel h2{
  color:#06163b!important;
}
body.awms-dark .welcome-card-pro p,
body.awms-dark .welcome-card p,
body.awms-dark .reader-from,
body.awms-dark .message-body,
body.awms-dark .compose-form label{
  color:#244d7d!important;
}
body.awms-dark .sidebar nav a:not(.active){
  color:#eaf4ff!important;
  background:rgba(255,255,255,.13)!important;
}
body.awms-dark .sidebar nav a:not(.active) span,
body.awms-dark .sidebar nav a:not(.active) span *{
  color:#eaf4ff!important;
}
body.awms-dark .sidebar nav a.active,
body.awms-dark .sidebar nav a.active span,
body.awms-dark .sidebar nav a.active span *{
  color:#071a3c!important;
}
body.awms-dark .quick-actions .sidebar-install-btn{
  color:#06163b!important;
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(255,255,255,.24)!important;
}
body.awms-dark .compose{
  color:#06163b!important;
}
body.awms-dark .nav-title{
  color:#8ec5ff!important;
}

/* =========================================================
   AWMS MAIL - MOBILE MENU + SEARCH BAR POLISH FIX v20260522b
   Solo visual/UX: no toca lógica, IMAP, cuentas ni contadores.
   ========================================================= */
.search{
  background:rgba(255,255,255,.70)!important;
  border:1px solid rgba(21,105,220,.13)!important;
  border-radius:24px!important;
  padding:8px!important;
  box-shadow:0 18px 42px rgba(31,95,170,.08), inset 0 1px 0 rgba(255,255,255,.86)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.search input{
  border:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,252,255,.88))!important;
  color:#08214a!important;
  box-shadow:inset 0 0 0 1px rgba(16,86,185,.10)!important;
  border-radius:18px!important;
}
.search input::placeholder{color:#8090a8!important;}
.search button{
  min-width:112px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#ffe37d 0%,#ffc233 42%,#ffac19 100%)!important;
  color:#071a3c!important;
  box-shadow:0 12px 28px rgba(255,178,26,.20)!important;
}
.refresh-btn{
  min-height:48px!important;
  padding:0 22px!important;
  border-radius:22px!important;
  white-space:nowrap!important;
  background:linear-gradient(135deg,#ff9b20 0%,#ff6b12 55%,#1f61d4 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 38px rgba(255,107,18,.20),0 14px 30px rgba(31,97,212,.16)!important;
}
.title-row{align-items:center!important;}
.top h1{color:#071a3c!important;}
.folder-subtitle{color:#0c3a73!important;}
body.awms-dark .search{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(143,193,255,.22)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
body.awms-dark .search input{
  background:rgba(248,251,255,.96)!important;
  color:#071a3c!important;
}
body.awms-dark .search button{color:#071a3c!important;}
body.awms-dark .top h1,
body.awms-dark .top .folder-subtitle,
body.awms-dark .title-row h1{
  color:#f7fbff!important;
}
body.awms-dark .folder-subtitle{color:#b7d6ff!important;}
body.awms-dark .global-appbar,
body.awms-dark .appbar-title strong{color:#f8fbff!important;}
body.awms-dark .appbar-icon,
body.awms-dark .user-pill{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#f8fbff!important;
}
body.awms-dark .user-pill i{color:#d9eaff!important;}

@media(max-width:980px){
  /* Quita el menú azul duplicado del appbar móvil y deja solo el amarillo del contenido */
  .global-appbar .appbar-menu{display:none!important;}
  .main .top .menu{
    display:inline-flex!important;
    position:relative!important;
    width:58px!important;
    height:58px!important;
    margin:0 0 12px 0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:20px!important;
    border:1px solid rgba(255,178,26,.34)!important;
    background:linear-gradient(145deg,rgba(255,252,235,.96),rgba(255,231,140,.68))!important;
    color:#0a3678!important;
    box-shadow:0 16px 36px rgba(255,178,26,.18),0 12px 28px rgba(31,95,170,.10)!important;
    font-size:27px!important;
    line-height:1!important;
  }
  .top{
    padding:18px 22px 20px!important;
  }
  .title-row{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:14px!important;
    align-items:center!important;
  }
  .mobile-logo{
    display:block!important;
    max-width:min(420px,82vw)!important;
    margin:0 auto 12px!important;
    filter:drop-shadow(0 12px 28px rgba(15,39,90,.12))!important;
  }
  .top h1{
    font-size:40px!important;
    line-height:1!important;
    margin-top:4px!important;
  }
  .folder-subtitle{display:none!important;}
  .refresh-btn{
    min-height:56px!important;
    padding:0 22px!important;
    border-radius:24px!important;
    font-size:18px!important;
  }
  .search{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:18px!important;
    padding:12px!important;
    border-radius:26px!important;
    background:rgba(255,255,255,.76)!important;
  }
  .search input{
    min-height:56px!important;
    padding:0 18px!important;
    font-size:18px!important;
    border-radius:22px!important;
  }
  .search button{
    min-height:58px!important;
    width:100%!important;
    min-width:0!important;
    border-radius:22px!important;
    font-size:18px!important;
  }
  body.awms-dark .main .top .menu{
    background:linear-gradient(145deg,#ffeaa0,#ffc73a)!important;
    color:#071a3c!important;
  }
}
@media(max-width:430px){
  .top{padding:16px 18px 18px!important;}
  .main .top .menu{width:54px!important;height:54px!important;border-radius:18px!important;font-size:25px!important;}
  .top h1{font-size:34px!important;}
  .refresh-btn{min-height:52px!important;padding:0 17px!important;font-size:16px!important;border-radius:22px!important;}
  .search input{font-size:16px!important;min-height:54px!important;}
  .search button{font-size:17px!important;min-height:56px!important;}
}

/* Unread/read distinction PRO v20260522 */
.mail{
  position:relative;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
.mail:not(.unread){
  background:rgba(255,255,255,.68)!important;
  border-color:rgba(112,151,205,.18)!important;
  box-shadow:0 10px 26px rgba(10,45,95,.055)!important;
  opacity:.78;
}
.mail:not(.unread) .avatar{
  filter:saturate(.72)!important;
  opacity:.78!important;
}
.mail:not(.unread) .meta b{
  font-weight:760!important;
  color:#263a63!important;
}
.mail:not(.unread) .meta span,
.mail:not(.unread) .mail-account-label,
.mail:not(.unread) .date{
  color:#697b9c!important;
  font-weight:650!important;
}
.mail.unread{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(232,243,255,.94) 58%,rgba(255,247,219,.86))!important;
  border-color:rgba(0,94,210,.26)!important;
  box-shadow:0 18px 42px rgba(0,92,210,.13),0 8px 22px rgba(255,178,26,.12)!important;
  opacity:1;
}
.mail.unread::before{
  content:'';
  position:absolute;
  left:-2px;
  top:17px;
  bottom:17px;
  width:6px;
  border-radius:999px;
  background:linear-gradient(180deg,#005bd8,#2e8cff 48%,#ffc42d);
  box-shadow:0 0 0 4px rgba(46,140,255,.08),0 0 18px rgba(0,91,216,.22);
}
.mail.unread::after{
  content:'Nuevo';
  position:absolute;
  right:82px;
  top:13px;
  padding:4px 9px;
  border-radius:999px;
  background:linear-gradient(135deg,#ffc42d,#ff9d18);
  color:#08245a;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(255,178,26,.22);
}
.mail.unread .meta b{
  color:#061b46!important;
  font-weight:950!important;
}
.mail.unread .meta span{
  color:#102c64!important;
  font-weight:820!important;
}
.mail.unread .mail-account-label,
.mail.unread .date{
  color:#144c9a!important;
  font-weight:850!important;
}
.mail.unread .avatar{
  box-shadow:0 14px 30px rgba(0,91,216,.18),0 0 0 4px rgba(255,196,45,.16)!important;
}
body.awms-dark .mail:not(.unread){
  background:rgba(222,231,244,.78)!important;
  opacity:.76;
}
body.awms-dark .mail:not(.unread) .meta b{color:#1b2e50!important;}
body.awms-dark .mail:not(.unread) .meta span,
body.awms-dark .mail:not(.unread) .mail-account-label,
body.awms-dark .mail:not(.unread) .date{color:#50627e!important;}
body.awms-dark .mail.unread{
  background:linear-gradient(135deg,#ffffff,#e8f3ff 58%,#fff1c7)!important;
  border-color:rgba(255,196,45,.52)!important;
  box-shadow:0 18px 44px rgba(255,196,45,.12),0 10px 28px rgba(42,125,255,.18)!important;
}
@media(max-width:980px){
  .mail.unread::after{right:72px;top:10px;font-size:10px;padding:4px 8px;}
  .mail.unread::before{left:-1px;top:18px;bottom:18px;width:5px;}
}
@media(max-width:520px){
  .mail.unread::after{right:112px;top:10px;}
  .mail:not(.unread){opacity:.72;}
}

/* === PRO PACK REAL v20260522: Topbar completa + indicador nuevo premium + mobile app === */
:root{
  --pro-blue:#0a5bd8;
  --pro-blue-soft:#67a8ff;
  --pro-gold:#ffc42d;
  --pro-gold-2:#ff9d18;
  --pro-navy:#061b46;
}
.global-appbar{
  min-height:72px!important;
  padding:0 22px!important;
  gap:18px!important;
  border-bottom:1px solid rgba(10,91,216,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,251,255,.72))!important;
}
.appbar-left{gap:14px!important;min-width:245px!important;}
.appbar-title strong{font-size:18px!important;letter-spacing:-.02em!important;color:var(--pro-navy)!important;}
.appbar-title span{font-size:13px!important;color:#2b5f9f!important;font-weight:700!important;}
.imap-status{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;
  background:linear-gradient(135deg,rgba(230,246,255,.92),rgba(255,247,220,.75));
  border:1px solid rgba(10,91,216,.13);box-shadow:0 10px 24px rgba(10,91,216,.07);
  color:#11548f;font-weight:900;font-size:12px;white-space:nowrap;
}
.imap-status i{width:9px;height:9px;border-radius:999px;background:#25c765;box-shadow:0 0 0 5px rgba(37,199,101,.14),0 0 18px rgba(37,199,101,.45);}
.appbar-search{
  flex:1;max-width:520px;height:44px;border-radius:18px;display:flex;align-items:center;gap:8px;padding:0 16px;
  background:rgba(255,255,255,.78);border:1px solid rgba(10,91,216,.15);box-shadow:0 14px 36px rgba(11,45,95,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.appbar-search span{font-size:18px;color:#0a5bd8;font-weight:950}.appbar-search input{border:0;outline:0;background:transparent;width:100%;height:100%;font-size:14px;font-weight:750;color:#061b46}.appbar-search input::placeholder{color:#6c82a5}.logout-pill{
  display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 14px;border-radius:17px;text-decoration:none;
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(255,243,205,.86));border:1px solid rgba(255,178,26,.34);
  color:#08245a;font-weight:950;box-shadow:0 12px 28px rgba(255,178,26,.10);white-space:nowrap;
}
.logout-pill span{color:#ff7a00}.logout-pill em{font-style:normal;font-size:13px}.notify-mini em{animation:notifyPulse 1.8s ease-in-out infinite;}@keyframes notifyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* Indicador premium para no leídos */
.mail.unread .meta b::before{content:'';display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:999px;background:linear-gradient(135deg,var(--pro-blue),var(--pro-gold));box-shadow:0 0 0 5px rgba(10,91,216,.10),0 0 18px rgba(255,196,45,.38);vertical-align:middle;animation:newDot 1.55s ease-in-out infinite;}
@keyframes newDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.68;transform:scale(.78)}}
.mail.unread::after{content:'NEW'!important;right:78px!important;top:12px!important;background:linear-gradient(135deg,#0a5bd8,#2e8cff 45%,#ffc42d)!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.18)!important;letter-spacing:.08em!important;box-shadow:0 8px 22px rgba(10,91,216,.20),0 0 0 4px rgba(255,196,45,.13)!important;}
.mail:not(.unread)::before{opacity:.25!important}.mail:not(.unread) .meta b::before{display:none!important;}
body.awms-dark .global-appbar{background:linear-gradient(180deg,rgba(5,17,43,.94),rgba(7,24,58,.84))!important;border-bottom-color:rgba(143,193,255,.16)!important;}
body.awms-dark .appbar-title strong{color:#f8fbff!important}body.awms-dark .appbar-title span{color:#b9d7ff!important}body.awms-dark .imap-status{background:rgba(255,255,255,.10);border-color:rgba(143,193,255,.18);color:#dbeafe}body.awms-dark .appbar-search{background:rgba(255,255,255,.10);border-color:rgba(143,193,255,.20)}body.awms-dark .appbar-search input{color:#f8fbff}body.awms-dark .appbar-search input::placeholder{color:#b9c9e3}body.awms-dark .logout-pill{background:rgba(255,255,255,.12);border-color:rgba(255,196,45,.24);color:#f8fbff}
/* Mobile app real: header sticky, list touch, topbar compact */
@media(max-width:980px){
  .global-appbar{position:sticky!important;top:0!important;z-index:45!important;min-height:78px!important;padding:10px 16px!important;display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;}
  .appbar-left{min-width:0!important;gap:10px!important}.imap-status{display:none!important}.appbar-title span{display:none!important}.appbar-title strong{font-size:18px!important}.appbar-search{grid-column:1/-1;order:3;max-width:none!important;width:100%;height:46px;border-radius:18px;background:rgba(255,255,255,.88)!important}.appbar-right{gap:8px!important}.logout-pill em{display:none!important}.logout-pill{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}.user-pill span{max-width:98px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.appbar-icon,.user-pill{min-height:44px!important}
  .shell{min-height:100dvh!important}.main{min-width:0!important}.top{position:sticky!important;top:144px!important;z-index:32!important;border-bottom:1px solid rgba(10,91,216,.08)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}.list{padding-bottom:34px!important}.mail{min-height:92px!important;border-radius:24px!important;box-shadow:0 13px 36px rgba(10,45,95,.08)!important}.mail:active{transform:scale(.985)!important}.mail a{gap:12px!important}.mail .meta b{font-size:17px!important}.mail .meta span{font-size:15px!important}.mail-account-label{font-size:12px!important}.mail.unread::after{right:106px!important;top:11px!important}.preview{transition:transform .24s ease,opacity .24s ease!important}.shell.has-reader .preview{animation:readerSlide .24s ease both}@keyframes readerSlide{from{transform:translateX(20px);opacity:.6}to{transform:translateX(0);opacity:1}}
}
@media(max-width:520px){
  .global-appbar{min-height:72px!important;padding:8px 14px!important}.appbar-search{display:none!important}.top{top:72px!important}.appbar-title strong{font-size:17px!important}.user-pill{padding:0 8px!important}.user-pill span{display:none!important}.logout-pill{display:none!important}.mail.unread::after{right:110px!important;top:9px!important;font-size:9px!important;padding:4px 7px!important}.mail.unread .meta b::before{width:8px;height:8px;margin-right:5px}.top .search{box-shadow:0 18px 42px rgba(10,45,95,.07),inset 0 1px 0 rgba(255,255,255,.92)!important}.top .search input{background:rgba(255,255,255,.96)!important}.top .search button{background:linear-gradient(135deg,#ffe37d,#ffc233,#ffad1a)!important;color:#061b46!important;box-shadow:0 10px 28px rgba(255,178,26,.18)!important}
}

/* =========================================================
   AWMS MAIL - MOBILE STACK FIX v20260522-1048
   Corrige móvil: evita overlay del buscador sobre correos, elimina espacio gigante,
   mantiene solo menú amarillo y ordena logo/título/actualizar sin tocar lógica.
   ========================================================= */
@media (max-width: 980px){
  html, body{height:auto!important; min-height:100dvh!important; overflow-x:hidden!important; overflow-y:auto!important;}
  .shell{display:block!important; height:auto!important; min-height:100dvh!important; overflow:visible!important;}
  .global-appbar{position:sticky!important; top:0!important; z-index:80!important; min-height:72px!important; height:auto!important; padding:10px 14px!important; background:rgba(255,255,255,.88)!important; border-bottom:1px solid rgba(10,91,216,.10)!important;}
  .global-appbar .appbar-menu{display:none!important;}
  .appbar-title strong{font-size:18px!important;}
  .appbar-title span,.imap-status,.appbar-search,.logout-pill{display:none!important;}
  .appbar-right{gap:8px!important;}
  .appbar-icon,.user-pill{width:auto!important; min-width:48px!important; height:48px!important; min-height:48px!important; border-radius:18px!important;}
  .user-pill{padding:4px 10px 4px 5px!important;}
  .user-pill span{display:none!important;}

  .main{display:block!important; height:auto!important; min-height:calc(100dvh - 72px)!important; overflow:visible!important; background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(239,247,255,.72))!important;}
  .main .top{position:relative!important; top:auto!important; left:auto!important; right:auto!important; z-index:5!important; padding:22px 18px 18px!important; margin:0!important; background:rgba(255,255,255,.60)!important; border-bottom:1px solid rgba(10,91,216,.10)!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;}
  .main .top .menu{display:inline-flex!important; position:absolute!important; left:18px!important; top:82px!important; width:58px!important; height:58px!important; margin:0!important; align-items:center!important; justify-content:center!important; border-radius:20px!important; background:linear-gradient(145deg,#fff7cf,#ffe58b)!important; color:#06245a!important; border:1px solid rgba(255,178,26,.36)!important; box-shadow:0 16px 36px rgba(255,178,26,.18)!important;}
  .top-wrap{max-width:720px!important; margin:0 auto!important;}
  .mobile-logo{display:block!important; max-width:min(360px,66vw)!important; width:auto!important; margin:20px auto 12px!important; height:auto!important;}
  .title-row{display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; gap:12px!important; padding-left:72px!important;}
  .top h1{font-size:38px!important; line-height:1!important; margin:0!important; text-align:left!important; color:#071a3c!important;}
  .top-actions{display:flex!important; align-items:center!important; justify-content:flex-end!important; margin:0!important;}
  .refresh-btn{width:auto!important; min-width:150px!important; min-height:56px!important; padding:0 22px!important; border-radius:24px!important; font-size:18px!important; white-space:nowrap!important;}
  .folder-subtitle{display:none!important;}
  .top .search{position:relative!important; display:grid!important; grid-template-columns:1fr!important; gap:12px!important; width:100%!important; max-width:720px!important; margin:18px auto 0!important; padding:14px!important; border-radius:28px!important; background:rgba(255,255,255,.72)!important; border:1px solid rgba(10,91,216,.13)!important; box-shadow:0 16px 42px rgba(10,45,95,.075), inset 0 1px 0 rgba(255,255,255,.86)!important; backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important;}
  .top .search input{width:100%!important; min-height:58px!important; border-radius:24px!important; background:rgba(255,255,255,.90)!important; border:1px solid rgba(10,91,216,.12)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important; text-align:center!important; font-size:18px!important; color:#071a3c!important;}
  .top .search button{width:100%!important; min-height:58px!important; border-radius:24px!important; font-size:18px!important; background:linear-gradient(135deg,#ffe78c,#ffc42d,#ffad1a)!important; color:#071a3c!important; box-shadow:0 13px 30px rgba(255,178,26,.18)!important;}
  .list{position:relative!important; z-index:1!important; padding:18px 18px 38px!important; margin:0!important; overflow:visible!important;}
  .mail{position:relative!important; z-index:1!important; margin:0 0 16px!important; min-height:88px!important; border-radius:26px!important;}
  .mail:first-child{margin-top:0!important;}
  .preview{display:none!important;}
  body.awms-dark .global-appbar{background:rgba(6,21,45,.94)!important; border-bottom-color:rgba(143,193,255,.16)!important;}
  body.awms-dark .main{background:linear-gradient(145deg,#07152d,#0d2a58)!important;}
  body.awms-dark .main .top{background:rgba(8,22,44,.64)!important; border-bottom-color:rgba(143,193,255,.12)!important;}
  body.awms-dark .top h1{color:#f8fbff!important;}
  body.awms-dark .top .search{background:rgba(255,255,255,.08)!important; border-color:rgba(143,193,255,.18)!important;}
  body.awms-dark .top .search input{background:rgba(255,255,255,.94)!important; color:#071a3c!important;}
}
@media (max-width: 430px){
  .main .top{padding:20px 16px 16px!important;}
  .main .top .menu{left:16px!important; top:78px!important; width:54px!important; height:54px!important;}
  .mobile-logo{max-width:min(330px,64vw)!important; margin-top:18px!important;}
  .title-row{padding-left:66px!important; gap:10px!important;}
  .top h1{font-size:35px!important;}
  .refresh-btn{min-width:132px!important; min-height:54px!important; padding:0 17px!important; font-size:16px!important;}
  .top .search{margin-top:16px!important; padding:12px!important;}
  .top .search input{font-size:17px!important; min-height:56px!important;}
  .top .search button{font-size:18px!important; min-height:56px!important;}
}
@media (max-width: 360px){
  .title-row{grid-template-columns:1fr!important; padding-left:66px!important;}
  .top-actions{justify-content:flex-start!important;}
  .refresh-btn{width:100%!important;}
}

/* =========================================================
   AWMS MAIL - FINAL MOBILE ALIGN + REFRESH SIZE FIX v20260522-1120
   Objetivo: reducir botón Actualizar y evitar que topbar/panel izquierdo se monten.
   Solo CSS visual/responsive. No toca IMAP, contadores, login, PWA ni configuración.
   ========================================================= */
:root{--awms-sidebar-w:318px;--awms-topbar-h:76px;}
@media (min-width:981px){
  .shell{
    display:grid!important;
    grid-template-columns:var(--awms-sidebar-w) minmax(410px,500px) minmax(560px,1fr)!important;
    grid-template-rows:var(--awms-topbar-h) calc(100vh - var(--awms-topbar-h))!important;
  }
  .sidebar{grid-column:1!important;grid-row:1 / 3!important;z-index:30!important;position:relative!important;}
  .global-appbar{
    grid-column:2 / -1!important;
    grid-row:1!important;
    position:relative!important;
    z-index:25!important;
    width:auto!important;
    margin:0!important;
    border-left:1px solid rgba(10,91,216,.08)!important;
  }
  .main{grid-column:2!important;grid-row:2!important;}
  .preview{grid-column:3!important;grid-row:2!important;}
}

/* Botón Actualizar más fino y alineado en desktop/tablet */
.refresh-btn,
.top-actions .refresh-btn{
  min-height:48px!important;
  height:48px!important;
  min-width:136px!important;
  padding:0 18px!important;
  border-radius:20px!important;
  font-size:15px!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  white-space:nowrap!important;
}
.title-row{align-items:center!important;}
.top-actions{align-items:center!important;}

@media (max-width:980px){
  .global-appbar{
    position:sticky!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    z-index:90!important;
    margin:0!important;
    min-height:70px!important;
    padding:10px 14px!important;
    box-sizing:border-box!important;
  }
  .sidebar{
    z-index:85!important;
    top:0!important;
    left:0!important;
    transform:translateX(-105%);
  }
  body.sidebar-open .sidebar,
  .shell.sidebar-open .sidebar,
  .sidebar.open{transform:translateX(0)!important;}
  .main{position:relative!important;z-index:1!important;margin:0!important;padding:0!important;}
  .main .top{z-index:4!important;margin-top:0!important;}
  .title-row{
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    align-items:center!important;
  }
  .top-actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;}
  .refresh-btn,
  .top-actions .refresh-btn{
    min-width:118px!important;
    width:auto!important;
    min-height:46px!important;
    height:46px!important;
    padding:0 14px!important;
    border-radius:18px!important;
    font-size:14px!important;
    font-weight:950!important;
    box-shadow:0 10px 24px rgba(255,122,0,.20)!important;
  }
  .top .search{clear:both!important;}
}

@media (max-width:430px){
  .global-appbar{min-height:68px!important;padding:9px 12px!important;}
  .main .top .menu{top:76px!important;}
  .title-row{padding-left:64px!important;gap:8px!important;}
  .top h1{font-size:34px!important;}
  .refresh-btn,
  .top-actions .refresh-btn{
    min-width:108px!important;
    min-height:44px!important;
    height:44px!important;
    padding:0 12px!important;
    border-radius:17px!important;
    font-size:13.5px!important;
  }
}

@media (max-width:360px){
  .title-row{grid-template-columns:1fr auto!important;padding-left:62px!important;}
  .top-actions{justify-content:flex-end!important;}
  .refresh-btn,.top-actions .refresh-btn{width:auto!important;min-width:100px!important;font-size:13px!important;}
}


/* =========================================================
   AWMS MAIL - MOBILE SIDEBAR BELOW TOPBAR FIX v20260522-1112
   Corrige el montaje del topbar sobre el menú izquierdo en móvil.
   Solo CSS visual/responsive. No toca lógica, IMAP, PWA ni contadores.
   ========================================================= */
@media (max-width:980px){
  :root{--awms-mobile-appbar-h:70px;}
  .global-appbar{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    min-height:var(--awms-mobile-appbar-h)!important;
  }
  .sidebar{
    position:fixed!important;
    top:var(--awms-mobile-appbar-h)!important;
    left:0!important;
    bottom:0!important;
    height:calc(100dvh - var(--awms-mobile-appbar-h))!important;
    max-height:calc(100dvh - var(--awms-mobile-appbar-h))!important;
    z-index:110!important;
    transform:translateX(-105%)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-top:16px!important;
    border-top:1px solid rgba(10,91,216,.10)!important;
    box-shadow:22px 0 58px rgba(6,27,70,.20)!important;
  }
  .sidebar.open{
    transform:translateX(0)!important;
  }
  .menu-backdrop{
    position:fixed!important;
    top:var(--awms-mobile-appbar-h)!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:100!important;
    background:rgba(6,18,42,.42)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
  }
  .menu-backdrop.active{display:block!important;}
  .main .top .menu{
    z-index:6!important;
  }
}
@media (max-width:430px){
  :root{--awms-mobile-appbar-h:68px;}
  .sidebar{
    top:var(--awms-mobile-appbar-h)!important;
    height:calc(100dvh - var(--awms-mobile-appbar-h))!important;
    max-height:calc(100dvh - var(--awms-mobile-appbar-h))!important;
    padding-top:14px!important;
  }
}

/* =========================================================
   AWMS MAIL - FINAL MOBILE LOGO VISIBILITY FIX v20260522-1118
   Corrige únicamente el corte del logo en móvil/sidebar.
   No toca lógica IMAP, contadores, PWA, login ni JS.
   ========================================================= */
.sidebar,
.sidebar *{
  box-sizing:border-box!important;
}
.sidebar{
  overflow-x:hidden!important;
}
.sidebar .brand{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:18px 18px 20px!important;
  margin:0 0 20px!important;
  border-radius:28px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,252,255,.90))!important;
  border:1px solid rgba(190,214,246,.80)!important;
  box-shadow:0 18px 42px rgba(21,80,170,.10), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.sidebar .brand-logo{
  display:block!important;
  width:min(100%,250px)!important;
  max-width:250px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:2px auto 10px!important;
  padding:0!important;
  transform:none!important;
  clip-path:none!important;
  filter:drop-shadow(0 12px 24px rgba(10,91,216,.13))!important;
}
.sidebar .account-email{
  display:block!important;
  width:100%!important;
  height:auto!important;
  overflow:visible!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.25!important;
  margin:0!important;
  color:#0b376e!important;
  font-weight:900!important;
}
.top,
.top .top-wrap,
.title-row,
.title-row>div:first-child{
  overflow:visible!important;
}
.mobile-logo{
  object-fit:contain!important;
  object-position:center center!important;
  max-height:none!important;
  clip-path:none!important;
  transform:none!important;
}
@media(max-width:980px){
  .sidebar{
    padding:18px 18px 28px!important;
  }
  .sidebar .brand{
    padding:20px 18px 22px!important;
    margin-bottom:22px!important;
    min-height:148px!important;
  }
  .sidebar .brand-logo{
    width:min(100%,265px)!important;
    max-width:265px!important;
    margin:0 auto 12px!important;
  }
  .top{
    padding-top:20px!important;
  }
  .top .mobile-logo{
    display:block!important;
    width:min(300px,72vw)!important;
    max-width:300px!important;
    height:auto!important;
    margin:10px auto 12px!important;
    padding:0!important;
  }
}
@media(max-width:430px){
  .sidebar{
    padding:16px 18px 26px!important;
  }
  .sidebar .brand{
    min-height:142px!important;
    padding:18px 16px 20px!important;
    border-radius:26px!important;
  }
  .sidebar .brand-logo{
    width:min(100%,255px)!important;
    max-width:255px!important;
    margin:0 auto 10px!important;
  }
  .top .mobile-logo{
    width:min(285px,74vw)!important;
    max-width:285px!important;
    margin:8px auto 10px!important;
  }
}


/* ==========================================================
   AWMS MAIL PERFORMANCE PATCH - 2026-05-22
   Solo optimización de renderizado. No cambia lógica ni layout.
   Reduce lag de Brave/macOS causado por blur, sombras y repaints.
========================================================== */
html,body{scroll-behavior:auto!important;}
*,*::before,*::after{
  transition-duration:.12s!important;
  animation-duration:.001s!important;
  animation-iteration-count:1!important;
}
.shell,.main,.preview,.sidebar,.list,.preview-inner,.message-body{
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
}
.main,.preview,.top,.appbar,.sidebar,.menu-backdrop,.welcome-card,.mail-reader-panel,.sidebar nav,.storage-card,.brand,.search,.mail{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body::before,body::after,.shell::before,.shell::after,.main::before,.main::after,.preview::before,.preview::after,.sidebar::before,.sidebar::after{
  animation:none!important;
}
.mail,.welcome-card,.mail-reader-panel,.sidebar .brand,.sidebar nav,.storage-card,.search,.compose,.refresh-btn,.appbar-icon,.user-pill,.topbar,.preview-card{
  box-shadow:0 10px 24px rgba(34,75,132,.08)!important;
  filter:none!important;
}
.mail:hover,.compose:hover,.refresh-btn:hover,.sidebar nav a:hover{
  transform:none!important;
  filter:none!important;
}
.list,.sidebar,.message-body,.preview-inner{
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  contain:layout paint!important;
}
.mail,.sidebar nav a,.count-badge,.search input,.search button,.refresh-btn,.compose,.sidebar-install-btn{
  contain:layout paint!important;
}
.mail-hero-illustration,.brand-logo,.mobile-logo,.welcome-card img{
  filter:none!important;
}
@media(max-width:980px){
  .sidebar{contain:layout paint!important;will-change:transform!important;}
  .menu-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(9,22,48,.46)!important;}
  .top,.appbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  .mail,.welcome-card,.search,.sidebar .brand,.sidebar nav{box-shadow:0 8px 18px rgba(34,75,132,.07)!important;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* =========================================================
   AWMS MAIL - MOBILE SIDEBAR OUTSIDE TAP CLOSE FIX v20260522-1708
   El overlay queda realmente encima del contenido y recibe el toque.
   No cambia el diseño; solo corrige interacción mobile.
   ========================================================= */
@media(max-width:980px){
  .menu-backdrop.active{
    display:block!important;
    pointer-events:auto!important;
    cursor:pointer!important;
    z-index:9998!important;
  }
  .sidebar.open{
    z-index:9999!important;
    pointer-events:auto!important;
  }
  body.awms-menu-open .main,
  body.awms-menu-open .preview{
    pointer-events:none!important;
  }
  body.awms-menu-open .sidebar,
  body.awms-menu-open .menu-backdrop,
  body.awms-menu-open .global-appbar{
    pointer-events:auto!important;
  }
}


/* =========================================================
   AWMS MAIL - MOBILE MENU OVERLAY HITBOX FINAL v20260522-1805
   Garantiza que el overlay reciba el toque fuera del menú.
   ========================================================= */
@media(max-width:980px){
  .menu-backdrop{
    position:fixed!important;
    inset:0!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:100dvh!important;
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
    z-index:9997!important;
    background:rgba(7,17,38,.44)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    touch-action:none!important;
  }
  .menu-backdrop.active{
    display:block!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .sidebar.open{
    z-index:9999!important;
    pointer-events:auto!important;
  }
  body.awms-menu-open .global-appbar{z-index:9996!important;}
  body.awms-menu-open .main,
  body.awms-menu-open .preview{pointer-events:none!important;}
  body.awms-menu-open .menu-backdrop,
  body.awms-menu-open .sidebar{pointer-events:auto!important;}
}


/* =========================================================
   AWMS MAIL - MOBILE MENU LAYER FIX DEFINITIVE v3
   Solo corrige capas/click fuera del menú. No cambia diseño.
   ========================================================= */
@media(max-width:980px){
  .menu-backdrop{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:2147482000!important;
    background:rgba(7,17,38,.44)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    touch-action:none!important;
  }
  .menu-backdrop.active{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .sidebar{
    z-index:2147483000!important;
  }
  .sidebar.open{
    pointer-events:auto!important;
    transform:translateX(0)!important;
  }
  body.awms-menu-open .global-appbar{
    z-index:2147481000!important;
  }
  body.awms-menu-open .main,
  body.awms-menu-open .preview{
    pointer-events:auto!important;
  }
}


/* DEFINITIVE MOBILE DRAWER FIX - safe visual override only */
@media (max-width:980px){
  body.menu-open{overflow:hidden!important;touch-action:none!important;}
  .menu-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(6,18,48,.42)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:998!important;
    transition:opacity .18s ease,visibility .18s ease!important;
  }
  body.menu-open .menu-backdrop,.menu-backdrop.active{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;left:0!important;bottom:0!important;
    width:min(78vw,390px)!important;
    max-width:390px!important;
    height:100dvh!important;
    transform:translate3d(-104%,0,0)!important;
    transition:transform .22s cubic-bezier(.2,.8,.2,1)!important;
    z-index:999!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    will-change:transform!important;
  }
  .sidebar.open,body.menu-open .sidebar{
    transform:translate3d(0,0,0)!important;
    left:0!important;
  }
}


/* =========================================================
   AWMS MAIL - MOBILE DRAWER VISIBLE FIX v20260522-1725
   Corrige el overlay: ya NO pasa encima del menú lateral.
   El menú queda nítido; solo el contenido de la derecha queda oscurecido.
   ========================================================= */
@media (max-width:980px){
  html body .sidebar,
  html body .sidebar.open,
  html body.menu-open .sidebar,
  html body.awms-menu-open .sidebar,
  html body.sidebar-open .sidebar{
    z-index:2147483600!important;
    filter:none!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  html body .menu-backdrop,
  html body .menu-backdrop.active,
  html body.menu-open .menu-backdrop,
  html body.awms-menu-open .menu-backdrop,
  html body.sidebar-open .menu-backdrop{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:min(78vw,390px)!important;
    right:0!important;
    width:auto!important;
    height:100dvh!important;
    z-index:2147483000!important;
    background:rgba(7,17,38,.46)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
    filter:none!important;
    touch-action:manipulation!important;
  }

  html body .menu-backdrop{
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body .menu-backdrop.active,
  html body.menu-open .menu-backdrop,
  html body.awms-menu-open .menu-backdrop,
  html body.sidebar-open .menu-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html body.menu-open .sidebar *,
  html body.awms-menu-open .sidebar *,
  html body.sidebar-open .sidebar *{
    filter:none!important;
    opacity:1;
  }
}

@media (max-width:420px){
  html body .menu-backdrop,
  html body .menu-backdrop.active,
  html body.menu-open .menu-backdrop,
  html body.awms-menu-open .menu-backdrop,
  html body.sidebar-open .menu-backdrop{
    left:min(82vw,390px)!important;
  }
}

/* Multiusuario PRO */
.permission-box{margin-top:14px;padding:14px;border:1px solid rgba(30,99,210,.14);border-radius:18px;background:rgba(255,255,255,.62)}
.permission-box b{display:block;margin-bottom:8px;color:#0b2b63}
.permission-box p{margin:0;color:#50617b}
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.permission-grid label{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(239,246,255,.78);border:1px solid rgba(148,181,235,.25);font-weight:800;color:#10214a}
.permission-grid input{width:18px;height:18px;accent-color:#1f6fe5}
.permission-grid small{display:block;color:#60708f;font-weight:650;margin-left:auto;font-size:11px}

/* =========================================================
   AIR-WORLD MAILMULTI · SOCIOS PRO SAFE ADD-ON
   Solo UX/seguridad visual: roles, actividad, selector rápido y logs.
   ========================================================= */
.role-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:950;letter-spacing:.02em;white-space:nowrap;border:1px solid rgba(37,99,235,.18);box-shadow:0 8px 18px rgba(15,23,42,.06)}
.role-badge.admin{color:#0b49d8;background:linear-gradient(135deg,#eff6ff,#fff7dd)}
.role-badge.partner{color:#8a5b00;background:linear-gradient(135deg,#fff7dd,#f8fbff)}
.user-pill span{display:flex;flex-direction:column;line-height:1.05}.user-pill small{font-size:10px;color:#64748b;font-weight:800;margin-top:2px}.awms-dark .user-pill small{color:#dbeafe}
.account-switcher{display:flex;align-items:center;gap:9px;min-width:230px;border:1px solid rgba(180,202,234,.52);border-radius:18px;background:rgba(255,255,255,.70);box-shadow:0 12px 26px rgba(15,23,42,.05);padding:7px 10px}
.account-switcher label{font-size:10px;text-transform:uppercase;letter-spacing:.10em;color:#2c68c8;font-weight:950;white-space:nowrap}.account-switcher select{border:0;background:transparent;color:#0b1f4d;font-weight:900;outline:none;max-width:170px}.awms-dark .account-switcher{background:rgba(15,23,42,.78);border-color:rgba(147,197,253,.25)}.awms-dark .account-switcher label{color:#93c5fd}.awms-dark .account-switcher select{color:#fff}
.new-mail-badge{display:inline-flex;align-items:center;justify-content:center;margin-bottom:5px;border-radius:999px;padding:3px 8px;font-size:10px;font-style:normal;font-weight:1000;color:#062159;background:linear-gradient(135deg,#ffe08a,#5da8ff);box-shadow:0 0 0 3px rgba(255,194,38,.14),0 8px 18px rgba(37,99,235,.12);animation:awmsNewPulse 1.8s ease-in-out infinite}@keyframes awmsNewPulse{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.04);filter:saturate(1.18)}}
.mail.unread .meta b:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:linear-gradient(135deg,#0b65e5,#ffc21a);box-shadow:0 0 0 4px rgba(11,101,229,.10)}
.settings-users-pro .user-admin-card{position:relative;overflow:hidden}.settings-users-pro .user-admin-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#0b65e5,#ffc21a)}.settings-users-pro .user-admin-card.partner:before{background:linear-gradient(180deg,#ffc21a,#57a8ff)}
.user-head-pro{gap:10px;flex-wrap:wrap}.settings-role-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:1000;letter-spacing:.04em;text-transform:uppercase}.settings-role-badge.admin{background:#eaf2ff;color:#0b49d8}.settings-role-badge.partner{background:#fff5d8;color:#8a5b00}.online-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:950}.online-chip i{width:8px;height:8px;border-radius:50%;display:block}.online-chip.online{background:#ecfdf5;color:#047857}.online-chip.online i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.13)}.online-chip.offline{background:#f8fafc;color:#64748b}.online-chip.offline i{background:#94a3b8}
.user-activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 14px}.user-activity-grid div{border:1px solid rgba(148,181,235,.22);background:rgba(255,255,255,.72);border-radius:16px;padding:12px 14px}.user-activity-grid small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#2b6fd6;font-weight:950;margin-bottom:4px}.user-activity-grid strong{display:block;color:#0b1f4d;font-size:13px;line-height:1.25}
.permission-box-pro{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(239,246,255,.62))}.permission-tile{transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease}.permission-tile.granted{border-color:rgba(37,99,235,.28)!important;background:linear-gradient(135deg,#f8fbff,#fff8df)!important;box-shadow:0 8px 18px rgba(37,99,235,.08)}.permission-tile.muted{opacity:.62;background:#f8fafc!important}.permission-tile:hover{transform:translateY(-1px)}
.audit-card .audit-list{display:grid;gap:10px}.audit-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border:1px solid rgba(148,181,235,.20);background:rgba(255,255,255,.75);border-radius:16px;padding:12px 14px}.audit-row b{display:block;color:#0b1f4d}.audit-row span{display:block;color:#475569;font-weight:700;margin-top:3px}.audit-row small{text-align:right;color:#64748b;font-weight:700;line-height:1.35;min-width:170px}
@media(max-width:1180px){.account-switcher{display:none}.role-badge{display:none}}
@media(max-width:760px){.user-activity-grid{grid-template-columns:1fr}.audit-row{display:block}.audit-row small{text-align:left;display:block;margin-top:8px}.permission-grid{grid-template-columns:1fr}.settings-role-badge,.online-chip{font-size:10px}.new-mail-badge{display:none}}

/* FASE 2 REAL · Admin sesiones y control multiusuario sin tocar diseño base */
.settings-sessions-pro .audit-row{align-items:center;gap:14px;}
.session-row-pro em{font-style:normal;margin-left:8px;padding:4px 9px;border-radius:999px;background:rgba(11,73,216,.09);color:#0b49d8;font-size:11px;font-weight:900;}
.session-kill-form{margin-left:auto;}
.settings-small-danger{border:0;border-radius:13px;padding:9px 12px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 10px 20px rgba(239,68,68,.18);}
.current-session-chip{margin-left:auto;border-radius:999px;padding:8px 11px;background:rgba(22,163,74,.10);color:#15803d;font-weight:900;border:1px solid rgba(22,163,74,.18);}
.awms-dark .session-row-pro em{background:rgba(96,165,250,.15);color:#bfdbfe;}
.awms-dark .current-session-chip{background:rgba(34,197,94,.12);color:#bbf7d0;border-color:rgba(34,197,94,.25);}
@media(max-width:720px){.settings-sessions-pro .audit-row{display:block}.session-kill-form{margin:10px 0 0}.current-session-chip{display:inline-flex;margin-top:10px}}

/* === SETTINGS PERMISSIONS GRID FIX v20260523 ===
   Corrige tarjetas de cuentas permitidas montadas/sobrepuestas.
   Solo afecta settings.php; no toca IMAP, login, app, mobile drawer ni datos.
*/
body.settings-page .permission-box,
body.settings-page .permission-box-pro{
  overflow:visible!important;
  padding:18px!important;
  border-radius:18px!important;
}
body.settings-page .permission-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
  width:100%!important;
  margin-top:12px!important;
}
body.settings-page .permission-grid label.permission-tile,
body.settings-page .permission-tile{
  width:100%!important;
  min-width:0!important;
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  row-gap:2px!important;
  align-items:center!important;
  padding:12px 14px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-align:left!important;
}
body.settings-page .permission-tile input[type="checkbox"]{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  justify-self:center!important;
  align-self:center!important;
}
body.settings-page .permission-tile span{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#07183d!important;
  font-weight:950!important;
  line-height:1.08!important;
}
body.settings-page .permission-tile small{
  grid-column:2!important;
  grid-row:2!important;
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  margin:2px 0 0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#526786!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:750!important;
}
body.settings-page .permission-tile.granted{
  opacity:1!important;
  border-color:rgba(11,73,216,.28)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,248,224,.78))!important;
  box-shadow:0 10px 22px rgba(11,73,216,.07)!important;
}
body.settings-page .permission-tile.muted{
  opacity:.66!important;
  background:linear-gradient(135deg,rgba(248,251,255,.92),rgba(255,255,255,.78))!important;
}
@media(max-width:1180px){
  body.settings-page .permission-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;}
}
@media(max-width:720px){
  body.settings-page .permission-box,
  body.settings-page .permission-box-pro{padding:14px!important;}
  body.settings-page .permission-grid{grid-template-columns:1fr!important;gap:10px!important;}
  body.settings-page .permission-grid label.permission-tile,
  body.settings-page .permission-tile{min-height:60px!important;padding:11px 13px!important;}
}

/* === AWMS MailMulti Login PRO Fix + Welcome Loader 2026-05-22 ===
   Corrige login desordenado sin tocar IMAP, permisos, mobile drawer ni diseño del inbox. */
body.login-page{
  min-height:100vh!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  overflow:auto!important;
  background:
    radial-gradient(circle at 16% 12%,rgba(11,95,215,.15),transparent 32%),
    radial-gradient(circle at 86% 20%,rgba(255,191,39,.20),transparent 34%),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 48%,#fff4df 100%)!important;
}
body.login-page .login-card{
  width:min(470px,calc(100vw - 32px))!important;
  max-width:470px!important;
  padding:34px!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(178,205,239,.72)!important;
  box-shadow:0 34px 90px rgba(21,68,130,.15),inset 0 1px 0 rgba(255,255,255,.95)!important;
  overflow:hidden!important;
}
body.login-page .login-brand{margin-bottom:22px!important;text-align:center!important;}
body.login-page .login-brand img{
  display:block!important;
  width:min(235px,72vw)!important;
  max-width:235px!important;
  height:auto!important;
  max-height:94px!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
body.login-page .login-brand h1{font-size:28px!important;line-height:1.08!important;margin:18px 0 8px!important;color:#07172f!important;}
body.login-page .login-brand p{font-size:15px!important;color:#64748b!important;font-weight:750!important;}
body.login-page .login-form{display:block!important;}
body.login-page .login-form label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:14px 0 8px!important;
  color:#1e293b!important;
  font-weight:900!important;
  line-height:1.2!important;
}
body.login-page .login-form input[type=text],
body.login-page .login-form input[type=password],
body.login-page .login-form input[type=text]#loginPassword{
  width:100%!important;
  min-height:52px!important;
  display:block!important;
  border-radius:18px!important;
  background:#fff!important;
  color:#07172f!important;
  border:1px solid #d9e4f2!important;
  box-shadow:inset 0 1px 0 rgba(15,23,42,.03)!important;
  padding:14px 16px!important;
  font-size:16px!important;
  font-weight:700!important;
  outline:none!important;
}
body.login-page .login-password-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
}
body.login-page .login-password-wrap input{
  padding-right:104px!important;
}
body.login-page .login-show-pass{
  position:absolute!important;
  right:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  min-width:82px!important;
  height:36px!important;
  min-height:0!important;
  padding:0 12px!important;
  margin:0!important;
  border-radius:13px!important;
  border:1px solid rgba(11,95,215,.14)!important;
  background:linear-gradient(135deg,#fff8df,#eaf4ff)!important;
  color:#0b3f94!important;
  box-shadow:0 6px 16px rgba(15,23,42,.10)!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
}
body.login-page .login-show-pass:active{transform:translateY(-50%) scale(.97)!important;}
body.login-page .login-row{margin:14px 0 10px!important;}
body.login-page .login-mini{margin:12px 0 16px!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px!important;}
body.login-page .login-btn{
  width:100%!important;
  height:56px!important;
  min-height:56px!important;
  border-radius:18px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#ffcf4d 0%,#ffb21a 40%,#0b5fd7 100%)!important;
  color:#fff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.12)!important;
  box-shadow:0 18px 34px rgba(255,178,26,.22),0 12px 28px rgba(11,95,215,.14)!important;
  font-size:16px!important;
  font-weight:950!important;
}
body.login-page .login-foot{margin-top:18px!important;color:#64748b!important;text-align:center!important;}
@media(max-width:520px){
  body.login-page{padding:18px!important;align-items:center!important;}
  body.login-page .login-card{padding:26px 20px!important;border-radius:26px!important;width:min(430px,calc(100vw - 28px))!important;}
  body.login-page .login-brand img{max-width:205px!important;}
  body.login-page .login-brand h1{font-size:24px!important;}
  body.login-page .login-password-wrap input{padding-right:92px!important;}
  body.login-page .login-show-pass{min-width:72px!important;height:34px!important;font-size:11px!important;padding:0 9px!important;}
  body.login-page .login-mini span{font-size:11px!important;padding:5px 8px!important;}
}

/* FASE socios fotos + loader legible */
.user-pill b{overflow:hidden!important;}
.user-pill b img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:inherit!important;}
.settings-user-photo{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid rgba(148,181,235,.24);background:rgba(255,255,255,.66);border-radius:18px;min-height:76px;}
.settings-user-photo .photo-preview{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#0b5fd7,#ffbf27);color:#fff;font-weight:1000;box-shadow:0 12px 24px rgba(30,88,170,.12);flex:0 0 54px;}
.settings-user-photo .photo-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.settings-user-photo input[type=file]{font-size:13px;max-width:100%;}
.settings-user-photo small{display:block;margin-top:4px;color:#64748b;font-weight:800;}
@media(max-width:760px){.settings-user-photo{align-items:flex-start;flex-direction:column}.settings-user-photo .photo-preview{width:62px;height:62px;border-radius:20px}}

/* IMAP/SMTP por socio - campos seguros sin alterar el diseño base */
.imap-credentials-box{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(11,95,215,.14);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(239,246,255,.64));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
.imap-credentials-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.imap-credentials-head strong{color:#08245c;font-size:14px;line-height:1.2;}
.imap-credentials-head span{color:#64748b;font-size:12px;font-weight:750;line-height:1.35;max-width:520px;text-align:right;}
.imap-credentials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.imap-credential-card{display:block;padding:13px;border-radius:17px;border:1px solid rgba(148,181,235,.26);background:rgba(255,255,255,.80);box-shadow:0 10px 24px rgba(15,23,42,.04);}
.imap-credential-card.saved{border-color:rgba(22,163,74,.20);background:linear-gradient(135deg,#ffffff,#f4fff8);}
.imap-credential-card.pending{border-color:rgba(255,122,0,.24);background:linear-gradient(135deg,#ffffff,#fff8e7);}
.imap-credential-title{display:block;color:#07172f;font-size:14px;font-weight:950;line-height:1.15;margin-bottom:2px;}
.imap-credential-card small{display:block;color:#64748b;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px;}
.imap-credential-card em{display:inline-flex;align-items:center;min-height:24px;padding:5px 9px;border-radius:999px;background:#eef6ff;color:#0b5fd7;font-style:normal;font-size:11px;font-weight:950;margin-bottom:8px;}
.imap-credential-card.pending em{background:#fff4df;color:#b45309;}
.imap-credential-card .password-wrap{margin-top:0;}
.imap-credential-card .password-field{min-height:42px!important;border-radius:14px!important;font-size:13px!important;padding-right:86px!important;}
.imap-credential-card .show-pass{min-width:70px!important;height:32px!important;font-size:11px!important;padding:0 8px!important;}
@media(max-width:760px){
  .imap-credentials-head{display:block;}
  .imap-credentials-head span{text-align:left;display:block;margin-top:5px;max-width:none;}
  .imap-credentials-grid{grid-template-columns:1fr;}
}

/* Activity recent: paginated, light, controlled height */
.audit-card .audit-head-pro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.audit-card .audit-head-pro h2{margin-bottom:6px!important;}
.audit-clear-form{flex:0 0 auto;margin-top:2px;}
.audit-clear-btn{white-space:nowrap;}
.audit-summary-pro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:12px 0 14px;
  padding:10px 12px;
  border:1px solid rgba(11,73,216,.10);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(238,246,255,.72));
  color:#395077;
  font-weight:800;
  font-size:13px;
}
.audit-summary-pro b{color:#0b49d8;}
.audit-pagination-pro{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}
.audit-pagination-pro a,
.audit-pagination-pro span,
.audit-pagination-pro strong{
  min-width:108px;
  text-align:center;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(11,73,216,.12);
}
.audit-pagination-pro a{
  color:#0b49d8;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 22px rgba(11,73,216,.06);
}
.audit-pagination-pro span{
  color:#94a3b8;
  background:rgba(241,245,249,.75);
}
.audit-pagination-pro strong{
  color:#fff;
  background:linear-gradient(135deg,#ffb21a,#ff7a18 48%,#0b49d8);
  box-shadow:0 12px 26px rgba(255,122,24,.18);
}
@media(max-width:760px){
  .audit-card .audit-head-pro{display:block;}
  .audit-clear-form{margin:12px 0 0;}
  .audit-clear-btn{width:100%;}
  .audit-summary-pro{display:block;line-height:1.8;}
  .audit-pagination-pro{gap:8px;}
  .audit-pagination-pro a,.audit-pagination-pro span,.audit-pagination-pro strong{min-width:0;flex:1;padding:10px 8px;font-size:12px;}
}

/* === AWMS FINAL: botón cerrar sesión PRO + ajustes de seguridad visual === */
body.settings-page .settings-logout-pro,
body.settings-page .settings-logout{
  min-height:54px!important;
  border-radius:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#ffb21f 0%,#ff7a18 42%,#0b49d8 100%)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 16px 34px rgba(255,122,24,.18),0 10px 26px rgba(11,73,216,.14)!important;
  text-decoration:none!important;
  letter-spacing:-.01em!important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important;
}
body.settings-page .settings-logout-pro:hover,
body.settings-page .settings-logout:hover{
  transform:translateY(-1px)!important;
  filter:saturate(1.05)!important;
  box-shadow:0 20px 42px rgba(255,122,24,.22),0 12px 28px rgba(11,73,216,.18)!important;
}
body.settings-page .settings-logout-pro .logout-icon{
  width:30px!important;
  height:30px!important;
  border-radius:11px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.24)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32)!important;
}
@media(max-width:820px){
  body.settings-page .settings-logout-pro,
  body.settings-page .settings-logout{
    min-height:50px!important;
    border-radius:18px!important;
    font-size:14px!important;
  }
}

/* FINAL FIX 2026-05-23: botón Cerrar sesión en Sesiones activas */
.settings-sessions-pro .session-kill-form.inline,
.session-kill-form.inline{
  padding-right:0!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;
}
.settings-sessions-pro .session-kill-form .settings-small-danger{
  min-width:140px!important;
  height:44px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  color:#ffffff!important;
  background:linear-gradient(135deg,#ff7a00 0%,#ef4444 52%,#b91c1c 100%)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 12px 24px rgba(239,68,68,.20), inset 0 1px 0 rgba(255,255,255,.28)!important;
  text-shadow:none!important;
  overflow:hidden!important;
}
.settings-sessions-pro .session-kill-form .settings-small-danger::before{
  content:'⏻';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  font-size:13px;
  flex:0 0 auto;
}
.settings-sessions-pro .session-kill-form .settings-small-danger:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 16px 30px rgba(239,68,68,.26), inset 0 1px 0 rgba(255,255,255,.34)!important;
}
@media(max-width:720px){
  .settings-sessions-pro .session-kill-form.inline,
  .session-kill-form.inline{
    width:100%!important;
    margin:12px 0 0!important;
    justify-content:flex-start!important;
  }
  .settings-sessions-pro .session-kill-form .settings-small-danger{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    font-size:15px!important;
  }
}


/* === FINAL FIX: Topbar compact title AWMS (all users) === */
.global-appbar .appbar-title-awms{
  display:flex!important;align-items:center!important;min-width:62px!important;max-width:72px!important;
}
.global-appbar .appbar-title-awms strong{
  display:block!important;font-size:18px!important;font-weight:950!important;line-height:1!important;
  color:#061b46!important;letter-spacing:.02em!important;white-space:nowrap!important;
}
.global-appbar .appbar-title-awms span{display:none!important;}
.global-appbar .appbar-left{min-width:155px!important;flex:0 0 auto!important;}
.global-appbar .appbar-search{max-width:560px!important;}
body.awms-dark .global-appbar .appbar-title-awms strong{color:#f8fbff!important;}
@media(max-width:980px){
  .global-appbar .appbar-left{min-width:0!important;}
  .global-appbar .appbar-title-awms{min-width:54px!important;max-width:64px!important;}
  .global-appbar .appbar-title-awms strong{font-size:17px!important;}
}
@media(max-width:520px){
  .global-appbar .appbar-title-awms strong{font-size:17px!important;}
}

/* === JICATUYO MAIL PRO THEME 2026-05-24 === */
:root{
  --jica-sky:#0ea5e9;
  --jica-sky-2:#38bdf8;
  --jica-green:#0f8f4b;
  --jica-green-2:#16b86b;
  --jica-orange:#ff8a00;
  --jica-orange-2:#ffb547;
  --jica-ink:#061b35;
  --jica-line:#dbeaf7;
  --jica-shadow:0 24px 70px rgba(6,48,92,.13);
}
body:not(.login-body){
  background:
    radial-gradient(circle at 87% 12%,rgba(255,138,0,.22) 0%,transparent 30%),
    radial-gradient(circle at 10% 88%,rgba(22,184,107,.18) 0%,transparent 36%),
    radial-gradient(circle at 60% 28%,rgba(14,165,233,.16) 0%,transparent 34%),
    linear-gradient(135deg,#f8fcff 0%,#eef9ff 42%,#f3fff8 72%,#fff8ee 100%)!important;
}
.shell{grid-template-columns:300px minmax(395px,480px) minmax(560px,1fr)!important;}
.sidebar{
  background:
    radial-gradient(circle at 16% 8%,rgba(56,189,248,.20),transparent 28%),
    radial-gradient(circle at 88% 72%,rgba(255,138,0,.18),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,252,255,.88))!important;
  border-right:1px solid var(--jica-line)!important;
  box-shadow:14px 0 38px rgba(6,48,92,.07)!important;
}
.sidebar .brand{padding:8px 6px 18px;border-bottom:1px solid rgba(14,165,233,.12);margin-bottom:10px;}
.sidebar .brand-logo{max-width:255px!important;width:100%!important;filter:drop-shadow(0 14px 24px rgba(15,143,75,.14))!important;}
.account-email{color:var(--jica-green)!important;font-weight:900!important;letter-spacing:.02em!important;}
.compose,.btn,.search button,.compose-form button,.refresh-btn{
  background:linear-gradient(135deg,var(--jica-sky) 0%,var(--jica-green) 48%,var(--jica-orange) 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 15px 36px rgba(14,165,233,.18),0 10px 30px rgba(255,138,0,.16)!important;
}
.quick-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-bottom:14px!important;}
.sidebar-install-btn,.logout,.settings-btn{
  background:rgba(255,255,255,.78)!important;
  color:var(--jica-ink)!important;
  border:1px solid var(--jica-line)!important;
  box-shadow:0 10px 26px rgba(6,48,92,.06)!important;
}
.nav-title{color:#0975bd!important;letter-spacing:.24em!important;display:flex;align-items:center;gap:10px;}
.nav-title:before{content:'';width:8px;height:8px;border-radius:99px;background:linear-gradient(135deg,var(--jica-sky),var(--jica-green));}
.sidebar nav{background:rgba(255,255,255,.72)!important;border-color:var(--jica-line)!important;border-radius:26px!important;box-shadow:0 16px 42px rgba(6,48,92,.055)!important;}
.sidebar nav a{border:1px solid transparent!important;color:#21364f!important;}
.sidebar nav a.active,.sidebar nav a:hover{background:linear-gradient(135deg,rgba(14,165,233,.13),rgba(22,184,107,.10),rgba(255,138,0,.10))!important;border-color:rgba(14,165,233,.18)!important;color:var(--jica-ink)!important;}
.sidebar nav a.active{box-shadow:inset 4px 0 0 var(--jica-orange),0 10px 24px rgba(14,165,233,.08)!important;}
.count-badge.hot{background:linear-gradient(135deg,var(--jica-orange),var(--jica-green))!important;color:#fff!important;}
.main{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,253,255,.76))!important;border-right:1px solid var(--jica-line)!important;}
.top{background:rgba(255,255,255,.86)!important;}
.mail{border-radius:24px!important;border-color:rgba(14,165,233,.08)!important;}
.mail.unread{background:linear-gradient(90deg,rgba(14,165,233,.10),rgba(255,255,255,.94) 46%,rgba(255,138,0,.05))!important;border-color:rgba(14,165,233,.18)!important;}
.mail.unread:before{background:linear-gradient(180deg,var(--jica-sky),var(--jica-green),var(--jica-orange))!important;}
.avatar{background:linear-gradient(135deg,var(--jica-sky),var(--jica-green))!important;color:#fff!important;}
.preview{
  background:
    radial-gradient(circle at 12% 16%,rgba(14,165,233,.18),transparent 26%),
    radial-gradient(circle at 92% 12%,rgba(255,138,0,.18),transparent 30%),
    radial-gradient(circle at 38% 88%,rgba(22,184,107,.16),transparent 36%),
    linear-gradient(135deg,#eaf8ff 0%,#f5fff7 50%,#fff4e4 100%)!important;
  position:relative;
}
.preview:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(14,165,233,.22) 1px,transparent 1px);background-size:22px 22px;opacity:.28;}
.welcome-card-pro{
  width:min(620px,88%);max-width:620px!important;border:0!important;border-radius:42px!important;padding:42px 48px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 30px 90px rgba(6,48,92,.16)!important;position:relative;overflow:hidden!important;
}
.welcome-card-pro:before{content:'';position:absolute;inset:0 0 auto 0;height:9px;background:linear-gradient(90deg,var(--jica-sky),var(--jica-green),var(--jica-orange));}
.welcome-card-pro h2{font-size:38px!important;line-height:1.05!important;color:var(--jica-ink)!important;}
.welcome-card-pro h2 span{background:linear-gradient(90deg,var(--jica-sky),var(--jica-green),var(--jica-orange));-webkit-background-clip:text;background-clip:text;color:transparent!important;}
.welcome-card-pro p{color:#39536f!important;font-weight:650!important;}
.mail-hero-illustration svg{width:240px!important;max-width:100%!important;}
.global-appbar{background:rgba(255,255,255,.86)!important;border-bottom:1px solid var(--jica-line)!important;box-shadow:0 10px 35px rgba(6,48,92,.06)!important;}
.appbar-title-awms strong{color:var(--jica-green)!important;letter-spacing:.01em!important;}
.role-badge,.imap-status{border-color:rgba(14,165,233,.18)!important;background:rgba(255,255,255,.72)!important;}
.account-switcher select,.appbar-search{border-color:var(--jica-line)!important;background:rgba(255,255,255,.82)!important;}
.settings-shell{background:linear-gradient(135deg,#f6fcff,#f3fff8 52%,#fff8ec)!important;}
.settings-side{background:rgba(255,255,255,.92)!important;border-right:1px solid var(--jica-line)!important;}
.settings-card{border-color:var(--jica-line)!important;box-shadow:var(--jica-shadow)!important;}
.settings-save{background:linear-gradient(135deg,var(--jica-sky),var(--jica-green),var(--jica-orange))!important;color:#fff!important;}
.add-account-row{background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(22,184,107,.07),rgba(255,138,0,.08))!important;border-color:rgba(14,165,233,.18)!important;}
.hidden-inbox-link{opacity:.9!important;font-size:13px!important;}
.login-body{background:radial-gradient(circle at 16% 10%,rgba(14,165,233,.36),transparent 30%),radial-gradient(circle at 86% 18%,rgba(255,138,0,.30),transparent 32%),radial-gradient(circle at 50% 95%,rgba(22,184,107,.26),transparent 36%),linear-gradient(135deg,#f8fcff,#edfaff 48%,#fff7ea)!important;}
.login-card{border-color:rgba(14,165,233,.18)!important;}
.login-card button{background:linear-gradient(135deg,var(--jica-sky),var(--jica-green),var(--jica-orange))!important;color:#fff!important;}
@media(max-width:980px){.shell{grid-template-columns:1fr!important}.sidebar{width:min(86vw,330px)!important}.welcome-card-pro{width:92%!important;padding:32px 24px!important}.welcome-card-pro h2{font-size:30px!important}}

/* FIX FINAL AJUSTES */
.sidebar .settings-btn::before,
.sidebar .settings-btn::after{
content:none!important;
display:none!important;
}
.sidebar .settings-btn{
font-size:15px!important;
color:#063b78!important;
font-weight:700!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
}