/* Reset */
* {
  box-sizing: border-box;
}

/* Fondo */
body {
  margin: 0;
  background-image: url("https://hellmartituuuuu.neocities.org/fondo.png");
  background-size: cover;
  background-position: center;
  font-family: "Pixel", Tahoma, sans-serif;
  font-size: 11px;
}

#desktop {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Barra de tareas */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28px;
  background: #c0c0c0;
  display: flex;
  align-items: center;
  border-top: 2px solid #fff;
  box-shadow: inset 0 1px 0 #dfdfdf;
  z-index: 999;
}

.start-btn {
  margin: 2px;
  padding: 0 8px;
  height: 22px;
  background: #c0c0c0;
  border: 2px outset #fff;
  font-family: "Pixel";
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.start-btn:active {
  border: 2px inset #fff;
}

.tasks {
  flex: 1;
}

.reloj {
  margin-right: 6px;
  padding: 1px 6px;
  height: 22px;
  border: 2px inset #fff;
  background: #c0c0c0;
  display: flex;
  align-items: center;
}
.desktop-icon {
  position: absolute;
  width: 72px;
  text-align: center;
  cursor: default;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.desktop-icon img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated; /* queda bien con estética retro */
}

.desktop-icon span {
  font-size: 8px;
  color: #000000;
  text-shadow: 1px 1px 0 #696565;
  user-select: none;
}


/* Ventana */
.window {
  position: absolute;
  background: #ebebeb;
  border: 5px outset #fff;
  min-width: 260px;
  min-height: 120px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header */
.windowHeader {
  height: 22px;
  background: #c0c0c0;
  border-bottom: 2px solid #808080;
  display: flex;
  align-items: center;
  padding: 2px;
  box-shadow: inset 1px 1px 0 #fff;
  cursor: move;
}

.windowHeader strong {
  flex: 1;
  font-weight: normal;
  padding-left: 4px;
}

/* Botones */
.windowButtons {
  display: flex;
  gap: 2px;
}

.winclose,
.winminimize,
.winmaximize {
  width: 16px;
  height: 16px;
  background: #c0c0c0;
  border: 2px outset #fff;
  position: relative;
}

.winclose:active,
.winminimize:active {
  border: 2px inset #fff;
}

.winminimize::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: #000;
  left: 3px;
  bottom: 3px;
}

.winmaximize::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 6px;
  border: 1px solid #000;
  top: 3px;
  left: 3px;
}
.winmaximize {
  pointer-events: none;
}

.winclose::before,
.winclose::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1px;
  background: #000;
  top: 7px;
  left: 2px;
}
.winclose::before { transform: rotate(45deg); }
.winclose::after { transform: rotate(-45deg); }

/* Contenido de la ventana */
.wincontent {
  width: 100%;
  height: calc(100% - 22px - 8px); /* altura menos header y padding */
  padding: 8px;
  background: transparent;

  display: flex;
  flex-direction: column; /* apila contenido verticalmente */
  justify-content: flex-start;
  align-items: flex-start;

  overflow: auto; /* scroll si hay exceso de contenido */
  gap: 8px;
}

/* Imagen centrada dentro del flujo vertical */
.imgWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.imgWrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* jQuery UI: resize limpio */
.ui-resizable-handle {
  background: transparent;
}

.ui-widget-content {
  border: none;
}
/* Posición inicial de ventanas */
.window-yo {
  top: 60px;
  left: 80px;
  width: 600px;
  height: 400px;
}

.window-info {
  top: 120px;
  left: 360px;
  width: 300px;
  height: 300px;
}