/* Ferramenta interna, com a mesma identidade do e-schooling.com que o portal — e de propósito com um
   tom diferente dentro dela.

   O portal usa o azul da marca; este usa o roxo, e a barra de topo continua escura. As duas
   aplicações ficam abertas lado a lado, e nunca deve ser preciso pensar em qual se está a escrever.
   O gradiente escuro da barra e o gradiente roxo dos botões estão ambos no site público — isto não é
   uma marca paralela, é o outro lado da mesma.

   Mais densa do que o portal, também de propósito: o trabalho aqui é ler listas e comparar números.
   O tipo de letra é servido daqui e não do Google, pela mesma razão que no portal. */

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Do site: o roxo e o gradiente que o acompanha. */
    --purple: #5e17eb;
    --purple-light: #983aff;
    --purple-deep: #5b00be;
    --blue: #0c8fff;
    --brand-gradient: linear-gradient(94.11deg, #983aff 0%, #5b00be 106.22%);
    --bar-gradient: linear-gradient(180deg, #19062d 0%, #0d001e 100%);

    --ink: #16172b;
    --muted: #728096;
    --line: #e4e7ec;
    --line-soft: #eef1f5;
    --accent: var(--purple);
    --accent-soft: #f3ecff;
    --ok: #10603a;
    --danger: #d92d20;
    --bg: #f7f9fb;
    --surface: #fff;

    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 40px;
    --shadow: 0 1px 2px rgb(22 23 43 / 4%), 0 8px 24px rgb(22 23 43 / 6%);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 400 15px/1.55 Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.25rem; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 0.75rem; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--purple-deep); }

/* Escura, e com o gradiente que o site usa nas secções escuras. É o sinal de que isto não é o
   portal. */
.topbar { background: var(--bar-gradient); color: #fff; }

.bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.7rem 1rem;
}

.brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    margin-right: auto;
}
.brand span { color: var(--purple-light); }

