/* mIA Crew: componentes e layout (telemóvel primeiro). Só usa variáveis de tema.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--cor-fundo-fora); }
body { margin: 0; font-family: var(--fonte); font-size: var(--tam-base); line-height: 1.4; color: var(--cor-texto); background: var(--cor-fundo); -webkit-tap-highlight-color: transparent; max-width: var(--largura-max); margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 600px) { body { border-left: var(--linha) solid var(--cor-linha); border-right: var(--linha) solid var(--cor-linha); } }
a { color: var(--cor-texto); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.largo, h1, .titulo-largo { font-stretch: var(--largo); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.nome-mia { text-transform: none !important; } /* a marca escreve-se sempre "mIA" */
.rot { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-2); }

/* ---------- estrutura ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px var(--espaco) 10px; padding-top: calc(14px + env(safe-area-inset-top)); background: var(--cor-fundo); }
.topo .marca img { height: 32px; width: auto; display: block; }
.topo .lado { display: flex; gap: 8px; align-items: center; }
.chip-topo { height: var(--altura-botao-pequeno); padding: 0 10px; border-radius: var(--raio); background: var(--cor-carvao); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.chip-topo svg { width: 18px; height: 18px; color: var(--cor-marca); }
.chip-topo.off { background: var(--cor-marca); color: var(--cor-sobre-marca); }
.chip-topo.off svg { color: var(--cor-sobre-marca); }
.botao-icone { width: var(--altura-botao-pequeno); height: var(--altura-botao-pequeno); border-radius: var(--raio); border: var(--linha) solid var(--cor-linha); background: var(--cor-fundo); color: var(--cor-texto); display: inline-flex; align-items: center; justify-content: center; position: relative; text-decoration: none; cursor: pointer; flex: none; }
.botao-icone svg { width: 24px; height: 24px; }
.botao-icone .bolha { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cor-marca); color: var(--cor-sobre-marca); font-size: 11px; font-weight: 900; display: grid; place-items: center; }
.conteudo { flex: 1; width: 100%; padding: 0 var(--espaco) 24px; }
.conteudo:focus { outline: none; }

.dock { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--linha); background: var(--cor-linha); border-top: var(--linha) solid var(--cor-linha); }
.dock a { height: var(--altura-dock); background: var(--cor-fundo); color: var(--cor-texto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.dock a svg { width: 28px; height: 28px; }
.dock a.quente { background: var(--cor-marca); color: var(--cor-sobre-marca); }
.dock a[aria-current="page"] { box-shadow: inset 0 -5px 0 var(--cor-carvao); }
.assinatura { display: flex; justify-content: center; align-items: center; height: calc(32px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--cor-fundo); border-top: var(--linha) solid var(--cor-linha); }
.assinatura img { height: 16px; width: auto; }

/* ---------- tipografia ---------- */
h1 { font-size: var(--tam-titulo); line-height: 1; margin: 2px 0 8px; }
h2 { font-size: 15px; margin: 22px 0 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-stretch: var(--largo); }
.sub { color: var(--cor-texto-2); margin: 0 0 16px; font-size: 15px; }
.pequeno { font-size: var(--tam-pequeno); color: var(--cor-texto-2); }
.numero { font-variant-numeric: tabular-nums; }
.voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }

/* ---------- blocos ---------- */
.cartao { background: var(--cor-superficie); border: var(--linha) solid var(--cor-linha); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 12px; }
.centro { text-align: center; }
.ecra-central { min-height: 70vh; display: grid; place-items: center; padding: 24px 0; }
.ecra-central .cartao { width: 100%; padding: 28px 20px; }
.ecra-central img { border-radius: var(--raio); }

/* faixa a toda a largura (sai do padding do conteúdo) */
.banda { margin: 0 calc(var(--espaco) * -1) 14px; padding: 16px var(--espaco); border-top: var(--linha) solid var(--cor-linha); border-bottom: var(--linha) solid var(--cor-linha); }
.banda.urgente, .banda.agora { background: var(--cor-marca); color: var(--cor-sobre-marca); }
.banda.escura { background: var(--cor-carvao); color: #fff; border-color: var(--cor-carvao); }
.banda .linha1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; text-transform: uppercase; font-stretch: var(--largo); }
.banda .cliente { font-size: 22px; font-weight: 800; margin-top: 6px; line-height: 1.15; }
.banda .morada { font-size: 15px; font-weight: 600; margin-top: 2px; }
.banda .acoes { margin-top: 14px; }

