/*
 * El escritorio: fondo, iconos, barra de tareas y menú de inicio.
 *
 * ⚠️ **Las medidas van en `px` y `rem`, no en `vw`.** La versión de 2024 tenía
 * la barra de tareas en `2.5vw` y el menú en `30vw × 35vw`: en un monitor de
 * 2560 la barra medía 64 px de alto y el menú ocupaba media pantalla, y en un
 * portátil de 1280 la letra del reloj se quedaba en 11 px. Una barra de tareas
 * mide lo que mide, no un porcentaje del ancho.
 */

:root {
  --azul: #245edb;
  --azul-claro: #3f8cf3;
  --azul-cielo: #0c8dea;
  --verde: #3c873c;
  --barra-alto: 40px;
  --sombra-ventana: 4px 4px 12px rgb(0 0 0 / 45%);
}

* { box-sizing: border-box; }

/* El cajón de dibujos de los iconos: existe para que los <use> lo encuentren,
   no para verse. ⚠️ Va en una clase y no en un `style=`: con el atributo, la
   CSP necesitaría 'unsafe-inline' en style-src, y por un `display:none`. */
.sprites { display: none; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: Tahoma, Verdana, "DejaVu Sans", Arial, sans-serif;
  font-size: 13px;
  color: #000;
  background: url("../img/fondo.webp") center / cover no-repeat fixed #2a7fd4;
  user-select: none;
}

/* ─────────────── Iconos del escritorio ─────────────── */

#escritorio {
  position: absolute;
  inset: 0 0 var(--barra-alto) 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 92px);
  grid-auto-rows: 92px;
  align-content: start;
  gap: 4px;
  padding: 10px;
  /* Los iconos se colocan en columna, como en XP: se llena de arriba abajo y
     luego se salta a la columna siguiente. */
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 92px);
  grid-auto-columns: 92px;
}

.icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 6px 2px;
  border: 1px dotted transparent;
  background: none;
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: default;
  /* Sin esto el nombre blanco sobre la hierba clara no se lee. */
  text-shadow: 1px 1px 2px rgb(0 0 0 / 90%);
}

.icono svg { width: 42px; height: 42px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 50%)); }
.icono span { line-height: 1.2; word-break: break-word; }

.icono:focus-visible,
.icono.seleccionado {
  outline: none;
  border-color: #fff;
  background: rgb(36 94 219 / 55%);
}

/* ─────────────── Barra de tareas ─────────────── */

#barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10000;
  display: flex;
  align-items: stretch;
  height: var(--barra-alto);
  background: linear-gradient(to bottom, var(--azul) 0%, #4e95f5 8%, var(--azul) 16%, var(--azul) 92%, #1b47a8 100%);
  box-shadow: 0 -1px 3px rgb(0 0 0 / 40%);
}

#inicio {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  padding: 0 22px 0 10px;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: radial-gradient(circle at 30% 20%, #6fc168 0%, var(--verde) 70%, #2f6d2f 100%);
  box-shadow: inset 0 6px 10px rgb(140 220 130 / 55%), inset 0 -6px 8px rgb(0 0 0 / 25%);
  color: #fff;
  font: italic bold 17px Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 60%);
  cursor: pointer;
}

#inicio:hover { background: radial-gradient(circle at 30% 20%, #86d87e 0%, #469646 70%, #2f6d2f 100%); }

#tareas {
  display: flex;
  flex: 1;
  gap: 3px;
  align-items: center;
  min-width: 0;
  padding: 3px 6px;
  overflow: hidden;
}