.nav { display: flex; flex-wrap: wrap; gap: 0.25rem; order: 3; flex-basis: 100%; }
.nav a {
    padding: 0.45rem 0.8rem;
    color: #ded6ec;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 500;
}
.nav a:hover { background: rgb(152 58 255 / 22%); color: #fff; }
.nav a.current { background: rgb(152 58 255 / 32%); color: #fff; }

/* O painel de cada área: os mesmos atalhos da página inicial, em grelha. */
.tile-grid { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.tile-grid .tile { background: var(--surface); box-shadow: var(--shadow); }
@media (min-width: 48rem) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
    .tile-grid { grid-template-columns: repeat(3, 1fr); }
}

.nav .group {
    padding: 0.45rem 0.35rem;
    color: #9b8fb3;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.nav .divider { width: 1px; align-self: stretch; margin: 0.35rem 0.5rem; background: #3d2a57; }

.areas { display: grid; gap: 1rem; margin-top: 1.5rem; }
.area h2 { margin-top: 0; }

.signout { display: flex; align-items: center; gap: 0.6rem; margin: 0; order: 2; }
.who { color: #c2b8d4; font-size: 0.85rem; }

.link-button {
    padding: 0.35rem 0.9rem;
    background: none;
    border: 1px solid #4a3568;
    border-radius: var(--radius-pill);
    color: #ded6ec;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.link-button:hover { background: rgb(152 58 255 / 22%); color: #fff; }

.content { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.narrow { max-width: 26rem; margin: 3rem auto; padding: 0 1rem; }

.lede { color: var(--muted); margin-top: 0.25rem; }
.crumbs { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.hint { color: var(--muted); font-size: 0.85rem; }
.notice { color: var(--muted); }
.sub { color: var(--muted); font-size: 0.85rem; }

.card {
    padding: 1.25rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.stack { display: grid; gap: 0.85rem; }
.columns { display: grid; gap: 1rem; }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}
.filters input, .filters select { flex: 1 1 10rem; min-width: 0; }

label { display: block; font-weight: 500; font-size: 0.88rem; margin-bottom: 0.3rem; }

input, select, textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    background: var(--surface);
    color: var(--ink);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:hover, select:hover, textarea:hover { border-color: #cfd6de; }
input:focus, select:focus, textarea:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgb(94 23 235 / 14%);
    outline: none;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

button, .button {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand-gradient);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
button:hover, .button:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgb(94 23 235 / 26%);
    color: #fff;
}
button:active, .button:active { transform: translateY(1px); }

.button-secondary {
    background: var(--surface);
    color: var(--purple);
    border: 1px solid var(--line);
}
.button-secondary:hover {
    background: var(--surface);
    color: var(--purple);
    border-color: var(--purple);
    box-shadow: none;
    filter: none;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.inline-form input { max-width: 18rem; }
#nas-escolas details { margin: 0.9rem 0 0.4rem; }
#nas-escolas details summary { cursor: pointer; }
#nas-escolas table { margin-top: 1rem; }

.errors:not(:empty), .field-error:not(:empty) { color: var(--danger); font-size: 0.9rem; }

.banner {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--accent-soft);
}
.banner-ok { background: #e7f7ee; border-color: #b6e5cb; color: var(--ok); }
.banner-bad { background: #fdecea; border-color: #f6c5c0; color: var(--danger); }

.details { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1.25rem; margin: 0; }
.details dt { color: var(--muted); font-size: 0.8rem; }
.details dd { margin: 0 0 0.65rem; }

/* O número que alguém veio aqui ler. */
.balance {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.25rem 0 0;
    font-variant-numeric: tabular-nums;
}
.balance.zero { color: var(--danger); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.9rem; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
td.numeric.zero { color: var(--danger); font-weight: 600; }
td.positive { color: var(--ok); }
td.negative { color: var(--danger); }
td.message { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.plain-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.plain-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.plain-list li:last-child { border-bottom: 0; }
.plain-list form { margin: 0; }

button.small, .button.small { padding: 0.3rem 0.85rem; font-size: 0.85rem; }

/* O retrato das escolas é JSON; está ali para ser copiado, não para ser lido como prosa. */
td.snapshot {
    max-width: 16rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 500;
    background: var(--line-soft);
    color: var(--muted);
}
.tag-ok { background: #e7f7ee; color: var(--ok); }
.tag-wait { background: #fff5e6; color: #8a5300; }
.tag-bad { background: #fdecea; color: var(--danger); }

@media (min-width: 48rem) {
    .nav { order: 0; flex-basis: auto; margin-right: auto; margin-left: 1.25rem; }
    .brand { margin-right: 0; }
    .columns { grid-template-columns: 1.4fr 1fr; align-items: start; }
    .areas { grid-template-columns: 1fr 1fr; }
    .details { grid-template-columns: max-content 1fr; }
    .details dd { margin-bottom: 0.2rem; }
}

@media (max-width: 47.99rem) {
    /* Cada célula leva o seu próprio rótulo, por isso a linha lê-se como um cartão em vez de andar
       de lado. */
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards tr {
        margin-bottom: 0.6rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        overflow: hidden;
    }
    .table-cards td { border-bottom: 1px solid var(--line-soft); }
    .table-cards td:last-child { border-bottom: 0; }
    .table-cards td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
    }
    .table-cards td.numeric { text-align: left; }
    .table-cards td.message { max-width: none; white-space: normal; }
}

/* Um formulário que é na verdade um botão, ao lado daquilo sobre que age. */
.inline { display: inline; }
.inline button { padding: 0.2rem 0.8rem; font-size: 0.82rem; }

/* As listagens são grelhas (AG Grid). Só a altura e o enquadramento vivem aqui: as cores e a
   tipografia da grelha são passadas ao tema em grid.js, para não haver duas fontes de verdade sobre
   o aspecto de uma tabela. */
.grid {
    height: min(70vh, 640px);
    width: 100%;
    margin-top: 1rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

/* Uma listagem curta (uma procura com três resultados) mede o que tem, em vez de 640px quase vazios. */
.grid.grid-auto { height: auto; }
/* O AG Grid reserva 150px para a mensagem de "sem registos"; aqui há sempre linhas (grid.js). */
.grid-auto .ag-layout-auto-height .ag-center-cols-viewport,
.grid-auto .ag-layout-auto-height .ag-center-cols-container { min-height: 0 !important; }

/* Os botões e campos desta folha são para os formulários da página. Dentro da grelha, os filtros são
   do AG Grid: sem isto herdavam o gradiente, o padding e a largura total, e ficavam blocos roxos.
   O :where() deixa a regra com o peso de um elemento, por isso as classes do AG Grid ganham. */
:where(.grid) :is(button, input, select, textarea) {
    all: revert;
}

/* Num ecrã de telemóvel uma grelha com sete colunas é uma barra de scroll horizontal, e mais vale
   isso do que sete colunas espremidas a três caracteres cada. */
@media (max-width: 640px) {
    .grid { height: min(75vh, 520px); }
}

/* O nome da escola, e o id por baixo: é o id que se usa para a acrescentar ou procurar noutro lado. */
.school-name { display: grid; line-height: 1.3; }
.school-name .sub { font-size: 0.75rem; font-variant-numeric: tabular-nums; }

.card .table-wrap { border-radius: 0; margin: 0 -0.4rem; }
.card > h2:first-child { margin-top: 0; }
/* Só os cartões empilhados na página; os que estão lado a lado numa .columns ficam alinhados em cima. */
.content > section.card ~ section.card, .content > .columns ~ section.card { margin-top: 1rem; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Criar remetente: os passos de como a conta é usada. */
.how-to ol { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.75rem; font-size: 0.92rem; }
.how-to li strong { display: block; }
.created-sender .details { margin: 0.6rem 0; }
.created-sender code, .details code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    user-select: all;
}
.originator-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.inline-field { display: flex; gap: 0.5rem; }
.inline-field input { flex: 1; min-width: 0; }

.test-send { display: grid; gap: 0.75rem; align-items: end; }
label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; margin: 0; }
label.check input { width: auto; }
@media (min-width: 48rem) {
    .test-send { grid-template-columns: 12rem 1fr auto auto; }
    label.check { padding-bottom: 0.65rem; }
}

/* Acesso à conta: os dois links, lado a lado. */
.access h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.access p { margin: 0 0 0.6rem; }
.access-grid { display: grid; gap: 1.25rem; }
.access-grid form { margin: 0 0 0.5rem; }
.copy-field { display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.copy-field input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
button.link {
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    box-shadow: none;
    filter: none;
}
button.link:hover { color: var(--purple-deep); box-shadow: none; filter: none; }
@media (min-width: 48rem) {
    .access-grid { grid-template-columns: 1fr 1fr; }
}

/* Separadores de estado, numa listagem. */
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; }
.tabs a {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.tabs a span { color: var(--muted); margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.tabs a.current { background: var(--accent-soft); border-color: var(--purple); color: var(--purple-deep); }
h1 .tag { vertical-align: middle; margin-left: 0.4rem; }
.subheading { margin: 1.25rem 0 0.5rem; font-size: 0.95rem; }

/* Vendas: os números grandes, e as tabelas de totais. */
.figures { display: grid; gap: 1rem; margin: 1rem 0; }
.figure { display: grid; gap: 0.2rem; }
.figure-label { color: var(--muted); font-size: 0.85rem; }
.figure-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.breakdowns { display: grid; gap: 1rem; }
.breakdowns h2 { margin-top: 0; }
table.groups { background: none; }
table.groups td { padding: 0.45rem 0.3rem; }
.sales-filters label { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 500; }
.sales-filters input, .sales-filters select { width: auto; flex: none; }
@media (min-width: 48rem) {
    .figures { grid-template-columns: repeat(3, 1fr); }
    .breakdowns { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* Mais sobre a conta: secções que se abrem. */
.more details { border-top: 1px solid var(--line-soft); padding: 0.6rem 0; }
.more details:first-of-type { border-top: 0; }
.more summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; padding: 0.2rem 0; }
.more details[open] summary { margin-bottom: 0.5rem; }

/* O índice no topo da ficha. */
.toc {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.5rem 0 1rem;
    padding: 0.55rem 0;
    background: var(--bg);
}
.toc a {
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.82rem;
    text-decoration: none;
}
.toc a:hover { border-color: var(--purple); color: var(--purple-deep); }
[id] { scroll-margin-top: 4rem; }

/* Muitas escolas: a lista rola por dentro. */
.school-list { max-height: 15rem; overflow-y: auto; padding-right: 0.3rem; }
h2 .count { color: var(--muted); font-weight: 500; font-size: 0.85rem; margin-left: 0.3rem; }
button.small-link { font-size: 0.8rem; margin-left: 0.4rem; }
.confirm-dialog .inline-field { margin: 0; }

/* O que não se desfaz: a vermelho, e sempre atrás de uma confirmação. */
button.button-danger, .button-danger {
    background: var(--danger);
    color: #fff;
}
button.button-danger:hover { box-shadow: 0 6px 18px rgb(217 45 32 / 25%); }
button:disabled, button:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
    transform: none;
}
.danger-zone { border-color: #f6c5c0; }
.danger-zone h2 { color: var(--danger); }

.confirm-dialog {
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.4rem 1.5rem;
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgb(22 23 43 / 30%);
    color: var(--ink);
}
.confirm-dialog::backdrop { background: rgb(13 0 30 / 45%); }
.confirm-dialog h2 { margin: 0; }
.confirm-dialog p { margin: 0; }
.confirm-dialog .actions { justify-content: flex-end; margin-top: 0.25rem; }
.confirm-name {
    display: block;
    margin-top: 0.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    word-break: break-all;
}

/* O login: o lado escuro com a identidade, e o formulário ao lado. Num telemóvel, a identidade fica
   uma faixa em cima. */
.signin { display: grid; min-height: 100vh; background: var(--surface); }
.signin-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 2rem 1.5rem;
    min-height: 13rem;
    background: var(--bar-gradient);
    color: #fff;
}
.signin-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.signin-copy { position: relative; max-width: 30rem; }
.signin-mark { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.signin-mark span { color: var(--purple-light); }
.signin-tagline { margin: 0.35rem 0 0; color: #c9bfdc; font-size: 1rem; }
.signin-points { display: none; list-style: none; margin: 2rem 0 0; padding: 0; gap: 0.9rem; }
.signin-points li { display: flex; align-items: center; gap: 0.8rem; color: #ded6ec; font-size: 0.95rem; }
.signin-points svg {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background: rgb(152 58 255 / 22%);
    fill: none;
    stroke: #e6d9ff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.signin-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.signin-form { width: 100%; max-width: 24rem; }
.signin-form h1 { font-size: 1.75rem; }
.signin-form button[type="submit"] { width: 100%; margin-top: 0.4rem; padding: 0.75rem 1.3rem; }
.signin-form .code-input { font-size: 1.4rem; letter-spacing: 0.35em; text-align: center; }

/* O código de 6 algarismos, uma caixa por algarismo (site.js). O input verdadeiro fica fora de vista mas
   no formulário. */
.otp .otp-boxes { display: flex; gap: 0.55rem; }
.otp .otp-boxes[hidden] { display: none; }
.otp input.otp-cell {
    width: 2.9rem; height: 3.3rem; padding: 0; text-align: center;
    font-size: 1.4rem; font-weight: 600; letter-spacing: 0;
}
.otp input.otp-source {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important;
}
.otp .otp-toggle {
    display: inline-block; margin-top: 0.6rem; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 0.85rem; color: var(--muted); text-decoration: underline; width: auto;
}
.signin-form .signin-secondary { margin-top: 0.75rem; }
.signin-form > .hint { display: block; margin-top: 0.9rem; }

@media (min-width: 56rem) {
    .signin { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .signin-hero { align-items: center; padding: 3rem clamp(2rem, 6vw, 5rem); }
    .signin-mark { font-size: 2.4rem; }
    .signin-tagline { font-size: 1.1rem; }
    .signin-points { display: grid; }
}

/* A página inicial. */
.home-hero {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius);
    background: var(--bar-gradient);
    color: #fff;
    box-shadow: var(--shadow);
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgb(152 58 255 / 45%), transparent 45%),
        radial-gradient(circle at 10% 110%, rgb(12 143 255 / 30%), transparent 45%);
}
.home-hero > * { position: relative; }
.home-hero h1 { color: #fff; }
.home-hero p { margin: 0.25rem 0 1.1rem; color: #c9bfdc; }
.home-search { display: flex; gap: 0.5rem; max-width: 40rem; }
.home-search input { flex: 1; min-width: 0; border-color: transparent; }

.tiles { display: grid; gap: 1rem; margin-top: 1.25rem; }
.tile-group h2 { display: flex; align-items: center; gap: 0.6rem; margin-top: 0; }
.tile-group h2 svg, .tile svg {
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0.4rem;
    border-radius: 0.6rem;
    background: var(--accent-soft);
    fill: none;
    stroke: var(--purple);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tile-group > p { color: var(--muted); margin: 0 0 1rem; font-size: 0.92rem; }
.tile-links { display: grid; gap: 0.5rem; }
.tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease;
}
.tile:hover { border-color: var(--purple); background: #fbf8ff; color: var(--ink); }
.tile strong { display: block; font-weight: 600; font-size: 0.93rem; }
.tile span { display: block; color: var(--muted); font-size: 0.82rem; }
.tile::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 1.3rem; }

@media (min-width: 48rem) {
    .home-hero { padding: 2.25rem 2.25rem; }
    .tiles { grid-template-columns: 1fr 1fr; }
}

/* Enquanto uma navegação está a caminho (site.js). */
.loading {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(247 249 251 / 55%);
    cursor: progress;
}
.loading[hidden] { display: none; }
.loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 40%;
    background: var(--brand-gradient);
    animation: loading-bar 1.1s ease-in-out infinite;
}
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid var(--accent-soft);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-bar {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}
@keyframes loading-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}