/* Partilha de Ficheiros — Multidigital */

:root {
    --fundo: #f4f5f7;
    --superficie: #ffffff;
    --superficie-2: #f7f8fa;
    --superficie-3: #eef0f3;
    --borda: #e3e6eb;
    --borda-forte: #cfd4dc;
    --texto: #141821;
    --texto-2: #4a5263;
    --texto-3: #7a8294;
    --acento: #cf5f0c;
    --acento-hover: #b45108;
    --acento-suave: #fdf0e4;
    --acento-texto: #ffffff;
    --azul-marca: #8ec9e6;

    --vermelho: #dc2f23;
    --vermelho-texto: #b42318;
    --vermelho-suave: #fdeceb;
    --amarelo: #f2b705;
    --amarelo-texto: #8f5b00;
    --amarelo-suave: #fff5d4;
    --verde: #1f9d55;
    --verde-texto: #16733e;
    --verde-suave: #e2f5ea;
    --azul-texto: #1d63b8;
    --azul-suave: #e6f1fb;

    --raio: 14px;
    --raio-pequeno: 9px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-media: 0 4px 16px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-grande: 0 20px 50px rgba(16, 24, 40, .18);
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    --altura-topo: 62px;
    --nav-baixo: 0px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #0e1116;
        --superficie: #161a21;
        --superficie-2: #1b2029;
        --superficie-3: #232a35;
        --borda: #2a313d;
        --borda-forte: #3a4352;
        --texto: #e9ecf1;
        --texto-2: #b3bac7;
        --texto-3: #838c9c;
        --acento: #ff9d57;
        --acento-hover: #ffb37c;
        --acento-suave: #3a2413;
        --acento-texto: #2a1500;

        --vermelho: #f0564b;
        --vermelho-texto: #ff8a80;
        --vermelho-suave: #3a1a19;
        --amarelo: #f5c32c;
        --amarelo-texto: #f7cf5b;
        --amarelo-suave: #36290b;
        --verde: #34c373;
        --verde-texto: #6ddb9c;
        --verde-suave: #11301f;
        --azul-texto: #8cc0f0;
        --azul-suave: #14263a;

        --sombra: 0 1px 2px rgba(0, 0, 0, .3);
        --sombra-media: 0 6px 20px rgba(0, 0, 0, .35);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-topo) + 12px); }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nav-baixo) + env(safe-area-inset-bottom));
}

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .9em; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.ic {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}
.titulo-icone { color: var(--acento); width: 22px; height: 22px; }

/* ---------- Topo ---------- */

.topo {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--borda);
}
.topo-in {
    max-width: 1240px; margin: 0 auto; height: var(--altura-topo);
    padding: 0 max(20px, env(safe-area-inset-left));
    display: flex; align-items: center; gap: 24px;
}
.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none !important; flex: none; }
.marca-logo { width: 125px; height: 30px; object-fit: contain; }
.marca-nome {
    font-weight: 600; font-size: 14px; color: var(--texto-3);
    padding-left: 13px; border-left: 1px solid var(--borda-forte); line-height: 1.2;
}
.logo-grande { width: 200px; height: 47px; object-fit: contain; }

.nav { display: flex; gap: 4px; flex: 1; }
.nav-link {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px;
    color: var(--texto-2); font-weight: 550; font-size: 14.5px; white-space: nowrap;
}
.nav-link:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.nav-link.ativo { background: var(--acento-suave); color: var(--acento); }
.nav-link .ic { width: 17px; height: 17px; }

.topo-acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--superficie-3); color: var(--texto-2);
    font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.avatar-pequeno { width: 32px; height: 32px; font-size: 12px; }

.menu-conta { position: relative; }
.menu-conta summary { list-style: none; cursor: pointer; }
.menu-conta summary::-webkit-details-marker { display: none; }
.menu-conta[open] > summary { box-shadow: 0 0 0 3px var(--acento-suave); }
.menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 235px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: var(--sombra-media); padding: 6px; z-index: 50;
}
.menu-cabecalho { padding: 10px 12px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; display: flex; flex-direction: column; }
.menu-cabecalho span { color: var(--texto-3); font-size: 13px; }
.menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px;
    border: 0; background: none; color: var(--texto); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--superficie-3); text-decoration: none; }
