/* SIGA Mobile — cores e medidas do SIGA S2, para o ecrã do telemóvel. */
:root {
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #eef2f7;
  --texto: #1d2733;
  --texto-suave: #5f6b7a;
  --borda: #dde3ea;
  --acento: #1565c0;
  --acento-texto: #ffffff;
  --vermelho: #c62828;
  --verde: #2e7d32;
  --aviso-fundo: #fff4e5;
  --aviso-borda: #f0a33a;
  --p1: #fddbd8; --p1-risca: #c62828;
  --p2: #fff0b3; --p2-risca: #b58900;
  --p3: #d1f0d6; --p3-risca: #2e7d32;
  --p4: #cfe4fa; --p4-risca: #1565c0;
  --p0: #e6e6e6; --p0-risca: #777777;
  --assoc: #e8def8; --assoc-risca: #6a4fa3;
  --lembrete: #d0f0f2; --lembrete-risca: #2896a0;
  --raio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #15191e;
    --superficie: #1e242b;
    --superficie-2: #262d35;
    --texto: #e8edf2;
    --texto-suave: #a3afbd;
    --borda: #343d48;
    --acento: #64a8f0;
    --acento-texto: #0d1620;
    --vermelho: #f26e64;
    --verde: #54b054;
    --aviso-fundo: #3a2e18;
    --aviso-borda: #c98a2c;
    --p1: #7a2c2c; --p1-risca: #f26e64;
    --p2: #6e5a14; --p2-risca: #e6c04a;
    --p3: #285e36; --p3-risca: #6cc77c;
    --p4: #244e7c; --p4-risca: #64a8f0;
    --p0: #505050; --p0-risca: #aaaaaa;
    --assoc: #483868; --assoc-risca: #b49ae6;
    --lembrete: #18464c; --lembrete-risca: #46aab4;
  }
}

* { box-sizing: border-box; }
/* O atributo hidden esconde sempre, mesmo em elementos com display definido (barra de separadores, grelhas...). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
a { color: var(--acento); }

.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: var(--acento); color: var(--acento-texto);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.barra h1 { font-size: 17px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .quem { font-size: 13px; opacity: .9; }
.voltar { background: none; border: 0; color: inherit; font-size: 30px; line-height: 1; padding: 0 8px 4px 0; cursor: pointer; }

main { padding: 12px 16px 24px; max-width: 720px; margin: 0 auto; }

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; background: var(--superficie); border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.abas button {
  flex: 1; background: none; border: 0; padding: 8px 0 10px; font-size: 12px; color: var(--texto-suave);
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
}
.abas .ic { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: .7; }
.abas button.ativa { color: var(--acento); font-weight: 600; }
.abas button.ativa .ic { filter: none; opacity: 1; }

/* entrar */
.entrar { max-width: 380px; margin: 8vh auto 0; }
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.marca img { width: 52px; height: 52px; border-radius: 12px; }
.marca strong { display: block; font-size: 20px; }
.marca span { color: var(--texto-suave); font-size: 13px; }
form label { display: block; font-size: 13px; color: var(--texto-suave); margin-bottom: 14px; }
form input {
  display: block; width: 100%; margin-top: 4px; padding: 11px 12px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; font-size: 16px;
}
form input:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.principal {
  width: 100%; padding: 12px; border: 0; border-radius: 8px;
  background: var(--acento); color: var(--acento-texto); font-weight: 600; font-size: 16px; cursor: pointer;
}
.principal:disabled { opacity: .6; }
.secundario {
  padding: 10px 14px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); cursor: pointer;
}
.erro { color: var(--vermelho); font-size: 14px; margin: -4px 0 12px; }

