/* ------------------------------------------------------------------------- */
/* Tokens                                                                      */
/* ------------------------------------------------------------------------- */

:root {
    /* acentos por seção — página Combate */
    --c-atributo: #52525b;
    --c-valor: #0f766e;
    --c-teste: #c2410c;
    --c-pericia: #a16207;
    --c-movimento: #7f1d1d;
    --c-acao: #18181b;
    --c-bonus: #4338ca;
    --c-reacao: #4d7c0f;
    --c-completa: #0e7490;
    --c-ataque: #831843;
    --c-condicao: #b91c1c;
    --c-ambiente: #166534;
    --c-alma: #581c87;
    --c-energia: #1d4ed8;
    --c-descanso: #78350f;

    /* acentos — página Habilidades */
    --c-lutador: #7f1d1d;
    --c-esp-combate: #0e7490;
    --c-esp-tecnica: #5b21b6;
    --c-controlador: #166534;
    --c-suporte: #a16207;
    --c-restringido: #18181b;
    --c-talento: #b45309;
    --c-aptidao: #1d4ed8;

    /* acentos — página Itens */
    --c-simples: #52525b;
    --c-complexa: #831843;
    --c-distancia: #0e7490;
    --c-arremesso: #4d7c0f;
    --c-uniforme: #a16207;
    --c-escudo: #1d4ed8;
    --c-propriedade: #5b21b6;
    --c-especial: #b45309;
    --c-encant: #0e7490;

    /* acentos — página Origens */
    --c-origem: #7c3aed;
    --c-cla: #a16207;
    --c-anatomia: #166534;

    /* acentos — página Técnica */
    --c-tecnica: #5b21b6;
    --c-feitico2: #1d4ed8;
    --c-tabelas: #334155;
    --c-dominio: #a21caf;
    --c-invocacao: #0f766e;
    --c-voto: #831843;
    --c-peso: #b45309;

    /* acentos — página Mundo */
    --c-conceito: #1d4ed8;
    --c-descanso2: #0f766e;

    /* acentos — página Evolução */
    --c-criacao: #0f766e;
    --c-subir: #b45309;
    --c-tabela: #334155;
    --c-feitico: #5b21b6;
    --c-maximos: #155e75;
    --c-multiclasse: #a21caf;
    --c-interludio: #166534;
    --c-regras: #52525b;

    /* superfícies e tinta — modo Dia */
    --page-bg: #17171b;
    --glow-1: rgba(88, 28, 135, .35);
    --glow-2: rgba(29, 78, 216, .22);
    --surface: #fdfcfb;
    --surface-alt: #f6f4f2;
    --ink: #1c1917;
    --ink-soft: #57534e;
    --rule: #ddd9d5;
    --th-bg: #efedeb;
    --card-shadow: 0 3px 14px rgba(0, 0, 0, .45);

    /* cromo (topo e lateral) */
    --chrome-bg: rgba(12, 12, 14, .94);
    --chrome-line: #2f2f36;
    --chrome-ink: #d6d3d1;
    --chrome-dim: #8b8783;
    --chrome-hover: #2a2a31;
    --field-bg: #1c1c21;
    --gold: #c9a227;
}

/* Modo Noite: cards escuros, tinta clara */
:root[data-tema="noite"] {
    --page-bg: #08080a;
    --glow-1: rgba(88, 28, 135, .20);
    --glow-2: rgba(29, 78, 216, .12);
    --surface: #1b1b21;
    --surface-alt: #22222a;
    --ink: #e7e5e4;
    --ink-soft: #a8a29e;
    --rule: #34343d;
    --th-bg: #2a2a33;
    --card-shadow: 0 3px 14px rgba(0, 0, 0, .6);

    --chrome-bg: rgba(5, 5, 7, .96);
    --chrome-line: #24242b;
    --chrome-hover: #1d1d24;
    --field-bg: #14141a;

    /* os dois acentos quase pretos somem no fundo escuro — clareia */
    --c-acao: #43434d;
    --c-restringido: #43434d;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 62px;
}

body {
    margin: 0;
    background-color: var(--page-bg);
    background-image:
        radial-gradient(circle at 20% -10%, var(--glow-1), transparent 55%),
        radial-gradient(circle at 85% 5%, var(--glow-2), transparent 50%);
    background-attachment: fixed;
    color: var(--chrome-ink);
    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------------- */
/* Barra do topo                                                               */
/* ------------------------------------------------------------------------- */

#nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--chrome-bg);
    border-bottom: 1px solid var(--chrome-line);
    backdrop-filter: blur(6px);
}

.nav-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-brand {
    font-family: Lora, Georgia, serif;
    font-variant: small-caps;
    font-weight: bold;
    color: var(--gold);
    white-space: nowrap;
    letter-spacing: .5px;
}

.nav-tabs {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
    background-color: var(--chrome-hover);
    border-radius: 5px;
    padding: 2px;
}

.nav-tabs a {
    color: var(--chrome-dim);
    text-decoration: none;
    font-family: Lora, Georgia, serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 11pt;
    padding: 3px 12px;
    border-radius: 4px;
    white-space: nowrap;
}

.nav-tabs a:hover {
    color: #fff;
    background-color: #35353d;
}

.nav-tabs a.active {
    color: #17171b;
    background-color: var(--gold);
}

#search {
    flex: 1;
    max-width: 340px;
    margin-left: auto;
    padding: 5px 9px;
    border-radius: 4px;
    border: 1px solid #3f3f46;
    background-color: var(--field-bg);
    color: #f5f5f4;
    font-family: inherit;
    font-size: 10.5pt;
}

#search:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, .25);
}

#btn-tema {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #3f3f46;
    background-color: var(--field-bg);
    color: var(--chrome-ink);
    font-family: inherit;
    font-size: 10pt;
    cursor: pointer;
    white-space: nowrap;
}

#btn-tema:hover {
    border-color: var(--gold);
    color: #fff;
}

/* na ficha o alternador entra no sistema do C.R.I.S. (nu, hover no
   acento); nas outras abas continua no formato da referencia de D&D */
.body-ficha #btn-tema {
    padding: 3px 9px;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--chrome-dim);
    font-family: Roboto, inherit;
    font-size: 13px;
    transition: color .1s ease;
}

.body-ficha #btn-tema:hover { color: var(--gold); }

#btn-tema:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------------- */
/* Layout: lateral + conteúdo                                                  */
/* ------------------------------------------------------------------------- */

.layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

#sidebar {
    position: sticky;
    top: 50px;
    flex: 0 0 236px;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    padding: 16px 0 24px;
    scrollbar-width: thin;
}

.side-title {
    font-family: Lora, Georgia, serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 11pt;
    letter-spacing: .5px;
    color: var(--chrome-dim);
    padding: 0 10px 6px;
    border-bottom: 1px solid var(--chrome-line);
    margin-bottom: 6px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 9px;
    margin-bottom: 1px;
    border-left: 3px solid var(--accent, transparent);
    border-radius: 0 5px 5px 0;
    color: var(--chrome-ink);
    text-decoration: none;
    font-size: 10.5pt;
    line-height: 1.25;
}

.side-link:hover {
    background-color: var(--chrome-hover);
    color: #fff;
}

.side-link.ativo {
    background-color: rgba(201, 162, 39, .15);
    color: #fff;
    font-weight: bold;
}

.side-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.side-count {
    margin-left: auto;
    font-size: .82em;
    color: var(--chrome-dim);
    font-variant-numeric: tabular-nums;
}

.side-link.ativo .side-count {
    color: var(--gold);
}

.side-note {
    padding: 10px 10px 0;
    font-size: .78em;
    font-style: italic;
    color: var(--chrome-dim);
    line-height: 1.4;
}

.page {
    flex: 1;
    min-width: 0;
    padding: 16px 0 8px;
    box-sizing: border-box;
}

.main-title {
    font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, Garamond, Georgia, serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 26pt;
    line-height: 1.15;
    margin-bottom: 12px;
    color: #fafaf9;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
    text-wrap: balance;
}

.description {
    width: 100%;
    max-width: 95ch;
    margin-bottom: 20px;
    color: var(--chrome-ink);
    line-height: 1.5;
    page-break-inside: avoid;
}

.description-small {
    font-size: .85em;
    color: var(--chrome-dim);
}

.description a {
    color: var(--gold);
}

.footer {
    margin: 24px 0 16px;
    text-align: center;
    color: var(--chrome-dim);
    font-size: .85em;
}

.no-results {
    display: none;
    padding: 32px;
    text-align: center;
    color: var(--chrome-ink);
    font-style: italic;
}

/* ------------------------------------------------------------------------- */
/* Seções                                                                      */
/* ------------------------------------------------------------------------- */

.section-container {
    border: 8px solid var(--accent);
    background-color: var(--accent);
    border-radius: 8px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: var(--card-shadow);
    page-break-inside: avoid;
}

.section-content {
    padding: 8px;
    padding-bottom: 0;
    border-radius: 4px;
    margin-top: 0;
    background-color: var(--surface);
    color: var(--ink);
    font-size: inherit;
}

.section-title {
    min-height: 32px;
    padding: 2px 8px;
    font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, Garamond, Georgia, serif;
    font-variant: small-caps;
    font-weight: bold;
    background-color: inherit;
    color: #fff;
    font-size: 16pt;
    line-height: 1.7;
}

.section-title .float-right {
    float: right;
    font-size: 11pt;
    opacity: .85;
    font-variant: normal;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-weight: normal;
    line-height: 2.6;
}

.section-subtitle,
#modal-reference {
    display: block;
    margin-bottom: 8px;
    font-size: inherit;
    font-style: italic;
    line-height: 1.35;
}

#modal-reference {
    margin-top: 1em;
    padding-bottom: 8px;
}

.section-row {
    font-size: inherit;
}

.section-row:before,
.section-row:after {
    display: table;
    content: " ";
    clear: both;
}

.section-row + .section-subtitle {
    margin-top: 1em;
}

/* texto de apoio na cor do acento — clareado no modo noite */
.section-container .text {
    color: var(--accent);
}

