/* ==========================================================================
   LAB 95 — base.css
   Reset, variáveis, tipografia e controles comuns (botões, campos, barras).
   Nada aqui deve depender de tema moderno: sem bordas arredondadas, sem
   sombras suaves, sem gradientes contemporâneos.
   ========================================================================== */

@font-face {
  font-family: "W95FA";
  src: url("../fonts/W95FA.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --silver: #c0c0c0;
  --silver-dark: #808080;
  --silver-light: #dfdfdf;
  --navy: #000080;
  --navy-light: #1084d0;
  --teal: #008080;
  --ink: #000;
  --task-height: 32px;
  --font-ui: "MS Sans Serif", "Pixelated MS Sans Serif", "W95FA", Tahoma, Geneva, Verdana,
             "Liberation Sans", Arial, sans-serif;
  --font-mono: "Courier New", "Lucida Console", "Liberation Mono", monospace;
  --font-doc: "Times New Roman", Times, serif;
  --bevel-out: #fff #404040 #404040 #fff;
  --bevel-in: #808080 #fff #fff #808080;
  --bevel-thin-out: #fff #808080 #808080 #fff;
  --bevel-thin-in: #808080 #fff #fff #808080;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 12px var(--font-ui);
  color: var(--ink);
  background: var(--teal);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  cursor: default;
}

/* A simulação é uma "aplicação": o texto não deve ser selecionado por arrasto,
   exceto onde o conteúdo é editável (áreas de texto, logs, páginas). */
#desktop, .window, #taskbar, #startmenu, #contextmenu { user-select: none; }

input, textarea, select { font: inherit; }

input, textarea { user-select: text; }

::selection { background: var(--navy); color: #fff; }

/* --------------------------------- Tipografia -------------------------------- */
h1, h2, h3, h4 { margin: 4px 0 8px; font-weight: bold; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
h4 { font-size: 12px; }
p  { margin: 6px 0; line-height: 1.5; }
hr { border: 0; border-top: 1px solid var(--silver-dark); border-bottom: 1px solid #fff; margin: 6px 0; }
small { font-size: 11px; }
b, strong { font-weight: bold; }
code, kbd, pre { font-family: var(--font-mono); }

/* ---------------------------------- Controles -------------------------------- */
button {
  appearance: none;
  font: inherit;
  color: inherit;
  border-radius: 0;
  background: var(--silver);
  border: 2px solid;
  border-color: var(--bevel-out);
  box-shadow: inset -1px -1px var(--silver-dark);
  min-height: 23px;
  padding: 3px 10px;
  cursor: default;
}

button:disabled {
  color: var(--silver-dark);
  text-shadow: 1px 1px #fff;
  cursor: default;
}

select, input, textarea {
  border-radius: 0;
}

/* Botão clássico em relevo — usado em janelas, menus e barra de tarefas. */
.bevel,
.content > button,
.classic-button {
  border: 2px solid;
  border-color: var(--bevel-out);
  box-shadow: inset -1px -1px var(--silver-dark);
  background: var(--silver);
  min-height: 23px;
  padding: 3px 10px;
  margin: 3px;
}

.bevel:active:not(:disabled),
.bevel.pressed,
.content > button:active:not(:disabled) {
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px var(--silver-dark);
  padding: 4px 9px 2px 11px;
}

/* Campos */
.content input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.content textarea,
.content select,
dialog-field input {
  border: 2px solid;
  border-color: var(--bevel-in);
  background: #fff;
  padding: 3px;
  color: #000;
}

.content select {
  appearance: none;
  padding-right: 24px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' fill='%23c0c0c0'/%3E%3Cpath d='M1 19V1h18M2 18h17' fill='none' stroke='%23fff'/%3E%3Cpath d='M19 1v18H2' fill='none' stroke='%23404040'/%3E%3Cpath d='M5 7h10l-5 6z' fill='%23000'/%3E%3C/svg%3E");
  background-position: right 1px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.content input[type="range"] {
  appearance: none;
  display: inline-block;
  height: 22px;
  min-width: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  vertical-align: middle;
  touch-action: pan-x;
}
.content input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #c0c0c0;
}
.content input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 19px;
  margin-top: -7px;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #808080;
}
.content input[type="range"]::-moz-range-track {
  height: 5px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #c0c0c0;
}
.content input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 15px;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #808080;
}

.content input[type="color"] {
  appearance: none;
  width: 30px;
  min-width: 30px;
  height: 23px;
  padding: 2px;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  border-radius: 0;
  background: #c0c0c0;
}
.content input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.content input[type="color"]::-webkit-color-swatch { border: 1px solid #000; border-radius: 0; }
.content input[type="color"]::-moz-color-swatch { border: 1px solid #000; border-radius: 0; }
.content input[type="search"]::-webkit-search-cancel-button { appearance: none; }

.content input[type="checkbox"],
.content input[type="radio"] { accent-color: navy; margin: 0 4px 0 0; }

.content fieldset {
  border: 2px groove #fff;
  margin: 10px 0;
  padding: 10px;
}

.content legend { padding: 0 4px; }

label { display: inline-flex; align-items: center; gap: 4px; }

/* Superfícies afundadas (campos somente-leitura, visualizadores) */
.inset,
.inset-field {
  border: 2px solid;
  border-color: var(--bevel-in);
  background: #fff;
  padding: 8px;
}

/* ---------------------------------- Utilidades -------------------------------- */
.row          { display: flex; align-items: center; gap: 8px; }
.column       { display: flex; flex-direction: column; gap: 8px; }
.grow         { flex: 1; min-width: 0; }
.wrap         { flex-wrap: wrap; }
.button-row   { display: flex; justify-content: flex-end; gap: 3px; flex-wrap: wrap; margin-top: 8px; }
.split        { display: flex; min-width: 0; min-height: 0; flex: 1; }
.muted        { color: #555; }
.tiny         { font-size: 11px; }
.center       { text-align: center; }
.nowrap       { white-space: nowrap; }
.pre          { white-space: pre-wrap; font-family: var(--font-mono); }
.scroll       { overflow: auto; }
.hidden       { display: none !important; }
[hidden]      { display: none !important; }

/* Barras de rolagem clássicas, quando o navegador permitir estilizar */
* { scrollbar-width: auto; scrollbar-color: var(--silver) #fff; }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0% 25%, #d4d4d4 0% 50%) 0 0/2px 2px; }
::-webkit-scrollbar-thumb {
  background: var(--silver);
  border: 1px solid #000;
  box-shadow: inset -1px -1px var(--silver-dark), inset 1px 1px #fff;
}
::-webkit-scrollbar-corner { background: var(--silver); }

/* Foco visível clássico: pontilhado interno, sem halo moderno */
:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.desktop-icon:focus-visible { outline: 1px dotted #fff; outline-offset: -2px; }

/* Acessibilidade: respeitar movimento reduzido e oferecer modo sem animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body.no-motion *, body.no-motion *::before, body.no-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* Caixa exibida quando o JavaScript está desligado */
.noscript-box {
  position: fixed;
  inset: 10% 15% auto 15%;
  background: var(--silver);
  border: 2px solid;
  border-color: var(--bevel-out);
  padding: 20px;
  text-align: center;
  z-index: 100000;
}