:root { --bg:#f5f5f4; --card:#fff; --text:#111; --muted:#777; --line:#e4e4e2; --accent:#0b1b2b; --ok:#1a7f37; --err:#c62828; --warn-bg:#fff4d6; --warn:#7a5300; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
main { max-width:820px; margin:40px auto; padding:0 16px; }
h1 { font-size:18px; font-weight:600; margin:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.logout { color:var(--muted); font-size:13px; text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:5px 10px; background:var(--card); }
.logout:hover { color:var(--text); border-color:#ccc; }
.banner { background:var(--warn-bg); color:var(--warn); border:1px solid #f0d58c; border-radius:8px; padding:10px 14px; margin-bottom:16px; font-weight:600; }
.banner:not([hidden]) { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; }
.picker:not([hidden]) { font-weight:500; display:flex; align-items:center; gap:8px; }
.picker select { font:inherit; font-weight:600; color:var(--text); background:#fff; border:1px solid #f0d58c; border-radius:6px; padding:4px 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.row { display:flex; align-items:center; border-bottom:1px solid var(--line); min-height:42px; }
.row label, .row .label { width:90px; padding:10px 14px; color:var(--muted); flex-shrink:0; }
.row input { flex:1; min-width:0; border:0; outline:0; padding:10px 14px 10px 0; font:inherit; background:transparent; color:inherit; }
.row .value { flex:1; padding:10px 14px 10px 0; overflow-wrap:anywhere; }
.toolbar { display:flex; gap:4px; padding:6px 10px; border-bottom:1px solid var(--line); }
.toolbar { align-items:center; }
.toolbar button, .toolbar .attach { border:1px solid transparent; background:none; border-radius:6px; width:30px; height:28px; cursor:pointer; font:inherit; color:var(--text); display:inline-flex; align-items:center; justify-content:center; }
.toolbar svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.toolbar svg .fill { fill:currentColor; stroke:none; }
.toolbar .sep { width:1px; height:18px; background:var(--line); margin:0 6px; }
.toolbar .attach { width:auto; gap:6px; padding:0 10px; border-color:var(--line); font-size:13px; }
.toolbar button:hover, .toolbar .attach:hover { background:var(--bg); }
.toolbar button.active { background:var(--bg); border-color:var(--line); }
#editor { min-height:260px; padding:14px; outline:0; overflow-wrap:anywhere; }
#editor:empty::before { content:"Escribe tu mensaje…"; color:var(--muted); }
#attachments { list-style:none; margin:0; padding:0 14px; display:flex; flex-wrap:wrap; gap:6px; }
#attachments:not(:empty) { padding-bottom:12px; }
#attachments li { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 4px 3px 10px; font-size:13px; display:flex; align-items:center; gap:6px; max-width:100%; }
#attachments li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#attachments button { border:0; background:none; cursor:pointer; color:var(--muted); font-size:15px; line-height:1; padding:2px 4px; }
.signature { padding:14px 14px 18px; border-top:1px dashed var(--line); overflow-x:auto; }
.sig-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:12px; }
#status { color:var(--muted); }
#status.ok { color:var(--ok); } #status.err { color:var(--err); }
#send { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 22px; font:inherit; font-weight:600; cursor:pointer; }
#send:disabled { opacity:.5; cursor:default; }