/* ============================================================
   escritorio.css — el "sistema operativo": ventanas, barra de
   tareas, iconos, menú inicio y temas.
   Todo escrito a mano. Sin frameworks. Sin CDN.
   ============================================================ */

/* ------------------------------------------------------------
   0. FUENTE
   Por defecto se usa la pila de fuentes del sistema. Tahoma es
   la de Windows; en Linux y Android no existe y cae a Verdana o
   DejaVu Sans, que se ven bien pero no son pixeladas.

   Para que se vea pixelada de verdad, baja una fuente de mapa de
   bits en .woff2 (por ejemplo W95FA, MS Sans Serif o Pixelated
   MS Sans Serif), déjala en fuentes/ y descomenta esto. El
   nombre "Pixelada" ya está primero en --fuente-ui, así que con
   descomentar basta: no hay que tocar nada más.

   Neocities sí permite subir .woff2, .woff, .ttf y .otf.
------------------------------------------------------------ */
/*
@font-face {
  font-family: "Pixelada";
  src: url("../fuentes/pixelada.woff2") format("woff2");
  font-display: swap;
}
*/

/* ------------------------------------------------------------
   1. TEMAS
   Cambiar de tema = cambiar el atributo data-tema del <html>.
   Para inventar un tema nuevo, copia un bloque y cambia colores.
------------------------------------------------------------ */
:root {
  /* superficie gris de las ventanas */
  --chrome:        #c0c0c0;
  --chrome-luz:    #ffffff;  /* borde superior-izquierdo (luz) */
  --chrome-medio:  #dfdfdf;
  --chrome-sombra: #808080;  /* borde inferior-derecho (sombra) */
  --chrome-negro:  #0a0a0a;

  /* barra de título */
  --titulo-a:      #000080;
  --titulo-b:      #1084d0;
  --titulo-texto:  #ffffff;
  --titulo-a-off:  #808080;  /* ventana inactiva */
  --titulo-b-off:  #b5b5b5;

  /* fondo del escritorio */
  --escritorio-1:  #3a6ea5;
  --escritorio-2:  #26456b;

  /* texto y campos hundidos (listas, inputs, canvas) */
  --texto:         #0a0a0a;
  --texto-suave:   #555555;
  --campo:         #ffffff;
  --campo-texto:   #0a0a0a;
  --seleccion:     #000080;
  --seleccion-txt: #ffffff;
  --acento:        #000080;

  /* el visualizador y los detalles "terminal" */
  --fosforo:       #00a86b;

  --fuente-ui:     "Pixelada", Tahoma, Geneva, Verdana, "DejaVu Sans", sans-serif;
  --fuente-mono:   "Courier New", "DejaVu Sans Mono", monospace;
  --barra-alto:    30px;
}

/* Tema nocturno: mismo hardware, de noche. */
:root[data-tema="nocturno"] {
  --chrome:        #2b2b2b;
  --chrome-luz:    #4f4f4f;
  --chrome-medio:  #3a3a3a;
  --chrome-sombra: #141414;
  --chrome-negro:  #000000;
  --titulo-a:      #1b3a2a;
  --titulo-b:      #2f7d54;
  --titulo-texto:  #d8ffe8;
  --titulo-a-off:  #202020;
  --titulo-b-off:  #333333;
  --escritorio-1:  #0d0f0e;
  --escritorio-2:  #000000;
  --texto:         #d4d4d4;
  --texto-suave:   #8a8a8a;
  --campo:         #0d0d0d;
  --campo-texto:   #cfe8d8;
  --seleccion:     #2f7d54;
  --seleccion-txt: #ffffff;
  --acento:        #4fd18b;
  --fosforo:       #00ff9c;
}

/* Tema teal: el fondo verdoso de fábrica de Windows 95. */
:root[data-tema="teal"] {
  --escritorio-1:  #008080;
  --escritorio-2:  #008080;
}

/* ------------------------------------------------------------
   2. BASE
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fuente-ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--escritorio-1);
  overflow: hidden;              /* el escritorio no scrollea, las ventanas sí */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* El patrón dithered del fondo, generado con CSS: sin imágenes. */
#escritorio {
  position: fixed;
  inset: 0 0 var(--barra-alto) 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.035) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(160deg, var(--escritorio-1), var(--escritorio-2));
  overflow: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* Los iconos pixelados no se deben suavizar al escalar. */
