/* ═══════════════════════════════════════════════════════
   Correo — mail.prinstech.org · PrinsTech Studio
   Sistema «Modernist» del diseño entregado: fondo #0e0e10,
   acento #ec3013, tipografía Archivo. Es un lenguaje propio,
   distinto al liquid-glass del panel A.R.C.
   ═══════════════════════════════════════════════════════ */

:root {
    --bg:          #0e0e10;
    --surface:     #151417;
    --surface-2:   #1c1b1f;
    --text:        #f2f1ef;
    --text-soft:   #dedcdb;
    --muted:       #a9a8ac;
    --muted-2:     #8d8c90;
    --dim:         #6d6c70;
    --dim-2:       #5f5e63;

    --accent:      #ec3013;
    --accent-lite: #ff5b3d;
    --accent-soft: rgba(236, 48, 19, 0.16);

    --line:        rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --fill:        rgba(255, 255, 255, 0.05);
    --fill-2:      rgba(255, 255, 255, 0.08);

    --font: 'Archivo', system-ui, -apple-system, sans-serif;
    --side-w: 250px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

svg { display: block; flex: none; }
i[data-i] { display: inline-flex; }

@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popIn    { from { transform: scale(0.965) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeUp   { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(236,48,19,0.45); } 50% { box-shadow: 0 0 0 4px rgba(236,48,19,0); } }
@keyframes novaGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ─── Botones base ─── */
.btn-accent, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn-accent { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-accent:hover { background: var(--accent-lite); border-color: var(--accent-lite); }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent-lite); color: var(--accent-lite); }
.btn-block { width: 100%; padding: 11px; font-size: 13px; }
.btn-sm { padding: 9px 16px; }
.btn-accent.loading svg, .btn-ghost.loading svg { animation: spin 0.9s linear infinite; }

.icon-round {
    width: 34px; height: 34px; flex: none; position: relative;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--fill);
    border: 1px solid var(--line); color: var(--text);
    transition: border-color 0.16s ease, color 0.16s ease;
}
.icon-round:hover { border-color: var(--accent-lite); color: var(--accent-lite); }
.icon-round.spinning svg { animation: spin 0.9s linear infinite; }
.icon-plain { color: var(--muted-2); display: flex; transition: color 0.16s ease; }
.icon-plain:hover { color: var(--accent-lite); }

/* ═══════════════════════════════════════════
   ACCESO
   ═══════════════════════════════════════════ */
