/* === Layout globals kept === */
:root{
  --bg:#f6f7f8; --border:#e5e7eb; --text:#18181b; --muted:#6b7280; --hover:#f3f4f6;
  --content-max: 1520px; --page-max: 1920px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;height:64px;padding:0 clamp(8px,2vw,16px);background:#fff;border-bottom:1px solid var(--border)}
.icon-btn{border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:999px}
.icon-btn:hover{background:#f0f0f0}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400;vertical-align:middle}
.icon-20{font-size:20px;line-height:1}
.brand{display:flex;align-items:center;gap:8px}.brand img{width:32px;height:32px}.brand span{font-size:20px;font-weight:600;color:#3f3f46}
.search{flex:1;margin:0 8px;min-width:220px;display:flex;align-items:center;gap:8px;background:#f4f4f5;border-radius:999px;padding:0 12px;height:44px}
.search input{flex:1;border:0;background:transparent;outline:none;font-size:14px}
.topbar-actions{display:flex;align-items:center;gap:4px}.divider{width:1px;height:24px;background:var(--border);margin:0 4px}
.avatar{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:600;color:#27272a;background:linear-gradient(135deg,#e5e7eb,#d4d4d8)}
.app{margin:0;display:flex;gap:0;width:100%}
.sidebar{width:300px;padding:12px 12px 24px;display:none;border-right:1px solid var(--border);height:calc(100dvh - 64px);overflow:auto;background:#fff}
@media(min-width:1200px){.sidebar{display:block}}
.compose{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:12px 16px;border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.08);border:1px solid var(--border);cursor:pointer;margin:8px 8px 16px}
.compose:hover{box-shadow:0 4px 10px rgba(0,0,0,.06)}
.nav{display:flex;flex-direction:column;gap:2px}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:999px 0 0 999px;cursor:pointer;color:#27272a;text-decoration:none}
.nav-item .label{flex:1}.nav-item .badge{color:#6b7280;font-size:12px}
.nav-item:hover{background:#f1f5f9}.nav-item.active{background:#e4e4e7;font-weight:600}
.labels{margin-top:16px;padding:0 16px}.labels-title{font-size:11px;text-transform:uppercase;color:#737373;letter-spacing:.08em;margin-bottom:6px}
.label-chip{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 8px;border-radius:8px;cursor:pointer}.label-chip:hover{background:#f1f5f9}.label-chip .dot{width:8px;height:8px;border-radius:999px;background:#00ff22}
.content{flex:1;background:#fff;height:calc(100dvh - 64px);overflow:auto}
.content-inner{width:100%;max-width:none;margin:0;padding-left:16px;padding-right:24px;background:#fff}
.toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 4px;height:48px;border-block:1px solid var(--border);background:#fff}
.checkbox{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px}
.checkbox:hover{background:var(--hover)}.range{color:#6b7280;font-size:13px}
.email-list{border-top:1px solid var(--border)}

/* === Email rows robust === */
.row{
  display:grid;
  grid-template-columns: 112px 220px minmax(300px,1fr) 24px 64px; /* controles | from | middle | clip | fecha */
  align-items:center;
  gap:12px;
  padding:12px 8px;
  border-bottom:1px solid var(--border);
  line-height:1.3;
}
@media(max-width:1400px){
  .row{ grid-template-columns: 112px 200px minmax(360px,1fr) 28px 72px; }
}
@media(max-width:1200px){
  .row{ grid-template-columns: 112px minmax(360px,1fr) 28px 72px; }
  .row .from{ display:none !important; }
}
.row:hover{background:#fafafa}
.left{display:flex;align-items:center;gap:8px;padding-left:8px}
.from{font-weight:600;color:#111827;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Middle as grid for bullet-proof alignment */
.middle{
  min-width:0;
  display:grid;
  grid-auto-flow: column;
  align-items:center;
  gap:8px;
}
.dot-blue{width:8px;height:8px;border-radius:999px;background:#0ea5e9}
.subject-line{font-size:14px;color:#111827;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snippet{font-size:13px;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread .subject-line{font-weight:700}
.pill{font-size:10px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;color:#6b7280}
.attach{display:flex;align-items:center;justify-content:flex-start}
.date{color:#6b7280;font-size:12px;text-align:right;padding-right:10px}
.star{cursor:pointer}.star.filled{color:#fbbf24}

/* Refresh spin */@keyframes spin{to{transform:rotate(360deg)}} #refreshBtn.spin .material-symbols-outlined{animation:spin .6s linear}
.email-list a.row{ color:inherit; text-decoration:none; display:grid; }
.email-list a.row:hover{ text-decoration:none; }