.pixelado { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Foco visible: accesibilidad sin romper la estética. */
:focus-visible {
  outline: 1px dotted var(--titulo-texto);
  outline-offset: -4px;
}

/* ------------------------------------------------------------
   3. BISELES 3D
   El truco clásico: cuatro sombras internas simulan el relieve.
------------------------------------------------------------ */
.relieve {
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

.hundido {
  background: var(--campo);
  color: var(--campo-texto);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio),
    inset  2px  2px 0 0 var(--chrome-negro);
}

/* ------------------------------------------------------------
   4. ICONOS DEL ESCRITORIO
------------------------------------------------------------ */
#iconos {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 84px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0,0,0,.85);
}

.icono img { width: 32px; height: 32px; }

.icono span {
  padding: 1px 3px;
  word-break: break-word;
}

.icono:hover span,
.icono:focus-visible span {
  background: var(--seleccion);
  color: var(--seleccion-txt);
}

.icono:hover img { filter: drop-shadow(0 0 2px rgba(255,255,255,.6)); }

/* ------------------------------------------------------------
   5. VENTANAS
------------------------------------------------------------ */
.ventana {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-width: calc(100vw - 16px);
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio),
    2px 2px 6px rgba(0,0,0,.35);
  padding: 3px;
}

.ventana[hidden] { display: none; }

.ventana.minimizada { display: none; }

.ventana.maximizada {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none;
}

/* --- barra de título --- */
.barra-titulo {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 3px 3px 4px;
  background: linear-gradient(90deg, var(--titulo-a-off), var(--titulo-b-off));
  color: var(--titulo-texto);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  cursor: default;
  user-select: none;
  touch-action: none;    /* deja que el arrastre lo maneje JS, no el scroll */
  flex: 0 0 auto;
}

.ventana.activa .barra-titulo {
  background: linear-gradient(90deg, var(--titulo-a), var(--titulo-b));
}

.barra-titulo .icono-titulo { display: flex; }
.barra-titulo .icono-titulo img { width: 16px; height: 16px; }

.barra-titulo .titulo {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.botones-ventana {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.btn-vent {
  width: 18px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  font-family: var(--fuente-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--texto);
  cursor: pointer;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

.btn-vent:active {
  box-shadow:
    inset  1px  1px 0 0 var(--chrome-negro),
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  2px  2px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio);
}

/* --- cuerpo --- */
.cuerpo {
  flex: 1 1 auto;
  padding: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ventana:not(.maximizada) .cuerpo { max-height: min(70vh, 560px); }
.ventana.maximizada .cuerpo { max-height: none; }

/* Barra de estado inferior, tipo explorador de archivos. */
.barra-estado {
  flex: 0 0 auto;
  display: flex;
  gap: 3px;
  margin-top: 3px;
  font-size: 11px;
}

.barra-estado span {
  padding: 2px 6px;
  color: var(--texto);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra);
}

.barra-estado span:first-child { flex: 1 1 auto; }

/* Manija de redimensionado (solo escritorio). */
.redimensionar {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 46%, var(--chrome-sombra) 46% 58%, transparent 58%),
    linear-gradient(135deg, transparent 0 66%, var(--chrome-sombra) 66% 78%, transparent 78%);
}

/* ------------------------------------------------------------
   6. BARRA DE TAREAS
------------------------------------------------------------ */
#barra-tareas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--barra-alto);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 3px;
  background: var(--chrome);
  box-shadow: inset 0 1px 0 0 var(--chrome-luz), inset 0 2px 0 0 var(--chrome-medio);
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
  height: calc(var(--barra-alto) + env(safe-area-inset-bottom, 0px));
}

#btn-inicio {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 7px;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

#btn-inicio img { width: 16px; height: 16px; }

#btn-inicio[aria-expanded="true"] {
  box-shadow:
    inset  1px  1px 0 0 var(--chrome-negro),
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  2px  2px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio);
}

/* separador vertical */
#barra-tareas .separador {
  flex: 0 0 auto;
  width: 3px;
  height: 22px;
  box-shadow: inset -1px 0 0 0 var(--chrome-luz), inset 1px 0 0 0 var(--chrome-sombra);
}

#tareas {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#tareas::-webkit-scrollbar { display: none; }

