/* Layout: una columna de app nativa (barra superior, contenido desplazable, barra de pestañas);
   las hojas suben desde abajo y el lector entra desde la derecha. En pantallas anchas, un marco de teléfono. */
:root{
  --bg:#F5F2EA; --surface:#FFFDF8; --surface2:#ECE8DE; --bar:#F0ECE3;
  --ink:#23272B; --ink2:#4F555A; --ink3:#666C71; --line:#E0DACD;
  --accent:#1E5E6A; --accent-ink:#FFFFFF; --accent-soft:#DCE8E8; --sel:#E4ECE9; --press:#EBE6DB;
  --danger:#B23A30; --warn:#8F5E10; --ok:#2C7A4F;
  --backdrop:rgba(24,26,28,.34); --shadow:rgba(35,39,43,.16); --desk:#E6E1D5;
  --f-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
  --f-disp:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --esc:1;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --tabh:56px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141618; --surface:#1C1F22; --surface2:#272B2F; --bar:#191C1E;
    --ink:#ECE8E0; --ink2:#B4B8BB; --ink3:#8E9397; --line:#2E3236;
    --accent:#6CB8C4; --accent-ink:#0C1F23; --accent-soft:#1E373C; --sel:#21353A; --press:#22262A;
    --danger:#E86E62; --warn:#E3A845; --ok:#5CB884;
    --backdrop:rgba(0,0,0,.55); --shadow:rgba(0,0,0,.55); --desk:#0E0F10;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141618; --surface:#1C1F22; --surface2:#272B2F; --bar:#191C1E;
  --ink:#ECE8E0; --ink2:#B4B8BB; --ink3:#8E9397; --line:#2E3236;
  --accent:#6CB8C4; --accent-ink:#0C1F23; --accent-soft:#1E373C; --sel:#21353A; --press:#22262A;
  --danger:#E86E62; --warn:#E3A845; --ok:#5CB884;
  --backdrop:rgba(0,0,0,.55); --shadow:rgba(0,0,0,.55); --desk:#0E0F10;
  color-scheme:dark;
}

html{height:100%; font-size:calc(16px * var(--esc)); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{height:100%; margin:0; overflow:hidden; background:linear-gradient(var(--bg) 50%, var(--bar) 50%); color:var(--ink);
  font:400 1rem/1.38 var(--f-ui); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation}
button:focus-visible,[tabindex]:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ic{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ic.sm{width:18px; height:18px}
.ic.xs{width:14px; height:14px; stroke-width:2}
.ic.fill{fill:currentColor}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ——— Marco de la app ——— */
.app{position:relative; height:100%; max-width:560px; margin:0 auto; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); isolation:isolate}
.desk-note{display:none}
@media (min-width:820px) and (min-height:640px){
  body{background:var(--desk); display:flex; align-items:center; justify-content:center; gap:56px}
  .app{width:400px; height:min(860px, calc(100% - 48px)); margin:0; border-radius:44px; border:1px solid var(--line);
    box-shadow:0 30px 90px var(--shadow), 0 0 0 10px var(--surface2); flex:none}
  .desk-note{display:flex; flex-direction:column; gap:14px; max-width:300px; color:var(--ink2); font-size:.9375rem; line-height:1.5}
  .desk-note h2{margin:0; color:var(--ink); font:700 1.75rem/1.1 var(--f-disp); letter-spacing:-.02em; text-wrap:balance}
  .desk-note p{margin:0}
  .desk-note .kbd{font:500 .8125rem var(--f-mono); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1px 6px}
}
.views{position:relative; flex:1; min-height:0}
.view{position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg)}

/* ——— Barra superior ——— */
.nav{position:relative; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:48px;
  padding-left:max(8px, env(safe-area-inset-left, 0px)); padding-right:max(8px, env(safe-area-inset-right, 0px));
  background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px);
  border-bottom:1px solid transparent; transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .l,.nav .r{display:flex; align-items:center; gap:2px}
.nav .r{justify-content:flex-end}
.nav .t{font-weight:600; font-size:1.0625rem; opacity:0; transition:opacity .18s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw}
.nav.scrolled .t,.nav .t.on{opacity:1}
.nbtn{display:inline-flex; align-items:center; gap:4px; min-width:44px; min-height:44px; padding:0 8px; border-radius:10px; color:var(--accent); font-size:1.0625rem}
.nbtn:active{background:var(--press)}
.nbtn.strong{font-weight:600}
.nbtn[disabled]{opacity:.35; pointer-events:none}

.scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain}
.big{padding:2px var(--gr) 10px var(--gl); display:flex; flex-direction:column; gap:10px}
.big h1{margin:0; font:700 2.125rem/1.08 var(--f-disp); letter-spacing:-.025em; text-wrap:balance}
.big .sub{color:var(--ink3); font-size:.875rem; margin-top:-6px}
.ptr{height:0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; color:var(--ink3); font-size:.8125rem; transition:height .25s var(--ease)}
.ptr.on{height:40px}
.spin{width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Control segmentado */
.seg{display:flex; background:var(--surface2); border-radius:10px; padding:2px; gap:2px}
.seg button{flex:1; min-height:32px; border-radius:8px; font-size:.8125rem; font-weight:500; color:var(--ink2); white-space:nowrap; padding:0 6px}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px var(--shadow)}

/* ——— Lista ——— */
.list{background:var(--bg)}
.banner{display:flex; align-items:center; gap:12px; margin:2px var(--gr) 8px var(--gl); padding:10px 12px; border-radius:14px;
  background:var(--accent-soft); color:var(--ink); text-align:left; width:calc(100% - var(--gl) - var(--gr))}
.banner .ic{color:var(--accent)}
.banner b{display:block; font-weight:600; font-size:.9375rem}
.banner span{font-size:.8125rem; color:var(--ink2)}
.banner .go{margin-left:auto; color:var(--accent)}
.row{position:relative; overflow:hidden; background:var(--swipe-c, #9A968E)}
.row-bg{position:absolute; inset:0; display:flex; align-items:center; color:#fff; font-weight:600; font-size:.875rem; padding:0 22px; transition:background-color .15s}
.row-bg.r{justify-content:flex-start}
.row-bg.l{justify-content:flex-end}
.row-bg .act{display:flex; flex-direction:column; align-items:center; gap:3px; transition:transform .15s var(--ease)}
.row-bg .act.pop{transform:scale(1.12)}
.row-fg{position:relative; display:grid; grid-template-columns:40px 1fr; gap:12px; padding:11px var(--gr) 11px var(--gl);
  background:var(--bg); touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:default; will-change:transform}
.row-fg::after{content:""; position:absolute; left:calc(var(--gl) + 52px); right:0; bottom:0; height:1px; background:var(--line)}
.row-fg:active,.row-fg.pressed{background:var(--press)}
.row-fg.current{background:var(--sel)}
.dot{position:absolute; left:calc(var(--gl) - 12px); top:24px; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:600; font-size:.875rem; letter-spacing:.02em;
  background:linear-gradient(145deg, var(--a), var(--b)); flex:none; text-shadow:0 1px 1px rgba(0,0,0,.18)}
.av.co{border-radius:11px}
.av.lg{width:44px; height:44px; font-size:1rem}
.rm{min-width:0; display:flex; flex-direction:column; gap:1px}
.l1{display:flex; align-items:center; gap:6px; min-width:0}
.from{font-weight:500; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.unread .from{font-weight:700}
.when{margin-left:auto; flex:none; color:var(--ink3); font-size:.8125rem; font-variant-numeric:tabular-nums}
.unread .when{color:var(--accent); font-weight:600}
.mk{width:9px; height:9px; flex:none; background:transparent; box-shadow:inset 0 0 0 2px var(--c)} /* hueco: no se confunde con el punto de sin leer */
.mk.circle{border-radius:50%}
.mk.square{border-radius:2px}
.mk.diamond{transform:rotate(45deg) scale(.85); border-radius:1px}
.l2{display:flex; align-items:center; gap:6px; min-width:0}
.subj{font-size:.9375rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1}
.unread .subj{font-weight:600}
.l2 .ic{color:var(--ink3)}
.l2 .ic.star{color:#C99A0E}
.l3{color:var(--ink2); font-size:.875rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tag{display:inline-flex; align-items:center; gap:4px; font-size:.75rem; font-weight:600; padding:1px 7px; border-radius:6px; background:var(--surface2); color:var(--ink2); flex:none}
.tag.warn{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn)}
.tag.danger{background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger)}
.tag.acc{background:var(--accent-soft); color:var(--accent)}
.empty{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:64px var(--gr) 24px var(--gl); color:var(--ink3)}
.empty .ic{width:40px; height:40px; stroke-width:1.4}
.empty b{color:var(--ink); font-size:1.0625rem}
.list-end{height:96px}

/* Botón de redactar */
.fab{position:absolute; right:max(18px, calc(env(safe-area-inset-right, 0px) + 12px)); bottom:16px; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 24px var(--shadow); z-index:5; transition:transform .15s}
.fab:active{transform:scale(.94)}

/* ——— Pestañas ——— */
.tabs{display:grid; grid-template-columns:repeat(3,1fr); height:var(--tabh); background:var(--bar); border-top:1px solid var(--line);
  padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); position:relative; z-index:6; flex:none}
.tab{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--ink3); font-size:.6875rem; font-weight:500; position:relative}
.tab[aria-selected="true"]{color:var(--accent)}
.tab .badge{position:absolute; top:5px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:.6875rem; font-weight:700; display:grid; place-items:center; font-variant-numeric:tabular-nums}

/* ——— Lector ——— */
.reader{position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; background:var(--bg); transform:translateX(100%); transition:transform .32s var(--ease); box-shadow:-10px 0 30px var(--shadow)}
.reader.open{transform:none}
.reader.drag{transition:none}
.r-head{padding:6px var(--gr) 12px var(--gl); display:flex; flex-direction:column; gap:12px}
.r-subj{margin:0; font:650 1.375rem/1.2 var(--f-disp); letter-spacing:-.015em; text-wrap:balance}
.r-from{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center}
.r-from .who{min-width:0}
.r-from .who b{display:flex; align-items:center; gap:6px; font-weight:600}
.r-from .who span{display:block; color:var(--ink3); font-size:.8125rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.r-from .who b > span{display:inline; color:var(--ink); font-size:1rem}
.r-from .date{color:var(--ink3); font-size:.8125rem; text-align:right; font-variant-numeric:tabular-nums}
.note{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:var(--surface2); font-size:.875rem; line-height:1.4}
.note .ic{flex:none; margin-top:-1px}
.note b{font-weight:600}
.note .acts{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.note.danger{background:color-mix(in srgb, var(--danger) 13%, var(--surface)); color:var(--ink)}
.note.danger .ic{color:var(--danger)}
.note.info .ic{color:var(--accent)}
.note.quiet{background:transparent; padding:0 2px; color:var(--ink3); font-size:.8125rem; align-items:center}
.note .lnk{color:var(--accent); font-weight:600; margin-left:auto; white-space:nowrap}
.pill{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 14px; border-radius:18px; background:var(--surface); border:1px solid var(--line); font-size:.875rem; font-weight:600; color:var(--ink)}
.pill.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.pill.bad{color:var(--danger)}
.pill:active{filter:brightness(.95)}
.atts{display:flex; gap:8px; overflow-x:auto; padding:0 var(--gr) 4px var(--gl); scrollbar-width:none}
.att{display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:12px; background:var(--surface); border:1px solid var(--line); flex:none; max-width:240px; text-align:left}
.att .ft{width:34px; height:40px; border-radius:6px; display:grid; place-items:center; font:700 .625rem var(--f-ui); color:#fff; background:var(--c, #8A8F94); letter-spacing:.04em}
.att img{width:52px; height:40px; border-radius:6px; object-fit:cover}
.att b{display:block; font-size:.8125rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px}
.att span{font-size:.75rem; color:var(--ink3)}
.r-body{padding:4px var(--gr) 8px var(--gl)}
.r-body iframe{display:block; width:100%; border:0; height:120px; background:transparent}
.r-body.htmlmail iframe{background:#fff; border-radius:14px; box-shadow:0 0 0 1px var(--line)}
.suggest{padding:10px var(--gr) 24px var(--gl); display:flex; flex-direction:column; gap:10px}
.suggest .lbl{font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:18px; background:var(--surface); border:1px solid var(--line); font-size:.875rem; text-align:left}
.chip.ai{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:600}
.r-tools{display:grid; grid-template-columns:repeat(5,1fr); height:var(--tabh); background:var(--bar); border-top:1px solid var(--line); flex:none;
  padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px)}
.r-tools button{display:grid; place-items:center; color:var(--accent)}
.r-tools button:active{background:var(--press)}

/* ——— Hojas ——— */
.backdrop{position:absolute; inset:0; z-index:40; background:var(--backdrop); opacity:0; transition:opacity .25s}
.backdrop.on{opacity:1}
.sheet{position:absolute; left:0; right:0; bottom:0; z-index:41; max-height:88%; display:flex; flex-direction:column; background:var(--surface);
  border-radius:18px 18px 0 0; box-shadow:0 -10px 40px var(--shadow); transform:translateY(100%); transition:transform .3s var(--ease)}
.sheet.on{transform:none}
.sheet .grab{width:38px; height:5px; border-radius:3px; background:var(--line); margin:8px auto 2px; flex:none}
.sheet .sh-t{padding:6px var(--gr) 4px var(--gl); display:flex; flex-direction:column; gap:2px}
.sheet .sh-t b{font-size:1.0625rem; font-weight:650}
.sheet .sh-t span{font-size:.8125rem; color:var(--ink3)}
.sheet .sh-b{overflow-y:auto; padding:6px 0 calc(14px + env(safe-area-inset-bottom, 0px)); overscroll-behavior:contain}
.si{display:flex; align-items:center; gap:14px; width:100%; min-height:52px; padding:8px var(--gr) 8px var(--gl); text-align:left; font-size:1rem}
.si:active{background:var(--press)}
.si .ic{color:var(--accent)}
.si.bad,.si.bad .ic{color:var(--danger)}
.si .tx{min-width:0; flex:1}
.si .tx small{display:block; color:var(--ink3); font-size:.8125rem}
.si .end{margin-left:auto; color:var(--ink3); font-size:.875rem; font-variant-numeric:tabular-nums}
.si .end.ok{color:var(--accent)}
.sh-sep{height:8px; background:var(--bg); margin:6px 0}
.sh-pad{padding:6px var(--gr) 6px var(--gl); display:flex; flex-direction:column; gap:12px}
.sh-pad p{margin:0; color:var(--ink2); font-size:.9375rem; line-height:1.5}
.sh-pad .row2{display:flex; gap:10px}
.sh-pad .row2 > *{flex:1}
.bigbtn{min-height:50px; border-radius:14px; font-weight:600; font-size:1rem; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; gap:8px}
.bigbtn.sec{background:var(--surface2); color:var(--ink)}
.bigbtn.bad{background:var(--surface2); color:var(--danger)}
.linkbox{font:500 .875rem/1.4 var(--f-mono); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; word-break:break-all; user-select:text; -webkit-user-select:text}
.linkbox mark{background:color-mix(in srgb, var(--danger) 18%, transparent); color:inherit; border-radius:3px; padding:0 2px}

/* Cajón de bandejas */
.drawer{position:absolute; top:0; bottom:0; left:0; z-index:41; width:min(86%, 340px); background:var(--surface); box-shadow:10px 0 40px var(--shadow);
  transform:translateX(-102%); transition:transform .3s var(--ease); display:flex; flex-direction:column}
.drawer.on{transform:none}
.drawer h2{margin:0; padding:16px var(--gr) 8px var(--gl); font:700 1.625rem/1.1 var(--f-disp); letter-spacing:-.02em}
.drawer .scroll{padding-bottom:20px}
.dgroup{padding:14px var(--gr) 4px var(--gl); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
.di{display:flex; align-items:center; gap:14px; width:100%; min-height:46px; padding:0 var(--gr) 0 var(--gl); text-align:left; font-size:1rem}
.di:active{background:var(--press)}
.di[aria-current="true"]{background:var(--sel); font-weight:600}
.di .ic{color:var(--accent)}
.di .cnt{margin-left:auto; min-width:24px; height:22px; padding:0 7px; border-radius:11px; display:grid; place-items:center; font-size:.75rem; font-weight:700; background:var(--accent-soft); color:var(--accent); font-variant-numeric:tabular-nums}
.di .cnt.dim{background:transparent; color:var(--ink3); font-weight:500}

/* ——— Redactar ——— */
.compose{position:absolute; inset:0; z-index:30; background:var(--surface); display:flex; flex-direction:column; transform:translateY(102%); transition:transform .32s var(--ease)}
.compose.on{transform:none}
.compose .nav{background:var(--surface)}
.fld{display:flex; align-items:center; gap:8px; min-height:48px; padding:4px var(--gr) 4px var(--gl); border-bottom:1px solid var(--line)}
.fld > label,.fld > .k{color:var(--ink3); font-size:.9375rem; flex:none; min-width:42px}
.fld input{flex:1; min-width:80px; border:0; background:transparent; outline:none; font-size:max(16px, 1rem); padding:8px 0}
.fld .from-btn{display:flex; align-items:center; gap:6px; min-height:40px; text-align:left; flex:1; min-width:0}
.fld .from-btn span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rcpt{flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; padding:4px 0}
.rc{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 6px 0 10px; border-radius:15px; background:var(--accent-soft); color:var(--accent); font-size:.875rem; font-weight:500; max-width:100%}
.rc span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rc.bad{background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger)}
.rc button{display:grid; place-items:center; width:22px; height:22px; border-radius:50%}
.subj-in{background:var(--bg) !important; border-radius:10px; padding:8px 10px !important}
.subj-in:focus{background:var(--accent-soft) !important}
.sugg{border-bottom:1px solid var(--line); max-height:220px; overflow-y:auto}
.sugg .si{min-height:48px}
.c-body{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column}
.c-body textarea{flex:1; min-height:180px; border:0; outline:none; resize:none; background:transparent; padding:14px var(--gr) 8px var(--gl); font-size:max(16px, 1rem); line-height:1.5}
.sig{margin:0 var(--gr) 10px var(--gl); padding:10px 12px; border-radius:12px; background:var(--bg); font-size:.875rem; color:var(--ink2); white-space:pre-wrap; display:flex; flex-direction:column; gap:6px}
.sig .sig-h{display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--ink3)}
.sig .sig-h button{color:var(--accent); font-weight:600; margin-left:auto}
.quote{margin:0 var(--gr) 10px var(--gl); padding:8px 12px; border-left:3px solid var(--line); color:var(--ink3); font-size:.875rem; white-space:pre-wrap; max-height:180px; overflow:hidden; position:relative}
.c-tools{display:flex; gap:8px; padding:8px var(--gr) 14px var(--gl); flex-wrap:wrap}
.c-atts{display:flex; gap:8px; flex-wrap:wrap; padding:0 var(--gr) 8px var(--gl)}
.c-warn{margin:8px var(--gr) 0 var(--gl)}

/* ——— Avisos ——— */
.app.fab-on .toasts{bottom:calc(var(--tabh) + 86px)}
.toasts{position:absolute; left:0; right:0; bottom:calc(var(--tabh) + 12px); z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 var(--gr) 0 var(--gl)}
.toast{pointer-events:auto; display:flex; align-items:center; gap:12px; min-height:46px; padding:6px 8px 6px 16px; border-radius:14px; background:var(--ink); color:var(--bg);
  box-shadow:0 10px 30px var(--shadow); font-size:.9375rem; max-width:100%; animation:tin .28s var(--ease)}
.toast button{color:var(--accent-soft); font-weight:700; padding:8px 10px; border-radius:10px; white-space:nowrap}
.toast.out{opacity:0; transform:translateY(8px); transition:all .2s}
@keyframes tin{from{opacity:0; transform:translateY(10px) scale(.98)}}
.sendbar{pointer-events:auto; width:100%; border-radius:14px; background:#1E2226; color:#F2EFE8; box-shadow:0 10px 30px var(--shadow); overflow:hidden; animation:tin .28s var(--ease)}
.sendbar .in{display:flex; align-items:center; gap:12px; padding:10px 8px 10px 14px}
.sendbar .tx{min-width:0; flex:1}
.sendbar .tx b{display:block; font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sendbar .tx span{font-size:.8125rem; color:#B9BDC0; font-variant-numeric:tabular-nums}
.sendbar button{background:#F2EFE8; color:#1E2226; font-weight:700; font-size:.875rem; padding:0 14px; min-height:38px; border-radius:10px; white-space:nowrap}
.sendbar .bar{height:3px; background:#6CB8C4; transform-origin:left; transition:transform linear}

/* ——— Hoy, Buscar, Ajustes ——— */
.sec-h{display:flex; align-items:baseline; gap:8px; padding:18px var(--gr) 8px var(--gl)}
.sec-h b{font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3)}
.sec-h span{margin-left:auto; font-size:.8125rem; color:var(--ink3)}
.card{margin:0 var(--gr) 0 var(--gl); background:var(--surface); border-radius:16px; border:1px solid var(--line); overflow:hidden}
.ci{display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 14px; text-align:left; border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci:active{background:var(--press)}
.ci .tx{min-width:0; flex:1}
.ci .tx b{display:block; font-weight:600; font-size:.9375rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ci .tx span{display:block; font-size:.8125rem; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ci .end{flex:none; color:var(--ink3); font-size:.8125rem; text-align:right; font-variant-numeric:tabular-nums}
.ci .ic.lead{color:var(--accent)}
.ci .mini{font-size:.8125rem; font-weight:600; color:var(--accent); padding:6px 10px; border-radius:8px; background:var(--accent-soft); flex:none}
.today-date{color:var(--accent); font-weight:600; font-size:.875rem; text-transform:capitalize}
.calm{margin:0 var(--gr) 0 var(--gl); padding:14px; border-radius:16px; border:1px dashed var(--line); color:var(--ink3); font-size:.875rem; text-align:center}

.searchbox{display:flex; align-items:center; gap:8px; margin:0 var(--gr) 0 var(--gl); padding:0 10px; min-height:42px; border-radius:12px; background:var(--surface2)}
.searchbox .ic{color:var(--ink3)}
.searchbox input{flex:1; border:0; outline:none; background:transparent; font-size:max(16px, 1rem); min-width:0; padding:8px 0}
.searchbox button{color:var(--ink3); display:grid; place-items:center; width:30px; height:30px}
.interp{display:flex; gap:6px; flex-wrap:wrap; padding:10px var(--gr) 0 var(--gl)}
.interp .chip{min-height:30px; font-size:.8125rem; padding:0 10px; background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:600}
.hint{padding:8px var(--gr) 0 var(--gl); color:var(--ink3); font-size:.8125rem}

.cell{display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:8px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:1rem}
.cell:last-child{border-bottom:0}
.cell .tx{min-width:0; flex:1}
.cell .tx small{display:block; font-size:.8125rem; color:var(--ink3); line-height:1.35}
.cell .val{color:var(--ink3); font-size:.9375rem; text-align:right}
.cell select{appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--accent); font-size:max(16px,.9375rem); text-align:right; padding:6px 0; max-width:55%}
.cell.col{flex-direction:column; align-items:stretch}
.foot{padding:8px var(--gr) 0 var(--gl); font-size:.8125rem; color:var(--ink3); line-height:1.45}
.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:4px 0}
.sw{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.75rem; color:var(--ink2)}
.sw i{width:48px; height:48px; border-radius:14px; border:1px solid var(--line); background:linear-gradient(135deg, var(--s1) 0 55%, var(--s2) 55% 100%); position:relative}
.sw i::after{content:""; position:absolute; right:7px; bottom:7px; width:12px; height:12px; border-radius:50%; background:var(--s3)}
.sw[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}
.sw[aria-pressed="true"]{color:var(--accent); font-weight:600}
.range{display:flex; align-items:center; gap:12px}
.range input{flex:1; accent-color:var(--accent)}
.range output{min-width:48px; text-align:right; color:var(--ink2); font-variant-numeric:tabular-nums}
.tgl{appearance:none; -webkit-appearance:none; width:51px; height:31px; border-radius:16px; background:var(--surface2); border:1px solid var(--line); position:relative; flex:none; transition:background .2s; cursor:pointer; margin:0}
.tgl::after{content:""; position:absolute; top:2px; left:2px; width:25px; height:25px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.25); transition:transform .2s var(--ease)}
.tgl:checked{background:var(--ok); border-color:var(--ok)}
.tgl:checked::after{transform:translateX(20px)}
.gesture{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:4px 0}
.gesture .gside{display:flex; flex-direction:column; gap:8px}
.gesture .gside > b{font-size:.75rem; color:var(--ink3); font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.gdraw{height:34px; border-radius:8px; overflow:hidden; display:flex; background:var(--bg); border:1px solid var(--line)}
.gdraw i{display:grid; place-items:center; color:#fff}
.gdraw i .ic{width:16px; height:16px}
.gsel{display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--ink2)}
.gsel select{flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:6px 8px; font-size:max(16px,.875rem); color:var(--ink)}
textarea.edit{width:100%; box-sizing:border-box; min-height:96px; border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:10px 12px; font-size:max(16px,.9375rem); line-height:1.45; resize:vertical; outline:none}
textarea.edit:focus{border-color:var(--accent)}
input.edit{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:10px 12px; font-size:max(16px,.9375rem); outline:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ——— Vela web: pantalla completa y entrada ——— */
html{box-sizing:border-box; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
[hidden]{display:none !important}
.gate{position:fixed; inset:0; z-index:100; background:var(--bg); overflow-y:auto; display:flex; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
.gate-in{margin:auto; width:100%; max-width:420px; box-sizing:border-box; padding:28px max(20px, env(safe-area-inset-right, 0px)) 36px max(20px, env(safe-area-inset-left, 0px)); display:flex; flex-direction:column; gap:14px}
.gate .mark{width:64px; height:64px; border-radius:16px; box-shadow:0 6px 20px var(--shadow)}
.gate h1{margin:4px 0 0; font:700 1.75rem/1.15 var(--f-disp); letter-spacing:-.02em; text-wrap:balance}
.gate p{margin:0; color:var(--ink2); font-size:.9375rem; line-height:1.5}
.gate a{color:var(--accent); font-weight:600}
.gate .err{color:var(--danger); font-weight:500}
.gate .bigbtn{width:100%}
.gate .card{margin:0}
.big-in{font-size:max(16px, 1.0625rem) !important; padding:13px 14px !important; border-radius:12px !important; background:var(--surface) !important}
.big-in[readonly]{color:var(--ink3)}
.codebox{font:600 1.25rem/1.35 var(--f-mono); letter-spacing:.06em; text-align:center; padding:16px; border-radius:14px; background:var(--surface); border:1px dashed var(--line); user-select:all; -webkit-user-select:all; word-break:break-all}
.bigbtn[disabled]{opacity:.55}
.bigbtn .spin{border-color:color-mix(in srgb, currentColor 35%, transparent); border-top-color:currentColor; margin:0 4px 0 0}
a.bigbtn{text-decoration:none}
.r-from .who b > span{display:inline; color:var(--ink); font-size:1rem}

/* ——— Ajustes: nada se corta en pantallas angostas ni con la letra grande ——— */
.cell{box-sizing:border-box; flex-wrap:wrap; row-gap:6px}
.cell > .ic, .cell > .pill, .cell > .tgl{flex:none}
.cell .tx{flex:1 1 9.5em; overflow-wrap:anywhere}
.cell select{flex:0 1 auto; min-width:0; max-width:100%; margin-left:auto}
.cell.col{flex-wrap:nowrap}
.cell.col .tx{flex:none}
.swatches{grid-template-columns:repeat(auto-fill, minmax(4.2em, 1fr))}
.sw{min-width:0; text-align:center; overflow-wrap:anywhere}
.gesture{grid-template-columns:repeat(auto-fit, minmax(min(100%, 10em), 1fr))}
.gesture .gside, .gsel{min-width:0}
.seg{flex-wrap:wrap}
.seg button{flex:1 1 auto; min-width:0}
.range output{flex:none}

/* ——— Lector: el marco nunca se ensancha más que la pantalla (Safari en iPhone lo agranda según el contenido) ——— */
.r-body iframe{width:1px; min-width:100%; max-width:100%}

/* ——— Avatares: logo o foto encima de las iniciales (si no hay, quedan las iniciales) ——— */
.av{position:relative; overflow:hidden}
.av-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; opacity:0; transition:opacity .2s}
.av-img.ok{opacity:1}
.sigprev iframe{display:block; width:100%; border:0; height:120px; border-radius:12px; background:#FFFEFB}

/* Reglas de carpetas */
.rlbl{font-size:.8125rem; font-weight:600; color:var(--ink3); margin-bottom:-4px}
.rconds{display:flex; flex-direction:column; gap:8px}
.rcond{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px; border-radius:12px; background:var(--surface2)}
.rcond select{min-height:40px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); padding:0 8px; font-size:max(16px,.9375rem)}
.rcond .rc-k{font-size:.875rem; color:var(--ink3)}
.rcond .rc-x{margin-left:auto; min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink3); border-radius:10px}
.rcond input.edit{flex:1 1 100%; min-width:0}
.rrow{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-size:.9375rem}
.rrow span{flex:1; min-width:0}
select.edit{width:100%; box-sizing:border-box; min-height:46px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); padding:0 10px; font-size:max(16px,.9375rem)}
.rnew{display:flex; gap:8px; align-items:center}
.rnew input{flex:1; min-width:0}
.seg button{white-space:normal; line-height:1.2; padding:6px}

/* Filas de tarjeta (Hoy, Programados, Pospuestos): hasta dos renglones en lugar de cortar con "…" */
.ci .tx b, .ci .tx span{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere}
.ci .end{flex:0 1 auto; max-width:42%; overflow-wrap:anywhere}

/* Títulos de la barra y "De" del redactor: con letra grande pasan a dos renglones en lugar de cortarse */
.nav .t{white-space:normal; text-align:center; line-height:1.15; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere}
.fld .from-btn #c-from{flex:1; min-width:0}
.fld .from-btn #c-from span{white-space:normal; overflow-wrap:anywhere}

/* Paneles cerrados sin sombra: el lector (a la derecha) y el menú (a la izquierda) asomaban como una franja gris */
.reader{box-shadow:none}
.reader.open,.reader.drag{box-shadow:-10px 0 30px var(--shadow)}
.drawer{box-shadow:none}
.drawer.on{box-shadow:10px 0 40px var(--shadow)}

/* Respuesta rápida: barra al pie del lector, como en la Mac */
.qrb{flex:none; padding:8px var(--gr) 8px var(--gl); background:var(--bar); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.qrb-h{font-size:.75rem; color:var(--ink3); min-width:0; overflow-wrap:anywhere}
.qrb-h b{font-weight:600; color:var(--ink2)}
.qrb-row{display:flex; align-items:flex-end; gap:6px}
.qrb textarea{flex:1; min-width:0; min-height:40px; max-height:132px; box-sizing:border-box; border:1px solid var(--line); border-radius:20px; background:var(--bg); color:var(--ink); padding:9px 14px; font:inherit; font-size:max(16px,.9375rem); line-height:1.35; resize:none; outline:none; overflow-y:auto}
.qrb textarea:focus{border-color:var(--accent)}
.qrb-ic,.qrb-send{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center}
.qrb-ic{color:var(--accent)}
.qrb-send{background:var(--accent); color:var(--accent-ink)}
.qrb button:disabled{opacity:.45}
.reader.typing .r-tools{display:none}
/* Encabezado del correo: "para … · carpeta" pasa al renglón de abajo en lugar de cortarse */
.r-from .who > span{white-space:normal; overflow-wrap:anywhere; text-overflow:clip}

/* Buscar: personas y correos mientras escribís */
.sres-h{padding:14px var(--gr) 6px var(--gl); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
.people{display:flex; gap:8px; overflow-x:auto; padding:2px var(--gr) 6px var(--gl); scrollbar-width:none; -webkit-overflow-scrolling:touch}
.people::-webkit-scrollbar{display:none}
.person{flex:none; display:flex; align-items:center; gap:8px; max-width:240px; padding:6px 12px 6px 6px; border-radius:24px; background:var(--surface); border:1px solid var(--line); text-align:left}
.person .av{width:32px; height:32px; font-size:.75rem}
.person .tx{min-width:0; display:flex; flex-direction:column}
.person b{font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.person small{font-size:.75rem; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Mientras llega el correo: lo que ya se sabe (el comienzo) y un indicador */
.r-wait{padding:6px 0 30px; color:var(--ink3); display:flex; flex-direction:column; align-items:center; gap:18px}
.r-wait p{margin:0; align-self:stretch; font-size:1rem; line-height:1.55; color:var(--ink2); white-space:pre-line; overflow-wrap:anywhere}
.r-wait .spin{margin:0}

/* Pospuestos y programados, a la vista desde la Entrada */
.pend{display:flex; flex-wrap:wrap; gap:8px; margin-top:-2px}
.pend[hidden]{display:none}
.pd{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:16px; font-size:.8125rem; font-weight:600; max-width:100%}
.pd span{white-space:normal; text-align:left}
.pd.sn{background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn)}
.pd.sc{background:var(--accent-soft); color:var(--accent)}
.pd.sc.bad{background:color-mix(in srgb, var(--danger) 13%, transparent); color:var(--danger)}
.pd:active{filter:brightness(.92)}
.nbtn.has-pend{position:relative}
.nbtn.has-pend::after{content:""; position:absolute; top:9px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 2px var(--bar)}