/* ==========================================================================
   Aplicativo da igreja – folha de estilos única, sem dependências externas.

   Recursos modernos usados (com alternativa para navegadores antigos quando necessário):
   - Camadas (@layer) para organizar a cascata sem brigas de especificidade
   - Aninhamento nativo de CSS (sempre com "&", compatível com Safari 16.5+)
   - light-dark() + color-scheme para tema claro/escuro (com alternativa via @media)
   - color-mix() em oklab para derivar tons da cor da igreja
   - Container queries: tabelas e formulários se adaptam ao espaço disponível
   - :has(), :focus-visible, :user-invalid, text-wrap, field-sizing
   - View Transitions (troca de telas suave) e esqueletos de carregamento
   ========================================================================== */

@layer reset, tokens, base, utilitarios, layout, componentes, telas, impressao;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
  body, h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
  img, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Cor da igreja (substituída pela escolhida em Configurações) */
    --pri: #1f4e8c;

    /* Tema claro – também é a alternativa para navegadores sem light-dark() */
    --fundo: #f3f5f8;
    --sup: #ffffff;
    --sup-2: #f7f8fa;
    --sup-3: #eceff3;
    --texto: #0f172a;
    --suave: #5b6576;
    --borda: #e2e6ec;
    --borda-forte: #cdd4dd;
    --ok: #15803d;
    --perigo: #c62828;
    --aviso: #b45309;
    --whats: #128c4b;
    --sombra-cor: rgb(15 23 42 / .07);
    --veu: rgb(15 23 42 / .45);
    --pri-texto: var(--pri);

    /* Escalas */
    --raio: 16px;
    --raio-m: 12px;
    --raio-p: 9px;
    --menu-w: 264px;
    --topo-h: 58px;
    --sombra: 0 1px 2px var(--sombra-cor), 0 4px 14px var(--sombra-cor);
    --sombra-alta: 0 10px 20px -6px var(--sombra-cor), 0 24px 56px -12px rgb(15 23 42 / .28);
    --anel: 0 0 0 3px color-mix(in oklab, var(--pri) 28%, transparent);
    --curva: cubic-bezier(.2, .8, .2, 1);
    --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  /* Alternativa para navegadores sem light-dark(): segue o tema do aparelho */
  @media (prefers-color-scheme: dark) {
    :root {
      --fundo: #0b0f14; --sup: #141a21; --sup-2: #1a2129; --sup-3: #222b35;
      --texto: #e8ecf1; --suave: #98a3b3; --borda: #26303b; --borda-forte: #36424f;
      --ok: #4ade80; --perigo: #f87171; --aviso: #fbbf24; --whats: #4cd37f;
      --sombra-cor: rgb(0 0 0 / .4); --veu: rgb(0 0 0 / .6);
      --pri-texto: color-mix(in oklab, var(--pri) 50%, white);
    }
  }

  /* Navegadores modernos: um token só para os dois temas, e o tema pode ser escolhido pelo usuário */
  @supports (color: light-dark(#000, #fff)) {
    :root {
      --fundo: light-dark(#f3f5f8, #0b0f14);
      --sup: light-dark(#ffffff, #141a21);
      --sup-2: light-dark(#f7f8fa, #1a2129);
      --sup-3: light-dark(#eceff3, #222b35);
      --texto: light-dark(#0f172a, #e8ecf1);
      --suave: light-dark(#5b6576, #98a3b3);
      --borda: light-dark(#e2e6ec, #26303b);
      --borda-forte: light-dark(#cdd4dd, #36424f);
      --ok: light-dark(#15803d, #4ade80);
      --perigo: light-dark(#c62828, #f87171);
      --aviso: light-dark(#b45309, #fbbf24);
      --whats: light-dark(#128c4b, #4cd37f);
      --sombra-cor: light-dark(rgb(15 23 42 / .07), rgb(0 0 0 / .4));
      --veu: light-dark(rgb(15 23 42 / .45), rgb(0 0 0 / .6));
      --pri-texto: light-dark(var(--pri), color-mix(in oklab, var(--pri) 50%, white));
    }
    :root[data-tema="claro"] { color-scheme: light; }
    :root[data-tema="escuro"] { color-scheme: dark; }
  }

  /* Tons derivados da cor da igreja */
  :root {
    --pri-escuro: color-mix(in oklab, var(--pri) 78%, black);
    --pri-claro: color-mix(in oklab, var(--pri) 11%, var(--sup));
    --pri-suave: color-mix(in oklab, var(--pri) 20%, var(--sup));
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  body {
    background: var(--fundo);
    color: var(--texto);
    font: 400 0.9375rem/1.55 var(--fonte);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    accent-color: var(--pri);
    min-height: 100dvh;
  }
  body:has(.modal-veu) { overflow: hidden; }

  h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
  h1 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); letter-spacing: -.025em; }
  h2 { font-size: 1.08rem; margin-block-end: .7em; }
  h3 { font-size: 1rem; }
  p { text-wrap: pretty; }

  a {
    color: var(--pri-texto);
    text-decoration: none;
    &:hover { text-decoration: underline; text-underline-offset: 3px; }
  }

  :focus-visible { outline: 2px solid var(--pri-texto); outline-offset: 2px; border-radius: 4px; }

  svg.ic {
    display: inline-block; vertical-align: -0.25em;
    width: 20px; height: 20px; flex: none;
    stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  ::selection { background: var(--pri-suave); }

  * { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ------------------------------------------------------------------ utilitários
   Ficam antes dos componentes na cascata para que .btn.peq, .chip etc. prevaleçam. */
@layer utilitarios {
  .oculto { display: none !important; }
  .suave { color: var(--suave); }
  .peq { font-size: .85em; }
  .centro { text-align: center; }
  .nowrap { white-space: nowrap; }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .topo {
    position: sticky; inset-block-start: 0; z-index: 30;
    display: flex; align-items: center; gap: 8px;
    height: calc(var(--topo-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    color: #fff;
    background:
      radial-gradient(120% 180% at 0% 0%, color-mix(in oklab, var(--pri) 70%, white) 0%, transparent 55%),
      var(--pri);
    box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 2px 10px rgb(0 0 0 / .12);

    & a, & button { color: #fff; }
    & .marca {
      display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1;
      font-weight: 700; font-size: 1.03rem; letter-spacing: -.01em;
      &:hover { text-decoration: none; }
      & img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
      & span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }
  }
  .topo-acoes { display: flex; align-items: center; gap: 2px; }
  .btn-topo {
    position: relative; display: inline-grid; place-items: center;
    width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent;
    transition: background .15s;
    &:hover { background: rgb(255 255 255 / .15); text-decoration: none; }
    & .badge { position: absolute; inset-block-start: 4px; inset-inline-end: 2px; box-shadow: 0 0 0 2px var(--pri); }
    & .avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .6); }
  }
  #btn-menu { display: none; }

  .menu {
    position: fixed; inset-block: calc(var(--topo-h) + env(safe-area-inset-top)) 0; inset-inline-start: 0; z-index: 25;
    width: var(--menu-w); overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 12px 48px;
    background: var(--sup); border-inline-end: 1px solid var(--borda);

    & h4 {
      margin: 18px 12px 6px;
      font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--suave);
    }
    & a {
      position: relative; display: flex; align-items: center; gap: 12px;
      padding: 9px 12px; border-radius: var(--raio-p);
      color: var(--texto); font-weight: 550;
      transition: background .15s, color .15s;
      & svg { color: var(--suave); transition: color .15s; }
      & .badge { margin-inline-start: auto; }
      &:hover { background: var(--sup-2); text-decoration: none; }
      &.ativo {
        background: var(--pri-claro); color: var(--pri-texto);
        & svg { color: var(--pri-texto); }
        &::before {
          content: ""; position: absolute; inset-inline-start: -12px; inset-block: 8px;
          width: 4px; border-radius: 0 4px 4px 0; background: var(--pri-texto);
        }
      }
    }
  }
  #veu { display: none; }

  main {
    container: pagina / inline-size;
    margin-inline-start: var(--menu-w);
    padding: 28px clamp(16px, 3vw, 36px) 56px;
    max-width: calc(1200px + var(--menu-w));
  }
  .sem-menu {
    & main { margin-inline: auto; max-width: 1040px; }
    & .menu, & #btn-menu, & .rodape { display: none !important; }
  }
  .rodape { display: none; }

  @media (max-width: 900px) {
    #btn-menu { display: inline-grid; }
    .menu {
      inset-block-start: 0; z-index: 50; width: min(310px, 86vw);
      padding-block-start: calc(18px + env(safe-area-inset-top));
      transform: translateX(-105%); transition: transform .28s var(--curva);
      box-shadow: var(--sombra-alta); border: 0;
    }
    body.menu-aberto {
      overflow: hidden;
      & .menu { transform: none; }
      & #veu {
        display: block; position: fixed; inset: 0; z-index: 45;
        background: var(--veu); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        animation: aparecer .2s ease;
      }
    }
    main { margin-inline-start: 0; padding: 18px 16px calc(92px + env(safe-area-inset-bottom)); }
    .sem-menu main { padding-block-end: 36px; }

    .rodape {
      display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30;
      padding-block-end: env(safe-area-inset-bottom);
      background: color-mix(in oklab, var(--sup) 86%, transparent);
      -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px);
      border-block-start: 1px solid var(--borda);

      & a, & button {
        position: relative; flex: 1;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 9px 0 8px; border: 0; background: none;
        color: var(--suave); font-size: .68rem; font-weight: 600;
        &:hover { text-decoration: none; }
        & svg { width: 22px; height: 22px; transition: transform .2s var(--curva); }
      }
      & a.ativo {
        color: var(--pri-texto);
        & svg { transform: translateY(-1px) scale(1.08); }
      }
      & .badge { position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 6px); }
    }
  }
}

/* ------------------------------------------------------------------ componentes */
@layer componentes {
  /* Botões */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; padding: 8px 16px;
    border: 1px solid var(--borda); border-radius: var(--raio-m);
    background: var(--sup); color: var(--texto);
    font-weight: 600; font-size: .9rem; line-height: 1.2; white-space: nowrap;
    box-shadow: 0 1px 1px var(--sombra-cor);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
    & svg.ic { width: 18px; height: 18px; }
    &:hover { background: var(--sup-2); border-color: var(--borda-forte); text-decoration: none; }
    &:active:not(:disabled) { transform: scale(.97); }
    &:disabled { opacity: .5; cursor: default; }

    &.primario {
      background: var(--pri); border-color: transparent; color: #fff;
      box-shadow: 0 1px 2px var(--sombra-cor), inset 0 1px 0 rgb(255 255 255 / .12);
      &:hover { background: var(--pri-escuro); }
    }
    &.ok { background: var(--ok); border-color: transparent; color: #fff; &:hover { filter: brightness(.94); } }
    &.perigo { color: var(--perigo); }
    &.perigo.cheio { background: var(--perigo); border-color: transparent; color: #fff; }
    &.whats { color: var(--whats); }
    &.fantasma { background: transparent; border-color: transparent; box-shadow: none; &:hover { background: var(--sup-3); } }
    &.peq { min-height: 34px; padding: 5px 11px; font-size: .82rem; border-radius: var(--raio-p); }
    &.bloco { width: 100%; }
  }
  .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

  /* Cabeçalho de página */
  .cab-pagina {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px;
    margin-block-end: 22px;
    & .sub { color: var(--suave); margin-block-start: 4px; }
  }
  .voltar {
    display: inline-flex; align-items: center; gap: 4px; margin-block-end: 10px;
    color: var(--suave); font-size: .88rem; font-weight: 550;
    &:hover { color: var(--texto); text-decoration: none; }
  }

  /* Cartões */
  .cartao {
    container-type: inline-size;
    display: block;
    padding: clamp(16px, 2.5vw, 22px);
    background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra);
    & + .cartao { margin-block-start: 16px; }
    & > h2:first-child, & > h3:first-child { display: flex; align-items: center; gap: 9px; }
    & > h2 svg, & .cartao-cab h2 svg { color: var(--pri-texto); }
  }
  a.cartao {
    color: inherit;
    transition: transform .2s var(--curva), box-shadow .2s, border-color .2s;
    &:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--borda-forte); }
  }
  .cartao-cab {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-block-end: 12px;
    & h2, & h3 { margin: 0; display: flex; align-items: center; gap: 9px; }
    & > a { font-size: .88rem; font-weight: 600; }
  }
  .grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
  .grade-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  @container pagina (max-width: 860px) { .grade-2 { grid-template-columns: minmax(0, 1fr); } }
  .pilha > * + * { margin-block-start: 16px; }

  /* Selos */
  .badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    background: #e5383b; color: #fff; font-size: .68rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 99px; border: 1px solid var(--borda);
    background: var(--sup-2); color: var(--suave);
    font-size: .76rem; font-weight: 650; white-space: nowrap; line-height: 1.3;
    & svg.ic { width: 13px; height: 13px; }
    &.pri { background: var(--pri-claro); border-color: transparent; color: var(--pri-texto); }
    &.ok { background: color-mix(in oklab, var(--ok) 13%, transparent); border-color: transparent; color: var(--ok); }
    &.aviso { background: color-mix(in oklab, var(--aviso) 15%, transparent); border-color: transparent; color: var(--aviso); }
    &.perigo { background: color-mix(in oklab, var(--perigo) 13%, transparent); border-color: transparent; color: var(--perigo); }
  }

  .avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden; object-fit: cover;
    background: linear-gradient(135deg, var(--pri-suave), var(--pri-claro));
    color: var(--pri-texto); font-weight: 750; font-size: .84rem; letter-spacing: .02em;
    &.g { width: 96px; height: 96px; font-size: 1.9rem; box-shadow: 0 0 0 4px var(--sup), 0 0 0 5px var(--borda); }
    &.p { width: 30px; height: 30px; font-size: .7rem; }
  }

  /* Estados vazios, erro, aviso e carregamento */
  .vazio {
    padding: 34px 16px; text-align: center; color: var(--suave);
    &::before {
      content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 10px; opacity: .45;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .ref-lista &::before { display: none; }
  }
  .carregando {
    height: 3px; margin-inline: calc(-1 * clamp(16px, 3vw, 36px));
    background: linear-gradient(90deg, transparent, var(--pri-texto), transparent) no-repeat;
    background-size: 45% 100%;
    animation: barra 1s linear infinite;
  }
  .erro-box {
    padding: 14px 16px; border-radius: var(--raio-m);
    background: color-mix(in oklab, var(--perigo) 9%, var(--sup));
    border: 1px solid color-mix(in oklab, var(--perigo) 30%, transparent);
    color: var(--perigo); font-weight: 550;
  }
  .aviso-box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 13px 16px; border-radius: var(--raio-m);
    background: var(--pri-claro); border: 1px solid color-mix(in oklab, var(--pri) 18%, transparent);
    color: var(--texto);
    & > svg { color: var(--pri-texto); }
    & > div { flex: 1; min-width: 180px; }
  }
  a.aviso-box { transition: border-color .15s; &:hover { text-decoration: none; border-color: var(--pri-texto); } }

  /* Esqueleto de carregamento */
  .esqueleto {
    display: grid; gap: 14px;
    & .esq-cartao { display: grid; gap: 12px; padding: 20px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); }
  }
  .esq {
    height: 14px; border-radius: 7px;
    background: linear-gradient(90deg, var(--sup-3) 25%, var(--sup-2) 45%, var(--sup-3) 65%);
    background-size: 300% 100%;
    animation: brilho 1.3s ease-in-out infinite;
    &.titulo { height: 26px; width: min(320px, 60%); border-radius: 9px; }
  }

  /* Listas e tabelas */
  .filtros {
    display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 14px;
    & input[type=search] {
      flex: 1 1 240px; padding-inline-start: 38px;
      background: var(--sup) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.2' y2='16.2'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
    }
    & select { flex: 0 1 200px; }
  }

  .tabela-wrap {
    container: tabela / inline-size;
    background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); overflow: hidden;
  }
  .tabela {
    width: 100%; border-collapse: collapse;
    & th {
      padding: 11px 14px; text-align: start; white-space: nowrap;
      background: var(--sup-2); border-block-end: 1px solid var(--borda);
      color: var(--suave); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    }
    & td { padding: 11px 14px; border-block-end: 1px solid var(--borda); vertical-align: middle; }
    & tr:last-child td { border-block-end: 0; }
    & tbody tr { transition: background .12s; }
    & tbody tr.clicavel { cursor: pointer; &:hover td { background: var(--pri-claro); } }
    & .cel-nome { display: flex; align-items: center; gap: 11px; font-weight: 650; }
    & td.acoes-linha { width: 1%; text-align: end; white-space: nowrap; }
  }
  .tabela-rolagem { overflow-x: auto; }

  /* A tabela vira lista de cartões quando o espaço dela é estreito (não só no celular) */
  @container tabela (max-width: 640px) {
    .tabela.responsiva {
      & thead { display: none; }
      &, & tbody, & tr, & td { display: block; width: 100%; }
      & tr { padding: 13px 15px; border-block-end: 1px solid var(--borda); }
      & tr:last-child { border-block-end: 0; }
      & td {
        display: flex; gap: 10px; padding: 2px 0; border: 0; font-size: .9rem;
        &::before { content: attr(data-rotulo); min-width: 38%; color: var(--suave); font-size: .8rem; }
        &:first-child { padding-block-end: 6px; font-size: 1rem; &::before { display: none; } }
        &.acoes-linha { justify-content: flex-start; padding-block-start: 8px; &::before { display: none; } }
        &:empty { display: none; }
      }
    }
  }

  .itens {
    list-style: none; margin: 0; padding: 0;
    & > li {
      display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
      padding: 12px 0; border-block-end: 1px solid var(--borda);
      &:last-child { border-block-end: 0; padding-block-end: 2px; }
      &:first-child { padding-block-start: 2px; }
      & > svg { color: var(--suave); }
    }
    & .txt {
      flex: 1 1 170px; min-width: 0;
      & b, & strong { display: block; overflow-wrap: anywhere; font-weight: 650; }
      & small { display: block; color: var(--suave); font-size: .84rem; }
    }
    & a.linha {
      display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
      margin: -6px -8px; padding: 6px 8px; border-radius: var(--raio-p);
      color: inherit; transition: background .12s;
      &:hover { text-decoration: none; background: var(--sup-2); }
      & > svg:last-child { color: var(--suave); }
    }
  }

  /* Formulários */
  input, select, textarea {
    width: 100%; min-height: 44px; padding: 10px 12px;
    font-size: 1rem; /* 16px evita o zoom automático do iPhone ao tocar no campo */
    background: var(--sup); color: var(--texto);
    border: 1px solid var(--borda-forte); border-radius: var(--raio-m);
    transition: border-color .15s, box-shadow .15s, background .15s;
    &:hover { border-color: color-mix(in oklab, var(--borda-forte) 60%, var(--suave)); }
    &:focus { outline: none; border-color: var(--pri-texto); box-shadow: var(--anel); }
    &::placeholder { color: color-mix(in oklab, var(--suave) 75%, transparent); }
  }
  input:user-invalid, select:user-invalid, textarea:user-invalid {
    border-color: var(--perigo);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--perigo) 18%, transparent);
  }
  textarea { min-height: 96px; resize: vertical; field-sizing: content; max-height: 60vh; }
  select {
    appearance: none; padding-inline-end: 36px;
    background: var(--sup) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
  }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: none; box-shadow: none; }
  input[type=color] { padding: 4px; max-width: 120px; cursor: pointer; }

  label { display: block; margin-block-end: 6px; font-size: .84rem; font-weight: 650; }

  form { container-type: inline-size; }
  .form-grade {
    display: grid; gap: 16px 18px; grid-template-columns: repeat(2, minmax(0, 1fr));
    & .full, & .secao-form { grid-column: 1 / -1; }
  }
  @container (max-width: 560px) { .form-grade { grid-template-columns: minmax(0, 1fr); } }
  .secao-form {
    display: flex; align-items: center; gap: 12px; margin-block-start: 12px;
    color: var(--pri-texto); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    &::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
    &:first-child { margin-block-start: 0; }
  }
  .ajuda { margin-block-start: 5px; color: var(--suave); font-size: .8rem; }
  .obrig { color: var(--perigo); }
  .check {
    display: flex; align-items: center; gap: 11px; margin: 0; padding: 11px 13px;
    border: 1px solid var(--borda); border-radius: var(--raio-m);
    font-weight: 550; font-size: .93rem; cursor: pointer;
    transition: background .15s, border-color .15s;
    &:hover { background: var(--sup-2); }
    &:has(input:checked) { background: var(--pri-claro); border-color: color-mix(in oklab, var(--pri) 35%, transparent); }
  }
  .form-rodape {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
    margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--borda);
  }

  .ref { position: relative; }
  .ref-lista {
    position: absolute; z-index: 60; inset-inline: 0; inset-block-start: calc(100% + 6px);
    max-height: 270px; overflow-y: auto; padding: 5px;
    background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-m);
    box-shadow: var(--sombra-alta);
    animation: surgir .14s var(--curva);
    & button {
      display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: var(--raio-p);
      background: none; text-align: start; color: var(--texto);
      &:hover, &:focus-visible { background: var(--pri-claro); outline: none; }
    }
    & small { display: block; color: var(--suave); }
    & .vazio { padding: 12px; }
  }

  .upload {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px; border: 1px dashed var(--borda-forte); border-radius: var(--raio-m); background: var(--sup-2);
    & img.prev { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; border: 1px solid var(--borda); }
    & .nome-arq { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; overflow-wrap: anywhere; }
  }

  /* Detalhe de registro */
  .detalhe-topo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
    & .info { flex: 1; min-width: 200px; }
  }
  .dl {
    display: grid; gap: 16px 24px; margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    & div { min-width: 0; }
    & dt { color: var(--suave); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
    & dd { margin-block-start: 3px; overflow-wrap: anywhere; white-space: pre-line; }
    & .full { grid-column: 1 / -1; }
  }
  .dl-secao {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-block-start: 8px;
    color: var(--pri-texto); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    &::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
    &:first-child { margin-block-start: 0; }
  }

  /* Abas e seletor segmentado */
  .abas {
    display: flex; gap: 2px; margin: 26px 0 16px; overflow-x: auto; scrollbar-width: none;
    border-block-end: 1px solid var(--borda);
    & button {
      position: relative; padding: 11px 15px; margin-block-end: -1px; white-space: nowrap;
      border: 0; background: none; color: var(--suave); font-weight: 650;
      border-block-end: 2px solid transparent; transition: color .15s, border-color .2s;
      &:hover { color: var(--texto); }
      &.ativa { color: var(--pri-texto); border-block-end-color: var(--pri-texto); }
    }
  }
  .seg {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
    background: var(--sup-3); border-radius: var(--raio-m);
    & button {
      padding: 7px 14px; border: 0; border-radius: var(--raio-p); background: none;
      color: var(--suave); font-weight: 650; font-size: .87rem;
      transition: background .15s, color .15s, box-shadow .15s;
      &:hover { color: var(--texto); }
      &.ativa { background: var(--sup); color: var(--texto); box-shadow: 0 1px 3px var(--sombra-cor); }
    }
  }

  /* Janelas (modais) – viram "folha" de baixo para cima no celular */
  .modal-veu {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 16px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--veu); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: aparecer .15s ease;
  }
  .modal {
    width: 100%; max-width: 580px;
    background: var(--sup); border: 1px solid var(--borda); border-radius: 20px;
    box-shadow: var(--sombra-alta);
    animation: subir .24s var(--curva);
    &.largo { max-width: 920px; }
  }
  .modal-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 20px 0;
    & h2 { margin: 0; font-size: 1.12rem; }
  }
  .modal-corpo { container-type: inline-size; padding: 16px 20px; }
  .modal-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 4px 20px 20px; }
  @media (max-width: 640px) {
    .modal-veu { align-items: flex-end; padding: 0; }
    .modal, .modal.largo {
      max-height: 94dvh; overflow-y: auto; border-radius: 22px 22px 0 0; border-block-end: 0;
      padding-block-end: env(safe-area-inset-bottom);
      animation: folha .3s var(--curva);
      &::before { content: ""; display: block; width: 40px; height: 5px; margin: 9px auto 0; border-radius: 3px; background: var(--borda-forte); }
    }
    .modal-rodape .btn { flex: 1; }
  }

  /* Avisos rápidos */
  #toasts {
    position: fixed; z-index: 200; inset-inline-start: 50%; translate: -50% 0;
    inset-block-end: calc(96px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
  }
  @media (min-width: 901px) { #toasts { inset-block-end: 28px; } }
  .toast {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 18px; border-radius: 99px;
    background: #111827; color: #fff; font-weight: 600; font-size: .92rem;
    box-shadow: 0 12px 28px rgb(0 0 0 / .25);
    animation: subir .25s var(--curva);
    &::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #93c5fd; flex: none; }
    &.ok { background: #14532d; &::before { background: #4ade80; } }
    &.erro { background: #7f1d1d; &::before { background: #fca5a5; } }
  }
}

/* ------------------------------------------------------------------ telas */
@layer telas {
  .hero {
    position: relative; overflow: hidden; isolation: isolate;
    margin-block-end: 20px; padding: clamp(20px, 3.5vw, 30px);
    border-radius: 22px; color: #fff;
    background:
      radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--pri) 55%, white) 0%, transparent 60%),
      linear-gradient(135deg, var(--pri), color-mix(in oklab, var(--pri) 55%, #0b1220));
    box-shadow: 0 14px 34px -14px color-mix(in oklab, var(--pri) 70%, transparent);
    &::after {
      content: ""; position: absolute; z-index: -1; inset-inline-end: -40px; inset-block-end: -60px;
      width: 220px; height: 220px; border-radius: 50%;
      border: 34px solid rgb(255 255 255 / .07);
    }
    & h1 { margin-block-end: 4px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
    & p { opacity: .88; }
    & .acoes { margin-block-start: 16px; }
    & .btn {
      background: rgb(255 255 255 / .15); border-color: rgb(255 255 255 / .28); color: #fff; box-shadow: none;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      &:hover { background: rgb(255 255 255 / .26); }
    }
  }

  .stats { display: grid; gap: 12px; margin-block-end: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
  .stat {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 16px; color: var(--texto);
    background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra);
    & b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
    & small, & > span:not(.stat-ic) { display: block; color: var(--suave); font-size: .82rem; }
  }
  div.stat { flex-direction: column; align-items: flex-start; gap: 2px; }
  a.stat {
    transition: transform .2s var(--curva), border-color .2s, box-shadow .2s;
    &:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in oklab, var(--pri) 40%, var(--borda)); box-shadow: var(--sombra-alta); }
  }
  .stat-ic {
    display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px;
    background: var(--pri-claro); color: var(--pri-texto);
  }

  .data-bloco {
    flex: none; width: 54px; padding: 7px 0; border-radius: var(--raio-m); text-align: center; line-height: 1.05;
    background: var(--pri-claro); color: var(--pri-texto);
    & b { display: block; font-size: 1.32rem; font-weight: 800; }
    & small { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  }
  .dia-agenda {
    margin: 24px 0 8px; color: var(--suave); font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    &:first-child { margin-block-start: 0; }
  }
  .evento-img { width: 100%; max-height: 360px; margin-block-end: 18px; object-fit: cover; border-radius: var(--raio-m); }
  .midia-post {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; place-items: center; margin-block-end: 18px; padding: clamp(0px, 2vw, 18px);
    border-radius: var(--raio-m); background: #0b0f14; cursor: zoom-in;
    &::before {
      content: ""; position: absolute; inset: -40px; z-index: -1;
      background: var(--img) center / cover no-repeat; filter: blur(28px) saturate(1.2) brightness(.55);
    }
    & img {
      display: block; width: auto; height: auto; max-width: 100%; max-height: min(82vh, 900px);
      object-fit: contain; border-radius: 6px; box-shadow: 0 12px 40px rgb(0 0 0 / .45);
    }
  }
  .capa-boletim { width: 100%; aspect-ratio: 16 / 7; margin-block-end: 12px; object-fit: cover; border-radius: var(--raio-m); background: var(--pri-claro); }

  .md {
    overflow-wrap: anywhere; line-height: 1.7;
    & > :first-child { margin-block-start: 0; }
    & h1 { font-size: 1.35rem; margin-block: 1.3em .5em; }
    & h2 { font-size: 1.15rem; margin-block: 1.3em .5em; }
    & h3 { font-size: 1rem; margin-block: 1.1em .4em; }
    & p { margin-block-end: .9em; }
    & ul, & ol { margin: 0 0 .9em; padding-inline-start: 1.3em; }
    & li::marker { color: var(--pri-texto); }
  }

  .msg {
    border-inline-start: 4px solid transparent;
    &.nova { border-inline-start-color: var(--pri-texto); background: linear-gradient(90deg, var(--pri-claro), var(--sup) 40%); }
    &.nova .msg-titulo { font-weight: 800; }
  }
  .msg-titulo { font-weight: 650; }
  .msg-corpo { margin-block-start: 8px; overflow-wrap: anywhere; }

  .presenca-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; user-select: none;
    border: 1px solid var(--borda); border-radius: var(--raio-m);
    transition: background .15s, border-color .15s;
    & + .presenca-item { margin-block-start: 6px; }
    & .txt { flex: 1; }
    & .marca {
      display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
      border: 2px solid var(--borda-forte); color: transparent; transition: all .18s var(--curva);
      & svg { width: 16px; height: 16px; }
    }
    &:hover { border-color: var(--borda-forte); }
    &.sim {
      background: color-mix(in oklab, var(--ok) 10%, var(--sup)); border-color: color-mix(in oklab, var(--ok) 40%, transparent);
      & .marca { background: var(--ok); border-color: var(--ok); color: #fff; transform: scale(1.06); }
    }
  }
  .freq {
    & td, & th { padding: 7px 9px; text-align: center; font-size: .85rem; }
    & td:first-child, & th:first-child { position: sticky; inset-inline-start: 0; text-align: start; background: var(--sup); }
    & .s { color: var(--ok); font-weight: 800; }
    & .n { color: var(--perigo); }
  }

  .kids-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px;
    background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-m);
    & + .kids-card { margin-block-start: 8px; }
    & .txt { flex: 1 1 180px; min-width: 0; }
    &:has(.alerta-saude) { border-inline-start: 4px solid var(--perigo); }
  }
  .alerta-saude { color: var(--perigo); font-weight: 750; font-size: .84rem; }
  .codigo-grande { margin: 8px 0; text-align: center; font: 800 2.8rem/1 var(--fonte-mono); letter-spacing: .2em; }
  #codigo-saida { text-align: center; text-transform: uppercase; font: 700 1.7rem var(--fonte-mono); letter-spacing: .32em; }
  .video-leitor { width: 100%; max-height: 50vh; border-radius: var(--raio-m); background: #000; }
  .redes { display: flex; flex-wrap: wrap; gap: 8px; }

  .hero-logo {
    float: inline-end; width: clamp(64px, 12vw, 96px); height: auto; margin-inline-start: 16px;
    border-radius: 18px; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
  }
  .comprovante {
    & table { width: 100%; border-collapse: collapse; margin-block: 10px; font-size: .9rem; }
    & th, & td { padding: 7px 9px; border-block-end: 1px solid var(--borda); text-align: start; vertical-align: top; }
    & th { width: 34%; color: var(--suave); font-weight: 650; }
    & h1 { font-size: 1.15rem; }
  }
  .termo-caixa { max-width: 760px; margin-top: 4vh; }
  .termo-texto {
    max-height: min(52vh, 520px); overflow-y: auto; padding: 16px 18px;
    background: var(--sup-2); border: 1px solid var(--borda); border-radius: var(--raio-m);
    font-size: .93rem;
  }
  .sigla-login { margin-block-start: 12px; font-size: 1.45rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .login-caixa {
    max-width: 430px; margin: 7vh auto 0;
    & .marca-login {
      margin-block-end: 20px; text-align: center;
      & img { display: inline-block; width: 104px; height: 104px; border-radius: 26px; box-shadow: var(--sombra-alta); }
    }
  }

  /* Troca de telas suave (View Transitions). A classe .vt é aplicada só durante a transição. */
  .vt main { view-transition-name: conteudo; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-old(conteudo) { animation: .12s ease-out both sumir; }
  ::view-transition-new(conteudo) { animation: .26s var(--curva) both surgir; }
}

/* ------------------------------------------------------------------ animações */
@keyframes aparecer { from { opacity: 0; } }
@keyframes sumir { to { opacity: 0; } }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }
@keyframes subir { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes folha { from { transform: translateY(100%); } }
@keyframes barra { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------------ impressão */
@layer impressao {
  #impressao { display: none; }
  @media print {
    body.imprimindo {
      background: #fff; color: #000;
      & > *:not(#impressao) { display: none !important; }
      & #impressao { display: block; }
    }
    .etiqueta {
      width: 90mm; min-height: 40mm; margin: 0 0 4mm; padding: 3mm 4mm;
      border: 1px dashed #999; break-inside: avoid; font-family: Arial, sans-serif; color: #000;
      & .et-topo { font-size: 9pt; letter-spacing: .05em; text-transform: uppercase; }
      & .et-nome { margin: 1mm 0; font-size: 16pt; font-weight: 800; line-height: 1.1; }
      & .et-info { font-size: 10pt; }
      & .et-alerta { margin-block-start: 1mm; padding: 1mm 2mm; border: 2px solid #000; font-size: 10pt; font-weight: 800; }
      & .et-rodape { display: flex; align-items: center; justify-content: space-between; gap: 3mm; margin-block-start: 2mm; }
      & .et-codigo { font: 800 22pt monospace; letter-spacing: 2pt; }
      & svg { width: auto; max-width: 52mm; height: 12mm; }
    }
    .comprovante th { width: 32%; background: #f3f3f3; }
    .impressao-lista {
      & h1 { font-size: 16pt; }
      & table { width: 100%; border-collapse: collapse; font-size: 9pt; }
      & th, & td { padding: 3px 5px; border: 1px solid #999; text-align: start; }
    }
    @page { margin: 8mm; }
  }
}