.menu-item .ic { color: var(--texto-3); }
.menu-item-perigo { color: var(--vermelho-texto); }
.menu-item-perigo .ic { color: currentColor; }
.menu-item-perigo:hover { background: var(--vermelho-suave); }
.menu-ficheiro .menu { min-width: 210px; }

/* ---------- Estrutura ---------- */

.conteudo {
    max-width: 1240px; margin: 0 auto;
    padding: 24px max(20px, env(safe-area-inset-left)) 60px;
}

.cabecalho-pagina {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.cabecalho-pagina .sub { color: var(--texto-3); margin-top: 6px; max-width: 72ch; }
.acoes-pagina { display: flex; gap: 10px; flex-wrap: wrap; }

.voltar {
    display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3);
    font-weight: 550; font-size: 14px; margin-bottom: 14px;
}
.voltar:hover { color: var(--texto); text-decoration: none; }
.voltar .ic { width: 16px; height: 16px; }

.cartao {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
}

.seccao-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 1.05rem; }
.seccao-titulo .ic { color: var(--texto-3); }

.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.linha-resumo { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- Migalhas ---------- */

.migalhas {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 12px; font-size: 14px; color: var(--texto-3); min-height: 24px;
}
.migalhas a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3); font-weight: 550; }
.migalhas a:hover { color: var(--acento); text-decoration: none; }
.migalhas strong { color: var(--texto); font-weight: 650; }
.migalha-seta { width: 15px; height: 15px; opacity: .55; }

/* ---------- Botões ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 10px;
    border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 14.5px;
    cursor: pointer; white-space: nowrap; text-decoration: none !important;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ic { width: 17px; height: 17px; }
.btn-primario { background: var(--acento); color: var(--acento-texto); box-shadow: 0 1px 2px rgba(207, 95, 12, .3); }
.btn-primario:hover:not(:disabled) { background: var(--acento-hover); }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); box-shadow: var(--sombra); }
.btn-secundario:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--texto-3); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-3); color: var(--texto); }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-perigo:hover { filter: brightness(.95); }
.btn-grande { height: 48px; font-size: 15.5px; border-radius: 12px; }
.btn-pequeno { height: 32px; padding: 0 11px; font-size: 13.5px; border-radius: 8px; }
.btn-bloco { width: 100%; }

.btn-icone {
    width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none;
    border-radius: 9px; border: 0; background: transparent; color: var(--texto-3); cursor: pointer;
}
.btn-icone:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.btn-icone-perigo:hover { background: var(--vermelho-suave); color: var(--vermelho-texto); }

/* ---------- Etiquetas ---------- */

.etiqueta {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px;
    font-size: 12px; font-weight: 650; white-space: nowrap;
}
.etiqueta .ic { width: 14px; height: 14px; }
.etiqueta-vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.etiqueta-amarelo { background: var(--amarelo-suave); color: var(--amarelo-texto); }
.etiqueta-verde { background: var(--verde-suave); color: var(--verde-texto); }
.etiqueta-azul { background: var(--azul-suave); color: var(--azul-texto); }
.etiqueta-neutro { background: var(--superficie-3); color: var(--texto-2); }
a.etiqueta:hover { text-decoration: none; filter: brightness(.97); }

/* ---------- Avisos ---------- */

.avisos {
    position: fixed; z-index: 60; top: calc(var(--altura-topo) + 12px); right: 16px; left: 16px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none;
}
.aviso {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-media);
    max-width: 520px; pointer-events: auto; font-weight: 500;
    animation: entrar-aviso .25s ease-out;
}
.aviso > span { flex: 1; white-space: pre-line; overflow-wrap: anywhere; }
.aviso > .ic { margin-top: 2px; }
.aviso-sucesso > .ic { color: var(--verde); }
.aviso-erro { border-color: color-mix(in srgb, var(--vermelho) 35%, var(--borda)); }
.aviso-erro > .ic { color: var(--vermelho); }
.aviso-aviso > .ic { color: var(--amarelo-texto); }
.aviso-estatico { max-width: none; box-shadow: none; animation: none; margin-bottom: 16px; }
.aviso-estatico.aviso-erro { background: var(--vermelho-suave); color: var(--vermelho-texto); border-color: transparent; }
.aviso-estatico.aviso-aviso { background: var(--amarelo-suave); color: var(--amarelo-texto); border-color: transparent; }
.aviso-fechar { border: 0; background: none; color: var(--texto-3); cursor: pointer; padding: 0; margin: 1px 0 0 4px; }
.aviso-fechar .ic { width: 16px; height: 16px; }
.aviso.a-sair { opacity: 0; transform: translateY(-6px); transition: .25s; }
@keyframes entrar-aviso { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Estatísticas ---------- */

.estatisticas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); color: var(--texto); text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}
a.stat:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.stat-rotulo { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-weight: 600; font-size: 13.5px; }
.stat-rotulo .ic { width: 16px; height: 16px; color: var(--texto-3); }
.stat-num { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }

