/* Visual de app, primeiro para o telemóvel (#31). Tokens e base iguais aos do App Acesso
   (backend/app/static/estilo.css): mudar um é mudar os dois. Regras: emilkowalski/skills (mobile-native). */
:root{
  --verde:#17392B;--verde-2:#22503D;--ouro:#C79A2E;
  --fundo:#F3F2ED;--cartao:#fff;--linha:#E4E1D7;--tinta:#1C1B17;--suave:#67655C;--erro:#B3261E;
  --raio:14px;--raio-sm:10px;
  --sombra:0 1px 2px rgba(23,57,43,.06),0 6px 20px rgba(23,57,43,.07);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --barra:64px;  /* altura da barra de separadores no telemóvel, sem a safe area */
  color-scheme:light;
}
*{box-sizing:border-box}
/* Sem flash ao tocar, sem inflar texto ao rodar; sem pull-to-refresh (recarregar perdia texto por gravar). */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{margin:0;min-height:100dvh;background:var(--fundo);color:var(--tinta);
  font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h2{font-size:1.3rem}
a{color:var(--verde)}

/* Topo fixo: pinta por baixo do entalhe e afasta o conteúdo dele. Sem backdrop-filter: faria do topo o
   contentor do #menu (position:fixed) e a barra de baixo deixava de ficar presa ao ecrã. */
.topo{position:sticky;top:0;z-index:20;background:var(--verde);color:#fff;display:flex;gap:10px;align-items:center;
  padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 8px calc(12px + env(safe-area-inset-left,0px))}
.topo h1{margin:0;font-size:1rem;font-weight:700;white-space:nowrap}
.topo .logo{height:36px;width:auto;flex-shrink:0;background:#fff;border-radius:var(--raio-sm);padding:3px 6px}
#quem{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0;font-size:.82rem}
#quem .quem-nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#DCE9E1}
/* No telemóvel o espaço vai para o nome de quem tem a sessão (aparelhos partilhados): o nome da app e o papel
   saem do topo — o logo e a barra de baixo já dizem onde se está. */
#quem .quem-papel{display:none}
@media (max-width:479px){.topo h1{display:none}}
#quem button{margin:0;min-height:36px;padding:6px 12px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);flex-shrink:0}

/* Telemóvel: o menu é uma barra de separadores presa em baixo, ao alcance do polegar. */
#menu{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:#fff;
  border-top:1px solid rgba(23,57,43,.08);box-shadow:0 -4px 16px rgba(23,57,43,.06);
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#menu:empty{display:none}
#menu button{flex:1;min-width:0;min-height:var(--barra);margin:0;padding:8px 2px 6px;border:none;border-radius:0;background:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--suave);font-size:.72rem;font-weight:600}
#menu button::before{content:"";width:24px;height:24px;background:currentColor;
  -webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat}
#menu button.activo{color:var(--verde)}
#menu button.activo::before{transform:translateY(-1px)}
.ic-inicio,#menu button[data-ecra="inicio"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.ic-pacientes,#menu button[data-ecra="pacientes"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3Cpath d='M16 4.1a4 4 0 0 1 0 7.8'/%3E%3Cpath d='M22 21c0-3-1.7-5.5-4.3-6.5'/%3E%3C/svg%3E")}
.ic-agenda,#menu button[data-ecra="agenda"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.ic-estoque,#menu button[data-ecra="estoque"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E")}
.ic-backoffice,#menu button[data-ecra="backoffice"]{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E")}

main{max-width:960px;margin:0 auto;
  padding:16px calc(12px + env(safe-area-inset-right,0px)) 24px calc(12px + env(safe-area-inset-left,0px))}
/* Com a barra de baixo, o fim da página não fica escondido atrás dela. */
body:has(#menu:not(:empty)) main{padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px) + 24px)}
.cartao{background:var(--cartao);border-radius:var(--raio);box-shadow:var(--sombra);padding:16px;margin-bottom:12px}
.cartao>h2:first-child,.cartao>h3:first-child{margin-top:0}

/* Campos: 16 px no mínimo, senão o iOS faz zoom ao focar e não volta. */
label{display:block;font-size:.85rem;font-weight:600;color:var(--suave);margin:12px 0 6px}
input,select,textarea{font:inherit;font-size:16px;width:100%;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--raio-sm);
  background:#FBFAF7;color:var(--tinta);transition:border-color 150ms ease,box-shadow 150ms ease}
input:not([type=checkbox]):not([type=radio]),select{min-height:46px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);background:#fff;box-shadow:0 0 0 3px rgba(23,57,43,.16)}
input[type=checkbox],input[type=radio]{accent-color:var(--verde);width:20px;height:20px}

/* Controlos: resposta no toque (:active), sem atraso de duplo toque, sem selecção ao manter premido. */
button{font:inherit;font-weight:600;cursor:pointer;min-height:40px;padding:8px 16px;border-radius:var(--raio-sm);
  border:1px solid var(--linha);background:#fff;color:var(--tinta);margin-top:12px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:transform 120ms var(--ease-out),background-color 150ms ease}
button:active{transform:scale(.97);background:#F1EFE8}
button.primario{background:var(--verde);color:#fff;border:none}
button.primario:active{background:var(--verde-2)}
button:disabled{opacity:.5;cursor:default;transform:none}
@media (pointer:coarse){button{min-height:44px}}
/* Hover só com rato: no toque ficava agarrado depois de tocar. */
@media (hover:hover) and (pointer:fine){
  button:hover{background:#FAF9F5}
  button.primario:hover{background:var(--verde-2)}
  #quem button:hover{background:rgba(255,255,255,.2)}
  #menu button:hover{color:var(--verde);background:none}
  button.linha:hover{background:#FAF9F5}
}
.erro{color:var(--erro);font-size:.9rem}
.nota{color:var(--suave);font-size:.88rem}
.escondido{display:none}
.alerta{background:#B3261E;color:#fff;font-weight:700;padding:12px 14px;border-radius:var(--raio-sm);margin:8px 0}
.neutro{background:#EEF0F2;color:#33383D;border:1px solid #CDD2D7;padding:10px 14px;border-radius:var(--raio-sm);margin:8px 0}
.aviso{background:#FCEFC7;color:#5C4400;border:1px solid #E5C76B;padding:10px 14px;border-radius:var(--raio-sm);margin:8px 0}
.abas{display:flex;gap:4px;background:#ECEAE3;border-radius:var(--raio-sm);padding:4px;margin-bottom:12px}
.abas button{flex:1;margin:0;min-height:38px;padding:6px 8px;border:none;border-radius:8px;background:none;color:var(--suave);font-size:.9rem;line-height:1.2}
.abas button.activo{background:#fff;color:var(--tinta);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.lista{list-style:none;padding:0;margin:8px 0 0}
.lista li{border-bottom:1px solid var(--linha)}
button.linha{width:100%;text-align:left;border:none;border-radius:8px;margin:0;padding:12px 8px;min-height:48px;background:none;font-weight:400}
.linha-aluno{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 4px}
.linha-aluno button{margin:0;white-space:nowrap}
.ficha-id{display:flex;gap:12px;align-items:center}
.ficha-id h2{margin:0 0 4px}
.foto{width:72px;height:90px;object-fit:cover;border-radius:var(--raio-sm);border:1px solid var(--linha)}
input:disabled,select:disabled{background:#F0EFEA;color:var(--suave)}
.dados{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0}
.dados dt{color:var(--suave);font-size:.85rem}
.dados dd{margin:0;overflow-wrap:anywhere}
.accoes{display:flex;gap:8px;flex-wrap:wrap}
.marca{display:inline-block;font-size:.75rem;padding:1px 8px;margin-left:6px;border-radius:999px;background:#FCEFC7;color:#5C4400;border:1px solid #E5C76B}
.alerta button,.aviso button{margin:0 0 0 8px;padding:2px 12px;min-height:32px}
.rolavel{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:.88rem}
.tabela th,.tabela td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela th{color:var(--suave);font-weight:600}
.tabela .num{text-align:right;white-space:nowrap}
.negativo{color:var(--erro);font-weight:700}
.linha-retorno{padding:10px 4px}
.linha-retorno.atrasado{border-left:4px solid #B3261E;padding-left:10px}
.linha-retorno .accoes button{margin-top:6px}
button.ligacao{border:none;background:none;padding:0;margin:0;min-height:0;color:var(--verde);font-weight:700;text-decoration:underline}
.campo{margin-bottom:4px}
textarea{min-height:88px}
fieldset{border:1px solid var(--linha);border-radius:var(--raio-sm);margin:8px 0;padding:8px 12px}
legend{font-size:.8rem;color:var(--suave)}
label.opcao{display:flex;gap:10px;align-items:center;color:var(--tinta);font-size:.95rem;font-weight:400;margin:2px 0;min-height:40px}
label.opcao input{width:20px;flex-shrink:0}
.titulo-bloco{margin:16px 0 4px;color:var(--verde)}
.linha-medicacao{border-bottom:1px dashed var(--linha);padding-bottom:6px}
.linha-atendimento{border-bottom:1px solid var(--linha);padding:8px 0;list-style:none}
.linha-atendimento button{margin-top:4px}
.novo-atendimento{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.novo-atendimento select{width:auto}
.ficha-bloco .accoes{position:sticky;bottom:0;background:var(--cartao);padding-bottom:8px}
/* No telemóvel a barra de separadores ocupa o fundo: os botões do bloco colam-se por cima dela. */
body:has(#menu:not(:empty)) .ficha-bloco .accoes{bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px))}
table.dispensado{width:100%;border-collapse:collapse;margin:8px 0;font-size:.85rem}
table.dispensado th,table.dispensado td{border-bottom:1px solid var(--linha);padding:4px 3px;text-align:left;vertical-align:top}
table.dispensado th,table.dispensado td:not(:first-child){white-space:nowrap}  /* só o nome do medicamento quebra (375 px) */
table.dispensado caption{text-align:left;font-weight:700;padding:4px 0}
.folha header h2{margin:0 0 4px}
.bloco-impresso{border-top:1px solid var(--linha);margin-top:12px;padding-top:8px}
.folha-tabela{width:100%;border-collapse:collapse}
.folha-tabela>tbody>tr>td,.folha-tabela>tfoot>tr>td{padding:0;border:0;display:block}
.rodape-confidencial{margin-top:16px;border-top:1px solid var(--tinta);padding-top:6px;font-size:.85rem}
fieldset.sem-moldura{border:0;margin:0;padding:0;min-width:0}
.so-impressao{display:none}
.ic-mais{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.ic-escola{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9 12 4l10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E")}
/* Início (#33): painel do dia. */
.inicio-topo{margin:4px 4px 12px}
.inicio-topo h2{font-size:1.6rem;margin:2px 0 0}
.inicio-topo .nota{margin:0}
.pesquisa-rapida{margin-bottom:8px}
.pesquisa-rapida input{min-height:50px;padding-left:44px;background:#fff center left 14px/20px no-repeat;border-color:transparent;box-shadow:var(--sombra);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367655C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.grupo-titulo{font-size:.8rem;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.05em;margin:20px 6px 8px}
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-bottom:12px}
button.numero{margin:0;min-height:92px;padding:14px;border:none;border-radius:var(--raio);background:var(--cartao);box-shadow:var(--sombra);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;font-weight:400}
.numero-valor{font-size:1.9rem;font-weight:700;line-height:1;color:var(--verde);font-variant-numeric:tabular-nums}
.numero-titulo{font-size:.85rem;color:var(--suave);line-height:1.2}
.numero-aviso .numero-valor{color:var(--erro)}
.numero-zero .numero-valor{color:#B9B6AB}
#proximos h3{margin:0 0 4px;font-size:1rem}
.linha-proximo{display:flex;align-items:center;gap:12px}
.linha-proximo .hora{font-weight:700;font-variant-numeric:tabular-nums;color:var(--verde);min-width:3.2em}
.linha-proximo .texto{display:flex;flex-direction:column;min-width:0}
.linha-proximo .nota{margin:0}
#proximos .ligacao{margin-top:10px}
.atalhos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button.atalho{margin:0;min-height:76px;padding:14px;border:none;border-radius:var(--raio);background:var(--cartao);box-shadow:var(--sombra);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;text-align:left}
button.atalho::before{content:"";width:26px;height:26px;background:var(--verde);
  -webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat}
.inicio-aparelho{text-align:center;margin-top:24px}
@media (min-width:768px){
  .inicio{max-width:720px;margin:0 auto}
  .atalhos{grid-template-columns:repeat(4,1fr)}
}
@media (hover:hover) and (pointer:fine){
  button.numero:hover,button.atalho:hover{background:#FAF9F5}
}

/* Computador (e tablet deitado): o menu volta ao topo, ao lado do nome da app. */
@media (min-width:768px){
  .topo{gap:16px;padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px))}
  .topo .logo{height:42px}
  #quem .quem-papel{display:inline}
  #menu{position:static;background:none;border:none;box-shadow:none;padding:0;gap:4px}
  #menu button{flex:none;flex-direction:row;min-height:40px;padding:8px 12px;gap:8px;border-radius:var(--raio-sm);color:#DCE9E1;font-size:.95rem}
  #menu button::before{width:18px;height:18px}
  #menu button.activo{color:#fff;background:rgba(255,255,255,.14)}
  #menu button.activo::before{transform:none}
  body:has(#menu:not(:empty)) main{padding-bottom:24px}
  body:has(#menu:not(:empty)) .ficha-bloco .accoes{bottom:0}
  main{padding:24px 16px}
  .cartao{padding:20px}
}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  #menu button:hover{color:#fff;background:rgba(255,255,255,.08)}
}
@media (prefers-reduced-motion:reduce){
  button:active{transform:none}
}

/* Login interno (sem portal): ecrã branco inteiro com o logo, como no App Acesso. */
body.ecra-login{background:#fff}
body.ecra-login .topo{display:none}
body.ecra-login main{max-width:440px;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(24px + env(safe-area-inset-top,0px))}
body.ecra-login .cartao{box-shadow:none;padding:0 4px}
.marca-login{text-align:center;margin:0 0 24px}
body.ecra-login .cartao h2{font-size:1.6rem;margin-bottom:2px}
body.ecra-login #portal{text-align:center;margin-top:20px}
.marca-login img{width:min(300px,82%);height:auto}
button.largo{width:100%;min-height:52px;font-size:1.02rem;margin-top:20px}
@media (min-width:600px){
  body.ecra-login{background:var(--fundo)}
  body.ecra-login .cartao{box-shadow:var(--sombra);padding:32px}
}
@media print{
  @page{margin:1.5cm}
  .topo,.nao-imprimir{display:none}
  .cartao{box-shadow:none}
  /* Só a folha dedicada imprime (fica registada e leva o rodapé): Ctrl+P noutro ecrã sai só com o aviso. */
  main>*:not(.folha){display:none}
  .so-impressao{display:block;margin:0;padding:16px;font-size:12pt}
  body:has(.folha) .so-impressao{display:none}
  body{background:#fff}
  main{max-width:none;padding:0}
  .folha{font-size:11pt}
  .folha-tabela>tbody{display:table-row-group}
  .folha-tabela>tfoot{display:table-footer-group}
  .folha-tabela>tbody>tr>td,.folha-tabela>tfoot>tr>td{display:table-cell}
  .alerta{background:none;color:#000;border:2px solid #000}
  table.dispensado{display:table}
}