/* Material Design 3 do movie (m3.material.io): tokens do sistema e os componentes comuns a todas as áreas
   (portal, Estúdio, entrar e cadastro, Minha conta e admin). Vem antes da folha de cada área, que cuida só do
   layout e usa estes tokens. CSS puro, sem @material/web: a CSP só aceita folhas do próprio site e nada de
   estilo inline. As decisões estão em movie/DESIGN.md.

   Tema: escuro por padrão; claro quando o sistema pede e a pessoa não escolheu Escuro, ou quando escolheu
   Claro (tema.js põe data-tema no <html>). As duas cópias do tema claro são iguais: CSS puro não junta uma
   media query com um seletor numa regra só. */

:root {
  color-scheme: dark;

  /* ---- Cor (roles), tema escuro: fundo #0b0f17, branco frio #d8e2f2 e azul claro #9bc7ff da marca ---- */
  --md-sys-color-primary: #9bc7ff;
  --md-sys-color-on-primary: #002f66;
  --md-sys-color-primary-container: #1b47ed;
  --md-sys-color-on-primary-container: #ffffff;
  --md-sys-color-secondary: #bcc6dc;
  --md-sys-color-on-secondary: #263141;
  --md-sys-color-secondary-container: #2b3547;
  --md-sys-color-on-secondary-container: #d8e2f2;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-surface: #0b0f17;
  --md-sys-color-surface-dim: #0b0f17;
  --md-sys-color-surface-bright: #31374a;
  --md-sys-color-surface-container-lowest: #06080d;
  --md-sys-color-surface-container-low: #11161f;
  --md-sys-color-surface-container: #161c27;
  --md-sys-color-surface-container-high: #1f2532;
  --md-sys-color-surface-container-highest: #2a3140;
  --md-sys-color-on-surface: #d8e2f2;
  --md-sys-color-on-surface-variant: #a9b4c6;
  --md-sys-color-outline: #8590a6;
  --md-sys-color-outline-variant: #2f3a50;
  --md-sys-color-inverse-surface: #d8e2f2;
  --md-sys-color-inverse-on-surface: #222a38;
  --md-sys-color-inverse-primary: #1b47ed;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  /* Cores estendidas (M3 "custom colors"): sucesso e alerta, com o mesmo esquema de container. */
  --md-ext-color-sucesso: #8fd99a;
  --md-ext-color-on-sucesso: #00391a;
  --md-ext-color-sucesso-container: #0f5223;
  --md-ext-color-on-sucesso-container: #b7f2bf;
  --md-ext-color-alerta: #f5c15c;
  --md-ext-color-on-alerta: #3f2e00;
  --md-ext-color-alerta-container: #5a4300;
  --md-ext-color-on-alerta-container: #ffdf9e;

  /* ---- Tipografia (type scale). Roboto onde existir; senão, a fonte do sistema. ---- */
  --md-ref-typeface-plain: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --md-sys-typescale-display-small: 400 2.25rem/2.75rem var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-large: 400 2rem/2.5rem var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-medium: 400 1.75rem/2.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-headline-small: 400 1.5rem/2rem var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large: 400 1.375rem/1.75rem var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium: 500 1rem/1.5rem var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 0.75rem/1rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 500 0.6875rem/1rem var(--md-ref-typeface-plain);

  /* ---- Forma ---- */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* ---- Elevação (sombras dos níveis 1 a 3) ---- */
  --md-sys-elevation-level1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level3: 0 4px 8px 3px rgb(0 0 0 / 0.15), 0 1px 3px rgb(0 0 0 / 0.3);

  /* ---- Estados: opacidade da camada de estado sobre a cor do conteúdo ---- */
  --md-sys-state-hover: 8%;
  --md-sys-state-focus: 10%;
  --md-sys-state-pressed: 10%;
  --md-sys-state-dragged: 16%;

  /* ---- Movimento ---- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 250ms;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    color-scheme: light;
    --md-sys-color-primary: #1b47ed;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #dde1ff;
    --md-sys-color-on-primary-container: #00105c;
    --md-sys-color-secondary: #565e71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #dae2f9;
    --md-sys-color-on-secondary-container: #101f44;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-dim: #d9dce6;
    --md-sys-color-surface-bright: #ffffff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f5f7fc;
    --md-sys-color-surface-container: #eef1f8;
    --md-sys-color-surface-container-high: #e8ebf3;
    --md-sys-color-surface-container-highest: #e1e5ee;
    --md-sys-color-on-surface: #101f44;
    --md-sys-color-on-surface-variant: #454c5e;
    --md-sys-color-outline: #747b8f;
    --md-sys-color-outline-variant: #c5cad8;
    --md-sys-color-inverse-surface: #263046;
    --md-sys-color-inverse-on-surface: #eef1f8;
    --md-sys-color-inverse-primary: #b9c3ff;
    --md-ext-color-sucesso: #1b6d2f;
    --md-ext-color-on-sucesso: #ffffff;
    --md-ext-color-sucesso-container: #c6f0cb;
    --md-ext-color-on-sucesso-container: #002109;
    --md-ext-color-alerta: #7a5900;
    --md-ext-color-on-alerta: #ffffff;
    --md-ext-color-alerta-container: #ffdf9e;
    --md-ext-color-on-alerta-container: #261a00;
    --md-sys-elevation-level1: 0 1px 2px rgb(16 31 68 / 0.3), 0 1px 3px 1px rgb(16 31 68 / 0.15);
    --md-sys-elevation-level2: 0 1px 2px rgb(16 31 68 / 0.3), 0 2px 6px 2px rgb(16 31 68 / 0.15);
    --md-sys-elevation-level3: 0 4px 8px 3px rgb(16 31 68 / 0.15), 0 1px 3px rgb(16 31 68 / 0.3);
  }
}
:root[data-tema="claro"] {
  color-scheme: light;
  --md-sys-color-primary: #1b47ed;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dde1ff;
  --md-sys-color-on-primary-container: #00105c;
  --md-sys-color-secondary: #565e71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dae2f9;
  --md-sys-color-on-secondary-container: #101f44;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-dim: #d9dce6;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f7fc;
  --md-sys-color-surface-container: #eef1f8;
  --md-sys-color-surface-container-high: #e8ebf3;
  --md-sys-color-surface-container-highest: #e1e5ee;
  --md-sys-color-on-surface: #101f44;
  --md-sys-color-on-surface-variant: #454c5e;
  --md-sys-color-outline: #747b8f;
  --md-sys-color-outline-variant: #c5cad8;
  --md-sys-color-inverse-surface: #263046;
  --md-sys-color-inverse-on-surface: #eef1f8;
  --md-sys-color-inverse-primary: #b9c3ff;
  --md-ext-color-sucesso: #1b6d2f;
  --md-ext-color-on-sucesso: #ffffff;
  --md-ext-color-sucesso-container: #c6f0cb;
  --md-ext-color-on-sucesso-container: #002109;
  --md-ext-color-alerta: #7a5900;
  --md-ext-color-on-alerta: #ffffff;
  --md-ext-color-alerta-container: #ffdf9e;
  --md-ext-color-on-alerta-container: #261a00;
  --md-sys-elevation-level1: 0 1px 2px rgb(16 31 68 / 0.3), 0 1px 3px 1px rgb(16 31 68 / 0.15);
  --md-sys-elevation-level2: 0 1px 2px rgb(16 31 68 / 0.3), 0 2px 6px 2px rgb(16 31 68 / 0.15);
  --md-sys-elevation-level3: 0 4px 8px 3px rgb(16 31 68 / 0.15), 0 1px 3px rgb(16 31 68 / 0.3);
}
:root[data-tema="escuro"] { color-scheme: dark; }

/* ---- Base ---- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
}
a { color: var(--md-sys-color-primary); }
::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

/* Indicador de foco do M3: anel de 3 px, afastado do componente. */
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* ---- Botões (common buttons): filled, tonal, outlined, text e de erro ----
   O M3 desenha 40 px com área de toque de 48; aqui o botão já tem 44 px, o alvo mínimo do projeto. A camada de
   estado é um gradiente da cor do conteúdo por cima do fundo, sem pseudo-elemento. Dentro de .m3-botoes (o
   admin), um <button> sem classe já é um filled button. */

:is(.botao, :where(.m3-botoes) button:where(:not(.botao-icone))) {
  --botao-fundo: var(--md-sys-color-primary);
  --botao-texto: var(--md-sys-color-on-primary);
  --botao-borda: transparent;
  --botao-estado: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--botao-borda);
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--botao-fundo);
  background-image: linear-gradient(var(--botao-estado), var(--botao-estado));
  color: var(--botao-texto);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.00625rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