.faixa { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--raio); margin-bottom: 12px; font-size: 14.5px; font-weight: 600; border: var(--linha) solid var(--cor-linha); }
.faixa svg { width: 22px; height: 22px; flex: none; }
.faixa.aviso { background: var(--cor-marca); color: var(--cor-sobre-marca); }
.faixa.info { background: var(--cor-superficie-2); }
.faixa.erro { background: var(--cor-erro-suave); border-color: var(--cor-erro); }
.faixa.ok { background: var(--cor-ok-suave); border-color: var(--cor-ok); }
.faixa .botao { margin-left: auto; }

.cabeca { padding: 4px 0 12px; }
.cabeca .grande { font-size: 34px; line-height: 1; }

.grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modulo { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 14px; border-radius: var(--raio); background: var(--cor-superficie); border: var(--linha) solid var(--cor-linha); color: var(--cor-texto); text-decoration: none; }
.modulo:active { background: var(--cor-marca-suave); }
.modulo .icone { width: 44px; height: 44px; border-radius: var(--raio); display: grid; place-items: center; background: var(--cor-carvao); color: var(--cor-marca); }
.modulo .icone svg { width: 24px; height: 24px; }
.modulo b { font-size: 15px; line-height: 1.2; font-weight: 800; }
.modulo span { font-size: 12.5px; color: var(--cor-texto-2); line-height: 1.3; }
.modulo .contador { position: absolute; top: 10px; right: 10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--cor-marca); color: var(--cor-sobre-marca); font-size: 13px; font-weight: 900; display: grid; place-items: center; }
.modulo .externo { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; color: var(--cor-texto-2); }
.modulo.desligado { opacity: .5; }

