/* ==========================================================
   Landing "Coming soon" - estética Windows 98
   Medidas tomadas del diseño de Figma (escritorio 1920x1080,
   móvil vertical 390x844). Cambia los colores aquí si hace falta.
   ========================================================== */

:root {
  --verde: #008080;        /* fondo del escritorio */
  --gris: #c8c4bc;         /* barra de tareas y botones */
  --blanco: #ffffff;
  --gris-claro: #dfdfdf;
  --gris-oscuro: #808080;
  --negro: #0a0a0a;

  --fuente-ui: Tahoma, "MS Sans Serif", "Segoe UI", Arial, sans-serif;
  --fuente-texto: "Segoe UI", Arial, Helvetica, sans-serif;

  /* Barra de tareas: se adapta a la altura de la pantalla.
     Entre 44 px (móviles en horizontal) y 62 px (escritorio). El resto
     de piezas (botones, iconos, separadores) escalan con ella. */
  --tb-h: clamp(44px, 12vh, 62px);
  --btn-h: calc(var(--tb-h) * 0.8);       /* botón Start y bandeja */
  --sep-h: calc(var(--tb-h) * 0.82);      /* separadores */
  --grip-h: calc(var(--tb-h) * 0.62);     /* asas verticales */
  --icono: clamp(20px, calc(var(--tb-h) * 0.49), 30px);       /* inicio rápido */
  --start-icon: clamp(24px, calc(var(--btn-h) * 0.8), 32px);  /* logo de Start */
  --tray-icon: clamp(22px, calc(var(--btn-h) * 0.75), 30px);  /* altavoz */

  /* Escritorio */
  --logo-w: 694px;         /* ancho del logo */
  --gap-logo: 57px;        /* espacio entre logo y texto */
  --pad-top: 15px;         /* ajuste fino de la posición vertical */
  --ico: 64px;            /* tamaño de los iconos del escritorio */
  --ico-fs: 18px;          /* texto bajo los iconos */
}

/* Móvil en vertical: medidas exactas del diseño de Figma (barra de 50 px) */
@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --tb-h: 50px;
    --btn-h: 40px;
    --sep-h: 40px;
    --grip-h: 30px;
    --icono: 25px;
    --start-icon: 32px;
    --tray-icon: 30px;
    --logo-w: 254px;
    --gap-logo: 83px;
    --pad-top: 72px;
    --ico: 52px;
    --ico-fs: 16px;
  }
}

/* Pantallas bajas (móvil en horizontal): el contenido se compacta */
@media (max-height: 520px) {
  :root {
    --gap-logo: 24px;
    --pad-top: 0px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--verde);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--verde);
  cursor: default;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Escritorio ---------- */

.desktop {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--pad-top);
  padding-bottom: var(--tb-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  display: block;
  width: min(var(--logo-w), 62vw, calc((100dvh - var(--tb-h) - 150px) * 1.1568));
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.soon {
  margin: var(--gap-logo) 0 0;
  color: var(--blanco);
  font: 400 20px/24px var(--fuente-texto);
  text-align: center;
  white-space: nowrap;
}

/* ---------- Iconos del escritorio ---------- */
/* Columna arriba a la izquierda; aquí se añadirán las carpetas. */

.iconos {
  position: fixed;
  z-index: 1;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.atajo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--ico) + 32px);
  padding: 4px;
  color: var(--blanco);
  font: 400 var(--ico-fs)/1.15 var(--fuente-ui);
  text-align: center;
  text-decoration: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.atajo img {
  display: block;
  width: var(--ico);
  height: var(--ico);
  margin-bottom: 6px;
  -webkit-user-drag: none;
}

.atajo span {
  padding: 2px 4px;
  border: 1px dotted transparent;
}

/* "Seleccionado" al pasar el ratón o enfocar con teclado */
.atajo:hover span,
.atajo:focus-visible span {
  background: #000080;
  border-color: var(--blanco);
}

/* ---------- Barra de tareas ---------- */
/* Pegada al borde inferior de la pantalla, a todo el ancho.
   El fondo llega siempre hasta los bordes; el contenido solo se
   aparta de las muescas laterales de algunos móviles. */

.taskbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--tb-h);
  padding: 0 max(5px, env(safe-area-inset-right, 0px)) 0 max(5px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--gris);
  box-shadow: inset 0 1px 0 var(--gris-claro), inset 0 2px 0 var(--blanco);
  font-family: var(--fuente-ui);
  font-size: 20px;
  line-height: 24px;
  color: #000;
  user-select: none;
  -webkit-user-select: none;
}

.taskbar img {
  display: block;
  -webkit-user-drag: none;
}

/* Botón Start (relieve hacia fuera) */
.start {
  flex: none;
  width: 102px;
  height: var(--btn-h);
  padding-left: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gris);
  box-shadow:
    inset -1px -1px var(--negro),
    inset 1px 1px var(--blanco),
    inset -2px -2px var(--gris-oscuro),
    inset 2px 2px var(--gris-claro);
}

.start:active {
  box-shadow:
    inset 1px 1px var(--negro),
    inset -1px -1px var(--blanco),
    inset 2px 2px var(--gris-oscuro),
    inset -2px -2px var(--gris-claro);
}

.start img {
  width: var(--start-icon);
  height: var(--start-icon);
}

/* Separador vertical grabado */
.sep {
  flex: none;
  width: 2px;
  height: var(--sep-h);
  border-left: 1px solid var(--gris-oscuro);
  border-right: 1px solid var(--blanco);
}

/* Asa vertical en relieve */
.grip {
  flex: none;
  width: 6px;
  height: var(--grip-h);
  box-shadow:
    inset -1px -1px var(--gris-oscuro),
    inset 1px 1px var(--blanco);
}

/* Inicio rápido */
.quick {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.quick img {
  width: var(--icono);
  height: var(--icono);
}

/* Espacio central: se estira para ocupar todo el ancho libre
   (aquí irán las ventanas abiertas) */
.spacer {
  flex: 1 1 0;
  min-width: 0;
}

/* Bandeja del sistema (relieve hacia dentro) */
.tray {
  flex: none;
  width: 140px;
  height: var(--btn-h);
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  box-shadow:
    inset 1px 1px var(--gris-oscuro),
    inset -1px -1px var(--blanco),
    inset 2px 2px #404040,
    inset -2px -2px var(--gris-claro);
}

.tray img {
  flex: none;
  width: var(--tray-icon);
  height: var(--tray-icon);
}

/* Pantallas estrechas: se ocultan adornos para que todo quepa */
@media (max-width: 380px) {
  .quick-grip {
    display: none;
  }
}

@media (max-width: 340px) {
  .quick,
  .quick-sep {
    display: none;
  }
}