:root {
  --cutia-primary: #347fc4;
  --cutia-primary-dark: #2767a7;
  --cutia-border: #dce3ec;
  --cutia-border-strong: #cbd5e1;
  --cutia-surface: #f7f9fc;
  --cutia-text: #334155;
  --cutia-muted: #64748b;
}

#cutia-header { max-width: 100%; margin: auto; text-align: center; }
#cutia-header img { display: block; width: 100%; max-width: 400px; height: auto; margin: auto; }

.cutia-page-title { margin-bottom: 24px; }
.cutia-list-actions {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--cutia-border-strong);
  border-left: 5px solid var(--cutia-primary);
  border-radius: 8px;
  background: #edf5fc;
  box-shadow: 0 2px 7px rgba(25, 45, 70, .06);
}
.cutia-list-actions a { display: inline-block; color: var(--cutia-primary-dark); font-size: 14px; font-weight: 700; text-decoration: none; }
.cutia-list-actions a::before { content: "+"; margin-right: 7px; font-size: 17px; line-height: 0; }
.cutia-list-actions a:hover { color: var(--cutia-primary); text-decoration: underline; }
.cutia-list-actions + .cutia-filter-disclosure { margin-top: 0; }

.cutia-filters,
.cutia-form {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--cutia-border);
  border-radius: 10px;
  background: var(--cutia-surface);
  box-shadow: 0 2px 7px rgba(25, 45, 70, .07);
}

.cutia-filter-disclosure { margin: 24px 0 22px; }
.cutia-filter-disclosure > summary { display: inline-flex; align-items: center; gap: 7px; color: var(--cutia-primary-dark); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.cutia-filter-disclosure > summary::-webkit-details-marker { display: none; }
.cutia-filter-disclosure > summary::before { content: "▸"; font-size: 15px; transition: transform .15s ease; }
.cutia-filter-disclosure[open] > summary::before { transform: rotate(90deg); }
.cutia-filter-disclosure > summary:hover { color: var(--cutia-primary); text-decoration: underline; }
.cutia-filter-disclosure .cutia-filters { margin-top: 12px; margin-bottom: 0; }

.cutia-filters h4,
.cutia-form h4 { margin: 0 0 15px; color: var(--cutia-text); }
.cutia-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; }
.cutia-filter-row { display: grid; gap: 14px 16px; margin-bottom: 14px; }
.cutia-filter-row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cutia-filter-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cutia-filter-field,
.cutia-form label { display: flex; flex-direction: column; gap: 5px; color: #475569; font-size: 13px; font-weight: 600; }

.cutia-filters select,
.cutia-filters input,
.cutia-form select,
.cutia-form input:not([type="checkbox"]):not([type="radio"]):not([type="image"]),
.cutia-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--cutia-border-strong);
  border-radius: 6px;
  background: #fff;
  color: #1e293b;
  font: inherit;
  font-weight: 400;
}

