/*   CSS FILE HEADER #
 *
 *   File:         [quadro.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['20.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['The board "Anotações gerais" (apps/comum/quadro.js): a leather tab on the right edge, under the tab of the chat, and the panel that covers the whole page with the Excalidraw canvas on parchment, the author tags over the items and the recycle bin of the master. Self-contained (the Mesa does not load tema.css): the fonts come from chat.css, loaded before. Desktop only.']
 */

/* the tab: right edge, below the one of the chat (top 96 + 40 + its height); the open chat drawer covers it (z-index 940) */
.quadro-aba {
    --qd-ouro-claro: #f3d98e;
    position: fixed; right: 0; top: 288px; 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, #2e2a1a, #4a4326 55%, #2e2a1a); color: var(--qd-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;
}
.quadro-aba[hidden] { display: none; }
.quadro-aba:hover { background: linear-gradient(90deg, #3a3521, #5a5230 55%, #3a3521); }
.quadro-aba:focus-visible { outline: 2px solid var(--qd-ouro-claro); outline-offset: 2px; }
.quadro-aba-texto { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; }
.quadro-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) { .quadro-aba { padding: 14px 5px 12px; gap: 7px; } .quadro-aba svg { width: 14px; height: 14px; } }

/* the panel over the page (the page stays where it was underneath) */
html.quadro-aberto, html.quadro-aberto body { overscroll-behavior: none; }
.quadro-painel {
    --qd-tinta: #2f2013; --qd-tinta-2: #5c4629; --qd-ouro: #a47a22; --qd-vermelho: #9c2b22; --qd-papel: #efe2c0;
    position: fixed; inset: 0; z-index: 1100;
    display: flex; flex-direction: column;
    background: var(--qd-papel); color: var(--qd-tinta); color-scheme: light;
    font: 500 17px/1.3 'Cormorant Garamond', Georgia, serif;
}
.quadro-painel[hidden] { display: none; }
.quadro-topo {
    flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 18px;
    background: linear-gradient(180deg, #3b2313, #2c1a0e); color: #f3e3bd;
    border-bottom: 2px solid #8a6420; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.quadro-titulo { margin: 0; font: 600 18px/1.2 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #f3d98e; white-space: nowrap; }
.quadro-estado { font-style: italic; font-size: 15px; color: #d9c49a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro-estado.erro { color: #ffb4a8; font-style: normal; }
.quadro-notas { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.quadro-notas[hidden] { display: none; }
.quadro-notas span { font: 600 12px/1 'Cinzel', Georgia, serif; letter-spacing: .06em; color: #d9c49a; margin-right: 2px; }
.quadro-cor {
    width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .45); cursor: pointer; padding: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(0, 0, 0, .4);
}
.quadro-cor:hover { transform: translateY(-1px); }
.quadro-cor:focus-visible { outline: 2px solid #f3d98e; outline-offset: 2px; }
.quadro-espaco { flex: 1; }
.quadro-botao {
    padding: .35em 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 6px rgba(0, 0, 0, .3);
}
.quadro-botao:hover { background: linear-gradient(180deg, #fbe7a6 0%, #e0b955 45%, #bb8e31 100%); }
.quadro-botao[hidden] { display: none; }
.quadro-botao[aria-pressed="true"] { background: linear-gradient(180deg, #e8c66e 0%, #b88a30 100%); box-shadow: inset 0 2px 4px rgba(60, 35, 5, .45); }
.quadro-fechar { border: 0; background: none; color: #f3e3bd; font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px; }
.quadro-fechar:hover { color: #fff; }
.quadro-fechar:focus-visible { outline: 2px solid #f3d98e; }

.quadro-corpo { flex: 1; min-height: 0; display: flex; position: relative; }
.quadro-tela { flex: 1; min-width: 0; position: relative; }
.quadro-tela > .excalidraw { --zIndex-modal: 1150; }
.quadro-carregando { position: absolute; inset: 0; display: grid; place-items: center; font-style: italic; color: var(--qd-tinta-2); font-size: 20px; }
.quadro-carregando[hidden] { display: none; }

/* the author tags: HTML over the canvas, placed from scrollX/scrollY/zoom; they never take the mouse */
.quadro-etiquetas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.quadro-etiqueta {
    position: absolute; left: 0; top: 0; transform-origin: 0 100%;
    padding: 1px 7px 2px; border: 1px solid rgba(92, 62, 28, .55); border-bottom: 0; border-radius: 5px 5px 0 0;
    background: #f6ead0; color: var(--qd-tinta);
    font: italic 500 13px/1.2 'Cormorant Garamond', Georgia, serif; white-space: nowrap;
    box-shadow: 0 -1px 3px rgba(60, 35, 5, .18);
}
.quadro-etiqueta.mestre { background: #3b2313; color: #f3d98e; border-color: #8a6420; font-style: normal; font-family: 'Cinzel', Georgia, serif; font-size: 11px; letter-spacing: .06em; }

/* the recycle bin of the master */
.quadro-lixeira {
    flex: none; width: min(340px, 40vw); display: flex; flex-direction: column; min-height: 0;
    background: #e9dab3; border-left: 3px solid #8a6420; box-shadow: -8px 0 20px rgba(0, 0, 0, .25);
}
.quadro-lixeira[hidden] { display: none; }
.quadro-lixeira h3 { margin: 0; padding: 12px 16px 6px; font: 600 16px/1.2 'Cinzel', Georgia, serif; }
.quadro-lixeira p.quadro-lixeira-sub { margin: 0; padding: 0 16px 8px; font-style: italic; font-size: 14px; color: var(--qd-tinta-2); border-bottom: 1px solid rgba(92, 62, 28, .35); }
.quadro-lixeira ol { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 6px 16px 12px; }
.quadro-lixeira li { padding: 8px 0; border-bottom: 1px dashed rgba(58, 36, 20, .3); }
.quadro-lixeira li:last-child { border-bottom: 0; }
.quadro-lixo-cab { display: flex; align-items: baseline; gap: 8px; }
.quadro-lixo-cab b { font-weight: 700; }
.quadro-lixo-cab button { margin-left: auto; }
.quadro-lixo-texto { margin: 2px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.quadro-lixo-quem { font-size: 14px; font-style: italic; color: var(--qd-tinta-2); font-variant-numeric: lining-nums; }
.quadro-lixo-vazio { font-style: italic; color: var(--qd-tinta-2); }
.quadro-restaurar {
    border: 1px solid #8a6420; border-radius: 4px; background: #f4dc8f; color: #2a1a06; cursor: pointer;
    font: 600 12px/1.2 'Cinzel', Georgia, serif; padding: .25em .7em;
}
.quadro-restaurar:hover { background: #fbe7a6; }
.quadro-restaurar:disabled { opacity: .55; cursor: default; }

/* the Excalidraw pieces that do not serve here: the library (external items) */
.quadro-painel .sidebar-trigger, .quadro-painel .default-sidebar-trigger, .quadro-painel .library-button { display: none !important; }