:is(.botao, :where(.m3-botoes) button:where(:not(.botao-icone))) svg { flex: 0 0 auto; }
:is(.botao, :where(.m3-botoes) button:where(:not(.botao-icone))):hover { --botao-estado: color-mix(in srgb, var(--botao-texto) var(--md-sys-state-hover), transparent); }
:is(.botao, :where(.m3-botoes) button:where(:not(.botao-icone))):focus-visible { --botao-estado: color-mix(in srgb, var(--botao-texto) var(--md-sys-state-focus), transparent); }
:is(.botao, :where(.m3-botoes) button:where(:not(.botao-icone))):active { --botao-estado: color-mix(in srgb, var(--botao-texto) var(--md-sys-state-pressed), transparent); }

/* Filled: a ação principal da tela. */
.botao--primario:hover { box-shadow: var(--md-sys-elevation-level1); }
/* Tonal: ação secundária com peso (o antigo botão cinza). */
.botao--tonal, .botao--secundario {
  --botao-fundo: var(--md-sys-color-secondary-container);
  --botao-texto: var(--md-sys-color-on-secondary-container);
}
/* Outlined: ação alternativa, ao lado de uma filled. */
.botao--contorno {
  --botao-fundo: transparent;
  --botao-texto: var(--md-sys-color-primary);
  --botao-borda: var(--md-sys-color-outline);
}
/* Text: a ação de menor ênfase. */
.botao--texto {
  --botao-fundo: transparent;
  --botao-texto: var(--md-sys-color-primary);
  padding-inline: 12px;
}
/* Erro: ações destrutivas (excluir, remover). */
.botao--perigo {
  --botao-fundo: var(--md-sys-color-error);
  --botao-texto: var(--md-sys-color-on-error);
}
.botao--perigo-contorno {
  --botao-fundo: transparent;
  --botao-texto: var(--md-sys-color-error);
  --botao-borda: var(--md-sys-color-outline);
}
.botao--pequeno { min-height: 36px; padding: 6px 16px; }
/* O botão pequeno desenha 36 px; o alvo de toque continua com 44. */
.botao--pequeno::after { content: ""; position: absolute; inset: -4px 0; }
.botao--largo { width: 100%; }

