/* ── Variáveis ── */
  :root {
    --azul: #1a4e7a;
    --azul-medio: #2e75b6;
    --azul-claro: #d6e4f0;
    --verde: #1f6b3a;
    --verde-claro: #d9ead3;
    --cinza-esc: #444444;
    --cinza-med: #777777;
    --cinza-cla: #f5f5f5;
    --laranja: #b45309;
    --laranja-cla: #fef3c7;
    --branco: #ffffff;
    --fonte: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --mono: 'Courier New', Courier, monospace;
    --roxo: #5b2d8e;
    --roxo-claro: #ede7f6;
    --roxo-medio: #7e57c2;
    --teal: #00695c;
    --teal-claro: #e0f2f1;
  }

  /* ── Tipografia geral ── */
  .cutia-manual {
    font-family: var(--fonte);
    font-size: 0.95rem;
    color: var(--cinza-esc);
    line-height: 1.65;
    max-width: 900px;
  }

  .cutia-manual h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--branco);
    background: var(--azul);
    padding: 0.55em 0.9em;
    margin: 2.2rem 0 1rem;
    border-radius: 3px;
  }

  .cutia-manual h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--azul);
    margin: 1.8rem 0 0.5rem;
    padding-bottom: 4px;
    border-bottom: 3px solid var(--azul-medio);
    display: inline-block;
  }

  .cutia-manual h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cinza-esc);
    margin: 1.2rem 0 0.4rem;
  }

  .cutia-manual p {
    margin: 0.5rem 0;
  }

  .cutia-manual ul,
  .cutia-manual ol {
    margin: 0.4rem 0 0.6rem 1.4rem;
    padding: 0;
  }

  .cutia-manual li {
    margin-bottom: 0.25rem;
  }

  /* ── Caixas informativas ── */
  .caixa {
    border-left: 5px solid;
    border-radius: 0 4px 4px 0;
    padding: 0.65em 1em;
    margin: 1.1rem 0;
    font-size: 0.92rem;
  }

  .caixa-info {
    background: var(--azul-claro);
    border-color: var(--azul-medio);
  }

  .caixa-aviso {
    background: var(--laranja-cla);
    border-color: var(--laranja);
  }

  .caixa-ok {
    background: var(--verde-claro);
    border-color: var(--verde);
  }

  .caixa strong {
    color: var(--azul-medio);
  }

  .caixa-aviso strong {
    color: var(--laranja);
  }

  .caixa-ok strong {
    color: var(--verde);
  }

  /* ── Tabelas de camada de correção ── */
  .tabela-camada {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 2rem;
    font-size: 0.9rem;
  }

  .tabela-camada .cab-camada {
    background: var(--azul-medio);
    color: var(--branco);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.55em 0.9em;
  }

  .tabela-camada .cab-camada span.codigo {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    padding: 0 0.4em;
    margin-right: 0.5em;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
  }

  .tabela-camada .def-camada {
    background: var(--azul-claro);
    padding: 0.5em 0.9em;
    font-size: 0.9rem;
    border-bottom: 1px solid #bcd4e8;
  }

  .tabela-camada .def-camada strong {
    color: var(--azul);
  }

  .tabela-camada thead.sub-cabecalho th {
    background: var(--cinza-cla);
    color: var(--azul);
    font-weight: 700;
    padding: 0.4em 0.7em;
    border: 1px solid #ddd;
    font-size: 0.88rem;
    text-align: left;
  }

  .tabela-camada tbody td {
    border: 1px solid #ddd;
    padding: 0.45em 0.7em;
    vertical-align: top;
  }

  .tabela-camada tbody td ul {
    margin: 0 0 0 1.1em;
    padding: 0;
  }

  .tabela-camada tbody td li {
    margin-bottom: 0.3rem;
  }

  .col-subtipos {
    width: 26%;
  }

  .col-instrucoes {
    width: 42%;
  }

  .col-exemplos {
    width: 32%;
  }

  /* exemplos */
  .exemplo {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: var(--cinza-cla);
    border: 1px solid var(--azul-claro);
    border-left: 5px solid var(--azul-medio);
    border-radius: 4px;
  }

  .exemplo > :first-child {
    margin-top: 0;
  }

  .exemplo > h3 {
    margin-bottom: 1.25rem;
  }

  .exemplo > :last-child {
    margin-bottom: 0;
  }

  /* Campos do formulário */
  .avalingua-manual .accordion-content > h3:has(+ dl) {
    display: block;
    margin: 1.25rem 0 0;
    padding: 0.65rem 1rem;
    color: var(--azul);
    background: #eef4f8;
    border: 1px solid #d7e3ec;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
  }

  .avalingua-manual .accordion-content > h3 + dl {
    display: grid;
    grid-template-columns: minmax(10rem, 28%) 1fr;
    margin: 0 0 1.25rem;
    border: 1px solid #d7e3ec;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
  }

  .avalingua-manual .accordion-content > h3 + dl dt,
  .avalingua-manual .accordion-content > h3 + dl dd {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #e2e9ee;
  }

  .avalingua-manual .accordion-content > h3 + dl dt {
    color: var(--azul);
    background: #f5f8fa;
  }

  .avalingua-manual .accordion-content > h3 + dl dd {
    background: var(--branco);
  }

  .avalingua-manual .accordion-content > h3 + dl > :nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  /* Finalidade e orientação de elaboração */
  .avalingua-manual .accordion .accordion .accordion-content > h3:first-child,
  .avalingua-manual .accordion-content > .exemplo + h3 {
    display: block;
    margin: 1.25rem 0 0;
    padding: 0.6rem 1rem;
    color: var(--azul);
    background: #eef4f8;
    border: 1px solid #d7e3ec;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
  }

  .avalingua-manual .accordion .accordion .accordion-content > h3:first-child + p,
  .avalingua-manual .accordion-content > .exemplo + h3 + p {
    margin: 0 0 1.25rem;
    padding: 0.8rem 1rem;
    background: var(--branco);
    border: 1px solid #d7e3ec;
    border-radius: 0 0 4px 4px;
  }

  @media (max-width: 600px) {
    .avalingua-manual .accordion-content > h3 + dl {
      grid-template-columns: 1fr;
    }

    .avalingua-manual .accordion-content > h3 + dl dt {
      border-bottom: 0;
    }

    .avalingua-manual .accordion-content > h3 + dl > :nth-last-child(2) {
      border-bottom: 0;
    }
  }

  .ex {
    margin-bottom: 0.35em;
    font-size: 0.88rem;
  }

  .ex-errado {
    font-family: var(--mono);
    color: #aa0000;
    text-decoration: line-through;
    word-break: break-word;
  }

  .ex-seta {
    color: var(--cinza-med);
    margin: 0 0.3em;
    font-weight: bold;
  }

  .ex-certo {
    font-family: var(--mono);
    color: var(--verde);
    word-break: break-word;
  }

  /* ── Tabela de avaliação (critério + níveis) ── */
  .tabela-criterio {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 2rem;
    font-size: 0.9rem;
  }

  .tabela-criterio .cab-criterio {
    background: var(--verde);
    color: var(--branco);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.55em 0.9em;
  }

  .tabela-criterio .cab-criterio span.codigo {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    padding: 0 0.4em;
    margin-right: 0.5em;
    font-size: 1.1rem;
  }

  .tabela-criterio .desc-criterio {
    background: var(--verde-claro);
    padding: 0.55em 0.9em;
    font-size: 0.9rem;
    border-bottom: 1px solid #b2d6be;
  }

  .tabela-criterio thead.sub-cabecalho th {
    background: var(--cinza-cla);
    color: var(--verde);
    font-weight: 700;
    padding: 0.4em 0.7em;
    border: 1px solid #ddd;
    font-size: 0.88rem;
    text-align: left;
  }

  .tabela-criterio tbody td {
    border: 1px solid #ddd;
    padding: 0.45em 0.7em;
    vertical-align: top;
  }

  .col-nota {
    width: 7%;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
  }

  .col-nivel {
    width: 26%;
    font-weight: 600;
  }

  .col-desc {
    width: 67%;
  }

  /* cores por nota */
  .nota-0 {
    background: #ffeded;
    color: #8b0000;
  }

  .nota-40 {
    background: #fff3e0;
    color: #8b4513;
  }

  .nota-80 {
    background: #fffde7;
    color: #7b6000;
  }

  .nota-120 {
    background: #f0f4ff;
    color: #1a237e;
  }

  .nota-160 {
    background: #e8f5e9;
    color: #1b5e20;
  }

  .nota-200 {
    background: #e3f2fd;
    color: #0d47a1;
  }

  /* ── Tabela da escala geral ── */
  .tabela-escala {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.9rem;
  }

  .tabela-escala thead th {
    background: var(--azul);
    color: var(--branco);
    padding: 0.4em 0.7em;
    border: 1px solid #aaa;
    text-align: left;
  }

  .tabela-escala tbody td {
    border: 1px solid #ddd;
    padding: 0.4em 0.7em;
    vertical-align: top;
  }

  /* ── Rodapé do manual ── */
  .rodape-manual {
    border-left: 4px solid var(--azul);
    background: var(--cinza-cla);
    padding: 0.5em 1em;
    font-size: 0.82rem;
    color: var(--cinza-med);
    font-style: italic;
    margin-top: 2.5rem;
    border-radius: 0 3px 3px 0;
  }

  /* ── Cabeçalho de categoria de anotação ── */
  .tabela-anotacao {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 2rem;
    font-size: 0.9rem;
  }

  .tabela-anotacao .cab-anotacao {
    background: var(--roxo);
    color: var(--branco);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.55em 0.9em;
  }

  .tabela-anotacao .cab-anotacao span.codigo {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    padding: 0 0.4em;
    margin-right: 0.5em;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
  }

  .tabela-anotacao .def-anotacao {
    background: var(--roxo-claro);
    padding: 0.5em 0.9em;
    font-size: 0.9rem;
    border-bottom: 1px solid #cbb8e8;
  }

  .tabela-anotacao .def-anotacao strong {
    color: var(--roxo);
  }

  .tabela-anotacao thead.sub-cabecalho th {
    background: var(--cinza-cla, #f5f5f5);
    color: var(--roxo);
    font-weight: 700;
    padding: 0.4em 0.7em;
    border: 1px solid #ddd;
    font-size: 0.88rem;
    text-align: left;
  }

  .tabela-anotacao tbody td {
    border: 1px solid #ddd;
    padding: 0.45em 0.7em;
    vertical-align: top;
  }

  .tabela-anotacao tbody td ul {
    margin: 0 0 0 1.1em;
    padding: 0;
  }

  .tabela-anotacao tbody td li {
    margin-bottom: 0.3rem;
  }

  /* ── Etiquetas de anotação (tags) ── */
  .etiqueta {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    background: var(--roxo-claro);
    color: var(--roxo);
    border: 1px solid #cbb8e8;
    border-radius: 3px;
    padding: 0.05em 0.4em;
    white-space: nowrap;
  }

  .etiqueta-teal {
    background: var(--teal-claro);
    color: var(--teal);
    border-color: #b2dfdb;
  }

  /* ── Bloco de exemplo anotado ── */
  .exemplo-anotado {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--roxo-medio);
    border-radius: 0 4px 4px 0;
    padding: 0.65em 1em;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .exemplo-anotado .trecho {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88rem;
    color: #333;
  }

  .exemplo-anotado .trecho mark {
    background: #e8d5f5;
    color: var(--roxo);
    border-radius: 2px;
    padding: 0 2px;
  }

  .exemplo-anotado .trecho mark.teal {
    background: #b2dfdb;
    color: var(--teal);
  }

  .exemplo-anotado .trecho mark.azul {
    background: #bbdefb;
    color: #0d47a1;
  }

  .exemplo-anotado .trecho mark.laranja {
    background: #ffe0b2;
    color: #e65100;
  }

  .exemplo-anotado .anotacao-label {
    font-size: 0.8rem;
    color: var(--cinza-med, #777);
    margin-top: 0.35em;
  }

  .exemplo-anotado .anotacao-label span {
    margin-right: 1em;
  }

  /* ── Grade de domínios ── */
  .grade-dominios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
    margin: 1rem 0 1.5rem;
  }

  .card-dominio {
    border: 1px solid #ddd;
    border-top: 4px solid var(--roxo-medio);
    border-radius: 0 0 4px 4px;
    padding: 0.75em 0.9em;
    background: var(--branco, #fff);
  }

  .card-dominio.teal {
    border-top-color: var(--teal);
  }

  .card-dominio.azul {
    border-top-color: #1a4e7a;
  }

  .card-dominio.laranja {
    border-top-color: #b45309;
  }

  .card-dominio.verde {
    border-top-color: #1f6b3a;
  }

  .card-dominio h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.4em;
    color: var(--cinza-esc, #444);
  }

  .card-dominio ul {
    margin: 0 0 0 1.1em;
    padding: 0;
    font-size: 0.88rem;
    color: var(--cinza-esc, #444);
  }

  .card-dominio li {
    margin-bottom: 0.2rem;
  }

  /* ── Tabela comparativa anotação × correção ── */
  .tabela-comparativa {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.9rem;
  }

  .tabela-comparativa thead th {
    padding: 0.4em 0.75em;
    border: 1px solid #ddd;
    font-size: 0.88rem;
    text-align: left;
  }

  .tabela-comparativa thead th:first-child {
    background: var(--cinza-cla, #f5f5f5);
    color: var(--cinza-esc, #444);
  }

  .tabela-comparativa thead th:nth-child(2) {
    background: #2e75b6;
    color: #fff;
  }

  .tabela-comparativa thead th:nth-child(3) {
    background: var(--roxo);
    color: #fff;
  }

  .tabela-comparativa tbody td {
    border: 1px solid #ddd;
    padding: 0.4em 0.75em;
    vertical-align: top;
  }

  .tabela-comparativa tbody tr:nth-child(even) td {
    background: #fafafa;
  }

  /* ── Caixa roxo ── */
  .caixa-roxo {
    background: var(--roxo-claro);
    border-left: 5px solid var(--roxo-medio);
    border-radius: 0 4px 4px 0;
    padding: 0.65em 1em;
    margin: 1.1rem 0;
    font-size: 0.92rem;
  }

  .caixa-roxo strong {
    color: var(--roxo);
  }

  /* ── Responsivo ── */
  @media (max-width: 640px) {
    .grade-dominios {
      grid-template-columns: 1fr;
    }

    .tabela-anotacao,
    .tabela-comparativa {
      display: block;
      overflow-x: auto;
    }
  }

  /* responsivo simples */
  @media (max-width: 640px) {

    .col-subtipos,
    .col-instrucoes,
    .col-exemplos,
    .col-nota,
    .col-nivel,
    .col-desc {
      width: auto;
    }

    .tabela-camada,
    .tabela-criterio,
    .tabela-escala {
      display: block;
      overflow-x: auto;
    }
  }

/* Cadastro e administração das questões */
.avalingua-crud {
    box-sizing: border-box;
    max-width: 1050px;
    margin: 20px auto;
    padding: 24px;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
}
.avalingua-crud form { display: grid; gap: 8px; }
.avalingua-crud label { margin-top: 8px; font-weight: 600; }
.avalingua-crud textarea,
.avalingua-crud select,
.avalingua-crud input[type="text"],
.avalingua-crud input[type="number"],
.avalingua-crud input[type="url"] {
    box-sizing: border-box;
    width: 100%;
    padding: 9px;
    border: 1px solid #b8c1cc;
    border-radius: 5px;
    font: inherit;
}
.avalingua-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.avalingua-checks { columns: 3 210px; column-gap: 24px; }
.avalingua-checks label { display: block; break-inside: avoid; margin: 0 0 7px; font-weight: 400; }
.avalingua-alternative { display: grid; grid-template-columns: auto 2fr 1fr; align-items: center; gap: 10px; margin-bottom: 9px; }
.association-control { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.association-control select { min-width: 145px; }
.avalingua-category-names { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.avalingua-optional-field { margin: 10px 0; padding: 10px 12px; border: 1px solid #dfe3e8; border-radius: 5px; }
.avalingua-optional-field summary { cursor: pointer; font-weight: 600; }
.avalingua-field-hint { margin: 10px 0 6px; color: #59636e; font-size: 0.92em; }
.avalingua-source-modes { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 12px; }
.avalingua-source-modes label { margin: 0; font-weight: 400; }
.avalingua-source-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin-bottom: 12px; }
.avalingua-stats { box-sizing: border-box; max-width: 1200px; margin: 20px auto; padding: 24px; }
.avalingua-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; margin: 20px 0; }
.avalingua-summary div { padding: 16px; text-align: center; background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; }
.avalingua-summary strong,.avalingua-summary span { display: block; }
.avalingua-summary strong { color: #2e75b6; font-size: 1.8rem; }
.avalingua-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.avalingua-stat-card { padding: 16px; background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; }
.avalingua-stat-card h3 { margin-top: 0; }
.avalingua-stat-card table { width: 100%; border-collapse: collapse; }
.avalingua-stat-card th { width: 42%; text-align: left; font-weight: 500; }
.avalingua-stat-card td { padding: 6px; }
.avalingua-stat-bar { display: block; width: var(--value); min-width: 3px; height: 10px; background: #2e75b6; border-radius: 5px; }
.avalingua-crud [hidden] { display: none !important; }
.avalingua-theme-tree { max-height: 420px; overflow: auto; padding: 10px; border: 1px solid #dfe3e8; border-radius: 5px; }
.avalingua-theme-tree details { margin: 3px 0; }
.avalingua-theme-tree summary { cursor: pointer; }
.avalingua-theme-tree summary label { cursor: default; }
.avalingua-theme-children { margin-left: 22px; padding-left: 10px; border-left: 1px solid #ccd4dc; }
.avalingua-theme-leaf { margin: 5px 0 5px 24px; }
.avalingua-theme-tree label { font-weight: 400; }
.avalingua-tree-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.avalingua-tree-actions button { padding: 5px 9px; border: 1px solid #b8c1cc; border-radius: 4px; background: #f7f9fb; cursor: pointer; }
.avalingua-actions,
.avalingua-heading,
.avalingua-row-actions { display: flex; align-items: center; gap: 12px; }
.avalingua-heading { justify-content: space-between; }
.avalingua-actions { margin-top: 14px; }
.avalingua-primary,
.avalingua-actions button {
    padding: 9px 14px;
    color: #fff;
    background: #2e75b6;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}
.avalingua-notice { margin: 12px 0; padding: 12px; border-radius: 5px; }
.avalingua-notice.error { color: #842029; background: #f8d7da; }
.avalingua-notice.success { color: #0f5132; background: #d1e7dd; }
.avalingua-table-wrap { overflow-x: auto; }
.avalingua-table { width: 100%; border-collapse: collapse; }
.avalingua-table th,
.avalingua-table td { padding: 9px; border-bottom: 1px solid #ddd; text-align: left; }
.avalingua-row-actions form { display: inline; }
.avalingua-row-actions button { padding: 0; color: #a00; background: none; border: 0; cursor: pointer; }
@media (max-width: 600px) {
    .avalingua-crud { margin: 10px 4px; padding: 14px; }
    .avalingua-heading { align-items: flex-start; flex-direction: column; }
    .avalingua-grid,
    .avalingua-alternative { grid-template-columns: 1fr; }
    .avalingua-checks { columns: 1; }
    .avalingua-stat-grid { grid-template-columns: 1fr; }
}