:root[data-tema="noite"] .section-container .text {
    color: color-mix(in oklab, var(--accent) 42%, #fafaf9);
}

/* ------------------------------------------------------------------------- */
/* Itens                                                                       */
/* ------------------------------------------------------------------------- */

.item {
    margin-bottom: 8px;
    float: left;
    display: flex;
    font-size: inherit;
    vertical-align: top;
    box-sizing: border-box;
    cursor: pointer;
    align-items: center;
}

.item:hover .item-icon {
    filter: brightness(1.35);
}

.item:hover .item-title {
    text-decoration: underline;
}

.item-icon {
    float: left;
    flex: 0 0 auto;
    background-color: var(--accent);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    box-sizing: border-box;
    border-radius: 4px;
    display: inline-block;
    margin-right: 5px;
    transition: filter .12s ease;
}

.item-title {
    font-weight: bold;
    font-size: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
}

.item-desc {
    font-style: italic;
    font-size: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-text-container {
    flex: 1;
    min-width: 0;
    padding-right: 4px;
    font-size: inherit;
}

/* ------------------------------------------------------------------------- */
/* Acento de cada seção                                                        */
/* ------------------------------------------------------------------------- */

/* Combate */
#section-atributo   { --accent: var(--c-atributo); }
#section-valor      { --accent: var(--c-valor); }
#section-teste      { --accent: var(--c-teste); }
#section-pericia    { --accent: var(--c-pericia); }
#section-movimento  { --accent: var(--c-movimento); }
#section-acao       { --accent: var(--c-acao); }
#section-bonus      { --accent: var(--c-bonus); }
#section-reacao     { --accent: var(--c-reacao); }
#section-completa   { --accent: var(--c-completa); }
#section-ataque     { --accent: var(--c-ataque); }
#section-condicao   { --accent: var(--c-condicao); }
#section-ambiente   { --accent: var(--c-ambiente); }
#section-alma       { --accent: var(--c-alma); }
#section-energia    { --accent: var(--c-energia); }
#section-descanso   { --accent: var(--c-descanso); }

/* Habilidades */
#section-lutador     { --accent: var(--c-lutador); }
#section-combate     { --accent: var(--c-esp-combate); }
#section-tecnica     { --accent: var(--c-esp-tecnica); }
#section-controlador { --accent: var(--c-controlador); }
#section-suporte     { --accent: var(--c-suporte); }
#section-restringido { --accent: var(--c-restringido); }
#section-talento     { --accent: var(--c-talento); }
#section-aptidao     { --accent: var(--c-aptidao); }

/* Evolução */
#section-simples      { --accent: var(--c-simples); }
#section-complexa     { --accent: var(--c-complexa); }
#section-distancia    { --accent: var(--c-distancia); }
#section-arremesso    { --accent: var(--c-arremesso); }
#section-uniforme     { --accent: var(--c-uniforme); }
#section-escudo       { --accent: var(--c-escudo); }
#section-especial     { --accent: var(--c-especial); }
#section-encant       { --accent: var(--c-encant); }
#section-propriedade  { --accent: var(--c-propriedade); }
#section-origem       { --accent: var(--c-origem); }
#section-cla          { --accent: var(--c-cla); }
#section-anatomia     { --accent: var(--c-anatomia); }
#section-tecnica      { --accent: var(--c-tecnica); }
#section-feitico      { --accent: var(--c-feitico2); }
#section-tabelas      { --accent: var(--c-tabelas); }
#section-dominio      { --accent: var(--c-dominio); }
#section-invocacao    { --accent: var(--c-invocacao); }
#section-voto         { --accent: var(--c-voto); }
#section-peso         { --accent: var(--c-peso); }
#section-conceito     { --accent: var(--c-conceito); }
#section-descanso2    { --accent: var(--c-descanso2); }
#section-criacao      { --accent: var(--c-criacao); }
#section-nivel        { --accent: var(--c-subir); }
#section-tabela       { --accent: var(--c-tabela); }
#section-feitico      { --accent: var(--c-feitico); }
#section-maximos      { --accent: var(--c-maximos); }
#section-multiclasse  { --accent: var(--c-multiclasse); }
#section-interludio   { --accent: var(--c-interludio); }
#section-regras       { --accent: var(--c-regras); }

/* ------------------------------------------------------------------------- */
/* Painel de detalhe embutido                                                  */
/* ------------------------------------------------------------------------- */

.detalhe {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 10px 14px 12px;
    border-left: 4px solid var(--accent);
    border-radius: 0 6px 6px 0;
    background-color: var(--surface-alt);
    color: var(--ink);
    animation: abrir-detalhe .13s ease-out;
}

@keyframes abrir-detalhe {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.detalhe-topo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 2px;
}

.detalhe-titulo {
    font-family: Lora, 'Calisto MT', Garamond, Georgia, serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 14pt;
    line-height: 1.2;
    color: var(--accent);
}

:root[data-tema="noite"] .detalhe-titulo {
    color: color-mix(in oklab, var(--accent) 45%, #fafaf9);
}

.detalhe-tipo {
    margin-left: auto;
    font-size: .82em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.detalhe-fechar {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-size: 15pt;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.detalhe-fechar:hover {
    color: var(--ink);
}

.detalhe-fechar:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.detalhe-desc {
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.35;
    margin-bottom: .2em;
}

.detalhe p {
    color: var(--ink);
    line-height: 1.45;
    max-width: 90ch;
}

.detalhe hr {
    border: 0;
    border-top: 1px solid var(--rule);
}

.detalhe-ref {
    margin-top: .9em;
    font-style: italic;
    font-size: .9em;
    color: var(--ink-soft);
}

.item.aberto .item-title {
    text-decoration: underline;
}

.item.aberto .item-icon {
    filter: brightness(1.35);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* ------------------------------------------------------------------------- */
/* Tabelas de referência                                                       */
/* ------------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    margin-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

table.ref {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    margin: 0;
    font-size: .9em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

table.ref th, table.ref td {
    border: 1px solid var(--rule);
    padding: 3px 8px;
    text-align: left;
    white-space: nowrap;
}

table.ref th {
    background-color: var(--th-bg);
    color: var(--ink);
    font-family: Lora, Georgia, serif;
    font-variant: small-caps;
    font-size: 1.05em;
}

table.ref td {
    color: var(--ink);
}

table.ref tbody tr:nth-child(even) {
    background-color: var(--surface-alt);
}

table.ref td.marco {
    white-space: normal;
    min-width: 240px;
    font-style: italic;
}

.table-note {
    font-size: .88em;
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 8px;
}

/* ------------------------------------------------------------------------- */
/* Diversos                                                                    */
/* ------------------------------------------------------------------------- */

.hidden {
    display: none !important;
}

ul {
    padding-left: 20px;
}

p, hr {
    margin-top: .5em;
    margin-bottom: .5em;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
}

p:first-child {
    margin-top: 1em;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ------------------------------------------------------------------------- */
/* Tamanhos de viewport                                                        */
/* ------------------------------------------------------------------------- */

/* Celular */
@media (max-width: 767px) {
    .fontsize { font-size: 12pt; }
    .iconsize { width: 44px; height: 44px; }
    .itemsize { height: 44px; width: 100%; }
    .main-title { font-size: 19pt; }
    .layout { display: block; padding: 0 12px; }
    #sidebar { display: none; }
    .nav-brand { display: none; }
    .nav-tabs a { font-size: 10pt; padding: 3px 8px; }
    #search { max-width: none; min-width: 0; }
    #btn-tema span { display: none; }
    #btn-tema { padding: 5px 8px; }
}

/* Celular deitado / tablet estreito */
@media (min-width: 480px) and (max-width: 767px) {
    .fontsize { font-size: 11pt; }
    .iconsize { width: 40px; height: 40px; }
    .itemsize { height: 40px; width: 50%; }
    .main-title { font-size: 21pt; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1099px) {
    .fontsize { font-size: 11pt; }
    .iconsize { width: 40px; height: 40px; }
    .itemsize { height: 40px; width: 50%; }
    #sidebar { flex-basis: 190px; }
}

/* Desktop */
@media (min-width: 1100px) and (max-width: 1499px) {
    .fontsize { font-size: 12pt; }
    .iconsize { width: 44px; height: 44px; }
    .itemsize { height: 44px; width: 33.33%; }
}

/* Desktop grande */
@media (min-width: 1500px) {
    .fontsize { font-size: 12pt; }
    .iconsize { width: 44px; height: 44px; }
    .itemsize { height: 44px; width: 25%; }
}

/* Impressão */
@media print {
    body { background: white; color: black; }
    #nav, #sidebar, .no-results, .footer { display: none; }
    .layout { display: block; padding: 0; }
    .fontsize { font-size: 10pt; }
    .iconsize { width: 36px; height: 36px; }
    .itemsize { height: 36px; width: 33.33%; }
    .main-title, .description { color: black; }
    .section-container { box-shadow: none; }
}

/* ------------------------------------------------------------------------- */
/* Ficha — no molde do C.R.I.S.                                                */
/* Medido da ficha deles: fundo chapado #121212, sem cartões, sem raio e sem   */
/* sombra; separação só por linhas de 10% branco. Roboto, títulos 14/700,      */
/* rótulos 10/700 a 60%, linha de 28px, aba ativa com borda de 2px no acento.  */
/* Os matizes de acento são os nossos.                                         */
/* ------------------------------------------------------------------------- */

.body-ficha {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: Roboto, 'Noto Sans', Arial, sans-serif;

    /* noite: os tons do C.R.I.S. */
    --chao: #121212;
    --elevado: #1f1f1f;
    --fundo-fundo: #0a0a0a;
    --linha: rgba(255, 255, 255, .1);
    --linha-forte: rgba(255, 255, 255, .18);
    --tinta: #fff;
    --tinta-fraca: rgba(255, 255, 255, .6);
    --tinta-tenue: rgba(255, 255, 255, .38);
    --vermelho: #d9534f;
    --verde: #3d8b40;
    --realce: rgba(255, 255, 255, .07);

    background: var(--chao);
    background-image: none;
    color: var(--tinta);
}

/* dia: o espelho claro dos mesmos papéis */
:root[data-tema="dia"] .body-ficha,
:root[data-tema="dia"] body.body-ficha {
    --chao: #f2f1ef;
    --elevado: #fff;
    --fundo-fundo: #e7e5e2;
    --linha: rgba(0, 0, 0, .11);
    --linha-forte: rgba(0, 0, 0, .2);
    --tinta: #16151a;
    --tinta-fraca: rgba(0, 0, 0, .58);
    --tinta-tenue: rgba(0, 0, 0, .36);
    --realce: rgba(0, 0, 0, .06);
}

.ficha-app {
    display: grid;
    grid-template-columns: minmax(330px, 420px) minmax(360px, 440px) minmax(300px, 1fr);
    gap: 0;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 14px 20px 12px;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    /* o acento vem do bloco de paleta, la embaixo: um so, em ciano */
}

.col {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--linha-forte) transparent;
}

.col::-webkit-scrollbar { width: 6px; }
.col::-webkit-scrollbar-thumb { background: var(--linha-forte); }
.col::-webkit-scrollbar-track { background: transparent; }

/* sem fio entre as colunas: quem separa e o espaco */
.col-2 { padding: 0 20px; }
.col-1 { padding-right: 20px; }
.col-3 { padding-left: 20px; }

.col-2 .cartao.alto, .col-3 .cartao.alto { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* --- "cartão" agora é só um bloco com um fio embaixo --- */

.cartao {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 24px;
    color: var(--tinta);
}

.cartao:last-child, .cartao.alto { margin-bottom: 0; }

/* titulo centralizado em versalete, como o PERICIAS / VIDA deles.
   Grade de 3 colunas: vazio | titulo | nota, para o titulo ficar no
   centro real mesmo quando ha nota a direita. */
.cartao h2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 8px;
    font-family: inherit;
    font-variant: normal;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    color: var(--tinta);
    margin: 0 0 11px;
    padding: 0;
    border: 0;
}

.cartao h2::before { content: ""; }
.cartao h2:not(:first-child) { margin-top: 18px; }

.h2-nota {
    text-align: right;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .3px;
    text-transform: none;
    color: var(--tinta-tenue);
}

/* Um acento so na ficha, definido no bloco de paleta. Aqui ficavam sete
   tons, um por secao — era o que mais destoava da ficha do C.R.I.S., que
   usa um acento unico e reserva cor para estado. */

.rodape-col {
    font-size: 11px;
    color: var(--tinta-tenue);
    margin: 12px 0 0;
}

/* --- dropdown proprio --- */

/* O popup nativo do <select> e desenhado pelo sistema e nao aceita cor no
   item sob o mouse. Este e o nosso, no formato do C.R.I.S.: item alto,
   e o que esta sob o cursor pintado no acento. */
.ficha-app select,
.ficha-cabecalho select { cursor: pointer; }

.sel-pop {
    position: fixed;
    z-index: 2000;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--elevado);
    border: 1px solid var(--linha-forte);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    font-family: Roboto, 'Noto Sans', Arial, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: var(--linha-forte) transparent;
}

.sel-pop::-webkit-scrollbar { width: 6px; }
.sel-pop::-webkit-scrollbar-thumb { background: var(--linha-forte); }

.sel-op {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--tinta);
    cursor: pointer;
    white-space: nowrap;
}

/* o item sob o cursor - e isso que o nativo nao deixa fazer */
.sel-op.sob-cursor { color: var(--accent); background-color: var(--realce); }
.sel-op.escolhida { font-weight: 700; }
.sel-op[aria-disabled="true"] { color: var(--tinta-tenue); cursor: default; }

/* --- faixa de identidade (largura total, no topo) --- */

/* No C.R.I.S. a identidade e uma faixa que atravessa a ficha inteira:
   retrato a esquerda, rotulo em versalete e o valor sobre um fio. */
.ficha-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 20px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 12px 20px 13px;
    border-bottom: 1px solid var(--linha);
    box-sizing: border-box;
    flex: 0 0 auto;
    --accent: #22d3ee;   /* o mesmo da ficha; o tema dia troca abaixo */
}

.cab-selo { flex: 0 0 58px; line-height: 0; }
.cab-selo svg { width: 58px; height: 58px; fill: none; stroke: var(--accent); stroke-width: 3; }
.cab-selo .cab-selo-int { stroke: var(--tinta-tenue); stroke-width: 2; }

.cab-campos {
    flex: 1 1 420px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 5px 24px;
    align-content: center;
}

.cab-campo { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

.cab-campo > span {
    flex: 0 0 92px;
    text-align: right;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--tinta-fraca);
}

.cab-campo input,
.cab-campo select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 0 5px;
    border: 0;
    border-bottom: 1px solid var(--linha-forte);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 15px;
}

.cab-campo input:focus,
.cab-campo select:focus { outline: none; border-bottom-color: var(--accent); }
.cab-campo select option { background: var(--chao); color: var(--tinta); }

/* caixas de nivel / grau / treino, como NIVEL e NEX deles */
.cab-nivel { flex: 0 0 auto; display: flex; gap: 8px; }
.cab-caixa { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.cab-caixa input,
.cab-caixa b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 2px;
    border: 1px solid var(--linha-forte);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.cab-caixa input:focus { outline: none; border-color: var(--accent); }
.cab-caixa.estatica b { color: var(--tinta-fraca); }

.cab-caixa > span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--tinta-fraca);
    white-space: nowrap;
}

.nota-origem {
    flex: 1 1 100%;
    margin: 0;
    font-size: 11px;
    font-style: italic;
    color: var(--tinta-tenue);
}

/* atributos-chave, logo abaixo do selo */
.chave-atrib { display: grid; gap: 5px; margin-top: 13px; }
.chave-atrib .cab-campo > span { flex: 0 0 104px; }
.chave-atrib .cab-campo select { font-size: 12px; }

/* --- identidade --- */

.campo-nome {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 0 6px;
    margin-bottom: 10px;
    border: 0;
    border-bottom: 1px solid var(--linha);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
}

.campo-nome::placeholder { color: var(--tinta-tenue); font-weight: 400; }

.cabeca-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }

.cabeca-linha select {
    flex: 1 1 130px;
    min-width: 0;
    padding: 2px 0 3px;
    border: 0;
    border-bottom: 1px solid var(--linha);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 13px;
}

.mini-campo {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tinta-fraca);
}

