/* FONDO ESCRITORIO */
body {
  margin: 0;
  font-family: "Verdana", "Tahoma", sans-serif;
}

.desktop {
  position: relative;
  min-height: 100vh;
  background: url("fondo-nso.png") center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
}

/* ICONOS LADO DERECHO */
.desktop-icons {
  right: 12px;
  top: 110px;
}


.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  cursor: default;
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #7cf6ff, #5f7dff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  margin-bottom: 4px;
}

.icon-folder {
  width: 40px;
  height: 30px;
  background: linear-gradient(to bottom, #ffe879, #ffce55);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  margin-bottom: 4px;
}

/* ÁREA DE VENTANAS */
.windows-area {
  position: relative;
  flex: 1;
  padding: 40px;
  padding-bottom: 70px;
}


/* VENTANAS BASE */
.window {
  position: absolute;
  background: #f8f2ff;
  border: 2px solid #a064ff;
  box-shadow: 0 4px 0 #6a3bb5, 0 0 0 1px #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  cursor: move;
}

.window-header {
  cursor: move;
  user-select: none;
}



.window-title {
  font-weight: bold;
}

.window-buttons span {
  border: 1px solid #fff;
  padding: 0 3px;
  margin-left: 3px;
  background: #e9c7ff;
  color: #5a2b8b;
  font-size: 10px;
}


.window-body {
  padding: 4px;
}


/* TAMAÑOS DE VENTANA */
.window-big {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.window-medium {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.window-wide {
  max-width: 900px;
  margin: 0 auto;
}


.window-notes {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #d3a6ff;
}


/* CONTENIDO ESPECIAL */

/* Webcam */
.webcam-body {
  position: relative;
  padding: 4px;
}

.webcam-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 2px solid #825ee8;
}

.webcam-overlay {
  position: absolute;
  top: 10px;
  right: 14px;
  background: #ffd76f;
  color: #ff3399;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #fff, 0 2px 0 #b58327;
}

/* Social media image */
.fill-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 2px solid #825ee8;
}

/* Task Manager */
.task-body {
  background: #f8f0ff;
}

.task-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.task-label {
  font-weight: bold;
}

.task-value {
  font-weight: bold;
  color: #7243e7;
}

.task-stat {
  margin-bottom: 8px;
}

.task-stat-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 3px;
}

.task-bar {
  width: 100%;
  height: 12px;
  border-radius: 10px;
  background: #f3dfff;
  overflow: hidden;
  border: 1px solid #b38be8;
}

.task-bar-fill {
  height: 100%;
}

.task-bar-fill.stress {
  width: 25%;
  background: #ff8aa5;
}

.task-bar-fill.affection {
  width: 65%;
  background: #7fd6ff;
}

.task-bar-fill.darkness {
  width: 36%;
  background: #9e87ff;
}

/* Notas */
.notes-body textarea {
  width: 100%;
  height: 120px;
  border: 2px solid #a064ff;
  background: #fff6ff;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #3b2d58;
  resize: none;
}

/* TASKBAR ABAJO */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background: #f0f0ff;
  border-top: 2px solid #c6b7ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
}

.start-btn {
  width: 32px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #ff94dc, #ff62b4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 8px;
}

.taskbar-left {
  display: flex;
  align-items: center;
}

.taskbar-app {
  padding: 4px 10px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #b8a6ff;
  margin-right: 4px;
}

.taskbar-right {
  opacity: 0.8;
}

/* 📱 RESPONSIVE: versión teléfono */
@media (max-width: 900px) {

  .desktop {
    background-size: cover;
  }

  .desktop-icons {
    display: none; /* para que no estorben en cel */
  }

  .windows-area {
    padding: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .window-big,
  .window-medium,
  .window-wide {
    grid-column: 1 / 2;
    grid-row: auto;
  }

  .window-notes {
    position: static;
    width: 100%;
  }

  .taskbar {
    font-size: 11px;
  }
}

#win-webcam {
  top: 40px;
  left: 40px;
  width: 48%;
}

#win-social {
  top: 40px;
  right: 40px;
  width: 48%;
}

#win-task {
  left: 40px;
  right: 40px;
  bottom: 80px;
  height: 120px;
}

#win-notes {
  right: 40px;
  bottom: 80px;
  width: 260px;
}