/*   CSS FILE HEADER #
 *
 *   File:         [diario.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['26.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['The Diário of a game session (apps/comum/diario.js): a leather tab on the right edge of the sheet, under the one of the board, and the open book over the page: the index of the sessions on the left page, the diary of the chosen one on the right (the summary of the master and one entry per character). Self-contained (the Mesa does not load tema.css); Pirata One for the titles. Desktop first.']
 */

@font-face { font-family: 'Pirata One'; src: url('fontes/pirata-one-latin-400-normal.woff2') format('woff2'); font-display: swap; }

/* the tab: right edge, under the one of the board (top 288 + its height) */
.diario-aba {
    --dr-ouro-claro: #f3d98e;
    position: fixed; right: 0; top: 540px; z-index: 930;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 9px 14px; border: 1px solid #8a6420; border-right: 0; border-radius: 8px 0 0 8px;
    background: linear-gradient(90deg, #2e1d1a, #4a2c26 55%, #2e1d1a); color: var(--dr-ouro-claro);
    box-shadow: -4px 4px 12px rgba(0, 0, 0, .45), inset 1px 0 0 rgba(255, 220, 170, .2);
    font: 600 13px/1 'Cinzel', Georgia, serif; letter-spacing: .12em; cursor: pointer;
}
.diario-aba[hidden] { display: none; }
.diario-aba:hover { background: linear-gradient(90deg, #3a2420, #5c362e 55%, #3a2420); }
.diario-aba:focus-visible { outline: 2px solid var(--dr-ouro-claro); outline-offset: 2px; }
.diario-aba-texto { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; }
.diario-aba svg { width: 16px; height: 16px; flex: none; }
/* below ~1500 px the side tabs take a narrower strip, so they do not cover the cards and pages next to the edge (26/10) */
@media (max-width: 1499px) { .diario-aba { padding: 14px 5px 12px; gap: 7px; } .diario-aba svg { width: 14px; height: 14px; } }

/* the book over the page */
html.diario-aberto, html.diario-aberto body { overscroll-behavior: none; }
.diario-painel {
    --dr-tinta: #2f2013; --dr-tinta-2: #5c4629; --dr-ouro: #a47a22; --dr-vermelho: #8e1b14; --dr-papel: #efe2c0; --dr-papel-2: #e6d4a8;
    position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 3vh 2vw;
    background: radial-gradient(ellipse at center, rgba(40, 24, 12, .86), rgba(10, 6, 3, .94)); color: var(--dr-tinta); color-scheme: light;
    font: 500 18px/1.4 'Cormorant Garamond', Georgia, serif;
}
.diario-painel[hidden] { display: none; }
.diario-livro {
    position: relative; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); width: min(1180px, 100%); height: 100%;
    border-radius: 10px; border: 3px solid #3b2313; background: #3b2313;
    box-shadow: 0 0 0 2px #8a6420, 0 20px 60px rgba(0, 0, 0, .7), inset 0 0 0 6px #4a2c26;
    padding: 12px; gap: 0;
}
.diario-indice, .diario-pagina {
    min-height: 0; overflow-y: auto; padding: 22px 24px 28px;
    background: radial-gradient(ellipse at 50% 0%, #f6ead0 0%, var(--dr-papel) 55%, var(--dr-papel-2) 100%);
}
.diario-indice { border-radius: 6px 0 0 6px; box-shadow: inset -14px 0 18px -10px rgba(60, 35, 10, .45); }
.diario-pagina { border-radius: 0 6px 6px 0; box-shadow: inset 14px 0 18px -10px rgba(60, 35, 10, .45); }
.diario-fechar {
    position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #8a6420; cursor: pointer;
    background: linear-gradient(180deg, #5a1c14, #3a100b); color: #f3d98e; font: 600 22px/1 Georgia, serif; z-index: 2;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
}
.diario-fechar:hover { background: linear-gradient(180deg, #7a261b, #4d160f); }
.diario-fechar:focus-visible, .diario-sessao:focus-visible, .diario-botao:focus-visible { outline: 2px solid var(--dr-ouro); outline-offset: 2px; }

.diario-titulo-livro { margin: 0 0 2px; font: 400 34px/1.05 'Pirata One', 'IM Fell English', serif; color: var(--dr-tinta); }
.diario-sub { margin: 0 0 14px; font-style: italic; font-size: 16px; color: var(--dr-tinta-2); }
.diario-lista { list-style: none; margin: 0; padding: 0; }
.diario-sessao {
    display: block; width: 100%; text-align: left; padding: 9px 10px 9px 12px; margin: 0 0 4px; cursor: pointer; background: transparent;
    border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 4px; color: inherit; font: inherit;
}
.diario-sessao:hover { background: rgba(120, 80, 30, .12); }
.diario-sessao[aria-current="true"] { background: rgba(164, 122, 34, .2); border-color: rgba(138, 100, 32, .5); border-left-color: var(--dr-ouro); }
.diario-sessao-num { display: block; font: 600 12px/1.2 'Cinzel', Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-tinta-2); }
.diario-sessao-nome { display: block; font: 400 22px/1.15 'Pirata One', 'IM Fell English', serif; color: var(--dr-tinta); overflow-wrap: anywhere; }
.diario-sessao-nome.sem { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17px; color: #7a5c3a; }
.diario-sessao-meta { display: block; font-size: 14px; color: #7a5c3a; }
.diario-sessao.aberta .diario-sessao-meta { color: var(--dr-vermelho); font-style: italic; }
.diario-vazio { font-style: italic; color: #7a5c3a; }

.diario-num { font: 600 13px/1.2 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dr-tinta-2); margin: 0; }
.diario-nome-sessao { margin: 0 0 2px; font: 400 38px/1.05 'Pirata One', 'IM Fell English', serif; color: var(--dr-tinta); overflow-wrap: anywhere; }
.diario-meta { margin: 0 0 4px; font-size: 16px; color: var(--dr-tinta-2); }
.diario-presentes { margin: 0 0 6px; font-size: 16px; font-style: italic; color: var(--dr-tinta-2); }
.diario-regua { height: 0; margin: 12px 0 14px; border: 0; border-top: 1px solid rgba(92, 62, 28, .5); box-shadow: 0 1px 0 rgba(255, 248, 228, .6); }
.diario-pagina h3 { margin: 0 0 6px; font: 400 25px/1.1 'Pirata One', 'IM Fell English', serif; color: var(--dr-tinta); }
.diario-nota { margin: 0 0 8px; font-size: 15px; font-style: italic; color: #7a5c3a; }

.diario-campo, .diario-entrada-area, .diario-titulo-campo {
    display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid rgba(92, 62, 28, .55); border-radius: 4px;
    background: rgba(255, 249, 232, .72); color: var(--dr-tinta); font: 500 18px/1.45 'Cormorant Garamond', Georgia, serif;
    box-shadow: inset 0 1px 3px rgba(60, 35, 10, .25);
}
.diario-campo { min-height: 170px; resize: vertical; }
.diario-entrada-area { min-height: 110px; resize: vertical; }
.diario-titulo-campo { margin: 0 0 8px; font-size: 20px; }
.diario-campo:focus, .diario-entrada-area:focus, .diario-titulo-campo:focus { outline: 2px solid var(--dr-ouro); outline-offset: 0; background: #fffbee; }
.diario-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.diario-texto.vazio { font-style: italic; color: #7a5c3a; }
.diario-barra { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; min-height: 28px; }
.diario-estado { font-style: italic; font-size: 15px; color: #7a5c3a; }
.diario-estado.salvo { color: #2f6b2a; }
.diario-estado.erro { color: var(--dr-vermelho); font-style: normal; }
.diario-botao {
    padding: .3em 1em; border-radius: 4px; border: 1px solid #8a6420; cursor: pointer;
    background: linear-gradient(180deg, #f4dc8f 0%, #d6ac4a 45%, #b0832a 100%); color: #2a1a06;
    font: 600 13px/1.2 'Cinzel', Georgia, serif; letter-spacing: .04em; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 250, 220, .7), 0 2px 5px rgba(0, 0, 0, .25);
}
.diario-botao:hover { background: linear-gradient(180deg, #fbe7a6 0%, #e0b955 45%, #bb8e31 100%); }
.diario-botao[disabled] { opacity: .55; cursor: default; }

.diario-entrada { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; margin: 0 0 18px; }
.diario-retrato {
    grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #8a6420; background: var(--cor, #7a5c3a) center / cover no-repeat;
    display: flex; align-items: center; justify-content: center; color: #f6ead0; font: 400 26px/1 'Pirata One', serif; box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.diario-retrato.com-foto > span { display: none; }
.diario-entrada-nome { margin: 0; font: 400 26px/1.1 'Pirata One', 'IM Fell English', serif; color: var(--dr-tinta); overflow-wrap: anywhere; }
.diario-entrada-nome small { font: 500 14px/1 'Cormorant Garamond', Georgia, serif; font-style: italic; color: #7a5c3a; margin-left: 8px; }
.diario-entrada.minha .diario-retrato { border-color: var(--dr-vermelho); }
.diario-entrada-corpo { grid-column: 2; min-width: 0; }
.diario-carregando { font-style: italic; color: #7a5c3a; }

@media (max-width: 800px) {
    .diario-painel { padding: 0; }
    .diario-livro { grid-template-columns: 1fr; grid-template-rows: minmax(120px, 30%) minmax(0, 1fr); border-radius: 0; }
    .diario-indice { border-radius: 0; box-shadow: none; }
    .diario-pagina { border-radius: 0; box-shadow: none; }
    .diario-fechar { top: 6px; right: 6px; }
    .diario-aba { top: auto; bottom: 120px; }
}
@media (prefers-reduced-motion: no-preference) {
    .diario-livro { animation: diario-abrir .22s ease-out; }
    @keyframes diario-abrir { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
}