.gate {
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; padding: 24px;
    background:
        radial-gradient(680px 340px at 50% -10%, rgba(236, 48, 19, 0.14), transparent 70%),
        var(--bg);
}
.gate-card {
    width: min(400px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 34px 30px 26px;
    display: flex; flex-direction: column; gap: 26px;
    animation: popIn 0.3s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
.gate-card.shake { animation: shake 0.4s ease; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}
.gate-brand { text-align: center; }
.gate-logo { font-size: 34px; font-weight: 800; letter-spacing: 0.02em; }
.gate-logo span, .side-logo span { color: var(--accent-lite); }
.gate-kicker, .side-kicker {
    font-size: 10px; letter-spacing: 0.18em; color: var(--muted-2); margin-top: 3px;
}
.gate-form { display: flex; flex-direction: column; gap: 15px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld-label { font-size: 11px; color: var(--muted-2); }
.fld input, .fld-pass {
    width: 100%;
    background: var(--fill); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px; padding: 10px 12px;
    color: var(--text); font-size: 13px;
    transition: border-color 0.16s ease;
}
.fld input:focus { outline: none; border-color: var(--accent); }
.fld-pass { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; }
.fld-pass:focus-within { border-color: var(--accent); }
.fld-pass input { background: none; border: none; padding: 10px 0; flex: 1; min-width: 0; }
.fld-pass input:focus { outline: none; }
.fld-pass button { color: var(--dim-2); display: flex; padding: 6px; }
.fld-pass button:hover { color: var(--muted); }
.gate-btn { margin-top: 4px; padding: 12px; font-size: 13px; }
.gate-error {
    background: rgba(236, 48, 19, 0.1);
    border: 1px solid rgba(236, 48, 19, 0.3);
    border-radius: 6px; padding: 9px 12px;
    font-size: 12px; color: #ff9783;
}
.gate-foot {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding-top: 18px; border-top: 1px solid var(--line);
    font-size: 11.5px; color: var(--dim-2); text-align: center;
}
.gate-foot a { color: var(--accent-lite); }
.gate-foot a:hover { text-decoration: underline; }
.gate-copy { font-size: 11px; color: var(--dim-2); letter-spacing: 0.03em; text-align: center; }

/* ═══════════════════════════════════════════
   ESTRUCTURA
   ═══════════════════════════════════════════ */
.app {
    height: 100vh; height: 100dvh;
    display: grid; grid-template-columns: var(--side-w) 1fr;
    background: var(--bg);
}

/* ─── Lateral ─── */
.side {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--line);
    overflow: hidden;
}
.side-head { padding: 22px 20px 18px; border-bottom: 1px solid var(--line); position: relative; }
.side-logo { font-size: 24px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }
.side-close {
    display: none; position: absolute; top: 20px; right: 16px;
    color: var(--muted-2);
}
.side-compose { padding: 16px 12px 8px; }

.folders { flex: 1; overflow-y: auto; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.folder {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 9px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--muted);
    transition: background 0.14s ease, color 0.14s ease;
}
.folder-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.folder:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.folder.active { background: var(--accent-soft); color: var(--text); }
.folder.active svg { color: var(--accent-lite); }
.folder-badge {
    flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 10.5px; font-weight: 700; text-align: center;
}
.folder-count { flex: none; font-size: 11px; color: var(--dim-2); font-weight: 500; }

.side-foot {
    padding: 14px 12px; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 10px;
}
.side-avatar {
    width: 30px; height: 30px; flex: none; border-radius: 999px;
    background: var(--fill-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.side-user { flex: 1; min-width: 0; line-height: 1.25; }
.side-user-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-role { font-size: 10px; color: var(--dim-2); letter-spacing: 0.08em; }
.side-logout { color: var(--dim-2); display: flex; padding: 4px; transition: color 0.16s ease; }
.side-logout:hover { color: var(--accent-lite); }
.side-scrim { display: none; }

/* ─── Principal ─── */
.main { display: flex; flex-direction: column; overflow: hidden; position: relative; }

.topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 28px; border-bottom: 1px solid var(--line);
}
.side-open { display: none; }
.search { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; }
.search > i:first-child { position: absolute; left: 14px; color: var(--dim-2); pointer-events: none; }
.search input {
    width: 100%;
    background: var(--fill); border: 1px solid var(--line);
    border-radius: 999px; padding: 9px 36px 9px 38px;
    color: var(--text); font-size: 13px;
    transition: border-color 0.16s ease;
}
.search input:focus { outline: none; border-color: var(--accent); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; right: 12px; color: var(--dim-2); display: flex; }
.search-clear:hover { color: var(--text); }
.clock { margin-left: auto; font-size: 12px; color: var(--muted-2); letter-spacing: 0.04em; flex: none; }
.bell-dot {
    position: absolute; top: 6px; right: 7px;
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--accent); border: 1.5px solid var(--bg);
}

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding: 26px 28px 0;
}
.page-head-text { min-width: 0; }
.page-title { font-size: 32px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.05; }
.page-sub { font-size: 13px; color: var(--muted-2); margin-top: 4px; }
.page-actions { display: flex; gap: 10px; flex: none; }

/* ─── Lista ─── */
.list { flex: 1; overflow-y: auto; margin-top: 14px; }

.row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 28px; cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.16s ease;
    animation: fadeUp 0.28s ease both;
}
.row:hover { background: rgba(255, 255, 255, 0.035); }
.row.selected { background: var(--fill); border-left-color: var(--accent); }