/* agenda */
.semana { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.semana .seta { border: 1px solid var(--borda); background: var(--superficie); border-radius: 8px; width: 36px; height: 36px; font-size: 18px; cursor: pointer; }
.semana .hoje { margin-left: auto; }
.dias { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 12px; }
.dias button {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 0;
  display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: 0;
}
.dias .sem { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; }
.dias .num { font-size: 17px; font-weight: 600; }
.dias .pontos { font-size: 10px; color: var(--texto-suave); height: 13px; }
.dias button.hoje-dia .num { color: var(--acento); }
.dias button.escolhido { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.dias button.escolhido .sem, .dias button.escolhido .pontos, .dias button.escolhido .num { color: var(--acento-texto); }
.dias button.fora { opacity: .55; }

.titulo-dia { font-size: 15px; font-weight: 600; margin: 4px 0 8px; }
.nota { background: var(--aviso-fundo); border-left: 4px solid var(--aviso-borda); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }
.vazio { color: var(--texto-suave); text-align: center; padding: 28px 0; }
.seccao { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 16px 0 6px; }

.cartao {
  display: flex; gap: 10px; width: 100%; text-align: left;
  background: var(--superficie); border: 1px solid var(--borda); border-left: 5px solid var(--p0-risca);
  border-radius: var(--raio); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.cartao .hora { font-weight: 600; font-size: 14px; min-width: 46px; }
.cartao .hora small { display: block; font-weight: 400; color: var(--texto-suave); }
.cartao .corpo { flex: 1; min-width: 0; }
.cartao .cli { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao .res { color: var(--texto-suave); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cartao.lembrete { background: var(--lembrete); border-left-color: var(--lembrete-risca); border-style: dashed; border-left-style: solid; cursor: default; }

.etiqueta { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-suave); white-space: nowrap; }
.etiqueta.curso { background: var(--p3); color: var(--texto); }
.etiqueta.ler { background: var(--acento); color: var(--acento-texto); }
.etiqueta.pausa { background: var(--p0); color: var(--texto); }

.procurar { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); margin-bottom: 12px; font-size: 16px; }

/* detalhe */
.cabeca { background: var(--superficie); border: 1px solid var(--borda); border-left: 5px solid var(--p0-risca); border-radius: var(--raio); padding: 12px; margin-bottom: 12px; }
.cabeca .num { color: var(--texto-suave); font-size: 13px; }
.cabeca h2 { font-size: 18px; margin: 2px 0 6px; }
.alerta { background: #fdecea; color: #8a1c13; border: 1px solid #f5b5ae; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .alerta { background: #4a1f1c; color: #ffd6d1; border-color: #8a3a33; } }
.bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-bottom: 12px; }
.bloco h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 0 0 8px; }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.campos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.campos dt { color: var(--texto-suave); }
.campos dd { margin: 0; overflow-wrap: anywhere; }
.accoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.accoes a { text-decoration: none; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); color: var(--texto); font-size: 14px; }
.intervencao { border-top: 1px solid var(--borda); padding: 8px 0; }
.intervencao:first-of-type { border-top: 0; padding-top: 0; }
.intervencao .quando { font-size: 12px; color: var(--texto-suave); }
.linha-lista { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--borda); padding: 10px 0; cursor: pointer; }
.linha-lista:first-of-type { border-top: 0; }
.linha-lista small { display: block; color: var(--texto-suave); }

.a-carregar { text-align: center; color: var(--texto-suave); padding: 32px 0; }

/* risca da prioridade (no fim, para valer sobre o contorno dos cartões e do cabeçalho) */
.p1 { border-left-color: var(--p1-risca); } .p2 { border-left-color: var(--p2-risca); }
.p3 { border-left-color: var(--p3-risca); } .p4 { border-left-color: var(--p4-risca); }
.assoc { border-left-color: var(--assoc-risca); }

/* formulários (criar ticket, intervenção, fecho) */
.formulario .bloco > input, .formulario .bloco > textarea { width: 100%; }
.campo { display: block; font-size: 13px; color: var(--texto-suave); margin: 10px 0 0; }
.campo input, .campo select, .campo textarea, .formulario textarea, .formulario input[type=search] {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font-size: 16px; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
}
.formulario textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.campo input:disabled, .campo select:disabled { opacity: .55; }
.campo input:focus, .campo select:focus, .formulario textarea:focus, .formulario input[type=search]:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.nota-campo { display: block; margin-top: 2px; font-size: 12px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.opcao { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 15px; color: var(--texto); }
.opcao input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--acento); }
.opcao small { display: block; color: var(--texto-suave); font-size: 12px; overflow-wrap: anywhere; }
.formulario .principal { margin-top: 4px; }
.formulario .erro { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea; }
@media (prefers-color-scheme: dark) { .formulario .erro { background: #4a1f1c; } }
.resultados { margin-top: 6px; }
.escolhido { display: flex; align-items: center; gap: 10px; }
.escolhido > div { flex: 1; min-width: 0; }
.escolhido strong { display: block; }
.escolhido small { display: block; color: var(--texto-suave); font-size: 13px; }
.escolhido small.atencao { color: var(--vermelho); }
.total { font-size: 17px; font-weight: 600; margin: 12px 0 4px; }
.artigos { font-size: 14px; color: var(--texto-suave); margin: 8px 0; }

.accoes-ticket { display: flex; gap: 8px; margin-bottom: 12px; }
.botao { flex: 1; text-align: center; text-decoration: none; padding: 12px; border-radius: 8px; font-weight: 600;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); }
.botao.principal-link { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }

.flutuante {
  position: fixed; right: 18px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 6;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--acento); color: var(--acento-texto); font-size: 30px; line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.aviso { background: var(--p3); color: var(--texto); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.aviso.mau { background: var(--aviso-fundo); border-left: 4px solid var(--aviso-borda); }

/* clientes e equipamentos */
.cartao.fechado { opacity: .8; }
.res.atencao, p.atencao { color: var(--vermelho); }
.ligacao { background: none; border: 0; padding: 0; color: var(--acento); font-size: 15px; cursor: pointer; text-align: left; }
a.linha-lista { color: var(--texto); text-decoration: none; }
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.foto { padding: 0; border: 0; background: var(--superficie-2); border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; }
.visor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fechar-visor { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; color: #fff; font-size: 26px; }
.copiar { display: block; margin: 6px 0 0 auto; padding: 6px 10px; font-size: 13px; color: var(--acento);
  background: none; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }