*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,sans-serif;background:#f6f8fc;color:#202124}

.root{display:flex;flex-direction:column;height:100vh;min-height:600px;background:#f6f8fc}
.root>.header{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f6f8fc;height:64px;flex-shrink:0}
.headers-table td.header{background:transparent;height:auto;padding:1px 0}
.logo{display:flex;align-items:center;gap:4px;margin-right:8px}
.logo-text{font-size:22px;color:#5f6368;font-weight:400;letter-spacing:-0.5px}
.search-wrap{flex:1;max-width:720px}
.search-bar{display:flex;align-items:center;background:#eaf1fb;border-radius:24px;padding:0 16px;height:46px;gap:12px}
.search-bar input{border:none;background:transparent;outline:none;font-size:16px;flex:1;color:#202124}
.search-bar input::placeholder{color:#5f6368}
.search-bar .ico{color:#5f6368;width:20px;height:20px;flex-shrink:0}
.header-right{display:flex;align-items:center;gap:2px;margin-left:auto}
.icon-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;color:#5f6368;text-decoration:none}
.icon-btn:hover{background:#e8eaed}
.avatar{width:32px;height:32px;border-radius:50%;background:#0b57d0;color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:4px}
#userinfo{font-size:13px;color:#5f6368;margin:0 8px;white-space:nowrap}

.body{display:flex;flex:1;overflow:hidden;min-height:0}

.sidebar{width:256px;padding:8px;flex-shrink:0;background:#f6f8fc;overflow-y:auto}
.compose-btn{display:flex;align-items:center;gap:12px;background:#c2e7ff;color:#001d35;border:none;border-radius:16px;padding:16px 24px;font-size:14px;font-weight:500;cursor:pointer;width:100%;margin-bottom:8px;text-decoration:none}
.compose-btn:hover{background:#a8d8f0}
.nav-item{display:flex;align-items:center;gap:16px;padding:4px 16px;height:32px;border-radius:16px;font-size:14px;color:#202124;cursor:pointer;white-space:nowrap}
.nav-item:hover{background:#e8eaed}
.nav-item.active{background:#d3e3fd;font-weight:500}
.nav-item svg{width:20px;height:20px;flex-shrink:0;color:#444746}
.nav-section{font-size:12px;color:#444746;padding:8px 16px 4px;font-weight:500}

.sidebar-mailboxes{list-style:none;padding:0;margin:0}
.sidebar-mailboxes li a{display:flex;align-items:center;gap:16px;padding:4px 16px;height:32px;border-radius:16px;font-size:14px;color:#202124;cursor:pointer;text-decoration:none;white-space:nowrap}
.sidebar-mailboxes li a:hover{background:#e8eaed}
.sidebar-mailboxes li.selected a,.sidebar-mailboxes li.focused a{background:#d3e3fd;font-weight:500}
.sidebar-mailboxes li .unreadcount{margin-left:auto;font-size:12px;font-weight:500;color:#202124}

.main{display:flex;flex-direction:column;flex:1;overflow:hidden;background:#fff;border-radius:16px;margin:8px 8px 0 0;min-height:0}

#maintoolbar{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;padding:8px 16px;border-bottom:1px solid #e0e0e0;background:#fff;flex-shrink:0;min-height:48px;width:100%;box-sizing:border-box}
.tb-sep{width:1px;height:20px;background:#e0e0e0;margin:0 4px;display:inline-block;flex-shrink:0}
a.tb-btn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:16px;font-size:13px;color:#444746;text-decoration:none;white-space:nowrap;cursor:pointer;border:none;background:transparent}
a.tb-btn:hover{background:#e8eaed}
a.tb-btn.disabled{opacity:.4;pointer-events:none}
.pager a.tb-btn{padding:0;width:32px;height:32px;border-radius:50%;justify-content:center;font-size:11px}

.tabs{display:flex;border-bottom:1px solid #e0e0e0;background:#fff;flex-shrink:0}
.tab{display:flex;align-items:center;gap:8px;padding:0 24px;height:48px;font-size:14px;cursor:pointer;color:#5f6368;border-bottom:3px solid transparent;flex:1;max-width:200px}
.tab.active{color:#0b57d0;border-bottom-color:#0b57d0}
.tab svg{width:20px;height:20px}

.email-list{overflow-y:auto;flex:1;background:#fff}
#messagelist{width:100%;border-collapse:collapse;table-layout:fixed}
#messagelist thead{display:none}
#messagelist tbody tr{display:flex;align-items:center;padding:0 16px;height:52px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-size:14px}
#messagelist tbody tr:hover{background:#f1f3f4}
#messagelist tbody tr.message{background:#f6f8fc}
#messagelist tbody tr.message td.fromto,#messagelist tbody tr.message td.subject{color:#5f6368;font-weight:400}
#messagelist tbody tr.unread{background:#fff}
#messagelist tbody tr.unread td.fromto,#messagelist tbody tr.unread td.subject{color:#202124;font-weight:600}
#messagelist tbody tr.selected{background:#c2dbff}
#messagelist tbody tr.deleted{opacity:.5;text-decoration:line-through}
#messagelist td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
#messagelist td.subject{flex:1;color:#202124;min-width:0}
#messagelist td.subject a{color:inherit;text-decoration:none}
#messagelist td.fromto{width:180px;flex-shrink:0;color:#202124}
#messagelist td.date{width:90px;text-align:right;font-size:12px;color:#5f6368;flex-shrink:0}
#messagelist td.size,#messagelist td.threads,#messagelist td.priority,#messagelist td.status{display:none}
#messagelist td.flag{width:28px;flex-shrink:0;text-align:center}
#messagelist td.flag span{cursor:pointer;font-size:16px;color:#c4c7c5}
#messagelist td.flag span.unflagged::before{content:'\2606'}
#messagelist td.flag span.flagged::before{content:'\2605';color:#f4b400}
#messagelist span.branch,#messagelist span.msgicon{display:none}
#messagelist td.attachment{width:22px;flex-shrink:0;text-align:center}
#messagelist td.attachment span.attachment::before{content:'\1F4CE';font-size:13px}
#messagelist td.subject span.subject{color:inherit}
#messagelist td.subject span.preview{color:#5f6368;font-weight:400}

.pager{display:flex;flex-direction:row;align-items:center;gap:4px;padding:8px 16px;background:#fff;font-size:12px;color:#5f6368;border-top:1px solid #e0e0e0;justify-content:flex-end;flex-shrink:0}
.pager a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:#5f6368;text-decoration:none}
.pager a:hover{background:#e8eaed}
.pager a.disabled{opacity:.4;pointer-events:none}

.search-bar form,.ab-search form{flex:1;display:flex;align-items:center}
.search-bar label,.ab-search label{display:none}
#quicksearchbox{flex:1}
#quicksearchbox input{border:none;background:transparent;outline:none;font-size:16px;width:100%;color:#202124}
#quicksearchbox input::placeholder{color:#5f6368}

.footer{background:#f6f8fc;border-top:1px solid #e0e0e0;padding:10px 24px;font-size:12px;color:#5f6368;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;flex-wrap:wrap;gap:8px}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#5f6368;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.storage{display:flex;align-items:center;gap:8px}
.storage-bar{width:120px;height:4px;background:#e0e0e0;border-radius:2px}
.storage-fill{height:100%;width:38%;background:#0b57d0;border-radius:2px}

.email-view{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:16px;margin:8px 8px 0 0}
.view-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:8px 16px;border-bottom:1px solid #e0e0e0;flex-shrink:0}
.view-content{flex:1;overflow-y:auto;padding:24px 32px}
.view-subject{font-size:22px;font-weight:400;color:#202124;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.view-subject .label{font-size:12px;background:#e8f0fe;color:#1a73e8;border-radius:4px;padding:2px 8px;font-weight:500}
.meta-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}
.meta-avatar{width:40px;height:40px;border-radius:50%;background:#0b57d0;color:#fff;font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.meta-info{flex:1}
.meta-from{font-size:14px;font-weight:500;color:#202124}
.meta-from span{font-weight:400;color:#5f6368}
.meta-date{font-size:12px;color:#5f6368;margin-top:2px}
.meta-actions{display:flex;gap:4px}
.email-body{font-size:14px;color:#202124;line-height:1.7}
#messagebody div.pre,#messagebody pre{white-space:pre-wrap;font-family:Arial,sans-serif;margin:0}
#messagebody .message-part{padding:8px 0}
.message-summary{font-size:14px;font-weight:500;color:#202124}
.message-summary a{color:#202124;text-decoration:none}
.headers-table{font-size:12px;color:#5f6368;border-collapse:collapse;margin-top:2px}
.headers-table td{padding:1px 8px 1px 0;vertical-align:top}
.headers-table td.header-title{color:#80868b;white-space:nowrap}
.headers-table a{color:#0b57d0;text-decoration:none}
#senderphoto img,#preview-senderphoto img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.attachments{margin-top:24px;padding-top:16px;border-top:1px solid #f0f0f0}
.attachments h4{font-size:13px;color:#5f6368;font-weight:500;margin-bottom:12px}
ul.attach-list{display:flex;gap:12px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
ul.attach-list li{width:160px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;position:relative;padding:0;background:#fff;display:flex;flex-direction:column;transition:box-shadow .15s;cursor:pointer}
ul.attach-list li:hover{box-shadow:0 2px 10px rgba(0,0,0,.18)}
ul.attach-list li .att-thumb{height:82px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-bottom:1px solid #e0e0e0;overflow:hidden}
ul.attach-list li .att-thumb svg{width:44px;height:44px}
ul.attach-list li .att-info{padding:7px 8px;display:flex;align-items:center;gap:6px;min-height:40px}
ul.attach-list li .att-badge{width:26px;height:26px;border-radius:3px;font-size:8px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:-.2px;font-family:Arial,sans-serif}
ul.attach-list li .att-name{font-size:12px;color:#202124;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-decoration:none;line-height:1.3}
ul.attach-list li .att-name:hover{text-decoration:underline}
ul.attach-list li .att-corner{position:absolute;right:0;bottom:40px;width:20px;height:20px}
.attachments:has(ul:empty){display:none}
.reply-box{padding:16px 32px 24px;border-top:1px solid #e0e0e0;flex-shrink:0}
.reply-inner{border:1px solid #e0e0e0;border-radius:12px;padding:16px}
.reply-to{font-size:13px;color:#5f6368;margin-bottom:8px}
.reply-inner textarea{width:100%;border:none;outline:none;font-size:14px;color:#202124;resize:none;font-family:Arial,sans-serif;min-height:80px}
.reply-inner textarea::placeholder{color:#bdbdbd}
.reply-footer{display:flex;align-items:center;gap:8px;margin-top:12px}
.reply-send{display:flex;align-items:center;gap:8px;background:#0b57d0;color:#fff;border:none;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:500;cursor:pointer}
.reply-send:hover{background:#0842a0}
.reply-icon-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:#5f6368}
.reply-icon-btn:hover{background:#e8eaed}

.compose-window{position:fixed;bottom:0;right:24px;width:560px;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 8px 32px rgba(0,0,0,.2);display:flex;flex-direction:column;z-index:100;min-height:480px}
.compose-header{display:flex;align-items:center;background:#404040;color:#fff;padding:10px 16px;border-radius:12px 12px 0 0;gap:8px}
.compose-header span{flex:1;font-size:14px;font-weight:500}
.compose-header-btn{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#fff;cursor:pointer}
.compose-header-btn:hover{background:rgba(255,255,255,.15)}
.compose-fields{border-bottom:1px solid #e0e0e0}
.compose-field{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #f0f0f0;gap:8px}
.compose-field label{font-size:13px;color:#444746;width:auto;min-width:36px;white-space:nowrap;flex-shrink:0}
.compose-field input{flex:1;border:none;outline:none;font-size:14px;color:#202124;background:transparent}
.compose-field input::placeholder{color:#bdbdbd}
.compose-field-btn{font-size:12px;color:#444746;cursor:pointer;padding:2px 6px;border-radius:4px}
.compose-field-btn:hover{background:#f0f0f0}
.compose-body{flex:1;padding:12px 16px;font-size:14px;color:#202124;outline:none;line-height:1.7;min-height:200px;resize:none;border:none;font-family:Arial,sans-serif}
.compose-toolbar{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:2px;flex-wrap:wrap}
.ct-btn{width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:#444746}
.ct-btn:hover{background:#f0f0f0}
.ct-sep{width:1px;height:20px;background:#e0e0e0;margin:0 4px}
.ct-send{display:flex;align-items:center;gap:8px;background:#0b57d0;color:#fff;border:none;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:500;cursor:pointer;margin-right:8px}
.ct-send:hover{background:#0842a0}
.ct-delete{margin-left:auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:#444746}
.ct-delete:hover{background:#f0f0f0}
.to-wrap{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.to-wrap input{border:none;outline:none;font-size:14px;color:#202124;background:transparent;min-width:80px;flex:1}
.chip{display:inline-flex;align-items:center;gap:4px;background:#e8eaed;border-radius:12px;padding:2px 8px;font-size:13px;color:#202124;margin:2px}
.chip button{border:none;background:none;cursor:pointer;color:#5f6368;font-size:14px;line-height:1;padding:0 2px}

.ab-layout{flex:1;display:flex;overflow:hidden}
.ab-sidebar{width:220px;flex-shrink:0;padding:8px;border-right:1px solid #e0e0e0;background:#f6f8fc}
.ab-nav-item{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:0 20px 20px 0;font-size:14px;color:#202124;cursor:pointer}
.ab-nav-item:hover{background:#e8eaed}
.ab-nav-item.active{background:#d3e3fd;font-weight:500;color:#0b57d0}
.ab-nav-item svg{width:18px;height:18px;color:#5f6368}
.ab-nav-item.active svg{color:#0b57d0}
.ab-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.ab-toolbar{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid #e0e0e0}
.ab-search{display:flex;align-items:center;background:#f6f8fc;border-radius:24px;padding:0 14px;height:38px;gap:8px;flex:1;max-width:360px}
.ab-search input{border:none;background:none;outline:none;font-size:14px;color:#202124;flex:1}
.ab-search svg{color:#5f6368;width:18px;height:18px}
.btn-add{display:flex;align-items:center;gap:8px;background:#0b57d0;color:#fff;border:none;border-radius:20px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;margin-left:auto}
.btn-add:hover{background:#0842a0}
.ab-list{flex:1;overflow-y:auto}
.ab-letter{font-size:12px;font-weight:500;color:#5f6368;padding:8px 20px 4px;background:#f6f8fc;border-bottom:1px solid #f0f0f0}
.ab-row{display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.ab-row:hover{background:#f6f8fc}
.ab-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;flex-shrink:0;color:#fff}
.ab-info{flex:1}
.ab-name{font-size:14px;font-weight:500;color:#202124}
.ab-email{font-size:13px;color:#5f6368}
.ab-phone{font-size:13px;color:#5f6368;width:140px;text-align:right}
.ab-row-actions{display:flex;gap:4px;opacity:0}
.ab-row:hover .ab-row-actions{opacity:1}
.ab-icon-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:#5f6368}
.ab-icon-btn:hover{background:#e8eaed}

.contact-view{flex:1;display:flex;overflow:hidden;background:#fff;border-radius:16px;margin:8px 8px 0 0}
.contact-aside{width:280px;flex-shrink:0;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:32px 20px;gap:12px}
.contact-big-avatar{width:96px;height:96px;border-radius:50%;background:#0b57d0;color:#fff;font-size:32px;font-weight:500;display:flex;align-items:center;justify-content:center}
.contact-name{font-size:20px;font-weight:500;color:#202124;text-align:center}
.contact-org{font-size:13px;color:#5f6368;text-align:center}
.contact-actions{display:flex;gap:8px;margin-top:8px}
.ca-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:#f6f8fc;border:1px solid #e0e0e0;border-radius:12px;padding:10px 16px;font-size:12px;color:#0b57d0;cursor:pointer;min-width:64px}
.ca-btn:hover{background:#e8eaed}
.ca-btn svg{width:20px;height:20px}
.contact-main{flex:1;overflow-y:auto;padding:24px 32px}
.contact-main h3{font-size:13px;font-weight:500;color:#5f6368;text-transform:uppercase;letter-spacing:.5px;margin:20px 0 12px}
.contact-main h3:first-child{margin-top:0}
.contact-toolbar{display:flex;align-items:center;gap:4px;padding:8px 16px;border-bottom:1px solid #e0e0e0}
.detail-row{display:flex;align-items:flex-start;gap:16px;padding:8px 0;border-bottom:1px solid #f0f0f0}
.detail-row:last-child{border-bottom:none}
.detail-icon{width:20px;height:20px;color:#5f6368;flex-shrink:0;margin-top:2px}
.detail-body{flex:1}
.detail-value{font-size:14px;color:#202124}
.detail-label{font-size:12px;color:#5f6368;margin-top:1px}
.email-mini{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.email-mini-avatar{width:32px;height:32px;border-radius:50%;background:#e8f0fe;color:#0b57d0;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.email-mini-info{flex:1;overflow:hidden}
.email-mini-subj{font-weight:500;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-mini-preview{font-size:12px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-mini-time{font-size:12px;color:#5f6368;flex-shrink:0}

.addcontact-wrap{flex:1;overflow-y:auto;background:#fff;border-radius:16px;margin:8px 8px 0 0;padding:32px 40px}
.addcontact-wrap h2{font-size:20px;font-weight:500;color:#202124;margin-bottom:24px}
.form-section{margin-bottom:28px}
.form-section h3{font-size:12px;font-weight:500;color:#5f6368;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;padding-bottom:6px;border-bottom:1px solid #f0f0f0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid.single{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:12px;color:#5f6368;font-weight:500}
.form-group input,.form-group select,.form-group textarea{border:1px solid #ccc;border-radius:8px;padding:8px 12px;font-size:14px;color:#202124;outline:none;background:#fff;font-family:Arial,sans-serif}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#0b57d0;box-shadow:0 0 0 2px rgba(11,87,208,.15)}
.form-group textarea{resize:vertical;min-height:72px}
.avatar-upload{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.upload-avatar{width:72px;height:72px;border-radius:50%;background:#e8f0fe;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px dashed #0b57d0;flex-shrink:0}
.upload-avatar svg{color:#0b57d0;width:28px;height:28px}
.upload-hint{font-size:13px;color:#5f6368}
.upload-hint span{color:#0b57d0;cursor:pointer}
.multi-field{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.multi-field input,.multi-field select{flex:1;border:1px solid #ccc;border-radius:8px;padding:8px 12px;font-size:14px;color:#202124;outline:none;background:#fff}
.multi-field input:focus,.multi-field select:focus{border-color:#0b57d0}
.multi-field select{max-width:110px}
.add-field-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:#0b57d0;cursor:pointer;padding:4px 0;width:fit-content}
.add-field-btn:hover{text-decoration:underline}
.remove-btn{width:28px;height:28px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:#5f6368;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.remove-btn:hover{background:#f0f0f0}
.form-actions{display:flex;gap:12px;padding-top:16px;border-top:1px solid #e0e0e0;margin-top:8px}
.btn-primary{background:#0b57d0;color:#fff;border:none;border-radius:20px;padding:8px 24px;font-size:14px;font-weight:500;cursor:pointer}
.btn-primary:hover{background:#0842a0}
.btn-secondary{background:#fff;color:#444746;border:1px solid #ccc;border-radius:20px;padding:8px 24px;font-size:14px;cursor:pointer}
.btn-secondary:hover{background:#f6f8fc}

.settings-layout{display:flex;flex:1;overflow:hidden}
.settings-nav{width:220px;flex-shrink:0;padding:16px 8px;border-right:1px solid #e0e0e0;background:#f6f8fc;overflow-y:auto}
.settings-nav-title{font-size:13px;font-weight:500;color:#5f6368;padding:4px 16px 8px}
.settings-nav-item{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:0 20px 20px 0;font-size:14px;color:#202124;cursor:pointer;white-space:nowrap}
.settings-nav-item:hover{background:#e8eaed}
.settings-nav-item.active{background:#d3e3fd;font-weight:500;color:#0b57d0}
.settings-nav-item svg{width:18px;height:18px;flex-shrink:0;color:#5f6368}
.settings-nav-item.active svg{color:#0b57d0}
.settings-content{flex:1;overflow-y:auto;padding:24px 32px;background:#fff}
.settings-content h2{font-size:18px;font-weight:500;color:#202124;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid #e0e0e0}
.settings-section{margin-bottom:32px}
.settings-section h3{font-size:13px;font-weight:500;color:#5f6368;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px}
.settings-row{display:flex;align-items:flex-start;gap:24px;padding:12px 0;border-bottom:1px solid #f0f0f0}
.settings-row:last-child{border-bottom:none}
.settings-row-label{width:220px;flex-shrink:0;font-size:13px;color:#202124;font-weight:500;padding-top:2px}
.settings-row-desc{font-size:12px;color:#5f6368;margin-top:2px}
.settings-row-control{flex:1}
.settings-row-control select,.settings-row-control input[type=text],.settings-row-control textarea{border:1px solid #ccc;border-radius:4px;padding:6px 10px;font-size:13px;color:#202124;outline:none;background:#fff;width:100%}
.settings-row-control select:focus,.settings-row-control input[type=text]:focus,.settings-row-control textarea:focus{border-color:#0b57d0}
.settings-row-control textarea{resize:vertical;min-height:80px}
.radio-group{display:flex;flex-direction:column;gap:8px}
.radio-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#202124;cursor:pointer}
.radio-item input{accent-color:#0b57d0;width:16px;height:16px}
.toggle-row{display:flex;align-items:center;gap:12px}
.toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#ccc;border-radius:10px;cursor:pointer;transition:.2s}
.slider:before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.slider{background:#0b57d0}
.toggle input:checked+.slider:before{transform:translateX(16px)}
.save-bar{display:flex;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid #e0e0e0}

.about-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;overflow-y:auto;background:#fff;border-radius:16px;margin:8px 8px 0 0}
.about-logo{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.about-logo-text{font-size:32px;color:#5f6368;font-weight:300;letter-spacing:-1px}
.about-card{background:#f6f8fc;border-radius:16px;padding:32px 40px;max-width:560px;width:100%;text-align:center}
.about-version{font-size:13px;color:#5f6368;margin-bottom:24px}
.about-divider{height:1px;background:#e0e0e0;margin:20px 0}
.about-section{text-align:left;margin-bottom:16px}
.about-section h4{font-size:13px;font-weight:500;color:#5f6368;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.about-section p{font-size:14px;color:#202124;line-height:1.6}
.about-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.about-links a{font-size:13px;color:#0b57d0;text-decoration:none}
.about-links a:hover{text-decoration:underline}
.about-badge{display:inline-flex;align-items:center;gap:6px;background:#e8f0fe;color:#0b57d0;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:500;margin-bottom:20px}

.preview-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:16px;margin:8px 8px 0 0}
.preview-header{padding:20px 24px 12px;border-bottom:1px solid #e0e0e0;flex-shrink:0}
.preview-subject{font-size:20px;font-weight:400;color:#202124;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.preview-meta{display:flex;align-items:center;gap:10px}
.preview-avatar{width:36px;height:36px;border-radius:50%;background:#0b57d0;color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.preview-from{font-size:13px;font-weight:500;color:#202124}
.preview-from span{font-weight:400;color:#5f6368}
.preview-date{font-size:12px;color:#5f6368}
.preview-body{flex:1;overflow-y:auto;padding:20px 24px;font-size:14px;color:#202124;line-height:1.7}

.identity-wrap{flex:1;overflow-y:auto;background:#fff;border-radius:16px;margin:8px 8px 0 0;padding:32px 40px}
.identity-wrap h2{font-size:20px;font-weight:500;color:#202124;margin-bottom:24px}

.error-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;background:#fff;border-radius:16px;margin:8px 8px 0 0;text-align:center}
.error-icon{color:#ea4335;margin-bottom:20px}
.error-code{font-size:64px;font-weight:300;color:#ea4335;line-height:1;margin-bottom:8px}
.error-title{font-size:22px;font-weight:400;color:#202124;margin-bottom:12px}
.error-desc{font-size:14px;color:#5f6368;max-width:480px;line-height:1.6;margin-bottom:28px}
.error-actions{display:flex;gap:12px;justify-content:center}

/* ======================================================
   LOGIN ESTILO Correos 21
   ====================================================== */

/* Página */
.gl-body{margin:0;padding:0;font-family:'Google Sans',Roboto,Arial,sans-serif;background:#f1f3f4;min-height:100vh;display:flex;flex-direction:column}
.gl-page{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 16px 24px}

/* Tarjeta */
.gl-card{width:100%;max-width:450px;background:#fff;border:1px solid #dadce0;border-radius:8px;padding:48px 40px 36px;box-sizing:border-box;text-align:center}

/* Logo Google en texto coloreado */
.gl-wordmark{display:flex;justify-content:center;align-items:center;margin-bottom:24px}

/* Titulos */
.gl-title{font-size:24px;font-weight:400;color:#202124;margin:0 0 8px}
.gl-subtitle{font-size:16px;font-weight:400;color:#202124;margin:0 0 28px}

/* ── Campos Roundcube → Material Outlined ──
   Roundcube genera: <tr><td class="title"><label/></td><td class="input"><input/></td></tr>
   Convertimos cada tr en un campo outlined completo.                              */
.gl-form-wrap form[name=form] table{display:block;width:100%}
.gl-form-wrap form[name=form] tbody{display:block;width:100%}

/* Cada fila = un campo outlined */
.gl-form-wrap form[name=form] tr{
  display:block;
  position:relative;
  height:56px;
  border:1px solid #747775;
  border-radius:4px;
  margin-bottom:20px;
  box-sizing:border-box;
  background:#fff;
  transition:border-color .12s;
}
/* Ocultar filas que no son campos (botones, etc.) */
.gl-form-wrap form[name=form] tr.formbuttons,
.gl-form-wrap form[name=form] tr:not(:has(td.title)):not(:has(td.input)){display:none}

/* Label: ocupa todo el tr, label flotante */
.gl-form-wrap form[name=form] td.title{
  display:block;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.gl-form-wrap form[name=form] td.title label{
  position:absolute;
  left:14px;
  top:18px;
  font-size:16px;
  color:#444746;
  background:#fff;
  padding:0 4px;
  border-radius:2px;
  white-space:nowrap;
  line-height:1;
  transition:transform .15s cubic-bezier(.4,0,.2,1), color .15s;
  transform-origin:left top;
}

/* Input: ocupa todo el tr */
.gl-form-wrap form[name=form] td.input{
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
}
.gl-form-wrap form[name=form] td.input input{
  display:block;
  width:100%;
  height:100%;
  border:none;
  background:transparent;
  outline:none;
  padding:18px 52px 0 16px;
  font-size:16px;
  color:#202124;
  font-family:inherit;
  box-sizing:border-box;
  caret-color:#0b57d0;
}

/* Estado: foco → borde azul + label flotante */
.gl-form-wrap form[name=form] tr:focus-within{
  border:2px solid #0b57d0;
}
.gl-form-wrap form[name=form] tr:focus-within td.title label{
  transform:translateY(-26px) scale(.75);
  color:#0b57d0;
}

/* Estado: tiene valor → label flotante (usa :has + :placeholder-shown via JS) */
.gl-form-wrap form[name=form] tr:has(input:not(:placeholder-shown)) td.title label{
  transform:translateY(-26px) scale(.75);
  color:#444746;
}
.gl-form-wrap form[name=form] tr:focus-within:has(input:not(:placeholder-shown)) td.title label{
  color:#0b57d0;
}

/* Botón ojo contraseña */
.gl-eye{
  position:absolute;
  right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;
  border:none;background:none;cursor:pointer;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#5f6368;
  z-index:3;
  transition:background .15s;
}
.gl-eye:hover{background:rgba(11,87,208,.08)}

/* Botón Siguiente */
.gl-actions{display:flex;justify-content:flex-end;margin-top:8px}
.gl-btn-primary{
  background:#0b57d0;color:#fff;border:none;
  font-size:14px;font-weight:500;letter-spacing:.25px;
  padding:10px 24px;border-radius:4px;cursor:pointer;
  font-family:inherit;
  box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  transition:background .15s;
}
.gl-btn-primary:hover{background:#0842a0}

/* Messagestack en login */
.gl-body #messagestack{position:static;transform:none;left:auto;bottom:auto;margin-bottom:16px}
.gl-body #messagestack>div{border-radius:4px;font-size:14px}

/* Footer */
.gl-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 24px;border-top:1px solid #e0e0e0;font-size:12px;color:#444746;background:#f1f3f4}
.gl-lang-btn{display:inline-flex;align-items:center;gap:4px;border:none;background:none;cursor:pointer;font-size:12px;color:#444746;font-family:inherit;padding:6px 8px;border-radius:4px;transition:background .15s}
.gl-lang-btn:hover{background:#e8eaed}
.gl-footer-links{display:flex;gap:20px}
.gl-footer-links a{color:#444746;text-decoration:none;font-size:12px}
.gl-footer-links a:hover{text-decoration:underline}

/* Modo oscuro */
html.dark .gl-body{background:#17181a}
html.dark .gl-card{background:#17181a;border-color:#3c4043}
html.dark .gl-title,html.dark .gl-subtitle{color:#e8eaed}
html.dark .gl-form-wrap form[name=form] tr{background:#17181a;border-color:#8e918f}
html.dark .gl-form-wrap form[name=form] tr:focus-within{border-color:#8ab4f8}
html.dark .gl-form-wrap form[name=form] td.title label{background:#17181a;color:#9aa0a6}
html.dark .gl-form-wrap form[name=form] tr:focus-within td.title label{color:#8ab4f8}
html.dark .gl-form-wrap form[name=form] td.input input{color:#e8eaed}
html.dark .gl-eye{color:#9aa0a6}
html.dark .gl-footer{background:#17181a;border-color:#3c4043;color:#9aa0a6}
html.dark .gl-lang-btn{color:#9aa0a6}
html.dark .gl-footer-links a{color:#9aa0a6}

/* Ocultar login-wrap legacy */
.login-wrap{display:none !important}
/* ---- v1.1: estilos para el HTML real que genera Roundcube ---- */

/* Carpetas (mailboxlist) */
.sidebar-mailboxes ul{list-style:none;padding:0;margin:0}
.sidebar-mailboxes li ul li a{padding-left:36px}
.sidebar-mailboxes li a .unreadcount{margin-left:auto;font-size:12px;font-weight:500;color:#202124;background:transparent}

/* Ventana de redacción */
.compose-window{max-height:calc(100vh - 40px);overflow:hidden}
.compose-window form{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
.compose-hidden{display:none}
.compose-field textarea{flex:1;border:none;outline:none;font-size:14px;color:#202124;background:transparent;resize:none;height:22px;line-height:22px;font-family:Arial,sans-serif;padding:0}
.compose-field select{flex:1;border:none;outline:none;font-size:14px;color:#202124;background:transparent}
.compose-subject input{flex:1;border:none;outline:none;font-size:14px;color:#202124;background:transparent}
textarea.compose-body{flex:1;padding:12px 16px;font-size:14px;color:#202124;outline:none;line-height:1.7;min-height:180px;resize:none;border:none;font-family:Arial,sans-serif}
.compose-attachments ul{list-style:none;margin:0;padding:4px 16px;display:flex;flex-wrap:wrap;gap:8px}
.compose-attachments li{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#202124;background:#f1f3f4;border:1px solid #dadce0;border-radius:16px;padding:5px 6px 5px 12px;max-width:100%}
.compose-attachments li a{color:#202124;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-width:0}
.compose-attachments li .attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;font-weight:500}
.compose-attachments li .attachment-size{color:#5f6368;font-size:12px;flex-shrink:0}
.compose-attachments li a.delete{width:22px;height:22px;border-radius:50%;font-size:0;color:transparent;flex-shrink:0;background:center/14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")}
.compose-attachments li a.delete:hover{background-color:#dadce0}
.compose-attachments li a.cancelupload{color:#ea4335;text-decoration:none;font-size:12px}
.compose-upload{border-top:1px solid #f0f0f0;padding:8px 16px;font-size:12px;color:#5f6368}
.compose-upload input[type=file]{font-size:12px}
.compose-upload button,.compose-upload input[type=button]{background:#fff;color:#444746;border:1px solid #ccc;border-radius:14px;padding:4px 14px;font-size:12px;cursor:pointer;margin-left:6px}
.compose-upload .hint{margin-top:4px;font-size:11px;color:#80868b}

/* Vista de mensaje: botones inferiores */
.reply-box{display:flex;gap:10px}
.reply-send{display:inline-flex;align-items:center;gap:8px;background:#0b57d0;color:#fff;border:none;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.reply-send:hover{background:#0842a0}
.reply-send.secondary{background:#fff;color:#444746;border:1px solid #ccc}
.reply-send.secondary:hover{background:#f6f8fc}

/* Libreta de direcciones */
#directorylist{list-style:none;padding:0;margin:0}
#directorylist li a{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:0 20px 20px 0;font-size:14px;color:#202124;cursor:pointer;text-decoration:none}
#directorylist li a:hover{background:#e8eaed}
#directorylist li.selected>a{background:#d3e3fd;font-weight:500;color:#0b57d0}
#directorylist ul{list-style:none;padding-left:16px}
#contacts-table{width:100%;border-collapse:collapse}
#contacts-table thead{display:none}
#contacts-table tbody tr{cursor:pointer;border-bottom:1px solid #f0f0f0}
#contacts-table tbody tr:hover{background:#f6f8fc}
#contacts-table tbody tr.selected{background:#c2dbff}
#contacts-table td{padding:12px 20px;font-size:14px;color:#202124;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#contacthead{font-size:20px;font-weight:500;color:#202124;text-align:center}
#contacthead .names,#contacthead .displayname{display:block}
#contacthead span{font-size:13px;color:#5f6368;font-weight:400}
#contactphoto img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.contact-main fieldset{border:none;margin:0 0 20px;padding:0}
.contact-main legend{font-size:12px;font-weight:500;color:#5f6368;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #f0f0f0;width:100%}
.contact-main .row{padding:4px 0;border-bottom:1px solid #f8f9fa}
.contact-main .contactfieldlabel{display:block;font-size:12px;color:#5f6368}
.contact-main .contactfieldcontent{font-size:14px;color:#202124}
.contact-main .contactfieldcontent a{color:#0b57d0;text-decoration:none}
.addcontact-wrap fieldset,.identity-wrap fieldset{border:none;margin:0 0 24px;padding:0}
.addcontact-wrap legend,.identity-wrap legend{font-size:12px;font-weight:500;color:#5f6368;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;width:100%}
.addcontact-wrap input[type=text],.addcontact-wrap input[type=email],.addcontact-wrap select,.addcontact-wrap textarea,
.identity-wrap input[type=text],.identity-wrap input[type=email],.identity-wrap select,.identity-wrap textarea{border:1px solid #ccc;border-radius:8px;padding:8px 12px;font-size:14px;color:#202124;outline:none;background:#fff;font-family:Arial,sans-serif;margin:2px 0}
.addcontact-wrap input:focus,.identity-wrap input:focus{border-color:#0b57d0}
.addcontact-wrap .contactfieldgroup{margin-bottom:16px}
.addcontact-wrap a.deletebutton{color:#ea4335;font-size:12px;text-decoration:none;margin-left:8px}
.addcontact-wrap select.addfieldmenu{max-width:220px}

/* Configuración */
.settings-frame{flex:1;width:100%;height:100%;border:none;background:#fff}
.settings-content{padding:0;display:flex}
#settings-tabs{display:flex;flex-direction:column;margin-bottom:8px}
#settings-tabs a,.settings-nav>span a{display:block;padding:6px 16px;border-radius:0 16px 16px 0;font-size:13px;color:#0b57d0;text-decoration:none}
#settings-tabs a:hover{background:#e8eaed}
#settings-tabs .selected a,#settings-tabs a.selected{background:#d3e3fd;font-weight:500}
#sections-table{width:100%;border-collapse:collapse;margin:0 0 8px}
#sections-table thead{display:none}
#sections-table tr{cursor:pointer}
#sections-table td{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:0 20px 20px 0;font-size:14px;color:#202124}
#sections-table tr:hover td{background:#e8eaed}
#sections-table tr.selected td{background:#d3e3fd;font-weight:500;color:#0b57d0}

/* Mensajes emergentes (messagestack) */
#messagestack{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px}
#messagestack>div{background:#202124;color:#fff;border-radius:8px;padding:12px 24px;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
#messagestack>div.error{background:#b3261e}
#messagestack>div.confirmation{background:#146c2e}

/* Página completa del preview (iframe) */
body.preview-page{background:#fff}
html.dark body.preview-page{background:#202124}
html.dark body.preview-page .preview-wrap{background:#202124;color:#e8eaed}
body.preview-page .preview-wrap{margin:0;border-radius:0;height:100vh}

/* ---- v1.2: iconos estilo Correos 21 ---- */
a.ib{width:40px;height:40px;min-width:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background-position:center;background-repeat:no-repeat;background-size:20px 20px;font-size:0;color:transparent;text-decoration:none;cursor:pointer;flex-shrink:0}
a.ib:hover{background-color:#e8eaed}
a.ib.disabled{opacity:.35;pointer-events:none}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:2px;font-size:12px;color:#5f6368}
.tb-right #messagecount{margin-right:8px;white-space:nowrap}
a.i-selall{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z'/%3E%3C/svg%3E")}
a.i-refresh{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E")}
a.i-trash{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E")}
a.i-unread{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")}
a.i-read{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z'/%3E%3C/svg%3E")}
a.i-star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E")}
a.i-back{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E")}
a.i-reply{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E")}
a.i-replyall{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M7 8V5l-7 7 7 7v-3l-4-4 4-4zm6 1V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E")}
a.i-forward{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M14 8V5l7 7-7 7v-3.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11z'/%3E%3C/svg%3E")}
a.i-prev{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E")}
a.i-next{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E")}

/* Botón Redactar con lápiz */
.compose-btn::before{content:'';width:20px;height:20px;flex-shrink:0;background:center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23001d35'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E")}

/* Iconos de carpetas del sidebar */
.sidebar-mailboxes li a::before{content:'';width:20px;height:20px;flex-shrink:0;background:center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E")}
.sidebar-mailboxes li.inbox>a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H5V5h14v10z'/%3E%3C/svg%3E")}
.sidebar-mailboxes li.drafts>a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E")}
.sidebar-mailboxes li.sent>a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E")}
.sidebar-mailboxes li.junk>a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E")}
.sidebar-mailboxes li.trash>a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E")}
.sidebar-mailboxes li.archive>a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.93 1H5.12z'/%3E%3C/svg%3E")}

/* Filas de la lista estilo Correos 21 */
#messagelist tbody tr{height:44px}
#messagelist tbody tr.message{background:#f2f6fc}
#messagelist tbody tr.message td.fromto,#messagelist tbody tr.message td.subject{color:#202124;font-weight:400}
#messagelist tbody tr.unread{background:#fff}
#messagelist tbody tr.unread td.fromto,#messagelist tbody tr.unread td.subject,#messagelist tbody tr.unread td.date{color:#202124;font-weight:700}
#messagelist tbody tr:hover{box-shadow:inset 0 -1px 0 0 #dadce0,0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);background:inherit}
#messagelist td.fromto{width:200px}
#messagelist td.date{font-size:12px;width:96px}

/* Chip de carpeta junto al asunto */
.subject-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:400;background:#e8eaed;color:#444746;border-radius:6px;padding:2px 10px;white-space:nowrap}

/* Botones inferiores tipo Correos 21 (outline con icono) */
.reply-box .reply-send,.reply-box .reply-send.secondary{background:#fff;color:#444746;border:1px solid #dadce0;gap:10px}
.reply-box .reply-send:hover{background:#f6f8fc}
.reply-box .reply-send::before{content:'';width:18px;height:18px;background:center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E")}
.reply-box .reply-send.secondary:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M7 8V5l-7 7 7 7v-3l-4-4 4-4zm6 1V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E")}
.reply-box .reply-send.secondary:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M14 8V5l7 7-7 7v-3.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11z'/%3E%3C/svg%3E")}

/* ---- v1.3: compose estilo Correos 21 + respuesta inline ---- */
a.i-attach{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E")}
a.i-draft{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E")}
.compose-toolbar{display:flex;align-items:center;padding:10px 14px;border-top:1px solid #e0e0e0;gap:4px}
.ct-spacer{flex:1}
a.ct-send{display:inline-flex;align-items:center;background:#0b57d0;color:#fff;border:none;border-radius:18px;padding:9px 24px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;margin-right:8px}
a.ct-send:hover{background:#0842a0;box-shadow:0 1px 2px rgba(60,64,67,.3)}
form.smart-upload{display:none}
.compose-upload{border:none;padding:0}
.compose-upload .hint{display:none}

/* Cuadro de respuesta/reenvío inline (como Correos 21) */
.inline-reply{display:none;margin:8px 24px 20px;border:1px solid #dadce0;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px 0 rgba(60,64,67,.3);flex-shrink:0}
.inline-reply iframe{display:block;width:100%;height:480px;border:none;background:#fff}

/* Compose dentro de iframe (inline): caja plana a ancho completo */
body.framed-page .compose-window,html.in-frame .compose-window{position:static;width:100%;min-height:100vh;max-height:none;border-radius:0;box-shadow:none}
body.framed-page .compose-header,html.in-frame .compose-header{display:none}
body.framed-page textarea.compose-body,html.in-frame textarea.compose-body{min-height:200px}
html.in-frame .root{display:none}
html.in-frame body{background:#fff}

/* ---- v1.4: estado de conexión + menú de herramientas + cuota ---- */
.conn-status{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #dadce0;border-radius:18px;padding:7px 14px;font-size:13px;color:#202124;cursor:default;white-space:nowrap;margin-right:4px}
.conn-dot{width:10px;height:10px;border-radius:50%;background:#188038;box-shadow:0 0 0 3px rgba(24,128,56,.15);flex-shrink:0}
.conn-status.offline{cursor:pointer;color:#b3261e;border-color:#f2b8b5}
.conn-status.offline .conn-dot{background:#d93025;box-shadow:0 0 0 3px rgba(217,48,37,.15)}

.apps-menu-wrap{position:relative}
.apps-menu{display:none;position:absolute;top:48px;right:0;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.22);padding:14px;z-index:500;width:280px;grid-template-columns:1fr 1fr;gap:6px}
.apps-menu.open{display:grid}
.apps-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:12px;text-decoration:none;color:#202124;font-size:12.5px;text-align:center}
.apps-item:hover{background:#f1f3f4}
.apps-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}

.storage{display:flex;align-items:center;gap:8px;min-width:0}
#quotadisplay{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storage-fill{height:100%;width:0;background:#0b57d0;border-radius:2px;transition:width .4s}

/* Créditos (Acerca de) */
.credits{text-align:center;padding:4px 0}
.credits-title{font-size:11px;font-weight:500;color:#5f6368;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.credits-name{font-size:18px;font-weight:600;color:#202124;letter-spacing:.3px}
.credits-desc{font-size:13px;color:#5f6368;margin:4px 0 14px}
.credits-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.credits-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #dadce0;border-radius:18px;padding:8px 16px;font-size:13px;font-weight:500;color:#0b57d0;text-decoration:none;background:#fff}
.credits-btn:hover{background:#f0f4fe}
.credits-btn.whatsapp{color:#188038}
.credits-btn.whatsapp:hover{background:#e6f4ea}

/* ---- v1.5: Configuración estilo Correos 21 moderno ---- */
.s-card{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:16px;margin:8px 8px 0 0;min-width:0}
.s-head{padding:20px 28px 0;border-bottom:1px solid #e0e0e0;flex-shrink:0}
.s-title{display:block;font-size:22px;color:#202124;font-weight:400;margin-bottom:16px}
.s-tabbar{display:flex;gap:2px;flex-wrap:wrap}
.s-tabbar span{display:block}
.s-tabbar span a{display:block;padding:11px 20px;font-size:14px;font-weight:500;color:#5f6368;text-decoration:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;white-space:nowrap}
.s-tabbar span a:hover{background:#f1f3f4;color:#202124}
.s-tabbar span.selected a{color:#0b57d0;border-bottom-color:#0b57d0}
.s-body{display:flex;flex:1;overflow:hidden;min-height:0}
.s-nav{width:280px;flex-shrink:0;overflow-y:auto;padding:14px 10px;border-right:1px solid #f0f0f0}
.s-nav #sections-table{width:100%;border-collapse:collapse;margin:0}
.s-nav #sections-table thead{display:none}
.s-nav #sections-table tbody tr{cursor:pointer}
.s-nav #sections-table tbody td{display:flex;align-items:center;gap:14px;padding:11px 18px;margin:2px 0;border-radius:24px;font-size:14px;color:#444746;background:transparent}
.s-nav #sections-table tbody tr:hover td{background:#f1f3f4}
.s-nav #sections-table tbody tr.selected td,.s-nav #sections-table tbody tr.focused td{background:#d3e3fd;color:#001d35;font-weight:500}
.s-nav #sections-table tbody td::before{content:'';width:20px;height:20px;flex-shrink:0;background:center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94zM12,15.6c-1.98,0-3.6-1.62-3.6-3.6s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E")}
#sections-table #rcmrowgeneral td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E")}
#sections-table #rcmrowmailbox td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H5V5h14v10z'/%3E%3C/svg%3E")}
#sections-table #rcmrowmailview td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")}
#sections-table #rcmrowcompose td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E")}
#sections-table #rcmrowaddressbook td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E")}
#sections-table #rcmrowfolders td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E")}
#sections-table #rcmrowserver td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E")}
#sections-table #rcmrowencryption td::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E")}
.s-main{flex:1;overflow:hidden;background:#fff;min-width:0}
.s-main .settings-frame{width:100%;height:100%;border:none}

/* Listas de Carpetas / Identidades / Respuestas */
.s-nav-list{display:flex;flex-direction:column;padding:14px 10px;overflow:hidden}
.s-nav-toolbar{display:flex;align-items:center;gap:10px;padding:0 6px 12px;flex-shrink:0;flex-wrap:wrap}
.s-nav-toolbar .btn-add{padding:7px 14px;font-size:12.5px;white-space:nowrap;margin-left:0}
a.s-del{color:#b3261e;font-size:13px}
.s-list-scroll{flex:1;overflow-y:auto;min-height:0}
.s-nav-footer{flex-shrink:0;padding:10px 16px 2px;font-size:12px;color:#5f6368;border-top:1px solid #f0f0f0;margin-top:8px}
.s-nav-list table{width:100%;border-collapse:collapse}
.s-nav-list table thead{display:none}
.s-nav-list table tbody tr{cursor:pointer}
.s-nav-list table tbody td{padding:10px 14px;font-size:14px;color:#444746;border-radius:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.s-nav-list table tbody tr:hover td{background:#f1f3f4}
.s-nav-list table tbody tr.selected td,.s-nav-list table tbody tr.focused td{background:#d3e3fd;color:#001d35;font-weight:500}
ul#subscription-table,ul#subscription-table ul{list-style:none;margin:0;padding:0}
ul#subscription-table ul{padding-left:20px}
ul#subscription-table li{position:relative}
ul#subscription-table li.root{display:none}
ul#subscription-table li>a{display:block;padding:10px 44px 10px 14px;font-size:14px;color:#444746;border-radius:12px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul#subscription-table li>a:hover{background:#f1f3f4}
ul#subscription-table li.selected>a{background:#d3e3fd;color:#001d35;font-weight:500}
ul#subscription-table li.virtual>a{color:#9aa0a6;cursor:default}
ul#subscription-table li>input[type=checkbox]{position:absolute;right:12px;top:19px;accent-color:#0b57d0;width:16px;height:16px;cursor:pointer;margin:0}
ul#subscription-table div.treetoggle{position:absolute;left:-4px;top:12px;width:16px;height:16px;cursor:pointer}

/* ---- v1.6: tema oscuro (html.dark, persistido en localStorage) ---- */
.theme-sun{display:none}
html.dark .theme-moon{display:none}
html.dark .theme-sun{display:inline}

html.dark body{background:#17181a;color:#e8eaed}
html.dark .root,html.dark .root>.header,html.dark .sidebar,html.dark .body{background:#17181a;color:#e8eaed}
html.dark .logo-text{color:#e8eaed}
html.dark .logo svg text{fill:#e8eaed}
html.dark .search-bar{background:#303134}
html.dark .search-bar input,html.dark #quicksearchbox input{color:#e8eaed}
html.dark .search-bar input::placeholder{color:#9aa0a6}
html.dark .search-bar .ico{color:#9aa0a6}
html.dark .icon-btn{color:#9aa0a6}
html.dark .icon-btn:hover{background:#303134}
html.dark #userinfo{color:#9aa0a6}
html.dark .conn-status{background:#202124;border-color:#3c4043;color:#e8eaed}
html.dark .apps-menu{background:#2d2e31;box-shadow:0 4px 24px rgba(0,0,0,.6)}
html.dark .apps-item{color:#e8eaed}
html.dark .apps-item:hover{background:#3c4043}

html.dark .compose-btn{background:#004a77;color:#c2e7ff}
html.dark .compose-btn:hover{background:#00639b}
html.dark .nav-item{color:#e8eaed}
html.dark .nav-item:hover{background:#303134}
html.dark .sidebar-mailboxes li a{color:#e8eaed}
html.dark .sidebar-mailboxes li a:hover{background:#303134}
html.dark .sidebar-mailboxes li.selected a,html.dark .sidebar-mailboxes li.focused a{background:#1f3760;color:#c2e7ff}
html.dark .sidebar-mailboxes li a .unreadcount{color:#e8eaed}

html.dark .main,html.dark .email-view,html.dark .s-card,html.dark .preview-wrap,html.dark .ab-main,html.dark .about-wrap,html.dark .contact-view,html.dark .addcontact-wrap,html.dark .identity-wrap,html.dark .error-wrap{background:#202124;color:#e8eaed}
html.dark #maintoolbar,html.dark .view-toolbar,html.dark .pager,html.dark .ab-toolbar{background:#202124;border-color:#3c4043}
html.dark .tb-sep{background:#3c4043}
html.dark a.tb-btn{color:#9aa0a6}
html.dark a.tb-btn:hover{background:#303134}
html.dark .tb-right{color:#9aa0a6}

html.dark #messagelist tbody tr{border-color:#2b2d31}
html.dark #messagelist tbody tr.message{background:#1a1c1f}
html.dark #messagelist tbody tr.message td.fromto,html.dark #messagelist tbody tr.message td.subject{color:#9aa0a6}
html.dark #messagelist tbody tr.unread{background:#202124}
html.dark #messagelist tbody tr.unread td.fromto,html.dark #messagelist tbody tr.unread td.subject,html.dark #messagelist tbody tr.unread td.date{color:#e8eaed}
html.dark #messagelist tbody tr.selected{background:#1f3760}
html.dark #messagelist tbody tr:hover{box-shadow:inset 0 -1px 0 0 #3c4043,0 1px 2px 0 rgba(0,0,0,.5)}
html.dark #messagelist td.date{color:#9aa0a6}
html.dark .email-list{background:#202124}

html.dark .view-subject{color:#e8eaed}
html.dark .subject-chip{background:#3c4043;color:#e8eaed}
html.dark .meta-row{border-color:#3c4043}
html.dark .message-summary,html.dark .message-summary a{color:#e8eaed}
html.dark .headers-table{color:#9aa0a6}
html.dark .headers-table a{color:#8ab4f8}
/* Contenido del mensaje en oscuro: se invierte todo el HTML del correo
   (blanco→oscuro, negro→claro) y se re-invierten las imágenes para que
   se vean normales. hue-rotate conserva los colores aproximados. */
html.dark #messagebody{background:#dfdedb;border-radius:12px;padding:16px;color:#202124;filter:invert(1) hue-rotate(180deg)}
html.dark #messagebody img,html.dark #messagebody video{filter:invert(1) hue-rotate(180deg)}
html.dark .reply-box{border-color:#3c4043}
html.dark .reply-box .reply-send{background:#202124;color:#e8eaed;border-color:#5f6368}
html.dark .reply-box .reply-send:hover{background:#303134}
html.dark ul.attach-list li{border-color:#3c4043;background:#292a2d}
html.dark ul.attach-list li:hover{box-shadow:0 2px 10px rgba(0,0,0,.4)}
html.dark ul.attach-list li .att-thumb{border-bottom-color:#3c4043}
html.dark ul.attach-list li .att-name{color:#e8eaed}
html.dark .inline-reply{border-color:#3c4043}

html.dark .compose-window{background:#202124;box-shadow:0 8px 32px rgba(0,0,0,.7)}
html.dark .compose-fields,html.dark .compose-field{border-color:#3c4043}
html.dark .compose-field label,html.dark .compose-field-btn{color:#9aa0a6}
html.dark .compose-field-btn:hover{background:#303134}
html.dark .compose-field input,html.dark .compose-field textarea,html.dark .compose-field select,html.dark .compose-subject input,html.dark .to-wrap input,html.dark .to-wrap textarea{color:#e8eaed;background:transparent}
html.dark textarea.compose-body{background:#202124;color:#e8eaed}
html.dark .compose-toolbar{border-color:#3c4043}
html.dark .compose-attachments li{background:#303134;border-color:#3c4043;color:#e8eaed}
html.dark .compose-attachments li a{color:#e8eaed}
html.dark .compose-upload{color:#9aa0a6}

html.dark .footer{background:#17181a;border-color:#3c4043;color:#9aa0a6}
html.dark .footer-links a{color:#9aa0a6}
html.dark .storage-bar{background:#3c4043}

html.dark .s-head{border-color:#3c4043}
html.dark .s-title{color:#e8eaed}
html.dark .s-tabbar span a{color:#9aa0a6}
html.dark .s-tabbar span a:hover{background:#303134;color:#e8eaed}
html.dark .s-tabbar span.selected a{color:#8ab4f8;border-bottom-color:#8ab4f8}
html.dark .s-nav{border-color:#3c4043}
html.dark .s-nav #sections-table tbody td,html.dark .s-nav-list table tbody td{color:#e8eaed}
html.dark .s-nav #sections-table tbody tr:hover td,html.dark .s-nav-list table tbody tr:hover td{background:#303134}
html.dark .s-nav #sections-table tbody tr.selected td,html.dark .s-nav #sections-table tbody tr.focused td,html.dark .s-nav-list table tbody tr.selected td,html.dark .s-nav-list table tbody tr.focused td{background:#1f3760;color:#c2e7ff}
html.dark ul#subscription-table li>a{color:#e8eaed}
html.dark ul#subscription-table li>a:hover{background:#303134}
html.dark ul#subscription-table li.selected>a{background:#1f3760;color:#c2e7ff}
html.dark .s-nav-footer{border-color:#3c4043;color:#9aa0a6}
html.dark .s-main,html.dark .s-main .settings-frame{background:#fff}

html.dark .ab-search{background:#303134}
html.dark .ab-search input{color:#e8eaed}
html.dark .ab-sidebar{background:#17181a;border-color:#3c4043}
html.dark .ab-main{border-color:#3c4043}
html.dark #directorylist li a{color:#e8eaed}
html.dark #directorylist li a:hover{background:#303134}
html.dark #directorylist li.selected>a{background:#1f3760;color:#c2e7ff}
html.dark #contacts-table tbody tr{border-color:#2b2d31}
html.dark #contacts-table td{color:#e8eaed}
html.dark #contacts-table tbody tr:hover{background:#303134}
html.dark #contacts-table tbody tr.selected{background:#1f3760}
html.dark .contact-aside{border-color:#3c4043}
html.dark .contact-name .names,html.dark #contacthead{color:#e8eaed}
html.dark .contact-main legend{color:#9aa0a6;border-color:#3c4043}
html.dark .contact-main .contactfieldcontent{color:#e8eaed}
html.dark .ca-btn{background:#303134;border-color:#3c4043;color:#8ab4f8}
html.dark .addcontact-wrap input[type=text],html.dark .addcontact-wrap input[type=email],html.dark .addcontact-wrap select,html.dark .addcontact-wrap textarea,html.dark .identity-wrap input[type=text],html.dark .identity-wrap input[type=email],html.dark .identity-wrap select,html.dark .identity-wrap textarea{background:#303134;border-color:#5f6368;color:#e8eaed}
html.dark .addcontact-wrap legend,html.dark .identity-wrap legend{color:#9aa0a6;border-color:#3c4043}
html.dark .addcontact-wrap h2,html.dark .identity-wrap h2{color:#e8eaed}

html.dark .about-card{background:#2b2d31}
html.dark .about-section p,html.dark .about-section,html.dark #copyright,html.dark #license{color:#e8eaed}
html.dark .credits-name{color:#e8eaed}
html.dark .credits-btn{background:#202124;border-color:#5f6368}
html.dark .about-links a{color:#8ab4f8}
html.dark .about-logo-text{color:#e8eaed}

html.dark .login-wrap{background:#17181a}
html.dark .login-card{background:#202124;box-shadow:0 2px 12px rgba(0,0,0,.6)}
html.dark .login-title{color:#e8eaed}
html.dark .login-logo-text,html.dark .login-subtitle{color:#9aa0a6}
html.dark form[name=form] td.title label{color:#9aa0a6}
html.dark form[name=form] td.input input[type=text],html.dark form[name=form] td.input input[type=password]{background:#303134;border-color:#5f6368;color:#e8eaed}

html.dark .ui-dialog{background:#2d2e31;color:#e8eaed}
html.dark .ui-dialog .ui-dialog-titlebar{color:#e8eaed}
html.dark .ui-dialog .ui-dialog-content{color:#bdc1c6}
html.dark .ui-dialog .ui-dialog-buttonpane button{color:#8ab4f8}
html.dark .ui-dialog .ui-dialog-buttonpane button:hover{background:#303134}
html.dark .ui-dialog .ui-dialog-buttonpane button.mainaction{background:#8ab4f8;color:#202124}

html.dark body.framed-page,html.dark html.in-frame body{background:#202124}
.compose-backdrop{background:#f6f8fc}
html.dark .compose-backdrop{background:#17181a}
html.dark #messagestack>div{background:#e8eaed;color:#202124}
html.dark #messagestack>div.error{background:#f2b8b5;color:#601410}
html.dark #messagestack>div.confirmation{background:#a8dab5;color:#0d652d}

/* Iconos monocromos: invertirlos en oscuro */
html.dark a.ib,
html.dark .sidebar-mailboxes li a::before,
html.dark .s-nav #sections-table tbody td::before,
html.dark .compose-btn::before,
html.dark .compose-attachments li a.delete,
html.dark .reply-box .reply-send::before,
html.dark .ui-dialog .ui-dialog-titlebar-close{filter:invert(1) hue-rotate(180deg)}

/* ── Avatar + popup cuenta estilo Correos 21 ──────────────────────── */
.av-wrap{position:relative;margin-left:4px}
.av-btn{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;font-size:13px;font-weight:500;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#0b57d0;transition:box-shadow .15s}
.av-btn:hover{box-shadow:0 0 0 4px rgba(60,64,67,.15)}
.av-btn:focus-visible{outline:2px solid #0b57d0;outline-offset:2px}
.av-popup{position:absolute;top:calc(100% + 12px);right:0;width:360px;background:#fff;border-radius:16px;box-shadow:0 4px 6px rgba(32,33,36,.28),0 1px 2px rgba(32,33,36,.15);z-index:600;overflow:hidden;font-family:'Google Sans',Roboto,Arial,sans-serif}
.av-popup-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid #e0e0e0}
.av-popup-brand{font-size:14px;font-weight:400;color:#202124}
.av-user-card{display:flex;flex-direction:column;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #e0e0e0;text-align:center}
.av-popup-avatar{width:64px;height:64px;border-radius:50%;font-size:24px;font-weight:400;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex-shrink:0}
.av-popup-name{font-size:16px;font-weight:400;color:#202124;margin-bottom:2px}
.av-popup-email{font-size:14px;color:#5f6368;margin-bottom:14px}
.av-manage-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #dadce0;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:500;color:#0b57d0;text-decoration:none;background:#fff;transition:background .15s;white-space:nowrap}
.av-manage-btn:hover{background:#f0f4fe}
.av-popup-divider{height:1px;background:#e0e0e0;margin:0}
.av-logout-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none;background:transparent;padding:14px 20px;font-size:14px;font-weight:400;color:#202124;cursor:pointer;font-family:inherit;transition:background .15s}
.av-logout-btn:hover{background:#f1f3f4}
.av-popup-footer{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;font-size:12px;color:#5f6368;background:#f8f9fa}
.av-popup-footer a{color:#5f6368;text-decoration:none}
.av-popup-footer a:hover{text-decoration:underline}
#userinfo{display:none!important}
html.dark .av-popup{background:#292a2d;box-shadow:0 4px 12px rgba(0,0,0,.6)}
html.dark .av-popup-head{border-color:#3c4043}
html.dark .av-popup-brand{color:#e8eaed}
html.dark .av-user-card{border-color:#3c4043}
html.dark .av-popup-name{color:#e8eaed}
html.dark .av-popup-email{color:#9aa0a6}
html.dark .av-manage-btn{border-color:#5f6368;color:#8ab4f8;background:#292a2d}
html.dark .av-manage-btn:hover{background:#35363a}
html.dark .av-popup-divider{background:#3c4043}
html.dark .av-logout-btn{color:#e8eaed}
html.dark .av-logout-btn:hover{background:#35363a}
html.dark .av-popup-footer{background:#202124;color:#9aa0a6}
html.dark .av-popup-footer a{color:#9aa0a6}

/* Diálogos de confirmación (jQuery UI) estilo Correos 21 */
.ui-widget-overlay{position:fixed;inset:0;background:rgba(32,33,36,.5);z-index:1000}
.ui-dialog{position:absolute;z-index:1001;background:#fff;border:none;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.28);padding:20px 24px;min-width:340px;max-width:min(480px,90vw);font-family:Arial,sans-serif;outline:none}
.ui-dialog .ui-dialog-titlebar{display:flex;align-items:center;border:none;background:transparent;padding:0 0 8px;font-size:16px;font-weight:500;color:#202124}
.ui-dialog .ui-dialog-title{flex:1}
.ui-dialog .ui-dialog-titlebar-close{order:2;border:none;background:transparent;cursor:pointer;color:#5f6368;width:32px;height:32px;min-width:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")}
.ui-dialog .ui-dialog-titlebar-close:hover{background-color:#e8eaed}
.ui-dialog .ui-dialog-titlebar-close .ui-icon,.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space,.ui-dialog .ui-dialog-titlebar-close span{display:none}
.ui-dialog .ui-dialog-content{border:none;background:transparent;padding:4px 0 16px;font-size:14px;color:#444746;line-height:1.6;overflow:auto}
.ui-dialog .ui-dialog-buttonpane{border:none;background:transparent;padding:0;margin:0}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{display:flex;gap:8px;justify-content:flex-end;float:none}
.ui-dialog .ui-dialog-buttonpane button{border:none;background:transparent;color:#0b57d0;font-size:14px;font-weight:500;padding:9px 18px;border-radius:18px;cursor:pointer;font-family:Arial,sans-serif}
.ui-dialog .ui-dialog-buttonpane button:hover{background:#f0f4fe}
.ui-dialog .ui-dialog-buttonpane button.mainaction{background:#0b57d0;color:#fff}
.ui-dialog .ui-dialog-buttonpane button.mainaction:hover{background:#0842a0}
.ui-resizable-handle,.ui-dialog .ui-icon-gripsmall-diagonal-se{display:none!important}

/* Páginas cargadas dentro de un iframe (framed) */
body.framed-page{background:#fff}
body.framed-page .root{height:auto;min-height:100vh}
body.framed-page .body{overflow:visible}
body.framed-page .identity-wrap,body.framed-page .addcontact-wrap{margin:0;border-radius:0}
body.framed-page .contact-view{margin:0;border-radius:0;flex-direction:column;height:auto;min-height:100vh;overflow:auto}
body.framed-page .contact-aside{width:auto;border-right:none;border-bottom:1px solid #f0f0f0;padding:28px 20px 20px}
.contact-name fieldset{border:none;margin:0;padding:0}
.contact-name legend{display:none}
.contact-name .names{font-size:20px;font-weight:500;color:#202124}
.contact-name span{font-size:13px;color:#5f6368;font-weight:400}

/* Libreta: layout maestro-detalle */
.ab-main{width:420px;flex-shrink:0;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.ab-frame{flex:1;border:none;background:#fff;height:100%}

/* Pestañas estilo Gmail encima del listado de mensajes */
.gmail-tabs{display:flex;border-bottom:1px solid #e0e0e0;background:#fff;flex-shrink:0;padding:0 8px;overflow-x:auto}
.gtab{display:flex;align-items:center;gap:7px;padding:0 20px;height:48px;font-size:13.5px;color:#5f6368;text-decoration:none;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s;flex-shrink:0}
.gtab:hover{background:#f1f3f4}
.gtab.active{color:#0b57d0;border-bottom-color:#0b57d0;font-weight:500}
.gtab svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
html.dark .gmail-tabs{background:#1e1e1e;border-bottom-color:#3c3c3c}
html.dark .gtab{color:#9aa0a6}
html.dark .gtab:hover{background:#2a2a2a}
html.dark .gtab.active{color:#8ab4f8;border-bottom-color:#8ab4f8}

/* Botones ocultos de la barra para soporte de comandos del menú contextual */
#maintoolbar a.ctx-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;overflow:hidden;padding:0;margin:0}

/* Fila seleccionada por click derecho — checkbox inyectado vía JS */
#messagelist tbody tr.ctx-selected{background:#e8f0fe !important}
html.dark #messagelist tbody tr.ctx-selected{background:#1f3760 !important}
html.dark #messagelist tbody tr.ctx-selected td.flag svg rect{fill:#4a90d9}

/* Menú contextual click derecho en mensajes */
.rcm-ctx{position:fixed;z-index:9999;background:#fff;border:1px solid #dadce0;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.2);padding:4px 0;min-width:210px;font-size:13px;font-family:Arial,sans-serif;user-select:none}
.rcm-ctx-item{display:flex;align-items:center;gap:14px;padding:9px 20px;cursor:pointer;color:#202124;white-space:nowrap}
.rcm-ctx-item:hover{background:#f1f3f4}
.rcm-ctx-item svg{width:18px;height:18px;fill:#5f6368;flex-shrink:0}
.rcm-ctx-item.danger{color:#c5221f}
.rcm-ctx-item.danger svg{fill:#c5221f}
.rcm-ctx-sep{height:1px;background:#e0e0e0;margin:4px 0}
html.dark .rcm-ctx{background:#292a2d;border-color:#3c4043;box-shadow:0 4px 16px rgba(0,0,0,.5)}
html.dark .rcm-ctx-item{color:#e8eaed}
html.dark .rcm-ctx-item:hover{background:#35363a}
html.dark .rcm-ctx-item svg{fill:#9aa0a6}
html.dark .rcm-ctx-item.danger{color:#f28b82}
html.dark .rcm-ctx-item.danger svg{fill:#f28b82}
html.dark .rcm-ctx-sep{background:#3c4043}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Botón hamburguesa — oculto en desktop, flex en móvil */
.mob-menu-btn{
  display:none;
  width:40px;height:40px;
  border:none;background:transparent;border-radius:50%;
  cursor:pointer;color:#5f6368;
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.mob-menu-btn:hover{background:#e8eaed}
html.dark .mob-menu-btn{color:#9aa0a6}
html.dark .mob-menu-btn:hover{background:#303134}

/* Overlay del drawer — siempre en DOM, visible sólo en móvil con .sidebar-open */
.sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.4);
  z-index:199;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
}

/* ── Tablet / Móvil (≤ 768px) ── */
@media (max-width:768px){

  /* Header */
  .mob-menu-btn{display:flex}
  .logo-text{display:none}
  .conn-status{display:none}
  .search-wrap{max-width:none}

  /* Sidebar como drawer lateral */
  .sidebar{
    position:fixed;
    left:-272px;
    top:64px;
    height:calc(100vh - 64px);
    z-index:200;
    overflow-y:auto;
    border-right:1px solid #e0e0e0;
    transition:left .25s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  html.dark .sidebar{border-right-color:#3c4043}

  /* Overlay visible */
  .sidebar-overlay{display:block}

  /* Estado abierto */
  .body.sidebar-open .sidebar{
    left:0;
    box-shadow:4px 0 24px rgba(0,0,0,.22);
  }
  .body.sidebar-open .sidebar-overlay{
    opacity:1;
    pointer-events:auto;
  }

  /* Contenido principal: ocupa todo el ancho */
  .main,.email-view,.preview-wrap,.about-wrap,
  .contact-view,.addcontact-wrap,.identity-wrap,.error-wrap{
    margin:4px;
    border-radius:8px;
  }

  /* Lista de mensajes → 2 líneas */
  #messagelist tbody tr{
    flex-wrap:wrap;
    height:auto;
    min-height:52px;
    padding:8px 10px;
    gap:0;
    align-items:flex-start;
  }
  #messagelist td.flag{order:0;width:28px;align-self:center}
  #messagelist td.fromto{
    order:1;flex:1;font-size:13px;
    padding:0 4px;align-self:center;
  }
  #messagelist td.date{
    order:2;width:auto;font-size:12px;
    text-align:right;align-self:center;
    flex-shrink:0;padding-left:8px;
  }
  #messagelist td.subject{
    order:3;width:100%;
    padding:2px 4px 0 32px;font-size:13px;
  }
  #messagelist td.attachment{order:4;width:22px;align-self:center}

  /* Compose → pantalla completa en móvil */
  .compose-window{
    position:fixed;
    top:0;left:0;right:0;bottom:auto;
    width:100%;height:100dvh;max-height:100dvh;
    border-radius:0;
  }
  .compose-header{border-radius:0}
  /* X de cerrar más grande para tacto */
  .compose-header-btn{width:40px;height:40px;font-size:18px}

  /* Popups: limitar ancho en pantallas estrechas */
  .av-popup{right:-4px;width:min(360px,calc(100vw - 16px))}
  .apps-menu{right:0;width:min(280px,calc(100vw - 16px))}

  /* Toolbar: desplazable horizontalmente */
  #maintoolbar{
    flex-wrap:nowrap;overflow-x:auto;
    gap:2px;padding:8px;
    scrollbar-width:none;
  }
  #maintoolbar::-webkit-scrollbar{display:none}

  /* Ajustes de configuración */
  .settings-layout{flex-direction:column}
  .settings-nav{width:100%;border-right:none;border-bottom:1px solid #e0e0e0;padding:8px}
  .settings-nav-item{border-radius:20px}
  .settings-row{flex-direction:column;gap:8px}
  .settings-row-label{width:auto}

  /* Libreta de contactos */
  .ab-layout{flex-direction:column}
  .ab-sidebar{width:100%;border-right:none;border-bottom:1px solid #e0e0e0;max-height:160px;overflow-x:auto}
  .ab-phone{display:none}

  /* Vista de mensaje */
  .view-content{padding:16px}
  .footer{padding:8px 16px}
}

/* ── Móvil pequeño (≤ 480px) ── */
@media (max-width:480px){

  .root>.header{padding:8px 6px;gap:4px;height:56px}
  .sidebar{top:56px;height:calc(100vh - 56px)}
  .search-bar{height:40px;padding:0 10px;gap:8px}
  .header-right{gap:0}
  .icon-btn,.mob-menu-btn{width:36px;height:36px}

  /* Login */
  .gl-card{padding:32px 20px 28px}
  .gl-wordmark svg{height:38px}
  .gl-title{font-size:20px}

  /* Vista de mensaje */
  .view-subject{font-size:18px}
  .view-content{padding:12px}

  /* Compose */
  .compose-header{padding:8px 12px}
}