.mini-campo input {
    width: 38px;
    padding: 0;
    text-align: center;
    border: 0;
    border-bottom: 1px solid var(--linha);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
}

.pilula {
    padding: 1px 8px;
    border: 1px solid var(--linha-forte);
    color: var(--tinta-fraca);
    font-size: 10px;
    letter-spacing: .3px;
    white-space: nowrap;
}

.mais-campos summary {
    cursor: pointer;
    font-size: 11px;
    color: var(--tinta-fraca);
    padding: 3px 0;
    list-style: none;
}

.mais-campos summary::marker, .mais-campos summary::-webkit-details-marker { display: none; }
.mais-campos summary::before { content: "▸ "; }
.mais-campos[open] summary::before { content: "▾ "; }

.campos { display: flex; flex-wrap: wrap; gap: 9px 12px; padding-top: 8px; }
.campo { display: flex; flex-direction: column; gap: 1px; flex: 1 1 125px; min-width: 0; }
.campo.largo { flex: 1 1 100%; }

.campo > span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tinta-fraca);
}

.campo input, .campo select {
    padding: 1px 0 3px;
    border: 0;
    border-bottom: 1px solid var(--linha);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 13px;
    min-width: 0;
}

.nota-origem { font-size: 11px; color: var(--tinta-tenue); margin: 8px 0 0; line-height: 1.45; }

/* --- selo hexagonal --- */

.selo {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 1;
    --selo-brilho: var(--accent);
}

.selo-arte { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* arte de linha forte, como a mandala deles: sem preenchimento
   pesado, o desenho e que carrega a peca. */
.selo-veu {
    fill: none;
    stroke: var(--tinta-fraca);
    stroke-width: 1.6;
    stroke-dasharray: 3 7;
    transform-origin: 150px 150px;
    animation: girar-veu 100s linear infinite;
}

@keyframes girar-veu { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .selo-veu { animation: none; } }

.selo-veu-fino { fill: none; stroke: var(--tinta-tenue); stroke-width: 1; }

.selo-hex {
    fill: none;
    stroke: var(--tinta);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.selo-hex-int { fill: none; stroke: var(--tinta-tenue); stroke-width: 1; stroke-dasharray: 2 4; }
.selo-raios line { stroke: var(--linha-forte); stroke-width: 1; }

.selo-nucleo {
    fill: var(--chao);
    stroke: var(--tinta-fraca);
    stroke-width: 1.6;
}

.selo-nos { position: absolute; inset: 0; }

.no {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--chao);
    border: 2px solid var(--tinta);
}

.no.tem-bonus { border-color: var(--accent); }

.no-mod {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.no input {
    width: 32px;
    padding: 0;
    text-align: center;
    border: 0;
    background: none;
    color: var(--tinta-fraca);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.3;
}

.no input::-webkit-outer-spin-button, .no input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.no-nome { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--tinta-fraca); }

.selo-centro {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    pointer-events: none;
}

.centro-rot { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; color: var(--tinta-fraca); }
.centro-val { font-size: 21px; font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; }
.centro-sub { font-size: 9px; letter-spacing: .8px; color: var(--tinta-tenue); text-transform: uppercase; }

/* --- barras de recurso --- */

/* Molde do .info-bar do C.R.I.S., lido do CSS deles:
     .info-bar-label      14px/700, centrado, off-white
     .info-bar            2.5rem de altura, fio de 1px, position relative
     .info-bar-fill       absoluto, altura 100%, largura = %, transicao 1s
     .info-bar-components flex, space-between, padding 0 .25rem
     .info-bar-button     1.5rem x 2rem, z-index 1
   O preenchimento vai por dentro da caixa, como fundo, num tom escuro e
   dessaturado (o deles e rgb(98,26,26) para vida) para o texto continuar
   legivel por cima. */

.rec + .rec { margin-top: 12px; }

.rec-rot {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--tinta-fraca);
    margin-bottom: 5px;
}

.rec-caixa {
    position: relative;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--linha-forte);
}

.rec-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background-color: var(--rec-cheio);
    transition: width .5s ease-in-out;
}

.rec-linha {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 4px;
}

.rec-bt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    z-index: 1;
    border: 0;
    background: none;
    color: var(--tinta-fraca);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color .1s ease;
}

.rec-bt:hover { color: var(--tinta); }

.rec-valor {
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}