/* ---------- Formulários ---------- */

input[type=text], input[type=search], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--texto);
    background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 10px;
    padding: 9px 12px; min-height: 42px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; line-height: 1.5; }
select {
    appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237a8294' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
input[readonly] { background: var(--superficie-2); color: var(--texto-2); }
input::placeholder { color: var(--texto-3); opacity: .85; }

.formulario { padding: 24px; }
.formulario-estreito { padding: 20px; }
.grelha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo-largo > .grelha-campos { gap: 18px 20px; }
.campo-rotulo { font-weight: 600; font-size: 13.5px; color: var(--texto-2); }
.campo-rotulo em { color: var(--vermelho); font-style: normal; }
.campo-ajuda { color: var(--texto-3); font-size: 13px; }
.campo-erro { color: var(--vermelho-texto); font-size: 13px; font-weight: 550; }
.campo-invalido input, .campo-invalido select { border-color: var(--vermelho); }
.campo-password { position: relative; display: flex; }
.campo-password input { padding-right: 46px; }
.campo-password .btn-icone { position: absolute; right: 3px; top: 3px; }
.caixa { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.caixa input { width: 18px; height: 18px; accent-color: var(--acento); margin: 0; flex: none; }
.formulario-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.numero-fixo { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.dica { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 14px; margin-top: 14px; }
.dica .ic { width: 16px; height: 16px; }

.bloco-conta {
    margin-top: 22px; padding: 18px; border-radius: var(--raio);
    background: var(--superficie-2); border: 1px solid var(--borda);
    display: flex; flex-direction: column; gap: 16px;
}

.zona-perigo {
    padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--vermelho) 25%, var(--borda));
}
.zona-perigo h2 { font-size: 1rem; }
.zona-perigo p { color: var(--texto-3); font-size: 14px; margin-top: 4px; max-width: 60ch; }
.zona-perigo-acao { display: flex; gap: 10px; }
.zona-perigo-acao input { width: 180px; }

.password-temporaria { display: flex; gap: 14px; padding: 18px 20px; margin-bottom: 18px; border-color: color-mix(in srgb, var(--amarelo) 50%, var(--borda)); background: var(--amarelo-suave); }
.password-temporaria > .ic { color: var(--amarelo-texto); margin-top: 3px; }
.password-temporaria p { color: var(--texto-2); font-size: 14px; margin: 2px 0 10px; }
.password-codigo { display: inline-block; font-size: 1.3rem; font-weight: 700; padding: 8px 14px; background: var(--superficie); border-radius: 9px; letter-spacing: .04em; cursor: copy; user-select: all; }

.pesquisa-pasta { display: flex; gap: 10px; margin-bottom: 18px; }
.pesquisa { position: relative; flex: 1; display: flex; }
.pesquisa .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.pesquisa input[type=search] { padding-left: 40px; }

/* ---------- Pastas ---------- */

.grupo-titulo { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 14.5px; color: var(--texto-2); font-weight: 600; }
.grupo-titulo .ic { color: var(--texto-3); }
.grupo-titulo span { color: var(--texto-3); font-weight: 500; }

.lista-pastas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-pastas li { position: relative; }
.pasta-linha {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: var(--texto);
    text-decoration: none !important; transition: border-color .15s, box-shadow .15s;
}
.pasta-linha:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.pasta-icone {
    width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
    background: var(--acento-suave); color: var(--acento);
}
.pasta-icone .ic { width: 21px; height: 21px; }
.pasta-icone-grande { width: 46px; height: 46px; border-radius: 13px; }
.pasta-icone-grande .ic { width: 24px; height: 24px; }
.pasta-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pasta-nome { font-weight: 650; overflow-wrap: anywhere; }
.pasta-info small { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasta-numeros { display: flex; gap: 14px; flex-wrap: wrap; color: var(--texto-3); font-size: 13px; margin-top: 3px; }
.pasta-numeros span { display: inline-flex; align-items: center; gap: 5px; }
.pasta-numeros .ic { width: 14px; height: 14px; }
.pasta-espaco { text-align: right; flex: none; width: 140px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.pasta-espaco-valor { font-weight: 650; font-variant-numeric: tabular-nums; }
.pasta-espaco small { color: var(--texto-3); font-size: 12.5px; }
.pasta-espaco .progresso { width: 100%; margin-top: 2px; }
.pasta-eliminar { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); }
.lista-raizes .pasta-linha { padding: 14px 16px; }
.seta { color: var(--texto-3); flex: none; }

.pasta-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--texto-3); font-size: 13.5px; margin-top: 8px; align-items: center; }
.pasta-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pasta-meta .ic { width: 15px; height: 15px; }
.progresso-quota { max-width: 280px; margin-top: 10px; }

