/* moviz.css — camada de polimento + responsivo do app Moonplan.
   Carregada DEPOIS do <style> de cada página, então refina/sobrepõe o visual base
   e adiciona o comportamento de celular. Não muda a estrutura das páginas. */

:root{ --shadow:0 4px 16px rgba(0,0,0,.28); --shadow-sm:0 2px 8px rgba(0,0,0,.22); --radius:14px; }
html{ -webkit-text-size-adjust:100%; }
body{ line-height:1.5; }

/* Cabeçalho fixo no topo, com leve profundidade.
   padding-top respeita a barra de status do celular (safe-area / notch) pra não
   esconder a setinha de voltar e o título. */
header{ position:sticky; top:0; z-index:40; box-shadow:var(--shadow-sm); flex-wrap:wrap; row-gap:8px;
  background:linear-gradient(180deg,#1d232c,#1a1f27); border-bottom:1px solid var(--bord);
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  padding-left:calc(16px + env(safe-area-inset-left, 0px));
  padding-right:calc(16px + env(safe-area-inset-right, 0px)); }

/* Botões: alvo de toque confortável + transição */
.btn{ min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color .12s, background .12s, transform .06s; }
.btn:active{ transform:scale(.97); }

/* Cartões e blocos com sombra suave */
.card{ box-shadow:var(--shadow-sm); border-radius:var(--radius); }

/* Campos: foco visível em âmbar */
input:focus, select:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 2px rgba(251,191,36,.18); }
/* alinhamento consistente: campos com mesma altura, rótulos numa linha, colunas alinhadas */
input:not([type=checkbox]):not([type=radio]), select{ height:42px; line-height:1.2; vertical-align:middle; }
label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid2, .grid3, .row{ align-items:end; }
.grid2 > div, .grid3 > div, .row > div{ min-width:0; }

/* Tabelas roláveis no celular sem espremer as colunas */
.tablewrap, table{ }
table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table thead, table tbody{ display:table; width:100%; }

/* Modais sempre roláveis e centralizados */
.modal .box{ max-height:90vh; overflow:auto; box-shadow:var(--shadow); }

/* ───────────── Celular ───────────── */
@media (max-width:640px){
  header{ gap:8px;
    padding:calc(11px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 11px calc(14px + env(safe-area-inset-left, 0px)); }
  header h1{ font-size:16px; }
  main{ padding:14px !important; }
  .btn{ min-height:44px; padding:10px 14px; }
  .btn.sm{ min-height:38px; padding:7px 11px; }
  /* 16px evita o zoom automático do iOS ao focar um campo */
  input, select{ min-height:44px; font-size:16px; }
  label{ font-size:12px; }
  /* linhas de formulário viram 2 colunas */
  .row > div{ flex:1 1 calc(50% - 6px); min-width:calc(50% - 6px); }
  /* mantém largura mínima legível e rola na horizontal */
  table thead, table tbody{ min-width:560px; }
  /* títulos e textos um tico maiores pra leitura */
  .tile .nm{ font-size:16px; } .tile .ds{ font-size:12px; }
}

/* ───────────── Telinhas bem pequenas ───────────── */
@media (max-width:380px){
  .row > div{ flex-basis:100%; min-width:100%; }
}