.rec-valor input {
    width: 3.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rec-valor input:focus { outline: none; }
.rec-valor i { font-size: 13px; font-style: normal; color: var(--tinta-fraca); }

.rec-pe { margin-top: 3px; text-align: right; }
.rec-pe .conta { font-size: 10px; }

/* cada recurso tem o seu tom; o cheio e o acento puxado para o escuro */
/* as cores das tres barras estao no bloco de paleta, mais abaixo */

.rec { --rec-cheio: color-mix(in oklab, var(--accent) 46%, #000); }
.rec-fill.meio { background-color: color-mix(in oklab, #c2760c 46%, #000); }
.rec-fill.baixo { background-color: color-mix(in oklab, var(--vermelho) 46%, #000); }

/* no tema claro o preenchimento clareia, senao come o texto */
:root[data-tema="dia"] .rec { --rec-cheio: color-mix(in oklab, var(--accent) 26%, #fff); }
:root[data-tema="dia"] .rec-fill.meio { background-color: color-mix(in oklab, #c2760c 26%, #fff); }
:root[data-tema="dia"] .rec-fill.baixo { background-color: color-mix(in oklab, var(--vermelho) 26%, #fff); }

/* --- tiles --- */

/* caixa com o numero grande e o rotulo embaixo, como NIVEL / NEX /
   PD POR TURNO / DESLOCAMENTO deles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px 6px;
    border: 1px solid var(--linha-forte);
    background: none;
    min-width: 0;
}

.tile-val { order: 1; }
.tile-rot { order: 2; }
.tile .conta { order: 3; }

.tile-rot {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tinta-fraca);
    white-space: nowrap;
}

.tile-val { font-size: 22px; font-weight: 500; line-height: 1.15; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tile-val i { font-size: 11px; font-weight: 400; font-style: normal; color: var(--tinta-fraca); }

.conta { font-size: 11px; color: var(--tinta-tenue); text-align: center; line-height: 1.35; }
.conta-longa { display: none; }
body.mostrar-contas .conta-curta { display: none; }
body.mostrar-contas .conta-longa { display: inline; }

/* --- aptidões --- */

/* uma lista, no mesmo ritmo das pericias - a grade de tres colunas
   embaralhava sigla, campo e total */
.grade-apt { display: flex; flex-direction: column; }

.apt { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.apt-nome { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--tinta-fraca); }
.apt-sigla { flex: 0 0 30px; font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--tinta-tenue); }

.apt input {
    width: 34px;
    padding: 0 0 1px;
    text-align: center;
    border: 0;
    border-bottom: 1px solid var(--linha-forte);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 12px;
}

.apt input:focus { outline: none; border-bottom-color: var(--accent); }

.apt-total { flex: 0 0 30px; text-align: right; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tinta); }

/* --- linhas: 28px, sem zebra, separadas por fio --- */

.linhas { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }

.linha {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
    box-sizing: border-box;
    min-height: 30px;
}
.linha:hover { background-color: rgba(255, 255, 255, .04); }
:root[data-tema="dia"] .linha:hover { background-color: rgba(0, 0, 0, .04); }

.linha-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--tinta-fraca);
}

/* nome vira botao quando ha texto do livro para mostrar */
.linha-nome-btn {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.linha-nome-btn:hover { color: var(--accent); }
.linha-nome-btn[aria-expanded="true"] { color: var(--accent); font-weight: 500; }

.aviso-leitura {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 9px 20px;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-family: Roboto, 'Noto Sans', Arial, sans-serif;
    font-size: 13px;
    color: var(--tinta-fraca);
    background: color-mix(in oklab, #1e3a8a 30%, transparent);
    border-bottom: 1px solid color-mix(in oklab, #1e3a8a 70%, transparent);
}

.aviso-leitura b { color: var(--tinta); font-weight: 500; }
.aviso-leitura .btn-mini { margin-left: auto; color: var(--tinta); }

/* campo travado nao deve parecer apagado a ponto de nao dar para ler */
body.somente-leitura .ficha-app input:disabled,
body.somente-leitura .ficha-app select:disabled,
body.somente-leitura .ficha-app textarea:disabled {
    color: var(--tinta);
    -webkit-text-fill-color: var(--tinta);
    opacity: 1;
    cursor: default;
}

body.somente-leitura .ficha-app button:disabled { opacity: .35; cursor: default; }

/* --- tela da mesa --- */

.pilula-papel {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: Roboto, inherit;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #fff;
}

.pilula-papel:empty { display: none; }
.pilula-papel.jogador { background: var(--accent-cheio); }
.pilula-papel.mestre { background: #1e3a8a; }

.tela-mesa {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 20px;
    overflow-y: auto;
    background: rgba(0, 0, 0, .72);
    font-family: Roboto, 'Noto Sans', Arial, sans-serif;
}

.mesa-caixa {
    width: 100%;
    max-width: 860px;
    background: var(--elevado);
    border: 1px solid var(--linha-forte);
    border-radius: 2px;   /* o raio deles e 2px em tudo */
    --accent: #22d3ee;
}

.mesa-topo { display: flex; align-items: center; padding: 18px 22px 6px; }
.mesa-topo h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--tinta); }
.mesa-topo .modal-x { margin-left: auto; }

#mesa-corpo { padding: 8px 22px 22px; }

.mesa-aviso {
    padding: 11px 13px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tinta-fraca);
    border-left: 2px solid var(--accent);
    background: rgba(255, 255, 255, .03);
}

.mesa-aviso.atencao { border-left-color: #c2760c; }
.mesa-aviso.ok { border-left-color: var(--verde); }
.mesa-aviso b { color: var(--tinta); font-weight: 500; }
:root[data-tema="dia"] .mesa-aviso { background: rgba(0, 0, 0, .03); }

.mesa-titulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--tinta);
}

.mesa-titulo span { font-weight: 400; letter-spacing: .3px; font-size: 11px; color: var(--tinta-tenue); }

.mesa-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.mesa-vaga {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 13px;
    border: 1px solid var(--linha);
    border-radius: 2px;
    min-height: 104px;
    box-sizing: border-box;
}

.mesa-vaga.vazia { border-style: dashed; justify-content: center; }
.mesa-vaga.mestre { border-color: color-mix(in oklab, #1e3a8a 70%, transparent); }

.mesa-vaga-papel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--tinta-tenue);
}

.mesa-vaga-nome { font-size: 15px; font-weight: 700; color: var(--tinta); }
.mesa-vaga-jogador { font-size: 12px; color: var(--accent); font-weight: 500; }
.mesa-vaga-sub { font-size: 11px; color: var(--tinta-fraca); }
.mesa-vaga-acoes { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 9px; }
.mesa-bloqueada { font-size: 11px; font-style: italic; color: var(--tinta-tenue); }

.mesa-form {
    padding: 16px 18px;
    border: 1px solid var(--linha-forte);
    border-radius: 2px;
    background: var(--chao);
}

.mesa-form h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--tinta); }
.mesa-form .cab-campo { margin-bottom: 10px; }
.mesa-form .cab-campo > span { flex: 0 0 60px; }
.mesa-form-acoes { display: flex; gap: 8px; margin-top: 14px; }
.mesa-nota { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--tinta-tenue); }
.mesa-erro { margin: 10px 0 0; font-size: 12px; color: var(--vermelho); }

@media (max-width: 700px) {
    .mesa-grade { grid-template-columns: 1fr; }
}

/* --- pop-up de detalhe --- */

.modal-fundo {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .6);
}

.modal-caixa {
    width: 100%;
    max-width: 600px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: var(--elevado);
    border: 1px solid var(--linha-forte);
    border-radius: 2px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.modal-topo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px 4px;
}

.modal-topo h3 {
    margin: 0;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: var(--tinta);
}

.modal-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--tinta-tenue);
}

.modal-x {
    margin-left: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    opacity: .56;
    transition: opacity .1s ease;
}

.modal-x:hover { opacity: 1; }
.modal-x::before, .modal-x::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 14px;
    width: 17px;
    height: 1.5px;
    background: var(--tinta);
}

.modal-x::before { transform: rotate(45deg); }
.modal-x::after { transform: rotate(-45deg); }

.modal-corpo {
    padding: 14px 24px 22px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.65;
    color: var(--tinta-fraca);
    scrollbar-width: thin;
}

.modal-corpo p { margin: 0 0 1em; }
.modal-corpo p:last-child { margin-bottom: 0; }
.modal-corpo i { color: var(--tinta); font-style: normal; }

/* termo em destaque no meio do texto, como os deles */
.modal-corpo b { color: var(--accent); font-weight: 500; }
.modal-corpo .rot-uso { color: var(--accent); font-weight: 500; }
.modal-corpo .ref-livro { font-size: 12px; color: var(--tinta-tenue); margin-top: 1.2em; }

/* treinada em branco, mestre no acento — o realce por estado deles */
.linha.treinada .linha-nome { color: var(--tinta); }
.linha.mestre .linha-nome { color: var(--accent); font-weight: 500; }

/* selo hexagonal abrindo a linha, no lugar do d20 do C.R.I.S. */
.linha-marca {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--tinta-tenue);
    stroke-width: 2;
}

.linha.treinada .linha-marca { stroke: var(--tinta-fraca); }
.linha.mestre .linha-marca { fill: var(--accent); stroke: var(--accent); }

.linha-attr { flex: 0 0 26px; font-size: 11px; font-weight: 700; color: var(--tinta-tenue); }

/* cabecalho da tabela, como PERICIA / DADOS / BONUS / Treino / Outros */
.linha-cab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--tinta-tenue);
}

.linha-marca-vazia { flex: 0 0 13px; }
.linha-cab .linha-attr { flex: 0 0 26px; }
.linha-cab .linha-nome,
.linha-cab .linha-attr,
.linha-cab .linha-total { font-size: 10px; font-weight: 700; color: inherit; }
.cab-tm { flex: 0 0 24px; text-align: center; }
.cab-outros { flex: 0 0 40px; text-align: center; }
.cab-conta { flex: 0 0 auto; min-width: 38px; text-align: right; }

.tm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--tinta-tenue);
    cursor: pointer;
    user-select: none;
}

.tm input { margin: 0; cursor: pointer; accent-color: var(--accent); }

/* campo sublinhado no lugar da caixa: e o padrao de campo deles */
.micro {
    flex: 0 0 40px;
    width: 40px;
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid var(--linha-forte);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 12px;
    text-align: center;
}

.micro:focus { outline: none; border-bottom-color: var(--accent); }
select.micro { flex: 0 0 48px; width: 48px; text-align: left; }

.linha-total {
    flex: 0 0 36px;
    text-align: right;
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}

.linha .conta { flex: 0 0 auto; text-align: right; min-width: 40px; font-size: 10px; }
body.mostrar-contas .linha { flex-wrap: wrap; min-height: 40px; padding-bottom: 3px; }
body.mostrar-contas .linha .conta { flex: 1 1 100%; text-align: left; }

/* --- abas: 14px, ativa com borda de 2px no acento --- */

/* sao sete abas: o espacamento aperta para caberem numa linha, e o
   flex-wrap segura se a coluna ficar estreita demais */
.abas { display: flex; flex-wrap: wrap; gap: 2px 9px; margin-bottom: 14px; }

.aba-btn {
    /* sem folga lateral: sao sete abas e o sublinhado fica colado no
       texto, como no C.R.I.S. */
    padding: 2px 1px 5px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--tinta-fraca);
    font-family: inherit;
    font-variant: normal;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-bottom: 7px;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
}

.aba-btn:hover { color: var(--tinta); }
.aba-btn.ativa { color: var(--tinta); border-bottom-color: var(--accent); }
.aba-painel { overflow-y: auto; min-height: 0; flex: 1; }

/* --- botões --- */

.btn-topo {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 2px;
    border: 0;
    background: none;
    color: var(--chrome-dim);
    font-family: Roboto, inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .1s ease;
}

.btn-topo:hover { color: var(--gold); }
.btn-topo.ligado { border-color: var(--gold); color: var(--gold); }
.btn-topo.perigo:hover { color: var(--vermelho); }

/* Icones dos botoes: SVG na grade de 24 do Material, como no C.R.I.S.,
   desenhados em currentColor para seguir o botao nos dois temas. */
.ico {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex: 0 0 auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    height: 36px;
    border: 0;
    border-radius: 2px;
    background-color: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .1s ease, background-color .1s ease, color .1s ease;
}

/* Lido do CSS do C.R.I.S.: altura 2.25rem, raio 2px, 14px/600, em tres
   variantes - principal preenchida no acento, secundaria so com o fio,
   e a nua, que no hover troca a cor do texto e nao o fundo. */
.btn:hover { filter: brightness(90%); }

.btn.secundario {
    background-color: transparent;
    border: 1px solid var(--accent);
    color: var(--tinta-fraca);
}

.btn.secundario:hover { filter: none; background-color: var(--realce); color: var(--tinta); }
.btn[disabled] { background-color: var(--elevado); color: var(--tinta-fraca); cursor: auto; }
.btn[disabled]:hover { filter: none; }

.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 5px;
    min-height: 22px;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--tinta-fraca);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .1s ease;
}

/* nua: no hover quem muda e a cor do texto, nao o fundo */
.btn-mini:hover { color: var(--accent); }

.btn-mini .ico { width: 14px; height: 14px; }

/* remover: vermelho, sem moldura, so escurece no hover */
.btn-mini.perigo { color: var(--vermelho); font-size: 12px; }
.btn-mini.perigo:hover { color: var(--vermelho); filter: brightness(85%); }

.btn-mini:hover { color: var(--tinta); border-color: var(--accent); }
.btn-mini.perigo:hover { color: var(--vermelho); border-color: var(--vermelho); }

/* --- itens --- */