.row-dot { width: 16px; flex: none; display: flex; justify-content: center; padding-top: 5px; }
.row-dot span {
    width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
    animation: dotPulse 2.4s ease-in-out infinite;
}
.row-main { flex: 1; min-width: 0; }
.row-from { font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.row.unread .row-from { font-weight: 800; }
.row-from svg { color: var(--dim); }
.row-star-on { color: var(--accent-lite); }
.row-subject {
    font-size: 13px; color: var(--muted); font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row.unread .row-subject { color: var(--text); font-weight: 700; }
.row-preview {
    font-size: 12px; color: var(--dim); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-labels { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.row-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-lite);
}
.row-right { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.row-actions { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.14s ease; }
.row:hover .row-actions, .row.selected .row-actions { opacity: 1; }
.row-actions button { color: var(--dim-2); padding: 3px; display: flex; transition: color 0.14s ease; }
.row-actions button:hover { color: var(--accent-lite); }
.row-time { font-size: 11px; color: var(--dim-2); width: 46px; text-align: right; flex: none; }

.list-state { padding: 60px 20px; text-align: center; color: var(--dim-2); font-size: 13px; }
.list-state strong { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.skeleton { padding: 6px 28px; display: flex; flex-direction: column; gap: 14px; }
.skeleton div {
    height: 54px; border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    background-size: 220% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ─── Lector lateral ─── */
.reader-scrim {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, 0.55);
    animation: fadeIn 0.18s ease both;
}
.reader {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: 520px; max-width: 100%;
    background: var(--surface);
    border-left: 1px solid var(--line);
    overflow-y: auto; padding: 28px;
    animation: slideInRight 0.26s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
.rd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rd-subject { font-size: 22px; font-weight: 800; line-height: 1.25; word-break: break-word; }
.rd-who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.rd-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 999px;
    background: var(--fill-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.rd-who-text { flex: 1; min-width: 0; }
.rd-name { font-size: 14px; font-weight: 700; }
.rd-mail { font-size: 12px; color: var(--muted-2); word-break: break-all; }
.rd-date { font-size: 12px; color: var(--muted-2); flex: none; text-align: right; }

.rd-labels { display: flex; gap: 6px; margin: 18px 0; flex-wrap: wrap; }
.rd-label {
    font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--muted-2);
    transition: all 0.14s ease;
}
.rd-label:hover { border-color: var(--accent-lite); color: var(--accent-lite); }
.rd-label.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-lite); }

.rd-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 12px 0; margin-bottom: 20px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.rd-act {
    width: 32px; height: 32px; flex: none; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1); background: transparent;
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    transition: color 0.16s ease, border-color 0.16s ease;
}
.rd-act:hover { border-color: var(--accent-lite); color: var(--accent-lite); }
.rd-act.on { color: var(--accent-lite); border-color: var(--accent); }
.rd-act.wide { width: auto; padding: 0 14px; gap: 7px; font-size: 12px; font-weight: 700; }

.rd-body {
    font-size: 14px; line-height: 1.75; color: var(--text-soft);
    white-space: pre-wrap; word-break: break-word;
}
.rd-body a { color: var(--accent-lite); text-decoration: underline; }
.rd-quote { color: var(--dim); }

/* ═══════════════════════════════════════════
   REDACTAR
   ═══════════════════════════════════════════ */
.modal-scrim {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.16s ease both;
}
.compose {
    position: fixed; z-index: 71;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(600px, calc(100vw - 40px));
    max-height: 88vh; max-height: 88dvh;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex; flex-direction: column; overflow: hidden;
    animation: composeIn 0.22s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}
@keyframes composeIn {
    from { transform: translate(-50%, -50%) scale(0.965); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.compose-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--line); flex: none;
}
.compose-title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; }
.compose-title svg { color: var(--accent-lite); }

.compose-body {
    padding: 18px 22px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.from-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim-2); }
.from-row b { color: var(--muted); font-weight: 500; }

.c-field { display: flex; flex-direction: column; gap: 5px; }
/* Solo se animan las filas que aparecen y desaparecen. OJO: una animación
   con fill-mode crea contexto de apilamiento; si se la ponemos a todos los
   campos, el desplegable de sugerencias queda encerrado en el de «Para» y
   los campos siguientes se pintan encima, robándole el clic. */
#row-cc, #row-bcc { animation: fadeUp 0.2s ease both; }
/* Y por lo mismo, «Para» tiene que apilarse por encima del resto. */
.c-field-to { position: relative; z-index: 20; }
.c-field > label, .c-label-row label { font-size: 11px; color: var(--muted-2); }
.c-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.c-toggles { display: flex; gap: 10px; }
.c-toggles button { font-size: 11px; color: var(--muted-2); transition: color 0.14s ease; }
.c-toggles button:hover, .c-toggles button.on { color: var(--accent-lite); }

.c-field input, .compose-body textarea {
    width: 100%;
    background: var(--fill); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px; padding: 9px 11px;
    color: var(--text); font-size: 13px;
    transition: border-color 0.16s ease;
}
.c-field input:focus, .compose-body textarea:focus { outline: none; border-color: var(--accent); }
.compose-body textarea { resize: vertical; min-height: 150px; line-height: 1.65; }

