/* GuiOS — o site como um desktop retrô. Estética Win95, cor da marca no lugar do azul. */

:root {
  --desk:   #23174f; /* índigo: o amarelo da regressão é o complementar do roxo */
  --face:   #c3c3c3;
  --shadow: #7b7b7b;
  --dark:   #0a0a0a;
  --light:  #ffffff;
  --hilite: #dfdfdf;
  --title-a: #2a0f84;
  --title-b: #7a4dff;
  --sel:    #3b1fa8;
  --sel-soft: #e7defd;
  --ui:   'Pixelify Sans', Tahoma, 'Segoe UI', sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --code: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --taskbar: 42px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.os {
  margin: 0; overflow: hidden;
  background: var(--desk);
  font: 14px/1.45 var(--text); color: #111;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--sel); }
[hidden] { display: none !important; }
::selection { background: var(--sel); color: #fff; }
html { scrollbar-color: var(--face) #e6e6e6; }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilite); }
::-webkit-scrollbar-corner { background: var(--face); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* bevel clássico */
.raised { box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilite); }
.sunken { box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--hilite), inset 2px 2px var(--dark); }
.btn95 {
  background: var(--face); border: 0; padding: 6px 14px; min-height: 30px;
  font: 500 14px/1 var(--ui); color: #000; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilite);
}
.btn95:active, .btn95[aria-pressed="true"] {
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--dark), inset -2px -2px var(--hilite), inset 2px 2px var(--shadow);
  padding: 7px 13px 5px 15px;
}
.btn95:focus-visible, .icon:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn95 svg { width: 18px; height: 18px; }
.btn95.default { outline: 1px solid #000; }

/* ── desktop ─────────────────────────────────────────── */
.desktop { position: fixed; inset: 0 0 var(--taskbar) 0; overflow: hidden; }
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.icons {
  position: absolute; top: 10px; left: 10px; bottom: 10px;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 96px);
  gap: 4px 8px; align-content: start;
}
.icon {
  width: 92px; padding: 6px 2px; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff; font: 500 14px/1.15 var(--ui); text-align: center;
  text-shadow: 1px 1px 0 #000;
}
.icon svg { width: 42px; height: 42px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.35)); }
.icon span { padding: 1px 3px; }
a.icon { text-decoration: none; }
.icon:hover span, .icon:focus-visible span { background: var(--sel); text-shadow: none; }

/* ── janelas ─────────────────────────────────────────── */
.win {
  position: absolute; top: 40px; left: 40px; z-index: 10;
  width: 520px; max-width: calc(100vw - 12px); max-height: calc(100% - 8px);
  display: flex; flex-direction: column;
  background: var(--face); padding: 3px;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--hilite), inset -2px -2px var(--shadow), inset 2px 2px var(--light), 4px 6px 0 rgba(0,0,0,.18);
}
.win.minimized { display: none; }
.win:focus { outline: none; }
.win:focus-visible .titlebar { outline: 2px dotted #fff; outline-offset: -4px; }
/* abrir janela como no Win95: um retângulo que cresce aos trancos */
.win:not(.minimized) { animation: win-open 220ms steps(4, end); }
@keyframes win-open { from { clip-path: inset(45% 45% 45% 45%); } to { clip-path: inset(0 0 0 0); } }
.win.max { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-height: none; }
.titlebar {
  flex: none; height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 3px 0 5px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #fff; font: 500 15px/1 var(--ui); user-select: none; touch-action: none; cursor: grab;
}
.titlebar:active { cursor: grabbing; }
.win:not(.active) .titlebar { background: linear-gradient(90deg, #808080, #b8b8b8); color: #e2e2e2; }
.titlebar .ti { width: 18px; height: 18px; flex: none; }
.titlebar .tt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-btns { display: flex; gap: 2px; }
.tb-btns button {
  width: 26px; height: 24px; padding: 0; border: 0; background: var(--face); /* 24px: alvo mínimo da WCAG 2.2 */
  display: grid; place-items: center;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilite);
}
.tb-btns button:active { box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--dark), inset -2px -2px var(--hilite), inset 2px 2px var(--shadow); }
.tb-btns button[data-act="close"] { margin-left: 2px; }
.tb-btns svg { width: 10px; height: 10px; }

.menubar { flex: none; display: flex; gap: 2px; padding: 3px 2px; font: 14px/1 var(--ui); }
.menubar span { padding: 3px 7px; }
.pane { flex: 1; min-height: 0; overflow: auto; background: #fff; margin-top: 2px;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--hilite), inset 2px 2px var(--dark); }
.statusbar { flex: none; display: flex; gap: 3px; padding-top: 3px; font: 13px/1 var(--ui); }
.statusbar > span { padding: 5px 8px; flex: 1;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow); }
.statusbar > span:last-child { flex: none; }
.sb-btn { flex: none; border: 0; background: var(--face); padding: 4px 10px; min-height: 24px; font: 13px/1 var(--ui);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilite); }
.sb-btn[aria-pressed="true"] { box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--dark), inset -2px -2px var(--hilite), inset 2px 2px var(--shadow); }