.cutia-filters select:focus,
.cutia-filters input:focus,
.cutia-form select:focus,
.cutia-form input:focus,
.cutia-form textarea:focus { border-color: #4b86c2; outline: none; box-shadow: 0 0 0 3px rgba(75, 134, 194, .14); }

.cutia-filter-actions,
.cutia-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #e2e8f0; }
.cutia-filter-actions a,
.cutia-filter-actions button,
.cutia-form-actions a,
.cutia-form-actions button { padding: 9px 17px; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; }
.cutia-filter-actions a,
.cutia-form-actions a { border: 1px solid var(--cutia-border-strong); background: #fff; color: #475569; }
.cutia-filter-actions button,
.cutia-form-actions button { border: 1px solid var(--cutia-primary-dark); background: var(--cutia-primary); color: #fff; }
.cutia-result-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 -1px; padding: 0 8px; border-bottom: 1px solid var(--cutia-border-strong); }
.cutia-result-tabs a { position: relative; z-index: 1; padding: 9px 14px; border: 1px solid var(--cutia-border); border-bottom-color: var(--cutia-border-strong); border-radius: 7px 7px 0 0; background: #edf3f8; color: var(--cutia-primary-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.cutia-result-tabs a:hover { background: #e1edf7; }
.cutia-result-tabs a.active { border-color: var(--cutia-border-strong); border-bottom-color: #fff; background: #fff; color: var(--cutia-text); }
.cutia-result-tabs .cutia-tab-count { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: #d7e4ef; color: var(--cutia-primary-dark); font-size: 11px; font-weight: 700; line-height: 1; }
.cutia-result-tabs a.active .cutia-tab-count { background: var(--cutia-primary); color: #fff; }
.cutia-result-tabs + .cutia-table { border-top-left-radius: 0; border-top-right-radius: 0; }
.cutia-form button.btn,
.cutia-confirm-form button.btn {
  border: 1px solid var(--cutia-primary-dark);
  background: var(--cutia-primary);
  color: #fff;
  font-weight: 700;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(39, 103, 167, .24);
}
.cutia-form button.btn:hover,
.cutia-confirm-form button.btn:hover { background: var(--cutia-primary-dark); }
.cutia-form button.btn:focus-visible,
.cutia-confirm-form button.btn:focus-visible { outline: 3px solid rgba(52, 127, 196, .28); outline-offset: 2px; }
.cutia-form button.btn:active,
.cutia-confirm-form button.btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(39, 103, 167, .22); }
.cutia-form button.btn:disabled,
.cutia-confirm-form button.btn:disabled { background: #aab7c4; border-color: #9aa7b4; color: #eef2f6; cursor: not-allowed; opacity: .7; box-shadow: none; }
.cutia-assignment-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 14px; }
.cutia-assignment-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cutia-assignment-row-single { grid-template-columns: minmax(0, 1fr); }
.cutia-assignment-form .cutia-theme-picker { margin-bottom: 14px; }

.cutia-table { width: 100%; border: 1px solid var(--cutia-border); border-collapse: separate; border-spacing: 0; border-radius: 9px; overflow: visible; background: #fff; box-shadow: 0 2px 7px rgba(25, 45, 70, .06); }
.cutia-table th { padding: 11px 12px; border: 0; border-bottom: 2px solid #cbd8e6; background: #edf3f8; color: var(--cutia-text); font-size: 12px; text-align: left; }
.cutia-table td { padding: 10px 12px; border: 0; border-bottom: 1px solid #e5eaf0; color: #475569; text-align: left; }
.cutia-table tr:last-child td { border-bottom: 0; }
.cutia-table tbody tr:hover td { background: #f8fbfe; }
.cutia-table-spaced { margin-bottom: 16px; }
.cutia-table th.cutia-icon-column,
.cutia-table td.cutia-icon-column { width: 70px; text-align: center; }
.cutia-table td img { vertical-align: middle; }
.cutia-table td a img { margin: 0 3px; }
.cutia-table th.form { white-space: nowrap; vertical-align: middle; }
.cutia-table th.form .cutia-help { margin-left: 5px; }
.cutia-table-wrap { max-width: 100%; overflow-x: auto; }
.cutia-assignment-preview { margin: 28px 0 0; padding: 18px; border: 1px solid var(--cutia-border); border-radius: 10px; background: var(--cutia-surface); box-shadow: 0 2px 7px rgba(25, 45, 70, .07); }
.cutia-assignment-preview h4 { margin: 0 0 8px; color: var(--cutia-text); }
.cutia-assignment-preview > p { margin: 0 0 16px; color: var(--cutia-muted); }
.cutia-confirm-form { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cutia-border); }
.cutia-confirm-form .btn { box-sizing: border-box; padding: 9px 17px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.cutia-confirm-form .btn-secondary { border: 1px solid var(--cutia-border-strong); background: #fff; color: #475569; }
.cutia-assignment-history { margin-top: 28px; }
.cutia-assignment-history h4 { margin: 0 0 12px; color: var(--cutia-text); }
.cutia-progress { display: inline-block; width: 90px; height: 8px; margin-right: 7px; overflow: hidden; border-radius: 5px; background: #dbe4ee; vertical-align: middle; }
.cutia-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--cutia-primary); }
.cutia-cancel-assignments .cutia-table th:first-child,
.cutia-cancel-assignments .cutia-table td:first-child { width: 65px; text-align: center; }
.cutia-theme-add-form { max-width: 760px; }
.cutia-theme-list-search { max-width: 760px; }
.cutia-user-filters,
.cutia-user-edit-form { max-width: 760px; }
.cutia-theme-management-table .cutia-number-column { width: 90px; text-align: center; }
.cutia-theme-management-table tr[id] { scroll-margin-top: 18px; }
.cutia-theme-actions-column { width: 150px; white-space: nowrap; }
.cutia-theme-action,
.cutia-link-button { color: var(--cutia-primary-dark); font: inherit; font-weight: 600; text-decoration: none; }
.cutia-theme-action:hover,
.cutia-link-button:hover { color: var(--cutia-primary); text-decoration: underline; }
.cutia-inline-form { display: inline; margin-left: 12px; }
.cutia-theme-actions-column .cutia-theme-action { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }
.cutia-theme-actions-column .cutia-theme-action img { width: 16px; height: 16px; margin: 0; }
.cutia-sort-link { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.cutia-sort-link:hover { color: var(--cutia-primary-dark); text-decoration: underline; }
.cutia-sort-link.active { color: var(--cutia-primary-dark); }
.cutia-link-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.cutia-theme-edit-form { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto auto; align-items: center; gap: 9px; }
.cutia-theme-merge-form { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.5fr) auto auto; align-items: end; gap: 9px; }
.cutia-theme-merge-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.cutia-theme-merge-form select { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--cutia-border-strong); border-radius: 6px; background: #fff; }
.cutia-theme-edit-form input[type="text"] { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--cutia-border-strong); border-radius: 6px; font: inherit; }
.cutia-theme-edit-form .btn { margin: 0; padding: 8px 13px; font-size: 14px; }
.cutia-theme-merge-form .btn { margin: 0; padding: 8px 13px; font-size: 14px; text-decoration: none; font-weight: 600; }
.cutia-theme-edit-form button.btn { border: 1px solid var(--cutia-primary-dark); background: var(--cutia-primary); color: #fff; }
.cutia-theme-merge-form button.btn { border: 1px solid var(--cutia-primary-dark); background: var(--cutia-primary); color: #fff; opacity: 1; box-shadow: 0 2px 6px rgba(39, 103, 167, .24); cursor: pointer; }
.cutia-theme-merge-form button.btn:hover { background: var(--cutia-primary-dark); }
.cutia-theme-edit-form .btn-secondary { border: 1px solid var(--cutia-border-strong); background: #fff; color: #475569; }
.cutia-theme-merge-form .btn-secondary { border: 1px solid var(--cutia-border-strong); background: #fff; color: #475569; }
.cutia-full-field { vertical-align: top; }
.cutia-form .cutia-field-label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 9px; color: var(--cutia-text); font-weight: 700; }
.cutia-form .cutia-textarea-document { width: 100%; min-height: 34rem; resize: vertical; }
.cutia-new-theme { margin-top: 12px; }
.cutia-new-theme[hidden] { display: none; }
.cutia-new-theme textarea { min-height: 90px; resize: vertical; }
.cutia-form .cutia-theme-search-label { margin-bottom: 5px; }
.cutia-form .cutia-theme-search { margin-bottom: 8px; }
.cutia-theme-search-count { display: block; min-height: 18px; margin-top: 5px; color: var(--cutia-muted); }
.cutia-confirmation-cell { padding: 12px !important; }
.cutia-confirmation { padding: 14px 16px; border: 1px solid var(--cutia-border); border-radius: 7px; background: #f8fafc; }
.cutia-form .cutia-confirmation label { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; font-weight: 400; line-height: 1.5; }
.cutia-form .cutia-confirmation input[type="checkbox"] { flex: 0 0 auto; margin: 3px 0 0; }

.cutia-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 22px 0; padding: 0; list-style: none; }
.cutia-pagination li > a,
.cutia-pagination li > span { display: flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid #d2dae5; border-radius: 6px; background: #fff; color: #2869a7; text-decoration: none; }
.cutia-pagination li > a:hover { border-color: #7ba8d2; background: #edf5fc; }
.cutia-pagination .current { border-color: var(--cutia-primary); background: var(--cutia-primary); color: #fff; font-weight: 700; }
.cutia-pagination .disabled { background: #f4f6f8; color: #9aa5b1; }
.cutia-table-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; padding: 11px 13px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fafbfd; color: #526170; font-size: 12px; }
.cutia-table-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cutia-table-legend img { vertical-align: middle; }
.cutia-project-stats-section { margin-bottom: 28px; }
.cutia-project-stats-section h4 { margin: 0 0 12px; color: var(--cutia-text); }
.cutia-stats-disclosure { border: 1px solid var(--cutia-border); border-radius: 9px; background: #fff; box-shadow: 0 2px 7px rgba(25, 45, 70, .06); }
.cutia-stats-disclosure > summary { padding: 13px 16px; color: var(--cutia-primary-dark); font-weight: 700; cursor: pointer; }
.cutia-stats-disclosure[open] > summary { border-bottom: 1px solid var(--cutia-border); }
.cutia-stats-disclosure .cutia-table-wrap { padding: 14px; }
.cutia-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; }
.cutia-stat-card { display: flex; min-height: 88px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px; border: 1px solid var(--cutia-border); border-radius: 9px; background: #fff; box-shadow: 0 2px 7px rgba(25, 45, 70, .06); text-align: center; }
.cutia-stat-card strong { color: var(--cutia-primary-dark); font-size: 25px; line-height: 1; }
.cutia-stat-card span { color: var(--cutia-muted); font-size: 13px; font-weight: 600; }
.cutia-table .cutia-stat-total-row td { background: #edf3f8; color: var(--cutia-text); font-weight: 700; }
.cutia-table .cutia-stat-detail-row td:first-child { padding-left: 24px; color: var(--cutia-muted); }
.cutia-stat-group-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.cutia-stat-toggle-icon { width: 12px; color: var(--cutia-primary-dark); }

.cutia-help { position: relative; display: inline-flex; margin-left: 6px; vertical-align: middle; }
.cutia-help-trigger { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 3px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.cutia-help-trigger:hover,
.cutia-help-trigger:focus-visible { background: #e5eef7; outline: 2px solid transparent; }
.cutia-help-trigger img { display: block; width: 16px; height: 16px; margin: 0; }
.cutia-help-popup { display: none; position: absolute; top: calc(100% + 7px); right: 0; z-index: 1000; box-sizing: border-box; width: max-content; min-width: 210px; max-width: min(350px, 75vw); padding: 11px 14px; border: 1px solid var(--cutia-border-strong); border-radius: 7px; background: #fff; box-shadow: 0 7px 22px rgba(30, 50, 70, .18); color: #263442; font-size: 12px; font-weight: 400; line-height: 1.55; text-align: left; white-space: normal; }
.cutia-help.is-open .cutia-help-popup { display: block; }
.cutia-correction-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; }
.cutia-correction-nav a { padding: 6px 9px; border: 1px solid var(--cutia-border); border-radius: 5px; background: #fff; }
.cutia-correction-nav a.current { border-color: var(--cutia-primary); background: #edf5fc; color: var(--cutia-primary-dark); }
.cutia-comparison { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 16px; align-items: start; }
.cutia-comparison-card { padding: 16px; border: 1px solid var(--cutia-border); border-radius: 9px; background: var(--cutia-surface); }
.cutia-comparison-text { margin-top: 14px; padding: 14px; border: 1px solid var(--cutia-border); border-radius: 7px; background: #fff; font-size: 14px; line-height: 1.65; }

@media (max-width: 600px) {
  .cutia-theme-edit-form,
  .cutia-theme-merge-form { grid-template-columns: minmax(0, 1fr); }
  .cutia-filter-row-three { grid-template-columns: minmax(0, 1fr); }
  .cutia-assignment-row,
  .cutia-assignment-row-three { grid-template-columns: minmax(0, 1fr); }
  .cutia-filter-actions, .cutia-form-actions { justify-content: stretch; }
  .cutia-filter-actions a, .cutia-filter-actions button, .cutia-form-actions a, .cutia-form-actions button { flex: 1; text-align: center; }
  .cutia-pagination .long-label { display: none; }
  .cutia-table { display: block; overflow-x: auto; }
}

/* Manual do CUTIA */
/* ── 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;
    --mono: 'Courier New', Courier, monospace;
    --roxo: #5b2d8e;
    --roxo-claro: #ede7f6;
    --roxo-medio: #7e57c2;
    --teal: #00695c;
    --teal-claro: #e0f2f1;
  }

  /* ── Tipografia geral ── */
  .cutia-manual {
    font-family: inherit;
    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 */
  .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;
  }

  .etiqueta-azul {
    background: #bbdefb;
    color: #0d47a1;
    border-color: #90caf9;
  }

  .etiqueta-laranja {
    background: #ffe0b2;
    color: #e65100;
    border-color: #ffcc80;
  }

  /* ── 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.vermelho {
    border-top-color: #c62828;
  }

  .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;
    }
  }