/* portal/portal.css — site do paciente. Mesmos tons do Celsor (claro/escuro automático; ?theme=dark|light força). Sem fontes externas: funciona dentro de qualquer site. */
:root{--bg:#F4F7F9;--surface:#FFFFFF;--surface-2:#EBF0F4;--ink:#0C1822;--ink-2:#3D4E5C;--muted:#566775;--line:#D8E0E6;--line-field:#7A8B98;--accent:#2DD4BF;--on-accent:#0C1822;--accent-ink:#0F766E;--ring:#0D9488;--err:#B3261E;--err-wash:#FBE7E5;--ok:#17704A;--ok-wash:#E3F4EB;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#07131F;--surface:#0E1B27;--surface-2:#15273A;--ink:#E8EEF3;--ink-2:#B4C2CD;--muted:#8CA0AF;--line:#223647;--line-field:#6A8092;--accent-ink:#5EEAD4;--ring:#2DD4BF;--err:#F28B82;--err-wash:#381A1A;--ok:#4CC38A;--ok-wash:#10291E}}
:root[data-theme="dark"]{--bg:#07131F;--surface:#0E1B27;--surface-2:#15273A;--ink:#E8EEF3;--ink-2:#B4C2CD;--muted:#8CA0AF;--line:#223647;--line-field:#6A8092;--accent-ink:#5EEAD4;--ring:#2DD4BF;--err:#F28B82;--err-wash:#381A1A;--ok:#4CC38A;--ok-wash:#10291E;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:480px;margin:0 auto;padding:20px 16px 12px;min-height:100vh;display:flex;flex-direction:column;gap:14px}
#app{flex:1}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.logo{flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;display:block;box-shadow:0 0 0 1px var(--line)}
.logo img{display:block;width:44px;height:44px}
h1{margin:0;font-size:1.25rem;line-height:1.25}
.sub{margin:2px 0 0;color:var(--muted);font-size:.9rem}
form.login{display:grid;gap:14px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:4px}
.field{position:relative}
input{width:100%;font:inherit;font-size:1.15rem;letter-spacing:.08em;padding:12px 14px;border:1px solid var(--line-field);border-radius:10px;background:var(--surface);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
input::placeholder{color:var(--muted);letter-spacing:.08em;opacity:.7}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.field button.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-width:44px;min-height:40px;border:0;background:none;color:var(--accent-ink);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;border-radius:8px}
.btn{font:inherit;font-weight:700;border:0;border-radius:10px;padding:13px 18px;min-height:48px;background:var(--accent);color:var(--on-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-field)}
.btn.sm{min-height:42px;padding:8px 14px;font-size:.92rem}
.msg{margin:0;padding:10px 12px;border-radius:10px;font-size:.92rem}
.msg.err{background:var(--err-wash);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 40%,var(--line))}
.msg.info{background:var(--surface-2);color:var(--ink-2)}
.hint{color:var(--muted);font-size:.85rem;margin:0}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.top .out{flex:none}
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.item{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface);display:grid;gap:10px}
.item h2{margin:0;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}
.item .meta{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--ok-wash);color:var(--ok);font-size:.75rem;font-weight:700;vertical-align:middle}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts .btn{flex:1 1 130px}
.empty{text-align:center;color:var(--ink-2);padding:18px 6px}
.empty .big{font-size:2rem;margin:0}
.load{color:var(--muted);text-align:center;margin:40px 0}
.foot{text-align:center;color:var(--muted);font-size:.78rem}.foot p{margin:0 0 4px}.foot .by{font-size:.85rem}.foot .by a{color:var(--muted);text-decoration:none}.foot .by a:hover{text-decoration:underline}.foot .by b{color:var(--ink);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:360px){.wrap{padding:12px 10px}.card{padding:16px 14px}}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .12s}.btn:hover:not(:disabled){filter:brightness(.96)}}