/* A porta da Rota. Telemóvel primeiro: é onde o Silva a abre. */
:root{ --roxo:#9727B3; --roxo-hover:#83219C; --tinta:#1A1420; --suave:#6B6076;
       --linha:#D6CDE2; --fundo:#F7F5FA; --superficie:#FFF; --mau:#C02626;
       --anel:0 0 0 3px rgba(151,39,179,.28); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --tinta:#F2EEF6; --suave:#A79BB4; --linha:#3D3449;
    --fundo:#141018; --superficie:#1C1723; --roxo:#C46BDA; --roxo-hover:#D083E3; --mau:#F08C8C; }
}
*{box-sizing:border-box}
body{ margin:0; min-height:100dvh; display:grid; place-items:center; background:var(--fundo);
      color:var(--tinta); font:16px/1.5 system-ui,-apple-system,sans-serif;
      padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.porta{ background:var(--superficie); border:1px solid var(--linha); border-radius:14px;
        padding:28px 24px; width:100%; max-width:380px; }
h1{ margin:0 0 2px; font-size:1.5rem; color:var(--roxo); }
.sub{ margin:0 0 22px; color:var(--suave); font-size:.9rem; }
form{ display:grid; gap:8px; }
label{ font-size:.85rem; font-weight:600; }
input{ font:inherit; padding:12px; min-height:48px; border-radius:10px;
       border:1px solid var(--linha); background:var(--superficie); color:var(--tinta); width:100%; }
input:focus{ outline:none; border-color:var(--roxo); box-shadow:var(--anel); }
button{ font:inherit; font-weight:600; margin-top:6px; min-height:48px; border:0; border-radius:10px;
        background:var(--roxo); color:#fff; cursor:pointer; }
button:hover:not(:disabled){ background:var(--roxo-hover); }
button:focus-visible{ outline:none; box-shadow:var(--anel); }
button:disabled{ opacity:.5; cursor:not-allowed; }
.recado{ margin:4px 0 0; font-size:.88rem; min-height:1.3em; }
.recado.mau{ color:var(--mau); }