/* notepad */
.notepad { padding: 14px 16px; font: 14px/1.7 var(--code); color: #111; }
.notepad h1 { font: 700 14px/1.7 var(--code); margin: 0; letter-spacing: .04em; }
.notepad p { margin: 0 0 1.1em; }
.notepad .lk { background: none; border: 0; padding: 0; font: inherit; color: var(--sel); text-decoration: underline; }

/* planilha */
.sheet { border-collapse: collapse; font: 13.5px/1.4 var(--text); width: 100%; min-width: 560px; }
.sheet th, .sheet td { border: 1px solid #d5d5d5; padding: 6px 9px; text-align: left; vertical-align: top; }
.sheet thead th { position: sticky; top: 0; z-index: 1; background: var(--face); font: 500 13px/1 var(--ui); text-align: center; padding: 5px;
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--light); border-color: #9a9a9a; }
.sheet .rn { width: 36px; background: var(--face); color: #333; font: 500 12.5px/1.4 var(--ui); text-align: center; border-color: #9a9a9a; }
.sheet tr.hdr td { font-weight: 600; background: #f3f3f3; }
.sheet tr.rec { cursor: pointer; }
.sheet tr.rec:hover td:not(.rn) { background: var(--sel); color: #fff; }
.sheet tr.rec:hover td.rn { background: var(--sel-soft); }
.sheet tr.rec:hover .go { color: #fff; }
.sheet td.name { font-weight: 600; white-space: nowrap; }
.st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #999; }
.st.live::before { background: #1f9d55; animation: blink 1.2s steps(1, end) infinite; }
/* pisca sempre; WCAG 2.2.2 pede um jeito de pausar: botão na barra de status */
.still .st.live::before { animation: none; }
@keyframes blink { 50% { background: transparent; box-shadow: inset 0 0 0 1px #1f9d55; } }
.st.research::before { background: #2563eb; }
.sheet .go { font: 500 13px/1 var(--ui); white-space: nowrap; }

/* barra de endereço do navegadorzinho */
.addr { flex: none; display: flex; gap: 6px; align-items: center; padding: 3px 1px; font: 13px/1 var(--ui); }
.addr .field { flex: 1; min-width: 0; background: #fff; padding: 6px 8px; font: 12.5px/1 var(--code); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--hilite), inset 2px 2px var(--dark); }

/* contato: o mesmo cartão do /c, em versão janela */
.contact { padding: 16px; }
.ct-id { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.ct-id img { width: 88px; height: 88px; flex: none; object-fit: cover; object-position: 50% 12%; background: #fff; padding: 2px;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--hilite), inset 2px 2px var(--dark); }
.ct-id h2 { margin: 0 0 5px; font: 600 21px/1.1 var(--ui); }
.ct-id p { margin: 0; color: #2b2b2b; }
.ct-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.btn95.big { flex-direction: column; justify-content: center; gap: 7px; min-height: 70px; padding: 8px 4px; font-size: 15px; }
.btn95.big:active { padding: 9px 3px 7px 5px; }
.btn95.big svg { width: 24px; height: 24px; }

/* visualizador de case */
.viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.viewer iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #f4f1ea; }
/* a tela de erro do Internet Explorer, versão GuiOS */
.noframe { flex: 1; padding: 28px 28px 32px; font: 14px/1.5 var(--text); color: #222; }
.noframe svg { width: 40px; height: 40px; }
.noframe h2 { margin: 12px 0 8px; font: 600 20px/1.25 var(--ui); color: #111; }
.noframe p { margin: 0 0 18px; max-width: 52ch; }
.noframe b { font: 500 14px/1 var(--code); }

/* ── barra de tarefas e menu iniciar ─────────────────── */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar); z-index: 9000;
  display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--face); box-shadow: inset 0 1px var(--hilite), inset 0 2px var(--light); }
.start { font-weight: 700 !important; padding: 5px 10px !important; }
.start svg { width: 20px; height: 20px; }
.tasks { flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; }
.tasks .btn95 { flex: 0 1 180px; min-width: 0; justify-content: flex-start; font-size: 13.5px; }
.tasks .btn95 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasks .btn95.active { background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--dark), inset -2px -2px var(--hilite), inset 2px 2px var(--shadow); }
.tray { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; font: 13.5px/1 var(--ui);
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow); }

.startmenu { position: fixed; left: 4px; bottom: calc(var(--taskbar) - 2px); z-index: 9500; display: flex; width: 280px; background: var(--face); padding: 3px;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--hilite), inset -2px -2px var(--shadow), inset 2px 2px var(--light), 4px 4px 0 rgba(0,0,0,.25); }
.sm-banner { width: 30px; flex: none; background: linear-gradient(0deg, var(--title-a), var(--title-b)); color: #fff;
  writing-mode: vertical-rl; transform: rotate(180deg); font: 700 20px/30px var(--ui); padding: 10px 0; letter-spacing: .02em; }
.sm-banner b { color: #d9ccff; }
.startmenu ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.startmenu li.sep { height: 2px; margin: 4px 2px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--light); }
.startmenu .item { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; font: 500 15px/1 var(--ui); color: #000; cursor: pointer; }
.startmenu .item svg { width: 26px; height: 26px; flex: none; }
.startmenu .item:hover, .startmenu .item:focus-visible { background: var(--sel); color: #fff; }

/* ── boot e desligar ─────────────────────────────────── */
.boot, .off { position: fixed; inset: 0; z-index: 99999; background: #000; display: grid; place-content: center; text-align: center; color: #cfcfcf; font: 16px/1.4 var(--ui); cursor: pointer; }
.boot-logo { font: 700 72px/1 var(--ui); color: #fff; letter-spacing: -.01em; }
.boot-logo span { color: #9b7bff; }
.boot p { margin: 14px 0 0; }
.boot-bar { width: 280px; height: 22px; margin: 22px auto 14px; padding: 3px; border: 2px solid #5b5b5b; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #7a4dff 0 14px, transparent 14px 18px); animation: load 1.35s steps(15) forwards; }
.boot small { color: #666; }
@keyframes load { to { width: 100%; } }
.off { color: #ff9f1a; font-size: 28px; padding: 24px; }
.off small { display: block; margin-top: 18px; font-size: 15px; color: #7a7a7a; }

.noscript { position: fixed; inset: 0; z-index: 99999; display: grid; place-content: center; padding: 24px; background: var(--desk); color: #fff; font: 18px/1.5 var(--text); text-align: center; }
.noscript a { color: #fff; }

/* ── celular: janelas em tela cheia, ícones em grade ── */
@media (max-width: 720px) {
  .icons { right: 10px; bottom: auto; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 12px 4px; }
  .icon { width: 84px; font-size: 13px; }
  .win { position: absolute; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none; max-height: none; box-shadow: none; }
  .titlebar { cursor: default; height: 34px; }
  .tb-btns button { width: 30px; height: 26px; }
  .tb-btns button[data-act="max"] { display: none; }
  .tasks .btn95 { flex-basis: 44px; }
  .tasks .btn95 span { display: none; }
  .sheet td { white-space: nowrap; }
  .wallpaper text { display: none; }
  .hide-sm { display: none; }
  .boot-logo { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-bar i { animation: none; width: 100%; }
  .win:not(.minimized) { animation: none; }
  .st.live::before { animation: none; }
}


/* ── apps (30/09/2026): a janela é moldura Win95, o app moderno mora no iframe ── */
.pane.appframe { display: flex; overflow: hidden; }
.appframe iframe { flex: 1; min-height: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.startmenu .lang { font: 13px/1 var(--ui); opacity: .85; }

/* app que não aceita ser embutido (01/10/2026): aviso no lugar do iframe */
.appframe .fora { flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: #fff; color: #000; }
.appframe .fora p { margin: 0; max-width: 46ch; line-height: 1.5; }