.acoes-itens { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.contagem-itens { font-size: 11px; color: var(--tinta-tenue); margin-left: auto; }

/* na coluna 3 o C.R.I.S. usa cartao preenchido - e o unico lugar da
   ficha onde ele abandona o fundo chapado. */
.item-ficha {
    background: var(--elevado);
    padding: 10px 13px 11px;
    margin-bottom: 6px;
}

/* aberto, so escurece um tom - sem fio de acento marcando o topo */
.item-ficha:has(.item-ficha-texto:not(.hidden)) { background: var(--fundo-fundo); }
.item-ficha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

.item-abrir {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    border: 0;
    background: none;
    padding: 0;
    color: var(--tinta);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.item-abrir:hover { color: var(--accent); }

.item-ficha-cat {
    font-size: 12px;
    color: var(--accent);
    white-space: nowrap;
}

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 3px 0 7px;
    border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
    color: var(--tinta-fraca);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.chip-x { display: inline-flex; align-items: center; border: 0; background: none; color: var(--tinta-tenue); cursor: pointer; line-height: 1; padding: 0 1px; }
.chip-x { color: var(--vermelho); }
.chip-x .ico { width: 12px; height: 12px; opacity: .7; }
.chip-x:hover .ico { opacity: 1; }
.chip-x:hover { color: var(--vermelho); }

.item-ficha-texto { margin-top: 6px; font-size: 13px; color: var(--tinta-fraca); }
.item-ficha-texto p { line-height: 1.5; margin: .4em 0; }
.ref-livro { color: var(--tinta-tenue); font-size: 11px; }

.form-mod { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }

.form-mod .sel-alvo {
    flex: 1 1 160px;
    padding: 1px 3px;
    border: 1px solid var(--linha-forte);
    background: var(--chao);
    color: var(--tinta);
    font-family: inherit;
    font-size: 11px;
}

/* --- catálogo, homebrew, assistente --- */

.painel { margin-bottom: 10px; padding: 10px 12px; border: 0; background: var(--elevado); }
#caixa-json { background: var(--fundo-fundo); }

#painel-catalogo input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 0 5px;
    border: 0;
    border-bottom: 1px solid var(--linha-forte);
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 13px;
}

.dica { font-size: 11px; color: var(--tinta-tenue); margin: 5px 0; }
.lista-catalogo { max-height: 250px; overflow-y: auto; }

.linha-catalogo { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.linha-catalogo > div { flex: 1; min-width: 0; }
.linha-catalogo b { font-size: 13px; font-weight: 500; color: var(--tinta); }
.cat-sub { font-size: 11px; color: var(--tinta-tenue); }
.cat-efeitos { font-size: 11px; color: var(--accent); }

.pendencias { list-style: none; padding: 0; margin: 0; }

.pendencias li {
    position: relative;
    padding: 5px 0 5px 20px;
    line-height: 1.45;
    font-size: 12px;
    color: var(--tinta-fraca);
}
.pendencias li b { color: var(--tinta); font-weight: 500; }
.pendencias li::before { position: absolute; left: 1px; top: 5px; font-weight: 700; }
.pendencias li.ok::before { content: "✓"; color: var(--verde); }
.pendencias li.falta::before { content: "•"; color: #c2760c; font-size: 17px; line-height: .65; }

.aviso-ficha {
    margin-bottom: 10px;
    padding: 7px 10px;
    border-left: 2px solid var(--gold);
    background: var(--elevado);
    font-size: 12px;
    color: var(--tinta-fraca);
}

.aviso { color: var(--tinta-tenue); font-size: 12px; margin: 6px 0; }
.espaco { flex: 1; }

textarea, .anotacoes {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--linha-forte);
    border-radius: 0;
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
}

#area-json { background: var(--fundo-fundo); font-family: Consolas, Menlo, monospace; font-size: 11px; }

input:focus, select:focus, textarea:focus, .aba-btn:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* --- telas menores --- */

@media (max-width: 1099px) {
    .body-ficha { overflow: auto; }
    .ficha-app { display: block; height: auto; padding: 12px; }
    .col { overflow: visible; display: block; padding: 0; border: 0; }
    .col-2, .col-3 { border-top: 1px solid var(--linha); padding-top: 14px; margin-top: 14px; }
    .linhas, .aba-painel, .lista-catalogo { overflow: visible; max-height: none; }
    .selo { max-width: 264px; }
}

@media (max-width: 599px) {
    .btn-topo { font-size: 11px; padding: 3px 7px; }
    .selo { max-width: 238px; }
    .no { width: 56px; height: 56px; }
    .no-mod { font-size: 18px; }
}

.nav-inner { flex-wrap: wrap; row-gap: 6px; }

/* ------------------------------------------------------------------------- */
/* Registro, perfil e treinos                                                  */
/* ------------------------------------------------------------------------- */

.grupo-marcas { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.marca, .etapa { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tinta-fraca); cursor: pointer; }
.marca input, .etapa input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.marca input:checked + span { color: var(--tinta); }

.linha-estado { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.linha-estado .cab-campo { flex: 1 1 150px; }
.linha-estado .cab-campo.curto { flex: 0 0 118px; }
.linha-estado .cab-campo > span { flex: 0 0 62px; }

.grade-rd { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; margin-bottom: 6px; }
.rd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rd > span { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--tinta-tenue); }
.rd input { width: 100%; box-sizing: border-box; padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha-forte); background: none; color: var(--tinta); font-family: inherit; font-size: 13px; text-align: center; }

.morte { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--tinta-fraca); }
.morte > span { flex: 0 0 70px; }
.pips { display: flex; gap: 6px; }
.pip { width: 15px; height: 15px; padding: 0; border: 1px solid var(--linha-forte); border-radius: 50%; background: none; cursor: pointer; }
.pip.cheio { background: var(--accent); border-color: var(--accent); }

.grade-dados { display: flex; gap: 12px; }
.dado-vida { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--tinta-fraca); }
.dado-vida input { width: 46px; padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha-forte); background: none; color: var(--tinta); font-family: inherit; font-size: 13px; text-align: center; }

/* listas com cabecalho de coluna */
.cab-lista { display: flex; gap: 6px; padding: 0 2px 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--tinta-tenue); }
.cab-lista > span:first-child { flex: 1 1 auto; }
.cab-lista > span:not(:first-child) { flex: 0 0 40px; text-align: center; }
.cab-lista.inv > span:not(:first-child) { flex: 0 0 40px; }

.linha-apt, .linha-item { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.linha-apt input:first-child, .linha-item input:first-child { flex: 1 1 auto; min-width: 0; padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha-forte); background: none; color: var(--tinta); font-family: inherit; font-size: 13px; }
.linha-apt input:focus, .linha-item input:focus { outline: none; border-bottom-color: var(--accent); }

.grade-feiticos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.coluna-feitico h4 { margin: 0 0 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--tinta-fraca); }
.coluna-feitico textarea, .bloco-texto textarea, .voto textarea {
    width: 100%; box-sizing: border-box; padding: 6px 8px; border: 0;
    border-left: 2px solid var(--linha-forte); background: rgba(255, 255, 255, .04);
    color: var(--tinta); font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical;
}
:root[data-tema="dia"] .coluna-feitico textarea,
:root[data-tema="dia"] .bloco-texto textarea,
:root[data-tema="dia"] .voto textarea { background: rgba(0, 0, 0, .04); }
.coluna-feitico textarea:focus, .bloco-texto textarea:focus, .voto textarea:focus { outline: none; border-left-color: var(--accent); }

.bloco-texto { margin-bottom: 12px; }
.bloco-texto h4 { margin: 0 0 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--tinta-fraca); }

.voto { margin-bottom: 12px; }
.voto-nome { flex: 1 1 auto; padding: 1px 0 3px; border: 0; border-bottom: 1px solid var(--linha-forte); background: none; color: var(--tinta); font-family: inherit; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.voto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.voto textarea { flex: 1 1 100%; }

/* trilhas de treinamento */
.trilha { padding: 10px 0 11px; border-bottom: 1px solid var(--linha); }
.trilha:last-child { border-bottom: 0; }
.trilha-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trilha-nome { font-size: 14px; font-weight: 500; color: var(--tinta); }
.trilha.completa .trilha-nome { color: var(--verde); }
.trilha-instrutor { flex: 1 1 110px; min-width: 0; padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha); background: none; color: var(--tinta-fraca); font-family: inherit; font-size: 12px; }
.trilha-etapas { display: flex; gap: 8px; margin-left: auto; }
.trilha-premio { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--tinta-fraca); }
.trilha.completa .trilha-premio { color: var(--tinta); }

/* retrato */
.retrato { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.retrato img { width: 132px; height: 132px; object-fit: cover; border: 1px solid var(--linha-forte); }
.retrato-vazio { width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--linha-forte); font-size: 11px; color: var(--tinta-tenue); }
.retrato-acoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.retrato-acoes .btn { cursor: pointer; }
.cab-campo.limite { margin-top: 10px; }
.cab-campo.limite > span { flex: 0 0 130px; }

/* feitiços, no molde da aba Rituais do C.R.I.S. */
.feitico-barra { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.feitico-barra input[type="search"] {
    flex: 1 1 auto; min-width: 0; padding: 3px 0 5px; border: 0;
    border-bottom: 1px solid var(--linha-forte); background: none;
    color: var(--tinta); font-family: inherit; font-size: 14px;
}
.feitico-barra input[type="search"]:focus { outline: none; border-bottom-color: var(--accent); }
.feitico-cd { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.feitico-cd span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--tinta-fraca); }
.feitico-cd b { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 30px; border: 1px solid var(--linha-forte); font-size: 15px; font-weight: 400; color: var(--tinta); }

.feitico-grupo { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--tinta-fraca); }
.feitico-grupo span { font-weight: 400; color: var(--tinta-tenue); }
.feitico-grupo:first-child { margin-top: 0; }

.feitico { background: var(--elevado); margin-bottom: 6px; }
.feitico.aberto { border-top: 2px solid var(--accent); }
.feitico-topo { display: flex; align-items: center; gap: 8px; padding: 8px 12px 9px; }

.feitico-seta { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.feitico-seta svg { width: 20px; height: 20px; fill: var(--accent); transition: transform .12s ease; }
.feitico.aberto .feitico-seta svg { transform: rotate(180deg); }

.feitico-nome { flex: 1 1 auto; min-width: 0; padding: 1px 0 2px; border: 0; background: none; color: var(--tinta); font-family: inherit; font-size: 14px; font-weight: 700; }
.feitico-nome:focus { outline: none; border-bottom: 1px solid var(--accent); }

.feitico-corpo { padding: 2px 12px 13px 44px; }
.feitico-nivel { display: inline-block; padding: 2px 9px; margin-bottom: 10px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; }
.feitico-sel { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--tinta-fraca); }
.feitico-sel select { padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha-forte); background: none; color: var(--tinta); font-family: inherit; font-size: 13px; cursor: pointer; }
.feitico-campo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.feitico-campo > span { flex: 0 0 74px; font-size: 13px; color: var(--accent); }
.feitico-campo input { flex: 1 1 auto; min-width: 0; padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha); background: none; color: var(--tinta); font-family: inherit; font-size: 13px; }
.feitico-campo input:focus { outline: none; border-bottom-color: var(--accent); }
.feitico-corpo textarea { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 7px 9px; border: 0; border-left: 2px solid var(--linha-forte); background: rgba(255,255,255,.04); color: var(--tinta-fraca); font-family: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
:root[data-tema="dia"] .feitico-corpo textarea { background: rgba(0,0,0,.04); }
.feitico-corpo textarea:focus { outline: none; border-left-color: var(--accent); }

/* o que a trilha concede */
.trilha-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; }
.trilha-efeito {
    display: inline-flex; align-items: center; padding: 1px 7px;
    border: 1px solid var(--linha-forte); border-radius: 2px;
    font-size: 11px; font-variant-numeric: tabular-nums; color: var(--tinta-tenue);
}
.trilha-efeito.ativo { border-color: var(--verde); color: var(--verde); }
.trilha-escolha {
    padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha-forte);
    background: none; color: var(--tinta); font-family: inherit; font-size: 12px; cursor: pointer;
}
.trilha-escolha:focus { outline: none; border-bottom-color: var(--accent); }
.trilha-manual { margin-left: auto; font-size: 11px; font-style: italic; color: var(--tinta-tenue); }

/* ------------------------------------------------------------------------- */
/* Aba Itens                                                                   */
/* ------------------------------------------------------------------------- */