/* ---------- botões e formulários ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--altura-botao); padding: 10px 18px; border-radius: var(--raio); border: var(--linha) solid var(--cor-marca); background: var(--cor-marca); color: var(--cor-sobre-marca); font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: center; }
.botao:active { filter: brightness(.94); }
.botao:disabled { opacity: .5; cursor: default; }
.botao.escuro { background: var(--cor-carvao); border-color: var(--cor-carvao); color: #fff; }
.botao.secundario { background: var(--cor-fundo); color: var(--cor-texto); border-color: var(--cor-linha); }
.botao.perigo { background: var(--cor-erro); border-color: var(--cor-erro); color: #fff; }
.botao.pequeno { min-height: var(--altura-botao-pequeno); padding: 6px 12px; font-size: 13px; }
.botao.largo, .botao.bloco { width: 100%; }
.botao svg { width: 22px; height: 22px; flex: none; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acoes.duas-col { display: grid; grid-template-columns: 1fr 1fr; }
.ligacao { background: none; border: 0; padding: 0; min-height: 44px; font-weight: 700; text-decoration: underline; cursor: pointer; }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-2); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 56px; padding: 12px; border-radius: var(--raio); border: var(--linha) solid var(--cor-linha); background: var(--cor-fundo); font-size: 17px; font-weight: 600; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo .ajuda { display: block; font-size: 12.5px; color: var(--cor-texto-2); margin-top: 4px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolhas label { position: relative; }
.escolhas input { position: absolute; opacity: 0; inset: 0; }
.escolhas span { display: inline-flex; align-items: center; min-height: var(--altura-botao-pequeno); padding: 8px 14px; border-radius: var(--raio); border: var(--linha) solid var(--cor-linha); background: var(--cor-fundo); font-size: 15px; font-weight: 700; cursor: pointer; }
.escolhas input:checked + span { background: var(--cor-carvao); color: #fff; }
.escolhas input:disabled + span { opacity: .45; }
.escolhas input:focus-visible + span { outline: 3px solid var(--cor-foco); outline-offset: 2px; }

.foto-zona { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.foto-zona .botao { min-height: 110px; flex-direction: column; font-size: 14px; }
.foto-zona .botao svg { width: 32px; height: 32px; }
.previa { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--cor-superficie-2); border: var(--linha) solid var(--cor-linha); margin-bottom: 14px; text-align: center; }
.previa img { display: block; max-height: 340px; margin: 0 auto; }
.previa .pdf { padding: 26px; font-weight: 700; }
.previa button { position: absolute; top: 8px; right: 8px; }

/* ---------- listas ---------- */
.lista { list-style: none; margin: 0 calc(var(--espaco) * -1); padding: 0; border-top: var(--linha) solid var(--cor-linha-suave); }
.lista li { display: flex; gap: 14px; align-items: center; padding: 12px var(--espaco); min-height: 76px; border-bottom: var(--linha) solid var(--cor-linha-suave); }
.lista li > a { display: flex; gap: 14px; align-items: center; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.lista .hora { width: 58px; flex: none; }
.lista .hora b { display: block; font-size: 20px; font-weight: 900; font-stretch: var(--largo); }
.lista .hora small { font-size: 11px; font-weight: 800; color: var(--cor-texto-2); text-transform: uppercase; }
.lista .miniatura { width: 56px; height: 56px; border-radius: var(--raio); background: var(--cor-superficie-2); border: var(--linha) solid var(--cor-linha); flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--cor-texto-2); overflow: hidden; }
.lista .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.lista .texto { flex: 1; min-width: 0; }
.lista .texto b { display: block; font-size: 16px; font-weight: 800; }
.lista .texto small { display: block; color: var(--cor-texto-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .direita { text-align: right; flex: none; }
.lista li.feito { opacity: .55; }
.lista li.urgente { background: var(--cor-marca-suave); }
.lista .seta { width: 22px; height: 22px; flex: none; }
.vazio { text-align: center; padding: 28px 8px; color: var(--cor-texto-2); font-weight: 600; }

.chip { display: inline-block; padding: 3px 8px; border-radius: var(--raio); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--cor-fundo); color: var(--cor-texto); border: var(--linha) solid var(--cor-linha); white-space: nowrap; }
.chip.ok { background: var(--cor-ok-suave); color: var(--cor-ok); border-color: var(--cor-ok); }
.chip.aviso { background: var(--cor-marca); color: var(--cor-sobre-marca); border-color: var(--cor-marca); }
.chip.erro { background: var(--cor-erro-suave); color: var(--cor-erro); border-color: var(--cor-erro); }
.chip.info { background: var(--cor-info-suave); color: var(--cor-info); border-color: var(--cor-info); }
.chip.marca { background: var(--cor-carvao); color: #fff; border-color: var(--cor-carvao); }

.separadores { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 2px; }
.separadores button { flex: none; min-height: 44px; border: var(--linha) solid var(--cor-linha); background: var(--cor-fundo); border-radius: var(--raio); padding: 6px 14px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.separadores button[aria-pressed="true"] { background: var(--cor-carvao); color: #fff; }

.tr { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-bottom: var(--linha) solid var(--cor-linha-suave); }
.tr b { font-weight: 700; text-align: right; }

/* ---------- gestão ---------- */
.pessoa { padding: 0; overflow: hidden; }
.pessoa > header { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.pessoa > header .texto { flex: 1; min-width: 0; }
.pessoa > header small { display: block; color: var(--cor-texto-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.pessoa .corpo { border-top: var(--linha) solid var(--cor-linha); padding: 14px 16px; background: var(--cor-superficie-2); }
.avatar { width: 44px; height: 44px; border-radius: var(--raio); background: var(--cor-carvao); color: var(--cor-marca); display: grid; place-items: center; font-weight: 900; font-size: 16px; flex: none; }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; font-size: 14px; min-height: 44px; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor i { width: 56px; height: 32px; border-radius: var(--raio); background: var(--cor-fundo); border: var(--linha) solid var(--cor-linha); position: relative; flex: none; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 2px; background: var(--cor-carvao); transition: transform .15s; }
.interruptor input:checked + i { background: var(--cor-marca); }
.interruptor input:checked + i::after { transform: translateX(24px); }
.interruptor input:focus-visible + i { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.ferramentas { width: 100%; border-collapse: collapse; font-size: 14px; }
.ferramentas td, .ferramentas th { padding: 8px 6px; border-bottom: var(--linha) solid var(--cor-linha-suave); text-align: left; vertical-align: middle; }
.ferramentas th { font-size: 11px; color: var(--cor-texto-2); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ferramentas select { min-height: 44px; padding: 4px 8px; border-radius: var(--raio); border: var(--linha) solid var(--cor-linha); background: var(--cor-fundo); font-weight: 600; }
.ferramentas .centro { text-align: center; }
.ferramentas input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--cor-marca); }
.rolar { overflow-x: auto; }

/* ---------- avisos rápidos ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--altura-dock) + 48px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; width: min(calc(100% - 32px), 520px); padding: 14px 16px; border-radius: var(--raio); background: var(--cor-carvao); color: #fff; box-shadow: var(--sombra-forte); font-size: 15px; font-weight: 700; }
.toast.erro { background: var(--cor-erro); }
.rodape-marca { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 0 4px; }
.rodape-marca img { height: 24px; width: auto; }
.carregar { display: grid; place-items: center; min-height: 30vh; color: var(--cor-texto-2); font-weight: 700; }