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

@font-face {
  font-family: "WinRetro";
  src: url("/media/fonts/W95FA.otf") format("truetype");
}

body {
  background: #008080; /* clásico escritorio Win95 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "WinRetro", Tahoma, Arial, sans-serif;
}

/* =============================
   Ventana principal
   ============================= */
.window-explorer {
  width: 800px;
  height: 500px;
  background: #c0c0c0;

  /* Borde 3D */
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;

  display: flex;
  flex-direction: column;
}

/* =============================
   Barra de título (GRIS)
   ============================= */
.title-bar {
  background: #808080;
  color: black;
  padding: 4px 8px;
  font-size: 14px;

  border-bottom: 1px solid #404040;
}

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

/* =============================
   Menú (File Edit View...)
   ============================= */
.menu-bar {
  background: #c0c0c0;
  padding: 4px 8px;
  display: flex;
  gap: 16px;

  border-bottom: 1px solid #808080;
}

.menu-bar span {
  cursor: default;
}

/* =============================
   Área hundida
   ============================= */
.content-sunken {
  flex: 1;
  padding: 6px;
  display: flex;
  gap: 6px;
}

/* Bordes hundidos (inset) */
.pane-left,
.pane-right {
  background: #ffffff;

  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

/* Panel izquierdo estrecho */
.pane-left {
  width: 180px;
}

/* Panel derecho grande */
.pane-right {
  flex: 1;
}


/* =============================
   Cabecera interna de panel
   ============================= */
.pane-header {
  background: #c0c0c0;
  padding: 4px 6px;
  font-size: 13px;

  border-bottom: 1px solid #808080;
}

/* =============================
   Contenido blanco
   ============================= */
.pane-content {
  background: #ffffff;
  padding: 6px;
  height: calc(100% - 24px);
  overflow: auto;
}

/* =============================
   Árbol estilo Explorer
   ============================= */
.tree {
  list-style: none;
  margin: 0;
  padding-left: 14px;
  font-size: 13px;
}

.tree li {
  margin: 2px 0;
}

.tree a {
  text-decoration: none;
  color: black;
}

.tree a:hover {
  text-decoration: underline;
}

/* Niveles de profundidad */
.level-1 { padding-left: 0; }
.level-2 { padding-left: 14px; }
.level-3 { padding-left: 28px; }