.cab-arma, .linha-arma { display: grid; grid-template-columns: 20px 1.6fr .6fr .9fr .5fr .8fr .8fr 1.6fr 24px; gap: 5px; align-items: center; }
.cab-arma { padding: 0 2px 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--tinta-tenue); }
.linha-arma { min-height: 30px; }
.campo-arma { min-width: 0; padding: 1px 0 2px; border: 0; border-bottom: 1px solid var(--linha); background: none; color: var(--tinta); font-family: inherit; font-size: 12px; }
.campo-arma.largo { font-size: 13px; }
.campo-arma:focus { outline: none; border-bottom-color: var(--accent); }

.linha-defesa { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.linha-defesa .campo-arma.largo { flex: 1 1 auto; }
.def-campo { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; }
.def-campo > span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--tinta-tenue); }

.item-barra { margin-bottom: 9px; }
.item-barra input[type="search"] { width: 100%; box-sizing: border-box; padding: 3px 0 5px; border: 0; border-bottom: 1px solid var(--linha-forte); background: none; color: var(--tinta); font-family: inherit; font-size: 14px; }
.item-barra input[type="search"]:focus { outline: none; border-bottom-color: var(--accent); }

.item-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cat-chip { padding: 2px 9px; border: 1px solid var(--linha-forte); border-radius: 2px; background: none; color: var(--tinta-fraca); font-family: inherit; font-size: 11px; cursor: pointer; transition: color .1s ease, border-color .1s ease; }
.cat-chip:hover { color: var(--tinta); }
.cat-chip.ativa { border-color: var(--accent); color: var(--accent); }

.grade-itens-livro { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 6px; }
.item-livro { background: var(--elevado); padding: 9px 11px 10px; }
.item-livro-topo { display: flex; align-items: center; gap: 7px; }
.item-livro-topo b { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--tinta); }
.item-livro-cat { font-size: 10px; color: var(--accent); white-space: nowrap; }
.item-livro-num { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; font-size: 11px; color: var(--tinta-tenue); }
.item-livro-num b { color: var(--tinta); font-weight: 500; font-variant-numeric: tabular-nums; }
.item-livro-prop { margin-top: 5px; font-size: 11px; line-height: 1.45; color: var(--tinta-fraca); }

/* propriedades da arma, abertas dentro do próprio cartão */
.props { margin: .4em 0 0; }
.props summary { cursor: pointer; color: var(--accent); font-size: .92em; list-style: none; }
.props summary::-webkit-details-marker { display: none; }
.props summary::before { content: "▸ "; display: inline-block; transition: transform .12s ease; }
.props[open] summary::before { content: "▾ "; }
.props summary:hover { text-decoration: underline; }
.props ul { margin: .45em 0 0; padding-left: 1.1em; }
.props li { margin: .25em 0; line-height: 1.45; }

/* ------------------------------------------------------------------------- */
/* Importar planilha                                                           */
/* ------------------------------------------------------------------------- */

.imp-abas { display: flex; gap: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--linha); }
.imp-aba { padding: 2px 1px 7px; border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--tinta-fraca); font-family: inherit; font-size: 12px; text-transform: uppercase;
    letter-spacing: .6px; cursor: pointer; margin-bottom: -1px; }
.imp-aba:hover { color: var(--tinta); }
.imp-aba.ativa { color: var(--tinta); border-bottom-color: var(--accent); }

.imp-ajuda { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--tinta-fraca); }
.imp-ajuda b { color: var(--tinta); font-weight: 500; }

.imp-area { display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 26px 16px; border: 1px dashed var(--linha-forte); border-radius: 2px;
    color: var(--tinta-fraca); font-size: 13px; cursor: pointer; text-align: center;
    transition: border-color .12s ease, background-color .12s ease; }
.imp-area:hover { border-color: var(--accent); }
.imp-area.sobre { border-color: var(--accent); background: var(--realce); color: var(--tinta); }
.imp-area b { color: var(--tinta); font-weight: 500; }
.imp-icone .ico { width: 20px; height: 20px; }

.imp-lendo { margin: 14px 0 0; font-size: 13px; color: var(--tinta-fraca); }
.imp-erro { margin: 14px 0 0; padding: 10px 12px; border-left: 2px solid var(--vermelho);
    background: var(--realce); font-size: 13px; line-height: 1.5; color: var(--tinta-fraca); }
.imp-erro b { color: var(--tinta); }

.imp-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px; margin: 16px 0 4px; }
.imp-resumo > div { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px;
    border: 1px solid var(--linha); }
.imp-resumo span { font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--tinta-tenue); }
.imp-resumo b { font-size: 15px; font-weight: 500; color: var(--tinta); }

.imp-bloco { margin-top: 14px; padding-left: 10px; border-left: 2px solid var(--linha-forte); }
.imp-bloco.ok { border-left-color: var(--verde); }
.imp-bloco.hb { border-left-color: var(--accent); }
.imp-bloco.dedu { border-left-color: var(--accent); }
.imp-bloco.aviso { border-left-color: #c2760c; }
.imp-bloco h4 { display: flex; align-items: baseline; gap: 7px; margin: 0 0 5px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px;
    color: var(--tinta-fraca); }
.imp-bloco h4 span { font-weight: 400; color: var(--tinta-tenue); }
.imp-bloco ul { margin: 0; padding-left: 16px; }
.imp-bloco li { font-size: 12px; line-height: 1.5; color: var(--tinta-fraca); }

.imp-acoes { display: flex; gap: 8px; margin-top: 18px; }

/* ------------------------------------------------------------------------- */
/* Acabamento da ficha                                                         */
/*                                                                             */
/* Mesma linguagem do C.R.I.S. — plana, régua de 1px, sem cartão — levada às   */
/* abas que eu tinha montado cruas. Três coisas: o título de seção vira um     */
/* divisor de verdade, os campos curtos passam a usar a largura em duas        */
/* colunas, e tudo que é clicável passa a parecer clicável.                    */
/* ------------------------------------------------------------------------- */

/* --- o título de seção ganha o fio nas laterais, virando divisor --- */
.cartao h2::before { border-top: 1px solid var(--linha); align-self: center; height: 0; }
.cartao h2:not(:has(.h2-nota))::after {
    content: "";
    border-top: 1px solid var(--linha);
    align-self: center;
    height: 0;
}

/* --- campos curtos em duas colunas: a coluna 3 é larga e estava sobrando --- */
.campos-duplos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2px 20px;
    margin-bottom: 4px;
}

.campos-duplos .cab-campo > span { flex: 0 0 68px; }

/* --- retrato maior, com alvo de soltar --- */
.retrato { gap: 16px; align-items: stretch; }
.retrato img, .retrato-vazio { width: 160px; height: 160px; }
.retrato-vazio {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 10px;
    line-height: 1.4;
    transition: border-color .12s ease, background-color .12s ease;
}
.retrato-vazio.sobre, .retrato-vazio:hover { border-color: var(--accent); background: var(--realce); }
.retrato-acoes { justify-content: center; }

/* --- o que é clicável parece clicável --- */
.linha-nome-btn, .item-abrir, .feitico-nome, .aba-btn, .cat-chip,
.btn, .btn-mini, .passo, .rec-bt, .trilha-escolha { transition: color .1s ease, background-color .1s ease; }

.item-ficha { transition: background-color .12s ease; }
.item-ficha:hover { background: color-mix(in oklab, var(--elevado) 70%, var(--tinta) 6%); }
.feitico:hover { background: color-mix(in oklab, var(--elevado) 70%, var(--tinta) 6%); }
.item-livro { transition: background-color .12s ease, box-shadow .12s ease; }
.item-livro:hover { background: color-mix(in oklab, var(--elevado) 70%, var(--tinta) 6%); }

/* --- foco visível de verdade, em tudo que recebe teclado --- */
.ficha-app input:focus-visible,
.ficha-app select:focus-visible,
.ficha-app textarea:focus-visible,
.ficha-cabecalho input:focus-visible,
.ficha-cabecalho select:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent) 70%, transparent);
    outline-offset: 1px;
}

.ficha-app button:focus-visible, .ficha-cabecalho button:focus-visible,
.tela-mesa button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- vazio deixa de ser um parágrafo solto --- */
.aviso {
    margin: 10px 0;
    padding: 14px 12px;
    border: 1px dashed var(--linha);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--tinta-tenue);
}

/* --- a linha de perícia responde ao cursor sem piscar --- */
.linha { transition: background-color .1s ease; }

/* --- rolagem da coluna some até você chegar perto --- */
.col::-webkit-scrollbar-thumb { background: transparent; transition: background-color .15s ease; }
.col:hover::-webkit-scrollbar-thumb { background: var(--linha-forte); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* campo de texto longo ocupa a linha inteira da grade */
.campos-duplos .cab-campo.amplo { grid-column: 1 / -1; }

/* ------------------------------------------------------------------------- */
/* Segunda demão: Perfil e Treinos                                            */
/* ------------------------------------------------------------------------- */

/* o cabeçalho da lista precisa reservar a coluna do botão de remover,
   senão "Atual / Máx. / Custo" ficam deslocados dos campos. */
.cab-lista > span.acao { flex: 0 0 24px; }

/* --- treinos: placar no topo da aba --- */
.trilha-placar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 10px;
    font-size: 12px;
    color: var(--tinta-fraca);
}

.trilha-placar b { color: var(--tinta); font-size: 15px; font-weight: 500; }

.trilha-barra {
    flex: 1 1 auto;
    height: 4px;
    background: var(--linha);
    overflow: hidden;
}

.trilha-barra::before {
    content: "";
    display: block;
    width: var(--feito, 0%);
    height: 100%;
    background: var(--verde);
    transition: width .2s ease;
}

/* --- treinos: cada trilha --- */
.trilha {
    padding-left: 10px;
    border-left: 2px solid transparent;
    transition: border-color .1s ease, background-color .1s ease;
}

.trilha.andando { border-left-color: var(--linha-forte); }
.trilha.completa { border-left-color: var(--verde); }

.trilha-conta {
    flex: 0 0 auto;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--tinta-tenue);
    border: 1px solid var(--linha);
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
}

.trilha.andando .trilha-conta { color: var(--tinta-fraca); border-color: var(--linha-forte); }
.trilha.completa .trilha-conta { color: var(--verde); border-color: var(--verde); }

/* contador dentro da pastilha de filtro */
.chip-n {
    display: inline-block;
    margin-left: 3px;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

/* --- retrato: sem imagem, a área de soltar ocupa a largura toda --- */
.retrato.vazia { display: block; }

.retrato.vazia .retrato-vazio {
    width: auto;
    height: 112px;
    flex-direction: row;
    gap: 10px;
    font-size: 12px;
    color: var(--tinta-fraca);
    cursor: pointer;
    transition: border-color .1s ease, background-color .1s ease;
}

.retrato.vazia .retrato-vazio:hover { border-color: var(--accent); }
.retrato-ico { display: inline-flex; color: var(--tinta-tenue); }
.retrato-vazio b { font-weight: 500; color: var(--tinta); }

/* ------------------------------------------------------------------------- */
/* Bandeja de rolagens                                                        */
/* Fica no canto, por cima de tudo; fechada é só uma bolha com o d20.         */
/* ------------------------------------------------------------------------- */

.bandeja {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    --accent: #22d3ee;
}

/* --- bolha fechada --- */
.bandeja-bolha {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--linha-forte);
    border-radius: 2px;
    background: var(--elevado);
    color: var(--tinta-fraca);
    cursor: pointer;
    transition: color .1s ease, border-color .1s ease;
}

.bandeja-bolha:hover { color: var(--tinta); border-color: var(--accent); }
.bandeja-bolha .ico { width: 22px; height: 22px; }

