/* Tema COLASNI: vermelho + preto, blackletter, janelas retrô (XP e 98) */

@font-face {
  font-family: 'Manufacturing Consent';
  src: url('/static/fonts/ManufacturingConsent.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #FF0000;
  font-family: 'Manufacturing Consent', 'UnifrakturCook', serif;
  color: #000;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ciclo de pulsação dos SVGs: ~1s aparecendo, segura, some (período 3s) */
@keyframes pulse-fade {
  0%   { opacity: 0; }
  33%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.pulse { animation: pulse-fade 3s ease-in-out infinite; }

/* silhueta ao fundo, centralizada */
.bg-body {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 105vh;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.tagline-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.5vh;
  z-index: 1;
  text-align: center;
  font-size: clamp(1.8rem, 6vh, 4rem);
}

/* ---------- janela estilo Windows XP ---------- */

.xp-window {
  position: relative;
  z-index: 2;
  width: min(430px, 92vw);
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 11px;
  background: #ECE9D8;
  border: 1px solid #0831D9;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 2px 3px 10px rgba(0,0,0,.45);
}

.xp-titlebar {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 8px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg,
    #0058E6 0%, #3593FF 8%, #288EFF 40%, #127DFF 88%, #036FFC 93%, #0262EE 100%);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.6);
}

.xp-controls { display: flex; gap: 2px; }

.xp-controls button {
  width: 21px;
  height: 21px;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-family: 'Marlett', Tahoma, sans-serif;
  line-height: 1;
  cursor: default;
  background: linear-gradient(180deg, #4E8DF0 0%, #2A67D8 100%);
  box-shadow: inset 0 0 1px rgba(255,255,255,.6);
}
.xp-controls .xp-close {
  background: linear-gradient(180deg, #E7906F 0%, #D0492A 45%, #B33A18 100%);
}

.xp-body { padding: 16px 18px 14px; }

.xp-message { font-size: 12px; margin-bottom: 12px; }

.xp-fieldset {
  border: 1px solid #A9A9A9;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 16px;
}
.xp-fieldset legend {
  font-size: 11px;
  padding: 0 4px;
  margin-left: 4px;
}

/* campo "afundado" que abre o seletor de arquivo */
.xp-filefield {
  display: block;
  width: 100%;
  min-height: 22px;
  background: #fff;
  border: 1px solid #7F9DB9;
  padding: 3px 6px;
  cursor: pointer;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 11px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xp-filefield.empty { color: #777; }

.xp-filefield input[type="file"] { display: none; }

.xp-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.xp-btn {
  min-width: 75px;
  height: 23px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  font-size: 11px;
  color: #000;
  background: linear-gradient(180deg, #fff 0%, #ECEBE5 86%, #D8D0C4 100%);
  border: 1px solid #003C74;
  border-radius: 3px;
  cursor: pointer;
}
.xp-btn:hover { box-shadow: inset 0 0 0 1px #FFC73C; }
.xp-btn:active { background: #ECEBE5; }
.xp-btn[disabled] { color: #A0A0A0; border-color: #B5B2A5; cursor: default; box-shadow: none; }

/* ---------- janela estilo Windows 98/2000 ---------- */

.w98-window {
  position: relative;
  z-index: 2;
  font-family: Tahoma, 'MS Sans Serif', 'Segoe UI', sans-serif;
  font-size: 11px;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  outline: 1px solid #000;
  box-shadow: 3px 4px 12px rgba(0,0,0,.45);
}

.w98-titlebar {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px 0 6px;
  background: linear-gradient(90deg, #000080 0%, #1084D0 100%);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
}

.w98-title { display: flex; align-items: center; gap: 5px; }

.w98-controls { display: flex; gap: 2px; }

.w98-controls button {
  width: 16px;
  height: 14px;
  font-size: 9px;
  line-height: 1;
  color: #000;
  background: #C0C0C0;
  border: 1px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  cursor: default;
}

.w98-menubar {
  display: flex;
  gap: 0;
  padding: 2px 4px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
}
.w98-menubar span {
  padding: 2px 7px;
  cursor: default;
}
.w98-menubar span:hover { background: #000080; color: #fff; }

.w98-btn {
  min-width: 75px;
  height: 23px;
  padding: 0 10px;
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  font-size: 11px;
  color: #000;
  background: #C0C0C0;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  cursor: pointer;
}
.w98-btn:active {
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  background: #B8B8B8;
}

.w98-input {
  height: 22px;
  width: 100%;
  padding: 3px 6px;
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  font-size: 11px;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}

.w98-fieldset {
  border: 1px solid #808080;
  box-shadow: 1px 1px 0 #fff inset, 1px 1px 0 #fff;
  padding: 8px 10px 10px;
}
.w98-fieldset legend {
  font-size: 11px;
  padding: 0 4px;
}

/* ---------- modais / progresso (componentes compartilhados) ---------- */

.overlay[hidden] { display: none; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-window { width: min(380px, 90vw); }

.loading-body { padding: 18px 20px 20px; }

.w98-progress {
  height: 20px;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  background: #fff;
  overflow: hidden;
  position: relative;
  margin-top: 12px;
}

/* indeterminado: bloco que desliza */
.w98-progress-blocks {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 40%;
  background: repeating-linear-gradient(90deg,
    #000080 0 10px, transparent 10px 13px);
  animation: progress-slide 1.6s linear infinite;
}

@keyframes progress-slide {
  from { left: -40%; }
  to   { left: 100%; }
}

/* determinado: preenchimento por % (largura via JS) */
.w98-progress-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 0%;
  background: repeating-linear-gradient(90deg,
    #000080 0 10px, transparent 10px 13px);
}

/* ---------- Windows Media Player (componente compartilhado) ---------- */

.wmp-titlebar-icon { font-size: 12px; }

.wmp-screen {
  margin: 2px;
  background: #C8C8C8;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wmp-screen img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}

.wmp-seek-row { padding: 6px 8px 2px; }

.wmp-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.wmp-seek::-webkit-slider-runnable-track {
  height: 4px;
  background: #808080;
  border: 1px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}
.wmp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 18px;
  margin-top: -8px;
  background: #C0C0C0;
  border: 1px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
}
.wmp-seek::-moz-range-track {
  height: 4px;
  background: #808080;
  border: 1px solid #404040;
}
.wmp-seek::-moz-range-thumb {
  width: 11px;
  height: 18px;
  border-radius: 0;
  background: #C0C0C0;
  border: 1px solid #404040;
}

.wmp-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 6px;
}

.wmp-controls .sep {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: #808080;
  box-shadow: 1px 0 0 #fff;
}

.wmp-controls button {
  width: 26px;
  height: 22px;
  font-size: 10px;
  line-height: 1;
  color: #000;
  background: #C0C0C0;
  border: 1px solid transparent;
  cursor: pointer;
}
.wmp-controls button:hover {
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
}
.wmp-controls button:active {
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}
.wmp-controls button.toggled {
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  background: #B8B8B8;
}

.wmp-volume {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wmp-volume .speaker { font-size: 13px; }
.wmp-volume input {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 14px;
  background: transparent;
  cursor: pointer;
}
.wmp-volume input::-webkit-slider-runnable-track {
  height: 2px;
  background: #404040;
}
.wmp-volume input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 14px;
  margin-top: -6px;
  background: #C0C0C0;
  border: 1px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
}
.wmp-volume input::-moz-range-track { height: 2px; background: #404040; }
.wmp-volume input::-moz-range-thumb {
  width: 9px; height: 14px; border-radius: 0;
  background: #C0C0C0; border: 1px solid #404040;
}

.wmp-statusbar {
  margin: 0 2px 2px;
  height: 22px;
  background: #000;
  color: #0f0;
  font-family: Tahoma, monospace;
  font-size: 10px;
  display: flex;
  align-items: center;
  padding: 0 8px;
}