.tarea {
  flex: 0 1 150px;
  min-width: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px;
  border: 0;
  font: inherit;
  font-size: 11px;
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

.tarea img { width: 14px; height: 14px; flex: 0 0 auto; }
.tarea span { overflow: hidden; text-overflow: ellipsis; }

.tarea[aria-pressed="true"] {
  font-weight: 700;
  box-shadow:
    inset  1px  1px 0 0 var(--chrome-negro),
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  2px  2px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio);
}

#bandeja {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra);
}

#bandeja .indicador-audio { color: var(--acento); }

/* ------------------------------------------------------------
   7. MENÚ INICIO
------------------------------------------------------------ */
#menu-inicio {
  position: fixed;
  left: 3px;
  bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom, 0px));
  z-index: 9500;
  width: 232px;
  display: flex;
  padding: 3px;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio),
    2px -2px 6px rgba(0,0,0,.4);
}

#menu-inicio[hidden] { display: none; }

/* La franja vertical con el nombre del sitio. */
#menu-inicio .franja {
  flex: 0 0 24px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px 4px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  color: #d8d8d8;
  background: linear-gradient(0deg, var(--titulo-a), #000);
}

#menu-inicio ul {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu-inicio li + li.corte {
  margin-top: 3px;
  padding-top: 3px;
  box-shadow: inset 0 1px 0 0 var(--chrome-sombra), inset 0 2px 0 0 var(--chrome-luz);
}

#menu-inicio button,
#menu-inicio a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--texto);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

#menu-inicio img { width: 22px; height: 22px; }

#menu-inicio button:hover,
#menu-inicio button:focus-visible,
#menu-inicio a:hover,
#menu-inicio a:focus-visible {
  background: var(--seleccion);
  color: var(--seleccion-txt);
}

/* ------------------------------------------------------------
   8. MÓVIL
   Las ventanas dejan de flotar y se apilan en una columna que
   scrollea. La barra de tareas pasa a ser la navegación.
------------------------------------------------------------ */
@media (max-width: 760px) {
  #escritorio {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* espacio para el mini-reproductor fijo */
    padding: 8px 8px calc(8px + var(--mini-alto, 0px));
  }

  #iconos {
    position: static;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 10px;
  }

  .icono {
    width: 74px;
    font-size: 10px;
  }

  .icono img { width: 28px; height: 28px; }

  #ventanas {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ventana,
  .ventana.maximizada {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    box-shadow:
      inset -1px -1px 0 0 var(--chrome-negro),
      inset  1px  1px 0 0 var(--chrome-luz),
      inset -2px -2px 0 0 var(--chrome-sombra),
      inset  2px  2px 0 0 var(--chrome-medio);
  }

  .ventana .cuerpo,
  .ventana.maximizada .cuerpo {
    max-height: none;
  }

  .barra-titulo { cursor: default; }

  /* En móvil no hay ventanas flotantes que mover ni maximizar. */
  .redimensionar,
  .btn-vent[data-accion="maximizar"],
  .btn-vent[data-accion="minimizar"] { display: none; }

  /* Botones más grandes: 44px de área táctil real. */
  .btn-vent { width: 26px; height: 22px; font-size: 12px; }

  #btn-inicio { height: 26px; padding: 0 10px; }
  .tarea { height: 26px; flex-basis: 120px; }

  #menu-inicio {
    left: 3px;
    right: 3px;
    width: auto;
  }
}

/* En pantallas muy angostas la bandeja ocupa demasiado. */
@media (max-width: 400px) {
  #bandeja .fecha { display: none; }
}

/* Respeta a quien pidió menos animación en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------
   9. BARRAS DE DESPLAZAMIENTO
   Por defecto salen blancas y rompen la ilusión, sobre todo en
   el tema nocturno. Firefox solo acepta las dos propiedades
   estándar; los navegadores basados en Chromium aceptan el
   pseudo-elemento completo, así que ahí queda el canal
   moteado y el tirador en relieve, como corresponde.
------------------------------------------------------------ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--chrome-sombra) var(--chrome-medio);
}

::-webkit-scrollbar { width: 16px; height: 16px; }

::-webkit-scrollbar-track {
  background-color: var(--chrome-medio);
  background-image: repeating-conic-gradient(
    var(--chrome-luz) 0% 25%, var(--chrome-medio) 0% 50%
  );
  background-size: 4px 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

::-webkit-scrollbar-button:single-button {
  display: block;
  height: 16px;
  width: 16px;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

::-webkit-scrollbar-corner { background: var(--chrome); }