.bandeja-n {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* --- painel aberto --- */
.bandeja.aberta {
    width: 304px;
    max-width: calc(100vw - 32px);
    max-height: 62vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linha-forte);
    border-top: 2px solid var(--accent);
    border-radius: 2px;
    background: var(--elevado);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

:root[data-tema="dia"] .bandeja.aberta { box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }

.bandeja-topo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--linha);
}

.bandeja-topo h3 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tinta-fraca);
}

.bandeja-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 10px 10px;
}

.bandeja-lista .aviso { margin: 6px 0 2px; }

/* --- cada rolagem --- */
.rol {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--linha);
}

.rol:last-child { border-bottom: 0; }

.rol-total {
    flex: 0 0 44px;
    text-align: center;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.rol.critico .rol-total { color: var(--verde); }
.rol.desastre .rol-total { color: var(--vermelho); }

.rol-corpo { flex: 1 1 auto; min-width: 0; }

.rol-nome {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--tinta);
}

.rol-selo {
    flex: 0 0 auto;
    padding: 0 4px;
    border: 1px solid var(--verde);
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--verde);
}

.rol-selo.ruim { border-color: var(--vermelho); color: var(--vermelho); }

.rol-detalhe {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--tinta-tenue);
    font-variant-numeric: tabular-nums;
}

.rol-hora { margin-left: auto; flex: 0 0 auto; }

.rol-acoes { display: flex; gap: 4px; margin-top: 5px; }
.rol-acoes .btn-mini { padding: 0 4px; min-height: 18px; font-size: 11px; }

/* a rolagem nova entra piscando uma vez, para o olho achar onde caiu */
.rol.nova { animation: rol-entra .28s ease; }

@keyframes rol-entra {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: none; }
}

/* --- o bônus da linha vira o gatilho da rolagem --- */
.linha-rolar {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    transition: color .1s ease;
}

.linha-rolar:hover { color: var(--accent); }

/* dado na linha da arma: cabe na coluna de 20px aberta para ele */
.bt-dado { padding: 0; width: 20px; min-height: 20px; color: var(--tinta-tenue); }
.bt-dado:hover { color: var(--accent); }
.bt-dado .ico { width: 15px; height: 15px; }

@media (max-width: 760px) {
    .bandeja { right: 10px; bottom: 10px; }
}

/* dica de rolagem no pé da coluna de perícias */
.dica-rolar { margin-top: 2px; }
.dica-rolar b { color: var(--tinta-fraca); font-weight: 500; }

kbd {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid var(--linha-forte);
    border-radius: 2px;
    background: var(--realce);
    font-family: inherit;
    font-size: 10px;
    line-height: 15px;
    color: var(--tinta-fraca);
}

/* --- Notas: o campo ocupa a altura da coluna, em vez de 18 linhas fixas --- */
.aba-painel[data-painel="notas"] { display: flex; }
.aba-painel[data-painel="notas"].hidden { display: none; }

.aba-painel[data-painel="notas"] .anotacoes {
    flex: 1 1 auto;
    min-height: 320px;
    resize: none;
}

/* --- lançar feitiço: o custo vira o botão que desconta a energia --- */
.feitico-usar {
    flex: 0 0 auto;
    padding: 0 6px;
    min-height: 20px;
    border: 1px solid var(--linha-forte);
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tinta-fraca);
    font-variant-numeric: tabular-nums;
}

.feitico-usar::after { content: " PE"; font-size: 9px; letter-spacing: .5px; opacity: .65; }
.feitico-usar:hover { color: var(--tinta); border-color: var(--accent); }

/* sem energia o botão recusa à vista, em vez de não fazer nada em silêncio */
.feitico-usar.sem-energia {
    color: var(--vermelho);
    border-color: var(--vermelho);
    animation: nega .25s ease 2;
}

@keyframes nega {
    0%, 100% { transform: none; }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.rol.gasto .rol-total { color: var(--tinta-fraca); font-size: 19px; }

/* ---------------------------------------------------- aviso de gravação --- */
.salvo {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 60;
    max-width: 320px;
    padding: 5px 10px;
    border: 1px solid var(--linha);
    border-radius: 2px;
    background: var(--elevado);
    font-size: 11px;
    letter-spacing: .4px;
    color: var(--tinta-tenue);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.salvo.visivel { opacity: 1; transform: none; }

.salvo.ruim {
    max-width: 360px;
    padding: 9px 12px;
    border-color: var(--vermelho);
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--vermelho);
}

@media (max-width: 760px) { .salvo { left: 10px; bottom: 10px; max-width: 60vw; } }

/* a ficha aberta agora fica marcada entre as outras da mesa */
.mesa-vaga.atual { border-color: var(--accent); }
.mesa-vaga.atual .mesa-vaga-nome { color: var(--accent); }

/* --- faixa de primeiros passos, só enquanto a ficha está crua --- */
.passos {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 2px solid var(--accent);
    background: var(--realce);
    font-size: 12px;
    color: var(--tinta-fraca);
}

.passos > b { color: var(--tinta); font-weight: 500; }
.passos span b { color: var(--tinta); font-weight: 500; }

/* ------------------------------------------------------------------------- */
/* Trilhas de treinamento, etapa por etapa                                    */
/* Cada etapa vale por si; o Bônus de Treinamento Completo vem por cima.      */
/* ------------------------------------------------------------------------- */

.trilha { padding: 12px 0 13px 10px; }

.trilha-selo {
    flex: 0 0 auto;
    padding: 0 4px;
    border: 1px solid var(--linha);
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tinta-tenue);
}

.trilha-etapas-lista { list-style: none; margin: 8px 0 0; padding: 0; }

.etapa-linha {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
}

.etapa-linha + .etapa-linha { border-top: 1px solid var(--linha); }

/* a caixa e o número da etapa andam juntos e não se separam */
.etapa-caixa {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-top: 1px;
    font-size: 10px;
    font-weight: 700;
    color: var(--tinta-tenue);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.etapa-caixa input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.etapa-linha.feita .etapa-caixa { color: var(--verde); }

.etapa-corpo { flex: 1 1 auto; min-width: 0; }

.etapa-texto {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tinta-tenue);
}

.etapa-linha.feita .etapa-texto { color: var(--tinta); }

/* pré-requisito e custo em focos, antes do texto da etapa */
.etapa-exige, .etapa-focos {
    display: inline-block;
    margin-right: 6px;
    padding: 0 4px;
    border: 1px solid var(--linha);
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tinta-tenue);
    vertical-align: 1px;
}

.etapa-focos { border-color: var(--linha-forte); }

.etapa-selos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    margin-top: 5px;
}

/* --- o bônus de linha completa --- */
.trilha-completo {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 2px solid var(--linha);
    background: var(--realce);
}

.trilha-completo.ativo { border-left-color: var(--verde); }

.trilha-completo-rot {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tinta-tenue);
}

.trilha-completo.ativo .trilha-completo-rot { color: var(--verde); }
.trilha-completo.ativo .etapa-texto { color: var(--tinta); }

.trilha-escolha-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.trilha-manual { margin-left: 0; }

/* ------------------------------------------------------------------------- */
/* A ficha rola como UMA página                                               */
/*                                                                            */
/* Estava com três áreas de rolagem independentes (uma por coluna), cada uma   */
/* com a sua barra e a sua posição perdida. Medindo a ficha do C.R.I.S.: lá    */
/* nenhuma coluna rola por dentro — a página inteira rola de uma vez, e as     */
/* colunas têm a altura natural do conteúdo. É o que fazemos aqui.            */
/* ------------------------------------------------------------------------- */

body.body-ficha {
    overflow: visible;
    height: auto;
    min-height: 100vh;
}

.ficha-app {
    flex: 0 0 auto;
    min-height: 0;
    align-items: start;      /* colunas param onde o conteúdo acaba */
}

.col {
    overflow: visible;
    min-height: 0;
}

/* nada mais segura rolagem própria dentro da ficha */
.col-2 .cartao.alto,
.col-3 .cartao.alto { display: block; flex: none; min-height: 0; }

.linhas { overflow: visible; }
.aba-painel { overflow: visible; flex: none; }

/* A faixa de identidade e a tira de abas só grudam no layout de três
   colunas. Empilhado, a identidade ocupa seis linhas e grudada cobriria
   metade da tela — ali ela rola junto com o resto. */
/* Só a tira de abas gruda, e só no layout de três colunas: é por ela que se
   navega a coluna 3, e sem isso você rola até o fim das habilidades e tem de
   voltar ao topo para trocar de aba. A faixa de identidade não gruda — ela
   tem 119px e empurraria tudo para baixo sem dar nada em troca. */
@media (min-width: 1100px) {
    .abas {
        position: sticky;
        top: 42px;
        z-index: 20;
        background: var(--chao);
        padding-top: 10px;
        padding-bottom: 2px;
        margin-bottom: 10px;
    }
}

/* o campo de notas volta a ter altura própria, já que a coluna não estica */
.aba-painel[data-painel="notas"] .anotacoes { min-height: 420px; }

/* ------------------------------------------------------------------------- */
/* O dado abre cada linha, como na ficha do C.R.I.S.                          */
/* ------------------------------------------------------------------------- */

.linha-dado {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--tinta-tenue);
    cursor: pointer;
    transition: color .1s ease, background-color .1s ease;
}

.linha-dado .ico { width: 15px; height: 15px; }
.linha-dado:hover { color: var(--accent); background: var(--realce); }
.linha:hover .linha-dado { color: var(--tinta-fraca); }
.linha:hover .linha-dado:hover { color: var(--accent); }

.linha-marca-vazia { flex: 0 0 20px; }

/* --- treinada e mestre ganham cor na barra, não só no nome ---
   O C.R.I.S. colore a linha inteira pelo grau de treino (branco → verde →
   azul), e é isso que deixa 20 perícias legíveis de relance. */
.linha { border-left: 2px solid transparent; padding-left: 4px; }
.linha.treinada { border-left-color: var(--verde); }
.linha.mestre { border-left-color: var(--accent); }
.linha.treinada .linha-dado { color: var(--verde); }
.linha.mestre .linha-dado { color: var(--accent); }
.linha-cab { padding-left: 6px; }

/* rolagem solta na bandeja, como o campo "Rolar dados" da aba Combate deles */
.bandeja-livre {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--linha);
}

.bandeja-livre input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid var(--linha-forte);
    border-radius: 2px;
    background: none;
    color: var(--tinta);
    font-family: inherit;
    font-size: 12px;
}

.bandeja-livre input:focus { outline: none; border-color: var(--accent); }
.bandeja-livre input.sem-energia { border-color: var(--vermelho); color: var(--vermelho); }
.bandeja-livre .btn-mini { flex: 0 0 auto; padding: 0 5px; min-height: 24px; }
.bandeja-livre .ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------------------- */
/* Trava o fundo enquanto há uma tela por cima                                */
/*                                                                            */
/* Enquanto a ficha tinha overflow:hidden no body isto vinha de graça — a     */
/* página nunca rolava. Passando a rolar como uma só, abrir a Mesa ou um      */
/* pop-up deixava o fundo rolar atrás; a classe "na-mesa" já era posta pelo   */
/* JS e não tinha regra nenhuma. */
/* ------------------------------------------------------------------------- */

body.na-mesa,
body.com-modal { overflow: hidden; }

/* ------------------------------------------------------------------------- */
/* Quadro da mesa no molde da aba Campanhas do C.R.I.S.                       */
/* Capa em cima, dados embaixo, uma ação primária por cartão.                 */
/* ------------------------------------------------------------------------- */

