.bandeja { width: min(1180px, 100%); margin: 0 auto; padding: 40px 16px 110px; display: grid; gap: 24px; }
.b-cab { text-align: center; display: grid; gap: 12px; justify-items: center; }
.b-cab h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); max-width: 18ch; }
.b-intro { margin: 0; max-width: 56ch; color: var(--suave); text-wrap: balance; }
.pestanas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pestana { min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(255, 255, 255, .04); color: var(--suave); font: 700 .95rem "Sora"; cursor: pointer; transition: all .2s ease; }
.pestana[aria-selected="true"] { color: #fff; background: var(--neon); border-color: transparent; box-shadow: 0 10px 30px -10px rgba(139, 92, 255, .9); }
.vista { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; }
.correo { display: grid; gap: 12px; justify-items: center; }
.correo-meta { text-align: center; font-size: .88rem; color: var(--tenue); }
.telefono { position: relative; width: min(92vw, 380px); height: min(150vw, 760px); border-radius: 48px; padding: 14px; background: linear-gradient(145deg, #2b2450, #120d2c); box-shadow: 0 0 0 2px rgba(160, 140, 255, .35), 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(139, 92, 255, .45); }
.telefono::before { content: ""; position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #05040f; z-index: 3; }
.pantalla-tel { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #fff; display: grid; grid-template-rows: auto auto 1fr; }
.barra-estado { height: 46px; background: #f4f3f8; display: flex; justify-content: space-between; align-items: end; padding: 0 26px 6px; font: 700 .78rem "Sora"; color: #111; }
.cabecera-correo { background: #f4f3f8; border-bottom: 1px solid #e3e1ee; padding: 8px 16px 12px; color: #1d1838; display: grid; grid-template-columns: 40px 1fr; gap: 2px 10px; align-items: center; }
.avatar { grid-row: span 3; width: 40px; height: 40px; border-radius: 50%; background: var(--neon); color: #fff; display: grid; place-items: center; font: 800 .9rem "Unbounded"; }
.cabecera-correo strong { font: 700 .92rem/1.3 "Sora"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera-correo span { font-size: .76rem; color: #6c6788; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pantalla-tel iframe { width: 100%; height: 100%; border: 0; background: #0b0820; display: block; }
.vacio { padding: 34px 22px; text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 520px; margin: 0 auto; }
.vacio h2 { font-size: 1.5rem; }
.vacio p { margin: 0; color: var(--suave); }
.b-pie { text-align: center; }
.b-reiniciar { background: none; border: 0; color: var(--tenue); text-decoration: underline; font: 600 .9rem "Sora"; cursor: pointer; padding: 10px; }