.progresso { height: 6px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; display: block; }
.progresso > span { display: block; height: 100%; border-radius: inherit; background: var(--acento); transition: width .25s ease; }
.progresso.quota-cheia > span { background: var(--vermelho); }
.progresso .progresso-verde { background: var(--verde); }

/* ---------- Ficheiros ---------- */

.ficheiros {
    list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
    /* sem overflow:hidden — cortaria o menu «…» de cada linha */
}
.ficheiro { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.ficheiro:first-child { border-radius: var(--raio) var(--raio) 0 0; }
.ficheiro:last-child { border-radius: 0 0 var(--raio) var(--raio); }
.ficheiro:only-child { border-radius: var(--raio); }
.ficheiro + .ficheiro { border-top: 1px solid var(--borda); }
.ficheiro-expirado { opacity: .55; }
.ficheiro-novo { background: var(--acento-suave); }
.ficheiro-ext {
    width: 40px; height: 44px; flex: none; border-radius: 8px; display: grid; place-items: end center; padding-bottom: 7px;
    background: var(--superficie-3); color: var(--texto-2); font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .02em; overflow: hidden;
    clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
.ficheiro-ext .ic { width: 20px; height: 20px; margin-bottom: 4px; }
.fam-documento { background: #fde3e1; color: #b42318; }
.fam-folha { background: #dcf3e5; color: #15803d; }
.fam-imagem { background: #ede4fd; color: #6d28d9; }
.fam-arquivo { background: #fdf0d5; color: #92400e; }
.fam-video, .fam-audio { background: #e1eafd; color: #1d4ed8; }
.fam-desenho { background: #e0f2fe; color: #0369a1; }
.fam-pasta { background: var(--acento-suave); color: var(--acento); }
@media (prefers-color-scheme: dark) {
    .fam-documento { background: #3d1c1a; color: #ff9a90; }
    .fam-folha { background: #13301f; color: #7ddca3; }
    .fam-imagem { background: #2a1f45; color: #c4a9ff; }
    .fam-arquivo { background: #362a10; color: #f5c56b; }
    .fam-video, .fam-audio { background: #1c2847; color: #9db4ff; }
    .fam-desenho { background: #10283a; color: #7cc4ef; }
}
.ficheiro-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ficheiro-nome { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.ficheiro-nome:hover { color: var(--acento); }
.ficheiro-meta { color: var(--texto-3); font-size: 13px; }
.ficheiro-etiquetas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ficheiro-acoes { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ficheiro-acoes form { display: contents; }

/* ---------- Carregamento ---------- */

.carregar { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.zona-largar {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 26px 18px; border: 1.5px dashed var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.zona-largar:hover, .zona-largar.sobre { border-color: var(--acento); background: var(--acento-suave); }
.zona-largar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zona-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); margin-bottom: 4px; }
.zona-icone .ic { width: 22px; height: 22px; }
.zona-texto { color: var(--texto-2); }
.zona-texto u { color: var(--acento); text-decoration: none; font-weight: 600; }
.zona-ajuda { color: var(--texto-3); font-size: 13px; }

.fila { display: flex; flex-direction: column; gap: 6px; }
.fila:empty { display: none; }
.fila-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
    padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; font-size: 14px;
}
.fila-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.fila-estado { color: var(--texto-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila-item .progresso { grid-column: 1 / -1; }
.fila-item.erro { border-color: color-mix(in srgb, var(--vermelho) 40%, var(--borda)); }
.fila-item.erro .fila-estado { color: var(--vermelho-texto); grid-column: 1 / -1; white-space: pre-line; }
.fila-item.feito .fila-estado { color: var(--verde-texto); font-weight: 600; }

/* ---------- Diálogos ---------- */

.dialogo {
    border: 1px solid var(--borda); border-radius: var(--raio); padding: 0; width: min(520px, calc(100vw - 32px));
    background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-grande);
}
.dialogo::backdrop { background: rgba(8, 10, 14, .55); backdrop-filter: blur(2px); }
.dialogo form { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.dialogo-titulo { display: flex; align-items: center; gap: 9px; font-size: 1.15rem; font-weight: 650; }
.dialogo-titulo .ic { color: var(--acento); }
.dialogo-sub { color: var(--texto-3); font-size: 14px; margin-top: -8px; overflow-wrap: anywhere; }
.dialogo .formulario-acoes { margin-top: 4px; }

.ligacao-criada { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--verde-suave); border-radius: 10px; }
.ligacao-caixa { display: flex; gap: 8px; }
.ligacao-caixa input { font-size: 13.5px; font-family: var(--mono); }
.ligacao-caixa-linha { margin-top: 8px; max-width: 520px; }
.ligacao-caixa-linha input { min-height: 34px; padding: 4px 10px; }

/* ---------- Histórico ---------- */

.historico { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.historico-linha { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.historico-linha + .historico-linha { border-top: 1px solid var(--borda); }
.historico-icone { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); }
.historico-icone .ic { width: 16px; height: 16px; }
.cor-verde { background: var(--verde-suave); color: var(--verde-texto); }
.cor-vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.cor-amarelo { background: var(--amarelo-suave); color: var(--amarelo-texto); }
.cor-azul { background: var(--azul-suave); color: var(--azul-texto); }
.historico-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.historico-texto strong { font-weight: 600; overflow-wrap: anywhere; }
.historico-texto small { color: var(--texto-3); }
.historico-quando { color: var(--texto-3); font-size: 13px; white-space: nowrap; }

/* ---------- Listas simples ---------- */

.lista-simples { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.linha-cliente, .linha-utilizador { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--texto); text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.linha-cliente:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.linha-utilizador { padding: 8px 0; }
.linha-utilizador:hover { text-decoration: none; }
.linha-cliente-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha-cliente-info small { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-cliente-numeros { display: flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: 14px; white-space: nowrap; }
.linha-cliente-numeros small { color: var(--texto-3); }
.inativo { opacity: .6; }

/* ---------- Vazio ---------- */

.vazio { text-align: center; padding: 52px 20px; color: var(--texto-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vazio h1, .vazio h2 { color: var(--texto); justify-content: center; }
.vazio p { max-width: 48ch; }
.vazio .btn { margin-top: 10px; }
.vazio-icone { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--superficie-3); margin-bottom: 6px; }
.vazio-icone .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.vazio-codigo { font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.vazio-pequeno { padding: 22px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--texto-3); }
.vazio-erro .vazio-icone { color: var(--vermelho); background: var(--vermelho-suave); }

/* ---------- Entrar e páginas públicas ---------- */

.pagina-simples { min-height: 100vh; min-height: 100dvh; display: flex; background: radial-gradient(1100px 560px at 50% -10%, var(--acento-suave), transparent 70%), var(--fundo); }
.simples { margin: auto; width: 100%; max-width: 460px; padding: 32px 20px; }
.entrar-marca { text-align: center; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.entrar-marca h1 { font-size: 1.45rem; justify-content: center; }
.entrar-marca p { color: var(--texto-3); margin-top: -8px; }
.entrar-cartao { padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra-media); }
.entrar-cartao .aviso { margin: 0; }
.entrar-cartao .btn { margin-top: 4px; }
.publica-cartao { padding: 26px; box-shadow: var(--sombra-media); }
.publica-ficheiro { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.publica-ficheiro h1 { font-size: 1.2rem; overflow-wrap: anywhere; }
.publica-ficheiro .sub { color: var(--texto-3); font-size: 14px; margin-top: 4px; }
.publica-ficheiro .ficheiro-ext { width: 52px; height: 58px; font-size: 11.5px; }
.publica-nota { display: flex; align-items: flex-start; gap: 8px; color: var(--texto-3); font-size: 13px; margin-top: 18px; }
.publica-nota .ic { width: 15px; height: 15px; margin-top: 2px; }
.publica-rodape { text-align: center; color: var(--texto-3); font-size: 12.5px; margin-top: 20px; }

/* ---------- Navegação inferior (telemóvel) ---------- */

.nav-baixo { display: none; }
.so-movel { display: none !important; }

@media (max-width: 1100px) {
    .so-desktop-largo { display: none !important; }
    .nav-link { padding: 8px 10px; }
    .nav-link .ic { display: none; }
}

@media (max-width: 860px) {
    :root { --altura-topo: 56px; --nav-baixo: 66px; }
    body { font-size: 15.5px; }
    .so-desktop { display: none !important; }
    .menu-item.so-movel { display: flex !important; }
    .nav { display: none; }
    .topo-in { gap: 12px; }
    .marca-logo { width: 108px; height: 26px; }

    .nav-baixo {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: center;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        height: calc(var(--nav-baixo) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
        background: color-mix(in srgb, var(--superficie) 92%, transparent);
        backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
        border-top: 1px solid var(--borda);
    }
    .nav-baixo-link {
        display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
        color: var(--texto-3); font-size: 11px; font-weight: 600; text-decoration: none !important;
    }
    .nav-baixo-link .ic { width: 22px; height: 22px; }
    .nav-baixo-link.ativo { color: var(--acento); }
    .nav-baixo-nova {
        justify-self: center; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
        background: linear-gradient(145deg, #f08a2a, #c25608); color: #fff; margin-top: -18px;
        box-shadow: 0 6px 18px rgba(194, 86, 8, .45);
    }
    .nav-baixo-nova .ic { width: 25px; height: 25px; stroke-width: 2.2; }

    .avisos { top: auto; bottom: calc(var(--nav-baixo) + env(safe-area-inset-bottom) + 12px); align-items: stretch; }
    .aviso { max-width: none; }

    .conteudo { padding-top: 16px; padding-bottom: 32px; }
    h1 { font-size: 1.32rem; }
    .cabecalho-pagina { margin-bottom: 14px; align-items: flex-start; }
    .acoes-pagina { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .acoes-pagina .btn { width: 100%; }
    .acoes-pagina .btn:only-child { grid-column: 1 / -1; }

    .estatisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
    .stat { padding: 11px 12px; }
    .stat-num { font-size: 1.35rem; }

    .duas-colunas, .grelha-campos { grid-template-columns: 1fr; }
    .formulario { padding: 18px; }
    .formulario-acoes { display: grid; grid-template-columns: 1fr 1fr; }
    .formulario-acoes .btn:only-child { grid-column: 1 / -1; }
    .zona-perigo { padding: 18px; }
    .zona-perigo-acao { width: 100%; }
    .zona-perigo-acao input { flex: 1; width: auto; }

    .pasta-espaco { width: auto; }
    .pasta-espaco .progresso { display: none; }
    .pasta-eliminar { right: 10px; }
    .lista-pastas .seta { display: none; }
    .ficheiro { padding: 11px 12px; gap: 11px; }
    .ficheiro-ext { width: 36px; height: 40px; }
    .ligacao-caixa-linha input { font-size: 12px; }
    .historico-quando { display: none; }
    .dialogo form { padding: 18px; }
}

@media (max-width: 380px) {
    .acoes-pagina { grid-template-columns: 1fr; }
}

/* Menu «…» que abriria fora do ecrã passa para cima da linha. */
.menu-acima { top: auto; bottom: calc(100% + 8px); }

/* Formulário sozinho (sem coluna lateral) não deve esticar a largura toda. */
.coluna-unica { max-width: 720px; }