.tarea {
  display: flex;
  flex: 0 1 160px;
  align-items: center;
  gap: 6px;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #1b47a8;
  border-radius: 2px;
  background: linear-gradient(to bottom, #4e95f5, #2d6ad6);
  color: #fff;
  font: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}

.tarea svg { flex: none; width: 18px; height: 18px; }
.tarea span { overflow: hidden; text-overflow: ellipsis; }
.tarea:hover { background: linear-gradient(to bottom, #6aa8f8, #3f7ce0); }

/* La ventana que tiene el foco se ve hundida, como en XP. */
.tarea.activa {
  background: linear-gradient(to bottom, #1f55c4, #3b79dd);
  box-shadow: inset 2px 2px 4px rgb(0 0 0 / 45%);
}

#bandeja {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: linear-gradient(to bottom, var(--azul-cielo) 0%, #4fa8f0 10%, var(--azul-cielo) 20%, #0a79c8 100%);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 25%);
  color: #fff;
}

#reloj { font-size: 12px; }

/* ─────────────── Menú de inicio ─────────────── */

/*
 * Está calcado del de XP, que no es un panel plano: es una cabecera azul con
 * brillo, dos columnas de distinto color, una raya naranja bajo el nombre y un
 * pie en degradado. Las esquinas de arriba van redondeadas y las de abajo no,
 * porque el menú nace de la barra de tareas.
 */
#menu {
  position: fixed;
  bottom: var(--barra-alto);
  left: 0;
  z-index: 9999;
  width: 400px;
  border: 1px solid #0b3c9c;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #fff;
  box-shadow: 3px -3px 10px rgb(0 0 0 / 45%);
  overflow: hidden;
  transition: transform .18s ease-out, opacity .18s ease-out;
}

#menu.oculto {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

/* La cabecera: azul de XP, con el brillo de arriba y la raya naranja abajo. */
.menu-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 11px;
  border-bottom: 2px solid #e58a2a;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 35%) 0%, rgb(255 255 255 / 0%) 46%),
    linear-gradient(180deg, #1457c8 0%, #2f7ae4 48%, #0f4bb4 100%);
  box-shadow: inset 0 -1px 0 #0b3c9c;
  color: #fff;
}

/* La foto del usuario: marco claro de 2 px y esquinas apenas redondeadas, que
   es como la pinta XP — no un círculo. */
.menu-cabeza img {
  border: 2px solid #d8e6f8;
  border-radius: 2px;
  box-shadow: 1px 1px 3px rgb(0 0 0 / 45%);
}

.menu-cabeza h1 {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 55%);
}

/* ⚠️ El borde que separa las dos columnas va en la IZQUIERDA de la derecha y
   el fondo azul llega hasta abajo: en XP la columna de la derecha es una banda
   continua, no una caja flotando sobre blanco. */
.menu-cuerpo {
  display: flex;
  min-height: 250px;
  background: linear-gradient(90deg, #fff 0 50%, #d3e5f7 50% 100%);
}

.menu-col {
  flex: 1;
  margin: 0;
  padding: 7px 0;
  list-style: none;
}

.menu-col--derecha { border-left: 1px solid #aac6e3; }

.menu-col li > * {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 12px;
  border: 0;
  background: none;
  color: #00188f;
  font: inherit;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  cursor: default;
}

/* Hover: barra azul sólida de borde a borde, letra blanca. Sin redondeos y sin
   transición — en XP cambia de golpe. */
.menu-col li > *:hover { background: #2a5bd7; color: #fff; }
.menu-col svg { flex: none; width: 28px; height: 28px; }
.menu-col--derecha li > * { padding-left: 16px; }

/* El pie, con su separador y el degradado al revés que la cabecera. */
.menu-pie {
  display: flex;
  justify-content: flex-end;
  padding: 7px 12px;
  border-top: 1px solid #7fa8de;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 25%) 0%, rgb(255 255 255 / 0%) 55%),
    linear-gradient(180deg, #2f7ae4 0%, #1457c8 60%, #0f4bb4 100%);
}

#apagar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
  border: 1px solid transparent;
  background: none;
  color: #fff;
  font: inherit;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 55%);
  cursor: default;
}

#apagar:hover { border-color: rgb(255 255 255 / 55%); background: rgb(255 255 255 / 18%); }

/* ─────────────── Apagado ─────────────── */

#apagado {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  background: #1b3f8f;
  color: #fff;
  font-size: 22px;
}

#apagado[hidden] { display: none; }

#encender {
  padding: 10px 22px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

#encender:hover { background: rgb(255 255 255 / 15%); }

/* ─────────────── Pantallas chicas ─────────────── */

@media (max-width: 680px) {
  :root { --barra-alto: 44px; }
  #menu { width: calc(100vw - 8px); }
  #escritorio { grid-auto-flow: row; grid-template-rows: none; }
  .tarea { flex-basis: 44px; padding: 0 6px; }
  .tarea span { display: none; }
}