h1:focus { outline: none; }

.tela { display: flex; flex-direction: column; gap: .5rem; height: calc(100vh - 80px); }
.tela-formulario { max-width: 640px; display: flex; flex-direction: column; gap: 1rem; }

/* Painel da marca nas telas de entrada (componentes.css): o vermelho da Hastings. */
.login-apresentacao-intimatio { --login-fundo: linear-gradient(150deg, #3A1012 0%, #6E1417 40%, #9F1D21 80%, #C2464A 130%); }
.login-apresentacao-equipe { --login-fundo: linear-gradient(150deg, #2B3038 0%, #3A414B 45%, #4A5058 75%, #9F1D21 140%); }

/* Início: um cartão por área, como as abas do site antigo. */
.inicio-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.inicio-cartao { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; border: 1px solid var(--rz-base-300); border-radius: 8px;
    text-decoration: none; color: inherit; background: var(--rz-base-background-color); }
.inicio-cartao:hover { border-color: var(--rz-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.inicio-cartao .rzi { color: var(--rz-primary); font-size: 1.6rem; }
.inicio-cartao strong { font-size: 1rem; }
.inicio-cartao span.texto { font-size: .875rem; opacity: .8; }

/* Opções em lista (rádios um embaixo do outro), como no site antigo. */
.opcoes-verticais .rz-radio-btn-list-vertical, .opcoes-verticais { gap: .35rem; }
.nota { font-size: .8rem; opacity: .75; margin: 0; }