.c-suggest-wrap { position: relative; }
.c-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden; max-height: 206px; overflow-y: auto;
    animation: popIn 0.16s ease both;
}
.sug {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
    transition: background 0.14s ease;
}
.sug:hover, .sug.active { background: rgba(255, 255, 255, 0.06); }
.sug-avatar {
    width: 26px; height: 26px; flex: none; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-lite);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
}
.sug-text { min-width: 0; flex: 1; }
.sug-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-mail { font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nova-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    border: 1px solid rgba(236, 48, 19, 0.4);
    background: rgba(236, 48, 19, 0.08);
    color: var(--accent-lite);
    font-size: 11px; font-weight: 700;
    transition: background 0.16s ease, color 0.16s ease;
}
.nova-btn:hover:not(:disabled) { background: rgba(236, 48, 19, 0.18); }
.nova-btn:disabled { color: #8d6055; border-color: rgba(236, 48, 19, 0.2); cursor: not-allowed; }
.nova-btn.working { animation: novaGlow 1s ease-in-out infinite; cursor: progress; }
.nova-btn.working svg { animation: spin 1.4s linear infinite; }
.nova-undo {
    align-self: flex-start; margin-top: 6px;
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--muted-2);
    transition: color 0.14s ease;
}
.nova-undo:hover { color: var(--accent-lite); }

.attach-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    align-self: flex-start;
    font-size: 11.5px; color: var(--muted);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 6px; padding: 7px 12px;
    transition: border-color 0.16s ease, color 0.16s ease;
}
.attach-btn:hover { border-color: var(--accent-lite); color: var(--accent-lite); }
.attach-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.attach {
    display: flex; align-items: center; gap: 7px;
    background: var(--fill); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px; padding: 6px 8px 6px 10px; font-size: 11.5px;
    animation: popIn 0.18s ease both;
}
.attach svg { color: var(--muted); }
.attach-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-size { color: var(--dim-2); }
.attach button { color: var(--dim-2); display: flex; }
.attach button:hover { color: var(--accent-lite); }

.compose-error {
    background: rgba(236, 48, 19, 0.1);
    border: 1px solid rgba(236, 48, 19, 0.3);
    border-radius: 6px; padding: 9px 12px;
    font-size: 12px; color: #ff9783;
}
.compose-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 22px; border-top: 1px solid var(--line); flex: none;
}
.compose-foot-right { display: flex; gap: 10px; }

/* ─── Aviso flotante ─── */
.toast {
    position: fixed; z-index: 90;
    left: 50%; bottom: 28px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 9px;
    padding: 11px 18px; border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    font-size: 13px; max-width: calc(100vw - 40px);
    animation: popIn 0.22s ease both;
}
.toast svg { color: var(--accent-lite); }
.toast.ok svg { color: #4ade80; }

/* ═══════════════════════════════════════════
   ADAPTATIVO
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .side {
        position: fixed; z-index: 80; top: 0; bottom: 0; left: 0;
        width: min(270px, 82vw);
        background: var(--surface);
        transform: translateX(-101%);
        transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1);
    }
    .app.menu .side { transform: none; }
    .side-scrim {
        display: block; position: fixed; inset: 0; z-index: 79;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
    }
    .app.menu .side-scrim { opacity: 1; pointer-events: auto; }
    .side-close, .side-open { display: flex; }

    .topbar { padding: 12px 16px; gap: 10px; }
    .clock { display: none; }
    .page-head { padding: 20px 16px 0; flex-direction: column; gap: 14px; }
    .page-title { font-size: 26px; }
    .page-actions { width: 100%; }
    .page-actions button { flex: 1; }
    .row { padding: 13px 16px; }
    .row-actions { display: none; }
    .reader { width: 100%; padding: 20px 18px; }
    .compose {
        top: 0; left: 0; transform: none;
        width: 100vw; max-height: 100dvh; height: 100dvh;
        border-radius: 0; border: none;
    }
    @keyframes composeIn {
        from { transform: translateY(16px); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
    .compose-foot { flex-direction: column-reverse; align-items: stretch; }
    .compose-foot-right { display: flex; }
    .compose-foot-right button { flex: 1; }
}