@font-face {
  font-family: "Outfit Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts-o/outfit-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}

/* Base = tema TOPSA (sigue el modo claro/oscuro del sistema). Los demás temas están al final. */
:root {
  color-scheme: light dark;
  --bg: #F7F5F1;
  --panel: #FFFFFF;
  --ink: #111111;
  --ink-2: #5E5A54;
  --ink-3: #8F8A82;
  --line: #E6E1D9;
  --hover: #EFEBE4;
  --accent: #FF6A00;
  --accent-ink: #111111;
  --accent-2: var(--accent);
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --side: #111111;
  --side-2: #1B1B1B;
  --side-3: #242424;
  --side-line: #262626;
  --side-ink: #FFFFFF;
  --side-mute: #C9C4BC;
  --side-dim: #8A857E;
  --danger: #B3261E;
  --mix: #FFFFFF;
  --body-bg: #FFFFFF;
  --body-pad: 26px 28px;
  --body-line: var(--line);
  --body-shadow: var(--shadow);
  --shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 10px 28px rgba(17, 17, 17, .07);
  --shadow-lg: 0 2px 6px rgba(17, 17, 17, .06), 0 28px 70px rgba(17, 17, 17, .16);
  --side-w: 272px;
  --tb: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151515; --panel: #1D1D1D; --ink: #F2F2F2; --ink-2: #B3AEA6; --ink-3: #7D7871; --line: #2A2A2A; --hover: #222222;
    --side: #0B0B0B; --side-2: #171717; --side-3: #222222; --side-line: #222222; --danger: #F2847C; --mix: #1D1D1D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 70px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 "Inter Variable", Inter, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background .35s, color .35s;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }
[data-ic], .ic { display: inline-flex; }
[data-ic] svg, .ic svg { width: 19px; height: 19px; stroke-width: 1.7; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.app { display: grid; grid-template-columns: var(--side-w) minmax(340px, 440px) 1fr; grid-template-rows: minmax(0, 1fr); height: calc(100dvh - var(--tb)); margin-top: var(--tb); transition: grid-template-columns .3s var(--ease); }
.app > * { min-height: 0; }

/* Avatar redondo en tono pastel; --c es el color de la persona o de la cuenta. */
.av {
  --c: #8A5A2B;
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  color: color-mix(in srgb, var(--c) 72%, var(--ink)); background: color-mix(in srgb, var(--c) 24%, var(--mix));
}

/* ---------- barra lateral ---------- */
.side { background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; padding: 18px 14px 12px; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--side-line); transition: background .35s; }
.side > * { animation: rise .5s var(--ease) both; }
.side > :nth-child(2) { animation-delay: 40ms; }
.side > :nth-child(3) { animation-delay: 80ms; }
.side > :nth-child(4) { animation-delay: 120ms; }
.side > :nth-child(5) { animation-delay: 160ms; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; letter-spacing: -.02em; padding: 2px 6px 18px; }
.brand.dark { color: var(--ink); padding: 0 0 6px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.brand-mark svg { width: 19px; height: 19px; stroke-width: 2; }
.btn-compose {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  background: var(--grad); color: var(--accent-ink); font-weight: 600; font-size: 15px;
  height: 50px; border-radius: 12px; margin: 0 0 18px;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: transform .18s var(--spring), box-shadow .2s, filter .2s;
}
.btn-compose::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn-compose:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-compose:hover::after { transform: translateX(120%); }
.btn-compose:active { transform: scale(.97); }
.folders { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; border-bottom: 1px solid var(--side-line); }
.nav {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  height: 44px; padding: 0 12px; border-radius: 10px; color: var(--side-mute); font-size: 15px;
  transition: background .18s, color .18s, transform .18s var(--ease);
}
.nav:hover { background: var(--side-2); color: var(--side-ink); }
.nav:active { transform: scale(.985); }
.nav.on { background: var(--side-3); color: var(--side-ink); font-weight: 600; }
.nav .ic { transition: transform .3s var(--spring); }
.nav.on .ic { transform: scale(1.06); }
.nav .grow, .acc .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { min-width: 24px; padding: 2px 7px; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; color: var(--side-mute); }
.nav.on .count, .acc.on .count { background: color-mix(in srgb, var(--side-ink) 12%, transparent); color: var(--side-ink); }
.bump { animation: bump .45s var(--spring); }
.side-label { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--side-dim); padding: 16px 12px 8px; }
.side-label button { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--side-dim); transition: background .15s, color .15s, transform .25s var(--spring); }
.side-label button:hover { background: var(--side-2); color: var(--side-ink); transform: rotate(90deg); }
.accounts { display: flex; flex-direction: column; gap: 2px; }
.acc { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; color: var(--side-mute); transition: background .18s, transform .18s var(--ease); }
.acc:hover { background: var(--side-2); }
.acc:active { transform: scale(.985); }
.acc.on { background: var(--side-3); }
.acc .av { width: 42px; height: 42px; font-size: 14px; background: color-mix(in srgb, var(--c) 34%, color-mix(in srgb, var(--side-ink) 16%, var(--side))); color: color-mix(in srgb, var(--c) 55%, var(--side-ink)); transition: transform .3s var(--spring), box-shadow .3s; }
.acc.on .av { transform: scale(1.06); box-shadow: 0 0 0 2px var(--side-3), 0 0 0 4px color-mix(in srgb, var(--c) 60%, transparent); }
.acc b { display: block; font-weight: 550; font-size: 14.5px; color: var(--side-ink); overflow: hidden; text-overflow: ellipsis; }
.acc small { display: block; font-size: 12px; color: var(--side-dim); overflow: hidden; text-overflow: ellipsis; }
.acc .warn { color: var(--danger); }
.side-foot { margin-top: auto; padding-top: 14px; }
.side-link { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; border-radius: 10px; color: var(--side-mute); width: 100%; font-size: 15px; transition: background .18s, color .18s; }
.side-link:hover { background: var(--side-2); color: var(--side-ink); }
.side-link:hover .ic { transform: rotate(60deg); }
.side-link .ic { transition: transform .5s var(--ease); }
.scrim { display: none; }

/* ---------- lista ---------- */
.list { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.list-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px 6px 20px; }
.search { flex: 1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: var(--hover); border: 1px solid transparent; border-radius: 14px; color: var(--ink-3); transition: border-color .2s, box-shadow .25s, background .2s; }
.search:focus-within { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 15px; }
.search input::-webkit-search-cancel-button { display: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; transition: background .15s, color .15s, transform .18s var(--spring); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { transform: scale(.88); }
.icon-btn[disabled] { opacity: .3; pointer-events: none; }
.icon-btn.on { color: #E0A106; }
.icon-btn.on svg { fill: currentColor; animation: bump .45s var(--spring); }
.icon-btn.spin svg { animation: spin .8s linear infinite; }
.tabs { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 20px; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; height: 44px; padding: 0 10px; color: var(--ink-2); font-size: 14.5px; transition: color .2s; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); font-weight: 600; }
.tabs button::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ease); }
.tabs button.on::after { transform: scaleX(1); }
.tabs .sub { margin-left: auto; min-width: 0; padding-left: 8px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows { flex: 1; overflow-y: auto; padding: 0 10px 28px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.day { position: sticky; top: 0; z-index: 1; font-size: 14.5px; font-weight: 500; color: var(--ink-2); padding: 14px 12px 8px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); }
.row {
  position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  padding: 13px 12px; border-radius: 12px; color: var(--ink-2);
  transition: background .16s, transform .2s var(--ease);
}
.row + .row::after { content: ""; position: absolute; left: 70px; right: 12px; top: 0; height: 1px; background: var(--line); transition: opacity .15s; }
.row:hover::after, .row.sel::after, .row:hover + .row::after, .row.sel + .row::after { opacity: 0; }
.rows.enter .row, .rows.enter .day { animation: rowIn .42s var(--ease) both; animation-delay: calc(min(var(--i, 0), 14) * 24ms); }
.row:hover { background: color-mix(in srgb, var(--hover) 60%, transparent); }
.row:active { transform: scale(.994); }
.row.sel { background: var(--hover); }
.row.fresh { animation: fresh 2.2s var(--ease); }
.row.out { transition: height .24s var(--ease), opacity .18s, transform .24s var(--ease), padding .24s var(--ease); height: 0 !important; opacity: 0; transform: translateX(-32px); padding-top: 0; padding-bottom: 0; overflow: hidden; }
.row.unread::before { content: ""; position: absolute; left: 1px; top: 31px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.accdot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--bg); }
.row.sel .accdot { box-shadow: 0 0 0 2.5px var(--hover); }
.row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row .top, .row .mid { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 15.5px; font-weight: 500; }
.row .when { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .15s; }
.row .subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; }
.row.unread .who, .row.unread .subj { font-weight: 700; }
.row .snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 13.5px; padding-right: 30px; min-height: 19px; }
.row .marks { display: inline-flex; gap: 6px; color: var(--ink-3); }
.row .marks svg { width: 15px; height: 15px; }
.starb { display: inline-flex; color: var(--ink-3); border-radius: 6px; transition: color .15s, transform .2s var(--spring); }
.starb svg { width: 18px; height: 18px; }
.starb:hover { color: #E0A106; transform: scale(1.2); }
.starb.on { color: #E0A106; }
.starb.on svg { fill: currentColor; }
.quick { position: absolute; right: 8px; top: 6px; display: flex; gap: 1px; padding: 2px; border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); opacity: 0; transform: translateX(8px) scale(.96); pointer-events: none; transition: opacity .16s, transform .22s var(--ease); }
.quick .icon-btn { width: 32px; height: 32px; border-radius: 9px; }
.quick svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .row:hover .quick, .row:focus-within .quick { opacity: 1; transform: none; pointer-events: auto; }
  .row:hover .when { opacity: 0; }
}
.more { display: block; margin: 16px auto 0; height: 40px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-weight: 550; transition: background .15s, transform .18s var(--spring); }
.more:hover { background: var(--hover); transform: translateY(-1px); }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 260px; color: var(--ink-3); text-align: center; padding: 24px; animation: rise .5s var(--ease) both; }
.empty .ic { width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: var(--hover); margin-bottom: 8px; color: var(--ink-2); }
.empty svg { width: 26px; height: 26px; stroke-width: 1.5; }
.empty b { color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.skel { display: flex; gap: 14px; padding: 13px 12px; }
.skel i, .skel b { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--hover) 25%, color-mix(in srgb, var(--hover) 40%, transparent) 50%, var(--hover) 75%); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
.skel i { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.skel span { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.skel b { height: 12px; }
.skel b:nth-child(1) { width: 40%; }
.skel b:nth-child(2) { width: 75%; }
.skel b:nth-child(3) { width: 90%; height: 10px; }
.note { margin: 8px 6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 12.5px; }

/* ---------- lectura ---------- */
.read { min-width: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 14px 28px 10px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); animation: fade .3s both; }
.bar .sp { flex: 1; }
.bar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 8px; }
.bar .pos { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: 6px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--panel); transition: background .15s, transform .18s var(--spring), box-shadow .2s, border-color .15s; }
.btn:hover { background: var(--hover); transform: translateY(-1px); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--grad); border-color: transparent; color: var(--accent-ink); box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn.primary:hover { background: var(--grad); filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--danger); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.msg { padding: 10px 36px 36px; max-width: 980px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
.msg > * { animation: rise .5s var(--ease) both; }
.msg > :nth-child(2) { animation-delay: 50ms; }
.msg > :nth-child(3) { animation-delay: 100ms; }
.msg > :nth-child(4) { animation-delay: 150ms; }
.subject { display: flex; align-items: flex-start; gap: 14px; margin: 10px 0 26px; }
.subject h2 { flex: 1; min-width: 0; font-size: 30px; line-height: 1.18; letter-spacing: -.022em; font-weight: 600; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--hover); color: var(--ink-2); font-size: 13px; white-space: nowrap; margin-top: 7px; }
.from { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.from .av { width: 54px; height: 54px; font-size: 18px; }
.from .who { flex: 1; min-width: 0; }
.from .who b { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.from .who div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.from .who .to { font-size: 14px; color: var(--ink-2); margin-top: 1px; }
.from time { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; margin-right: 4px; }
.body { background: var(--body-bg); border: 1px solid var(--body-line); border-radius: 18px; padding: var(--body-pad); box-shadow: var(--body-shadow); }
.body iframe { width: 100%; border: 0; display: block; height: 60px; }
.atts-wrap { margin: 0 0 18px; padding: 14px 16px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); animation: rise .4s var(--ease) both; }
.atts-wrap > p { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink); font-size: 14.5px; }
.atts-wrap > p .ic { color: var(--accent); }
.atts-wrap > p .ic svg { width: 18px; height: 18px; }
.atts-wrap > p span:last-child { color: var(--ink-2); font-size: 13px; margin-left: auto; }
.att .dl { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 13px; font-weight: 600; }
.att .dl svg { width: 15px; height: 15px; }
.attbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--ink); font-size: 13.5px; animation: rise .4s var(--ease) both; }
.attbar > .ic { color: var(--accent); }
.attbar .ic svg { width: 17px; height: 17px; }
.attbar .grow { flex: 1 1 220px; }
.attbar button { font-weight: 600; color: var(--accent); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.attbar button:hover { background: var(--panel); }
.titem .tclip { color: var(--accent); flex: none; display: inline-flex; }
.titem .tclip svg { width: 15px; height: 15px; }
.atts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.att { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .15s, transform .2s var(--spring), box-shadow .2s; }
.att .ft { width: 44px; height: 44px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ft, #7D8590); background: color-mix(in srgb, var(--ft, #7D8590) 14%, transparent); }
.att .ft svg { width: 22px; height: 22px; }
.att .th { width: 64px; height: 48px; border-radius: 9px; object-fit: cover; flex: none; background: var(--hover); }
.att:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.att .grow { flex: 1; min-width: 0; }
.att b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att small { color: var(--ink-3); font-size: 13px; }
.att > .ic { color: var(--ink-2); transition: transform .25s var(--spring); }
.att:hover > .ic { transform: translateY(2px); color: var(--accent); }
/* Respuesta rápida al pie del correo. */
.qr { display: flex; gap: 16px; align-items: flex-end; margin-top: auto; padding-top: 28px; position: sticky; bottom: 0; padding-bottom: 20px; margin-bottom: -36px; background: linear-gradient(to top, var(--bg) 78%, transparent); }
.qr .av { width: 46px; height: 46px; }
.qr-box { flex: 1; display: flex; align-items: flex-end; gap: 2px; min-height: 54px; padding: 6px 8px 6px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .2s, box-shadow .25s; }
.qr-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.qr-main { flex: 1; min-width: 0; }
.qr-box .ed { padding: 10px 0; max-height: 240px; overflow-y: auto; font-size: 15px; }
.qr-tools { display: flex; align-items: center; }
.qr .files { padding: 0 0 8px; }
.qr-box .send { color: var(--accent); }
.qr-box .send:hover { background: var(--grad); color: var(--accent-ink); }

/* Resumen del día: lo que se ve cuando no hay correo abierto. */
.today { margin: auto; width: min(540px, 100%); padding: 40px 32px; }
.today > * { animation: rise .6s var(--ease) both; }
.today > :nth-child(2) { animation-delay: 70ms; }
.today > :nth-child(3) { animation-delay: 140ms; }
.today > :nth-child(4) { animation-delay: 210ms; }
.eyebrow { font-size: 14px; color: var(--ink-3); margin: 0 0 12px; }
.eyebrow::first-letter { text-transform: uppercase; }
.today h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; margin: 0 0 12px; }
.today .lead { font-size: 17px; color: var(--ink-2); margin: 0 0 26px; }
.today-list { display: flex; flex-direction: column; gap: 4px; }
.today-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 10px 14px 10px 10px; border-radius: 14px; transition: transform .2s var(--spring), background .2s; }
.today-row:hover { transform: translateX(4px); background: var(--hover); }
.today-row .grow { flex: 1; min-width: 0; }
.today-row b { display: block; font-weight: 550; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-row small { color: var(--ink-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-row .n { font-size: 20px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.keys { margin-top: 26px; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 16px; }
kbd { font: 600 11px/1 "Inter Variable", sans-serif; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); margin-right: 5px; }

/* ---------- hojas (redactar, ajustes) ---------- */
dialog.sheet { border: 0; padding: 0; border-radius: 20px; background: var(--panel); color: var(--ink); width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: var(--shadow-lg); }
dialog.sheet.wide { width: min(780px, calc(100vw - 24px)); }
dialog.sheet[open] { animation: pop .34s var(--ease); }
dialog::backdrop { background: rgba(20, 22, 20, .42); backdrop-filter: blur(4px); animation: fade .25s; }
#compose { position: fixed; inset: auto 28px 0 auto; margin: 0; width: min(600px, calc(100vw - 56px)); border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; z-index: 40; }
#compose[open] { animation: dock .42s var(--ease); }
#compose.sending { animation: fly .45s var(--ease) forwards; }
.sheet-in { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px 24px; }
.sheet-head h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.sheet-body { padding: 0 24px 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sheet-foot { display: flex; align-items: center; gap: 8px; padding: 14px 24px 18px; }
.sheet-foot .sp { flex: 1; }
.field { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); min-height: 46px; transition: border-color .2s; }
.field:focus-within { border-color: var(--accent); }
.field label { color: var(--ink-3); width: 58px; flex: none; }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 44px; }
.link { color: var(--ink-3); font-size: 12.5px; transition: color .15s; }
.link:hover { color: var(--accent); }
#cBody { width: 100%; min-height: 220px; padding: 16px 0; font-size: 15px; }
.quoted { font-size: 12.5px; color: var(--ink-3); border-left: 2px solid var(--accent); padding: 4px 10px; margin: 4px 0 10px; }
.files { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.file { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 9px; background: var(--hover); font-size: 12.5px; animation: pop .3s var(--spring); }
.file button { display: inline-flex; color: var(--ink-3); }
.file svg { width: 14px; height: 14px; }
.err { color: var(--danger); font-size: 13px; min-height: 1em; margin: 0; }
.err:empty { display: none; }
.pick { position: relative; flex: 1; min-width: 0; }
.pick-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; text-align: left; }
.pick-btn .av { width: 28px; height: 28px; font-size: 10.5px; }
.pick-btn b { font-weight: 600; white-space: nowrap; }
.pick-btn small { color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pick-btn > .ic { color: var(--ink-3); transition: transform .25s var(--ease); }
.pick.open .pick-btn > .ic { transform: rotate(180deg); }
.pick-menu { position: absolute; left: -10px; right: -6px; top: 48px; z-index: 5; padding: 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .22s var(--ease); transform-origin: top; }
.pick-menu button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 11px; transition: background .12s; }
.pick-menu button:hover, .pick-menu button:focus-visible { background: var(--hover); }
.pick-menu .av { width: 36px; height: 36px; font-size: 12.5px; }
.pick-menu .grow { flex: 1; min-width: 0; }
.pick-menu b { display: block; font-weight: 600; }
.pick-menu small { display: block; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-menu .ok { color: var(--accent); }

.set h4 { margin: 24px 0 8px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.set p { color: var(--ink-2); margin: 4px 0 12px; }
.set a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.card { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; transition: border-color .2s; }
.card:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.card-top { display: flex; align-items: center; gap: 12px; }
.card-top .av { width: 40px; height: 40px; font-size: 13px; }
.card-top .grow { flex: 1; min-width: 0; }
.card-top b { display: block; overflow: hidden; text-overflow: ellipsis; }
.card-top small { color: var(--ink-3); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.ok { background: color-mix(in srgb, #3F8F63 16%, transparent); color: color-mix(in srgb, #3F8F63 75%, var(--ink)); }
.status.ok::before { animation: pulse 2.4s ease-out infinite; }
.status.bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.card-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.card-form.new { grid-template-columns: 1fr 1fr; }
.in { height: 42px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; background: var(--bg); min-width: 0; width: 100%; outline: 0; transition: border-color .2s, box-shadow .25s; }
.in:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.hint { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.rowline { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rowline .grow { flex: 1; }
.rowline small { display: block; color: var(--ink-3); }
.switch { width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .32s var(--spring); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
code.url { display: inline-block; background: var(--hover); padding: 5px 9px; border-radius: 8px; font-size: 13px; user-select: all; margin-top: 4px; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; }
.theme { text-align: left; border-radius: 16px; padding: 6px 6px 10px; border: 1px solid var(--line); transition: transform .2s var(--spring), border-color .2s, box-shadow .25s; }
.theme:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.theme[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme .pv { display: flex; height: 78px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(128, 128, 128, .18); }
.theme .pv i { display: block; }
.theme .pv .s { width: 28%; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; }
.theme .pv .s i { height: 5px; border-radius: 3px; background: rgba(128, 128, 128, .32); }
.theme .pv .s i:first-child { height: 10px; border-radius: 4px; margin-bottom: 3px; }
.theme .pv .m { flex: 1; padding: 9px 8px; display: flex; flex-direction: column; gap: 6px; }
.theme .pv .m i { height: 15px; border-radius: 5px; }
.theme .pv .m i:nth-child(2) { width: 78%; }
.theme .pv .m i:nth-child(3) { width: 40%; height: 9px; }
.theme b { display: block; margin: 9px 6px 0; font-weight: 600; }
.theme small { display: block; margin: 0 6px; color: var(--ink-3); font-size: 12px; }

/* ---------- acceso desde el celular ---------- */
.login { height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: min(360px, 100%); background: var(--panel); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px; animation: pop .4s var(--ease); }
.login-card p { margin: 0; color: var(--ink-2); }
.login-card input { height: 48px; border: 1px solid var(--line); border-radius: 13px; padding: 0 14px; background: var(--bg); outline: 0; font-size: 16px; }
.login-card input:focus { border-color: var(--accent); }
.login-card .btn { justify-content: center; height: 48px; }

.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 60; pointer-events: none; }
.toast { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; background: var(--panel); color: var(--ink); padding: 12px 20px 13px 12px; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); max-width: min(440px, calc(100vw - 32px)); animation: toastIn .4s var(--spring); }
.toast.bye { animation: toastOut .25s var(--ease) forwards; }
.toast > .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); flex: none; }
.toast > .ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
.toast.bad > .ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.toast div { min-width: 0; }
.toast b { display: block; font-weight: 600; }
.toast span:not(.ic) { display: block; color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: drain var(--life, 4s) linear forwards; }
.toast.bad::after { background: var(--danger); }

.only-mobile { display: none; }
.fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 18px; background: var(--grad); color: var(--accent-ink); align-items: center; justify-content: center; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .2s var(--spring); z-index: 5; }
.fab:active { transform: scale(.9); }
.fab svg { width: 22px; height: 22px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sk { to { background-position: -200% 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes bump { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes dock { from { opacity: 0; transform: translateY(60px); } }
@keyframes fly { to { opacity: 0; transform: translate(40px, -120px) scale(.7) rotate(4deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.95); } }
@keyframes drain { to { transform: scaleX(0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes fresh { 0%, 30% { background: color-mix(in srgb, var(--accent) 22%, transparent); } }

/* ---------- temas ---------- */
:root[data-theme="salvia"] { color-scheme: light; --bg: #F6F5F1; --panel: #FFFFFF; --ink: #1E2320; --ink-2: #505852; --ink-3: #878D87; --line: #E3E1D9; --hover: #EBEAE3; --accent: #5F8D6B; --accent-2: #6E9C79; --accent-ink: #FFFFFF; --side: #F6F5F1; --side-2: #ECEBE4; --side-3: #E6E7DE; --side-line: #E3E1D9; --side-ink: #1E2320; --side-mute: #3D4540; --side-dim: #6F766F; --danger: #B3261E; --mix: #FFFFFF; }
:root[data-theme="bosque"] { color-scheme: light; --bg: #F0EADC; --panel: #FAF6EC; --ink: #2A2923; --ink-2: #5B584C; --ink-3: #8D897A; --line: #DED6C3; --hover: #E6DECB; --accent: #B26F3B; --accent-2: #C88B58; --accent-ink: #FFFFFF; --side: #2F3B2C; --side-2: #3A4836; --side-3: #465641; --side-line: #3A4836; --side-ink: #F4F0E6; --side-mute: #DDDACB; --side-dim: #A7AD9A; --danger: #A4281B; --mix: #FAF6EC; }
:root[data-theme="atardecer"] { color-scheme: dark; --bg: #1E1022; --panel: #2A1730; --ink: #FDEFF4; --ink-2: #D3B4C5; --ink-3: #94758A; --line: #402448; --hover: #331C3A; --accent: #FF5D8F; --accent-2: #FFB03B; --accent-ink: #1E1022; --side: #130A16; --side-2: #1F1024; --side-3: #341B3C; --side-line: #2A1730; --danger: #FF9A8B; --mix: #2A1730; }
:root[data-theme="crepusculo"] { color-scheme: dark; --bg: #1B1938; --panel: #252250; --ink: #F1ECFF; --ink-2: #BDB4E0; --ink-3: #8980B5; --line: #35316A; --hover: #2B2760; --accent: #CBB7FB; --accent-2: #FF9BD2; --accent-ink: #1B1938; --side: #121029; --side-2: #1C1940; --side-3: #2A2660; --side-line: #252250; --danger: #FF9AA8; --mix: #252250; }
:root[data-theme="selva"] { color-scheme: dark; --bg: #0E1D18; --panel: #152A23; --ink: #E9F6EE; --ink-2: #A9C9B8; --ink-3: #6F917F; --line: #21402F; --hover: #1A3329; --accent: #B8F23A; --accent-2: #38D9A9; --accent-ink: #0E1D18; --side: #08130F; --side-2: #0F2019; --side-3: #1A3529; --side-line: #152A23; --danger: #FF9B8A; --mix: #152A23; }
:root[data-theme="caramelo"] { color-scheme: light; --bg: #FFF9EA; --panel: #FFFFFF; --ink: #23164D; --ink-2: #5C5184; --ink-3: #9A92B8; --line: #F1E6C8; --hover: #FFF0CC; --accent: #FF3D8B; --accent-2: #FFB627; --accent-ink: #FFFFFF; --side: #24155C; --side-2: #2F1D75; --side-3: #40299A; --side-line: #2F1D75; --danger: #D00000; --mix: #FFFFFF; }
:root[data-theme="coral"] { color-scheme: light; --bg: #FFF5F1; --panel: #FFFFFF; --ink: #22292A; --ink-2: #5A6566; --ink-3: #96A0A0; --line: #F3DDD5; --hover: #FDE9E2; --accent: #FF5E4D; --accent-2: #FF9A56; --accent-ink: #FFFFFF; --side: #1F3A3D; --side-2: #284A4E; --side-3: #356165; --side-line: #284A4E; --danger: #C1121F; --mix: #FFFFFF; }
:root[data-theme="oceano"] { color-scheme: light; --bg: #EEF6F4; --panel: #FFFFFF; --ink: #06313A; --ink-2: #3F666D; --ink-3: #7C9CA0; --line: #D3E6E2; --hover: #E0EFEB; --accent: #0A9396; --accent-2: #2EC4B6; --accent-ink: #FFFFFF; --side: #00303C; --side-2: #003D4C; --side-3: #005F73; --side-line: #003D4C; --danger: #AE2012; --mix: #FFFFFF; }
:root[data-theme="cielo"] { color-scheme: light; --bg: #EEF4FF; --panel: #FFFFFF; --ink: #0A1B3D; --ink-2: #47587F; --ink-3: #8C9ABB; --line: #D7E3FA; --hover: #E1EBFF; --accent: #2F6BFF; --accent-2: #19C3F5; --accent-ink: #FFFFFF; --side: #0A2463; --side-2: #102E7A; --side-3: #1B3F9E; --side-line: #102E7A; --danger: #C1121F; --mix: #FFFFFF; }
/* Los temas claros muestran el correo sin tarjeta, como una hoja; los oscuros lo dejan sobre blanco. */
:root:is([data-theme="salvia"], [data-theme="bosque"], [data-theme="caramelo"], [data-theme="coral"], [data-theme="oceano"], [data-theme="cielo"]) { --body-bg: transparent; --body-pad: 0; --body-line: transparent; --body-shadow: none; --shadow: 0 1px 2px rgba(30, 35, 32, .05), 0 10px 28px rgba(30, 35, 32, .08); --shadow-lg: 0 2px 6px rgba(30, 35, 32, .06), 0 28px 70px rgba(30, 35, 32, .18); }
:root:is([data-theme="atardecer"], [data-theme="crepusculo"], [data-theme="selva"]) { --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .3); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 70px rgba(0, 0, 0, .55); }
:root:is([data-theme="atardecer"], [data-theme="crepusculo"], [data-theme="selva"], [data-theme="caramelo"], [data-theme="coral"], [data-theme="oceano"], [data-theme="cielo"]) { --side-ink: #FFFFFF; --side-mute: color-mix(in srgb, #FFFFFF 78%, var(--side)); --side-dim: color-mix(in srgb, #FFFFFF 50%, var(--side)); }

@media (max-width: 1180px) { :root { --side-w: 256px; } .app { grid-template-columns: var(--side-w) minmax(300px, 380px) 1fr; } .subject h2 { font-size: 25px; } }
@media (max-width: 860px) {
  :root { --side-w: 0px; }
  .only-mobile { display: inline-flex; }
  .app { grid-template-columns: 1fr; }
  .side-toggle { display: none; }
  .read { top: var(--tb) !important; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(310px, 86vw); z-index: 30; transform: translateX(-102%); transition: transform .32s var(--ease); padding-top: calc(18px + env(safe-area-inset-top)); }
  body.menu .side { transform: none; box-shadow: 30px 0 80px rgba(0, 0, 0, .35); }
  body.menu .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); backdrop-filter: blur(2px); z-index: 20; animation: fade .25s; }
  .list { border: 0; }
  .list-head { padding: calc(10px + env(safe-area-inset-top)) 10px 6px; }
  .tabs { margin: 0 12px; }
  .tabs .sub { display: none; }
  .read { position: fixed; inset: 0; background: var(--bg); z-index: 10; transform: translateX(100%); transition: transform .34s var(--ease); }
  body.reading .read { transform: none; }
  body.reading .fab { transform: scale(0); }
  .bar { padding: calc(8px + env(safe-area-inset-top)) 8px 8px; gap: 0; }
  .bar .sep, .bar .pos { display: none; }
  .msg { padding: 4px 18px 28px; }
  .subject { margin-bottom: 18px; }
  .subject h2 { font-size: 23px; }
  .chip { display: none; }
  .from { flex-wrap: wrap; row-gap: 4px; gap: 12px; }
  .from .av { width: 44px; height: 44px; font-size: 15px; }
  .from .who b { font-size: 16px; }
  .from time { flex-basis: 100%; order: 5; padding-left: 56px; }
  .qr { margin-bottom: -28px; gap: 10px; }
  .qr .av { display: none; }
  .card-form { grid-template-columns: 1fr; }
  dialog.sheet, #compose { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; border: 0; }
  .sheet-in { height: 100dvh; max-height: none; }
  .sheet-body { flex: 1; }
  .toasts { bottom: 90px; }
  .search input, .field input, #cBody, .in, .qr-box .ed { font-size: 16px; }
  .keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }

/* ---------- ventana de escritorio: franja superior propia para arrastrar ---------- */
body.desktop { --tb: 36px; }
body.desktop .titlebar { display: block !important; position: fixed; inset: 0 0 auto 0; height: var(--tb); z-index: 4; -webkit-app-region: drag; background: linear-gradient(to right, var(--side) var(--side-w), var(--bg) var(--side-w)); transition: background .35s; }
body.desktop .side { padding-top: 6px; }
body.desktop .list-head { padding-top: 4px; }
body.desktop .bar { padding-top: 4px; }
body.desktop .login { height: calc(100dvh - var(--tb)); margin-top: var(--tb); }

/* ---------- barra lateral contraída ---------- */
.brand .lbl { flex: 1; }
.side-toggle { color: var(--side-dim); width: 34px; height: 34px; }
.side-toggle:hover { background: var(--side-2); color: var(--side-ink); }
@media (min-width: 861px) {
  body.side-min { --side-w: 76px; }
  body.side-min .side { padding-left: 10px; padding-right: 10px; }
  body.side-min .side .lbl, body.side-min .side .grow, body.side-min .side .count, body.side-min .brand-mark { display: none; }
  body.side-min .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  body.side-min .nav, body.side-min .side-link, body.side-min .acc { justify-content: center; padding-left: 0; padding-right: 0; }
  body.side-min .side-label { justify-content: center; padding-left: 0; padding-right: 0; }
  body.side-min .side-toggle .ic { transform: scaleX(-1); }
}

/* ---------- editor con formato ---------- */
.ed { outline: 0; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.ed:empty::before { content: attr(data-ph); color: var(--ink-3); pointer-events: none; }
.ed a { color: var(--accent); }
.ed ul, .ed ol { margin: 4px 0; padding-left: 22px; }
.fmtbar { display: none; align-items: center; gap: 2px; padding: 4px; margin: 0 0 8px; border-radius: 12px; background: var(--hover); width: fit-content; animation: pop .22s var(--ease); }
.fmt-on .fmtbar { display: flex; }
.fmtbar .icon-btn { width: 34px; height: 34px; border-radius: 9px; }
.fmtbar .icon-btn:hover { background: var(--panel); }
.sheet-foot .icon-btn { width: 38px; height: 38px; }

/* ---------- menús flotantes ---------- */
.pop { position: fixed; z-index: 70; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); padding: 6px; border-radius: 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .22s var(--ease); }
.pop.up { transform-origin: bottom; }
.pop h5 { margin: 6px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.pop .item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; transition: background .12s; }
.pop .item:hover, .pop .item:focus-visible { background: var(--hover); }
.pop .item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .item small { color: var(--ink-3); white-space: nowrap; }
.pop .item .ok { color: var(--accent); }
.pop .item .del { opacity: 0; color: var(--ink-3); border-radius: 6px; display: inline-flex; transition: opacity .12s, color .12s; }
.pop .item:hover .del { opacity: 1; }
.pop .item .del:hover { color: var(--danger); }
.pop .item .del svg { width: 15px; height: 15px; }
.pop form { display: flex; gap: 6px; padding: 6px; }
.pop form .btn { height: 42px; padding: 0 14px; }
.pop .muted { margin: 6px 10px 8px; color: var(--ink-3); font-size: 13px; }
.pop .sepline { height: 1px; background: var(--line); margin: 6px 4px; }
.emojis { display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; padding: 4px; }
.emojis button { height: 36px; border-radius: 9px; font-size: 20px; line-height: 1; transition: background .12s, transform .18s var(--spring); }
.emojis button:hover { background: var(--hover); transform: scale(1.2); }
.ldot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); display: inline-block; }
.row .marks .ldot { width: 8px; height: 8px; align-self: center; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; justify-content: flex-end; max-width: 46%; }
.chips .chip { margin-top: 0; gap: 7px; }
.chip.lab { background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.tabs #tabLabel { display: inline-flex; align-items: center; gap: 4px; }
.tabs #tabLabel svg { width: 15px; height: 15px; }

/* ---------- confirmación ---------- */
dialog.ask { width: min(420px, calc(100vw - 32px)); padding: 24px; }
dialog.ask p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.5; }
dialog.ask div { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 860px) { dialog.ask { inset: auto 16px; height: auto; max-height: none; border-radius: 20px; margin: auto; width: calc(100vw - 32px); } .chips { display: none; } }

/* ---------- hilos, selección múltiple, deshacer y firma ---------- */
.tcount { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 7px; background: var(--hover); color: var(--ink-2); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.row.sel .tcount { background: var(--panel); }
.row .av { cursor: pointer; transition: transform .18s var(--spring), background .15s, color .15s; }
.row .av .pk { display: none; }
.row .av .pk svg { width: 20px; height: 20px; stroke-width: 2.4; }
@media (hover: hover) {
  .row .av:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--accent); }
  .row .av:hover .ini { display: none; }
  .row .av:hover .pk { display: inline-flex; opacity: .55; }
}
.row.picked { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.row.picked .av { background: var(--grad); color: var(--accent-ink); }
.row.picked .av .ini { display: none; }
.row.picked .av .pk { display: inline-flex; opacity: 1; animation: bump .3s var(--spring); }
.row.picked .accdot { display: none; }
.bulk { display: flex; align-items: center; gap: 2px; margin: 0 12px; padding: 3px 6px; height: 45px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); animation: pop .22s var(--ease); }
.bulk b { font-weight: 600; margin: 0 6px 0 4px; white-space: nowrap; }
.bulk .link { font-size: 13px; white-space: nowrap; padding: 4px 8px; border-radius: 8px; color: var(--ink-2); }
.bulk .link:hover { background: var(--panel); color: var(--ink); }
.bulk .sp { flex: 1; }
.bulk .icon-btn { width: 36px; height: 36px; }
.bulk .icon-btn:hover { background: var(--panel); }
.thread { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.thread > p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.thread > p svg { width: 17px; height: 17px; }
.titem { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; transition: background .14s, transform .18s var(--ease); }
.titem:hover { background: var(--hover); transform: translateX(3px); }
.titem.on { background: var(--hover); }
.titem .av { width: 34px; height: 34px; font-size: 12px; }
.titem .grow { flex: 1; min-width: 0; }
.titem b { font-weight: 550; }
.titem.unread b { font-weight: 700; }
.titem small { display: block; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titem time { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.toast.act { pointer-events: auto; padding-right: 8px; }
.tbtn { margin-left: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 600; color: var(--accent); white-space: nowrap; transition: background .14s; }
.tbtn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
textarea.in.sig { grid-column: 1 / -1; height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.ed [data-sig] { color: var(--ink-2); }

/* ---------- sugerencias de contactos en Para / Cc ---------- */
.field { position: relative; }
.sug { position: absolute; left: 48px; right: 0; top: calc(100% + 4px); z-index: 6; padding: 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .18s var(--ease); transform-origin: top; }
.sug button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 11px; transition: background .1s; }
.sug button.on, .sug button:hover { background: var(--hover); }
.sug .av { width: 34px; height: 34px; font-size: 12.5px; }
.sug .grow { flex: 1; min-width: 0; }
.sug b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug small { display: block; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug kbd { margin: 0; flex: none; opacity: 0; }
.sug button.on kbd { opacity: 1; }

/* ---------- imágenes bloqueadas y destino de los enlaces ---------- */
.imgbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--hover); color: var(--ink-2); font-size: 13.5px; animation: rise .4s var(--ease) both; }
.imgbar .ic svg { width: 17px; height: 17px; }
.imgbar .grow { flex: 1 1 220px; }
.imgbar button { font-weight: 600; color: var(--accent); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.imgbar button:hover { background: var(--panel); }
#linkhint { position: fixed; left: calc(var(--side-w) + 12px); bottom: 10px; z-index: 30; max-width: min(640px, calc(100vw - 24px)); padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .12s, transform .15s var(--ease); }
#linkhint.on { opacity: .96; transform: none; }

/* =====================================================================================
   Etapa 2: legibilidad, tamaños de ventana, densidad y panel de inicio
   ===================================================================================== */

/* Texto secundario: se calcula a partir del color de texto y el fondo de cada tema, para que
   siempre se lea (antes era un gris fijo demasiado tenue). */
:root, :root[data-theme] {
  --ink-2: color-mix(in srgb, var(--ink) 82%, var(--bg));
  --ink-3: color-mix(in srgb, var(--ink) 70%, var(--bg));
  --side-mute: color-mix(in srgb, var(--side-ink) 86%, var(--side));
  --side-dim: color-mix(in srgb, var(--side-ink) 66%, var(--side));
}
.row .snip { color: var(--ink-3); }
.row .when { color: var(--ink-2); }
.day { color: var(--ink-2); }
.starb { padding: 6px; margin: -6px -4px -6px -6px; }

/* Barra del correo abierto: menos botones a la vista, nada se corta en ventanas medianas. */
.bar { flex-wrap: nowrap; min-width: 0; }
.bar .pos { white-space: nowrap; }
.from .acts { display: inline-flex; gap: 2px; flex: none; }
.pop .item .ic { color: var(--ink-2); }
.pop .item .ic svg { width: 17px; height: 17px; }

/* Respuesta rápida: el texto arriba y las herramientas en su propio renglón (aparecen al escribir). */
.qr-box { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 8px 6px 18px; }
.qr-box .ed { min-height: 42px; }
.qr-tools { display: flex; align-items: center; gap: 2px; margin-left: -8px; padding-top: 2px; animation: fade .2s; }
.qr-tools [data-act="qrExpand"] { margin-left: auto; }
.qr-box:not(:focus-within):has(.ed:empty) .qr-tools { display: none; }
.qr-box .send { background: var(--grad); color: var(--accent-ink); width: auto; padding: 0 16px; gap: 8px; font-weight: 600; border-radius: 10px; height: 36px; }
.qr-box .send:hover { filter: brightness(1.06); color: var(--accent-ink); }
.qr-box .send .ic svg { width: 16px; height: 16px; }

/* Filas compactas (Ajustes → Apariencia). */
body.dense .row { padding: 8px 12px; gap: 12px; }
body.dense .row .av { width: 34px; height: 34px; font-size: 12.5px; }
body.dense .row .snip { display: none; }
body.dense .row .who { font-size: 14.5px; }
body.dense .row .top, body.dense .row .mid { min-height: 20px; }
body.dense .row.unread::before { top: 22px; }
body.dense .row + .row::after { left: 58px; }
body.dense .day { padding: 10px 12px 6px; }
.choices { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--hover); gap: 2px; margin: 10px 0 2px; }
.choices button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9px; color: var(--ink-2); font-weight: 550; transition: background .15s, color .15s; }
.choices button svg { width: 16px; height: 16px; }
.choices button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Panel de inicio. */
.today { width: min(560px, 100%); }
.today h2 { margin-bottom: 10px; }
.today-row { border: 1px solid var(--line); background: var(--panel); padding: 10px 16px 10px 10px; }
.today-row:hover { background: var(--panel); border-color: var(--accent); box-shadow: var(--shadow); }
.today-list { gap: 8px; }
.today-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.zero { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.zero .zic { position: relative; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink); animation: bump .6s var(--spring) both .15s; }
.zero .zic svg { width: 30px; height: 30px; stroke-width: 2.2; }
.zero .zic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: halo 1.6s ease-out .5s 2; }
.zero b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.zero span { color: var(--ink-2); }
@keyframes halo { to { box-shadow: 0 0 0 22px transparent; } }

@media (max-width: 860px) {
  .from .acts { margin-left: auto; }
  .bar { justify-content: flex-start; }
  .bar .sp { flex: 1; }
}

/* El panel de lectura se adapta a su propio ancho (no al de la ventana). */
.read { container-type: inline-size; container-name: read; }
.subject { flex-wrap: wrap; }
.subject h2 { flex: 1 1 0; min-width: 60%; }
@container read (max-width: 640px) {
  .bar { padding-left: 16px; padding-right: 12px; gap: 2px; }
  .bar .sep { display: none; }
  .msg { padding-left: 22px; padding-right: 22px; }
  .subject h2 { font-size: 24px; min-width: 0; flex-basis: calc(100% - 60px); }
  .subject .chips { order: 3; flex-basis: 100%; max-width: 100%; justify-content: flex-start; margin-top: 0; }
  .from .acts [data-act="replyAll"], .from .acts [data-act="forward"] { display: none; }
  .from .av { width: 46px; height: 46px; font-size: 16px; }
  .qr { gap: 12px; }
}
@container read (max-width: 420px) {
  .bar .pos { display: none; }
  .from { flex-wrap: wrap; }
  .from time { order: 5; flex-basis: 100%; padding-left: 62px; }
}

/* =====================================================================================
   Etapa 3: bandeja separada por tipo, bajas y remitentes nuevos
   ===================================================================================== */
.tabs { gap: 2px; }
.cats { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cats button { display: inline-flex; align-items: center; gap: 7px; }
.cats .n { min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px; border-radius: 9px; font-size: 11.5px; font-weight: 700; text-align: center; background: var(--hover); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cats button.on .n { background: var(--grad); color: var(--accent-ink); }
.tabs #filterBtn { width: 36px; height: 36px; position: relative; flex: none; }
.tabs #filterBtn::after { display: none; }
.tabs #filterBtn.on { color: var(--accent); }
.tabs #filterBtn.on::before { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.newchip { flex: none; height: 19px; line-height: 19px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; font-weight: 650; background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.unsubbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; animation: rise .4s var(--ease) both; }
.unsubbar .ic svg { width: 17px; height: 17px; }
.unsubbar .grow { flex: 1 1 200px; }
.unsubbar button { font-weight: 600; color: var(--accent); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.unsubbar button:hover { background: var(--hover); }
@media (max-width: 860px) { .cats .n { display: none; } .tabs button { padding: 0 8px; } }
.tabs .sub { display: none; }
.tabs #filterBtn { margin-left: auto; }

/* =====================================================================================
   Etapa 4: plantillas, marcas, Por responder, programados, seguimiento y buscador de acciones
   ===================================================================================== */
.brandh { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px 4px; border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--side-dim); transition: color .15s, background .15s; }
.brandh:hover { color: var(--side-ink); }
.brandh.on { color: var(--side-ink); background: var(--side-3); padding-bottom: 8px; margin-bottom: 2px; }
.brandh .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.side-min .brandh { display: none; }
.card-form input[name="brand"] { grid-column: 1 / -1; }
.icon-btn.mark.on { color: var(--accent); }
.sendgrp { display: inline-flex; }
.sendgrp .btn:first-child { border-radius: 11px 0 0 11px; }
.sendgrp .btn:last-child { border-radius: 0 11px 11px 0; padding: 0 9px; margin-left: 1px; }
.sendgrp .btn:last-child .ic svg { width: 16px; height: 16px; }
.sheet-foot #cFollow { margin: 0 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.ob { cursor: default; }
.row.ob .av svg { width: 20px; height: 20px; }
.obacts { display: flex; gap: 6px; margin-top: 8px; }
.obacts .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.sech { margin: 26px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.follow { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.follow .grow { flex: 1; min-width: 0; }
.follow b { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow small { display: block; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow .btn { height: 34px; padding: 0 12px; }
dialog.palette { width: min(620px, calc(100vw - 24px)); margin-top: 12vh; padding: 10px; overflow: hidden; }
.palette .search { height: 50px; background: var(--bg); }
.pal-list { max-height: min(52vh, 440px); overflow-y: auto; margin-top: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pal-list button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 11px; color: var(--ink); }
.pal-list button .ic { color: var(--ink-2); }
.pal-list button.on { background: var(--hover); }
.pal-list button .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-list kbd { margin: 0; }
.pal-list .muted { padding: 14px 12px; color: var(--ink-3); }
@container read (max-width: 640px) { .bar [data-act="pdf"] { display: none; } }
.icon-btn.mark.on svg { fill: none; }
@media (max-width: 860px) { dialog.palette { margin-top: 0; padding: 12px; } }

/* =====================================================================================
   Etapa 5: búsqueda global, ficha del contacto, borradores
   ===================================================================================== */
.fchip { flex: none; height: 19px; line-height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.row.sel .fchip { background: var(--panel); }
.from .who b, .from .av { cursor: pointer; }
.from .who b:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cnote { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnote .ic svg { width: 14px; height: 14px; }
.pop.card { width: 340px; padding: 16px; }
.pop.card .head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pop.card .head .grow { flex: 1; min-width: 0; }
.pop.card .head b { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop.card .head small { display: block; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop.card .facts { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.pop.card textarea { width: 100%; min-height: 84px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); outline: 0; line-height: 1.45; }
.pop.card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.pop.card .acts { display: flex; gap: 6px; margin-top: 10px; }
.pop.card .acts .btn { height: 36px; padding: 0 12px; font-size: 13.5px; }

/* =====================================================================================
   Etapa 6: resumen y borrador con IA (opcional)
   ===================================================================================== */
.aibox { margin: 0 0 18px; padding: 16px 18px 12px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); animation: rise .4s var(--ease) both; }
.aibox .aihead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.aibox .aihead .ic { color: var(--accent); }
.aibox .aihead .ic svg { width: 17px; height: 17px; }
.aibox .aihead .sp { flex: 1; }
.aibox .aihead .icon-btn { width: 30px; height: 30px; margin: -4px -6px -4px 0; }
.aibox .aitext { white-space: pre-wrap; line-height: 1.55; font-size: 15px; overflow-wrap: anywhere; }
.aibox .aifoot { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.aibox.busy .aitext { color: var(--ink-3); }
.aibox.busy .aihead .ic svg { animation: spin 1.6s linear infinite; }
.pop.ai { width: 360px; padding: 14px; }
.pop.ai p { margin: 0 0 8px; color: var(--ink-2); font-size: 13.5px; }
.pop.ai textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); outline: 0; line-height: 1.45; }
.pop.ai textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.pop.ai .acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pop.ai .acts small { color: var(--ink-3); font-size: 12px; }
@container read (max-width: 640px) { .bar [data-act="aiSum"] { display: none; } }

/* ---------- adjuntos: tarjeta con «Ver» y visor ---------- */
.att { padding: 8px 10px 8px 8px; gap: 8px; }
.att-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-align: left; padding: 4px 6px; border-radius: 10px; color: inherit; }
button.att-main { cursor: pointer; }
button.att-main:hover { background: var(--hover); }
.att .vw, .att .dl { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.att .vw { background: var(--accent); color: var(--accent-ink, #fff); }
.att.can .dl { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.att.can .dl:hover { color: var(--accent); border-color: var(--accent); }
.att .vw svg, .att .dl svg { width: 15px; height: 15px; }
.atts { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
dialog.sheet.viewer { width: min(1100px, calc(100vw - 32px)); height: calc(100dvh - 48px); max-height: none; overflow: hidden; }
dialog.sheet.viewer[open] { display: flex; flex-direction: column; }
.viewer header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); flex: none; }
.viewer header .grow { flex: 1; min-width: 0; }
.viewer header b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; }
.viewer header small { color: var(--ink-3); font-size: 13px; }
.viewer .vbody { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--hover); }
.viewer .vbody iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer .vbody img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .verr { color: var(--ink-2); padding: 24px; text-align: center; }

/* ---------- tema Crema ---------- */
:root[data-theme="crema"] { color-scheme: light; --bg: #F5F3EC; --panel: #FDFCF8; --ink: #1C1C1A; --line: #E6E2D6; --hover: #ECE8DC; --accent: #1C1C1A; --accent-2: #F2C12E; --accent-ink: #FFFFFF; --grad: #1C1C1A; --hi: #F2C12E; --hi-ink: #1C1C1A; --side: #EFECE2; --side-2: #E6E2D5; --side-3: #DDD8C9; --side-line: #E2DED1; --side-ink: #1C1C1A; --danger: #B3261E; --mix: #FFFFFF;
  --body-bg: transparent; --body-pad: 0; --body-line: transparent; --body-shadow: none; --shadow: 0 1px 2px rgba(40, 36, 20, .05), 0 10px 28px rgba(40, 36, 20, .08); --shadow-lg: 0 2px 6px rgba(40, 36, 20, .06), 0 28px 70px rgba(40, 36, 20, .18); }

/* ---------- inicio: tablero ---------- */
:root { --hi: var(--accent); --hi-ink: var(--accent-ink); --display: "Outfit Variable", "Inter Variable", system-ui, sans-serif; }
body.home .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
body.home .list { display: none; }
.read > .home { padding: 12px clamp(18px, 2.4vw, 36px) 28px; width: 100%; max-width: 2000px; margin: 0 auto; }
.h-top { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.h-top .grow { flex: 1 1 280px; min-width: 0; }
.h-top .eyebrow { margin: 0 0 4px; color: var(--ink-2); font-size: 14px; }
.h-top .eyebrow::first-letter { text-transform: uppercase; }
.home h1 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.h-nums { display: flex; gap: 6px; align-items: flex-end; }
.h-nums .icon-btn { margin: 0 0 6px 6px; }
.h-num { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 16px; border-radius: 16px; text-align: left; transition: background .2s, transform .2s var(--spring); }
.h-num:hover { background: color-mix(in srgb, var(--panel) 70%, transparent); transform: translateY(-2px); }
.h-num b { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 50px); line-height: 1; font-variant-numeric: tabular-nums; }
.h-num small { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.h-num small svg { width: 14px; height: 14px; }
.h-kpis { display: flex; gap: 8px; margin-bottom: 18px; }
.kpi { min-width: 0; }
.kpi small { display: block; color: var(--ink-2); font-size: 12.5px; margin: 0 0 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbar { height: 40px; border-radius: 999px; display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 600; transform-origin: left; }
.kbar.k1 { background: var(--ink); color: var(--bg); }
.kbar.k2 { background: var(--hi); color: var(--hi-ink); }
.kbar.k3 { color: var(--ink); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 12%, transparent) 0 2px, transparent 2px 8px); border: 1px solid var(--line); }
.kbar.k4 { color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
:where(.bento, .pg) .card { background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 26px; padding: 20px 20px 18px; min-width: 0; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.card h3 .go, .card h3 .h-count { margin-left: auto; }
.card h3 .go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: transform .2s var(--spring), background .2s; }
.card h3 .go:hover { background: var(--hi); color: var(--hi-ink); transform: rotate(8deg) scale(1.06); }
.card h3 .go svg { width: 16px; height: 16px; }
.h-count { font-family: var(--display); font-weight: 400; font-size: 26px; font-variant-numeric: tabular-nums; }
.c-week { grid-column: span 4; }
.c-orders { grid-column: span 4; }
.c-todo { grid-column: span 4; grid-row: span 2; }
.c-agenda { grid-column: span 8; }
.c-files { grid-column: span 6; }
.c-accs { grid-column: span 6; }
.card.dark { background: var(--ink); color: var(--bg); border-color: transparent; }
.card .big { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 14px; }
.card .big b { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: .95; font-variant-numeric: tabular-nums; }
.card .big span { color: var(--ink-2); font-size: 12.5px; line-height: 1.3; padding-bottom: 3px; }
.wbars { flex: 1; min-height: 150px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.wbar { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.wbar i { display: block; width: 7px; border-radius: 99px; background: var(--ink); flex: none; height: max(6px, calc(var(--h) * .55)); transform-origin: bottom; transition: width .2s var(--spring); }
.wbar.nil i { background: color-mix(in srgb, var(--ink) 25%, transparent); height: 6px; }
.wbar.now i { background: var(--hi); }
.wbar span { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.wbar.now span { color: var(--ink); font-weight: 700; }
.wbar em { font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; padding: 3px 8px; border-radius: 99px; background: var(--hi); color: var(--hi-ink); opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.wbar.now em, .wbar:hover em { opacity: 1; transform: none; }
.wbar:hover i { width: 11px; }
.h-row, .h-acc, .h-tmain { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-width: 0; }
.h-row { padding: 8px; border-radius: 14px; transition: background .15s, transform .2s var(--spring); }
.h-row:hover { background: var(--hover); transform: translateX(3px); }
.h-row .grow, .h-acc .grow, .h-tmain .grow { flex: 1; min-width: 0; }
.h-row b, .h-tmain b, .h-acc b { display: block; font-weight: 550; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-row small, .h-tmain small { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-row time { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.h-ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ft, var(--ink)); background: color-mix(in srgb, var(--ft, var(--ink)) 10%, transparent); }
.h-ic svg { width: 18px; height: 18px; }
.h-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 8px; color: var(--ink-3); font-size: 13.5px; text-align: center; }
.h-empty svg { width: 24px; height: 24px; }
.dark .h-empty { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.h-task { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 0; border-radius: 16px; transition: background .15s; }
.h-task:hover { background: color-mix(in srgb, var(--bg) 9%, transparent); }
.h-tmain { padding: 6px 4px 6px 6px; color: inherit; }
.dark .h-ic { background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); }
.dark .h-tmain small { color: color-mix(in srgb, var(--bg) 58%, transparent); }
.h-check { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid color-mix(in srgb, var(--bg) 35%, transparent); color: transparent; position: relative; transition: background .2s, border-color .2s, transform .25s var(--spring); }
.h-check svg { width: 15px; height: 15px; }
.h-check:hover { border-color: var(--hi); transform: scale(1.08); }
.h-task.done .h-check { background: var(--hi); border-color: var(--hi); color: var(--hi-ink); animation: pop .4s var(--spring); }
.h-task.done .h-check::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, var(--hi) 1.6px, transparent 2px) 0 0 / 11px 11px; opacity: 0; animation: spark .6s ease-out; pointer-events: none; }
.h-task.done .h-tmain b, .h-task.done .h-tmain small { text-decoration: line-through; opacity: .5; }
@keyframes spark { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
.agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; flex: 1; }
.aday { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 10px; border-left: 1px dashed var(--line); min-height: 104px; min-width: 0; }
.aday:first-child { border-left: 0; }
.aday > small { color: var(--ink-3); font-size: 12px; text-transform: capitalize; }
.aday > b { font-family: var(--display); font-weight: 400; font-size: 19px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 4px; }
.aday.now > b { background: var(--ink); color: var(--bg); }
.aday > i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); margin-top: 8px; }
.aev { width: 100%; padding: 7px 9px; border-radius: 12px; background: var(--ink); color: var(--bg); min-width: 0; box-shadow: var(--shadow); }
.aev.follow { background: var(--hi); color: var(--hi-ink); }
.aev b { display: block; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aev small { display: block; font-size: 11px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-note { margin: 10px 0 0; color: var(--ink-3); font-size: 12.5px; }
.h-acc { padding: 7px 8px; border-radius: 14px; transition: background .15s; }
.h-acc:hover { background: var(--hover); }
.h-acc .av { width: 34px; height: 34px; font-size: 12px; flex: none; }
.h-acc em { font-style: normal; font-family: var(--display); font-size: 18px; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); display: inline-flex; justify-content: flex-end; }
.h-acc em svg { width: 16px; height: 16px; color: var(--ink-3); }
.abar { display: block; height: 6px; border-radius: 99px; background: var(--hover); margin-top: 6px; overflow: hidden; }
.abar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--hi); transform-origin: left; }
/* entrada escalonada: sólo la primera vez que se pinta */
.home.enter .h-top, .home.enter .h-kpis, .home.enter .card { animation: rise .6s var(--ease) both; }
.home.enter .h-kpis { animation-delay: 80ms; }
.home.enter .card:nth-child(1) { animation-delay: 140ms; } .home.enter .card:nth-child(2) { animation-delay: 200ms; } .home.enter .card:nth-child(3) { animation-delay: 260ms; }
.home.enter .card:nth-child(4) { animation-delay: 320ms; } .home.enter .card:nth-child(5) { animation-delay: 380ms; } .home.enter .card:nth-child(6) { animation-delay: 440ms; }
.home.enter .kbar { animation: growx .8s var(--ease) .25s both; }
.home.enter .wbar i { animation: growy .7s var(--ease) calc(.35s + var(--i) * 60ms) both; }
.home.enter .abar i { animation: growx .8s var(--ease) .6s both; }
.home.enter .h-task { animation: rise .45s var(--ease) calc(.4s + var(--i) * 55ms) both; }
@keyframes growx { from { transform: scaleX(0); } }
@keyframes growy { from { transform: scaleY(0); } }
/* Pantalla muy ancha (ultrawide): todo el tablero en dos renglones, sin desplazarse. */
@container read (min-width: 1500px) {
  .c-week { grid-column: 1 / 4; grid-row: 1; } .c-orders { grid-column: 4 / 7; grid-row: 1; }
  .c-files { grid-column: 7 / 10; grid-row: 1; } .c-todo { grid-column: 10 / 13; grid-row: 1 / 3; }
  .c-agenda { grid-column: 1 / 7; grid-row: 2; } .c-accs { grid-column: 7 / 10; grid-row: 2; }
}
@container read (max-width: 1040px) {
  .c-week { grid-column: 1 / 7; grid-row: 1; } .c-orders { grid-column: 7 / 13; grid-row: 1; }
  .c-todo { grid-column: 1 / 7; grid-row: 2; } .c-files { grid-column: 7 / 13; grid-row: 2; }
  .c-agenda { grid-column: 1 / 13; grid-row: 3; } .c-accs { grid-column: 1 / 13; grid-row: 4; }
}
@container read (max-width: 680px) {
  .bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .h-kpis { flex-wrap: wrap; } .kpi { flex: 1 1 40% !important; }
  .agenda { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aday:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .home.enter *, .h-task.done .h-check::after { animation: none !important; } }

/* ===== crema: pulido completo ===== */
/* Todo el estilo del tema Crema: paneles flotantes sobre un degradado crema-amarillo, píldoras negras para lo
   activo, amarillo para lo seleccionado y títulos en Outfit. Sólo aplica a este tema. */
:root[data-theme="crema"] { --k: #1C1C1A; --k-ink: #F6F4EE; --card: #FFFEFA; --sunk: #F3F0E6; --hi: #F5C83A; --hi-soft: #FBE9A6; --glass: rgba(255, 254, 250, .78); --rim: rgba(255, 255, 255, .9); --r-xl: 28px; }
:root[data-theme="crema"] body { background: linear-gradient(128deg, #F6F4EE 0%, #F4F1E8 42%, #F7E9B8 100%) fixed; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .titlebar { background: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) ::selection { background: var(--hi); color: var(--k); }

/* --- estructura: tres piezas flotando --- */
@media (min-width: 861px) {
  :root:is([data-theme="crema"], [data-theme="samapp"]) .app { background: transparent; gap: 14px; padding: 6px 14px 14px 6px; }
  :root:is([data-theme="crema"], [data-theme="samapp"]) .side { background: transparent; border-right: 0; padding: 14px 8px 8px 12px; }
  :root:is([data-theme="crema"], [data-theme="samapp"]) .list, :root:is([data-theme="crema"], [data-theme="samapp"]) .read { background: var(--glass); border: 1px solid var(--rim); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(60, 50, 20, .04), 0 18px 44px -18px rgba(90, 70, 10, .22); overflow: hidden; backdrop-filter: blur(18px); }
  :root:is([data-theme="crema"], [data-theme="samapp"]) .read { overflow-y: auto; }
  :root:is([data-theme="crema"], [data-theme="samapp"]) body.home .read { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; border-radius: 0; }
}
:root:is([data-theme="crema"], [data-theme="samapp"]) .day { background: transparent; backdrop-filter: none; position: static; font-family: var(--display); font-size: 15px; color: var(--ink-2); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .bar { background: color-mix(in srgb, var(--card) 82%, transparent); padding: 16px 26px 12px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .qr { background: linear-gradient(to top, var(--card) 70%, transparent); }

/* --- barra lateral --- */
:root:is([data-theme="crema"], [data-theme="samapp"]) .brand { font-family: var(--display); font-weight: 500; font-size: 23px; letter-spacing: -.01em; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .brand-mark { border-radius: 50%; background: var(--k); color: var(--hi); box-shadow: none; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .btn-compose { border-radius: 999px; background: var(--k); box-shadow: 0 14px 26px -14px rgba(28, 28, 26, .7); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .nav { border-radius: 999px; padding-left: 14px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .nav:hover { background: rgba(255, 255, 255, .6); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .nav.on { background: var(--k); color: #FFFFFF; font-weight: 500; box-shadow: 0 10px 22px -14px rgba(28, 28, 26, .8); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .nav.on .ic { color: var(--hi); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .count { border-radius: 999px; background: rgba(255, 255, 255, .75); color: var(--ink); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .nav.on .count { background: var(--hi); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .side-label, :root:is([data-theme="crema"], [data-theme="samapp"]) .brandh { font-family: var(--display); letter-spacing: .02em; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .acc { border-radius: 18px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .acc:hover { background: rgba(255, 255, 255, .6); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .acc.on { background: var(--card); box-shadow: var(--shadow); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .acc.on .count { background: var(--hi); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .acc.on .av { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--hi); }

/* --- lista --- */
:root:is([data-theme="crema"], [data-theme="samapp"]) .list-head { padding: 16px 16px 8px 18px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .search { border-radius: 999px; background: var(--card); border-color: var(--line); height: 46px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .search:focus-within { border-color: var(--k); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 45%, transparent); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .icon-btn { border-radius: 50%; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .list-head .icon-btn, :root:is([data-theme="crema"], [data-theme="samapp"]) .bar .icon-btn, :root:is([data-theme="crema"], [data-theme="samapp"]) .from .acts .icon-btn { border: 1px solid var(--line); background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .icon-btn:hover { background: var(--hi-soft); color: var(--k); border-color: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .icon-btn.on { color: var(--k); background: var(--hi); border-color: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .bar .sep { display: none; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .tabs { border-bottom: 0; margin: 4px 16px 6px; gap: 4px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .tabs button { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .tabs button::after { display: none; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .tabs button:hover { background: rgba(28, 28, 26, .06); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .tabs button.on { background: var(--k); color: #FFFFFF; font-weight: 500; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .tabs button.on .n, :root:is([data-theme="crema"], [data-theme="samapp"]) .tabs button.on b, :root:is([data-theme="crema"], [data-theme="samapp"]) .tabs button.on span { background: var(--hi); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .rows { padding: 0 8px 24px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row { border-radius: 20px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row + .row::after { left: 74px; background: color-mix(in srgb, var(--line) 80%, transparent); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row:hover { background: rgba(28, 28, 26, .045); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row.sel { background: var(--hi); box-shadow: 0 12px 24px -16px rgba(180, 130, 0, .7); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row.sel .snip, :root:is([data-theme="crema"], [data-theme="samapp"]) .row.sel .when, :root:is([data-theme="crema"], [data-theme="samapp"]) .row.sel .marks { color: rgba(28, 28, 26, .72); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row.sel .accdot { box-shadow: 0 0 0 2.5px var(--hi); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row.unread::before { background: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .row .who { font-size: 15px; }

/* --- lectura --- */
:root:is([data-theme="crema"], [data-theme="samapp"]) .subject h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -.02em; line-height: 1.12; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .chip { border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .from .who b { font-family: var(--display); font-weight: 500; font-size: 19px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .atts-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .atts-wrap > p .ic { color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .att { border-radius: 18px; background: var(--bg); border-color: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .att:hover { border-color: transparent; background: var(--hi-soft); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .att .vw { background: var(--k); color: #FFFFFF; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .att .dl, :root:is([data-theme="crema"], [data-theme="samapp"]) .att.can .dl { background: var(--card); border: 1px solid var(--line); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .att:not(.can) .dl { background: var(--k); color: #FFFFFF; border-color: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .attbar, :root:is([data-theme="crema"], [data-theme="samapp"]) .imgbar, :root:is([data-theme="crema"], [data-theme="samapp"]) .unsubbar { border-radius: 999px; background: var(--card); border: 1px solid var(--line); padding: 8px 10px 8px 16px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .attbar button, :root:is([data-theme="crema"], [data-theme="samapp"]) .imgbar button, :root:is([data-theme="crema"], [data-theme="samapp"]) .unsubbar button { background: var(--k); color: #FFFFFF; border-radius: 999px; padding: 6px 14px; font-weight: 500; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .qr-box { border-radius: 26px; background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .qr-box:focus-within { border-color: var(--k); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 45%, transparent); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .qr-box .send { background: var(--k); color: var(--hi); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .qr-box .send:hover { background: var(--hi); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .thread { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 14px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .titem { border-radius: 16px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .titem.on { background: var(--hi-soft); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .aibox { border-radius: 24px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .today h2 { font-family: var(--display); font-weight: 400; }

/* --- botones, avisos y ventanas --- */
:root:is([data-theme="crema"], [data-theme="samapp"]) .btn { border-radius: 999px; background: var(--card); font-weight: 500; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .btn:hover { background: var(--hi-soft); border-color: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .btn.primary { background: var(--k); color: #FFFFFF; box-shadow: 0 12px 22px -14px rgba(28, 28, 26, .8); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .btn.primary:hover { background: var(--k); filter: none; box-shadow: 0 0 0 3px var(--hi); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .btn.ghost { background: none; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .toast { background: var(--k); color: #FFFFFF; border: 0; border-radius: 999px; padding: 10px 22px 10px 10px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .toast > .ic { background: var(--hi); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .toast span { color: rgba(255, 255, 255, .7); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .toast .tbtn { background: var(--hi); color: var(--k); border-radius: 999px; padding: 6px 14px; font-weight: 600; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .toast.bad > .ic { background: #FFD9D4; color: var(--danger); }
:root:is([data-theme="crema"], [data-theme="samapp"]) dialog.sheet { border-radius: 30px; background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) dialog::backdrop { background: rgba(40, 34, 12, .32); backdrop-filter: blur(6px); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .pop { border-radius: 22px; background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .pop button:hover, :root:is([data-theme="crema"], [data-theme="samapp"]) .pop .on { background: var(--hi-soft); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .bulk { border-radius: 999px; background: var(--k); color: #FFFFFF; margin: 0 14px 6px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .bulk .icon-btn, :root:is([data-theme="crema"], [data-theme="samapp"]) .bulk button { color: #FFFFFF; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .bulk .icon-btn:hover { background: var(--hi); color: var(--k); }
:root:is([data-theme="crema"], [data-theme="samapp"]) input[type="text"], :root:is([data-theme="crema"], [data-theme="samapp"]) input[type="password"], :root:is([data-theme="crema"], [data-theme="samapp"]) input[type="email"], :root:is([data-theme="crema"], [data-theme="samapp"]) textarea { border-radius: 16px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) kbd { border-radius: 8px; background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .zero { border-radius: 24px; background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .zic { background: var(--hi); color: var(--k); }

/* --- inicio --- */
:root:is([data-theme="crema"], [data-theme="samapp"]) :where(.bento, .pg) .card { background: var(--glass); border-color: var(--rim); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(60, 50, 20, .04), 0 18px 44px -20px rgba(90, 70, 10, .25); backdrop-filter: blur(18px); transition: transform .35s var(--spring), box-shadow .35s; }
:root:is([data-theme="crema"], [data-theme="samapp"]) :where(.bento, .pg) .card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(60, 50, 20, .05), 0 26px 50px -20px rgba(90, 70, 10, .32); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .card.dark { background: var(--k); color: var(--k-ink); backdrop-filter: none; box-shadow: 0 22px 44px -20px rgba(28, 28, 26, .65); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .card h3 { font-weight: 400; font-size: 21px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .h-row:hover { background: var(--hi-soft); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .h-ic { background: var(--sunk); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .dark .h-ic { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .kbar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .kbar.k3 { background: repeating-linear-gradient(-45deg, rgba(28, 28, 26, .14) 0 2px, transparent 2px 9px), rgba(255, 255, 255, .5); border-color: rgba(28, 28, 26, .12); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .kbar.k4 { background: rgba(255, 255, 255, .55); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .h-num:hover { background: rgba(255, 255, 255, .7); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .aday.now > b { background: var(--k); color: var(--hi); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .h-acc:hover { background: var(--hi-soft); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .abar { background: var(--sunk); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .abar i { background: var(--k); }
/* ===== fin crema ===== */

/* ---------- monitor vertical: la lista arriba y el correo abajo ---------- */
/* En una pantalla alta y angosta, tres columnas quedan apretadas; se apilan lista y lectura a todo lo ancho. */
@media (min-width: 861px) and (max-width: 1300px) and (min-height: 1250px) {
  .app { grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: minmax(0, 38%) minmax(0, 1fr); }
  .side { grid-row: 1 / -1; }
  .list { grid-column: 2; grid-row: 1; border-right: 0; border-bottom: 1px solid var(--line); }
  .read { grid-column: 2; grid-row: 2; }
  body.home .app { grid-template-rows: minmax(0, 1fr); }
  body.home .read { grid-row: 1 / -1; }
  :root:is([data-theme="crema"], [data-theme="samapp"]) .list { border-bottom: 1px solid var(--rim); }
}
/* ===== tablero: encaje ===== */
/* Pantalla ancha y baja (ultrawide): el tablero ocupa exactamente el alto disponible, sin desplazarse. */
@media (min-width: 1700px) and (max-height: 1150px) {
  body.home .read { overflow: hidden; }
  .read > .home { height: 100%; display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 16px; }
  .h-top { margin-bottom: 10px; align-items: center; }
  .home h1 { font-size: clamp(30px, 2.3vw, 42px); }
  .h-num b { font-size: clamp(30px, 2.2vw, 40px); }
  .h-kpis { margin-bottom: 12px; }
  .kbar { height: 34px; }
  .bento { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .bento .card { min-height: 0; overflow: hidden; padding: 16px 18px 14px; }
  .card h3 { margin-bottom: 8px; }
  .card > .h-row, .card > .h-acc, .card > .h-task { flex: 0 1 auto; }
  .bento .c-orders, .bento .c-files, .bento .c-accs, .bento .c-todo, .bento .c-agenda { overflow-y: auto; scrollbar-width: none; }
  .wbars { min-height: 0; }
  .card .big { margin-bottom: 6px; }
  .card .big b { font-size: 40px; }
  .h-row { padding: 6px 8px; }
  .h-acc { padding: 5px 8px; }
  .aday { min-height: 0; }
}
/* Panel angosto (monitor vertical o ventana chica): saludo más compacto para que no se parta en tres renglones. */
@container read (max-width: 1040px) {
  .home h1 { font-size: clamp(30px, 5cqw, 40px); }
  .h-top .grow { flex-basis: 220px; }
}
/* ===== fin encaje ===== */

/* ---------- Sam (Samapp) ---------- */
.sambar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 6px 6px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .25s; }
.sambar:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 35%, transparent); }
.sambar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 15px; height: 40px; }
.sambar .grow { flex: 1; min-width: 0; color: var(--ink-2); font-size: 14.5px; }
.sambar .btn { height: 40px; flex: none; }
.sambar form .btn, .sambar > .btn[type="submit"] { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.sambar .h-ic { background: var(--ink); color: var(--hi); }
.sambar.in-dlg { margin: 0; box-shadow: none; }
.c-sam .h-task:hover { background: var(--hover); }
.c-sam .h-check { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.c-sam .h-tmain small { color: var(--ink-3); }
dialog.sheet.samdlg { width: min(640px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 48px)); overflow: hidden; }
dialog.sheet.samdlg[open] { display: flex; flex-direction: column; }
.samdlg header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--line); flex: none; }
.samdlg header .h-ic { background: var(--ink); color: var(--hi); }
.samdlg header .grow { flex: 1; min-width: 0; }
.samdlg header b { display: block; font-family: var(--display); font-weight: 500; font-size: 19px; }
.samdlg header small { color: var(--ink-3); font-size: 13px; }
.samlog { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.sb { max-width: 88%; border-radius: 20px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; animation: rise .35s var(--ease) both; overflow-wrap: anywhere; }
.sb.me { align-self: flex-end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 6px; }
.sb.sam { align-self: flex-start; background: var(--hover); border-bottom-left-radius: 6px; width: 88%; }
.sb.sam p { margin: 0 0 8px; white-space: pre-wrap; }
.sb.sam p:last-child { margin-bottom: 0; }
.sb .serr { color: var(--danger); }
.sprop { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); margin-top: 8px; }
.sprop .grow { flex: 1; min-width: 0; }
.sprop small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sprop b { display: block; font-weight: 550; }
.sprop em { display: inline-block; font-style: normal; font-size: 12.5px; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: var(--hi); color: var(--hi-ink); }
.sprop .btn { height: 36px; padding: 0 14px; flex: none; }
.sprop .sok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sprop .sok svg { width: 16px; height: 16px; }
.sprop .snote { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.sprop.done { opacity: .75; }
.sb.wait { display: inline-flex; gap: 5px; width: auto; padding: 14px 16px; }
.sb.wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: samdot 1s infinite ease-in-out; }
.sb.wait i:nth-child(2) { animation-delay: .15s; } .sb.wait i:nth-child(3) { animation-delay: .3s; }
@keyframes samdot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
.samdlg .sambar { margin: 0 14px 14px; flex: none; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .sambar { background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .sb.sam { background: var(--sunk); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .sprop { background: var(--card); }
@media (min-width: 1700px) and (max-height: 1150px) { .sambar { margin-bottom: 10px; padding: 4px 4px 4px 6px; } .sambar input, .sambar .btn { height: 36px; } .sambar .h-ic { width: 34px; height: 34px; } }

/* ---------- inicio con Samapp ---------- */
.home.sam .kbar { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); border: 0; }
.home.sam .kbar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(var(--p), 0%); border-radius: 999px; background: var(--ink); transition: width .6s var(--ease); }
.home.sam .kbar.k2::before { background: var(--hi); }
.home.sam .kbar.k3::before { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 55%, transparent) 0 2px, color-mix(in srgb, var(--ink) 22%, transparent) 2px 8px); }
.home.sam .kbar.k4::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.home.sam .kbar span { position: relative; padding: 2px 8px; border-radius: 99px; background: var(--panel); color: var(--ink); font-size: 12px; }
.home.sam.enter .kbar { animation: none; }
.home.sam.enter .kbar::before { animation: growx .8s var(--ease) .25s both; transform-origin: left; }
.home.sam .h-num { cursor: default; }
.home.sam .h-num:hover { background: none; transform: none; }
.home.sam .h-num b { white-space: nowrap; }
.h-bad { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--danger) 10%, var(--panel)); color: var(--danger); font-size: 13.5px; }
.h-bad svg { width: 17px; height: 17px; }
.c-sam .h-task { border-radius: 14px; }
.c-sam .h-task.done .h-check { color: var(--hi-ink); }
.h-lt { display: flex; align-items: baseline; gap: 8px; margin: 6px 6px 2px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.h-lt:first-of-type { margin-top: 0; }
.h-lt b { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-sam .h-tmain { padding: 4px 4px 4px 6px; }
.c-sam .h-ic { width: 32px; height: 32px; }
.c-sam .h-ic svg { width: 16px; height: 16px; }
.amore { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.aev.mail { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.home.sam .wbar em { font-size: 11px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .home.sam .kbar { background: rgba(28, 28, 26, .08); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .home.sam .kbar span { background: var(--card); }
@media (min-width: 1700px) and (max-height: 1150px) {
  .c-sam .h-tmain { padding: 2px 4px 2px 6px; } .h-task { padding: 2px 4px 2px 0; }
  .c-agenda .aev { padding: 5px 8px; }
}

/* ---------- páginas de Samapp ---------- */
.nav-sep { padding-top: 12px; }
.pg { flex: 1; min-height: 0; }
.pg .card { overflow: visible; min-height: 0; }
.pg .h-empty { padding: 26px 8px; }
.pgmonth { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.pgmonth b { font-family: var(--display); font-weight: 500; font-size: 20px; min-width: 190px; text-align: center; }
.pgmonth b::first-letter { text-transform: uppercase; }
.pgadd { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 6px 6px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.pgadd:focus-within { border-color: var(--ink); }
.pgadd input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 15px; height: 38px; }
.pgadd .btn { height: 38px; flex: none; }
.pgadd.small { margin: 10px 0 0; padding: 4px 4px 4px 14px; }
.pgadd.small .btn { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }
.pgadd.small input { height: 34px; font-size: 14px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hover); flex: none; }
.seg button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.seg button.on { background: var(--ink); color: var(--bg); }
.pcols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pcols .card.dark .h-task:hover { background: color-mix(in srgb, var(--bg) 9%, transparent); }
.pdone { margin-top: 14px; }
.pdone-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 14px; }
.pdone .btn.ghost { height: 30px; padding: 0 10px; font-size: 13px; flex: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.hcard.paused { opacity: .6; }
.hcard .h-count small { font-size: 13px; font-family: inherit; color: var(--ink-3); }
.hsub { margin: -6px 0 14px; color: var(--ink-2); font-size: 13px; }
.hdays { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.hd { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; border-radius: 10px; }
.hd small { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.hd i { width: 100%; max-width: 26px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--ink) 16%, transparent); color: transparent; transition: background .2s, transform .2s var(--spring), border-color .2s; }
.hd i svg { width: 60%; height: 60%; }
.hd.due i { border-style: solid; border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.hd.done i { background: var(--hi); border-color: var(--hi); border-style: solid; color: var(--hi-ink); }
.hd.now small { color: var(--ink); }
.hd.now i { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--ink); }
.hd:hover:not([disabled]) i { transform: scale(1.12); border-color: var(--ink); }
.hd[disabled] { opacity: .3; }
.hweek { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.hweek .abar { flex: 1; margin: 0; height: 8px; }
.hweek em { font-style: normal; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.litems { max-height: 420px; overflow-y: auto; scrollbar-width: none; }
.calwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 14px; align-items: start; }
.cal-h { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.cal-h span { font-size: 12px; color: var(--ink-3); font-weight: 600; text-align: left; padding-left: 10px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cday { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 104px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--hover) 55%, transparent); text-align: left; min-width: 0; transition: background .15s, box-shadow .15s; }
.cday:hover { background: var(--hover); }
.cday.out { opacity: .4; }
.cday > b { font-family: var(--display); font-weight: 400; font-size: 16px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cday.now > b { background: var(--ink); color: var(--bg); }
.cday.sel { box-shadow: inset 0 0 0 2px var(--ink); background: var(--panel); }
.cev { display: block; font-size: 11.5px; font-weight: 550; padding: 3px 7px; border-radius: 8px; background: var(--ink); color: var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cev.pay { background: var(--hi); color: var(--hi-ink); }
.cev.done { background: transparent; color: var(--ink-3); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--line); }
.fstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.fstat { border-radius: 24px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.fstat small { display: block; color: var(--ink-2); font-size: 13px; margin-bottom: 4px; }
.fstat b { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; white-space: nowrap; }
.fstat.dark { background: var(--ink); color: var(--bg); border-color: transparent; }
.fstat.dark small { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.fstat.neg b { color: var(--danger); }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.f-tx { grid-row: span 2; }
.f-pay { grid-column: 1; }
.frow, .fcat { display: flex; align-items: center; gap: 12px; padding: 7px 4px; min-width: 0; }
.frow .grow, .fcat .grow { flex: 1; min-width: 0; }
.frow b, .fcat b { display: block; font-weight: 550; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow small { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow em, .fcat em { font-style: normal; font-family: var(--display); font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.frow em.neg { color: var(--danger); }
.frow em.income { color: #2F7D4F; }
.frow .h-ic { width: 34px; height: 34px; }
.frow .h-ic svg { width: 16px; height: 16px; }
.frow .h-ic.income { background: color-mix(in srgb, #2F7D4F 14%, transparent); color: #2F7D4F; }
.fcat .abar { margin-top: 6px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .pgadd, :root:is([data-theme="crema"], [data-theme="samapp"]) .fstat { background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .fstat { border-color: var(--rim); border-radius: var(--r-xl); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .fstat.dark { background: var(--k); color: var(--k-ink); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .cday { background: rgba(28, 28, 26, .04); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .cday.sel { background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .seg { background: var(--sunk); }
@container read (max-width: 1500px) { .pcols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container read (max-width: 1040px) {
  .pcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calwrap { grid-template-columns: minmax(0, 1fr); }
  .fstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: minmax(0, 1fr); } .f-tx { grid-row: auto; }
  .pgmonth b { min-width: 150px; font-size: 17px; }
}
@container read (max-width: 680px) { .pcols { grid-template-columns: minmax(0, 1fr); } .pgadd .seg { display: none; } .cday { min-height: 70px; padding: 5px; } .cev { display: none; } }
/* En ultrawide la página no se desplaza entera: cada zona se desplaza por dentro. */
@media (min-width: 1700px) and (max-height: 1150px) {
  .page .pg { overflow-y: auto; scrollbar-width: thin; padding: 2px 4px 8px 2px; margin: 0 -4px 0 -2px; }
  .page .pg .card { overflow: visible; }
  .pg-calendar .pg { overflow: hidden; display: flex; }
  .pg-calendar .calwrap { flex: 1; min-height: 0; align-items: stretch; }
  .pg-calendar .calcard { display: flex; flex-direction: column; min-height: 0; }
  .pg-calendar .cal { flex: 1; min-height: 0; grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
  .pg-calendar .cday { min-height: 0; overflow: hidden; padding: 6px 8px; }
  .pg-calendar .calside { overflow-y: auto !important; scrollbar-width: none; }
  .fstat { padding: 12px 18px; } .fstats { margin-bottom: 12px; }
}

/* flecha de cada tarjeta del Inicio: lleva a su página completa */
.card h3 .h-count + .go { margin-left: 10px; }
.card h3 button.go { flex: none; cursor: pointer; background: none; }
.card.dark h3 .go { border-color: color-mix(in srgb, var(--bg) 30%, transparent); color: var(--bg); }
.card.dark h3 .go:hover { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .card h3 button.go { background: var(--card); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .card.dark h3 button.go { background: transparent; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .card h3 button.go:hover { background: var(--hi); }

/* ---------- alta manual ---------- */
.h-nums .addbtn { height: 40px; align-self: center; margin-left: 8px; }
dialog.sheet.adddlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: hidden; }
dialog.sheet.adddlg[open] { display: flex; flex-direction: column; }
.adddlg header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px 22px; flex: none; }
.adddlg header .grow { flex: 1; }
.adddlg header b { display: block; font-family: var(--display); font-weight: 500; font-size: 22px; }
.adddlg header small { color: var(--ink-3); font-size: 13px; }
.akinds { display: flex; gap: 4px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: none; flex: none; }
.akinds button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.akinds button:hover { background: var(--hover); }
.akinds button.on { background: var(--ink); color: var(--bg); }
.aform { padding: 4px 22px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.afield { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.afield > span:first-child { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.afield > small { font-size: 12.5px; color: var(--ink-3); }
.afield .in { width: 100%; }
.afield textarea.in { resize: vertical; min-height: 44px; padding-top: 10px; padding-bottom: 10px; font: inherit; }
.afield .seg { flex-wrap: wrap; align-self: flex-start; border-radius: 18px; max-width: 100%; }
.afield .seg button { height: 34px; }
.seg.days button { width: 38px; padding: 0; }
.arow { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.arow > * { flex: 1 1 200px; }
.stepper { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; }
.stepper b { font-family: var(--display); font-weight: 400; font-size: 26px; min-width: 28px; text-align: center; }
.stepper .icon-btn { border: 1px solid var(--line); }
.afoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.aform .err { margin: 0; min-height: 0; }
.mcal { margin-top: 6px; padding: 10px; border-radius: 18px; background: var(--hover); align-self: flex-start; }
.mcal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mcal-h b { font-size: 14px; }
.mcal-h b::first-letter { text-transform: uppercase; }
.mcal-h .icon-btn { width: 30px; height: 30px; }
.mcal-g { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px; }
.mcal-g small { text-align: center; font-size: 11px; color: var(--ink-3); font-weight: 600; padding: 2px 0; }
.mcal-g button { height: 34px; border-radius: 50%; font-size: 13.5px; }
.mcal-g button:hover { background: var(--panel); }
.mcal-g button.out { opacity: .35; }
.mcal-g button.now { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mcal-g button.on { background: var(--ink); color: var(--bg); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .mcal { background: var(--sunk); }
:root:is([data-theme="crema"], [data-theme="samapp"]) .mcal-g button.on { color: var(--hi); }
@media (min-width: 1700px) and (max-height: 1150px) { .h-nums .addbtn { height: 36px; } }

/* ---------- marca Samapp 2.0 y logo de Sillas MX ---------- */
.brand-mark.sam { background: #1C1C1A; border-radius: 50%; overflow: hidden; box-shadow: none; }
.brand-mark.sam img { width: 76%; height: 76%; object-fit: contain; display: block; }
.brand .lbl small { font-size: .62em; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--hi); color: var(--hi-ink); vertical-align: middle; margin-left: 2px; letter-spacing: 0; }
.card h3.h-logo > span { font-size: 13px; font-family: inherit; font-weight: 600; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.card h3.h-logo img { height: 26px; width: auto; display: block; }

/* ---------- chat de Sam: copia exacta de Samapp 2.4.0 ---------- */
/* Valores tomados de tokens.css y base.css de Samapp (tema claro, paleta pastel, modo color): misma fuente
   (Quicksand), mismos colores, medidas, radios y sombras. Todo vive bajo .samdlg para no tocar el resto. */
@font-face { font-family: 'Quicksand'; src: url('quicksand-latin-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
.samdlg {
  --paper: #FCF8F3; --surface: #FFFFFF; --surface-sunken: #F3EFE9; --surface-hover: #EBE5DC;
  --s-ink: #22262B; --ink-strong: #14171A; --ink-muted: #5B6670; --ink-faint: #98A0A8; --s-line: #E0E0E0; --line-strong: #CDC5BB;
  --action: #101B2A; --action-hover: #1E2C3F; --ink-on-color: #22262B;
  --color-red: #F69996; --color-coral: #F69A89; --color-orange: #FDC28F; --color-yellow: #FFE095; --color-green: #9DE7B7; --color-teal: #9CE7DA; --color-blue: #ABC2F6; --color-magenta: #ECB8F6;
  --ctx-finanzas: var(--color-teal); --ctx-atencion: var(--color-red); --tone-canvas: var(--surface);
  --tint-atencion: color-mix(in srgb, var(--ctx-atencion) 22%, var(--tone-canvas));
  --shadow-low: 0 1px 2px rgba(16, 27, 42, .05); --shadow-card: 0 1px 1px rgba(16, 27, 42, .04), 0 8px 24px -16px rgba(16, 27, 42, .16);
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: var(--s-ink);
}
dialog.sheet.samdlg, :root:is([data-theme="crema"], [data-theme="samapp"]) dialog.sheet.samdlg { background: var(--paper); width: min(760px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 40px)); border-radius: 22px; }
.samdlg header { border-bottom: 1px solid var(--s-line); background: var(--paper); }
.samdlg header b { font-family: inherit; font-weight: 700; font-size: 18px; color: var(--ink-strong); }
.samdlg header small { color: var(--ink-muted); }
.sam-face { width: 38px; height: 38px; border-radius: 50%; background: #1C1C1A; display: grid; place-items: center; flex: none; overflow: hidden; }
.sam-face img { width: 74%; height: 74%; object-fit: contain; }
.samdlg .samlog { gap: 12px; padding: 16px 20px; }
.samdlg .i { display: inline-flex; align-items: center; justify-content: center; }
.samdlg .i svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.samdlg .msg { max-width: 84%; animation: rise .3s var(--ease) both; }
.samdlg .msg p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.samdlg .msg-user { align-self: flex-end; padding: 10px 16px; background: var(--tint-atencion); border-radius: 14px 14px 8px 14px; }
.samdlg .msg-sam { align-self: flex-start; padding: 10px 16px; background: var(--surface-sunken); border-radius: 14px 14px 14px 8px; }
.samdlg .msg-group { display: flex; flex-direction: column; align-items: flex-start; max-width: 84%; }
.samdlg .msg-group .msg { max-width: 100%; }
.samdlg .msg-group.has-props { width: min(720px, 94%); max-width: min(720px, 94%); }
.samdlg .serr { color: #B3261E; }
.samdlg .msg-sam.wait { display: inline-flex; gap: 5px; padding: 14px 16px; }
.samdlg .msg-sam.wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: samdot 1s infinite ease-in-out; }
.samdlg .msg-sam.wait i:nth-child(2) { animation-delay: .15s; } .samdlg .msg-sam.wait i:nth-child(3) { animation-delay: .3s; }

.proposal { --proposal-tone: var(--color-blue); position: relative; overflow: hidden; width: 100%; margin-top: 12px; padding: 20px; border-radius: 18px; box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in srgb, var(--proposal-tone) 28%, var(--s-line)); background: color-mix(in srgb, var(--proposal-tone) 9%, var(--surface)); animation: rise .3s var(--ease) both; }
.proposal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--proposal-tone); }
.proposal[data-tone="task"] { --proposal-tone: var(--color-blue); }
.proposal[data-tone="calendar"] { --proposal-tone: var(--color-magenta); }
.proposal[data-tone="expense"] { --proposal-tone: var(--color-coral); }
.proposal[data-tone="income"] { --proposal-tone: var(--color-green); }
.proposal[data-tone="commitment"] { --proposal-tone: var(--color-orange); }
.proposal[data-tone="list"] { --proposal-tone: var(--color-yellow); }
.proposal[data-tone="info"] { --proposal-tone: var(--color-blue); }
.proposal[data-tone="danger"] { --proposal-tone: var(--ctx-atencion); }
.proposal[data-tone="habit"] { --proposal-tone: var(--ctx-finanzas); }
.prop-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.prop-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--proposal-tone) 16%, var(--surface)); color: color-mix(in srgb, var(--proposal-tone) 55%, var(--ink-strong)); }
.prop-icon .i { font-size: 18px; }
.prop-head-main { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; min-width: 0; }
.prop-head-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 auto; }
.prop-verb { display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--proposal-tone) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--proposal-tone) 24%, transparent);
  color: color-mix(in srgb, var(--proposal-tone) 38%, var(--s-ink)); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.prop-title { font-size: 16px; font-weight: 600; color: var(--ink-strong); line-height: 1.35; overflow-wrap: anywhere; }
.prop-headline { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; text-align: right; margin-left: auto; }
.prop-headline small { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-muted); }
.prop-headline b { font-size: 19px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-strong); letter-spacing: -.01em; }
.prop-fields { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s-line); display: flex; flex-direction: column; gap: 6px; }
.prop-field { display: grid; grid-template-columns: minmax(64px, max-content) 1fr; gap: 4px 14px; align-items: baseline; padding: 6px 0; }
.prop-field + .prop-field { border-top: 1px solid color-mix(in srgb, var(--s-line) 62%, transparent); }
.prop-field > span { min-width: 0; font-size: 13px; color: var(--ink-muted); }
.prop-field b { min-width: 0; text-align: right; font-size: 15px; font-weight: 500; color: var(--s-ink); overflow-wrap: anywhere; word-break: normal; }
.proposal .prop-field .prop-field-icon { display: inline-flex; width: 1em; height: 1em; margin-right: 6px; vertical-align: -0.14em; font-size: inherit; color: var(--ink-muted); }
.proposal .prop-field-value { font-style: normal; }
.prop-actions { display: flex; gap: 8px; margin-top: 16px; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, filter .15s; }
.pbtn-secondary { flex: 0 1 auto; background: var(--surface); color: var(--s-ink); border-color: var(--line-strong); }
.pbtn-secondary:hover { background: var(--surface-hover); }
.pbtn-primary { flex: 1 1 auto; background: color-mix(in srgb, var(--proposal-tone) 92%, #fff 8%); color: var(--ink-on-color); }
.pbtn-primary:hover { filter: brightness(.96); }
.proposal.is-saving .prop-actions .pbtn { opacity: .55; pointer-events: none; }
.proposal.is-saving .prop-actions .pbtn-primary::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; vertical-align: -2px; animation: spin .7s linear infinite; }
.proposal.done { --proposal-tone: var(--ctx-finanzas); background: color-mix(in srgb, var(--color-green) 11%, var(--surface)); border-color: color-mix(in srgb, var(--color-green) 30%, var(--s-line)); box-shadow: var(--shadow-low); }
.proposal .prop-icon-state { width: 40px; height: 40px; }
.proposal .prop-icon-state .i { font-size: 22px; }
.proposal.done .prop-icon-state { background: color-mix(in srgb, var(--ctx-finanzas) 22%, var(--tone-canvas)); color: color-mix(in srgb, var(--ctx-finanzas) 40%, var(--ink-strong)); animation: propDone .55s var(--spring) both; }
.proposal.done .prop-icon-state .i svg { stroke-width: 2.6; }
.proposal.done .prop-verb { background: color-mix(in srgb, var(--ctx-finanzas) 16%, var(--tone-canvas)); border-color: color-mix(in srgb, var(--ctx-finanzas) 26%, transparent); color: color-mix(in srgb, var(--ctx-finanzas) 40%, var(--ink-strong)); }
.prop-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ctx-finanzas) 22%, var(--s-line)); font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--ctx-finanzas) 40%, var(--ink-strong)); }
.prop-done-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prop-done svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.prop-done-text b { font-weight: 700; }
.prop-done-go { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px 0 10px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.prop-done-go .i { font-size: 16px; }
.prop-done-go:hover { text-decoration: underline; }
.proposal.blocked { border-color: color-mix(in srgb, var(--ctx-atencion) 36%, var(--s-line)); }
.prop-blocked { margin-top: 12px; padding: 10px 12px; border-radius: 11px; border-left: 3px solid var(--ctx-atencion); background: var(--tint-atencion); color: var(--s-ink); font-size: 13px; }
.prop-need { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s-line); }
.prop-need > p { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.prop-account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.account-choice { min-height: 40px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--s-ink); font: inherit; font-size: 13px; cursor: pointer; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-choice:hover { background: var(--surface-hover); }
.proposal.discarded { --proposal-tone: var(--ink-faint); background: var(--surface-sunken); border-color: var(--s-line); box-shadow: none; }
.proposal.discarded .prop-icon-state { width: 34px; height: 34px; background: var(--surface); color: var(--ink-muted); }
.proposal.discarded .prop-icon-state .i { font-size: 18px; }
.proposal.discarded .prop-verb { background: var(--surface); border-color: var(--s-line); color: var(--ink-muted); }
.proposal.discarded .prop-title { color: var(--ink-muted); font-weight: 500; }
.proposal .prop-was { display: block; font-size: 13px; color: var(--ink-muted); }
@keyframes propDone { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: none; opacity: 1; } }
.samdlg .sambar.in-dlg { background: var(--surface); border-color: var(--line-strong); font-family: inherit; }
.samdlg .sambar.in-dlg input { font-family: inherit; color: var(--s-ink); }
.samdlg .sambar.in-dlg .btn.primary { background: var(--action); color: #fff; }

/* ---------- marca de Sam en lugar del ícono genérico, y correos que Sam revisó ---------- */
.sambar .sam-face { width: 38px; height: 38px; }
.samface-btn .sam-face { width: 26px; height: 26px; }
.samface-btn:hover .sam-face { transform: scale(1.08); }
.sam-face { transition: transform .2s var(--spring); }
.smails { width: 100%; margin-top: 10px; border: 1px solid var(--s-line, var(--line)); border-radius: 14px; background: var(--surface, var(--panel)); overflow: hidden; }
.smails summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink-muted, var(--ink-2)); cursor: pointer; list-style: none; }
.smails summary::-webkit-details-marker { display: none; }
.smails summary .ic svg { width: 15px; height: 15px; }
.smails[open] summary { border-bottom: 1px solid var(--s-line, var(--line)); }
.smail { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 14px; font: inherit; }
.smail:hover { background: var(--surface-hover, var(--hover)); }
.smail .grow { flex: 1; min-width: 0; }
.smail b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smail small { display: block; font-size: 12.5px; color: var(--ink-muted, var(--ink-3)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smail time { font-size: 12px; color: var(--ink-muted, var(--ink-3)); white-space: nowrap; }
@media (min-width: 1700px) and (max-height: 1150px) { .sambar .sam-face { width: 34px; height: 34px; } }

/* ===== tema Samapp: la tipografía y los colores de Samapp en toda la app ===== */
/* Valores de tokens.css de Samapp 2.4.0 (tema claro, paleta pastel). Comparte la estructura del tema Crema
   (paneles flotantes, píldoras, tarjetas); aquí sólo cambian la fuente y los colores. */
:root[data-theme="samapp"] {
  color-scheme: light;
  --bg: #FCF8F3; --panel: #FFFFFF; --ink: #22262B; --line: #E0E0E0; --hover: #F3EFE9; --mix: #FFFFFF; --danger: #D9433A;
  --accent: #101B2A; --accent-2: #ABC2F6; --accent-ink: #FFFFFF; --grad: #101B2A;
  --side: #FCF8F3; --side-2: #F3EFE9; --side-3: #EBE5DC; --side-line: #E0E0E0; --side-ink: #22262B;
  --k: #101B2A; --k-ink: #FFFFFF; --card: #FFFFFF; --sunk: #F3EFE9;
  --hi: #FFE095; --hi-ink: #22262B; --hi-soft: #FBF1CF; --glass: rgba(255, 255, 255, .9); --rim: #EDE7DD; --r-xl: 22px;
  --sm-blue: #ABC2F6; --sm-magenta: #ECB8F6; --sm-coral: #F69A89; --sm-orange: #FDC28F; --sm-yellow: #FFE095; --sm-green: #9DE7B7; --sm-teal: #9CE7DA; --sm-red: #F69996;
  --display: 'Quicksand', "Inter Variable", system-ui, sans-serif;
  --body-bg: transparent; --body-pad: 0; --body-line: transparent; --body-shadow: none;
  --shadow: 0 1px 1px rgba(16, 27, 42, .04), 0 8px 24px -16px rgba(16, 27, 42, .16); --shadow-lg: 0 2px 6px rgba(16, 27, 42, .06), 0 28px 70px rgba(16, 27, 42, .2);
}
:root[data-theme="samapp"] body { background: #FCF8F3; }
:root[data-theme="samapp"] body, :root[data-theme="samapp"] button, :root[data-theme="samapp"] input, :root[data-theme="samapp"] textarea, :root[data-theme="samapp"] select { font-family: 'Quicksand', "Inter Variable", system-ui, sans-serif; }
:root[data-theme="samapp"] body { font-weight: 500; }
:root[data-theme="samapp"] :is(.home h1, .subject h2, .today h2) { font-weight: 600; letter-spacing: -.01em; }
:root[data-theme="samapp"] :is(.h-num b, .card .big b, .h-count, .fstat b, .frow em, .fcat em, .stepper b, .cday > b, .aday > b, .prop-headline b) { font-weight: 600; }
:root[data-theme="samapp"] :is(.card h3, .brand, .pgmonth b, .from .who b, .samdlg header b, .adddlg header b) { font-weight: 700; }
:root[data-theme="samapp"] .card h3 { font-size: 19px; }
:root[data-theme="samapp"] :is(.row .who, .row .subj, .h-row b, .h-tmain b, .frow b, .fcat b) { font-weight: 600; }
:root[data-theme="samapp"] .row.unread :is(.who, .subj) { font-weight: 700; }
:root[data-theme="samapp"] .nav.on .ic { color: var(--sm-yellow); }
:root[data-theme="samapp"] .card.dark, :root[data-theme="samapp"] .fstat.dark { background: #101B2A; color: #FFFFFF; }
:root[data-theme="samapp"] .aday.now > b, :root[data-theme="samapp"] .cday.now > b { background: #101B2A; color: var(--sm-yellow); }
:root[data-theme="samapp"] .row.sel { box-shadow: none; }
:root[data-theme="samapp"] .list, :root[data-theme="samapp"] .read { backdrop-filter: none; }
/* Cada zona con el pastel de su área en Samapp: pendientes azul, calendario magenta, finanzas verde azulado, listas amarillo. */
:root[data-theme="samapp"] .card.c-week, :root[data-theme="samapp"] .fstat:not(.dark) { background: color-mix(in srgb, var(--sm-teal) 13%, #FFFFFF); border-color: color-mix(in srgb, var(--sm-teal) 34%, var(--line)); }
:root[data-theme="samapp"] .card.c-orders { background: color-mix(in srgb, var(--sm-orange) 13%, #FFFFFF); border-color: color-mix(in srgb, var(--sm-orange) 36%, var(--line)); }
:root[data-theme="samapp"] .card.c-agenda, :root[data-theme="samapp"] .card.calcard, :root[data-theme="samapp"] .card.calside { background: color-mix(in srgb, var(--sm-magenta) 10%, #FFFFFF); border-color: color-mix(in srgb, var(--sm-magenta) 34%, var(--line)); }
:root[data-theme="samapp"] .card.c-files, :root[data-theme="samapp"] .card.hcard { background: color-mix(in srgb, var(--sm-green) 12%, #FFFFFF); border-color: color-mix(in srgb, var(--sm-green) 36%, var(--line)); }
:root[data-theme="samapp"] .card.c-accs, :root[data-theme="samapp"] .card.lcard { background: color-mix(in srgb, var(--sm-yellow) 18%, #FFFFFF); border-color: color-mix(in srgb, var(--sm-yellow) 60%, var(--line)); }
:root[data-theme="samapp"] .pcols .card.c-sam { background: color-mix(in srgb, var(--sm-blue) 11%, #FFFFFF); border-color: color-mix(in srgb, var(--sm-blue) 36%, var(--line)); }
:root[data-theme="samapp"] :is(.f-acc, .f-tx, .f-cat) { background: #FFFFFF; }
:root[data-theme="samapp"] .card.f-pay { background: color-mix(in srgb, var(--sm-orange) 13%, #FFFFFF); border-color: color-mix(in srgb, var(--sm-orange) 36%, var(--line)); }
:root[data-theme="samapp"] .home.sam .kbar.k1::before { background: var(--sm-blue); }
:root[data-theme="samapp"] .home.sam .kbar.k2::before { background: var(--sm-green); }
:root[data-theme="samapp"] .home.sam .kbar.k3::before { background: var(--sm-coral); }
:root[data-theme="samapp"] .home.sam .kbar.k4::before { background: var(--sm-yellow); box-shadow: none; }
:root[data-theme="samapp"] .kbar.k1 { background: var(--sm-blue); color: #22262B; }
:root[data-theme="samapp"] .kbar.k2 { background: var(--sm-green); color: #22262B; }
:root[data-theme="samapp"] .wbar i { background: color-mix(in srgb, var(--sm-teal) 55%, #22262B); }
:root[data-theme="samapp"] .wbar.now i { background: #101B2A; }
:root[data-theme="samapp"] .wbar em { background: #101B2A; color: #FFFFFF; }
:root[data-theme="samapp"] .c-files .h-task.done .h-check, :root[data-theme="samapp"] .hd.done i { background: var(--sm-green); border-color: var(--sm-green); color: #14171A; }
:root[data-theme="samapp"] .card.dark .h-task.done .h-check { background: var(--sm-blue); border-color: var(--sm-blue); color: #14171A; }
:root[data-theme="samapp"] .aev:not(.mail) { background: #101B2A; }
:root[data-theme="samapp"] .aev.follow, :root[data-theme="samapp"] .cev.pay { background: var(--sm-orange); color: #22262B; }
:root[data-theme="samapp"] .cev:not(.done) { background: color-mix(in srgb, var(--sm-blue) 75%, #FFFFFF); color: #14171A; }
:root[data-theme="samapp"] .abar i { background: color-mix(in srgb, var(--sm-teal) 60%, #22262B); }
:root[data-theme="samapp"] .frow .h-ic.income, :root[data-theme="samapp"] .frow em.income { color: #31755E; }
:root[data-theme="samapp"] .frow .h-ic.income { background: color-mix(in srgb, var(--sm-green) 40%, #FFFFFF); }
:root[data-theme="samapp"] .brand .lbl small { background: var(--sm-yellow); color: #22262B; }
:root[data-theme="samapp"] .sam-face, :root[data-theme="samapp"] .brand-mark.sam { background: #101B2A; }
:root[data-theme="samapp"] .mcal-g button.on { color: #FFFFFF; }
:root[data-theme="samapp"] .akinds button.on, :root[data-theme="samapp"] .seg button.on { background: #101B2A; color: #FFFFFF; }
:root[data-theme="samapp"] .att .vw { background: #101B2A; color: #FFFFFF; }

/* ---------- tema Bosque con la tipografía de Samapp (Quicksand) ---------- */
:root[data-theme="bosque"] { --display: 'Quicksand', "Inter Variable", system-ui, sans-serif; }
:root[data-theme="bosque"] body, :root[data-theme="bosque"] button, :root[data-theme="bosque"] input, :root[data-theme="bosque"] textarea, :root[data-theme="bosque"] select { font-family: 'Quicksand', "Inter Variable", system-ui, sans-serif; }
:root[data-theme="bosque"] body { font-weight: 500; }
:root[data-theme="bosque"] :is(.home h1, .subject h2, .today h2) { font-weight: 600; letter-spacing: -.01em; }
:root[data-theme="bosque"] :is(.h-num b, .card .big b, .h-count, .fstat b, .frow em, .fcat em, .stepper b, .cday > b, .aday > b) { font-weight: 600; }
:root[data-theme="bosque"] :is(.card h3, .brand, .pgmonth b, .from .who b, .adddlg header b) { font-weight: 700; }
:root[data-theme="bosque"] :is(.row .who, .row .subj, .h-row b, .h-tmain b, .frow b, .fcat b) { font-weight: 600; }
:root[data-theme="bosque"] .row.unread :is(.who, .subj) { font-weight: 700; }

/* Las burbujas del chat de Sam no deben heredar el .msg del lector de correos (que se estira a todo el alto y ancho). */
.samdlg .msg { flex: 0 0 auto; display: block; width: auto; margin: 0; }
.samdlg .msg-user { margin-left: auto; }
.samdlg .msg > * { animation: none; }

/* ---------- correcciones de la auditoría (tanda 1) ---------- */
.set .err { color: var(--danger); margin: 0; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .sendgrp .btn:first-child { border-radius: 999px 0 0 999px; }
:root:is([data-theme="crema"], [data-theme="samapp"]) .sendgrp .btn:last-child { border-radius: 0 999px 999px 0; }
/* Mes de seis semanas en pantalla baja: caben dos avisos por día; el resto se ve al elegir el día. */
@media (min-width: 1700px) and (max-height: 1150px) { .pg-calendar .cal[style*="--rows:6"] .cev:nth-of-type(n+3) { display: none; } }
/* Bosque: el correo abierto se distingue en la lista y las tarjetas responden al pasar el cursor. */
:root[data-theme="bosque"] .row.sel { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent); }
:root[data-theme="bosque"] .row.sel .accdot { box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 20%, var(--panel)); }
:root[data-theme="bosque"] :where(.bento, .pg) .card { transition: transform .35s var(--spring), box-shadow .35s; }
:root[data-theme="bosque"] :where(.bento, .pg) .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ===== tanda 2: menú de renglón, buscador de pendientes, vistas del calendario, registrar pago ===== */
.h-more { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: .4; transition: opacity .15s, background .15s; }
.h-more svg { width: 16px; height: 16px; }
.h-more:hover, .h-more:focus-visible, .h-task:hover .h-more, .frow:hover .h-more { opacity: 1; }
.h-more:hover, .h-more:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); }
.card h3 .h-more { margin-left: -2px; }
.h-task[hidden] { display: none; }
.pop .item.danger, .pop .item.danger .ic { color: var(--danger); }
.pgtop { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.pgtop .pgadd { flex: 1 1 420px; margin: 0; }
.pgsearch { flex: 0 1 300px; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-3); cursor: text; }
.pgsearch:focus-within { border-color: var(--ink); }
.pgsearch svg { width: 17px; height: 17px; flex: none; }
.pgsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; }
.calbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.calbar .calnav b { font-size: 17px; min-width: 250px; }
.wkgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: start; }
.wkday h3 { margin-bottom: 8px; }
.wk-h { display: inline-flex; align-items: baseline; gap: 7px; color: inherit; font: inherit; font-size: 15px; text-transform: capitalize; cursor: pointer; }
.wk-h b { font-size: 26px; font-weight: 500; }
.daybig { max-width: 780px; }
.paybtn { height: 32px; padding: 0 14px; flex: none; font-size: 13px; }
.asum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--hover); }
.asum b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asum span { font-family: var(--display); font-size: 18px; white-space: nowrap; }
@media (max-width: 1500px) { .wkgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .wkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgsearch { flex: 1 1 100%; } }
.pg-calendar .pg { flex-direction: column; }
.pg-calendar .calbar { flex: none; }
.pg-calendar .wkgrid, .pg-calendar .daybig { overflow-y: auto; scrollbar-width: none; min-height: 0; }
.pg-calendar .daybig { width: 100%; }
.wkday .h-tmain b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; }
.wkday .h-task { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }

/* ===== tanda 3: repeticiones y menús de listas ===== */
.f-rec { grid-column: 3; }
.frow.off { opacity: .55; }
.lcard .h-task .h-more { opacity: .3; }
@media (max-width: 1300px) { .f-rec { grid-column: auto; } }
@container read (max-width: 1040px) { .f-rec { grid-column: auto; } }
.akinds { flex-wrap: wrap; row-gap: 4px; }

/* ===== tanda 4 ===== */
.frow[hidden] { display: none; }
.c-todo .h-more { opacity: .5; }

/* ===== Inicio reacomodado: correo sin leer arriba, hábitos abajo, listas bajo los pendientes de hoy ===== */
.c-week { grid-column: 1 / 5; grid-row: 1; } .c-orders { grid-column: 5 / 9; grid-row: 1; } .c-todo { grid-column: 9 / 13; grid-row: 1; }
.c-agenda { grid-column: 1 / 9; grid-row: 2; } .c-accs { grid-column: 9 / 13; grid-row: 2; }
.c-mail { grid-column: 1 / 7; grid-row: 3; } .c-files { grid-column: 7 / 13; grid-row: 3; }
@container read (min-width: 1500px) {
  .c-week { grid-column: 1 / 4; grid-row: 1; } .c-orders { grid-column: 4 / 7; grid-row: 1; } .c-mail { grid-column: 7 / 10; grid-row: 1; } .c-todo { grid-column: 10 / 13; grid-row: 1; }
  .c-agenda { grid-column: 1 / 7; grid-row: 2; } .c-files { grid-column: 7 / 10; grid-row: 2; } .c-accs { grid-column: 10 / 13; grid-row: 2; }
}
@container read (max-width: 1040px) {
  .c-week { grid-column: 1 / 7; grid-row: 1; } .c-orders { grid-column: 7 / 13; grid-row: 1; }
  .c-todo { grid-column: 1 / 7; grid-row: 2; } .c-accs { grid-column: 7 / 13; grid-row: 2; }
  .c-agenda { grid-column: 1 / 13; grid-row: 3; }
  .c-mail { grid-column: 1 / 7; grid-row: 4; } .c-files { grid-column: 7 / 13; grid-row: 4; }
}
.bento .c-mail { overflow-y: auto; scrollbar-width: none; }
.c-mail .h-note { margin: 0 0 10px; }
.c-mail .today-row { width: 100%; margin-bottom: 8px; }

/* ===== hábitos: palomitas centradas y encabezado que no se desacomoda ===== */
.pgrid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.hcard h3 { align-items: center; line-height: 1.25; }
.hcard h3 .h-count { white-space: nowrap; flex: none; }
.hcard h3 .h-more { flex: none; }
.hdays { gap: 6px 2px; justify-items: center; }
.hd { width: 100%; gap: 6px; }
.hd i { width: 20px; height: 20px; max-width: none; aspect-ratio: auto; flex: none; font-style: normal; line-height: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.hd i svg { width: 12px; height: 12px; display: block; flex: none; stroke-width: 2.6; }
.hd.now i { box-shadow: none; border: 2px solid var(--ink); }
.hd.now.done i { border-color: var(--hi); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--hi); }

/* ===== listas plegables en el Inicio ===== */
button.h-lt { width: calc(100% - 4px); margin: 4px 2px 2px; padding: 8px 8px; border-radius: 12px; align-items: center; text-align: left; cursor: pointer; font-family: inherit; transition: background .15s; }
button.h-lt:hover { background: var(--hover); }
button.h-lt .chev { display: inline-flex; flex: none; transition: transform .2s var(--ease); transform: rotate(-90deg); }
button.h-lt .chev svg { width: 15px; height: 15px; }
button.h-lt.open .chev { transform: none; }
button.h-lt.open { color: var(--ink-2); }

/* ===== tarjeta de Finanzas del Inicio: balance, entró/salió y últimos movimientos ===== */
.c-week .big b.neg { color: var(--danger); }
.fio { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.fio-r { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fio-r small { color: var(--ink-3); font-size: 12.5px; }
.fio-r em { font-style: normal; font-family: var(--display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.fio-r .abar { height: 10px; }
.fio-r.ent .abar i { background: #2F7D4F; }
.h-lt2 { margin: 0 4px 2px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.c-week .frow { padding: 5px 2px; }
.bento .c-week { overflow-y: auto; scrollbar-width: none; }
.fio-r .abar { margin-top: 0; }

/* ===== calendario por semana: siete columnas parejas que llenan la página, títulos completos ===== */
.pg-calendar .wkgrid { flex: 1 1 auto; align-items: stretch; gap: 10px; }
.wkday { min-height: 340px; padding: 16px 12px 12px !important; overflow-y: auto; scrollbar-width: none; }
.wkday h3 { padding: 0 4px; margin-bottom: 10px; }
.wkday h3 .h-count { font-size: 18px; opacity: .55; }
.wkday .h-task { align-items: flex-start; gap: 4px; padding: 8px 4px 8px 8px; margin-bottom: 6px; border-radius: 14px; background: color-mix(in srgb, currentColor 6%, transparent); }
.wkday .h-tmain { align-items: flex-start; min-width: 0; flex: 1; }
.wkday .h-tmain .h-ic { display: none; }
.wkday .h-tmain b { display: block; white-space: normal; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
.wkday .h-tmain small { margin-top: 3px; }
.wkday .h-more { width: 22px; height: 24px; opacity: 0; }
.wkday .h-task:hover .h-more, .wkday .h-more:focus-visible { opacity: 1; }
.wkday .h-check { width: 24px; height: 24px; }
.wkday .h-check svg { width: 12px; height: 12px; }
.wkday .paybtn { height: 26px; padding: 0 10px; font-size: 12px; }
.wkday .h-empty { padding: 26px 0 0; opacity: .45; gap: 6px; font-size: 12.5px; }
.wkday .h-empty svg { width: 18px; height: 18px; }
.wkday .h-empty { flex: none; }
.wkday { min-height: 200px; }

/* ===== tanda 5: resultado de la autoprueba en Ajustes ===== */
.testlist { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.testlist li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.testlist li svg { width: 16px; height: 16px; flex: none; }
.testlist li.ok svg { color: #2F7D4F; }
.testlist li.bad { color: var(--danger); }

/* ===== tanda 6: gráfica día a día en Finanzas y comparación con el mes pasado ===== */
.fstat em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-days { margin-bottom: 14px; }
.f-key { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.f-key i { width: 10px; height: 10px; border-radius: 3px; margin-left: 10px; background: var(--hi); }
.f-key i.ent, .dbar i.ent { background: #2F7D4F; }
.dbars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 150px; align-items: end; }
.dbar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.dcol { flex: 1; width: 100%; max-width: 26px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--line); }
.dcol i { flex: 1; max-width: 10px; height: max(var(--h), 0%); min-height: 0; border-radius: 4px 4px 0 0; background: var(--hi); }
.dcol i[style*="--h:0%"] { visibility: hidden; }
.dbar small { height: 14px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dbar.now small { color: var(--ink); font-weight: 700; }
.home.enter .dcol i { transform-origin: bottom; animation: growy .7s var(--ease) .3s both; }
.dbars { height: 112px; }
.dcol { max-width: 40px; gap: 3px; }
.dcol i { max-width: 15px; min-width: 4px; }

/* ===== tanda 7: correcciones de la revisión ===== */
.card.dark .paybtn { color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.pg-calendar .daybig { overflow-y: auto !important; }
.pgtop .pgadd { flex: 1 1 520px; }
.lcard .h-task:hover .h-more, .lcard .h-more:focus-visible, .c-todo .h-task:hover .h-more, .c-todo .h-more:focus-visible { opacity: 1; }
.wkday h3 { flex-wrap: wrap; }

/* ===== Bosque renovado (08-oct-2026): paneles flotantes, un color por sección, cabecera con anillos, menos huecos ===== */
:root[data-theme="bosque"] {
  --c-task: #2A2923; --c-habit: #587C42; --c-fin: #2A6C72; --c-list: #B4841A; --c-mail: #B26F3B; --c-cal: #47678C; --c-shop: #C27D08;
  --sec: var(--c-task);
  --glass: rgba(255, 252, 244, .76); --rim: rgba(255, 255, 255, .9);
  --lift: 0 1px 1px rgba(60, 45, 20, .05), 0 14px 30px -16px rgba(70, 52, 20, .30), 0 34px 60px -44px rgba(60, 45, 20, .40);
}

/* ---------- 1. paneles flotantes ---------- */
:root[data-theme="bosque"] body { background: radial-gradient(1200px 640px at 90% -10%, #DCE5C9 0%, transparent 62%), radial-gradient(980px 660px at 16% 114%, #EDD4B8 0%, transparent 58%), #EEE7D6; background-attachment: fixed; }
:root[data-theme="bosque"] .app, :root[data-theme="bosque"] .read, :root[data-theme="bosque"] body.home .read { background: transparent; }
:root[data-theme="bosque"] .side { margin: 10px 0 10px 10px; border-radius: 26px; border: 0; box-shadow: 0 22px 44px -22px rgba(18, 34, 20, .7), 0 2px 0 rgba(255, 255, 255, .06) inset; }
:root[data-theme="bosque"] :where(.bento, .pg) .card:not(.dark) { background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 7%, transparent), transparent 130px), var(--glass); border: 1px solid var(--rim); border-radius: 28px; box-shadow: var(--lift); backdrop-filter: blur(14px) saturate(1.08); }
:root[data-theme="bosque"] :where(.bento, .pg) .card.dark { border-radius: 28px; box-shadow: 0 2px 0 rgba(255, 255, 255, .05) inset, 0 20px 40px -18px rgba(20, 18, 12, .6); }
:root[data-theme="bosque"] :where(.bento, .pg) .card:hover { transform: translateY(-3px); }
:root[data-theme="bosque"] .sambar, :root[data-theme="bosque"] .pgadd, :root[data-theme="bosque"] .pgsearch, :root[data-theme="bosque"] .fstat:not(.dark) { background: var(--glass); border-color: var(--rim); box-shadow: var(--lift); backdrop-filter: blur(14px); }
:root[data-theme="bosque"] .fstat { border-radius: 26px; }

/* ---------- 2. un color por sección ---------- */
:root[data-theme="bosque"] :is(.c-week, .pg-finance) { --sec: var(--c-fin); }
:root[data-theme="bosque"] :is(.c-files, .pg-habits) { --sec: var(--c-habit); }
:root[data-theme="bosque"] :is(.c-accs, .pg-lists) { --sec: var(--c-list); }
:root[data-theme="bosque"] .c-mail { --sec: var(--c-mail); }
:root[data-theme="bosque"] :is(.c-agenda, .pg-calendar) { --sec: var(--c-cal); }
:root[data-theme="bosque"] .c-orders { --sec: var(--c-shop); }
:root[data-theme="bosque"] :is(.c-todo, .pg-tasks) { --sec: var(--c-task); }
:root[data-theme="bosque"] :where(.bento, .pg) .card > h3::before { content: ""; width: 10px; height: 10px; border-radius: 3.5px; background: var(--sec); flex: none; }
:root[data-theme="bosque"] :where(.bento, .pg) .card.dark > h3::before { background: var(--hi); }
:root[data-theme="bosque"] .card h3.h-logo::before { display: none; }
:root[data-theme="bosque"] :where(.bento, .pg) .card:not(.dark) .h-ic { color: var(--sec); background: color-mix(in srgb, var(--sec) 13%, transparent); }
:root[data-theme="bosque"] :where(.bento, .pg) .card:not(.dark) .h-count { color: color-mix(in srgb, var(--sec) 82%, var(--ink)); }
:root[data-theme="bosque"] :where(.bento, .pg) .card:not(.dark) .abar i { background: var(--sec); }
:root[data-theme="bosque"] .c-files .h-task.done .h-check, :root[data-theme="bosque"] .pg-habits .hd.done i { background: var(--c-habit); border-color: var(--c-habit); color: #fff; }
:root[data-theme="bosque"] .c-accs .h-task.done .h-check, :root[data-theme="bosque"] .pg-lists .h-task.done .h-check { background: var(--c-list); border-color: var(--c-list); color: #fff; }
:root[data-theme="bosque"] .c-agenda .aday.now > b { background: var(--c-cal); color: #fff; }
:root[data-theme="bosque"] .c-agenda .aev:not(.follow) { background: color-mix(in srgb, var(--c-cal) 12%, var(--panel)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c-cal) 24%, transparent); box-shadow: none; }
:root[data-theme="bosque"] .c-agenda .aev:not(.follow) small { color: var(--c-cal); }
:root[data-theme="bosque"] .c-mail .today-row .n { color: var(--c-mail); }
:root[data-theme="bosque"] .side .nav.on { box-shadow: inset 3px 0 0 var(--accent-2); }

/* ---------- 3. cabecera con anillos ---------- */
:root[data-theme="bosque"] .h-top { align-items: center; margin-bottom: 14px; }
:root[data-theme="bosque"] .h-line { margin: 8px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); max-width: 62ch; }
:root[data-theme="bosque"] .h-line b { color: var(--ink); font-weight: 700; }
:root[data-theme="bosque"] .h-nums { align-items: center; gap: 4px; }
:root[data-theme="bosque"] .ring { position: relative; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px 8px; border-radius: 20px; cursor: pointer; transition: background .2s, transform .25s var(--spring); }
:root[data-theme="bosque"] .ring:hover { background: var(--glass); transform: translateY(-2px); }
:root[data-theme="bosque"] .ring svg { width: 62px; height: 62px; transform: rotate(-90deg); overflow: visible; }
:root[data-theme="bosque"] .ring circle { fill: none; stroke: color-mix(in srgb, var(--sec) 17%, transparent); stroke-width: 6.5; }
:root[data-theme="bosque"] .ring .arc { stroke: var(--sec); stroke-linecap: round; }
:root[data-theme="bosque"] .ring b { position: absolute; top: 6px; left: 0; right: 0; height: 62px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:root[data-theme="bosque"] .ring small { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
:root[data-theme="bosque"] .home.enter .ring .arc { animation: ringin 1.1s var(--ease) .2s both; }
@keyframes ringin { from { stroke-dasharray: 0 100; } }
:root[data-theme="bosque"] .h-avail { display: flex; flex-direction: column; padding: 0 10px 0 20px; margin-left: 10px; border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
:root[data-theme="bosque"] .h-avail small { font-size: 12.5px; color: var(--ink-2); }
:root[data-theme="bosque"] .h-avail b { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 1.9vw, 36px); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--c-fin); }
@media (prefers-reduced-motion: reduce) { :root[data-theme="bosque"] .home.enter .ring .arc { animation: none; } }

/* ---------- 4. menos huecos ---------- */
:root[data-theme="bosque"] .aday.free { padding-left: 2px; padding-right: 2px; }
:root[data-theme="bosque"] .aday.free > small, :root[data-theme="bosque"] .aday.free > b { opacity: .6; }
:root[data-theme="bosque"] .aday:not(.free) .aev { width: 100%; }
:root[data-theme="bosque"] .aday:not(.free) .aev b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; }
:root[data-theme="bosque"] .pgrid { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 18px; }
:root[data-theme="bosque"] .hcard, :root[data-theme="bosque"] .lcard { padding: 24px 26px 22px; }
:root[data-theme="bosque"] .hcard h3, :root[data-theme="bosque"] .lcard h3 { font-size: 22px; }
:root[data-theme="bosque"] .hd i { width: 26px; height: 26px; }
:root[data-theme="bosque"] .hd i svg { width: 14px; height: 14px; }
:root[data-theme="bosque"] .hdays { gap: 8px 2px; margin-top: 6px; }
:root[data-theme="bosque"] .litems { max-height: 520px; }
:root[data-theme="bosque"] .fgrid.cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
:root[data-theme="bosque"] .fcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
:root[data-theme="bosque"] .fgrid.cols :is(.f-tx, .f-pay, .f-rec) { grid-column: auto; grid-row: auto; }
@container read (max-width: 1040px) { :root[data-theme="bosque"] .fgrid.cols { grid-template-columns: minmax(0, 1fr); } }
:root[data-theme="bosque"] .c-week .fio-r.ent .abar i { background: var(--c-habit); }
:root[data-theme="bosque"] .c-week .fio-r.sal .abar i { background: var(--c-mail); }
:root[data-theme="bosque"] .titlebar { background: transparent; }
:root[data-theme="bosque"] body.desktop .side { margin-top: 0; }
:root[data-theme="bosque"] { --bar-bg: #E2E7D0; }

/* ---------- Inversiones: registro propio (sólo en esta PC) ---------- */
.sambar[hidden] { display: none; }
.igrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.igrid.solo { grid-template-columns: minmax(0, 1fr); }
.pg-invest .fstat.pos b { color: #2F7D4F; }
.ipos { align-items: flex-start; padding: 10px 4px; }
.ipos + .ipos { border-top: 1px solid var(--line); }
.ipos b i { font-style: normal; font-weight: 400; color: var(--ink-2); margin-left: 8px; }
.ipos .abar { max-width: 260px; }
.ival { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ival small { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ival small.pos { color: #2F7D4F; }
.ival small.neg { color: var(--danger); }
.pg-invest .card .frow .h-ic.income { background: color-mix(in srgb, #2F7D4F 14%, transparent); color: #2F7D4F; }
.pg-invest .card .frow .h-ic.loss { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.inote { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
:root[data-theme="bosque"] .pg-invest { --sec: var(--c-fin); }
@container read (max-width: 1040px) { .igrid { grid-template-columns: minmax(0, 1fr); } }

/* ===== menú de ortografía ===== */
.spellpop { min-width: 230px; }
.spellpop h5 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.spellpop .item b { font-weight: 700; }

/* ===== celular y tableta en vertical (hasta 860 px): el tablero es la pantalla principal y se navega con la barra de abajo ===== */
.mnav { display: none; }
@media (max-width: 860px) {
  /* el tablero y las páginas de Samapp ocupan la pantalla (antes sólo se veía la lista de correo) */
  body.home .read { transform: none; }
  .read > .home { padding: calc(14px + env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom)); }
  .rows { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* barra de abajo */
  .mnav { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 15; height: 64px; padding: 6px; gap: 2px; border-radius: 24px; background: var(--side); color: var(--side-ink); box-shadow: 0 18px 40px -14px rgba(18, 34, 20, .6), 0 2px 0 rgba(255, 255, 255, .06) inset; transition: transform .3s var(--ease); }
  .mnav button { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 18px; color: inherit; font-size: 11px; font-weight: 600; opacity: .68; transition: opacity .2s, background .2s; }
  .mnav button.on { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
  .mnav button:active { transform: scale(.94); }
  .mnav svg { width: 22px; height: 22px; }
  .mnav .ic { display: inline-flex; }
  .mnav .count { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-style: normal; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  body.reading .mnav, body.menu .mnav, body:has(dialog[open]) .mnav { transform: translateY(160%); }
  /* botón flotante: «Agregar» en el tablero, «Redactar» en el correo; siempre encima de la barra */
  .fab { bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 14; }
  body.home .fab:not(.fab-add), body:not(.home) .fab.fab-add { display: none; }
  body:has(dialog[open]) .fab { transform: scale(0); }
  .h-nums .addbtn { display: none; }
  /* el cajón lateral sale completo de la pantalla */
  :root[data-theme="bosque"] .side { margin: 0; border-radius: 0 26px 26px 0; }
  .side { transform: translateX(-108%); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* cabecera del tablero */
  .h-top { gap: 12px; margin-bottom: 12px; }
  .home h1 { font-size: 30px; }
  .h-nums { width: 100%; flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }
  :root[data-theme="bosque"] .ring { width: auto; flex: 1 1 0; min-width: 0; padding: 4px 0 6px; }
  :root[data-theme="bosque"] .ring svg { width: 56px; height: 56px; }
  :root[data-theme="bosque"] .ring b { top: 4px; height: 56px; font-size: 14px; }
  :root[data-theme="bosque"] .h-avail { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; margin: 0; padding: 10px 16px; border: 0; border-radius: 18px; background: var(--glass); box-shadow: var(--lift); }
  .h-nums [data-act="homeRefresh"] { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; margin: 0; }
  .h-top .h-nums .pgmonth { width: 100%; justify-content: space-between; margin: 0; }
  .read > .home { position: relative; }
  .sambar input { font-size: 16px; }
  /* dedos, no ratón */
  .h-check { width: 36px; height: 36px; }
  .h-more { width: 36px; height: 36px; opacity: .55; }
  .wkday .h-more { opacity: .55; }
  .card h3 .go { width: 38px; height: 38px; }
  .seg button { height: 36px; }
  .paybtn { height: 36px; }
  .pgadd input, .pgsearch input { font-size: 16px; }
}
/* una sola columna en pantallas angostas (celular) */
@container read (max-width: 680px) {
  .c-todo { order: 1; } .c-files { order: 2; } .c-accs { order: 3; } .c-agenda { order: 4; } .c-week { order: 5; } .c-mail { order: 6; } .c-orders { order: 7; }
  .bento .card { min-height: 0; }
  .c-agenda .agenda { grid-template-columns: repeat(7, minmax(104px, 1fr)) !important; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -8px; padding: 0 8px; }
  .c-agenda .aday { scroll-snap-align: start; }
  .pcols, .pgrid, :root[data-theme="bosque"] .pgrid, .wkgrid { grid-template-columns: minmax(0, 1fr); }
  .fstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fstat { padding: 12px 14px; border-radius: 20px; }
  .fstat b { font-size: 24px; }
  .pgtop { gap: 8px; }
  .pgtop .pgadd { flex: 1 1 100%; }
  .pgsearch { height: 46px; flex: 1 1 100%; }
  .calbar { gap: 8px; }
  .calbar .calnav b { min-width: 0; font-size: 15px; }
  .pgmonth b { min-width: 0; font-size: 16px; }
  .h-top .h-nums .pgmonth { flex: 1; justify-content: space-between; }
  .frow em { font-size: 15px; }
  :root[data-theme="bosque"] .hcard, :root[data-theme="bosque"] .lcard { padding: 18px 16px 16px; }
  :root[data-theme="bosque"] .hd i { width: 20px; height: 20px; }
  :root[data-theme="bosque"] .hd i svg { width: 12px; height: 12px; }
  .daybig { max-width: none; }
}
@container read (max-width: 680px) {
  /* calendario del mes en celular: número y puntitos; el detalle del día sale abajo */
  .cal { gap: 4px; }
  .cal-h { gap: 4px; }
  .cal-h span { padding: 0; text-align: center; }
  .cday { display: grid; grid-template-columns: repeat(3, 6px); justify-content: center; align-content: start; gap: 3px; min-height: 56px; padding: 6px 2px 8px; border-radius: 14px; }
  .cday > b { grid-column: 1 / -1; justify-self: center; }
  .cday .cev { width: 6px; height: 6px; padding: 0; font-size: 0; border-radius: 50%; }
  .cday .cev:nth-of-type(n+4), .cday .amore { display: none; }
  :root[data-theme="bosque"] .cday .cev:not(.pay):not(.done) { background: var(--c-cal); }
}
@container read (max-width: 680px) { .cday .cev { display: block; } .cday .cev:nth-of-type(n+4) { display: none; } }
@media (max-width: 860px) {
  /* las ventanas de Agregar/Editar y la de Sam llenan la pantalla del celular */
  dialog.sheet.adddlg, dialog.sheet.samdlg, :root:is([data-theme="crema"], [data-theme="samapp"]) dialog.sheet.samdlg { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .adddlg header { padding-top: calc(16px + env(safe-area-inset-top)); }
  .adddlg .aform { flex: 1; overflow-y: auto; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .adddlg .afoot { position: sticky; bottom: 0; }
  /* en tableta la barra no se estira de lado a lado */
  .mnav { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 860px) { .adddlg .aform { justify-content: flex-start; } .adddlg .aform > * { flex: none; } .adddlg .aform > .afoot { margin-top: auto; padding-top: 12px; background: var(--panel); } }
@media (max-width: 860px) { dialog.sheet.wide { width: 100vw; max-width: 100vw; } }

/* ===== celular: Sam al centro de la barra, menú de tres rayitas en la esquina, saludo de Sam ===== */
.mburger { display: none; }
.sam-hello { margin: auto; padding: 24px 18px; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sam-hello b { font-size: 22px; font-weight: 700; }
.sam-hello p { margin: 0; color: var(--ink-soft, #5B584C); font-size: 15px; line-height: 1.45; }
.sam-face.big { width: 72px; height: 72px; }
.sam-face.big img { width: 100%; height: 100%; }
.sam-tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.sam-tries button { padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); font: inherit; font-size: 14px; font-weight: 600; color: #1C1C1A; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.sam-tries button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4); }
@media (max-width: 860px) {
  .mburger { display: inline-flex; position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; width: 42px; height: 42px; z-index: 2; }
  .mburger svg { width: 24px; height: 24px; }
  .h-top .grow > .eyebrow { padding-left: 40px; min-height: 30px; display: flex; align-items: center; margin-bottom: 8px; }
  .mnav.con-sam { overflow: visible; }
  .mnav .sam { flex: 0 0 76px; opacity: 1; justify-content: flex-end; padding-bottom: 5px; gap: 2px; font-size: 11.5px; font-weight: 700; }
  .mnav .sam .orb { position: absolute; left: 50%; top: -30px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; display: grid; place-items: center; background: #1C1C1A; border: 4px solid var(--side); box-shadow: 0 0 0 2px var(--accent-2, #C88B58), 0 12px 24px -8px rgba(0, 0, 0, .65); transition: transform .25s var(--spring, ease); }
  .mnav .sam .orb img { width: 40px; height: 40px; border-radius: 50%; display: block; }
  .mnav .sam:active .orb { transform: scale(.92); }
  .samdlg .samlog { display: flex; flex-direction: column; }
}

/* ===== calendario en tableta y pantallas medianas: el detalle del día va en la franja de «Mes · Semana · Día»
   (aprovecha el hueco de la derecha) y el mes ocupa todo el ancho ===== */
@container read (min-width: 681px) and (max-width: 1400px) {
  .pg-calendar .pg:has(.calwrap) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: start; }
  .pg-calendar .calwrap { display: contents; }
  .pg-calendar .calbar { grid-column: 1; grid-row: 1; margin: 0 0 12px; }
  .pg-calendar .calwrap .calside { grid-column: 2; grid-row: 1; margin: 0 0 12px; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px 6px 16px; min-height: 48px; border-radius: 999px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .pg-calendar .calwrap .calside:hover { transform: none; }
  .pg-calendar .calside > h3 { margin: 0 4px 0 0; flex: none; font-size: 15px; white-space: nowrap; }
  .pg-calendar .calside > h3::before { display: none; }
  .pg-calendar .calside > h3 .h-count { margin-left: 8px; font-size: 15px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sec, var(--ink)) 14%, transparent); }
  .pg-calendar .calside .h-task { flex: none; max-width: 300px; padding: 2px 4px 2px 2px; gap: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .pg-calendar .calside .h-tmain { padding: 2px 4px 2px 2px; min-width: 0; }
  .pg-calendar .calside .h-ic { width: 28px; height: 28px; }
  .pg-calendar .calside .h-ic svg { width: 14px; height: 14px; }
  .pg-calendar .calside .h-tmain b { font-size: 13.5px; }
  .pg-calendar .calside .h-tmain small { font-size: 11.5px; }
  .pg-calendar .calside .h-more { display: none; }
  .pg-calendar .calside .h-check { width: 28px; height: 28px; }
  .pg-calendar .calside .paybtn { height: 28px; padding: 0 10px; font-size: 12px; }
  .pg-calendar .calside .h-empty { flex: none; flex-direction: row; gap: 6px; padding: 0 8px 0 0; font-size: 13px; }
  .pg-calendar .calside .h-empty svg { width: 16px; height: 16px; }
  .pg-calendar .calwrap .calcard { grid-column: 1 / -1; grid-row: 2; }
  .cday { min-height: 96px; }
}

/* ===== correo en celular: el lector tapa por completo la lista (en Bosque quedaba transparente y se encimaban los textos) ===== */
@media (max-width: 860px) {
  :root[data-theme="bosque"] .read { background: radial-gradient(900px 520px at 90% -10%, #DCE5C9 0%, transparent 62%), radial-gradient(760px 560px at 16% 114%, #EDD4B8 0%, transparent 58%), #EEE7D6; }
  :root[data-theme="bosque"] .list { background: #EEE7D6; }
  dialog.sheet.viewer { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .viewer header { padding: calc(10px + env(safe-area-inset-top)) 10px 10px 16px; gap: 8px; }
}
/* PDF dibujado por la propia app (celular y tableta) */
.viewer .vbody.pdfjs { display: block; overflow: auto; padding: 10px; text-align: center; -webkit-overflow-scrolling: touch; }
.viewer .vbody.pdfjs canvas { display: block; margin: 0 auto 10px; max-width: 100%; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.viewer .vwait { color: var(--ink-2); padding: 28px; text-align: center; }

/* ===== adjuntos en celular: una columna, el nombre completo arriba y los dos botones abajo ===== */
@media (max-width: 860px) {
  .atts { grid-template-columns: minmax(0, 1fr); }
  .att { flex-wrap: wrap; padding: 10px; }
  .att .att-main { flex: 1 1 100%; }
  .att b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .att .vw, .att .dl { flex: 1 1 0; justify-content: center; height: 42px; font-size: 14px; }
  .atts-wrap { padding: 14px 12px 12px; }
  .atts-wrap > p span:last-child { display: none; }
}

/* ===== barra del correo abierto en celular: todo cabe sin recorrer de lado (anterior/siguiente sólo en tableta) ===== */
@media (max-width: 860px) {
  .read > .bar { padding-left: 8px; padding-right: 8px; gap: 0; }
  .read > .bar .icon-btn { flex: 0 1 40px; min-width: 30px; }
}
@media (max-width: 520px) {
  .read > .bar [data-act="prev"], .read > .bar [data-act="next"], .read > .bar [data-act="pdf"] { display: none; }
}

/* ===== pulido en celular (13-oct-2026): cabecera en un renglón, «+» arriba, barra con fondo, títulos completos ===== */
@media (max-width: 860px) {
  /* cabecera: rayitas · fecha · agregar · actualizar en el mismo renglón, medidos desde la propia cabecera */
  .read > .home { padding-top: calc(8px + env(safe-area-inset-top)); }
  .h-top { position: relative; }
  .mburger { top: 0; left: -9px; }
  .h-top .grow { flex: 1 1 100%; }
  .h-top .grow > .eyebrow { display: block; min-height: 0; height: 42px; line-height: 42px; margin: 0 0 2px; padding: 0 90px 0 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
  .h-nums [data-act="homeRefresh"] { top: 1px; right: -7px; width: 40px; height: 40px; }
  .h-nums .addbtn { display: inline-flex; position: absolute; top: 4px; right: 38px; width: 34px; height: 34px; min-width: 0; padding: 0; gap: 0; border-radius: 50%; font-size: 0; justify-content: center; box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
  .h-nums .addbtn svg { width: 19px; height: 19px; }
  .fab.fab-add { display: none !important; }
  /* lo que pasa por debajo de la barra se desvanece en vez de asomarse */
  body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(118px + env(safe-area-inset-bottom)); z-index: 13; pointer-events: none; background: linear-gradient(to bottom, transparent 0, var(--nav-fade, var(--bg)) 52%); transition: opacity .25s; }
  body.reading::after, body.menu::after, body:has(dialog[open])::after { opacity: 0; }
  /* el título del pendiente completo (hasta dos renglones) */
  .h-task .h-tmain b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; }
  .h-task .h-tmain small { margin-top: 2px; }
}
:root[data-theme="bosque"] { --nav-fade: #EDE2D0; }

@media (max-width: 860px) { .pg-tasks .h-nums .addbtn { display: none; } }
/* redactar en celular: la fila de botones cabe completa (antes «Descartar» quedaba fuera de la pantalla) */
@media (max-width: 860px) {
  #compose .sheet-foot { padding-left: 12px; padding-right: 10px; gap: 2px; flex-wrap: nowrap; }
  #compose .sheet-foot [data-keep] { flex: 0 1 auto; min-width: 0; }
  #compose .sheet-foot .icon-btn { flex: 0 1 38px; width: auto; min-width: 26px; }
  #compose .sheet-foot .sendgrp { flex: none; margin-right: 4px; }
  #compose .sheet-foot .hint:empty, #compose .sheet-foot .err:empty { display: none; }
}
/* tableta acostada y ventanas medianas: el saludo en su renglón (se partía en tres) y los anillos debajo, a todo lo ancho */
@media (min-width: 861px) {
  @container read (max-width: 1180px) {
    :root[data-theme="bosque"] .home:not(.page) .h-top .grow { flex: 1 1 100%; }
    :root[data-theme="bosque"] .home:not(.page) .h-nums { width: 100%; }
    :root[data-theme="bosque"] .home:not(.page) .h-avail { margin-right: auto; }
  }
}
@container read (min-width: 861px) and (max-width: 1040px) { .fstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fstat b { font-size: 24px; } }

/* ===== bienvenida del correo en celular: arriba de Recibidos, con cada cuenta y lo que tiene sin leer ===== */
.mhello { display: none; }
@media (max-width: 860px) {
  .mhello { display: block; padding: 14px 16px 6px; animation: rise .5s var(--ease) both; }
  .mhello .eyebrow { margin: 0 0 2px; color: var(--ink-2); font-size: 14px; }
  .mhello .eyebrow::first-letter { text-transform: uppercase; }
  .mhello h2 { margin: 0 0 6px; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
  .mhello .lead { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
  .mhello .lead b { color: var(--ink); }
  .mh-accs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mh-acc { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-align: left; color: var(--ink); transition: transform .15s; }
  .mh-acc:active { transform: scale(.97); }
  .mh-acc .av { width: 34px; height: 34px; flex: none; font-size: 12.5px; }
  .mh-acc b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.2; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mh-acc .n { flex: none; font-size: 18px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
  .mh-acc:only-child { grid-column: 1 / -1; }
  .mhello .mh-wait { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--ink-2); font-size: 13.5px; }
  .mhello .mh-wait svg { width: 16px; height: 16px; flex: none; }
  :root[data-theme="bosque"] .mh-acc { border-color: transparent; background: var(--glass, #FBF7EE); box-shadow: var(--lift, 0 6px 16px -10px rgba(0, 0, 0, .25)); }
}
@media (max-width: 860px) {
  .mh-scope { display: flex; align-items: center; gap: 10px; margin: 10px 12px 2px; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
  :root[data-theme="bosque"] .mh-scope { border-color: transparent; background: var(--glass, #FBF7EE); box-shadow: var(--lift, 0 6px 16px -10px rgba(0, 0, 0, .25)); }
  .mh-scope .av { width: 32px; height: 32px; font-size: 12px; flex: none; }
  .mh-scope .grow { flex: 1; min-width: 0; }
  .mh-scope b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mh-scope small { color: var(--ink-3); font-size: 12.5px; }
  .mh-scope .btn { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; }
}
.mh-scope { display: none; }
@media (max-width: 860px) { .mh-scope { display: flex; } }

/* ===== «Próximos 7 días» en celular: los siete días, deslizables (antes se escondían del 5 al 7) ===== */
.ag-nav { display: none; }
@container read (max-width: 680px) {
  .c-agenda .agenda { grid-template-columns: repeat(7, calc((100% - 16px) / 3.3)) !important; scroll-snap-type: x mandatory; scroll-padding-left: 8px; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%); }
  .c-agenda.ag-start .agenda { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); }
  .c-agenda.ag-end .agenda { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px); mask-image: linear-gradient(to right, transparent 0, #000 22px); }
  .c-agenda.ag-start.ag-end .agenda { -webkit-mask-image: none; mask-image: none; }
  .c-agenda .aday:nth-child(n+5) { display: flex; }
  .c-agenda .aday { scroll-snap-align: start; }
  .ag-nav { display: inline-flex; gap: 2px; margin: 0 6px 0 auto; }
  .ag-nav .icon-btn { width: 34px; height: 34px; border-radius: 50%; transition: opacity .2s; }
  .ag-nav .icon-btn svg { width: 18px; height: 18px; }
  .ag-nav + .go { margin-left: 0; }
  .c-agenda.ag-start [data-act="agScroll"][data-d="-1"], .c-agenda.ag-end [data-act="agScroll"][data-d="1"] { opacity: .28; pointer-events: none; }
}
/* hoy siempre resaltado, aunque no tenga nada */
:root[data-theme="bosque"] .aday.now.free > b, :root[data-theme="bosque"] .aday.now.free > small { opacity: 1; }