:is(.botao, :where(.m3-botoes) button:where(:not(.botao-icone))):is(:disabled, [aria-disabled="true"]) {
  --botao-fundo: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  --botao-texto: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  --botao-borda: transparent;
  --botao-estado: transparent;
  box-shadow: none;
  cursor: not-allowed;
}
.botao--contorno:disabled, .botao--texto:disabled { --botao-fundo: transparent; }
.botao--contorno:disabled { --botao-borda: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }

/* Icon button padrão: 44 px, redondo, só a camada de estado no hover. */
.botao-icone {
  --botao-texto: var(--md-sys-color-on-surface-variant);
  --botao-estado: transparent;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: linear-gradient(var(--botao-estado), var(--botao-estado));
  color: var(--botao-texto);
  cursor: pointer;
}
.botao-icone:hover { --botao-estado: color-mix(in srgb, var(--botao-texto) var(--md-sys-state-hover), transparent); }
.botao-icone:active { --botao-estado: color-mix(in srgb, var(--botao-texto) var(--md-sys-state-pressed), transparent); }
.botao.botao-icone { width: 44px; padding: 0; }

/* Link com cara de botão de texto, dentro de uma frase ou de uma lista de ações. */
.link-botao, .botao-texto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-label-large);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- Campos de texto (outlined text field), com o rótulo acima ---- */

:where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"],
  input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
:where(select) { background-color: var(--md-sys-color-surface); }
:where(select) option { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
:where(textarea) { resize: vertical; line-height: 1.5; }
:where(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--md-sys-color-on-surface); }
/* Foco: a borda engrossa para 2 px na cor primária (o padding compensa para o texto não pular). */
:where(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"],
  input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], select, textarea):focus-visible {
  outline: 0;
  padding: 10px 14px;
  border: 2px solid var(--md-sys-color-primary);
}
:where(input, select, textarea)::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
:where(input, select, textarea):disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
:where(input, textarea, select)[aria-invalid="true"], :where(input, textarea, select):user-invalid { border-color: var(--md-sys-color-error); }

/* Caixa de seleção, opção e controle deslizante: os nativos, na cor primária e em 18 px. */
:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--md-sys-color-primary);
  cursor: pointer;
}
:where(input[type="range"]) { accent-color: var(--md-sys-color-primary); cursor: pointer; }

/* Seleção de arquivo: o botão nativo vira um outlined button do M3; ao lado fica o nome do arquivo escolhido
   (o texto do próprio navegador, como "Nenhum arquivo escolhido"). Sem JS e com o teclado do navegador. */
input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
  line-height: 44px;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  min-height: 44px;
  margin: 0 12px 0 0;
  padding: 0 24px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-label-large);
  vertical-align: middle;
  cursor: pointer;
}
input[type="file"]:hover::file-selector-button { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover), transparent); }
input[type="file"]:active::file-selector-button { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed), transparent); }
input[type="file"]:focus-visible { outline-offset: 2px; }
input[type="file"]:user-invalid::file-selector-button { border-color: var(--md-sys-color-error); }

/* Linear progress indicator: trilho no container secundário, indicador na cor primária. */
progress {
  appearance: none;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-primary);
  overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--md-sys-color-secondary-container); border-radius: var(--md-sys-shape-corner-full); }
progress::-webkit-progress-value { background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); }
progress::-moz-progress-bar { background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); }

:where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 12px 16px 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
:where(legend) { padding: 0 6px; font: var(--md-sys-typescale-title-small); }

/* Grupo de ações de um formulário ou cartão: os botões na mesma linha, alinhados, e quebram em tela estreita. */
.acoes-m3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acoes-m3--fim { justify-content: flex-end; }

/* ---- Cartão (outlined card) ---- */

.cartao {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

/* ---- Avisos (banner): container da cor do estado, com o texto na cor "on" do container ---- */

.aviso-auth, .nota {
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}
.aviso-auth--erro, .nota--erro { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.aviso-auth--ok, .nota--ok { background: var(--md-ext-color-sucesso-container); color: var(--md-ext-color-on-sucesso-container); }
.nota--alerta { background: var(--md-ext-color-alerta-container); color: var(--md-ext-color-on-alerta-container); }
.aviso-auth--info { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
:where(.aviso-auth, .nota) a { color: inherit; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .botao, :where(input, select, textarea) { transition: none; }
}