.mesa-grade { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }

.mesa-vaga {
    gap: 0;
    padding: 0;
    overflow: hidden;
    transition: border-color .12s ease, transform .12s ease;
}

.mesa-vaga.ocupada:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
.mesa-vaga.atual { border-color: var(--accent); }

/* --- a capa --- */
.mesa-capa {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--fundo-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mesa-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mesa-capa-vazia {
    font-family: Lora, Georgia, serif;
    font-size: 38px;
    font-weight: 700;
    color: var(--linha-forte);
    user-select: none;
}

.mesa-cadeado,
.mesa-selo-atual {
    position: absolute;
    top: 6px;
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    background: rgba(0, 0, 0, .62);
}

.mesa-cadeado { right: 6px; padding: 3px; color: rgba(255, 255, 255, .85); }
.mesa-cadeado .ico { width: 13px; height: 13px; }

.mesa-selo-atual {
    left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--accent);
}

/* --- o corpo --- */
.mesa-vaga-corpo { padding: 9px 11px 0; }
.mesa-vaga-nome { font-size: 14px; font-weight: 700; line-height: 1.25; }
.mesa-vaga-sub { margin-top: 2px; font-size: 11px; line-height: 1.4; }
.mesa-vaga-jogador { margin-top: 3px; font-size: 11px; }

.mesa-vaga-acoes {
    gap: 6px;
    margin-top: auto;
    padding: 9px 11px 10px;
}

.mesa-vaga-acoes .btn { flex: 1 1 auto; justify-content: center; }
.mesa-vaga-acoes .btn-mini { flex: 0 0 auto; }

/* vaga livre continua tracejada, agora na mesma proporção dos outros */
.mesa-vaga.vazia { min-height: 200px; padding: 14px; }

/* ------------------------------------------------------------------------- */
/* Paleta: a disciplina do C.R.I.S., em ciano e azul escuro                   */
/*                                                                            */
/* Medido na ficha deles: UM acento (#A347FF) em tudo — botão, borda, realce  */
/* — e cor só para estado (vermelho, verde) e para as barras de recurso. A    */
/* nossa espalhava sete tons, um por seção, e é isso que fazia ela parecer    */
/* remendada do lado da deles. Aqui vira um acento só, no ciano pedido.       */
/*                                                                            */
/* Dois tokens porque um não serve para as duas funções: o ciano claro brilha */
/* em borda e texto sobre o preto, mas não aguenta texto branco em cima; o    */
/* azul escuro aguenta, e é o fundo dos botões.                               */
/* ------------------------------------------------------------------------- */

.body-ficha {
    --accent: #22d3ee;        /* ciano: bordas, realces, texto de acento */
    --accent-cheio: #0e7490;  /* azul escuro: fundo de botão, texto branco por cima */
}

:root[data-tema="dia"] .body-ficha {
    --accent: #0e7490;        /* no claro o ciano some; o azul escuro serve aos dois */
    --accent-cheio: #0e7490;
}

/* um acento só: as seções deixam de ter o próprio tom */
.ficha-app,
#sec-identidade, #sec-atributos, #sec-recursos, #sec-valores,
#sec-aptidoes, #sec-pericias, #sec-abas, #sec-marcas {
    --accent: inherit;
}

.body-ficha .ficha-app { --accent: #22d3ee; }
:root[data-tema="dia"] .body-ficha .ficha-app { --accent: #0e7490; }

/* botão cheio usa o azul escuro, para o branco em cima continuar legível */
.ficha-app .btn:not(.secundario),
.ficha-cabecalho .btn:not(.secundario),
.tela-mesa .btn:not(.secundario) { background-color: var(--accent-cheio); }

/* as três barras: vida em vermelho, e as duas de energia no azul pedido */
#sec-recursos .rec:nth-of-type(1) { --accent: #b22222; }  /* Pontos de Vida */
#sec-recursos .rec:nth-of-type(2) { --accent: #0e7490; }  /* Pontos de PE   */
#sec-recursos .rec:nth-of-type(3) { --accent: #1e3a8a; }  /* Integridade    */

/* a tira de abas na medida deles: 14px, sem caixa alta */
.aba-btn { font-size: 14px; letter-spacing: normal; text-transform: none; }

/* ------------------------------------------------------------------------- */
/* Terceira demão: a escala do C.R.I.S.                                       */
/*                                                                            */
/* Medido na ficha deles: 14px para corpo e rótulo, 11px para apoio, 10px no  */
/* menor caso — e nada abaixo disso. A nossa tinha SETE tamanhos (9 a 15) e   */
/* descia a 9px nas pastilhas, que é menor do que eles usam em qualquer       */
/* lugar. Aqui o piso sobe para 10 e a escala encolhe.                        */
/* ------------------------------------------------------------------------- */

/* nada abaixo de 10px: as pastilhas de etapa, selo e grupo subiram de 9 */
.etapa-exige,
.etapa-focos,
.trilha-completo-rot,
.trilha-selo,
.mesa-selo-atual,
.rol-selo,
.feitico-usar::after,
.no-nome { font-size: 10px; }

/* alvos clicáveis não ficam no menor tamanho da escala */
.cat-chip { font-size: 12px; }

/* --- barras de recurso na proporção deles (62px, não 84) --- */
.rec-rot { margin-bottom: 3px; }
.rec-caixa { height: 34px; }
.rec-pe { margin-top: 1px; }

/* o resto dos 9px: cabeçalhos de coluna, rótulos de caixa e o miolo do selo */
.cab-caixa > span,
.no-nome,
.centro-rot,
.centro-sub,
.rd > span,
.cab-lista,
.cab-arma,
.def-campo > span,
.imp-resumo span { font-size: 10px; }

/* ========================================================================= */
/* As páginas de referência na linguagem do C.R.I.S.                         */
/*                                                                           */
/* Até aqui elas seguiam a Referência Rápida de D&D 5e: moldura colorida de  */
/* 8px por seção, um tom por tema, títulos em Lora versalete, fundo com      */
/* brilho roxo. A ficha já falava a língua do C.R.I.S., e o site inteiro     */
/* passa a falar: Roboto, chão #121212, painel #1f1f1f, fio de 1px a 10% de  */
/* branco, raio de 2px e UM acento — o mesmo ciano.                          */
/*                                                                           */
/* Está tudo num bloco só, de propósito: para sair inteiro se não agradar.   */
/* ========================================================================= */

/* --- tokens: a paleta deles no lugar da anterior --- */
:root {
    --page-bg: #0a0a0a;
    --glow-1: transparent;
    --glow-2: transparent;
    --surface: #fff;
    --surface-alt: #f2f1ef;
    --ink: #16151a;
    --ink-soft: rgba(0, 0, 0, .58);
    --rule: rgba(0, 0, 0, .11);
    --th-bg: #f2f1ef;
    --card-shadow: none;

    --chrome-bg: #121212;
    --chrome-line: rgba(255, 255, 255, .1);
    --chrome-ink: #fff;
    --chrome-dim: rgba(255, 255, 255, .6);
    --chrome-hover: #1f1f1f;
    --field-bg: #1f1f1f;
    --gold: #22d3ee;
}

:root[data-tema="noite"] {
    --page-bg: #0a0a0a;
    --glow-1: transparent;
    --glow-2: transparent;
    --surface: #121212;
    --surface-alt: #1f1f1f;
    --ink: #fff;
    --ink-soft: rgba(255, 255, 255, .6);
    --rule: rgba(255, 255, 255, .1);
    --th-bg: #1f1f1f;
    --card-shadow: none;

    --chrome-bg: #121212;
    --chrome-line: rgba(255, 255, 255, .1);
    --chrome-hover: #1f1f1f;
    --field-bg: #1f1f1f;
}

/* --- as cores por seção ficam: elas distinguem Combate de Itens de
       Origens, e isso vale mais que a uniformidade. O que muda é ONDE a cor
       aparece: no formato liso não há moldura de 8px, então ela vira fio
       lateral e cor do rótulo. --- */
/* --- a moldura de 8px vira painel liso com fio de 1px --- */
.section-container {
    border: 1px solid var(--rule);
    border-radius: 2px;
    background-color: var(--surface);
    box-shadow: none;
    margin-bottom: 14px;
}

/* o título deixa de ser barra colorida e vira rótulo, como as seções deles */
.section-title {
    min-height: 0;
    padding: 10px 12px 8px;
    font-family: Roboto, 'Noto Sans', Arial, sans-serif;
    font-variant: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--ink-soft);
    background-color: transparent;
    border-bottom: 1px solid var(--rule);
}

.section-title .float-right {
    font-weight: 400;
    letter-spacing: .4px;
    text-transform: none;
    color: var(--ink-soft);
    opacity: .75;
}

.section-content {
    padding: 10px 12px 2px;
    border-radius: 0;
    background-color: transparent;
}

/* --- título da página e corpo em Roboto --- */
.main-title {
    font-family: Roboto, 'Noto Sans', Arial, sans-serif;
    font-variant: normal;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: .5px;
    color: var(--ink);
    text-shadow: none;
}

.page-background,
.section-container,
.description,
#sidebar,
#nav { font-family: Roboto, 'Noto Sans', Arial, sans-serif; }

/* o fundo perde o brilho roxo: o deles é chapado */
.page-background { background-image: none; background-color: var(--page-bg); }

/* --- tema claro: a página também clareia --- */
/* O desenho antigo mantinha o fundo escuro com cartões claros nos dois
   temas. No C.R.I.S. o dia é claro de verdade; só o topo segue escuro. */
:root { --page-bg: #e7e5e2; }
:root[data-tema="noite"] { --page-bg: #0a0a0a; }

/* texto que fica FORA dos painéis segue a tinta da página, não a do topo */
.description,
.main-title { color: var(--ink); }

.description a { color: var(--gold); }

/* o rótulo de seção é o mesmo nas duas metades do site: 13px/700, 1,5px */
.section-title {
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--ink);
}

/* --- o acento da seção volta a aparecer, no formato do C.R.I.S. --- */
.section-container { border-left: 2px solid var(--accent); }
.section-title { color: var(--accent); }

/* a nota à direita do título segue neutra, para o acento não virar ruído */
.section-title .float-right { color: var(--ink-soft); }

/* no índice lateral, o ponto de cada seção já usa o acento dela */

/* Os tons de seção foram feitos para ser FUNDO de texto branco: #581c87,
   #166534, #831843. Como texto sobre o painel escuro eles somem (contraste
   perto de 1,6:1). No tema claro, sobre painel branco, funcionam como estão;
   no escuro precisam ser levantados até o texto ficar legível. */
:root[data-tema="noite"] .section-title {
    color: color-mix(in oklab, var(--accent) 42%, #fff);
}

:root[data-tema="noite"] .section-container {
    border-left-color: color-mix(in oklab, var(--accent) 62%, #fff);
}

/* --- painel de detalhe: mesmo tratamento dos títulos de seção --- */
.detalhe {
    border-left-width: 2px;
    border-radius: 0 2px 2px 0;
}

/* o título usa o acento cru, que sobre o painel escuro some pelo mesmo
   motivo dos rótulos de seção: esses tons eram fundo, não tinta */
:root[data-tema="noite"] .detalhe-titulo {
    color: color-mix(in oklab, var(--accent) 42%, #fff);
}

:root[data-tema="noite"] .detalhe {
    border-left-color: color-mix(in oklab, var(--accent) 62%, #fff);
}